Google PageSpeed - Eliminate Render-Blocking Resources Above the Fold caused from Google Fonts

Question

i'm trying to optimize this website: electronicsportsitalia-it and when I try to analyze it on Google PageSpeed the platform says that there is a google font blocking the page rendering:

https://fonts.googleapis.com/css?family=Lato:300,400,700

The font firstly was loaded through php but then I inserted it directly in HTML code trying to load it with this code: <link rel=stylesheet id=avia-google-webfont href='//fonts.googleapis.com/css?family=Lato:300,400,700' type='text/css' media=all lazyload> - I also put before the </body> tag- but it didn't work.

So I tried to load it with Web Font Loader and actually, the website is running this script: `

</script>
<script>
  WebFont.load({
    google: {
      families: ['Lato']
    }
  });
</script>`

but always the same problem on PageSpeed.

Can someone help me?

Answer 1

You can preload any styles (including google fonts)

<link
    rel="preload"
    href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
    as="style"
    onload="this.onload=null;this.rel='stylesheet'"
/>
<noscript>
    <link
        href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
        rel="stylesheet"
        type="text/css"
    />
</noscript>

You can read more on web.dev

UPDATE

Base on Lucas Vazquez comment I've also added &display=swap (which fixes this issue "Ensure text remains visible during webfont load")

Answer 2

You question boils down how to include less critical CSS asynchronously. I recommend to read this article.

Its similar to Claudiu's answer however, it is recommended in the article not to use preload, because of this:

First, browser support for preload is still not great, so a polyfill (such as the one loadCSS provides) is necessary if you want to rely on it to fetch and apply a stylesheet across browsers. More importantly though, preload fetches files very early, at the highest priority, potentially deprioritizing other important downloads, and that may be higher priority than you actually need for non-critical CSS

Here is the alternative:

<link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
    media="print"
    onload="this.media='all'"
/>
<noscript>
    <link
        href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
        rel="stylesheet"
        type="text/css"
    />
</noscript>

This is how it works. The attribute media=print will skip the css on page rendering. Once the page has loaded, it will load the print css. The onload JS event changes the media to all, now the font will be loaded and change the page rendering. Most importantly, the font will no longer render-block your page.

For the edge case, that a user has js disabled, the "noscript" tag will load the font directly.

Answer 3

You can take advantage of the onload attribute like this -

<link 
  href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap" 
  rel="stylesheet" 
  type="text/css"
  media="print"
  onload="this.media='all'" 
/>

Set the media attribute to print at first, but change it to all when the download callback fires.

Answer 4

I noticed that Laravel added this tag to its html head output recently:

<link rel="preconnect" href="https://fonts.gstatic.com">

I copied it and added it before my font request, i.e:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" id="google-fonts-css">

This simple tag took me from a Mobile Pagespeed score of 80 up to 95, but I can't be entirely sure that it was in fact the tag I have to thank for this score increase - PageSpeed is unpredicatable. I'm not sure if it's just a Chrome thing or a new standard.

Answer 5

In my case, I will generate my font using a font-face generator tool which is easier to use and less hassle but when I use google fonts, this is what I do. You can use style element at the end of body, just before the closing </body> tag:

<style>
@import "//fonts.googleapis.com/css?family=Lato:300,400,700"
</style>

or you can refer to How to keep CSS from render-blocking my website?

Answer 6

The following font files must be loaded before this JS file:
https://electronicsportsitalia.it/wp-content/plugins/google-analytics-for-wordpress/assets/js/frontend.min.js

https://fonts.gstatic.com/s/lato/v14/EsvMC5un3kjyUhB9ZEPPwg.woff2
https://fonts.gstatic.com/s/opensans/v15/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2   
https://fonts.googleapis.com/css?family=Lato
https://fonts.gstatic.com/s/roboto/v18/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2
https://fonts.gstatic.com/s/lato/v14/EsvMC5un3kjyUhB9ZEPPwg.woff2