• Home
  • Bookmarklet to inspect and identify images that are not using lazy loading on a webpage

    Chris

    Administrator
    Staff member
    A Chrome bookmarklet to inspect and identify images that are not using lazy loading on a webpage.

    lazy.jpg



    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.
    If you know which classes or data attributes are used by the website you're interested in, you could modify the bookmarklet to check for those. However, without knowing the specifics, it's hard to cover all possible cases.

    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
    1. 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'.
    2. Name the bookmark "LazyLoadInspector" or another name of your choice.
    3. Copy the entire JavaScript code for the LazyLoadInspector bookmarklet.
    4. Paste the copied JavaScript code into the URL field of the bookmark.
    How to Use the Bookmarklet
    1. Navigate to the webpage you want to inspect for non-lazy-loaded images.
    2. Click the "LazyLoadInspector" bookmarklet from your bookmarks bar.
    3. 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.
    4. 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.
    Notes
    • 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: