Checklists are one of the greatest inventions, and they help in almost any area — from buying food for a Christmas dinner to launching a spacecraft. In web development, checklists are particularly popular. We have shared a checklist for successful website creation, website launch checklist, basic mobile testing checklist, as well as a 50-point checklist for website usability testing with you. Now it’s time for a basic frontend development checklist that deals with the performance part. It helps us be on guard on one of the dearest treasures of your website — its speed. Let’s begin.
Basic front-end performance checklist
Google Page Speed score at 90/100
All pages should pass the Google Page Speed test and get at least a 90 out of 100. This index is the dream of all front-end developers, and the reality of expert ones.
Start Render Time under 2 seconds
It is also necessary to check the website’s Start Render Time, i.e. the time it takes for the first content to appear on a user’s screen. This index should not exceed 2 seconds (preferably 1 second).
Single page weight under 500K
The weight of each page should be checked, so it does not exceed 500K. It depends on the website, of course, but it is worth sticking as close as possible to this modern recommendation for the mobile-oriented world.
CSS concatenation
Fewer HTTP requests lead to a higher website speed, so we also make sure CSS files are concatenated.
JavaScript concatenation
Just like CSS file concatenation, JavaScript file concatenation is meant to reduce the server load and make websites faster.
CSS minification
It is also necessary to make sure the CSS is minified by removing spacing, indentation, comments and more, so the files are kept within 5K.
JavaScript minification
The same applies to JavaScript files, which also need to be properly trimmed for better website performance via removing redundant elements, unused code, etc.
Compression
Compression matters! Brotli, Zopfli, or at least Gzip compression reduces the server load significantly, especially when it comes to scripts and CSS.
Critical CSS push
So that the browsers render the page more quickly, we make sure the critical CSS (the CSS necessary to start rendering the visible part of the page), is contained in the . This reduces the number of “trips” to the server.
Lazyloading
We make sure that such great performance-enhancing techniques like lazyloading are being used where possible for images, scripts, and CSS. Essentially, it only loads the assets when they are in the user’s viewport.
Proper settings for HTTP cache headers
To fully leverage the power of caching for performance, we also check if HTTP cache headers like expires, max-age, cache-control and others are optimally set for a website, considering the assets and how often they are updated.
Compact cookies
If the site is using HTTP cookies for authentication and personalization, we see that their weight and amount are as low as possible.
Image optimization
We make sure the images are properly optimized, and use the WebP format for critical pages like front page or landing pages.
Web font optimization
We need to analyze the use of web fonts on the website, considering the importance of their features against their weight, and replace or minify the fonts where it is justified.
Minimum redirects
It is also necessary to get rid of the unnecessary redirects where possible, because each of these contributes to slowing the page down.
Wrap-up
This is just a basic front-end performance checklist that helps us make sure our websites are ready to fly like spacecrafts. Depending on the particular website, lots of other things need to be double-checked, too. Contact our website development services company to get a fast website created or check your existing one!