: Getting Prioritize visible content warning for page size less than 14.6 kb 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

@Heady270

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:


$GLOBALS['image_ratio']
$GLOBALS['image_maxheight']
$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.

Vote Up Vote Down

@Megan663

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.

Vote Up Vote Down