Month: December 2018

Improving Web Font Performance with font-display

Improving Web Font Performance with font-display

In the most recent release of Google PageSpeed Insights (version 5, Nov 2018), Google decided to focus on how fast the page loads and renders, rather than the optimizations performed on a page.

Part of how fast the page renders has to do with the rendering of web fonts.  While the typical behavior of the rendering of web fonts — such as Google fonts, or any non-web-safe fonts that are loaded via a .svg, .ttf, .eof, .woff or .woff2 files — is not noticeable on a desktop computer with a direct Internet connection, on a mobile device connected via 3G, the default behavior for most web browsers is to render invisible placeholder text while the web fonts are loaded.

Why does this matter?

Using the default blocking font-display can cause a rendering delay, incur additional CPU cycles, and leave you with a higher Speed Index and Time-To-Interactive metric.  If increasing your PageSpeed score, and reducing your overall load time (especially for mobile visitors) is important to you, then you should consider adding a font-display property to your web font declarations.

What’s going on by default

By default, most browsers default “font display” method is the “block” method.  The block method allows for a short blocking period and an infinite swap period.  This means that the browser will draw the invisible placeholder text if the font is not loaded.  If the web font is loaded, it will “swap” the blank text with the web font.

Your choices of font-display methods

There are three alternate methods, apart from the default “auto”, and explicit “block”.  You can read about these methods in more detail in an article from Google developers. To summarize these methods, they are:

swap

The swap method is best used for items such as the site name or logo.  It has no blocking, but it allows for an infinite swap period.  This means that there is, even on desktop, a period where the text is the inherited font family, such as Times New Roman, Arial, or whichever the inherited value is for the particular block element that is being styled.  Generally speaking, if a font not cached, it will be rendered very quickly, otherwise the element that uses a web font with the swap font-display method could render seconds later.

fallback

The fallback method is best for font that is used in a typical web page as it means that the font will typically not change once a user starts to read the page.  It has a very  short block period usually 100ms or less, and a short swap period of about three seconds.  This means that if a font is cached, or is loaded very quickly, there will be no noticeable swap from the inherited font family to the web font.  This is the default setting for the Pegasaas Accelerator plugin when the “default font-display” method is enabled.

optional

The optional method would be best for items such as menus as it has a very short blocking period (100ms or less) and no swap period.  This means that it will only display if the font is cached.  This is best used when the web font would be “nice to have” but is not critical to the user experience.

Google PageSpeed Insights recommends that to speed up the rendering of the page, and the time-to-interactive, that whenever a web-font is used, a setting other than the default blocking method is used.

Setting the font-display attribute

To do this, you have to explicitly change the font definition within your CSS or inline styles.  To do so can be difficult if you are using third party web fonts such as Google Web Fonts, as those definitions are defined externally unless you manually inline the font definition direclty into your or CSS file:

Typically, you load a web font with something akin to the following syntax:

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">

Example of the font definition from the Roboto Condensed web font from Google (https://fonts.googleapis.com/css?family=Roboto+Condensed):

@font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 400;
src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url(https://fonts.gstatic.com/s/robotocondensed/v16/ieVl2ZhZI2eCN5jzbjEETS9weq8-19-7DRs5.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

To explicitly define the font-display, you would need to take the above font-face definition and inject it into your stylesheet or page in with the font-display added to the definition:

<style>
@font-face { 
font-display: fallback;
font-family: 'Roboto Condensed'; 
font-style: normal; 
font-weight: 400; 
src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url(https://fonts.gstatic.com/s/robotocondensed/v16/ieVl2ZhZI2eCN5jzbjEETS9weq8-19-7DRs5.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; 
}
</style>

It can be a bit of work to go through your website and adjust your CSS accordingly, so that you have your font-display definition in place.

An easier solution for websites running WordPress

We believe that everyone should have a fast website without having to learn how to learn the ins and outs of web performance optimization.  That is why we developed a plugin for WordPress that optimizes an entire site for best possible web performance, automatically, called Pegasaas Accelerator.  In addition to automatically setting the font-display attribute of your Google Web Fonts, Pegasaas Accelerator provides lightning fast page caching, image optimization, automatic WebP Image delivery, minification, deferral of Javascript and CSS, automatic resource delivery via CDN, plus about 15 other web performance optimization features.

If you have a WordPress website, and making sure your website is found in search, start your free no-risk subscription today.