CODEWITHSUNDEEP
cssoptimizationpagespeed
user6505190
user6505190

Reputation:

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

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?

Upvotes: 54

Views: 48917

Answers (7)

Michael
Michael

Reputation: 44210

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

Upvotes: 1

Adam
Adam

Reputation: 29079

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.

Upvotes: 15

Sagar Jain
Sagar Jain

Reputation: 103

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.

Upvotes: 3

Stuart Cusack
Stuart Cusack

Reputation: 129

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.

Upvotes: 2

Claudiu
Claudiu

Reputation: 4109

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

Upvotes: 99

Misunderstood
Misunderstood

Reputation: 5663

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

Upvotes: 0

the_lorem_ipsum_guy
the_lorem_ipsum_guy

Reputation: 474

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?

Upvotes: 1

Related Questions