7 Optimization Steps To Pass Core Web Vitals Assessment
The idea of auditing your website’s code line by line in an attempt to get it optimized in preparation for Google’s June 2021 algorithm update is incredibly daunting. Before you dive down the rabbit hole, you should tick off these 7 optimization steps that will help you pass your core web vitals assessment... or at least get you 90% of the way there.
We should point out that most of these tips are pretty high level. We’ve added a handful of resources at the end of the article if you need to dig deeper.
Only about 16% of all the websites in the U.S. are currently passing the core web vitals assessment. This is evidence that it’s not simple to pass without thinking through the metrics and making the right changes to how your site operates.
Before we list the steps, you should quickly brush up on how to measure the core web vitals on your website to check how you’re currently performing.
Alright, on to the list.
1. Use a Content Delivery Network
Delivering assets through a CDN helps reduce the physical distance between the request and response, reducing the network latency. Reducing network latency improves your sites load speed, particularly for requests that are a long distance apart.
Using a CDN can have a direct impact on your site’s Largest Contentful Paint.
If the biggest element on your page (i.e. your largest content) like a hero image, is hosted on a server on the other side of the world, the network latency can have a significant impact on how long it takes to load.
Uploading your site’s content onto a CDN means that a version of that file should be physically closer to the browser trying to load it.
Setting up a content delivery network is fairly straightforward, depending on how your website is set up. For websites built using a static site generator like Gatsby which is our go-to framework, CDN configuration is as simple as deploying to Cloudflare or Amazon S3.
2. Render A “Shell”
Cumulative Layout Shift can be a tricky problem to fix, especially if your website makes heavy use of advertising, embeds or iframes. Sometimes these elements can load onto the page in unexpected ways and cause all of the other elements to do a little dance.
To address this problem your website should render a “shell” using CSS to reserve the space where these problematic elements will appear once they’re loaded in.
Make sure when you’re reserving the space with placeholder content that you’re using the right dimensions otherwise you’ll end up with CLS.
It’s also a good idea to keep your non-sticky ads away from the top of the page and avoid collapsing the space when no object is loaded.
3. Use Inline Styles
Inline styles are generally frowned upon by the development community. And rightfully so. Using inline styles everywhere is just a messy way to organise your code.
But loading the “critical” parts (anything above the fold) of your site with inline styles means they don’t have to readjust when the style sheet is downloaded separately. This goes a long way to preventing CLS.
This is another benefit we’ve found from using GatsbyJS. Using a plugin like Gatsby-styled-components, it will take the finished components and inline the styles for you!
4. Stop Requests From Blocking Page Load
Before the browser can render the page it needs to parse the HTML markup. Anytime the browser hits a script that needs to be executed, it will prevent the rest of the page from rendering.
The name of the game here is to avoid these scripts if possible.
But this isn’t realistic advice.
If you can’t get rid of it, there are two other options. If it’s small, you can inline the script to avoid excessive network requests. But If the script is too big, this will reduce your initial load time.
The second option is to defer the loading of the script to avoid impacting the page’s load time. This only works if the functionality added by the script can be delayed for a couple of seconds.
5. Delay third-party scripts
This step is pretty similar to the last.
As Google says on their blog;
“Third-party scripts are a predominant cause of performance slowdowns and are often caused by resources outside of your control.”
This statement is kind of ironic because it’s often Google Tag Manager, Google Ads, YouTube or some other Google-owned service at the heart of the issue.
Regardless, if you identify a third-party script that is necessary on your website but affecting your performance, it’s best to delay its loading or set it to load asynchronously.
6. Minimize JavaScript Bundle Size
If you’re not mindfully optimising your site as it comes to life it’s easy to fall into the trap of including overly heavy libraries and leaving “dead code” in your website. Failing to lighten the initial bundle size can impact both your LCP and FIP.
Where possible, hunt out lightweight libraries. For example, if you’re loading React across your project but only using a handful of the modules, you could consider switching to Preact (3Kb) as a lightweight alternative.
Removing dead code from your initial payload (and across your entire project) is an obvious optimisation to suggest. It’s not always the easiest to implement, especially if you’re working on an older project.
Where possible try to minify your code. Refactoring your JavaScript can be challenging and time-consuming, but it’s all in the name of optimisation!
Finally, if you’re using a code bundler like Webpack, you can consider bundle splitting. This approach uses new routes to dynamically fetch modules at the time that they’re required rather than loading them when the site initializes.
7. Progressively Load Images
Progressively or lazy loading images can significantly decrease your website’s initial payload and reduce the amount of data a user needs to consume to interact with your site. This can have a direct impact on your site’s LCP score since big poorly optimised images hiding somewhere on a page are often culprits of high LCP scores.
Loading images into the document’s markup at a lower resolution can also help avoid CLS. It also makes for a better experience as a user. It’s hard to articulate exactly why, but waiting for an image to turn from low to high resolution feels intentional whereas waiting for an image to appear out of nowhere feels clunky.
Other resources
The purpose of this article wasn’t to create a forty thousand word document on fixing your core web vitals. Keeping with the theme of quick load times and optimisation, we’ve tried to keep our recommendations lightweight.
However, you might need to dig deeper to fix specific issues. The following articles are great reading to help you push through more specific issues for each metric:
https://web.dev/browser-level-image-lazy-loading/
https://addyosmani.com/blog/performance-budgets/
https://developers.google.com/web/fundamentals/performance/why-performance-matters/
https://developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting/
https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive
https://www.contentful.com/blog/2017/10/10/put-your-webpack-on-a-diet-part-1/
https://www.keycdn.com/support/the-growth-of-web-page-size
Conclusion
Time is drawing near to Google’s user experience release. If you’re in the same position as us, you’re probably a little anxious about the impact it will have on the websites you manage, but also looking forward to the results.
If you’re worried about the impact it will have on your poorly configured site, now is the time to act.
