By Jerome Kalumbu

Optimise for performance

Consider performance right from the beginning

Optimise your site resources to improve page rendering times and deliver content quickly to users.

Performance is a crucial aspect of good UX since users must access the content as fast as possible to accomplish their goals.

Problem: Heavy resources slow website loading time and negatively impact user experience

Most websites take too much time to load because resources like scripts, fonts, images and CSS are poorly optimised and therefore drastically increase the weight of pages.

When resources are heavy to download and scripts block the page's rendering, it frustrates users and makes businesses lose sales because visitor will leave the page.

Solution: Optimise your resources

A good way to reduce the total page size of your website and improve page rendering times is to reduce HTTP requests and therefore, optimise resources like images, scripts, fonts and CSS by following some basic best practices.

Performance checklist

Basics for optimising your interfaces for better performance.

Did we optimise our image formats?
Did we optimise our responsive images?
Did we prioritise key resources? (e.g images, video, fonts…)?
Did we lazy-load non-critical images?
Did we fetch late-found resources?
Did we eliminate render-blocking resources?
Did we warm connections to origins?
Did we optimise our fonts?

Takeaways

Fetch late-found resources with rel=preload (e.g. heavy hero images, fonts...)
Use fetchpriority=high to prioritise key resources
Lazy load non-critical images with loading=lazy (e.g. images below the fold)
Add decoding="async" to non-critical images
Add async="" and defer="" to prevent JS script from blocking page rendering
Warm connections to origins with rel=preconnect (connection to third-party sites)
Use inline SVG to display vector elements
Use Squoosh.app to compress your images in AVIF or WEBP formats
Optimise your responsive images for performance
Host your images on Cloudinary or Sirv
Self-host your fonts
Avoid layout shift by applying width and height attributes on these images
Add rel="stylesheet" and media="screen,print" to stylesheets

Resource

Links for further reading:

Don't Start With Visuals

By Jerome Kalumbu