Skip to main

My Webpage performance checklist

• 2 min read

Optimising a webpage performance can be tricky at times so i generally refer to this list when i’m trying to optimise a webpage. Also note, not all of these tips/techniques would guarantee to work on your site so always benchmark and test your site. I prefer to run Lighthouse to get a baseline score before optimising anything and then incrementally try different optimisations.

Preloading Fonts and Images

Preloading requests tells browser to fetch and load resources lot earlier (higher priority) without blocking rendering. We can use link rel="preload" tag to specify requests that need to be preloaded.

Also it’s generally a good idea to specify the request content type using as attribute and the file type using type attribute since browsers that don’t support the provided type value would completely ignore preloading that request.

Font Preloading

<link
  rel="preload"
  src="my_font.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

Image Preloading

<link
  rel="preload"
  src="my_awesome_lcp_img.avif"
  as="image"
  type="image/avif"
/>

Even better way to specify preload requests is using Link header in your server response. Since browser sees these headers before parsing the HTML it can prioritise these requests better.

# Server Response Headers
Link: </my_font.woff2>; rel="preload"; as="font"; crossorigin="anonymous"

This pairs well with 103 Early Hints server response.

Sizing and Compressing Images

Using responsive images and efficient image formats can have high impact of webpage performance. Usually this process can be automated if you are using Frameworks like Astro, Next.js, Nuxt.js etc since they come with their own custom Image components. I sometimes prefer to do this manually using following tools: