0

I am trying to optimize my site's speed using PageSpeed Insights. I got the critical CSS inlined by using grunt criticalcss. That's all fine, but in my header, I use get_header_image() to show the logo. Page Speed Insights complains that "Only about 34% of the final above-the-fold content could be rendered with the full HTML response". As soon as I remove the logo from my code, the problem goes away. Is there any way I can avoid this, besides just placing it in a folder somewhere and grabbing it from there? I'd like my clients to have the option of easily uploading a new image.

1
  • Try setting a maximum pixel size and see if that helps. Sounds like probably the file size is what's triggering the complaint.
    – WebElaine
    May 4, 2017 at 15:40

1 Answer 1

1

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 = "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.

1
  • Thank you for your insight into this manner. Honestly, I feel like that is ridiculous how we need to go that far just to satisfy Page Speed Insights. I've given up on trying to satisfy that thing. Oct 3, 2017 at 13:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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