My Webpage performance checklist
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:
- Compress Images: Compressor.io, ImageOptim Mac App
- Convert to Modern and Efficient Image Formats: Squoosh
- Generate Responsive Images: Resonsive Breakpoints