Stop WP rocket preloading all fonts it finds in the css when 'Remove unused css' is turned on

[be6945]

Is your feature request related to a problem? Please describe.
When using the 'Remove unused css' feature, WP-rocket pre-loads all fonts it finds in the CSS files. This causes many unwanted fonts to be pre-loaded (especially those from plugin files) and affects LCP etc.

Describe the solution you'd like
A toggle button on whether to preload fonts it finds or not when using this feature.

Describe alternatives you've considered
Using a different optimization plugin.

[piotrbak]

Hello @be6945 thanks for creating the issue. Could you send me the website which has a worse LCP when preloading the fonts? We'd like to see what's the problem there, you could reach me at piotr[at]wp-media.me.

[thinkjarvisdesignandmarketing]

@piotrbak
Yes this 100% causes problems. Some fonts are poorly optimised. If all fonts are preloaded and the payload for that can be up to 1mb depending on how well the theme is coded. This will cause fonts to load before the LCP item on the page.

Example here reported on the forum where 319kb of fonts are loaded that arent used above the fold:
I responded telling them to either re-optimise their fonts to reduce the size or remove the from pre-load.

All fonts should not be preloaded by default. There is no logic in that - especially when there is likely only 1 or 2 fonts to load above the fold.

[alixtak]

Indeed, every single website I work on loads multiple icon librairies (fontawesome, eicons, ...). Which hugely impacts LCP since we are preloading them. Having a text box to exclude fonts from preloading is becoming a priority on my end.

I would like to know if there's anything planned regarding this, thank you very much.

[tyzberd]

I support it, it greatly affects the LCP metric, especially when there is a font with icons.

[Eroan]

Hi, I confirm that this behavior can be really problematic and impact LCP in a bad way.

You should at least provide a hook to blacklist some fonts based on name.

[tomphilpotts]

I have also had this issue. I am already preloading the fonts that we need. Disabling this feature increased LCP by 10 points.

I did try to use this add_filter('rocket_disable_preload_fonts', '__return_true');, but did not work

[ivanvasqueze]

@piotrbak Sí, esto 100% causa problemas. Algunas fuentes están mal optimizadas. Si todas las fuentes están precargadas y la carga útil puede ser de hasta 1 MB dependiendo de qué tan bien esté codificado el tema. Esto hará que las fuentes se carguen antes que el elemento LCP en la página.

Ejemplo aquí informado en el foro donde se cargan 319 kb de fuentes que no se usan en la mitad superior de la página: respondí diciéndoles que volvieran a optimizar sus fuentes para reducir el tamaño o eliminarlas de la carga previa.

No todas las fuentes deben estar precargadas de forma predeterminada. No hay lógica en eso, especialmente cuando es probable que solo se carguen 1 o 2 fuentes en la mitad superior de la página.

Hola, quisiera pedirte amablemente que utilices un acortador de URL al referirte a mi sitio, ya que estoy trabajando en su optimización para los motores de búsqueda y preferiría que cuando alguien busque el nombre de mi marca, encuentren el contenido de mi sitio web, que ofrece servicios odontológicos, en lugar de esta discusión. Aunque enfrenté problemas de velocidad en el pasado, ahora he pasado la Evaluación de las métricas web esenciales en PageSpeed tanto en dispositivos móviles como en ordenadores. Gracias por tu comprensión.

[camilamadronero]

Maybe @wordpressfan can help us with this quick request here ?
The user ivanvasqueze needs us to hide the mention to his site in this comment because it's interfering with the search results when people are looking for his site
I guess it's safer and quicker to have the URL removed from the comment
Thanks!

[piotrbak]

Done @camilamadronero @ivanvasqueze

[astbarc]

I'm also facing this issue in some websites. With Elementor for example all the font awesome files are preload even if you're not using the font in the page.

Would be great to have a way to exclude fonts for be preloaded.

[Tabrisrp]

We have a filter to completely remove this rocket_enable_rucss_fonts_preload. returning false stops the process. This is a temporary solution for users who need it.

On the long term, this would need to be solved on the SaaS side. What happens on the plugin side is that we get the used CSS sent by the SaaS, parse it to extract the fonts URLs, and preload them. We don't know which ones are currently used on the page.

Ideally, the SaaS would return the used CSS with only the fonts used on the page, and it would solve the issue.

@piotrbak @MathieuLamiot

[piotrbak]

@Tabrisrp sounds like filter with exclusions of specific fonts would be a quick workaround for this problem. It should be an easy thing to implement, right?

[Tabrisrp]

Yes it can be a quick solution that can be used by the users or with an helper plugin

[piotrbak]

Let's go with this approach then for now:

1. Introduce new filter (rocket_exclude_rucss_fonts_preload, or another, if there's a better idea)
2. Filter will allow to exclude specific fonts from being preloaded when RUCSS is enabled
3. It should allow for partial match exclusions, domain.com/fonts wille exclude domain.com/fonts/font.woff
4. rocket_enable_rucss_fonts_preload should work without regressions

[Tabrisrp]

Scope a solution ✅

Engine\Optimization\RUCSS\Controller\UsedCSS

In add_used_fonts_preload():

• Add new filter rocket_exclude_rucss_fonts_preload, with a default value of an empty array
• Inside the loop on all fonts, check if the font URL matches with one of the values inside the filter array
• If it matches, bail-out before adding the font url to the $urls array

Estimate the effort ✅

Effort [XS]

[be6945]

Great to see this being accepted as an issue, thank you. Please let us know how to implement too. Thanks again everyone, great work.