Archived topic
Ensure text remains visible during webfont load
19 replies · Started by Mini on April 9, 2021
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
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.
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;
Please let me know how I can fix this error.
Thanks
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!
Here is my site link: https://mywplife.com
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.
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?
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.
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.
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:
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.
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:
Can you help me with the same.
Apart from cache plugin, is there any other way to preload fonts?
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.
Hello,
Why Last Update date text and Burger Menu are cause of layout shift.
I have attache screenshot.
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.
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.
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.?
