Increase website loading speed using lazy-load images
Now many sites are full of graphics in various forms: avatars, illustrations for posts, galleries and so on.
Readers of the blog "Client Optimization" like no one else know the price of unnecessary requests to the server.
The number of calls to the server can be easily reduced with the help of post-loading techniques for images that are not in scope (first screen). That is, initially only those images that the user is able to see will be loaded, the rest will be loaded as the page scrolls.
')
Since I support the use of various JavaScript frameworks, I will provide components / extensions for some of the most popular: jQuery, Prototype, and YUI. If you know similar extensions for other libraries, please write in the comments and I will add them to the list.
To accelerate the loading site, you can use the following components:
The list was not arranged in such an order by chance; the appearance of one plug-in caused the birth of another - YUI -> JQuery -> Prototype.
This is a very simple solution that is integrated into the website in less than an hour (or even 10 minutes), but can bring you significant traffic savings and an increase in page load speed, and most importantly a decrease in server load.
See how this technique works, for example, on the site mashable.com
via askdev.ru/blog
Readers of the blog "Client Optimization" like no one else know the price of unnecessary requests to the server.
The number of calls to the server can be easily reduced with the help of post-loading techniques for images that are not in scope (first screen). That is, initially only those images that the user is able to see will be loaded, the rest will be loaded as the page scrolls.
')
Since I support the use of various JavaScript frameworks, I will provide components / extensions for some of the most popular: jQuery, Prototype, and YUI. If you know similar extensions for other libraries, please write in the comments and I will add them to the list.
To accelerate the loading site, you can use the following components:
- YUI - http://developer.yahoo.com/yui/examples/imageloader/imgloadfold.html
- JQuery - http://plugins.jquery.com/project/lazyload
- Prototype - http://www.bram.us/projects/js_bramus/lazierload/
The list was not arranged in such an order by chance; the appearance of one plug-in caused the birth of another - YUI -> JQuery -> Prototype.
This is a very simple solution that is integrated into the website in less than an hour (or even 10 minutes), but can bring you significant traffic savings and an increase in page load speed, and most importantly a decrease in server load.
See how this technique works, for example, on the site mashable.com
via askdev.ru/blog
Source: https://habr.com/ru/post/87083/
All Articles