Optimize font loading techniques

Shapely
1

Hi,

There are several ways the Pagespeed score of Shapely websites can easily be higher. Here is one I’d like you to al least consider

2

Also, please add rel=preload to the link itself, to properly prioritize the loading of the font:

https://developers.google.com/web/updates/2016/03/link-rel-preload

3

Hello Martijn

Thank you for the suggestion, I will redirect your ticket to our developer, can’t promise anything they will decide implement it or not :slight_smile:

4

Hello,

thank you for all your efforts. Reading back, this could be made a bit clearer. Below there’s a summary of all the things that need to be done, including explanations. If you could forward that, that’d be great! Thanks :slight_smile:

Right now, the Google Fonts theme font Raleway is inserted in the HTML like this:
<link rel=stylesheet id=shapely-fonts-css href='//fonts.googleapis.com/css?family=Raleway%3A100%2C300%2C400%2C500%2C600%2C700&ver=5.3.2' type=text/css media=all>

For performance reasons it’d better do add display=swap as a parameter (https://addyosmani.com/blog/google-fonts-font-display/).

This theme also uses @font-face in the CSS for Font Awesome and Glyphicons Halflings. Please add the following property to the @font-face block of both fonts in the CSS: font-display: block. ‘Swap’ would not work here, as they’re icons and not normal fonts, so an immediate fallback wouldn’t be possible. Font-display: block would still improve the PageSpeed score

This will fix all PageSpeed issues that still occur with this theme:

  • Eliminate render-blocking resources
  • Ensure text remains visible during webfont load
5

Hope the above is clear enough. It would be awesome, because the PageSpeed score would drastically improve for every site using this theme. Again, many thanks!

6

Ah, Martijn thank you so much for your effort, it’s highly appreciated and yes, indeed now it’s clear :slight_smile: