Lazy load Website Assets
Download as PPTX, PDF1 like331 views
The document discusses lazy loading as a technique to enhance website speed, emphasizing its importance for SEO and user experience. It details how lazy loading, particularly with images and scripts, optimizes loading times by deferring resource requests until they are needed, leveraging the Intersection Observer API for efficiency. It also touches on strategies like pagination and using the History API to improve performance in web applications.
Lazy load Website Assets
- 1. Lazy Loading Website Assets A Technique to Improve Your Page Speed https://love2dev.com/blog/lazy-loading/
- 2. https://twitter.com/CHrisLove https:./facebook.com/Love2Dev/ https://www.linkedin.com/company/love2dev/ Chris Love Progressive Web Apps and SEO Specialist
- 3. Website speed is a crucial aspect of on page SEO everyone can control. Your goal is to be interactive in under 3 seconds, even on a basic phone over a 3G connection. However, most web sites have so many requests and large payloads this time limit or budget cannot be achieved. In fact, the average web page takes 22 seconds to load, according to Google's research. Why Lazy Load Website Speed
- 4. • Lazy-Load Content Scenarios • What is IntersectionObever? • Pagination/Continuous Scroll • Using the History API • Loading Scripts As Needed
- 5. Lazy-Load Content Scenarios For simplicity I will just call it a blog. These sites typically need HTML, CSS, JavaScript, images and custom fonts. They also tend to be sites you want free organic traffic from Google, which means SEO is important. Content Focused Sites Complex web applications can be a little more delicate because they lean on more application logic. This means they require more JavaScript files. When these files are loaded matters. While you can use IntersectionObserver for this, your application needs a good technique to dynamically load scripts as needed. Web Apps
- 6. Images require bandwidth and may not even be seen. Deferring their request means you can prioritize other content, like HTML and CSS. Just make sure the images are available to Google. The noscript tag is a semantic mechanism to tell the browser to only render the content inside the element if the browser (user agent) does not support JavaScript. Most visitors will have JavaScript turned on, so they won't trigger the image to load initially. But as you will shortly see it will when the non-noscript image is visible. Lazy Load Images Image here Your Business
- 7. Example Code <img data-srcset="img/example-869x361.jpg 869w, ..." data-src="img/example-869x361.jpg" class="lazy-image" sizes="(max-width: 480px) 90vw, 30vw" alt=“…"> <noscript><img src="img/example-869x361.jpg" alt=“…"></noscript>
- 8. Lazy Load Images The images are not requested until the data-src and data-srcset attributes are converted to the normal src and srcset attributes. This is done using IntersectionObserver. Image here
- 9. What is IntersectionObserver? Triggers a callback when target elements come into view. How it Works Supported by all modern browsers and there is a stable polyfil you can dynamically load for those that don't. Browser Support
- 10. IntersectionObserver This API triggers a callback when target elements come into view. This callback allows you to execute code, which in our scenario is to load assets as needed. Load as It Enters Viewport As observed content approaches the visible viewport the IntersectionObserver API triggers a callback method. Inside this method you can execute code to update and load assets on demand.
- 11. Example Code var config = { // If the image gets within 50px in the Y axis, start the download. rootMargin: '50px 0px', threshold: 0.1 }; imgObserver = new IntersectionObserver(showImage, config); imgObserver.observe(yourImage);
- 12. Pagination / Continuous Scroll A common tactic on news related sites in the past couple of years. This is where you scroll down an article and as you reach the bottom a new article is rendered. Solutions: • IntersectionObserver • History API
- 13. Using the History API The main advantage it provides is the ability to change the URL in the address bar without triggering a server request that causes a complete page reload. It works much like the hash fragment technique, but uses a shareable URL.
- 14. Web Apps Loading Scripts As Needed JavaScript is the single biggest cause of poor page render times. By offloading scripts you remove them from the rendering process. Improves Page Load Create a script element for each script and appending it to the DOM. Once appended the browser loads the script just as if it were part of the initial markup. Add Scripts on Demand Requires a little finesse, but can make your UX so much better, which should improve customer satisfaction and retention while reducing help desk calls. Complex Web Apps Load minimal script footprint. Gets application going. Boot Up Experience 300 x 50 px