code-optimization

I think it’s the most common issue when testing a website with Google Mobile-Friendly Tool. There are some solutions I found to fix this issue with WordPress.

Why Google says Page partially loaded 🤔

Actually, Mobile-Friendly Test is just a tool from Google, and each tool has its specific rule to use. As I found, the Mobile-Friendly Test has its limit for each site test. I think it’s because they want to allow more users to run the tool with stability.

I found this comment 💬 on Google Search Console Support describe the correct issue: https://support.google.com/webmasters/thread/12516894/why-mobile-friendly-test-shows-page-partially-loaded?hl=en&msgid=12518477

Let’s fix it 💡

We can’t do anything to increase the limit from Google so the main solution is how we can minimize the request number on our site to fit Google quota.

📍 Don’t use webp format

I often use EWWW Image Optimizer to optimize images and serve WebP as a recommendation for speed test. For cross-browser testing, I need to enable option JS WebP Rewriting instead of just use .htacess to serve webp format for some browsers that don’t support webp format (for some versions of Safari). When checking the Resources load, the JS WebP Rewriting option is not working perfectly because it doesn’t apply to the background image. Now the issue happens.

Our front-end devs often use <img> inside a wrapper div with a background image so they can easily style for an image element perfectly. Imagine that the site has 10 blocks of background images, each block need 2 requests: one for the original image format file and one for webp file, so the site has more than 20 requests for just images. It nearly reaches the Google quota.

For example, the below code will need 2 requests for webp file in <img> and a jpg file in the background image

<div class="background-image" style="background-image:url(your-image-url)">
<img src="your-image-url" alt="The Image Alt" />
</div>

👉 With the image uploaded to use webp, we need to generate an extra file for this specific format and since it doesn’t work properly, so I decided to not use any webp format. I try to optimize the images as much as I can by some online tool and use this file on the site to maintain speed test without webp.

📍 Image sizes consistency in code

Try to make it consistent between your image sizes. Check the settings for generated image sizes in CMS > Settings and apply it for the code correctly.

Use the same image size for displaying elements in a block. For example, if we want to use both background image and image tag, we can use the same image size (e.g: full, thumbnail or medium…). It will only request 1 file, by that the number of requests will be reduced also.

Remove srcset from WordPress <img> tag if needed. srcset will be used to define and load specific sizes for the responsive images. In case mostly we need the full-size image for both desktop and mobile or both background image and image tag, I think we can remove srcset in <img> tag by default.

📍 Lazy load slider

With some common cache plugins from WordPress, there will be a lazy load option to implement the lazy load feature for images and videos, but this option won’t work for sliders.

The reason why a site has too many requests is: It loads all slider items from the first load even user didn’t touch the slider. When we have too many items in slider, the request number will be increased also. It will reach Google request limit easily.

👉 We need to find the way to “lazy load” slider with image. When the site loads, it only needs to load the items that display in first slide. Then when user click next and previous, it will continue to load other items. It depends on your slider library to apply the code for lazy load, I often use Slick Slider and it’s how I can “lazy load” the slider:

// This is HTML code
<div class="logo-slider">
    <div class="logo-slider__item">
        <div class="logo-slider__item-bg" data-bg-img="your-image-url">
            <img data-src="your-image-url" alt="your-image-alt">
        </div>
    </div>
    <div class="logo-slider__item">
        <div class="logo-slider__item-bg" data-bg-img="your-image-url">
            <img data-src="your-image-url" alt="your-image-alt">
        </div>
    </div>
    <div class="logo-slider__item">
        <div class="logo-slider__item-bg" data-bg-img="your-image-url">
            <img data-src="your-image-url" alt="your-image-alt">
        </div>
    </div>
</div>

// JS code for lazy load both background image and image from slider
$('.logo-slider').each(function(){
    const $slider = $wrapper.find('.vii-logo-slider__slider');

    // Lazy load
    $slider.on('init afterChange', function(event, slick, currentSlide, nextSlide){
        let $activeSlider = $(this).find('.slick-active'), bgImage, imageSource;
        $activeSlider.each(function(){
            let $backgroundImage = $(this).find('.logo-slider__item-bg'),
                $image = $(this).find('.logo-slider__item-bg img');
            if(bgImage = $backgroundImage.attr('data-bg-img')){
                $backgroundImage.css('background-image', 'url("' + bgImage + '")');
                $backgroundImage.removeAttr('data-bg-img');
                imageSource = $image.attr('data-src');
                if(imageSource){
                    $image.attr('src', imageSource);
                    $image.removeAttr('data-src');
                }
            }
        });
    });

    // Slider
    $slider.slick({
        // default
        swipeToSlide: true,
        slidesToShow: 5,
        slidesToScroll: 2,
        arrows: true
    });
});

📍 Use CSS @import if the site uses Google Fonts (optional)

⚠️ This solution is the final step if all these above don’t work for your site because using @import CSS for loading fonts can decrease your site speed score.

For speed optimization, I don’t use @import directly in CSS because the URL provided on Font services like Google Fonts or Typekit always include many subsets I don’t need. To use any fonts, I will open the @import URL and copy exactly what I need for the site, but the issue comes here.

For example, when I want to use fonts for Vietnamese, I need 3 subsets Latin, Latin-ext, and Vietnamese. A site often has at least 2 fonts: one for heading and one for body text, so I need to use 6 subsets for 2 fonts. Each subset will have a request to Google Font service, that why the number of requests will be increased.

👉 By using @import URL, the site only has one request for the fonts. Google will handle the other requests for subsets and font files.