5 Essential Tips For Making Faster Websites
Behind every website there is a myriad of reasons it could perform badly. This article will help you to understand how to fix some of the most important ones, so you make your website faster.
There are basically five, corresponding to the five steps your browser does in order to download the HTML and its resources, like fonts, style sheets, images or any other audiovisual content.
- Leverage browser’s internal cache
- Use a CDN
- Improve your server’s response time
- Reduce the size of your website resources
- Reduce the amount of Javascript
1. Leverage browser’s internal cache
Fastest requests are those not being made.
As soon as you enter a URL into your browser, the very first thing it will do is search for a cached copy stored on its internal storage. If it exists and it didn’t expired, that’s it, the request will not be made, and you will achieve response times between 0 to 5 milliseconds.
Generally speaking, unless you have a website were you have to be showing critical real time data, like stocks, you can safely rely on browser’s internal cache to store a copy of this single page for a few minutes, hours, or even days, depending on your case. You can cache static assets, like style sheets or scripts for much more time.
You have two ways of achieving this caching technique: By time or by content.
Caching a request by time is easy to understand and to setup. It’s enough to hint the browser, through HTTP Response Headers, the resource is public and it could be cached during an arbitrary amount of time you decide.
Think about special typographies this website contains. The first time you visit this article, your browser will download them together with the HTML, so you will start seeing them on headings. It’s kind of improbable I will ever change this typography file contents, so I’ve told your browser it can store this file in its cache, so any other page you visit from this domain that requires that typography won’t require you to download it again.
Unless your website requires something very specific, you can cache images, CSS files, JavaScript or font files for at least 15 days in your visitor’s browser.
Being that said, it’s as important, if not more, plan and have under control a way to invalidate the cache of any resource of your website. If you change any portion of your HTML page that depends on a change on your style sheet files, it will be rendered wrongly, unless the browser downloads a fresh copy when needed.
In simple and static websites, your web server will collaborate with your visitor’s browser to handle all this transparently, using “If-Modified-Since” request headers. It means something like “I need you to send me a new version of this file if it has been modified since the last time you’ve served it to me”.
Another way to achieve this is to have a unique identifier for each version of each file, for example, by calculating the MD5 hash of its content. As the file name will be different if the content changes, the browser will be required to request a new version of this file because it won’t be cached.
In terms of speed, the most efficient way to cache a resource (CSS, JS, …), is to tell the browser that these files will never expire. So, if you go this way and you change their contents, you will be required to rename this file, for example, adding the first 6 characters of the MD5 hash.
To illustrate this, instead of styles.css, it will be called styles-a1b2c3.css, and being renamed to something like styles-b1c2d3.css if you modify its content.
This technique is obviously more laborious, as this hash will need to be calculated prior serving the HTML. Any modern framework or tool you’re using for coding your website will probably come with a way of easing this job.
You want a fast website?, this will be one of the steps you will need to invest some time.
2. Use a CDN
The next thing browsers do, if they didn’t encounter any local cached version of the resource in the previous step, will be asking your server for it.
The closer your server is physically to your users, the less latency time they will experience between the request and the initial byte is sent, as data will have to travel less distance.
Using a Content Delivery Network (also known as Content Distribution Network) serves this specific purpose. It is a matrix or web servers distributed around the globe, storing copies of your website assets.
Whenever any visitor you have requests anything to your website, through a CDN, this service will not just send the file, but it will also store a local copy on that server’s memory. So if any other user makes the very same request, and the resource is within its expiry time, it will send it without having to ask it to your server again.
As an analogy, the way it works is similar to book distribution. If your local book store have the book you want in their stock (CDN’s memory, in our example), you can purchase it directly. Otherwise, they will ask their book provider for another fresh copy for you, and notify you as soon as you can grab it.
It’s much more efficient this way, as only one long travel has to be done to refill the stock, instead of every fan taking a plane and going to author’s house (would be cool to say hi, anyway).
CDN services will do their best by default but, in order to use them right and get bigger web speed improvements, you will have to follow previous step recommendations, as the way they work is by relying in HTTP headers. Otherwise, you will just be adding another intermediary between your users and your content.
Beyond using its main feature, which is improving your website speed by using their cache memory, a CDN adds collateral security related benefits, like hiding the IP of your server, or help to mitigate Denial of Service attacks (DoS).
Some of them are Cloudflare or Fastly.
3. Improve your server’s response time
We’ve been talking a lot already in previous steps about things happening way before requests are reaching your web server. So, if neither browser’s cache nor CDN’s managed to render a resource, it will be your duty to prepare and deliver the requested content, as fast as possible.
But what is the threshold limit for fast?, according to studies your users will perceive the page load time as instant if it’s being rendered on screen in less than 100ms. Beyond this point, they will experiment different magnitudes of slowness and frustration, being their patience the only thing that will prevent you from losing a lead, or even a future client.
Please notice that, even without processing a single line of code in this little amount of time, the data will still have to travel a considerable amount of distance through a wire. Your processing time will be added to the round trip back to your user’s browser.
In an ideal scenario, referring to web speed improvements, websites should be just an arbitrary amount of HTML, CSS and image files. Most of the time, except web applications, could be this way.
Back to real life, static websites are not always possible (and that may be the reason you’re reading this article, anyway). But even if you cannot build a 100% static website, you may still aim to make your websites «as statical as possible».
In cases where your website is based on WordPress, Drupal or Ghost, to name a few Content Management Systems, it’s important to use common sense. Any plugin you don’t require, get rid of it. Do you really need a plugin to allow your users to share your pages through social networks?, they may just copy & paste the URL whenever they want, and they will be more likely to share it if it’s faster, thanks to removing these unneeded plugins.
Other custom websites may have bottlenecks that are preventing your website from performing fast. What is important in these scenarios is to not suppose what’s happening. If your actions are backed with data, you will be able to solve bigger issues much more easier.
You can either find these bottlenecks using open source tools, like Valgrind, Prometheus or Grafana, or just go for a commercial solution, like NewRelic or Datadog (or combine them). No matter what you use, you will be able to check what are the hot spots requiring your attention more urgently.
Diving into these tools, you will be able to check if an specific page of your website is being slow because it’s waiting for an external API, or maybe because there is a missing index in your database, that is slowing a query. But again, support your actions with data, and attack always the issue that will cause the biggest impact with the less effort possible.
Remember also that a slower website may invite malicious users to collapse your server much more easier than an optimised one.
4. Reduce the size of your website resources
Even if your website is static or your backend server is really quick preparing the responses, your content may be overweight.
The fact that now optical fiber internet connections are mainstream at our offices and home has helped that we, developers, neglect the size of our files and websites. And it’s a critical problem because it doesn’t matter how fast is the computer where they are being developed, visits from mobile devices won’t stop growing.
Huge typography files, images not being resized to the final size, or just an indiscriminate use of JavaScript (which has an specific paragraph or two in the next bullet point), will make the monthly mobile carrier data usage of your users grow, together with your hosting provider monthly fee.
If you are going to show a 400 x 300px picture, double check you are not sending a 23MB 2000 x 1500 px RAW image. And that’s a real world example.
It’s important to mention web servers can be configured to compress the files on the fly before sending them to your users, so they will weight less in exchange of some processing time on your server, and also in your user’s browser to decompress them.
If you’re using Apache, you will just need to enable mod_deflate module. Nginx users will just need to enable gzip support on their config files. We’ll check how to do these kind of things in more detail in further posts.
Most of the issues can be spotted automatically using online services, like the Reports section of this website. Getting a 100% score is what you want to aim for. The closer, the better. It’s known that Search Engines will prioritise faster websites on their rankings, so you will benefit indirectly from more organic traffic to your site.
5. Reduce the amount of Javascript
The special bonus bullet point in this article is for the web technology that generates more amount of love and hate: JavaScript.
A similar reason to what’s causing overweight due to better connectivity, better CPU is also causing we, developers, forget the constraints on mobile devices. And to increase the issue, there is a widespread belief that JavaScript is fast.
It is not (or not enough).
JavaScript is much more slower than the language that receives most of the “it’s so slow” jokes among developers, Java. No matter how well optimised is (and it’s amazing the job behind this language), being interpreted, it will never be as fast as a compiled piece of code. Sorry.
I invite you to give your favourite websites a try enabling and disabling JavaScript on your browser.
Being that said, far from wanting to discourage its use, just do it like salt: As much as needed, no more, no less. Accordion menus, tabs, popups and a lot of different effects will perform fast enough even in low-end mobile devices.
Heavy duty frameworks, like Angular, React or Vue, must be left for desktop web applications, being almost forbidden for mobile devices. Please avoid to generate HTML using JavaScript, most of the time it will be cheaper (from a computationally point of view) to render them on the backend, and inject it raw into the document.
Browsers like Chrome or Firefox offer pretty nice developer tools that helps finding performance bottlenecks in JavaScript, thanks to their profiling. You can even emulate slower CPU or slower networks. We will check them in upcoming articles.
If you really depend on JavaScript for your website (again, we are not living in an ideal world) and you want to improve its speed, or you’ve detected speed issues, you can use Web Workers. You can leave the heavy work for these “threads”, so your user interface keeps being responsive.
So, long story short, it is salt. Your website may be bland without it, but put it too much and it will be inedible. Rectifying this flavour towards the end of a web project will add a lot of pain to developers, try to be conservative with JavaScript if you’re in doubt.
Conclusions to make your website faster
Managing to have a fast website is not a matter of pressing a button or two. Your pages load time will be, if you are lucky, as slow as the slowest link of the chain in these steps:
- A wrong cache setup will force browsers to make more web requests to your server than needed
- CDN absence will cause data travelling much more miles of wire
- Slower backend technologies will affect the response times, but it will also make your website more vulnerable Denial of Service attacks
- The weight of the resources you’re sending to your users has a big impact, especially those users with slower Internet connections
- Use as less amount of JavaScript as possible
We will be checking specific solutions for all these issues in the next articles.
See you there!