get_header_image() causes “Prioritize visible content” issue in Page Speed Insights

I came across this question while having a similar issue with a few of my sites and confirmed, as you did, that the logo above the fold was the issue in each case. I am not using get_header_image() but rather referencing a static image location so the issue isn’t specific to that. In fact, I even had a site with two images above the fold, only one of which actually triggered the warning.

Someone else had a related question, which I attempted to answer. I am not sure what the Stack Exchange rules/etiquette is for answering two similar questions. You can read my full reply at the other question. But, perhaps it is better/recommended that I repeat that answer here? If so, here goes:

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 = "https://wordpress.stackexchange.com/questions/265838/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.