Google admitted that the speed is a determining factor for the positioning of a site. For this reason, and to meet the needs of SEO experts, the Mountain View giant introduced in the Webmaster Tools, today Search Console, a new tool called Page Speed Insight. This tool allows you to analyze the performance problems of a Web page in an intuitive way and directly from the Mozilla Firefox browser. The tool, in addition to reporting potential problems, also gives tips and useful functions to solve them.
Some of the flaws encountered with Page Speed are easily solved during the design phase of a site's frontend. Others, on the other hand, need some more system-level knowledge.
Going into more detail, the factors that may depend on the system configurations are:
Those relating to the frontend and the structuring of the site, on the other hand, are:
- reduction of DNS resolutions and Redirects
- minification of Css / Js / Html files;
- image optimization;
- order in which page elements are loaded;
- parallelization and reduction of Http requests.
- Let's analyze these aspects in detail.
Phase one: Caching
This gives a double advantage: it reduces the round-trip time (the time it takes for data to go back and forth from a client to a server), eliminating many Http requests necessary to obtain all the resources and, consequently, reduces the size. overall response from the server. Reducing the total page weight for each returning visitor also significantly reduces bandwidth usage and site loading costs.
Compression in progress ..
Compression is recommended for not too small resources, as this process has its own load on the machine. The ideal solution, therefore, is to combine it with caching mechanisms. Another aspect to keep in mind is to avoid the compression of files in binary format (such as images, videos, archives and pdfs) and, therefore, practically already compressed.
DNS and Redirect resolutions
The page download time is also significantly affected by the number of resolutions DNS and the number of Redirect. Let's see in detail what it is:
La DNS resolution it is the time taken by the browser to identify the origin of each single hostname serving the resources, to which is added the delay caused by the round-trip time. To be clear, the use of many widgets within the page causes a strong increase in DNS resolutions. Consequently, it is good to use these objects with awareness and only if they actually benefit visitors.
The same goes of course for the redirect: it is advisable to try to include resources that do not refer to others. It must be said that, in some cases, such as sites that include many videos and images, you can benefit from the use of different hostnames, because the DNS resolution time is compensated by the parallelization of the download of multiple resources. Therefore, it is necessary to make the right assessments based on every need.
La minification it is nothing more than the operation of compacting the source code of the files to minimize the presence of white spaces and new lines. This intervention, combined with the compression, allows you to achieve a significant reduction in file size. A small and trivial example of minification is this:
The key points when it comes to optimization of images, are undoubtedly ratio maximization quality / size and the use of the best existing compression algorithms. A great tool to accomplish this is smush.com Yahoo, but also RIOT per i file JPG e TinyPng for PNG files are great tools.
Another very important operation when creating a Web page that uses images is to always use photos that have already been scaled and, therefore, of the size corresponding to the actual size displayed. Using a large image, 200 × 200, and including it on the page, resizing it to 100 × 100 via tags width e height, we will use a larger image than we need and, consequently, the time required for its download will be longer. Another important parameter is to specify with the tags just mentioned the exact size that avoids all unnecessary rendering operations.
Order of loading and reducing HTTP requests
When designing a page, the basic rules to take into account are:
- combine multiple Css files into one resource in order to reduce the number of Http requests (the same goes for JS);
- load first the css and then the Js as the latter are blocking while the former are parallelizable;
- avoid including inline Css and Js within the page;
- avoid including Css files using @import;
- serve static documents from domains that don't set cookies.
All these optimizations not only allow you to significantly reduce page loading times, because they minimize the number of Http requests that have a physiological time to be resolved, but also allow you to parallelize the download of the various resources to the mass.