- This topic has 7 replies, 2 voices, and was last updated 3 years, 2 months ago by Elvin.
-
AuthorPosts
-
January 13, 2021 at 9:04 pm #1617935Praveen
Hi guys,
Any way to get rid of pagespeed issues due to fonts? I keep getting – Eliminate render-blocking resources and Google fonts are one of the issues it mentioned.
Is there way around this? Is there a font that can help
January 13, 2021 at 9:19 pm #1617944ElvinStaffCustomer SupportHi,
Any way to get rid of pagespeed issues due to fonts? I keep getting – Eliminate render-blocking resources and Google fonts are one of the issues it mentioned.
You can get the code provided on this article – https://css-tricks.com/the-fastest-google-fonts/ – and place it on a Hook element hooked to
wp_head
.The code:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preload" as="style" href="$CSS&display=swap" /> <link rel="stylesheet" href="$CSS&display=swap" media="print" onload="this.media='all'" />
Alternatively, you can download the font from Google and upload it to your site to locally host it.
Here’s how: https://docs.generatepress.com/article/adding-local-fonts/You then make sure to add
font-display: swap;
to the@font-face{...}
you’ll be adding to your site.You then preload the locally hosted font by hooking a preload code to the
wp_head
using the Hook Element.Sample preload code:
<link rel="preload" href="/wp-content/themes/studentmunch/fonts/quicksand.woff2" as="font" crossorigin>
Change the href value to the url path of your uploaded font file.
Here’s an in-depth article about this: https://ashton.codes/preload-google-fonts-using-resource-hints/
January 13, 2021 at 9:26 pm #1617952PraveenThanks. I am using WP rocket and it has a font pre-load option. Should I use that?
If I use it, should I still put this ->
<link rel=”preconnect”
href=”https://fonts.gstatic.com”
crossorigin /><link rel=”preload”
as=”style”
href=”$CSS&display=swap” /><link rel=”stylesheet”
href=”$CSS&display=swap”
media=”print” onload=”this.media=’all'” />January 13, 2021 at 9:41 pm #1617958PraveenGetting this warning, is this fine?
January 13, 2021 at 9:44 pm #1617960PraveenDone that. Still the same warning .. you can check the below URL in google page speed yourself –
As you can see That warning regarding fonts still remain.
January 13, 2021 at 9:45 pm #1617961ElvinStaffCustomer SupportThanks. I am using WP rocket and it has a font pre-load option. Should I use that?
I’m not exactly sure how well it works. You can try and check if its effective. But you don’t necessarily have to use it.
As I’ve mentioned on the previous reply, you can use the Hook Element to place this code:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preload" as="style" href="$CSS&display=swap" /> <link rel="stylesheet" href="$CSS&display=swap" media="print" onload="this.media='all'" />
Where $CSS is the URL for the font you use on your site.
And set the hook to
wp_head
with display rule location set to “Entire Site”.The alternative to this is adding local fonts which I’ve also mentioned on the previous reply.
January 13, 2021 at 10:01 pm #1617969PraveenI am sorry, I did not reliaze $CSS has to be replaced by font URL.
Pagespeed gives this link – https://fonts.googleapis.com/css?family=Work%20Sans%3A100%2C200%2C300%2Cregular%2C500%2C600%2C700%2C800%2C900%7CSatisfy%3Aregular&display=swap
Is this the URL I should be entering – full?
January 13, 2021 at 10:17 pm #1617975ElvinStaffCustomer SupportIs this the URL I should be entering – full?
You can check your page source for the right URL. To find this on your page source, you use disable caching plugins first as they may be combining/merging things that’ll prevent you from seeing the proper URL you need.
Another alternative to try and address this is, to make sure your caching plugin doesn’t combine/merge/aggregate CSS. Or atleast make sure the CSS for fonts is excluded.
Note: Optimization plugins are not under the theme’s control. You should refer to the documentation of the optimization plugin you’re using to do these things.
Or you can try hosting the font locally as mentioned on one of my previous replies.
Hosting the fonts locally is known to address “eliminate render blocking resources” flags too.
-
AuthorPosts
- You must be logged in to reply to this topic.