Blog

Lazy loading for faster page loads

Lazy loading is a design pattern commonly used in computer programming. It is a technique that defers loading of non-critical resources at page load time. It lowers initial page payload and load time, but doesn’t skimp on content. Adding lazy loading can make your website load and faster. Instead of loading all of the content when the page is accessed, content can be loaded when you accesses a part of the page that requires it. With lazy loading, pages are created with placeholder content. This is only replaced with actual content when you needs it.
When you add an image, or video to a web page, that will references a small placeholder. When you browse the web page, the actual resource, that is image or video is cached by the browser. And replaces the placeholder when the image or video becomes visible to your screen. The opposite of lazy loading is eager loading. In eager loading we load all the objects in memory as soon as the object is created.
The blogging platform, WordPress provides a lazy loading solution called Infinite Scroll. It continuously loads content as you scrolls down the page. The page’s footer is displayed as an overlay beneath the scrolling content. Google takes a different approach for its image search results. As you scrolls down the page, placeholder images are replaced with thumbnails. After a certain number of images are displayed, a button allows the user to load additional images. By providing this button, Google combines infinite scrolling and lazy loading to create a dynamic hybrid approach. The advantages of lazy loading are:

Minimizes start up time of the application.
Application consumes less memory because of on-demand loading.
Unnecessary database SQL execution is avoided.

AMP(Accelerated Mobile Pages Project) is open-source website publishing technology. It is designed to improve the performance of web content and advertisements. It speed up the delivery of content through the use of stripped down code known as AMP HTML. Everybody loves fast pages and most of our visitors are on the go, that is why we selected AMP. The AMP framework consists of three components: AMP HTML, AMP JavaScript, and AMP caches.
To use AMP, you create an alternate version of your site that conforms to the specifications published by the AMP project. These standards are a lot like traditional HTML, but pared down to what Google considers to be the bare minimum. Typically you’ll give your AMP-optimized site a separate address. There is a plugin will automatically create these alternate versions and help Google find them. But you could, theoretically, just replace your whole site with AMP optimized pages and it would still work in most modern web browsers, though it might be a bit drab.
AMP pages are just web pages that you can link to and are controlled by you. It builds on your existing skill sets and frameworks to create web pages. It’s ecosystem includes 25 million domains, 100+ technology providers, and leading platforms, that span the areas of publishing, advertising, e-commerce, local and small businesses, and more.