Menu
I am trying to optimize my webpage with google lighthouse.
The report says to use rel=preloads on links that import Material Design Icons.
I have tried to preload them using syntax.
<link rel="preload" href="" as="style" crossorigin>
I have also tried to preload using as font. with type woff, woff2 and ttf. None of them seem to work. I have also added crossorigin and crossorigin="anonymous" but still no progress.
These are my actual links. I want to import both of them.
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" as="style">
<link rel="preload" href="https://fonts.googleapis.com/icon?family=Material+Icons" as="font" type="font/woff" crossorigin>
How should use these links with preload?
209
<link rel="preload"> tells the browser to download and cache a resource (like a script or a stylesheet) as soon as possible. It's helpful when you need that resource a few seconds after loading the page, and you want to speed it up. The browser doesn't do anything with the resource after downloading it.
The rel="preload" attribute value is used to preload assets. It can be applied to several file formats, including CSS, JS, fonts, images, and more. Depending on the type of file you would like to preload, the corresponding as attribute may also need to be included along with rel="preload" .
So, now how to you preload your CSS and other external resources? The answer is simpler than you think. Currently, you load CSS and JS through the link tag. So, to preload those resources, all you need is to change the rel attribute to preload and add the as=”style” attribute (or as=”script” for JavaScript).
The preload is competing with the render-blocking file for bandwidth. As a result, the download takes longer and the page renders more slowly. The page renders 0.9s faster without the preload. The downside of this change is that the JavaScript file will now finish loading later.
I would expect Google prepared preload info in it font guide, but there's only normal CSS example [1].
Anyway, I hacked the solution by adding:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons&display=swap" media="print" onload="this.media='all'" crossorigin>
(this seems to be a good fallback mechanism for not supported preload, so it's good to have anyway).
Also, to get rid of "blink" of name of icon, I am using code points [3]. Like that:
<i class="material-icons"></i> (instead of <i class="material-icons">face</i>).
That way, during font load I get almost invisible symbol like □ instead of full "face".
[1] - https://google.github.io/material-design-icons/
[2] - https://csswizardry.com/2020/05/the-fastest-google-fonts/
[3] - https://github.com/google/material-design-icons/blob/master/iconfont/codepoints
50
This worked for me:
<link
rel="preload"
as="style" onload="this.rel = 'stylesheet'"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
I noticed that Google Fonts places a &display=swap to the end of the link when getting the url. So when we change it to display=block it would make a change in the css file on the server side:
font-display: block;
So use it like this:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With