A Chrome bookmarklet to inspect and identify images that are not using lazy loading on a webpage.
Here are a few common lazy loading patterns that you might come across, that are included in the bookmarklet:
Here is the Javascript code for the bookmarklet. I have named it: LazyLoadInspector
The LazyLoadInspector is a JavaScript bookmarklet that identifies all images on a webpage that are not using lazy loading. It inspects each image on the page, checks if they are implemented with the most common lazy loading practices, and creates a list of images that are not. The list is shown on the webpage with the option to copy/paste.
How to Install the Bookmarklet
Here are a few common lazy loading patterns that you might come across, that are included in the bookmarklet:
- jQuery Lazy Load: Uses a class="lazy" attribute.
- Lozad.js: Uses a class="lozad" attribute.
- Layzr.js: Uses a data-normal attribute.
- Lazysizes: Uses a class="lazyload" attribute.
Here is the Javascript code for the bookmarklet. I have named it: LazyLoadInspector
Code:
javascript:(function() {
function createDiv(text) {
const div = document.createElement('div');
div.style.position = 'fixed';
div.style.bottom = '0';
div.style.right = '0';
div.style.background = '#000';
div.style.color = '#fff';
div.style.padding = '10px';
div.style.zIndex = '9999';
div.innerHTML = text;
return div;
}
function copyToClipboard(text) {
const textarea = document.createElement('textarea');
textarea.textContent = text;
textarea.style.position = 'fixed';
document.body.appendChild(textarea);
textarea.select();
try {
return document.execCommand('copy');
} catch (ex) {
console.warn('Copy to clipboard failed.', ex);
return false;
} finally {
document.body.removeChild(textarea);
}
}
function getNonLazyImages() {
const images = Array.from(document.getElementsByTagName('img'));
const nonLazyImages = images.filter(image => {
const loading = image.getAttribute('loading');
const className = image.className;
const dataNormal = image.getAttribute('data-normal');
return loading !== 'lazy' && !className.includes('lazy') && !className.includes('lozad') && !dataNormal;
});
return nonLazyImages.map(image => image.src).join('\n');
}
const nonLazyImages = getNonLazyImages();
const imagesText = `Images not using lazy loading:\n${nonLazyImages}`;
const div = createDiv(`<pre>${imagesText}</pre><button id="copyButton">Copy to Clipboard</button>`);
document.body.appendChild(div);
const copyButton = document.getElementById('copyButton');
copyButton.addEventListener('click', () => {
copyToClipboard(nonLazyImages);
});
})();
The LazyLoadInspector is a JavaScript bookmarklet that identifies all images on a webpage that are not using lazy loading. It inspects each image on the page, checks if they are implemented with the most common lazy loading practices, and creates a list of images that are not. The list is shown on the webpage with the option to copy/paste.
How to Install the Bookmarklet
- Create a new bookmark in your browser. This process varies depending on the browser you're using. Generally, you can do this by right-clicking the bookmarks bar and selecting 'Add page' or 'Add bookmark'.
- Name the bookmark "LazyLoadInspector" or another name of your choice.
- Copy the entire JavaScript code for the LazyLoadInspector bookmarklet.
- Paste the copied JavaScript code into the URL field of the bookmark.
- Navigate to the webpage you want to inspect for non-lazy-loaded images.
- Click the "LazyLoadInspector" bookmarklet from your bookmarks bar.
- The bookmarklet will execute and create a display at the bottom-right corner of your browser window. This display will include a list of image URLs that are not using lazy loading.
- Click the "Copy to Clipboard" button to copy the list of non-lazy-loaded image URLs. You can then paste this list into a text editor or another application for further analysis.
- The LazyLoadInspector bookmarklet covers the most common lazy loading practices, including the loading="lazy" attribute, as well as classes and data attributes used by popular JavaScript libraries and frameworks like jQuery Lazy Load, Lozad.js, Layzr.js, and Lazysizes.
- The bookmarklet does not guarantee to find all non-lazy-loaded images in every case, as there are many ways to implement lazy loading, and new techniques are continually being developed. However, it should catch most of the common cases.
- The bookmarklet is designed to work in all modern browsers, but it hasn't been extensively tested in every possible browser and configuration. I used Chrome only.
- If you encounter any problems or have suggestions for improvements, feel free to post them in this thread.
Last edited: