Lazy Loading
Lazy load; is the asynchronous loading of images on websites. In other words, it means that the content at the top of the screen is loaded after they are completely loaded or when they see the relevant image in the browser.
By using lazy load, you can delay the loading of images that are not on the screen, make the site open faster, and prevent unnecessary load on the site. This improves first page load performance for images that are not in the viewport.
Lazy Load is a combination of JavaScript + CSS and HTML code that works on the principle that an element on the page is not called unless it is needed.
By using Lazy Load, according to the mouse movement of the visitor, the part of the page that is not visible on the first opening is loaded as the user scrolls down.
Thus, the page opening speed, which is very important in terms of SEO and user experience, will decrease considerably. Considering that 95% of visitors stop visiting the site if the opening of the site they visit takes longer than 3 seconds, every second becomes more valuable.
The main issue with using lazy load is whether the image needs to be loaded right now. If an image is not visible to users on the browser screen, delay that image. As an example, you can consider the following types of procrastination.
- Images in the content area,
- The logo in the footer area,
- Social icons used in the lower section,
- Sidebar images.