[Resolved] Google Changes

Home Forums Support Google Changes

Viewing 14 posts - 16 through 29 (of 29 total)
  • Author
    Posts
  • #1307369
    Michael

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

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

    #1307541
    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)

    #1307927
    Tom
    Lead Developer
    Lead Developer

    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.

    #1308033
    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>
    #1308159
    Tom
    Lead Developer
    Lead Developer

    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' ) ) )
        );
    } );
    #1308424
    Michael

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

    #1308488
    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' ) ) )
        );
    } );
    #1308494
    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

    #1308823
    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?

    #1308936
    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.

    #1308999
    Tom
    Lead Developer
    Lead Developer

    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?

    #1309162
    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…

    #1310038
    Tom
    Lead Developer
    Lead Developer

    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.

    #1320869
    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 🙂

Viewing 14 posts - 16 through 29 (of 29 total)
  • You must be logged in to reply to this topic.