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?
Ensure text remains visible during webfont load wordpress how to#
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. Ensure text remains visible during webfont load.
0 kommentar(er)
