Quick website optimization techniques

Published on January 23, 2021

← Back to tips

Audited a friend’s website with @ichbinvivek, we found the following to be the simple but quick ways to improve performance.

Going from ~45 Rightwards arrow 80+ on Google PageSpeed

Website Details:

  • React App
  • Web Listing Site
  • Uses Material UI

1/ Image Lazy Loading

Using the native image lazy loading cut the page weight by almost half.

Not only it resulted is smaller size, but also helped in improving the FCP of the page.

2/ Image Caching Strategy

The site was loading images from s3 even though it was expected to go through cloudfront.

Adding a caching policy for the images reduced the time to first byte from 250ms to less than 50ms.

3/ Host preconnect and DNS prefetch

Use link preconnect and dns-prefetch for external resources such as icon fonts or analytics services.

Reduced the connection time while fetching the necessary resources

Reference: https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch#best_practices

4/ Fonts (1/2)

Website was using Google fonts, with a lot of font weights. Even as only 4 font weights were used, additional font weights were being loaded.

Medium star Make sure to load only the needed font weights

5/ Font (2/2)

Due to recent changes to how Chrome handles http caching, it is now ideal to self-host fonts for your website.

Reference: https://developers.google.com/web/updates/2020/10/http-cache-partitioning

💡 Protip:

Use PageSpeed insights as the first step to audit your website. It is more reliable than running lighthouse audit on your local machine.


🎉 Interested in Frontend or Indie-hacking?

I talk about the latest in frontend, along with my experience in building various (Indie) side-projects