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.
- 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
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.
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
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.