3

I'm running a test page that has no js and some inlined css that is 2.24 KB. When I run the test on pagespeed everything turns out fine, but when I include an image that is 5.9 KB I get the "Prioritize visible content" warning.

I would like to include the image in my layout but not at the risk of getting that warning from pagespeed.

So far, I know that there is 2.24 KB of inlined css and an image that is 5.9 KB which equals to 8.14 KB. The initial congestion window is typically 14.6kB compressed, so I still have 6.46 KB leverage for the visible text. I doubt that the visible text exceeds 6.46 KB though. According to GTmetrix the whole document size is only 15.5KB.

Maybe I misunderstood something, but is there a way I can measure the size of the visible content?

1

I came across this question while having a similar issue with a few of my sites and I confirmed, as you did, that the image above the fold (in my case, a logo) was the issue in each case. Interestingly, I have many other sites with a logo above the fold that do not trigger the PVC warning.

I have read in a Google forum thread that if you simply specify the exact dimensions of your image you will pass the PVC test but I find that to be untrue. For me, that is necessary but the actual dimensions matter as well.

Unfortunately, after some experimentation, I cannot seem to find any consistent pattern or solution that sheds light on how Google decides what triggers a PVC warning, but the most interesting thing I noticed is that I didn't actually have to change my image. I simply had to scale it down via the width and height declarations, which would indicate that file size is probably not the relevant factor.

Of course, the small sample size (3 of my sites) and the fact that all of my sites use the same theme means that I may be generalizing incorrectly. Still, it is worth experimenting with if you run into the same issue. For my testing, I created a function to generate the logo image code with width and height specifications that can be easily adjusted. Perhaps overkill, but I wrote the function to consider any of three possible global scaling variables, which I declare in my theme's functions.php file:

  1. $GLOBALS['image_ratio']
  2. $GLOBALS['image_maxheight']
  3. $GLOBALS['image_maxwidth']

I then check if any of these is set and recalculate the width and height values appropriate based on the original image dimensions. Here is the final code:

if ( ! function_exists( 'se103976_scale_image' ) ) {
    function se103976_scale_image() {
        $image_alt = get_bloginfo( 'name' );
        $image_src = "image.png";   // --- whatever image you want to use (with relevant path)
        list( $image_width, $image_height ) = getimagesize( $image_src );

        // --- Sometimes need to reduce image to pass Google PageSpeed Prioritize Visible Content warning 
        // --- So, can do by a ratio, by a max width or a max height, depending on global variable set in functions.php file 
        if ( $GLOBALS['image_ratio'] != false) { 
            $image_width = round($GLOBALS['image_ratio'] * $image_width);
            $image_height = round($GLOBALS['image_ratio'] * $image_height);
        }
        if ( $GLOBALS['image_maxheight'] != false) {
            if ($image_height > $GLOBALS['image_maxheight']) {
                $ratio = $GLOBALS['image_maxheight'] / $image_height;
                $image_height = $GLOBALS['image_maxheight'];
                $image_width = round($image_width * $ratio);
            }
        }
        if ( $GLOBALS['image_maxwidth'] != false) {
            if ($image_width > $GLOBALS['image_maxwidth']) {
                $ratio = $GLOBALS['image_maxwidth'] / $image_width;
                $image_width = $GLOBALS['image_maxwidth'];
                $image_height = round($image_height * $ratio);
            }
        }
?><img alt="<?php echo $image_alt; ?>" src="<?php echo $image_src; ?>" width="<?php echo $image_width; ?>" height="<?php echo $image_height; ?>" /><?php
    }
}

Once I found the dimensions that would eliminate the PVC warning, I used an online image resizer to resize and replace my original image.

0

Here is what Google says about "prioritize visible content":

Rendering a modern web page requires lots of network resources but not all of them are needed right away. Visible content of the page is prioritized on the network and the browser so it doesn’t have to compete with the rest of the page.

You would get this warning on a page with an image below the fold. They way to solve the issue is to lazy load the image. To do so make the HTML code something like this:

<img src="blank.gif" data-src="real-image.jpg">

Then have some javascript that replaces the src attribute with the value from the data attribute. That should happen either after the onload event, or when the user scrolls to a certain point. There are many lazy loading javascript libraries available. You just need to search for them.

  • my understanding is that If the image is below the fold then It wouldn't be factored in prioritizing visible content. – Fabian Amran Jun 10 '17 at 9:48
  • The size of content is rarely the problem. Because of the time it takes to make each request new request (latency), minimizing the number of requests for the page to load is often very important. – Stephen Ostermiller Jun 10 '17 at 10:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.