Archived topic
Ensure text remains visible during webfont load
12 replies · Started by Howard on February 5, 2021
HI:
I have this page google speed notice:
Ensure text remains visible during webfont load Potential Savings
Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. 30 ms
URL Potential Savings
…font/icons.woff2
(cdn.thesoundadvocate.com) 30 ms
I have this ADDED in simple css:
add_filter( 'generate_google_font_display', function() {
return 'swap';
} );
NO CHANGE ===== page speed insights
any answers?????
SVG is turned on
Howard
Hi Howard,
The code you mentioned is not CSS, it's PHP.
Adding PHP: https://docs.generatepress.com/article/adding-php/
I have had this added to code snippets previously as well—— no change
Hi there,
do you have a link to a page where the PSI test is reporting that ?
Hi:
Yes. Here are (e.g) two web pages
https://www.thesoundadvocate.com/2021/01/didit-dac212seii-and-amp212-reviewed/
https://www.thesoundadvocate.com/2021/01/first-review-amped-america-amp-2400/
Here is page speed:
https://developers.google.com/speed/pagespeed/insights/
Thanks
Howard
PS
I found these references here as well but do not understand enough to try to enact it!
https://css-tricks.com/font-display-masses/
https://gtmetrix.com/ensure-text-remains-visible-during-webfont-load.html
Those are the Social Share Icons - the GP filter only applies to GP generated icons, which isn't required as you have the GP icons set to SVG.
Changing there fallback font would require the social share plugin developer to incorporate that CSS... however as they are icons there isn't a fall back font for them.
The better fix would be to use a social share plugin that uses SVGs instead of a font - couple of examples:
Hi DAVE
I will try these out. I see that the svg plugin was developed by Tom?? Which of the two is the REALLY LIGHTEST!!!
hOWARD
Nope the GP Social Share was developed by one of your community - it uses GP hooks though :)
I don't think there would be any difference performance wise, unless you enable the share count in the second plugin... but the second plugin i would say has better support
Hi Dave
I tried GP social share and its verry good!
Question:
How to remove certain icons from the code box...just delete the code? If you want them again....will they come back?
Yes - remove them and they won't display.
Theres probably a filter in the plugin to restore any you remove.
Personally i would copy and paste them into text file just to be safe.
Thanks 👍👍
You're welcome
