3.19 - Preload Fonts - Frontend optimization part

[piotrbak]

User Story
As a user, I want to see the preload font applied to frontend once enabled while data exists in the database

Acceptance Criteria

• Each eligible font will be individually preloaded on the page using:
  <link rel="preload" data-rocket-preload as="font" href="path/to/font.woff2">
• Optimization should be done for font weight/style pairings as they might have different fonts.
• The markup will be added before the Used CSS if enabled
• CDN is applied to preloaded font
  • Needs to be confirmed if it works, if not, effort estimation
• If the status is failed, we’ll bailout

[jeawhanlee]

Scope a solution ✅

• Create a Frontend Controller Class: WP_Rocket\Engine\Media\PreloadFonts\Frontend\Controller to implement use WP_Rocket\Engine\Common\PerformanceHints\Frontend\ControllerInterface;
• Create 2 mandatory method ( optimize & add_custom_data ), to match the interface here and will focus on optimize method to process the frontend optimization.
• In optimize we parse 2 arguments, html buffer & DB row:
  • Bail out if status is not completed or fonts column is empty array or empty( depending on what decide to insert when DB is empty )
  • Add logic to update buffer and format the link tag to include the font url to be preloaded
• Create ServiceProvider in the PreloadFonts namespace if not created, else update it.
• Add tests

Optimization should be done for font weight/style pairings as they might have different fonts.

This is handled on the beacon

The markup will be added before the Used CSS if enabled

This will be handled here

CDN is applied to preloaded font

This will happen before beacon fires, so the beacon will capture the applied CDN and send it to be saved to DB.

Estimate the effort ✅

[S]

[Khadreal]

Moving this back to todo cause it's dependent on #7242, created basic stuff here