It is a neon question mark

Core Web Vitals

test

Core Web Vitals 101

Core Web Vitals are getting a lot of attention. This is because Google announced that they are going to be a key metric going forward.

So what does this mean for you? Well, honestly not much has changed, just the wording. Core Web Vitals focuses on page speed, UX , and page stability.

The best option is to use Google Page Speed Insights and test your site, it will then give you some information on how to improve your scores. I will also try to give short informative, easy to understand explanations and tips for common problems.

  • Largest Contentful Paint – This is how long it takes to load the largest element in the viewport. Pretty simple right? It is the standard sight speed metric which was already standard. It just happens to be more specific.
  • First Input Delay – The delay after a user clicks/ makes an input on the page and the browser response to the first user input. This how to do with the user’s experience. This sounds a lot like site speed, but I believe it mostly will have to do with scripts rather then the visual metric that is Largest Contentful Paint
  • Cumulative Layout Shift – This is going to be a problem if you have dynamic content or your images heights/widths are not defined. As the page loads the dynamic content get’s loaded in and shifts other content down creating an unfriendly user experience.

I will update with more tools you can use to check and help fix these problem, but it is nothing to really stress about, your goals should still be the same as always – Provide a fast, user friendly website that serves useful content, preferably unique. =) <— unique smiley face from a blog post.

I fucking nailed it this time guys.

Updates, more specifics and tools to come if this page get’s any hits.

Tools!! 🙂

  • Chrome has a Lighthouse extension that can be useful for analyzing multiple websites quickly
  • Pressing F12 on Chrome will bring up developer tools, last tab is Lighthouse which allows you to do another scan quickly.
  • A tool specifically for CLS (the shifting of content when it loads)
  • Another scanning tool for information Webpagetest
  • The one, the only, Google Page Speed Insights

Fixing problems:

Again, as this post gets traffic, I will get more specific, but let’s assume you are on a WordPress. The two big optimizers are going to be your caching plugin and whatever you are using to optimize images. If you look at my site right now, non optimize images, it’s terrible. It really hurts my site speed, lowering scores across the board.

It is my bad. I was lazy, I did not resize images before I uploaded them and I only use free version of plugins so Shortpixel (The images optimizer I recommend) is already out of credit. I can wait until next month or I can get less lazy and optimize them a bit on my own…probably will just wait.

Caching, I use WP-Rocket. The paid version is better than the free version. All the options here are important. Can you defer JavaScript? Do you want it concatenated (This depends, old http was more single threaded, concatenation was good, http2 is multithreaded, so it might not be so good on your site). Critical CSS, prioritize the CSS for the very top of the viewpoint where visitors will be looking, this can help with perceived speed and also CLS.

Alright, possible more to come with some examples.

Stay golden pony boys.

One Last Thing

One last nugget of advice before I go…If you are serious about your blog, do not be stingy and hire experts. Using a theme builder is nice and easy and everyone can do it, but it will be slower than if you got a dev to make it custom for you. There are a lot of options in caching plugins that are useful and I have no intention of going over all of them. There are CDNs and other things that you should already have setup or at least be looking into and that takes a bit of DNS knowledge.

Content is still the most important thing on your website so unless you believe you can focus on being an expert on your content and an expert on SEO and good web practices.

Focus on the content and hire someone else to focus on the site maintenance.

I Promised An Update

Kind of…no promise was actually made but I have an Idea

My Plan/Test

There are so many way to make a page in WordPress that it is difficult to decide which is best. You obvious want static content for load speed, but if everything is static then you defeat the purpose of having a CMS. I previously made my front-page with Elementor. It is a good plugin and I am not bashing it, but it can be a bit slow because of all it does for you.

So What Is The Plan?

Well, making a custom template for everything and only querying the DB when needed seems like the way to go, but that defeats all these cool website builders including Guttenberg. Is there an inbetween?

Above The Fold

I am going to try this. Remaking Home page with it’s own template, everything that is the top half can be hardcoded, and the styles inline. The rest will be the post loop continuing the content and making it changeable. The downside to this, not being able to change the Hero Image as it’s above the fold. Maybe I can just set an image with a define height and width and use ACF to query just the image and not the whole post loop. Do I know if this will be faster? I am not sure, but it’s worth a try. I will update when this is successfully completed.


Comments

One response to “Core Web Vitals”