[Resolved] Google Changes

[Michael]

Damn, and again! OK third time lucky… Let me just type them out:

<div id="primary-menu" class="main-nav">

[Michael]

Running through the web dev tests again, and it highlights the header logo as the “largest contentful paint element”:

Largest Contentful Paint element 1 element found
This is the element that was identified as the Largest Contentful Paint.
Reclaim Design Logo
<img class="header-image" alt="Reclaim Design Logo" src="https://reclaimdesign.org/wp-content/uploads/reclaim-design-logo-small.jpg" title="Reclaim Design Logo" srcset="https://reclaimdesign.org/wp-content/uploads/reclaim-design-logo-small.jpg 1x, https://reclaimdesign.org/wp-content/uploads/reclaim-design-logo-small.jpg 2x" width="175" height="175">

I believe this is uploaded through the customizer? Is there a way I can optimize it further so that perhaps a WebP version with jpg fallback version could be served? (That’s what I’m working my way through the site doing via the html). The initial jpg is already compressed with caesium app and is pretty small (5.9kb)

[Tom]

The sticky navigation does cause some duplicate IDs as of right now, as it clones itself to become sticky. We’re working on fixing that in 1.11.0.

As for your logo, you could filter the logo HTML and do whatever you like with it. Not sure how you’d provide a fallback, but if you have an example of the HTML I should be able to help.

[Michael]

Hi Tom,

That’s awesome to hear that it’s being fixed for the next release 🙂

Here’s is an example of the html I’m using for images:

<picture>
                    <source srcset="https://reclaimdesign.org/wp-content/uploads/sustainable-reclaimed-wood-bath-mat-brown.webp" type="image/webp">
                    <source srcset="https://reclaimdesign.org/wp-content/uploads/sustainable-reclaimed-wood-bath-mat-brown.jpg" type="image/jpeg"> 
                    <img class="round_edges" src="https://reclaimdesign.org/wp-content/uploads/sustainable-reclaimed-wood-bath-mat-brown.jpg" alt="Sustainable Reclaimed Wood Folding Anti Slip Shower Mat | Reclaim Design" width="750" height="456"/>
                </picture>

[Tom]

You can change the HTML from the site logo completely like this:

add_filter( 'generate_logo_output', function() {
    return sprintf(
        '<div class="site-logo">
            <a href="%1$s" title="%2$s" rel="home">
                YOUR HTML HERE
            </a>
        </div>',
        esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
} );

[Michael]

Thank you very much Tom – I will give it a go 🙂

[Michael]

For anyone this may help – I had to adapt my previous idea a bit as I couldn’t get it to work with webp – added an option to serve a smaller sized image for mobile:

add_filter( 'generate_logo_output', function() {
    return sprintf(
        '<div class="site-logo">
            <a href="%1$s" title="Logo Title" rel="home">
				<img srcset="logo-mobile.jpg 75w, logo.jpg 150w" sizes="(max-width: 768px) 75px, 150px" src="logo.jpg" alt="Site Logo">
            </a>
        </div>',
        esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
} );

[Michael]

Hi Tom,

I’ve just run the web dev test again and it is flagging an expected logo size – not sure where this is set? Or how to now set responsively for the mobile version/desktop version?

User Experience

Displays images with inappropriate size
Image natural dimensions should be proportional to the display size and the pixel ratio to maximize image clarity.

URL …uploads/reclaim-design-site-logo.jpg(reclaimdesign.org)

Displayed size 75 x 75

Actual size 75 x 75

Expected size 197 x 197

[Michael]

Hi again Tom, is there a way to use webp as featured image for blog posts with jpeg fallback for browsers that don’t support?

[mikeb82]

With so many people working from home, distance learning, Zoom meetings, etc. I’m seeing a big increase in server response times for many hosting companies. Companies like SiteGround are strained for enough bandwidth. When you have slow server response times it will drag down the score of an otherwise fast website. There is little we can do other than change hosting companies and hope the new one is better.

BTW, there are companies like ShortPixel that will serve images in WebP format. It requires getting the ShortPixel plugin and signing up for the service.

[Tom]

Not sure about the featured image thing – you would likely need to find a plugin for that.

Also not sure about the expected logo size thing – that image is the one you’ve added to the logo output. I suppose Google thinks it should be larger for some reason?

[Michael]

Thanks Tom. I’ve written in to the Google Webmaster forum re: the “expected size” thing. Can’t find any info about it online…

As for the featured image – I’m trying to avoid additional plugins. I’ve actually stripped them back these last few days due to the Google Core Vital update scenario…

[Tom]

Plugins aren’t automatically bad. In a lot of cases, they provide the same code you would find anywhere else, but it’s in a nice package that’s easy to update if need be.

Of course, if a plugin is actually causing poor performance, you should definitely replace it.

[Michael]

Still working on this and had hoped to be able to share some positive results, but am not able to yet, so I’ll mark resolved 🙂

[Author]

Posts