More in Learn
Frontend Performance Checklist
In the speed-obsessed world of today, better performance comes with serious business gains. This frontend performance checklist is a cumulative list of items that we at Crystallize found important when creating a Superfast web application that is Superfast.
8 seconds (source link). That’s the average attention span today, and that’s how much time you have to spark interest. From that stat alone, it’s kind of obvious why website performance matters. No?
70% of consumers admit that page speed influences their likelihood to buy. (source link)
Performance gains come with better click-through rates (CTR). It plays a crucial role in retaining users and ensures they have a pleasant user experience while browsing your website (impacts customer loyalty) but also affects your search engine ranking (SEO) and AdWords pricing.
Having all of these benefits in mind, it pays off to have a performant website, right?
So, how do you do that?
Before diving into the checklist, let’s start by measuring your website's performance. The results will help you discern the main issues you must resolve to improve your performance score.
There are a lot of tools available to help you do that. Below is a list of some of the tools you can use to test how performant your web application is.
- PageSpeed Insights
- Lighthouse in DevTools
- WebPageTest
- Web.dev
- GTMetrix
- Use the Web Vitals Chrome extension to debug Core Web Vitals issues.
If you want to dig deeper, check out the post where we extensively discuss Frontend Performance Measuring & KPIs.
Let’s jump into the checklist now!
So we learned why performance matters and how to measure it. But who’s responsible for it? Well, everybody on your dev team.
It starts with relying on a eCommerce platform that can support everything you throw at it, i.e., the number of products, number of orders, multiple languages, multiple store locations, etc., and the flexibility it offers when it comes to information architecture. Then it’s the UX designer’s job to combine rich content and storytelling with the product information to design engaging customer journeys. Finally, it’s up to frontend devs to make it work.
The checklist before you is a list of elements you as a frontend dev should check or at least be aware of when working on a project. It’s platform agnostic, i.e., you can use these suggestions for your WordPress or Shopify website just as you can use it for Crystallize builds.
The reality is you might not need to go through all of the suggestions as they depend on the project at hand. With that in mind, the checklist is intended to be a starting point for many of you to build your own project-based checklist.
OK. Performance-first mindset is on. Let’s get to the checklist.
This checklist looks at over all performance. Should you have the need to improve individual core web vital and other vital metrics have a look at our individual metric pages.
HTML is what builds the structure of your website. Not properly optimizing your HTML can result in an increased page load time, leading to a bad user experience. There are various ways to optimize the HTML of your website.
Clean up any redundant code, including any additional whitespace and comments. This leads to a decreased file size which in turn reduces the load time.
Enable compression. Compression shrinks the file size by replacing any repeated code with references to the previous occurrence. Make sure to enable GZIP or Brotli compression on your website for an improved page speed as well as a noticeable reduction in bandwidth usage.
Load external files in the correct order. If you’ve to load a JavaScript file in the <head> tag, make sure to place it after the CSS file. Otherwise, the better way is to load the JavaScript files at the bottom of the <body> tag. This reduces the load time significantly.
Most times, CSS is not on the top of the priority list when it comes to performance enhancements. However, it does have an effect, and it is best to optimize it so it does not affect the performance of your website negatively.
Avoid the usage of @import. The @import rule is render-blocking which means that every file being imported that way needs to be loaded in a sequence leading to an increased load time.
Use critical CSS. Critical CSS refers to the CSS applied to elements that are immediately visible when someone visits your website. Inline the critical CSS in the <head> tag, and then you can load the rest of the styling asynchronously to avoid render blocking. Libraries like critical can be used to generate critical CSS.
Optimize and minify CSS files to reduce the overall file size. Tools such as clean-css can be utilized to achieve this.
Use preload. As the name suggests, the preload user hint tells the browser to fetch a resource earlier than it usually would, leading to faster rendering.
With new JavaScript frameworks dropping routinely, we can say that it is fairly popular and one of the most used languages when it comes to developing a website. Hence, it is also one of the major things that affect performance and should be properly optimized to provide a smooth user experience.
Avoid overusing frameworks and third-party libraries for menial tasks. It causes an overhead and increases the page size.
Use async and defer when loading external JavaScript resources. This significantly reduces the initial download size by letting the browser know that the file does not need to be downloaded right away and that it can instead be downloaded asynchronously in the background.
Minify your JS file. Minification refers to minimizing code in your pages and is one of the methods used to improve performance by reducing load time for a web application. There are various tools available to help with minifying your files, some of these include UglifyJs and Minify.
Make sure to remove any unused code. Doing so will reduce your overall file size.
Utilize code-splitting for complex applications. This prevents the browser from downloading huge files during the initial load as the code is now split into smaller files.
Who doesn’t like having beautiful high-resolution images on their web page? The problem arises when these images are not properly optimized, resulting in a slow page speed and a sub-par performance score. Let’s see how we can have these gorgeous images without negatively affecting performance.
Properly size images. A quick audit will tell you which of the images on the page need to be resized. The amount of potential savings in the image below for all the images combined is significant. You can use tools such as ImageMagick to achieve this.
Use responsive images with srcset, sizes, and the <picture> element to avoid loading big images for smaller screen sizes. Håkon, our Head of Engineering, has a detailed blog post on how to best work with srcset.
Optimize images. If you run an audit on your webpage, you will see a list of images that can be further optimized (if any), along with the amount of potential savings. Make sure to properly optimize all the images listed there to speed up your web page. You can use tools such as ImageOptim, mozJPEG for JPEG compression, SVGO for SVG compression, TinyPNG for PNGs, etc.
Preload images displayed in the hero section of your website. This would certainly help improve the Largest Contentful Paint (LCP) time.
Lazy load the images located below the fold to reduce the initial load time and bandwidth.
Use next-gen formats. Newer image formats such as WebP and AVIF have far better compression than formats such as JPEG or PNG. This implies that using images with the next-gen formats will result in your web page loading faster and consuming less data. WebP is fully supported by most major browsers, with Safari supporting it partially with their latest release, whereas AVIF is supported in Chrome, Firefox, and Opera for now.
Make sure to set the width and height attributes on the image. This helps the browser know how much space it needs to have for the image when the page is loaded. If these attributes are not specified, it will lead to a layout shift which negatively affects performance score.
We have to mention the cool stuff we offer out-of-the-box when we talk about image and video optimization. For many headless commerce platforms, image and video optimization come as an afterthought.
In Crystallize, our image component and video component are built with devs as the end users in mind. Images are automatically compressed/converted into modern formats; videos are transcoded to different sizes & bitrates, allowing you to use your frontend framework of choice to pick and choose the images/videos you’ll be using. Cool, right?
Displaying videos on your web page is a great way to keep users engaged. However, as you do with images, you also need to optimize videos on your web page.
Reduce the file size with the help of compression tools such as Handbrake. Tools like this reduce the file size without affecting the quality in any way.
Lazy load the video if it is located below the fold. This reduces the initial load time as well as reduces the bandwidth because the video will only be loaded if and when it’s required.
Convert the videos to HTML5 video formats such as WebM or MP4. Converting to HTML5-friendly formats means that there is no requirement for any additional plugins to render the video and you can easly deliver it via any HTML5 video player.
Strip the audio. If you have a muted video on the page, you can strip the audio from it to reduce the file size with the help of FFmpeg.
Fonts are an integral part of any web application, and as such, these should not be overlooked.
Convert fonts to WOFF2. Make sure to convert the fonts used in your web application to WOFF2 format as it uses compression algorithms to deliver a reduction of around 30% in file size compared to other formats such as TTF.
Use the “preconnect” resource hint to load fonts quicker. ‘Preconnect’ lets the browser know that the link would like to establish a connection to another origin as soon as possible. This means that the browser doesn’t wait until it reaches the font file before establishing a connection.
Avoid layout shifts when loading fonts. Check out my colleague Daniel Salvado’s posts on fast web fonts and web safe fonts to understand how to do this in more detail.
To paraphrase our colleague Nebojsa from his take on static website hosting platforms post, just about any server can host your website BUT not all of them will be able to deliver performance and meet the needs and expectations of modern web development. Whatever solution you choose, make sure the following are set properly:
Use HTTPS. Every modern browser flags websites that don’t have a valid SSL certificate as “not secure” and limits the functionality of such applications. Furthermore, there is an added SEO benefit as Google also uses HTTPS as a ranking signal.
Reduce the total number of HTTP requests. The browser makes these requests to fetch the different resources required for a web page, including stylesheets and scripts. The more files you request, the larger the overhead (especially if you’re still using HTTP/1.1). To avoid this, always make sure that the resources you’re fetching are necessary.
Switch to HTTP/2. As mentioned above, with the previous version, which was HTTP/1.1, there was an overhead when a connection was established between the browser and the server, HTTP/2 eliminates that. It allows multiple files to be sent simultaneously instead of making multiple TCP requests, among other advantages.
Use a CDN (Content Delivery Network). Most websites serve content to users located all over the world, when a user is located far away from the server, it leads to a longer load time. A CDN resolves this issue with its geographically distributed servers. When you use a CDN, the server located closest to the user serves the file, cutting the load time significantly. You can compare the various CDNs available to select what works best for you.
Server Processing Time. Be mindful of it. Optimizing server processing time means optimizing database queries, refining server-side code, utilizing caching strategies, and employing load balancing to distribute requests among multiple servers.
There are a couple of other things you can keep an eye on to make sure your website performs better.
Layout shifts. Cumulative Layout Shifts (CLS) is one of the three Core Web Vitals. Web Vitals are the quality of user experience metrics. CLS measures the movement on a page as new content loads, this content could be images, iFrames, etc. As a user, layout shifts are always annoying and should be avoided. To minimize these layout shifts, make sure to specify dimensions for your content, be it an image or an iframe.
Priority hints. Proper usage of priority hints would help optimize the loading of resources required as this would prioritize fetching the resources that are most important for a better and faster user experience.
HTTP requests. One thing that needs to be avoided is loading a lot of scripts and resources on your web page, as each of these will be fetched with its own HTTP request, which will slow down your page. A solution to this is to either defer the loading of these resources or simply put the script at the bottom of the document.
Serving files from different protocols. Avoid serving files coming from different protocols. Say your website is using HTTP, all the external resources should come from HTTPS as well, and not HTTP.
Cache headers. Make sure that you are setting your cache headers properly. This saves your web application precious time from going back and forth between the browser and the server.
I wish it were as easy as suggested in the title above. Performance is just one piece of the puzzle that is online business success. CRO strategies, SEO, social media and (in general) marketing complete the picture.
But it all starts with your product/service. The rest is there to help you reach and satisfy the audience and their expectations.
