How a Webpage Loads?
Lazy load images, sometimes called deffer-images, will be more sensible if you know how a webpage loads. Here, we talk about page loading from the moment HTML file received.
When HTML received, internet browser goes through it to see what external resources are requested. This process called “parsing”. When HTML parsed, the browser send requests for external files in this order:
- CSS files
- JavaScript Files
- Images
Downloading CSS & JS files are critical for page loading. This means they should be there before anything else happens.
After receiving CSS & JS files, it’s images turn. The browser download all the images one by one. If a page contains 150 images, the browser send 150 HTTP requests and download all of them. You may wonder 150 images is too much! but you can see it in modern webpages. There are colorful images from header to footer, even images in menus (like Publisher mega menu) which are visible just when they got hover.
Why Lazy Load Images?
Images, like CSS files, do not block page rendering but visitors download images probably they never see. Like images in footer or in menus which are only visible when got hover. This uses visitor bandwidth and delays page fully loading.
The theory of lazy loading images is: send request for an image only when it is visible in browser screen. This means when a visitor scrolls down the page, the browser sends requests for images in the visible portion.
Let’s say your page has 200 HTTP requests. Then the server receives 200 requests one after one and send their responses. But if the browser ignores images, it’s just 50 requests. 150 requests for images, which are probably way more heavier than all other files and , will be eliminated. Also consider this, HTTP 1.x mechanism is receiving one request, respond and receive new request. Now by a rule of thumb you can see how your page fully loading time decreases if you lazy load images.
Now you see the importance of lazy loading images. The main importance of lazy loading is, your page will be visible and functional way more faster. And this is what visitors and Google love!
Publisher Lazy Loading
If you are using Publisher WordPress theme, then do not worry for a sec about image lazy loading. Publisher has built-in lazy loading feature. It also do another important task; As you know, it is possible to change site width in Publisher, so this is important to receive images with appropriate size for every block in every site size you selected.Publisher lazy loading takes care of that. It selects the best size for images and also differ image loading till the moment it is visible.
How to Activate Publisher Lazy Loading
Publisher WordPress theme has built-in image lazy loading feature. For activating it do as follow. Go to Publisher → Theme Options → Advanced → Performance → Lazy Loading, select “Enable” for Images & iFrames Lazy Loading?.
