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.
UPDATE 08/20/2024 (next update February 2025).
Eight 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 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 ensuring a pleasant user experience while browsing your website (impacts customer loyalty). It also affects your search engine ranking (SEO) and AdWords pricing. As a matter of fact, web performance influences:
- Time on site
- Page views
- Bounce rate
- Conversions / Revenue
- User satisfaction and retention
- Organic search traffic
- Bandwidth/CDN savings
- Ad Quality Score (via landing page performance).
Having all these benefits in mind, it pays off to have a performant website, right?
So, how do you do that?
Measuring Performance
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.
- Regarding Core Web Vitals for SEO, the only place to check is CrUX data used in Search Console.
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!
Frontend Performance Checklist 2024
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 an eCommerce platform that can support everything you throw at it, i.e., the number of products, the number of orders, multiple languages, multiple store locations, etc., and the flexibility it offers regarding information architecture. Then, it’s the UX designer’s job to combine rich content and storytelling with 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 Crystallize builds and WordPress or Shopify etc. website.
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 project-based checklist.
OK. Performance-first mindset is on. Let’s get to the checklist.
[note]💡Individual Metrics.
This checklist looks at overall performance. Should you need to improve individual core web vital and other vital metrics, have a look at our individual metric pages. Yes, that includes suggestions to improve your Interaction to Next Paint (INP) scores.
[h3]HTML
HTML builds the structure of your website. Not properly optimizing your HTML can result in increased page load time, leading to a bad user experience. There are various ways to optimize your website's HTML.
Maximizing Perceived and Actual Performance. The HTML must be prioritized for loading, sequentially aligning with its on-page appearance for optimal efficiency.
Clean up any redundant code, including any additional whitespace and comments. This will decrease the file size, which in turn will reduce the load time.
Enable compression. Compression shrinks the file size by replacing repeated code with references to the previous occurrence. Make sure to enable GZIP or Brotli compression on your website for improved page speed and a noticeable reduction in bandwidth usage.
Load external files in the correct order. If you must load a JavaScript file in the <head> tag, 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.
Avoid iFrames. Loading content into <iframe> can impact performance significantly, so consider using this carefully.
[h3]CSS
Most of the time, CSS is not at the top of the priority list for performance enhancements. However, it does have an effect, and it is best to optimize it so it does not negatively affect your website's performance.
Remove unnecessary styles. We all are guilty of this. Remember to check and clean up unused CSS rules when you make changes to your CSS.
Split CSS into modules. Having a modular CSS structure enables the deferred loading of non-essential styles, minimizing initial render-blocking and accelerating page load times. Split CSS into separate files and load only what you need.
Avoid using @import. The @import rule is render-blocking, which means that every file 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 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 rel="preload" user hint tells the browser to fetch a resource earlier than usual, leading to faster rendering. With it, the browser will fetch the resource and make it available in the browser cache.
Simplify selectors. Don't write complex selectors as they increase file size and the parsing time for those selectors. Instead of 1, have 2:
1: body div#main-content article.post h1.headline {font-size: 18px;}
2: .headline {font-size: 18px;}[h3]JavaScript
With new JavaScript frameworks dropping routinely, we can say that it is fairly popular and one of the most used languages when developing a website. Hence, it is also a major factor affecting performance and should be optimized appropriately to provide a smooth user experience.
Can you use HTML and CSS instead? Hear me out! Both HTML and CSS have had some really cool additions over the last years. There is functionality that you can build with these two that a while ago would have needed JS. Killian Valkhof elaborated more on such features in his talk.
Avoid overusing frameworks and third-party libraries for menial tasks. It causes an overhead and increases the page size. Consider using built-in browser features.
Preload JS. Use rel="preload" to create a preloader for critical JavaScript.
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 immediately and 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. Various tools are available to help with minifying your files, including UglifyJs and Minify.
Make sure dependencies are up to date.It is important to update dependencies regularly. This reduces the risk of security vulnerabilities, incompatibility between different dependencies, etc. To simplify the process, you can use something like Renovate or Dependabot.
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.
Choose framework wisely. There are a lot of frontend frameworks available and it all comes down to what is best for your project needs. Sometimes you might not even need to use a framework. Either way, some of the frameworks that I prefer using include Next.js, Remix.run, and Astro.
Check the link to our article for more on understanding and managing the impact of third-party scripts on website performance.
[h3]Image Handling
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 sized images. A quick audit will tell you which 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 in React.
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 potential savings. Ensure you properly optimize all the pictures listed 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 undoubtedly help improve the Largest Contentful Paint (LCP) time. A good practice is to define your background images in CSS with background-image.
Lazy load the images below the fold to reduce the initial load time and bandwidth. Browser-level support for lazy loading images with loading the attribute is real.
<img loading="lazy" src="image.jpg" alt="..." />
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 load your web page faster and consume 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 for the image when the page is loaded. If these attributes are not specified, it will lead to a layout shift, negatively affecting the performance score.
[note]💡Images and Videos in Crystallize.
Image and video optimization is an afterthought for many headless commerce platforms. When discussing image and video optimization, we must mention the cool stuff we offer out of the box.
In Crystallize, our image component and video component are built with developers (as the end users) in mind. Images are automatically compressed/converted into modern formats; videos are transcoded to different sizes and bitrates, allowing your frontend framework of choice to pick and choose the images/videos you’ll be using. Cool, right?
[h3]Videos
Displaying videos on your web page is a great way to keep users engaged. However, as you do with images, you must also 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.
Video preload. The preload attribute has three available options: auto | metadata | none which controls how much of a video file downloads with page load.
Lazy load the video if it is located below the fold. This reduces the initial load time and 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 no additional plugins are required to render the video, and you can quickly 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.
[h3]Fonts
Fonts are an integral part of any web application, and as such, these should not be overlooked.
Limit the number of fonts. A lot of fonts can slow down page load significantly.
Convert fonts to WOFF2. Make sure to convert the fonts used in your web application to WOFF2 format. 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 quickly. rel="preconnect" lets the browser know that the link would like to connect to another origin as soon as possible. This means the browser doesn’t wait until it reaches the font file before establishing a connection.
Avoid layout shifts when loading fonts. Check out Daniel Salvado’s posts on fast web fonts and web safe fonts to understand how to do this in more detail.
Hosting / Server
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 correctly set:
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 requests the different resources required for a web page, including stylesheets and scripts. The more files you request, the larger the overhead (especially if you still use HTTP/1.1). To avoid this, always ensure the resources you’re fetching are necessary.
Switch to HTTP/2. As mentioned above, with the previous version, 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 various 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 closest to the user serves the file, significantly cutting the load time. You can compare the various CDNs available to select what works best for you.
Enable Caching. By telling the browser to cache your content and stop downloading the parts of the page it has already downloaded, you will effectively reduce the strain on your server, i.e., the server will spend less time executing code, retrieving the database, fetching files, etc., which will influence page load time.
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.
[note]💡Quick Performance Wins.
You can also monitor a couple of other things to ensure that 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, and this content could be images, iFrames, etc. As a user, layout shifts are always annoying and should be avoided. To minimize these layout shifts, specify dimensions for your content, be it an image or an iframe.
Priority hints. Properly using priority hints would help optimize the loading of required resources, as this would prioritize fetching the most important resources 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 will be fetched with its own HTTP request, slowing down your page. A solution to this is to either defer the loading of these resources or 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 HTTPS; all the external resources should also come from HTTPS, 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.
[note]✅Arm Your Business with Our Checklists.
Seriously. Each checklist is crafted from a blend of our hands-on experience and insights gained from working closely with our clients, ensuring it’s tailored to address your unique challenges👇
🚀
⚙️The Basic
🛒
📈
📝Content Writing/Optimization Checklist
📢
By following these checklists, you'll benefit from proven strategies that enhance performance, boost conversions, and optimize content, setting you up for sustainable success.
Now, Go Hunting Milliseconds
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.
