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

Remco112
Excursionist
35 4 4

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"

Ensure text remains visible during webfont load error message.JPG

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)

Performance - Index - Desktop - old.JPG                  Performance - Index - Desktop - new.JPG

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

Performance - Index - Mobile - old.JPGPerformance - Index - Mobile - new.JPG

 

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:

 

Performance - Index - error Ensure.JPG

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

Replies 8 (8)

oreoorbitz
Shopify Partner
242 29 129

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

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.
Remco112
Excursionist
35 4 4

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
Shopify Partner
242 29 129

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

 

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.
Remco112
Excursionist
35 4 4

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
Shopify Partner
242 29 129

Can you share the url of your site?

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.
Remco112
Excursionist
35 4 4

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

bilalliaqat
Visitor
2 0 0

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
Shopify Partner
39 0 13

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 🙂