Here’s the solution for eliminate render blocking fonts, javascript and css and load non-render blocking resources warning in Google Lighthouse Speed Test.

Place this code as higher as possible in your theme’s header.php, after the “<head>” tag.

In this example we load 2 font families: Heebo and Assistant. Use this if you need to load multiple fonts in your website.

<script type="text/javascript">
  WebFontConfig = {
	google: { families: [ 'Heebo:300,400,500,700,800'  ], [ 'Assistant: 400, 700' ] }
  };
  (function() {
	var wf = document.createElement('script');
	wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
	wf.type = 'text/javascript';
	wf.async = 'true';
	var s = document.getElementsByTagName('script')[0];
	s.parentNode.insertBefore(wf, s);
  })(); 
</script>

The following example contains only one font family, Heebo:

<script type="text/javascript">
  WebFontConfig = {
	google: { families: [ 'Heebo:300,400,500,700,800'  ] }
  };
  (function() {
	var wf = document.createElement('script');
	wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
	wf.type = 'text/javascript';
	wf.async = 'true';
	var s = document.getElementsByTagName('script')[0];
	s.parentNode.insertBefore(wf, s);
  })(); 
</script>

How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 4

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?