In this tutorial I will be using a real world example, which I’ve seen often while optimizing a site or in support tickets. Seriously, if anything I just said confused you or has you gasping for air just scroll down for the - much! - easier alternative. You’ve (temporarily) disabled any CSS optimization plugins, because that’ll ease the search.You’re aware of the fact that this tutorial is to show you a global approach and it might not fit your needs 100%,.You have SSH access to a staging environment replicating your production site,.PHPStorm or Visual Studio Code) installed and a local WordPress development environment ready to go, or You’re familiar with CSS and a bit of PHP (specifically WordPress’ framework),.Let’s make a few things very clear… Prerequisites Ensure Text Remains Visible During Webfont Load in WordPress: Hard Modeįair warning if you’re going to follow this part of the guide you’re going to have to get your hands dirty and depending on your configuration, it might take you a few hours. I’ll show you a few so you can pick your own. Unfortunately, to ensure text remains visible during webfont load in WordPress takes a bit more work, depending on your configuration and the approach you choose. The order of the attributes isn’t important and font-display accepts several valid values, but swap is by far the best performing.Īt this point the optimization suggestion would’ve been eliminated and our PageSpeed Insights score would’ve risen. To achieve this, we need to add the font-display attribute to our statement. If we ran our imaginary WordPress blog through Google PageSpeed Insights, it would’ve given us the optimization suggestion to ensure text remains visible during webfont load. In our statement above, this attribute is missing. The attribute which ensures that text remains visible during webfont load is the font-display attribute. Let’s say we have an imaginery WordPress website, with a stylesheet that looks like this: This is the part Google PageSpeed Insights is pointing at. Themes do, too.Ī webfont is declared inside a stylesheet with a so-called statement. Plugins that perform actions in your site’s frontend often add stylesheets and webfonts to your pages and posts. Some of you might’ve even gotten all fancy (not!) and created yourself a plugin jungle! Whether you’re a WordPress blogger, developer or site configurator, chances are you’re using plugins. What does this PageSpeed Insights optimization suggestion mean? That’s why I thought it’d be a good idea to zoom in on what it means to ensure that text remains visible during webfont load and how to fix it. The language Google chooses to describe its optimization suggestions (or anything, really) can be confusing. When optimizing your WordPress site for Google PageSpeed Insights you will probably come across this optimization suggestion if you use Google Fonts or any other type of Webfonts. when you’re using Security through Obscurity plugins like WP Hide, etc.Ensure text remains visible during webfont load. To serve fonts from an alternative path (e.g.Use this to serve fonts and the stylesheets from your CDN, or.Modify your fonts’ src: url() attribute fully integrate with your configuration,.and statements inside local stylesheets loaded by your theme and/or plugins,.“Dig deeper” to find Google Fonts and optimize further.Ensure text remains visible during webfont load by forcing the font-display attribute to all your other fonts! (OMGF Pro required),.Ensure text remains visible during webfont load by forcing the font-display attribute to your Google Fonts,.Remove Resource Hints (preload, preconnect, dns-prefetch) pointing to or ,. ![]()
0 Comments
Leave a Reply. |