Preloading a Google font turns out to be a great idea, Harry found out that the first web font load was 600ms faster than usual. In modern browsers, you can make the async CSS fetch high-priority by preloading the $CSS file. ⚠️ While asynchronous CSS is an overall good idea we need to make the CSS loading a high priority. Sadly, the print stylesheets are loaded with super low priority. However, the first web font however was loaded 500ms slower due to the low priority. ![]() Here we ask the browser to load the CSS asynchronously with the print context but as soon as the CSS file is loaded we apply it to the all context.Īs a result in Harry’s research, the site’s First Paint is up by 1.6s to 1.7s. ![]() You can use the Filament Group’s simplest print media type trick. It led up to 1200ms loading time saved on the first web page load. ✅ Preconnecting to the fonts’ origin is a good idea. If you open the $CSS URL above you’ll notice that the fonts are loaded from the origin that looks like - we can preconnect to this origin. Notice that the $CSS URL includes &display=swap at the end. Where the CSS URL looks like, ,400 0,700 1,400 1,700&display=swap - let’s call this URL $CSS for the sake of simplicity in the following examples. Let’s say I selected the Montserrat font with 400 and 700 weight for both regular and italic font styles. ![]() Go to and select a font to be used by your site. Let’s make Google fonts load faster by following Harry’s findings.
0 Comments
Leave a Reply. |