[Support request] Ensure text remains visible during webfont load

Home Forums Support [Support request] Ensure text remains visible during webfont load

Home Forums Support Ensure text remains visible during webfont load

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #1728323
    Mini

    Hello,

    When I checked my site speed in the Page Speed Insights, I got this error “Ensure text remains visible during webfont load”

    Please let me know how I can fix this error.

    Thanks

    #1728481
    David
    Staff
    Customer Support

    Hi there,

    the simplest method would be to preload whatever fonts you’re using. If you’re using a cache/optimization plugin like Autoptimize, WP Rocket etc. they generally have this option in there settings.

    #1728532
    Mini

    But I am using WP Super Cache plugin. Apart from that, we got these errors as well.

    Largest Contentful Paint element
    Avoid large layout shifts
    Eliminate render-blocking resources
    Avoid chaining critical requests

    I have attached the screenshot link;

    View post on imgur.com

    Please let me know how I can fix this error.

    Thanks

    #1729041
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    If you click on those tabs, Google will point out what is causing each issue.

    If you’d like us to take a quick look and point you in the right direction feel free to share the URL to the page you’re testing.

    Thanks!

    #1729046
    Mini

    Here is my site link: https://mywplife.com

    #1729050
    Tom
    Lead Developer
    Lead Developer

    One thing you can do is change your icons from Font to SVG in Customize > General.

    Other than that, I think WP Super Cache may be causing your CLS issues. It may be worth testing without it. If you’re keeping it on, make sure your CSS is still loading in the <head> and not the footer of the site, as that will cause layout shifts.

    #1729084
    Mini

    If we switch from W3 Super Cache plugin to Autoptimize, or WP Rocket, then we will get rid of these errors?

    Apart from that, How can I fix Largest Contentful Paint element and Avoid chaining critical requests issues?

    #1729575
    David
    Staff
    Customer Support

    Hi there,

    the issue can arise with any cache / otpimization plugins if they are incorrectly configured for your site build. Issues i see that you should address:

    1. PSI reports: Reduce initial server response time
    Address this with your hosting provider as it will be the major contributor to slow load times.

    2. Don’t lazy load images that are above the fold.
    First add this PHP Snippet to your site:

    // Add first-featured-image ( or any class ) to featured image of latest post
    function skip_lazy_class_first_featured_image($attr) {
      global $wp_query;
      if ( 0 == $wp_query->current_post ) {
          $attr['class'] .= ' first-featured-image';  
      }
      return $attr;
    }
    add_filter('wp_get_attachment_image_attributes', 'skip_lazy_class_first_featured_image' );

    Then in your lazy loader options you should have an option to exclude image with a specific CSS class add these two:

    is-logo-image first-featured-image

    Fix those first and then if need be we can take another look at the site.

    #1729608
    Mini

    I have added PHP script and css class in the lazy load option.

    Still, we are getting lot of errors in the lighthouse. Please look into it.

    I have attached screenshot.

    View post on imgur.com

    #1729939
    David
    Staff
    Customer Support

    The main issue is still the server response times. That is what you need to improve first and foremost. Any other improvements to the site will be minimal in comparison to making that change.

    In the Diagnostics:

    1. Font loading – as i mentioned here – check with the cache plugin author if they have this option.

    2. Image Elements do not have explicit width and heights. Add the PHP Snippet provided here:

    https://docs.generatepress.com/article/generate_mobile_header_logo_output/#setting-a-width-and-height

    In that code you will see width and height are set to 999 change width to 170 and height to 60

    3. The Serve Static cache polices are something you need to address at the server level. Your host should be able to help with this. Or check with your Cache Plugin author if they provide an option.

    The other grey dotted diagnostics are references – not errors.

    And as the report says the improvements made here DO NOT improve the overall pagespeed score.

    #1730710
    Mini

    I have implemented all the suggestions that you gave , it improved my page speed score in desktop. But when I checked in the mobile, there is still lots of errors.

    Screenshots:

    View post on imgur.com

    Can you help me with the same.

    Apart from cache plugin, is there any other way to preload fonts?

    #1731797
    Tom
    Lead Developer
    Lead Developer

    I’m seeing a 90 on mobile at the moment, which is very good.

    The remaining items are mainly too many resources (a plugin like Autoptimize or a caching plugin can fix this), and font preloading. Not sure about a solution without a caching plugin here, however I’m not sure how major of an impact it’s going to make.

    #1756232
    Mini

    Hello,

    Why Last Update date text and Burger Menu are cause of layout shift.

    I have attache screenshot.

    View post on imgur.com

    How can I fix this issue.

    Also, I would like to switching dynamic css method from Inline Embedding to External file help me to improve page speed performance.

    Please let me know.

    #1757806
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Looks like the logo needs some dimensions.

    You can:

    a) Change your site structure to Flexbox in “Customize > General” – this will have other performance benefits as well.
    b) Keep using floats and add this function:

    add_filter( 'generate_logo_attributes', function( $attributes ) {
        $data = wp_get_attachment_metadata( get_theme_mod( 'custom_logo' ) );
    
        if ( ! empty( $data ) ) {
            $attributes['width'] = $data['width'];
            $attributes['height'] = $data['height'];
        }
    
        return $attributes;
    } );

    You can turn on the external file in “Customize > General” as well, but this matters less as you have a caching plugin activated anyways.

    #1757862
    Mini

    Hello,

    When I switched from Floats to Flexbox, this is affecting my site fonts. (I guess it deletes font weight from the site)

    Can you let me know why does it happen.

    For now, I have kept using Floats instead of the Flexbox and added that function you have provided me, but still I am facing CLS issues in the desktop.

    Apart from that, LCP issue is created by the feature images? How Can I fix this.?

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.