Speed up Google Fonts loading with Display query
Speed up Webfont loading with Display Query on Google Fonts. Fix Google Fonts that Affect Google PageSpeed Score
Speed up Webfont loading with Display Query on Google Fonts. Fix Google Fonts that Affect Google PageSpeed Score
Website speed is one of the SEO factors of a website. This has been stated by Google SEO experts and Google itself.
For this reason, speeding up the loading of a web page is very important, so that the web can compete with others, especially in search engines like Google.
Many things that affect the speed of a web page include:
For this reason, speeding up the loading of a web page is very important, so that the web can compete with others, especially in search engines like Google.
Many things that affect the speed of a web page include:
- Server
- Page size which includes the size of HTML, CSS, JavaScript and Images.
- Use of third party JavaScript and CSS,
- Browser cache utilization and more
I once discussed it in an article: The determinants of the speed of a Blog.
If we test a website page on Google PageSpeed Insight, one of the problems that arise states "Ensure text remains visible during web font load". This can be corrected by adding the CSS font-display value to the web font.
But, now you don't have to bother because of the fact that Google Fonts has fixed the problem of the Google PSI score.
Yes, Google Fonts now allows you to be able to add
As shown above, you just need to add a
For example if you choose a roboto font, then you have to paste the code as below.
Then save, and try to test Google PageSpeed insight again. You can apply this method anywhere, including Blogger and AMP.
May be useful :)
Loading Problem on Google Fonts
One of the web speed problems is the use of third-party web fonts such as Google Font.If we test a website page on Google PageSpeed Insight, one of the problems that arise states "Ensure text remains visible during web font load". This can be corrected by adding the CSS font-display value to the web font.
But, now you don't have to bother because of the fact that Google Fonts has fixed the problem of the Google PSI score.
Yes, Google Fonts now allows you to be able to add
font-display attributes by using the query on the font link you selected. In other words, you don't need to change anything on your website's CSS.As shown above, you just need to add a
display=swap query and paste the <link> tag before </head>.For example if you choose a roboto font, then you have to paste the code as below.
<head>
. . . . . .
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
. . . . . .
</head>Then save, and try to test Google PageSpeed insight again. You can apply this method anywhere, including Blogger and AMP.
May be useful :)