Categories

(58)
(41)
(6)
(25)
(67)
(92)

Basic front-end performance checklist that helps us make great websites

10.01.2018
Basic front-end performance checklist that helps us make great websites
Author:

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 frontpage 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 makes 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 team to get a fast website created or check your existing one!

2 votes, Rating: 5

Read also

1

Just imagine the store you could have. Your store usability will be top notch...

2

This article will help you evaluate the pros and cons and decide whether a fixed price contract is your fit or not and how you’ll benefit when choosing it.

3

We described what benefits HTTPS will bring to your website.

4

A great method to deliver a website to your consumers faster and with fewer bugs is DevOps. A culture where developers and operations work together hand-in-hand can increase productivity a lot.

5

Much ink has been spilled over the benefits of ...