3.16 - Inject beacon in the page

[Miraeld]

Context

As a Product team member, I want WP Rocket to inject a script when LCP/ATF information is missing on the page so that it can then identify those images. This issue has the goal to develop the blue part of this diagram:

Scope a solution

in AboveTheFold\Frontend\Controller

Update the lcp() method to:

• check if the status is failed (in addition to the already existing checks)
• inject the beacon script in case of no LCP data in the DB using a new method inject_beacon()
• The script needs to be added as an external script, in the footer, with an async attribute
• Update any related tests

Acceptance Criteria

• Clear the LCP/ATF DB. Perform an uncached request. Check that the script is injected.
• Add valid/successful LCP/ATF data for a given page in the DB. Perform an uncached request to this page. Check that the script is not injected.
• Add LCP/ATF failed status for a given page in the DB. Perform an uncached request to this page. Check that the script is not injected. From QA team:
• Check that the beacon script is a minified JS file.
• Check that the beacon script is excluded from WP Rocket JS optimizations.

Effort estimation:

Effort [S]

[MathieuLamiot]

From @Mai-Saad here: added the following AC, to be taken into account in the proposed solution:

• Check that the beacon script is a minified JS file.
• Check that the beacon script is excluded from WP Rocket JS optimizations.

For this issue, a dummy script is enough. It does not need to perform any action. It could log something to ease testing for instance.