5

I am trying to remove the "Script as render blocking file" error from Google Pagespeed insight caused by loading a Google web font. The internet tells me to use Web Font Loader to load the fonts async. I placed the following piece of javascript in my footer, the font loads well, but I still get the Render blocking error in my pagespeed insights results.

Note: The Font Render blocking error only shows up at the mobile test, not on desktop.

<script>
      WebFontConfig = {
         google: {
            families: ['Archivo Narrow:300,400,700']
         }
      };

      (function(d) {
         var wf = d.createElement('script'), s = d.scripts[0];
         wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
         wf.async = true;
         s.parentNode.insertBefore(wf, s);
      })(document);
</script>

EDIT:

Tried to add the script before closing body tag will still cause an render blocking file error:

<script>
   WebFontConfig = {
      google: {
         families: ['Archivo Narrow:300,400,700']
      }
   };

   (function(d) {
      var wf = d.createElement('script'), s = d.scripts[0];
      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
      wf.async = true;
      document.body.appendChild(wf);
   })(document);
</script>

enter image description here

Robbert
  • 1,270
  • 6
  • 30
  • 62
  • Where in the html document is this script block? You might just have to move it to the bottom of the body. – Shilly Feb 09 '17 at 09:57
  • @Shilly The script created by this piece of code is placed in the . Is that what you mean? – Robbert Feb 09 '17 at 10:16
  • Yes. Try placing it at the bottom of the body. It's a font, so it would make sense to have it near the style sheets in the head, but if the browser complains that its blocking rendering, this might be a solution. – Shilly Feb 09 '17 at 10:22
  • Thats fine as long as your Async code is in the Footer as I would expect the script tag would be embed itself in the Head, as your code is adds the external script before the ParentNode of the first Script – sjm Feb 09 '17 at 10:25
  • @Shilly I have tried to insert it before the closing body tag, but still get the error. (check my edit) – Robbert Feb 09 '17 at 10:37
  • You've certainly set your script to load asynchronously correctly using the optimised async flag for HTML5 compatible browsers and the classic script embed fallback for non-HTML5 browser, so other than Deferring the loading(Which would be bad for a Web font). I can't see why this would be render blocking – sjm Feb 09 '17 at 11:22
  • Because the script is loaded asynchronously its almost irrelevant where the script is appended – sjm Feb 09 '17 at 11:28
  • Try adding your Async script code to an empty HTML file, I'm sure you'll find passes it will pass PageSpeeds tests which will prove its something else on your page – sjm Feb 09 '17 at 11:39
  • 1
    Robert, I'm seeing the same issue, the webfont is mentioned as one of the reasons for the PSI to fail on the render blocking test. Have you made any progress on it? – Paul Bormans Sep 04 '17 at 17:51

0 Answers0