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. But what if I told you there is a way to offload or even avoid loading page assets until they are needed? This can give your website a distinct advantage over your competition because not only will Google like your pages better so will your visitors!

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

15. Thank you!
Love2Dev