Applied JS to optimize Performance, it did scale up Performance but error still exist.

[Remco112]

Hi all,

I did some experimenting with the Lighthouse function, and was searching online for quite a while and came across a article, to enhance the performance and to get rid of "Ensure text remains visible during webfont load"

Since many simple tricks were not working I searched some more and came across this website: https://css-tricks.com/font-display-masses/

I applied this script:

try {
  var e = document.createElement("style");
  e.textContent = "@font-face { font-display: swap; }";
  document.documentElement.appendChild(e);
  var isFontDisplaySupported = e.sheet.cssRules[0].cssText.indexOf("font-display") != -1;
  e.remove();
} catch (e) {
  // Do something with an error if you want
}

 And my performance went from:  Desktop ( OLD vs NEW)

                  

 And my performance went from:  Mobile ( OLD vs NEW)                            

So it's just a small increase from the Desktop and a way larger increase from the Mobile environment, but the error is still displaying:

Is the Lighthouse not searching for the script? or does it work around it, because it did increase in performance though.

[oreoorbitz]

I think your misunderstanding the article.

The script you quoted on your post is just for checking if font-display is supported on the browser .

The article shares another snippet of script to actually do the web font if font-display is not support, but the whole point is to use a websafe font then load your web font if font-display isn't supported. 

Really the quote of the script you shared isn't doing anything

your score increase is just normal variation in page speed score

[Remco112]

Ah I see, thank you for clarifying it then it makes sense of course, I'm just wondering how to apply the right method since a lot of simple methods don't work.

[oreoorbitz]

So to fix this issue, go to your css file, search for @font-face and place font-display: swap; within that rule .

[Remco112]

Thanks for your suggestion, but that was the first thing that I tried, even with !important styles and I did apply it to every font there was but the error was still there

[oreoorbitz]

Can you share the url of your site?

[Remco112]

I've send you a message with the information etc;

[bilalliaqat]

Ah I see, thank you for clarifying it then it makes sense of course, I'm just wondering how to apply the right method since a lot of simple methods don't work.

[Preben_Frenning]

I think this one we're using is from google itself:

{% comment %} Testing font optimization script from Google {% endcomment %}

<script>
var font = new FontFace("Lato", "url(//cdn.shopify.com/s/files/1/0043/7560/9437/t/39/assets/lato-regular-400.woff2)", {
style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});

// don't wait for the render tree, initiate an immediate fetch!
font.load().then(function() {
// apply the font (which may re-render text and cause a page reflow)
// after the font has finished downloading
document.fonts.add(font);
document.body.style.fontFamily = "Lato, sans-serif";

// OR... by default the content is hidden,
// and it's rendered after the font is available
var content = document.getElementById("MainContent");
content.style.visibility = "visible";

// OR... apply your own render strategy here...
});

</script>

And it works 🙂