Closed kristoferbaxter closed 3 years ago
Oh - this is a good one! They often negatively impact LCP as well.
I think checking
for common font providers should go a long way.
@sebastianbenz is this something the JvM team can take on soon?
Sure, @lluerich let's briefly discuss this as soon as you've made your way through the Grow 1-Highlighting-Jungle.
I found a long list of popular icon fonts as a starting point on css-tricks.com. Some more research led me to believe that the most commonly used fonts are as follows:
As far as I can see it, these can all be identified by checking for a certain class name: font | classname |
---|---|
Font Awesome | .fa |
Material Design Icons | .material-icons |
Octicons | .octicon |
Nerdfonts | .nf |
Icofont | .icofont- |
If we implement a check for classnames for different icon fonts, we can always add more to the list.
Status from the amp.dev engineering sync: .fa
and .nf
might render false positives for AMP pages that use class name minifiers. We look for a (non RegEx based, see) solution to verify the results.
Class names can be checked as the AMP linter has access to the DOM structure ($('.fa').length
would work).
See https://github.com/ampproject/amp-toolbox/pull/1145/ for AMP Linter integration.
🚀 Feature Request
Problem
Icon fonts have a negative impact on CLS, causing layout shift as they load in (unless blocked from loading). Document authors are unaware of the impact since it rarely appears on high-speed connections.
Solution
Identify when icon fonts are used in a document, (potentially via screenshot diffing or checking the content of each text node for known patterns). When detected present this as an opportunity to address CLS.
Alternatives