The main factors influencing the loading time of a web page have already been presented in an article from the Informoid Web Chronicle. The importance of speeding up the loading time of a website had been established to ensure the visit of Internet users on one hand, but also to improve the site's ranking in search engines results. It is difficult to clearly prove that a fast website ranks better: the search engines algorithms are secret and they are modified on a regular basis. On the other hand, identify slow sites by means of a warning label in the search results is clearly deterrent. This is what Google is currently testing.
Search engines want to force web designers to create sites that provide content quickly, particularly for the visible portion of the website on the screen. Google calls this concept the fold in reminder of the newspapers folded in half. On the screen surface of a mobile device for example, there is only a small part of the website content that is displayed: the rest is available by scrolling down. It would be very burdensome to wait until after the full transfer of content before getting any display.
For Google, Bing and others, the aim is to reduce drop-outs of search queries. A lot of energy is wasted on web servers when a user clicks on a result but, in the absence of an adequate response time, he skips to the next one.
Search engines want to force web designers to create sites that provide content quickly, particularly for the visible portion of the website on the screen. Google calls this concept the fold in reminder of the newspapers folded in half. On the screen surface of a mobile device for example, there is only a small part of the website content that is displayed: the rest is available by scrolling down. It would be very burdensome to wait until after the full transfer of content before getting any display.
For Google, Bing and others, the aim is to reduce drop-outs of search queries. A lot of energy is wasted on web servers when a user clicks on a result but, in the absence of an adequate response time, he skips to the next one.
Set up a priority among the images
The images being the elements of a web page asking for a lot of bandwidth, it is desirable to select those that should be loaded and displayed first, above the fold, and let the others lazy load while the user views the available content on the screen.
You will find on the internet many solutions for dynamic loading of images that use advanced Javascript or php programming techniques. A more simple and widely compatible with all platforms solution is proposed: the use of the CSS instructions «:root» and «content». The pseudo-class «:root» target the <HTML> tag of a web page. The «content» statement inserts some content. By combining these two statements, one indicates to the browser or any browsing device to load images in cache memory. They will be displayed without loading delay by the usual HTML code of the web page. Simply insert the code below in the <head> section of the HTML file and include all images to load in priority.
You will find on the internet many solutions for dynamic loading of images that use advanced Javascript or php programming techniques. A more simple and widely compatible with all platforms solution is proposed: the use of the CSS instructions «:root» and «content». The pseudo-class «:root» target the <HTML> tag of a web page. The «content» statement inserts some content. By combining these two statements, one indicates to the browser or any browsing device to load images in cache memory. They will be displayed without loading delay by the usual HTML code of the web page. Simply insert the code below in the <head> section of the HTML file and include all images to load in priority.
<style>
:root {content:url(logo.png) url(banner-header.jpg) url(social-sprite.png) url(conception-design.jpg) url(bkgnd.png)}
</style>
Convincing results
It is possible to visualize the result using the development tools available within your favorite browser. Loading image by CSS was set up on the Informoid.com homepage for the 5 images of the above example. The page loading time diagrams were produced using Firefox.
The total page load time is not really improving on the diagrams above. And this is normal, there is the same amount of data to download in both cases. It is at the above the fold display that the difference is obvious. And this is particularly important for smartphones and other mobile devices with small screens. The test with the Google PageSpeed Insights tool yields a significant improvement of the results in its mobile version. Also note that this tool provides several useful information to improve all factors affecting the loading time of a web page.
If Google makes its tool available now to check and correct the deficiencies when loading websites, it is because the web giant will take into account sooner or later in its search results the score obtained by this tool. As you have now an easy (and free !) solution proposed here, take the lead over your competitors.