wp-media / wp-rocket

Performance optimization plugin for WordPress
https://wp-rocket.me
GNU General Public License v2.0
696 stars 216 forks source link

LCP element + facaded iframe #6529

Open DahmaniAdame opened 6 months ago

DahmaniAdame commented 6 months ago

Context iframe might be the most prominent element above the fold. Lighthouse currently ignores it as an LCP candidate and will pick the next candidate.

If the iframe is facaded by WP Rocket, like a YouTube video when using the preview image sub-option, that iframe will become the LCP element.

Expected behavior Facadable elements need to be reported but only processed by WP Rocket if the facade is applied.

Acceptance Criteria To be defined.

Additional information We will have more facades implemented in the future. The logic needs to be extendable to any supported facade other than YouTube.

piotrbak commented 6 months ago

@DahmaniAdame just to clarify the expectations:

  1. iframes won't be processed
  2. images used as placeholders for iframes (YouTube and the future ones) will be processed as regular images

If that's expected, I can see potential problem with pre-warmup as we're not applying YT feature there.

DahmaniAdame commented 6 months ago

Yes. Correct. It's conditional.

What is expected is if the iframe is the LCP element, and if the preview image is activated on our side, then it will be processed.

At the same time, we need to have a backup LCP candidate reported so it fallback to it if the preview image is not used.

If that's expected, I can see potential problem with pre-warmup as we're not applying YT feature there.

There shouldn't be any need for applying the image replacement on SaaS.

The kind of iframe covered will have an explicit width and height. That should be enough to assess if it's an LCP candidate or not without loading the actual iframe content.

Behavior needs to be confirmed on SaaS.

piotrbak commented 6 months ago
What is expected is if the iframe is the LCP element, and if the preview image is activated on our side, then it will be processed.

When the preview image is enabled, wouldn't the element be just an image already?

DahmaniAdame commented 6 months ago

When the preview image is enabled, wouldn't the element be just an image already?

Yes. The overhead will be minimal. If it's more convenient, why not.

In all cases, we still needs to identify the next LCP candidate to act as a fallback when the preview image is disabled.