Front-end Performance Checklist
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.
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! 🎓
☑️ 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.
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.
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
☑️ 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.
When the browser hits the obvious
asyncspecifies that the script should be run asynchronously as soon as it becomes available.
<script async src="mySource.js"></script>.
<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.
☑️ 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.