How to Reduce Lazy Load Resources
How to Reduce Lazy Load Resources in Website
Reduce Lazy Load Resources: Utilize lazy loading for resources such as
images, scripts, and stylesheets. This means only loading these resources
when they are needed, which can help reduce the initial DOM size and improve
page load performance. Diagnose performance issues, Performance Values are
estimated and may vary. The performance score is calculated directly from
these metrics. See calculator.
Images:
Lazy loading images can be achieved by setting the loading attribute to "lazy" on the <img> tag. This tells the browser to load the image only when it's about to come into view.
<img alt="Lazy-loaded image" src="placeholder.png" data-src="image.png" class="lazyload" />
<script>
document.addEventListener('DOMContentLoaded', function() {
var lazyImages = document.querySelectorAll('img.lazyload');
// Check if IntersectionObserver is supported
if ('IntersectionObserver' in window) {
var observer = new IntersectionObserver(function(entries, self) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var img = entry.target;
img.src = img.getAttribute('data-src');
img.onload = function() {
img.removeAttribute('data-src'); // Clean up the data-src attribute
};
self.unobserve(img);
}
});
});
lazyImages.forEach(function(img) {
observer.observe(img);
});
} else {
// Fallback for browsers that don't support IntersectionObserver
lazyImages.forEach(function(img) {
img.src = img.getAttribute('data-src');
img.onload = function() {
img.removeAttribute('data-src'); // Clean up the data-src attribute
};
});
}
});
</script>
If you're unable to provide the dimensions of the images directly in the HTML markup, you can still prevent layout shifts caused by lazy-loading images by using CSS to reserve space for the images.
Scripts: Lazy loading scripts typically involves dynamically creating <script> elements and appending them to the DOM when they are needed. Here's a basic example:
<script>
function loadScript() {
// Check if the script has already been loaded
if (!document.querySelector('script[src="script.js"]')) {
var script = document.createElement('script');
script.src = 'script.js';
script.defer = true; // Defers the execution until HTML parsing is complete
document.body.appendChild(script);
}
}
// Optionally call the function to load the script when the DOM is fully loaded
document.addEventListener('DOMContentLoaded', loadScript);
</script>
Stylesheets: Lazy loading stylesheets can be done by creating <link> elements dynamically and appending them to the <head> when required. Remember to replace "image.jpg", "image.png", "script.js", and "stylesheet.css" with the actual URLs of your resources.
<script>
function loadStylesheet() {
// Check if the stylesheet has already been loaded
if (!document.querySelector('link[href="stylesheet.css"]')) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'stylesheet.css';
link.media = 'print'; // Set media attribute to 'print' initially to defer rendering
link.onload = function() {
link.media = 'all'; // Change media attribute to 'all' to render the stylesheet after it's loaded
};
document.head.appendChild(link);
}
}
// Optionally call the function to load the stylesheet when the DOM is fully loaded
document.addEventListener('DOMContentLoaded', loadStylesheet);
</script>
Images:
Lazy loading images can be achieved by setting the loading attribute to "lazy" on the <img> tag. This tells the browser to load the image only when it's about to come into view.
<img alt="Lazy-loaded image" src="placeholder.png" data-src="image.png" class="lazyload" />
<script>
document.addEventListener('DOMContentLoaded', function() {
var lazyImages = document.querySelectorAll('img.lazyload');
// Check if IntersectionObserver is supported
if ('IntersectionObserver' in window) {
var observer = new IntersectionObserver(function(entries, self) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var img = entry.target;
img.src = img.getAttribute('data-src');
img.onload = function() {
img.removeAttribute('data-src'); // Clean up the data-src attribute
};
self.unobserve(img);
}
});
});
lazyImages.forEach(function(img) {
observer.observe(img);
});
} else {
// Fallback for browsers that don't support IntersectionObserver
lazyImages.forEach(function(img) {
img.src = img.getAttribute('data-src');
img.onload = function() {
img.removeAttribute('data-src'); // Clean up the data-src attribute
};
});
}
});
</script>
If you're unable to provide the dimensions of the images directly in the HTML markup, you can still prevent layout shifts caused by lazy-loading images by using CSS to reserve space for the images.
Scripts: Lazy loading scripts typically involves dynamically creating <script> elements and appending them to the DOM when they are needed. Here's a basic example:
<script>
function loadScript() {
// Check if the script has already been loaded
if (!document.querySelector('script[src="script.js"]')) {
var script = document.createElement('script');
script.src = 'script.js';
script.defer = true; // Defers the execution until HTML parsing is complete
document.body.appendChild(script);
}
}
// Optionally call the function to load the script when the DOM is fully loaded
document.addEventListener('DOMContentLoaded', loadScript);
</script>
Stylesheets: Lazy loading stylesheets can be done by creating <link> elements dynamically and appending them to the <head> when required. Remember to replace "image.jpg", "image.png", "script.js", and "stylesheet.css" with the actual URLs of your resources.
<script>
function loadStylesheet() {
// Check if the stylesheet has already been loaded
if (!document.querySelector('link[href="stylesheet.css"]')) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'stylesheet.css';
link.media = 'print'; // Set media attribute to 'print' initially to defer rendering
link.onload = function() {
link.media = 'all'; // Change media attribute to 'all' to render the stylesheet after it's loaded
};
document.head.appendChild(link);
}
}
// Optionally call the function to load the stylesheet when the DOM is fully loaded
document.addEventListener('DOMContentLoaded', loadStylesheet);
</script>
Comments
Post a Comment
Thanks for your Comments.