Rewrite google fonts with SaaS visit

[wordpressfan]

Description

Fixes #7070

Here we make sure that we host google fonts when SaaS visits the frontend page with features:

1. Remove unused CSS
2. Above the fold
3. Lazy render content

Type of change

• Enhancement (non-breaking change which improves an existing functionality).

Detailed scenario

With SaaS visits, we serve google fonts locally if the option is enabled.

Technical description

Documentation

Everything is mentioned in the issue itself and grooming.

New dependencies

No

Risks

No

Mandatory Checklist

Code validation

• I validated all the Acceptance Criteria. If possible, provide screenshots or videos.
• I triggered all changed lines of code at least once without new errors/warnings/notices.
• I implemented built-in tests to cover the new/changed code.

Code style

• I wrote a self-explanatory code about what it does.
• I protected entry points against unexpected inputs.
• I did not introduce unnecessary complexity.
• Output messages (errors, notices, logs) are explicit enough for users to understand the issue and are actionnable.

Unticked items justification

Additional Checks

• In the case of complex code, I wrote comments to explain it.
• When possible, I prepared ways to observe the implemented system (logs, data, etc.).
• I added error handling logic when using functions that could throw errors (HTTP/API request, filesystem, etc.)

[codacy-production]

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation	Diff coverage
✅ +0.00% (target: -0.10%)	✅ 50.00% (target: 50.00%)

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (09703c4)	38425	16868	43.90%
Head commit (695bc47)	38424 (-1)	16866 (-2)	43.89% (+0.00%)

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details

	Coverable lines	Covered lines	Diff coverage
Pull request (#7162)	2	1	50.00%

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings    Change summary preferences

_{Codacy stopped sending the deprecated coverage status on June 5th, 2024. Learn more}

[remyperona]

Why do we remove those? I don't believe the optimization should be applied when using the bypass or donotoptimize

[wordpressfan]

Sorry @remyperona didn't notice ur comment, we need to remove those to work with SaaS visits because SaaS visits the page with those query strings:

/?nowprocket=1&no_optimize=1&wpr_imagedimensions=1

And we call this method rewite_fonts with rocket_performance_hints_buffer which is fired only when wpr_imagedimensions query string is there.

Do u see any issue when using that with rocket_buffer?

[remyperona]

Not having those checks is going to apply the optimization when using the nowprocket parameter or the DONOTROCKETOPTIMIZE constant

[wordpressfan]

Ok, I have an idea to fix that, let me test it

[wordpressfan]

Now I separated context for normal optimizations from SaaS visits optimizations.

[Mai-Saad]

@wordpressfan Thanks for the PR.
Exploratory test notes [WIP]

• When both lcp/lrc are disabled using filter, after switch theme, we will download GFs for home page (RUCSS is off), is this ok @wp-media/product
• While RUCSS is enabled, page visited by saas will download fonts in cache, however on page source, we aren't using local fonts => @wordpressfan can you please check (expected that used google fonts will be inside the used CSS with fonts written to local => @wp-media/product what do you think?)

[wordpressfan]

checking those points now

[wordpressfan]

@Mai-Saad for the first point, as we discussed in a call, that's happening because of preload is enabled so it visits the pages and load google fonts locally.

Checking now the second point.

[wordpressfan]

@Mai-Saad I tested the second point after finishing the review comment from remy and I can see it's working properly, I used the following snippet to insert the font into homepage and insert HTML div that uses that font:

add_action( 'wp_head', function() {
	if ( ! is_home() && ! is_front_page() ) {
		return;
	}
	echo '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Montserrat+Underline:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Montserrat+Underline:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Yuji+Mai&family=Montserrat+Underline:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Yuji+Mai&display=swap">';
} );

add_action( 'wp_footer', function(){
	echo '<div style="font-family: Roboto;">Test Roboto font</div>';
} );

I'm fixing tests now to send it to review but u can validate from ur side to get some time while it's being reviewed.

[Mai-Saad]

@wordpressfan Thanks for the update. Kindly note that using local fonts with used CSS is working when lcp or lrc is enabled with RUCSS but not working when lcp & lrc are disabled

[codacy-production]

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation	Diff coverage
✅ -0.01% (target: -0.10%)	✅ 75.76% (target: 50.00%)

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (eb81681)	38473	16896	43.92%
Head commit (8d71e4d)	38451 (-22)	16884 (-12)	43.91% (-0.01%)

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details

	Coverable lines	Covered lines	Diff coverage
Pull request (#7162)	33	25	75.76%

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings    Change summary preferences

_{Codacy stopped sending the deprecated coverage status on June 5th, 2024. Learn more}

[Mai-Saad]

Working fine now
testrail-report-666.pdf