[Support request] Fonts for Faster Speed

Home Forums Support [Support request] Fonts for Faster Speed

Home Forums Support Fonts for Faster Speed

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1617935
    Praveen

    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

    #1617944
    Elvin
    Staff
    Customer Support

    Hi,

    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/

    #1617952
    Praveen

    Thanks. 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&#8221;
    crossorigin />

    <link rel=”preload”
    as=”style”
    href=”$CSS&display=swap” />

    <link rel=”stylesheet”
    href=”$CSS&display=swap”
    media=”print” onload=”this.media=’all'” />

    #1617958
    Praveen

    Getting this warning, is this fine?

    #1617960
    Praveen

    Done 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.

    #1617961
    Elvin
    Staff
    Customer Support

    Thanks. 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.

    #1617969
    Praveen

    I 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?

    #1617975
    Elvin
    Staff
    Customer Support

    Is 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.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.