Wp-rocket: Add font-display: swap to fonts in the CPCSS

[camilamadronero]

Is your feature request related to a problem? Please describe.
WP Rocket is not adding swap when the fonts are loaded in the CPCSS, triggering the _Ensure text remains visible during webfont load_ PageSpeed recommendation.

Font in the CPCSS: https://i.vgy.me/FOAqGt.jpg
PageSpeed warning: https://files.slack.com/files-pri/T02RYMVKQ-F01B8GUBCL9/image.png

Steps to reproduce:

1. Set the condition: To have a Google font request in the CPCSS
   It seems to be achieved by adding the TTF directly in site's files instead of doing it from a CSS file
2. Generate the CPCSS
3. Identify the Google font request in the CPCSS
4. Run the PageSpeed test
5. Get the _Ensure text remains visible during webfont load_ PageSpeed recommendation

Describe the solution you'd like
Add font-display: swap to fonts in the CPCSS

Additional context
Related ProductBoard card: https://wp-media.productboard.com/insights/all-notes/notes/10854781
Related Ticket: https://secure.helpscout.net/conversation/1247047982/185016?folderId=2675957

Thank you!

[arunbasillal]

@camilamadronero Can you please add the Steps to Reproduce so that it is easy for our dev team to reproduce the issue at their end? Thanks for the report.

[Tabrisrp]

The CPCSS is generated by the CPCSS tool, not by WP Rocket. and the font-swap is applied only in minified files, which is not the same process as inserting the CPCSS.

If we want to add this to the CPCSS, it should be done from the tool side, but we are not likely to do any change on it with our current plans.

[arunbasillal]

Based on an idea from Jonathan, I did couple of tests. I used these mega sites that both triggered the Ensure text remains visible during webfont load recommendation.

• http://mega.wp-rocket.me/the7/
• http://mega.wp-rocket.me/newspaper/

When I enabled Minify CSS files, the recommendation went away. Even though swap was not added in the CPCSS, it was added in the CSS files. Tests was done with 3.8.2. Remember that we added #2791 in 3.7.

@webtrainingwheels @camilamadronero Can you please ask your customers to update to WP Rocket 3.7+ and enable Minify CSS and then check again?

[GeekPress]

@wp-media/php FYI, Based on the solution we found during our meeting, I added the need-grooming label.

[crystinutzaa]

Scope a solution ✅

CriticalCSSSubscriber::insert_critical_css_buffer()

https://github.com/wp-media/wp-rocket/blob/35c1cd12508e9f954fbb8e87fe4501d2eeb1e73c/inc/Engine/CriticalPath/CriticalCSSSubscriber.php#L550

• Add CSSTrait to CriticalCSSSubscriber class ( https://github.com/wp-media/wp-rocket/blob/35c1cd12508e9f954fbb8e87fe4501d2eeb1e73c/inc/Engine/Optimization/CSSTrait.php#L203 )
• Modify insert_critical_css_buffer() and apply apply_font_display_swap() function on $critical_css_content
• Revisit tests for insert_critical_css_buffer() and add new fixtures for font-display:swap changes

Estimate the effort ✅

Effort [S], updating tests should be the most time consuming