Eliminate render-blocking resources ( lighthouse)

Question



  
    BookNotes

I have this html page , I want to use Roboto font stylesheets , but in the way like I use it Lighthouse give me this warning :

What is the best way to optimize it ? I've read that I can use defer or async attribute, for loading it in async way of after rendering , but if I will load it after rendering , it will not apply styles for my font , etc . Will be really appreciate your help. If you need additional info , pls let me know .

user_1150683 · Answer

Personally, I think the best way to deal with this is loading the fonts asynchronously. However, this might lead to font blinking, meaning that a font is first the default and then gets rerendered to the newly loaded font. To remedy this, you can hide the contents of the page until the font is loaded, and show it with a callback. You can take a look at webfontloader. You also have to have fallback for the rare cases when someone has JS disabled.

JavaScript

var WebFont = require('webfontloader');

WebFont.load({
  google: {
    families: ['Roboto']
  }
});
document.querySelector('html').classList.remove('no-js')

CSS

html {opacity: 0;}
html .wf-active, html.wf-inactive, html.no-js {opacity: 1;}

HTML

user_10774102 · Answer

I've found better solution:

This is working well

Eliminate render-blocking resources ( lighthouse)

2 Answers