- This topic has 11 replies, 3 voices, and was last updated 7 months, 2 weeks ago by
.
-
Posts
-
Hello,
I use local fonts like decribed here: https://docs.generatepress.com/article/adding-local-fonts/
But now in the google search console, all my URLs (Desktop) have the CLS Error, which is described here: https://web.dev/cls/
So something seems to be wrong with this local fonts, i think.
What can i do, to solve this problems?
Lead Developer
Hi there,
Where are you seeing these console errors?
The “shift” could be coming from the font not displaying until it’s loaded. You could try to combat that by adding
font-display: swap;to your@font-face {}definitions.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentI see this in google search console / speed report.
Where do i have to add this code exactly?
Customer Support
Hi there,
when you created your @font-face CSS:
https://docs.generatepress.com/article/adding-local-fonts/#using-font-face
The code goes in there.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ok, thanks, i have done this.
will see how search console reacts.Let us know
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/After I put font-display: swap; in the css, the google search console status for all urls changed from “bad” to “to be optimized”. But it shows 0 “good urls”.
So this solution had not the effekt, i wanted to archive.
I have also noticed, that the website sometimes shows for a short second a different font.
Any other ideas how to solve this problem?
It’s showing a different font because of the code you added (swap). This basically displays a font until your real font is done loading and ready to be displayed. You can remove the swap code if it’s not doing anything.
The best thing to do is run your site through this tool: https://developers.google.com/speed/pagespeed/insights/
You’ll see that your CLS score is actually close to perfect.
However, there is a lot you can do. I would start by installing a plugin like Autoptimize (https://generatepress.com/fastest-wordpress-theme/).
I would also look into using a lazy loading plugin to handle the defer off-screen images thing.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentWell, I have insert this SWAP code, because you told me so.
And as I said, it does something. Before this code, all urls were bad (red) in search console. With this code they changed to “to be optimized” (orange).
If i delete this code, then the urls become bad again.
I would like to have them green, so that no Cumulative Layout Shift problems are shown in google search console.
In terms of autoptimize: i have wp-rocket on this site. Is this not enough?
You can definitely keep the swap code if it’s helping.
WP Rocket should have an option to combine all of your styles and scripts so you don’t have so many requests happening.
If you use the tool I linked to, it points out exactly what should be done to increase your score 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentYes, WP-Rocket has the option to combine css. I don´t have activate this, because it says, that it is not recommendended if site uses HTTP/2 .
That’s true, HTTP/2 handles multiple files much better than 1. However, tools like pagespeed insights or GTMetrix/pingdom don’t take HTTP/2 into account, so your “scores” will suffer.
In the end, the speed of your page is what’s important.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development
- You must be logged in to reply to this topic.