4. Lazy loading of off-screen images
Another image-related life hack that can improve user experience is to defer images offscreen. Basically, this means that you don’t load images until they are needed. Images at the top will load immediately, while images at the bottom of the page will only load when you scroll to them.
img-width lazyloaded
When looking at the analysis that Google PageSpeed Insights performs on loading speed, you’ll notice that it’s broken down into several milestones:
Home Page Speed Insights Metrics Overview
The first two — first contentful paint and first meaningful paint — are particularly important because they indicate how long it takes to fully load the above-the-fold content.
Obviously, you want the entire page to load and be azerbaijan mobile database interactive as quickly as possible. However, this isn’t always easy, which is why you should make it a priority.
Content above the fold accounts for the highest percentage of viewing time.
Viewing time based on vertical attention
If 57% of the time spent on a page is above the fold, lazy loading becomes a useful tool for saving server energy.
The process works like this:
Someone visits your website.
Your server will receive the request.
Instead of processing the entire web page and making visitors wait, the server only processes the visible portion of the page so they can see the content faster.