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.
I talk about the latest in frontend, along with my experience in building various (Indie) side-projects