Insights
How to improve the loading time of your websites
Speed. That’s the keyword. We live in the age of immediacy: we want everything and we want it now. That’s why, for the users who access your website to have a good experience and better bond with your product, it’s necessary that your site loads quickly. If you don’t achieve this, few of your visitors will wait more than 2 seconds to see what you have to tell them, increasing your bounce rate to embarrassing limits.
Pero la velocidad de carga de un sitio web no solo es una cuestión de experiencia de uso. Los principales motores de búsqueda —Google, Bing, Yahoo!…— tienen en cuenta la rapidez con la que carga un contenido para determinar su calidad y premian a los sitios web más rápidos con una mejor clasificación en sus páginas de resultados, por lo que dicho de otro modo, el tiempo de carga de tu site repercutirá notablemente en el SEO (Search Engine Optimization). Y el SEO es muy importante para cualquier negocio.
Por eso, en este artículo, vamos a darte algunas recomendaciones para que tu sitio web cargue mucho más rápido. ¡Empezamos!
Choose a good server
When choosing the server on which your site is going to be hosted, you will find that there are multiple hosting plans, and there are usually large price differences between them. Although this is not always the case, the truth is that these differences generally translate into higher quality servers that, in addition to offering better security and reliability conditions, are also usually much faster when it comes to ‘sending’ your website to your users. So it’s important to choose a good server.
On the other hand, the geographical distance between your site and your users creates some delay. If most of your potential audience is located, for example, in Spain, the ideal is that your server is also there, since it’s not the same to send them content from Madrid than from Wichita. If your audience is more geographically dispersed, then you can use a CDN (Content Delivery Network), which basically consists of replicating your site on several servers located in different points so that each of your visitors downloads your content from the nearest server. Amazon Cloud, Google CDN, Cloudflare, or Incapsula are some providers of this type of service.
Improve your images
Take note of this point because when it comes to reducing the loading time of your site, probably nothing will have as much impact as reducing the size of your images. Images make up the bulk of the final size of a web page, so resizing, optimizing, and modernizing them is key.
-
Resize: An image of, for example, 3,000 pixels wide by 2,000 pixels high at 300 dpi (dots per inch) can be displayed on a page at 600 x 400 pixels thanks to CSS, but it will still be a 3,000 x 2,000 image. The larger and higher resolution the images are, the heavier they also are, so you always have to upload the photos to the server at the largest size they are going to be displayed and at 72 dpi resolution. In the first case of our example, the image weighs 2.92 MB while adjusted to 600 x 400 pixels it weighs 252 KB (90% lighter).
-
Optimize: The best way to optimize images is to apply lossy compression. Lossy compression consists of eliminating some of the image data, reducing its quality although in a way that is practically imperceptible to the human eye. Going back to the example from the previous point, a .JPG image of 600 x 400 pixels can reduce its weight by up to 60%, going from 252 KB to just 44 KB. Tools like Photoshop or web applications like Compressor.io allow you to significantly reduce the kilobytes of your images. There are also Node.js modules —like Imagemin— that automatically optimize all your images.
-
Modernize: It is also important to replace traditional image files —.JPG, .PNG, and .GIF— with other files that have appeared in recent years and offer much lighter sizes without loss of quality, such as .SVG, .WebP, and .AVIF. For example, our .JPG image of 44 KB can be reduced to 32 KB if converted to .AVIF. If you need more information about .WebP and .AVIF image formats and how they can help lighten the weight of your website, we recommend reading the article we already wrote about them in this blog.
‘Minify’ your resources
In comparison to your images, the code files of your site —HTML files, CSS stylesheets, scripts, JSON databases…— are like real feathers. However, all these files are usually edited with spaces, comments, tabs, and line breaks that, although very useful for development teams not to go crazy when creating the site, are totally useless for browsers, as they ignore them when rendering the web code. That’s why it is highly recommended to eliminate all this content from your code files before uploading them to the site’s server. This is known as ‘minifying’.
The weight difference between a ‘minified’ file and its ‘formatted’ equivalent is usually around 25% or 30% lighter. The saving in kilobytes may seem insignificant considering how little these types of files weigh, but the fact is that search engines do verify that all your code files are minified when ‘scoring’ your site better. There are many online services that ‘minify’ code of any kind, although the most convenient thing obviously is to use Node.js modules that generate ‘minified’ versions of all your files automatically.
You can also squeeze a few more bytes from your code files by enabling GZIP, Deflate, or Brotli compression.
Reduce server calls
Each file used in your pages requires a request to the server, which takes time, so the final load speed can be significantly accelerated if you reduce server requests. To achieve this, the obvious thing may seem to use fewer resources, but you can also achieve the same result by grouping several of them into a single one. For example, a good web development practice is for all your style sheets to be concatenated into a single .CSS file. The same applies to your scripts.
Another way to reduce server requests is by using the memory of web browsers. Chrome, Firefox, Safari, Opera, or Edge cache many of the resources they download from a site: stylesheets, images, fonts, or scripts are saved so that if a user reaccesses the same web, they can reuse them without needing to download them from the server again. For this, it is necessary that all your resources include a cache duration (Expires HTTP Header), something like an expiration date that serves to let the browser know if it should request a resource from the server or if, on the contrary, it can obtain it from the cache. Applying long expiration dates to those resources that are modified infrequently can significantly speed up your website’s loading time.
Eliminate resources that block rendering
As you may know, each time one of your visitors lands on your site, their web browser starts to render the page code from top to bottom in a process that only stops each time it encounters a .CSS or JavaScript file that it has to request from the server. In these cases, the browser has to pause rendering while it waits for the incoming file. For this reason, it’s critical that blocking resources are positioned as far towards the end of the code as possible, thereby allowing the browser to assemble the page swiftly—particularly the part that’s visible as soon as someone lands on the page, known as above the fold.—, Google attaches significant importance to this aspect.
There are other ways to prevent your CSS and JavaScript files from blocking the rendering of your pages, such as asynchronous downloading (which allows the browser to download a file from the server in parallel, without stopping the rendering of the HTML) or deferred downloading (which postpones the download of the file until the rendering of the HTML has been completed).
Use Google Page Speed
Do you think your pages load fast enough? Can you do more to improve them? Find out the answer with Page Speed Insights.
To use this free Google tool, you just need to enter your site’s URL and you will automatically get a score related to the loading speed — for both mobile and desktop—and a comprehensive list of suggestions to make your website work like a lightning bolt. In general, any website that scores above 80 can feel pretty satisfied.
Improving the loading speed issues of your site is undoubtedly one of the most challenging tasks but at the same time the most beneficial for your business website. Websites that load quickly and run smoothly offer a better user experience that generally translates into greater loyalty, more conversions, and better organic positioning in search engines.
Users are becoming more demanding with the loading speed of websites, and what was a reasonable time a few years ago is no longer so today. Additionally, visits from mobile devices are increasingly making up a larger portion of total accesses to a site —in Spain, around 55%— and in these environments, where connections and processors are not as powerful and the need for immediacy is usually greater, every hundredth of a second matters.
Did you find this post interesting? Share it!
Your contacts will like to read it, for sure!
