Fix Ensure text remains visible during webfont load in PageSpeed Test

Page speed is an important factor in the SEO of a website. By having good loading speed, the opportunity to get more visitors is also more open. In addition, advertising revenue will be much better. 

Hal ini juga sudah dikatakan oleh Google AdSense dalam beberapa kesempatan bahwa semakin cepat website akan semakin bagus iklan. 

Read more: How to View AMP Auto Ads Performance on Google Adsense

PageSpeed Test

To check the speed of a website page, many Webmasters or Bloggers use a free tool from Google that called Google Page Speed Insight.

Just enter the URL of the page you want to test, speed score result will appear. PageSpeed Score will appear between 1 - 100.

In addition, there will be some suggestions for improvement if the score is less than 100. If you have corrected the suggestions on the test results, the score will improve. Some things that usually make Google PSI scores not reach 100, include:

• Defer offscreen images
• Serve images in next-gen formats
• Eliminate render-blocking resources
• Ensure text remains visible during webfont load
• etc

Fix Ensure text remains visible during webfont load 

Ensure text remains visible during webfont load appears because there is a problem rendering fonts from third parties like Google Fonts, Awesome Fonts, Type kits and more.

To fix this, it's actually quite easy, just add the CSS font-display to the mentioned font.

But to add font-display with value swap, you must use CSS @font-face, not <link> or  @import to call third parties font.

This is a complete tutorial for fixing problems Ensure Fixed Text Is Visible During Web Font Load on Google PageSpeed Insight.

For example, I would like you to use a Poppins font on Google Font. And for calling these font types with <link> is:

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

As I explained above, you need to change the <link> tag to CSS @font-face. So you need to extract the source code from that font (https://fonts.googleapis.com/css?family=Poppins) so it would appear like the following CSS code. 

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

I only need a  Latin type in Poppins font, so I will only need the last one, so I paste the code below on my web template.

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

And then, to fix Ensure text remains visible during web font load, just add CSS font-display:swap. And the result will be right this.

/* latin */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display:swap;
  src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Click Save and try to test your page again in Google Pagespeed insight. If you need to preload the font, copy the code below and paste it before </head>

<link href='https://fonts.gstatic.com/s/poppins/v6/pxiEyp8kv8JHgFVrJJfecg.woff2' as='font' crossorigin='crossorigin' rel="preload"  />

Change yellow mark with the font obtained on your font type above.

Update (May 14, 2019)

Google Fonts now lets you control font loading using display query parameters. So the above methods can be simplified, by simply adding display on the Google Font query that you fit with <link>.

Example:

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

So, that Roboto font loading will automatically be controlled with CSS font-display: swap

Good luck :)