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?

Astral

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")

Journal

This is like finding gold – Emigration

I only make some ask. Google fonts API offers swap display type. It's must be affected? With the most recent API, when you load a font using google fonts, its return the follow https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap. Do you think its appropriate to keep using the pattern that you mentioned above? – Emigration

This is a great technique and I'm using it for non-critical CSS. The question that I have now if that: should fonts be considered critical? – Hornstone

Not working on Firefox, Edge (before chromium) and IE – Salts

Well, i had to change rel preload to prefecth because of a console warning: The resource … was preloaded using link preload but not used within a few seconds from the window's load event”? – Hubie

Best one out there ^^ – Medeiros

Why did Google update the "Use on the web" code on Google Fonts but did not include something like this even though their own PageSpeed complains about it is simply beyond me... Not even in FAQ. – Hastings

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.

Gamogenesis

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.

Mahaliamahan

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.

Christiachristian

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?

Soak

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

Karrikarrie

Answer 7

A different approach here...

What you're loading when you reference https://fonts.googleapis.com/css?family=Lato:300,400,700 is a CSS file like this

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh7USSwaPGR_p.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
//...

You can just inline the contents of that into your stylesheet. It will cut out one network hop.

If you add &display=swap (which will just add font-display: swap; to all the definitions), then loading the font won't block rendering.

What you lose is that google seemingly version their fonts (the /v24/ part), and by using the fonts.googleapis.com link, you will get newer versions automatically. By inlining the definitions, you will be locked to one specific version (might be a good thing).

Tsang