- This topic has 19 replies, 4 voices, and was last updated 2 years, 11 months ago by Elvin.
-
AuthorPosts
-
April 9, 2021 at 10:58 pm #1728323Mini
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
April 10, 2021 at 3:54 am #1728481DavidStaffCustomer SupportHi 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.
April 10, 2021 at 4:43 am #1728532MiniBut 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 requestsI have attached the screenshot link;
Please let me know how I can fix this error.
Thanks
April 10, 2021 at 10:04 am #1729041TomLead DeveloperLead DeveloperHi 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!
April 10, 2021 at 10:06 am #1729046MiniHere is my site link: https://mywplife.com
April 10, 2021 at 10:08 am #1729050TomLead DeveloperLead DeveloperOne 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.April 10, 2021 at 10:31 am #1729084MiniIf 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?
April 11, 2021 at 3:44 am #1729575DavidStaffCustomer SupportHi 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.
April 11, 2021 at 4:48 am #1729608MiniI 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.
April 11, 2021 at 6:54 am #1729939DavidStaffCustomer SupportThe 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 to170
and height to60
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.
April 12, 2021 at 2:38 am #1730710MiniI 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?
April 12, 2021 at 3:11 pm #1731797TomLead DeveloperLead DeveloperI’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.
April 29, 2021 at 12:01 pm #1756232MiniHello,
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.
April 30, 2021 at 7:48 am #1757806TomLead DeveloperLead DeveloperHi 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.
April 30, 2021 at 8:30 am #1757862MiniHello,
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.?
-
AuthorPosts
- You must be logged in to reply to this topic.