What is lazy load
Page speed plays an important role in SEO studies and improving user experience. There are many studies that can be done to increase page speed. However, the most important action to improve user experience and reduce page load time is lazy loading of images.
What is Lazy Load?
Lazy loading means delaying the loading of images or files until they are needed instead of loading them immediately. If you don't see an image when the page first loads, it's not necessary to load it right away. When you start viewing images on the Lazy load screen, the images are loaded. This means that requests are fulfilled as needed.
What are the benefits of Lazy Load?
Even using a lazy loading system only for images has many advantages. The two biggest benefits of a system we call lazy or delayed loading are that it reduces the initial page load speed, reduces server response time, and indirectly improves the user experience. Of course, these benefits will also be reflected in your SEO performance.
An example of lazy loading
For example, let's say you're reading blog content with 10 images on a mobile device. When you first enter a website, you will probably only see 1-2 images on the splash screen. Because the size of your screen is such that it can only fit 1-2 images (of course this number can vary depending on the size of the image). Why upload the remaining 8-9 images when you can only see 1-2 images on the screen? When you scroll the screen and zoom in on other images, the Lazy load system starts and asks to load the image. In this way, the speed of opening the website is reduced.
How is Lazy Load performed?
Lazy loading is done by linking website images with JavaScript code. There are many javascript libraries for lazy loading. For off-the-shelf systems like WordPress, many plugins do this.
1- Manual (without allowance) Production of lazy load
If you have specialized website software, you can do lazy loading very easily with basic software knowledge. For this we need a javascript library called "lazysizes".
We add our Javascript code to the body area of our website as follows. <script src="lazysizes.min.js" async=""></script>
Then we need to make a small change in the <img> tag where we define our images. When defining <img src="images/gorsel.jpg" alt="image"> in this way a normal image definition, for lazy loading <img data-src="images/gorsel.jpg" class="lazyload" alt=" image We need to define ">.
In other words, "data-src" should be selected instead of "src" when adding images. Additionally, you need to define 'class="lazyload"' in the <img> tag where the image is defined.
After performing these operations, only the images visible on the user's screen are loaded. Off-screen images are loaded while scrolling and displayed on-screen.
If you scroll down the screen and zoom in on images with lazy loading applied, the class="lazyload" attribute you specified will change the image tag to "lazyloaded".
As you can see in the image, the images that appear on the screen will be loaded. However, images that are not visible on the screen are lazily loaded and remain at the bottom.
If we didn't use the lazy loading system, these 30 images would be loaded immediately upon entering the site. In this case, the loading speed of your website will increase. One of the methods used by SEO agency companies to increase page speed is the lazy loading structure.
To observe this, you need to enter your website in the browser and open the developer tools. The fastest way to do this is to right-click on your site and say "inspect".
Yorumlar
Yorum Gönder