search

tomusborne / generatepress

452 stars 89 forks source link

Tweak: improve performance by adding font-display #578

Closed asamolion closed 1 year ago

asamolion commented 1 year ago

I used GeneratePress on my website.

I tested it on lighthouse and it pointed out that I can improve performance using the font-display property.

I tried to use this in the child theme but it isn't possible.

So I have created this PR.

Also, running the grunt build removes the property because Grunt does not recognize this as a valid property.

https://developer.chrome.com/docs/lighthouse/performance/font-display/

tomusborne commented 1 year ago

Hey @asamolion - thanks for the PR!

Is there any reason you're wanting to use font icons over SVG icons? We are considering deprecating the font icon feature, as we prefer SVG icons for performance/ease of maintenance.

asamolion commented 1 year ago

Hi @tomusborne,

I think there is a misunderstanding. Font Icons are already being used in the theme. If you want to deprecate that then do so by all means.

The intention of my PR is to simply used the "font-display: swap;" property to improve font rendering on first page load. This is a performance and UX issue highlighted by Google Lighthouse.

tomusborne commented 1 year ago

Hey @asamolion,

Thanks again for this. We talked about it internally and we've decided it's time to deprecate the font icons feature in the theme in favor of the inline SVGs, which are better for performance.

We appreciate the nudge and the contribution, thanks!