How to Speed up a Website
The loading speed of your website has a big impact on your business. A website with low loading speed can totally turn your customers away while a high performing one can improve the conversion rate, the user experience, reduce the bounce rate and as a result it can make your business successful.
That is why it is important to order professional website developmnet services, to get quality and fast website with required functionality.
Suppose you already have a ready-made website or application that uses a modern JS framework (Angular, React, Vue). Also, it may happen that your website is obsolete, and this means that this article is all the more necessary for you to read.
According to Google, 53% of visitors are likely to leave a website if it takes longer than 3 seconds to load. It is true. F5 Studio’s digital marketing team saw an increase in the number of conversions (it is about 40% in some cases). So, before you decide to invest money in SEO services, online advertising or social media it makes sense to check the speed of your website.
Well, how to make sure that the current performance does not prevent your product from becoming successful?
The first step is to collect the performance data from the frontend of your application. There are a few excellent tools to do this:
- Lighthouse from Google Сhrome.
- Speedcurve.
- GTmetrix.
Either of these tools will allow you to track the key performance indicators of your application (KPI).
Lighthouse is already in Chrome DevTools. After analyzing your website/web application, this tool can provide good optimization tips.
Speedcurve does the same thing, but the data can also be viewed in dynamics. GTmetrix is a similar tool.
Now that we have the tools to measure the performance your website, let’s start optimizing it.
Images
Images occupy a fairly large part of the data uploaded to the site, so their optimization is extremely important for the performance of the site.
Adapt image sizes
The first step is to make sure that the size of the images is not larger than necessary. Therefore, you need to adjust them exactly to the dimensions on the layout.
In addition, you need to make sure that the images themselves are as adaptive as the layout. Responsive Image Breakpoints Generator produces all the necessary versions of images and HTML-code to insert them. 8–10 generated images will be enough.
The HTML-code generated in this tool can be used not only on sites but also in web applications. For those who work with Gulp, there is a special gulp-responsive plugin that automates this process.
NB: Do not forget about the lazy download and image optimization tools.
Lazy loading assumes that not all images will be loaded immediately upon opening the page – some will be loaded later, if necessary. An image that is not in the current scope will be loaded in the future (the main thing to remember is that the image needs to be loaded a little earlier than it should appear in the scope).
Regardless of what framework you use, it will most likely have a plugin for lazy loading images (for example, v-lazy-image in Vue). Although nothing prevents you from implementing this functionality. To check whether an element is in scope, the Intersection Observer API can be used.
How to deliver images via CDN
If you have already optimized the size of the images and their number and are waiting for visitors from all over the world, then the CDN – Content Delivery Network for serving images will help you.
This system caches images on a globally distributed network of servers. Suppose if someone from Australia requests an image from your website, instead of downloading this image from a server in Europe, CDN will download it from the server closest to Australia. Such a system speeds up the process of downloading images on the site.
CSS, JS and HTML
All modern frameworks in the build process optimize your code (code-splitting, tree shaking, minification, etc.). What else can you think of?
Optimize the main HTML page
An HTML document is the skeleton of almost all web applications. When working with links to external resources, you should follow a few tips:
- Put CSS links at the top of the HTML document to speed up page loading.
- There are more optimal ways to speed up downloads, for example, placing critical CSS into a tag <style>, and for the remaining styles (be sure to assemble them into one file using any frontend collector), use preloading or send them using HTTP / 2 Server Push ;
- Place the JS scripts at the bottom of the page. This prevents the page from being tagged blocked <script>. And do not forget about asynchronous scripts.
- It is more correct to add scripts at the beginning and declare them with attributes async or defer. Use defer if you need to wait for the page to complete to execute the script, and async if this is not required;
Make sure that only the required ones are loaded.
In frameworks like Angular, React and Vue, there is support for lazy loading of resources. So It will be enough to separate the code and load only the modules that are needed. For example, if you have a commercial application, then you do not need to load the Basket or Payments modules on the main page.
Compression and Caching
It is necessary to apply compression to all important frontend resources (images, code) and correctly cache them.
Compressing a file makes it a little easier and speeds up the download. One of the most popular compression methods is GZIP. It is great for compressing code, documents, images, and audio files.
In addition, to GZIP, there is also Brotli, whose popularity is gradually increasing. This is an open source algorithm that is constantly updated by programmers from Google and other organizations. This compression method has proven itself to be much better than the rest.
You can activate the preferred compression method on Nginx, Apache or any other server by changing its configuration file.
When it comes to caching, the most commonly used method is called Leverage Browser Caching. You can activate it in the configuration file of your server.
If you want to define your leverage browser caching rules you can use Cache-Control headers.
The Cache-Control header was defined as part of the HTTP/1.1 specification and supersedes previous headers (for example, Expires) used to define response caching policies. All modern browsers support Cache-Control, so that’s all you need.
Cache-Control Headers on Nginx
Add the following snippet to the inside of your server block which is usually located at /etc/nginx/site-enabled/default.
location ~* \.(png|jpg|jpeg|gif)$ {
expires 365d;
add_header Cache-Control “public, no-transform”;
}
location ~* \.(js|css|pdf|html|swf)$ {
expires 30d;
add_header Cache-Control “public, no-transform”;
}
Cache-Control Headers on Apache
Add the following snippet to the top of your .htaccess file.
<filesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$”>
Header set Cache-Control “max-age=2592000, public”
</filesMatch>
Once implemented on your origin server, you can check if everything is working as expected by opening up Chrome Dev Tools, navigating to the Network tab and clicking on an asset. You should now see either the Cache-Control HTTP Response headers.
Conclusion
The performance and interface of both websites and applications are always critical factors for the success of businesses. That’s why websites and apps must be thoroughly optimised.
For WordPress websites you can use several additional ways to speed up a site. Also you can hire F5 Studio’s team of professional WordPress developers who experinced in optimization WordPress websites.
