![]() 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. |