Lazy loading is critical not only to good performance but also to deliver a good user experience. You can also use ImageKit’s website analyzer to identify if your website uses lazy loading or not apart from other critical image-related optimizations on your page. This has a section dedicated for offscreen images. Just how much will you save? You can find out which images are a candidate for lazy loading and how many bytes you can save on the initial page load by using the Google Lighthouse audit tool. This will become more apparent as we explore lazy loading in the coming sections. The reduction in bytes transferred from your delivery network or server reduces delivery costs. This is especially true for users that instantly bounce off a page or interact only with the top portion of the content. Thus, you may reduce the total bytes delivered on the page and ultimately save yourself a few pennies in the process. A lazy-loaded image may never get loaded if the user never reaches it. Cloud hosting services, like Content Delivery Networks (CDNs) or web servers or storages, deliver images (or any asset for that matter) at a cost based on the number of bytes transferred. The second benefit is for you as a website administrator. Hence, the time from request to render becomes smaller and the page becomes usable much earlier. This ensures that any device on any network is able to download and process the remaining resources much faster. And fewer bytes to download means the page renders faster than if those bytes and requests were being made. Fewer image requests mean fewer bytes to download. Lazy loading reduces the number of images that need to be loaded on a page upfront. The obvious benefit is that we get smaller web pages that load faster. Here are two of the advantages we get with lazy loading. You may already start to see how this benefits both you and the user. It also never loads in the first place because, hey, it was never needed. If the user never scrolls to the point of the page that contains the image, then the user will never see that image. We will stick to lazy loading images in this guide, but it’s good to know it can be applied to other assets. Same deal for an image-load it when we need it. For example, even a JavaScript file can be held back if it is best not to load it initially. The technique of lazy loading can be applied to just about any resources on a page. These techniques help in improving performance, better utilization of the device’s resources and reducing associated costs. Lazy Loading is a set of techniques in web and application development that defers the loading of resources on a page to a later point in time-when those resources are actually needed instead of loading them up front. Instead of loading them right away, which is what normally happens, we allow them to load later. Similarly, lazy loading defers the loading of resources on the page as long as they are not needed. We often associate the word “lazy” with avoiding work as long as possible, or the sheer act of wanting to do nothing at all.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |