Last Updated on August 19, 2021 by BrodNeil
With its first announcement in 2010, Google has long used page speed as a ranking factor. Since then, Google has settled on three metrics for page speed that are now regarded as the most important: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). These metrics, collectively known as Core Web Vitals, are intended to measure the perceived page speed rather than the factual page speed.
Largest Contentful Paint
The time it takes for the viewport’s largest element to fully load is measured in Largest Contentful Paint. Because the largest element is often an image, image optimization is the most critical factor in this measure.
First Input Delay
Cumulative Layout Shift
When a page loads, Cumulative Layout Shift determines whether the elements on the page move around. CLS depends on properly defined size attributes and resources loading in a specific order, from top to bottom.
Ways to Improve Your Website’s Page Speed
1. Set image dimensions
It may take some time for the browser to properly size your images and videos if you don’t include image dimensions in your code. This means that your page’s content will jump around, affecting your CLS score. To avoid this problem and effectively improve your page speed, make sure your photos have their set width and height properties.
2. Serve images in next-gen formats
Image formats aren’t all created equal. Compared to AVIF, JPEG 2000, JPEG XR, and WebP, JPEG and PNG currently have significantly low compression and quality characteristics. WebP is perhaps the most significant of the formats listed. It allows for transparency and animation, as well as lossy and lossless compression. Suppose your website isn’t built on a CMS platform, or you don’t want to install a lot of plugins. In that case, you can use online converters or graphics editors to convert your images.
3. Compress images
Whether you use next-generation image formats or not, compressing your photos is still a viable technique to reduce the overall page size. Suppose you don’t want to install too many plugins and risk slowing down your website. In that case, you can alternatively use online compressors. You can also use graphics editors to compress your images before uploading them to your website as a last option.
4. Defer offscreen images
Offscreen images display below the fold or aren’t visible until the user scrolls past the first screen. Everything below the fold should be delayed until above-the-fold items are fully loaded. The above-the-fold area is where Google measures your page speed. It is, therefore, where you should focus the majority of your optimization efforts.
5. Convert gifs to video
Because gifs are typically larger than videos, converting a huge gif to a video can result in a size reduction of up to 500% or more. You can use any online converter or download a tool to convert gifs to videos. WebM and mp4 are the two video formats that Google recommends. WebM is similar to WebP in that it is lighter, although not all browsers support it yet.
6. Defer unused CSS
CSS that isn’t used can cause a browser’s render tree to take longer to build. The more CSS that is not used, the longer it will take a browser to calculate the styles for each node. Identify any CSS that’s not in use or isn’t critical, and either remove it or adjust the order in which it loads.
7. Minify JS and CSS
Unnecessary comments, spaces, line breaks, and code fragments are frequently seen in JS and CSS files. Although the average minification is much smaller, removing them can make your files up to 50% lighter.
8. Extract critical CSS
CSS is a render-blocking resource by default. The browser will not render your page until it has acquired and parsed CSS files, which can take a long time. To fix this, take only the styles required for your page’s above-the-fold region and put them to your HTML content. The rest of your CSS files can be loaded asynchronously. This will increase your LCP scores dramatically and make your sites appear faster to users.
9. Improve server response time
The most irritating aspect of server response delays is that various reasons can cause them. This includes slow routing, slow application logic, and resource CPU starvation, etc. Switching to better hosting, which in many cases involves moving from shared to managed hosting, is a simple non-dev solution to these difficulties. Managed hosting typically includes CDN networks and other content delivery techniques that improve page speed.
10. Defer/async third-party JS
Third-party resources, such as social sharing buttons and video player embeds, are typically heavy on resource consumption. Suppose any of your third-party resources aren’t necessary for the appearance or functionality of the above-the-fold. In that case, you should remove them from the vital rendering route.
11. Preconnect to third-party resources
It takes a long time to establish connections, especially secure ones. DNS lookups, SSL handshakes, secret key exchange, and certain roundtrips to the final server handling the user’s request are all required. You can save time by pre-connecting to the required origins ahead of time.
12. Split long tasks
13. Preload key resources
Browsers choose which resources should be loaded first. They frequently try to load the essential resources first, such as CSS, before scripts and graphics. You can adjust the priority of content load in modern browsers by preloading resources and letting them know what you’ll need later.
14. Enable browser caching
Without browser cache, every time you visit the same page, it is completely reloaded. Some page elements are cached in the browser memory, requiring only a portion of the page to be loaded from the server. On subsequent visits, the page loads substantially faster, and your total page speed scores improve.
15. Reduce DOM size
Speed, runtime, and memory performance can all be affected by a vast DOM tree with complicated style constraints. A DOM tree with less than 1500 nodes total, a maximum depth of 32 nodes, and no parent node with more than 60 child nodes is the best practice.
16. Avoid too many redirects
One of the most important things you can do to improve the speed of your site is to remove all unwanted redirects. Every additional redirect slows page rendering and increases the number of HTTP request-response roundtrips.