Adding preload attribute

[lesliekirk]

Google's PageSpeed Insights is recommending that the ReadyThemeIcons.woff file be "preloaded". I did tweak the CSS Resources to give the file the attribute. Perhaps I'm being impatient but it's not seeing it when I rerun the test. Is there some sort of delay (on Google's end)?

[Matt Zimmermann]

Hi Leslie,

Along with adding rel="preload", did you add the attribute as="font"?

[lesliekirk]

Hi Leslie,

Along with adding rel="preload", did you add the attribute as="font"?

Am I to add that literally? With the Attribute Name = as and the Attribute Value = font

[Matt Zimmermann]

Correct. https://developer.mozilla.org/en-US/...oading_content

[lesliekirk]

Thanks! I've added both but Google's PageInsights is still not picking up the change I made.

[Matt Zimmermann]

Hi Leslie,

It could take a while. Of course, this is assuming you have the resource set to be active and being added to the head tag or css list. If not, then Google will not see it. You may need to go a different way like with a prefetch.

[lesliekirk]

Interesting - it's also an issue with the Colossus Demo site. The only place I can find it referenced is in the file:

/* ================================================== ========================
UTILITIES / ICONS
================================================== ======================== */

/**
* This contains the "@font-face" call needed to add the ReadyTheme Icons Font
* package to your site. These icons are available for use in addition to any
* theme-based icons which may be referenced in the "theme-fonts.css" file.
*/

@font-face {
font-family: 'ReadyTheme Icons';
font-style: normal;
font-weight: normal;
font-display: fallback;
src: url('themes/colossus/ui/css/ReadyThemeIcons.woff') format('woff');
}

[Matt Zimmermann]

Hi Leslie,

I have run several tests on this and the preload does seem to be a little flighty. I will have to do some more research. However, from what I am seeing on my test site, the cost for the font is only 0.10s to 0.28s so...not to much really.

[lesliekirk]

Hi Leslie,

I have run several tests on this and the preload does seem to be a little flighty. I will have to do some more research. However, from what I am seeing on my test site, the cost for the font is only 0.10s to 0.28s so...not to much really.

I'm getting 2.88s or I wouldn't be trying so hard to fix this.

[lesliekirk]

Interesting - it's also an issue with the Colossus Demo site. The only place I can find it referenced is in the file:

/* ================================================== ========================
UTILITIES / ICONS
================================================== ======================== */

/**
* This contains the "@font-face" call needed to add the ReadyTheme Icons Font
* package to your site. These icons are available for use in addition to any
* theme-based icons which may be referenced in the "theme-fonts.css" file.
*/

@font-face {
font-family: 'ReadyTheme Icons';
font-style: normal;
font-weight: normal;
font-display: fallback;
src: url('themes/colossus/ui/css/ReadyThemeIcons.woff') format('woff');
}

If I use the preload method - I think I need to "tweak" this. (I think it's what Google is seeing)

[Matt Zimmermann]

Hi Leslie,

So far, to the best of my research, there is nothing you would have to modify in the style sheet when it comes to preloading or pre-fetching a font. If you find out otherwise, please let me know.

[lesliekirk]

Hi Leslie,

So far, to the best of my research, there is nothing you would have to modify in the style sheet when it comes to preloading or pre-fetching a font. If you find out otherwise, please let me know.

Yeah, I will (sort of brain fogged right now).