How to improve the performance of a website
Team Host.it 8 min read
Content
The speed with which an internet page opens has a significant impact on several factors, which among others include:
the time a user spends on a particular site;
the number of conversions you get from your users;
the positioning of a site in the organic results of search engines.
Unfortunately, in most cases, a web page scores very low when it comes to evaluating its actual speed. This point can have a strongly negative impact on the entire strategy that has been developed on the digital marketing side.
There can be many factors that can lead to a slowdown, and it would be best to try to identify as many of them as possible. What may seem like an adequate amount of time to some people may seem like an eternity to others. It is not a good idea to evaluate loading speed using only your internet connection.
Let's see together what are the main factors to take into consideration to improve the performance of a website and the speed of opening pages:
INDEX Choosing a Good Quality Hosting Service Can the speed of a site make a difference?
Enable caching in your browser
Prioritize content above the fold
Optimize media files Optimize images
Use a caching system and a CDN
1. Choose a good quality hosting service There are many users who, when they decide to open a website, start looking for offers or cheap shared hosting. Saving on the hosting service is NOT always an advantage for the project you are going to develop.
When a user finds himself on the pages of a slow website, he is not interested in the fact that the hosting service has allowed the owner to save a few dozen euros. Often, instead of waiting for the page to load, you go back to the search results and click on a competitor's result. Having saved a few euros could turn into a loss of many thousands of euros and loyal customers at the time of renewal.
a name="speed""Can the speed of a site make a difference?
Certainly, the speed of a website can increase or reduce the conversions of its pages. According to a study conducted by Amazon, a difference of just 100ms – a unit of time that a person cannot perceive at all – can be enough to reduce sales by 1% on your online store. While, based on a 2017 study by Google*, pages that load in 10 seconds can lead to an average of abandonments by users higher than 100% of the average of the sites analyzed.
When considering purchasing a hosting service for your project, it is best not to cut your budget to the bone. Poor performance can drastically reduce earnings.
Speed Host.it, within the tools present in its subscription plans, has created SPEED. An application capable of measuring the real speed of your website, and revealing which parts need to be intervened on.
At the end of the analyzes carried out by SPEED, there are suggestions created specifically to better optimize the loading time of your website.
2. Reduce HTTP calls Every file necessary for the display and functioning of a web page, such as html files, CSS, images and fonts, affects the loading time of the page itself. The more requests made, the slower a page loads.
Choosing a template or developing a website can become very cumbersome if you consider the CSS and JavaScript files that are added later with the installation of plugins. In some cases, it is possible to have twenty or more http requests just from CSS and JavaScript files. Which significantly increases the time it takes to open a page.
To best optimize the opening time of a page, it is good to follow some best practices:
merge JavaScript files into a single file;
merge CSS files into a single file;
reduce the number of plugins loaded but not used on certain pages;
use sprites for images that are called up most frequently;
use FontAwesone or other fonts instead of user interface icons.
By optimizing and unifying these resources, it is always a good idea to check that no problems arise once this operation is completed. By carrying out the optimizations in various sessions, you will be sure that you have significantly reduced the number of requests for the generation of each single html page and at the same time that you have kept the functions of the pages intact.
3. Enabling compression Enabling Gzip compression is a feature that can significantly reduce the amount of time needed to download html, CSS files and all the resources necessary for the website to function. This feature allows you to reduce the size of some files, which are then decompressed when they reach the browser.
This functionality does not affect the usability of the website in the slightest. All modern internet browsers support Gzip and process it automatically when the page is opened.
4. Enable browser caching By enabling browser caching, you allow the elements of a page to be stored within the browser that users use to navigate the pages of the site. When a user visits the first page of a site with browser caching enabled, they will not need to send additional http requests to the server for items that have been cached while browsing subsequent pages.
Thanks to this functionality, the number of files necessary to open the page to be recalled are significantly lower. This allows you to significantly reduce the speed of opening each individual page, even for users with very slow connections.
5. Prioritize content above the fold
Website pages can be generated faster if they are coded to prioritize content above the fold. This type of content is nothing more than information that the visitor can view before scrolling the page.
This type of content is found in the initial part of the html code. Positioning in the "above the fold" area allows modern browsers to download and display the contents found in this part of the code first. In this way, the user will be able to see part of the content of the page in a few milliseconds.
It is good to remember that in the content above the fold you will have to insert any CSS and JavaScript necessary to display the contents in this area of the page.
6. Optimize multimedia files The images and video contents present on the pages of a site must be optimized so as not to become an "obstacle" when loading the page itself. An image that is too large can significantly slow down the opening of a page; particularly for users who connect via mobile devices.
Optimizing the multimedia files on your website can significantly improve the opening speed of a page.
To truly optimize multimedia content for your website in the best possible way, it is a good idea to choose to provide it to your users based on the size of the screen on which they view it. There are two methods to handle these optimizations.
Images within your website's HTML code can be served using the src set, which allows the browser to select, download, and then display the image appropriate to the device the user is using.
Images placed on site pages using CSS, typically as a background or graphic, can be served to the user via media queries that adapt to the size of the device used by the user.
Image optimization
Choose the format best suited to the type of image. The JPG format is ideal for photographic images, while GIF and PNG are ideal for images with large areas of color. 8-bit PNG files are used for images without an alpha channel (transparent background), while 24-bit PNG files are used for images with an alpha channel.
Make sure your images are correctly sized for your reference breakpoint. If an image is used for mobile devices, it makes no sense to upload it with a size of 1600 pixels wide.
Use an image compression program. A series of excellent tools are available on the market, as plugins or as online programs, to optimize and compress images as best as possible.
Choose the most ideal video format. In most cases, MP4 is the format that allows you to have the best result between compression/video quality.
Serve video to users based on the size of their device.
Delete the audio track, if the video is used as the background of part of the site.
Use a video program to compress video files that will be viewed on a site. Premiere and many other programs allow you to significantly reduce the size of video files.
Reduce the length of the video if it is not necessary to show the entire video.
Consider uploading the video to external platforms like Youtube or Vimeo, instead of serving them to your users directly from your hosting.
7. Use a caching system and a CDN Browser caching allows you to store a static copy of the web pages you have visited, so that they can be viewed more quickly on subsequent views. A CDN system is made up of a series of servers located in various locations and which allow users to access a site from the location closest to their location. The use of these two technologies allows you to significantly improve the time needed to load a page.
*PDF of Google Research 2017: https://think.storage.googleapis.com/docs/mobile-page-speed-new-industry-benchmarks.pdf
E-commerce
Hosting for online stores
PrestaShop, WooCommerce and Magento: performance, security and datacenters in Italy.
Related articles
From the archive