Key Optimizations for Improving Site Performance

When it comes to web performance, every millisecond counts. Users expect fast-loading websites, and search engines like Google use site speed as a ranking factor. 

Google has provided a tool named Page Speed Insights to evaluate your page speed with respect to the following metrics: First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT), Cumulative Layout Shift (CLS) and Speed Index (SI). 

A weighted calculation of these metrics results  in a page speed insights score for that page. When you evaluate your webpage for mobile or desktop, it also indicates opportunities for improvement of the score.

To improve your website's performance and achieve high Page Speed Insights (psi) scores, you need to optimize various aspects of your site, including fonts, CSS, JavaScript, images, and Time to First Byte (TTFB) to get better scores on all these metrics, thereby leading to a better overall score. 

Here are some things you can do to improve your psi scores. Apart from the general performance optimizations, these are additional tunings, such as utilizing CDNs, optimizing images, caching,  and other backend performance optimizations.

Fonts

Preconnect to Font Domains

To establish connections to font domains early on, use the following code:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">

If you're using Next.js, use its built-in font optimization for Google Fonts. Next.js downloads the respective font and bundles it into your website, avoiding additional network calls for fonts. In this scenario, you won't need the preconnect code.

Inline Font Faces

Move font faces inline into the page head along with critical styles rather than burying them inside large bundled CSS files. This speeds up font downloading and eliminates layout shifts caused by font swapping.

Preload Local Fonts

Preload locally used fonts:

<link rel="preload" href="/fonts/FuturaCyrillicBook.woff" as="font" type="font/woff" />

Be mindful of the resources it consumes and use this with caution. It's often better to inline font declarations and critical styles and let the browser download fonts as needed.

Use Font Display

Utilize the font-display property to choose the right font loading strategy for your site. For example:

@font-face 
{ 
  font-family: 'Jost'; 
  font-style: normal; 
  font-weight: 400; 
  font-display: swap; 
  src: url(https://fonts.gstatic.com/s/jost/v14/92zPtBhPNqw79Ij1E865zBUv7myjJTVBNI4un_HKOEo.woff) format('woff2'); 
}

Be aware that the chosen strategy may impact First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS). Select the strategy that best fits your scenario.

Reduce Font Families

To reduce connection costs, use fonts from a single domain and minimize the number of fonts needed to be loaded. In some cases, you can self-host fonts if your site uses a Content Delivery Network (CDN) and HTTP/2 connections. Self-hosting may not offer better performance than third-party hosting in other cases.

Use WOFF2

Wherever possible, use the WOFF2 font format. It offers better compression and wider browser support.

CSS

Code Splitting

Separate the critical vs non-critical CSS and inline the critical CSS. You can then delay loading the non-critical CSS. This enhances your site's performance and loading speed. If you're using Next.js, consider using CSS modules to encapsulate styles, making them more modular and maintainable and reducing unused CSS loaded onto the pages.

Avoid LCP Elements in CSS

Avoid setting the Largest Contentful Paint (LCP) element as a background image in CSS. These elements are not discoverable by the browser preload scanner and force the browser to wait for CSS to download before fetching the LCP image. Ensure that the LCP element is easily discoverable and initiates downloading as soon as possible.

JavaScript

Minimize Dependencies

Check the dependencies added to your project, as they contribute to the client bundle's size. Import only what you need from packages, not the entire library. Avoid CommonJS modules and use ES modules as much as possible, as CommonJS modules are not tree shakable and result in large bundle sizes.

Analyze Client Bundles

Use tools to analyze bundles and examine the size of JavaScript packages within them. Identify and optimize large libraries and their imports. Be wary when using packages such as Lodas, that result in larger bundle sizes if not imported correctly. Also evaluate if the package size imported is worth the task at hand or if it is better served through custom coding.

Use Defer

Apply the defer attribute to your script tags to defer the loading of JavaScript files, allowing other page elements to load first to improve on LCP.

Code Splitting

Javascript payload size is one of the main reasons sites perform poorly on page speed insights. All the time it takes  to download, parse, compile, and evaluate Javascript code on the browser’s main thread is a lost opportunity to do other things. So, sending only what is needed for the page by code splitting will help reduce the bundle sizes and the time to download, parse, compile, and evaluate that code. You can perform code splitting using dynamic imports.

Images

Usually, images tend to be LCP elements on the page. As such we need to ensure that the LCP element has less/no dependencies on CSS/Javascript and is easily discoverable with fetch priority that will prioritize downloading the LCP element image.

Optimize Images

Ensure your images are optimized and served in modern formats like WebP or AVIF. If you're using Next.js, take advantage of the Next.js Image component for automatic image optimization.

Set Fetch Priority

Identify the Largest Contentful Paint (LCP) element, and make sure its fetch priority is set to 'high.' This ensures that the LCP image starts downloading early in the timeline, alongside CSS, or as soon as possible. In the case of carousels, identify the LCP element, which is usually the first image in the carousel and set its fetch priority to ‘high’ while leaving the rest of the slide images in the carousel at low priority (as they are not in view). Here is an article on fetch-priority.

Set Aspect-Ratio for images

Specify aspect-ratio, enabling the browser to calculate aspect ratios. This helps avoid layout shifts when images load.

Inline CSS Styles for LCP element

Inline CSS styles for the LCP element, thus removing the dependency on CSS downloading for it to appear.

Replace Animated GIFs

Replace animated GIFs with video elements to improve loading times and reduce the impact on page speed.

Serve Responsive Images

Implement responsive images using the srcset attribute to deliver the most suitable image size for different devices and screen sizes.

Lazy Loading

Enable lazy loading for images and videos that fall below the fold. This conserves resources and enhances page speed.

Server-Rendered Markup

Ensure that the markup for the LCP element is server-rendered and not dependent on JavaScript loading, as this can significantly impact loading times.

Time to First Byte (TTFB)

Reduce TTFB as much as possible, as it directly affects First Contentful Paint (FCP) and Largest Contentful Paint (LCP). Optimize server response times, use content delivery networks (CDNs), and minimize server-side processing to achieve low TTFB.

Wrapping Up

By implementing these performance optimizations, you can significantly improve your website's Page Speed Insights scores, resulting in a faster, more user-friendly, and SEO-friendly website. Remember that performance is an ongoing process, so regularly test and refine your site's performance for the best results.