15 Aug Ten Ways to Improve Your Website’s Loading Times and Google Core Vitals

What Are Core Web Vitals

At the beginning of this year, Google introduced a new set of criteria that define any given website’s stability, speed, and responsiveness. The three main criteria are as follows:

• Cumulative Layout Shift defines how much a webpage’s structure should shift and change position. The benchmark for this is 0.1.
• Largest Contentful Paint measures how long it takes to load the main content of a page. The best results should be 2.5 seconds or less.
• First Input Delay is the time between a webpage opening and the moment it first becomes interactive. The most commonly sought timeframe is around 100 milliseconds.

With these basic terms in mind, let’s look at how you can use Core Vitals to make your website as fast and efficient as possible.

1. Optimise Your CDN and Browser Cache

Your FID and LCP scores should be improved quite quickly using this method. Serve your static assets from a CDN, or cache them on a service like Cloudfront from AWS. Browsers will get the needed results much more quickly after this.

Additionally, dynamic pages can be cached in your CDN with correct TTL values already applied depending on how your applications behave.

2. Use Exact Sizing for All Ads And Media

As far as your CLS scores go, this is one of the most vital factors. Always check that you’ve set a specific height on images or tagged assets, which is seriously important, especially for the fold-level components. If you’re pressed for time, you can always set the heights to auto and get an approximate size that should work well enough in a pinch.

Ads also factor into CLS, and you need to check their heights and sizes thoroughly to make sure they don’t displace content by displaying incorrectly. This may require contacting your advertising service provider or shopping around for a few different options if your CLS is being impacted consistently.

If you’re on a WordPress platform, we’d recommend considering a plugin like Ewww, which can automatically deliver your images in Webp and enable features such as lazy load to delay loading of all images on page load.

3. Load Right Resolution Images the Lazy Way Based on the Type of Device Being Used

This technique produces results incredibly quickly and should be one of your first considerations. By using a lazy loading package to, surprisingly enough, lazyload all the images on your site, your LCP will be impacted positively, primarily by bringing down the weight of the page and ensuring it loads as quickly as possible.

It’s also essential to set the resolution for each asset based on the type of device being used to view your site. Loading resolution as a one-size-fits-all will make the site that much slower on smaller or less powerful devices and impact your LCP in the worst possible way.

4. Use SSR and CSR the Smart Way

Google is always keen to encourage and promote well-scored Server Side Rendered (SSR) pages to inspire valuable SEO performance. However, you do have to consider the balance between SEO and Page Load Performance. Pages with too much content can take ages to load server-side and bring down the general performance on your site.

Actual content should be kept above the fold, while other site features should be kept back to improve SSR. This asynchronous loading style takes a great deal of time off your loading and rendering scores.

5. Break Everything Down by Splitting Your Code

Using the most significant file sizes for assets (particularly JS files) is generally a bad idea. Instead, you should allow h2 protocol and leverage that to again load assets asynchronously in separate pieces.

Also, instead of using one huge HTML file, you can divide the site into multiple smaller files and thus decrease the burden of loading.

6. Use Brotli Compression Techniques to Scale Down Static Assets

As far as compression goes, Brotli seems to be the best option in terms of loading speed. However, higher compression ratios will add to package and build times in terms of DevOps.

But at the end of the day, site loading time is the most crucial factor and should be prioritized above anything else.

7. Make the Response Content and Api Request as Efficient as Possible

Undoubtedly, the most vital element in terms of loading speeds, even the most minor changes, can yield massive results with API. API responses and requests should be checked frequently for the sake of optimization.

Also, define the data parameters and use only what’s necessary to save yourself a lot of time and effort. Choosing a network for your APIs also deserves careful consideration, as hosting on the wrong subnets can massively hike up the time requirement.

8. Cut Down the Overall Size of Your Pages and Documents

Heavy code landing pages (anything above 75kb is likely to be serious) are very undesirable, as they drastically increase loading times and fetching times.

Always try to keep things clean on the code side of things since it’s easy to miss bits of redundant data.

9. Replace Video Thumbnails With Placeholder Images

Many site viewers prefer not to engage with video content, so loading the thumbnails on videos that aren’t playing is a waste of resources in this case.

It’s a better idea to choose a placeholder image or blank video space to conserve resources and thus increase the site speed.

10. Choose the Fastest Server Available

This may seem like an obvious factor, but it still bears saying. Investing in the best server infrastructure is usually a great idea since it directly affects the speed of your entire site without exception.

By spending a bit more money, you’ll save a considerable amount of time overall. Cloudflare is an excellent DNS-level tool that allows you to optimize your site cost-effectively without costly server resources.

Conclusion

The tips above will get you on the right track to achieve a better Page Speed score and core vitals. However, you may find yourself on a bloated platform or theme that will often mean the best course of action to create a new, cleaner and more lightweight site.

Suppose you’re scratching your head over all these terms or feeling daunted at the idea of reworking your whole site for added speed. In that case, you may want to consider a site review from a web design expert who will likely suggest the best course of action to optimize your existing site or suggest evolving to a new site with a codebase that is more optimized for core vitals.