Front-end Performance Checklist

Introduction

You type the search term into Google and browse through pages of links trying to find that specific entry; After all, it’s a pretty niche search. “Hold up, that’s exactly it!” you tell yourself before eagerly clicking the link. The page goes white, and your anticipation grows.  5 seconds pass, and your eyes can’t help but glance back at the endless, unrelenting spinner animation that’s overlaid the thumbnail. After another few seconds drag by, you give up all hope and click the back button to start your search all over again.

We’ve all been there, and it’s an all too common occurrence on the web; Slow load times have a profound effect on the users that view them. In fact, it’s been suggested that a page load time of 4 seconds can cause 25% of potential viewers to abandon the website altogether.

After all, what’s the point in pouring your heart and soul into the best web application of your career if the person accessing it gets bored and clicks away?

In this article, we’ll be discussing what you can do to reduce the loading time of your website, and stop your users turning back before your content has had the chance to grab them.

Minification 🐜

The aim of the game here is reducing the amount of data sent over the network; It doesn’t take a degree in Mathematics to work out that less data = less loading! 🎓

HTML

☑️ Remove all unnecessary comments, line breaks, inline-CSS.

Often, when we develop web pages, we fill our HTML with comments, redundant CSS statements and other artefacts that we forget about. While the page may load properly, and look as intended, it’s important to remember that all this useless data is being sent out with every download.

Let’s take a little example and see how minifying it will make a difference.

<!DOCTYPE html>
<span id="htmlMT-div"><html>
</span>  <head>
<meta charset="UTF-8">
<title><span class="edit">title</span></title>
</head>
<body>
<!-- this is where my code goes -->
<p> Hello world! </p>
</body>
</html>

This little ‘hello world’ example is 166 bytes in length and contains a comment and formatting that makes little difference to our end user. Let’s minify it and see how many bytes we can save.

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>title</title></head><body><p>Hello World</p></body></html>

Removing new-line characters and irrelevant comments, the above code weighs in at 114 bytes. That’s a saving of over 30%!

All this saving can be done when a production build is prepared using HTML minifiers such as the popular html-minifier

CSS

☑️ Remove all unnecessary comments, white spaces, new lines.

As we saw above, we can also minify our CSS files to reduce unneeded characters. UglifyCSS can be used to prepare your CSS files when you build a project for production.

☑️ CSS links should be non-blocking.

Page loading can often be delayed or prevented by waiting for CSS pages to load. Blocking can be prevented by using the rel="preload" attribute in your CSS link tag alongside the as="style" attribute to.

☑️ Remove all unused CSS.

Remove unused CSS to reduce the bloat in your CSS files. Doing so will produce a smaller file to send to your end user, resulting in a shorter load time.

☑️ Remove all embedded CSS from HTML elements.

Not only is it good practice to separate the layout of the HTML from its styles, but it also helps reduce the overall size of the HTML file.

☑️ Check for duplicated and unused CSS with the help of online tools.

There are a whole host of online tools designed to check your development or production environments for duplicated or unused CSS.

If you point unused-css towards your domain, it’ll explore and analyse your site CSS, providing you with a leaner, cleaner version. And, to sort out potential css duplication, then head over the csslint.net to analyse and clean up your css files.

JavaScript

☑️ Minify JavaScript using a JavaScript minifier.

Just as we’ve seen with HTML and CSS, JavaScript should be minified too. This is achieved with a JavaScript minifier such as UglifyJS – do not try to do this manually!!

☑️ Ensure JavaScript is non-blocking.

When the browser hits the obvious <script> tag while parsing an HTML file, it stops the parsing in order to run the JavaScript. We can get around this in one of two ways:

  1. Adding async specifies that the script should be run asynchronously as soon as it becomes available. <script async src="mySource.js"></script>.
  2. Using defer will tell the browser to execute the JavaScript when it has finished parsing the HTML <script defer src="mySource.js"></script>.

☑️ Ensure using minified, production versions of external third-party libraries and frameworks.

When we develop new applications using third-party libraries, we often use the development version. Development versions ship with helpful warnings and messages that help to steer us in the right direction and implement the functionality as it was intended. However, they are often far larger in size, and should not be used in production – so make sure you change versions prior to shipping!

☑️ Consider lazy loading when possible.

Sometimes, we just can’t get around the fact that our application is large. But luckily for us, this problem has already been solved. By introducing lazy loading, we can ensure that the information is only sent to the user when it is requested. After all, what’s the point of sending our ‘About Us’ page if the user doesn’t visit it? We can specify any resource to be loaded lazily – HTML, JavaScript, CSS, Images, Videos and more.

☑️ Always make sure JavaScript is the last thing to load.

By placing JavaScript tags at the end of the <body> tags, styles, content and media are loaded first, giving the user something to look at before the JavaScript kicks in.

Latency 🏓

☑️ Consider using a cloud service which has edge functionality, or a CDN.

Even if we have done everything in our power to make our application as performant as possible, physical distance from the host server is still an important factor. If you’ve ever accessed a website from a country across the globe, you’ll know how slow the response can be. Fortunately, in the age of cloud computing, this is no longer a problem.

Major cloud providers such as AWS and Azure always provide edge functionality. This essentially means that your code is stored in multiple data centres across the globe, ensuring a speedy load time no matter where your user is based. If you’re an AWS fan, CloudFront offers this functionality at a modest cost.

Another option is to use a Content Delivery Network (CDN) to serve up your application. If you decide to go down this route, Cloudflare is a popular choice.

☑️ Reduce external HTTP calls.

The same situation can occur when using external resources. If your application relies on a third-party library, image, or video that is not distributed on a CDN or via edge functionality, the download time could cause major problems to your application. To get around this, either package a local version of the resource or ensure it’s being delivered through a CDN.

Optimizing Images 📷

☑️ Ensure your images are the correct resolution for a page.

Images are large in size and can even outweigh your code by several orders of magnitude; Especially if they’re HD! Often, our application will change the resolution of a picture to fit a certain area of the browser page. And if the application is scaling it down in size, then your user has just downloaded some otherwise useless data! Instead, make sure your images are the size that will be rendered onto the page.

☑️ Consider compressing your images.

Our eyes aren’t perfect, and as developers, we can take advantage of this fact. By introducing lossless or lossy compression, we can reduce the size of our images while maintaining the quality of the image to a high standard. For more information on types of compression, check out this article by Optimus.

Wrap up 🌯

In this article, we’ve taken a dive into how we can make our web applications more performant.

We’ve taken a look at minification, image optimization, resource loading, content distribution and more. Have you tried any of these in your own projects? Let us know below.

If you're looking for your next job as a software engineer, have companies apply to you by adding your profile to Snap.hr.