Skip to content

Prevent SSR for amp-img occurring after second paragraph#141

Merged
schlessera merged 5 commits intomainfrom
fix/improve-hero-image-behavior
Apr 10, 2021
Merged

Prevent SSR for amp-img occurring after second paragraph#141
schlessera merged 5 commits intomainfrom
fix/improve-hero-image-behavior

Conversation

@schlessera
Copy link
Copy Markdown
Collaborator

@schlessera schlessera commented Apr 9, 2021

This PR skips hero image prerendering after paragraph 2 and adds lazy-loading to hero images that were detected without being explicitly marked.

See ampproject/amp-toolbox#1196

Depends on ampproject/amp-toolbox#1198

@schlessera schlessera added Optimizer Performance SSR Related to the serverside rendering of the Optimizer labels Apr 9, 2021
@schlessera schlessera added this to the 0.4.0 milestone Apr 9, 2021
Comment on lines +751 to +753
if ($element->hasAttribute(Attribute::DATA_HERO)) {
return true;
}
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since DetermineHeroImages in the AMP plugin is making educated decisions about what images are heroes in WordPress, I think such images should not get loading=lazy.

Suggested change
if ($element->hasAttribute(Attribute::DATA_HERO)) {
return true;
}
if ($element->hasAttribute(Attribute::DATA_HERO) || $element->hasAttribute(Attribute::DATA_HERO_CANDIDATE)) {
return true;
}

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

// outside the viewport.
if (! $this->isMarkedAsHeroImage($element)) {
$imgElement->setAttribute(Attribute::LOADING, 'lazy');
}
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe there should be an else case here to see if there is a noscript > img maybe this should copy the loading attribute from that image if it is set.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm creating a separate issue for this, as I want the tests to be fixed again.
See #147

@schlessera schlessera changed the base branch from main to fix/add-crossorigin-anonymous-to-nomodule-script April 10, 2021 06:38
@schlessera schlessera changed the base branch from fix/add-crossorigin-anonymous-to-nomodule-script to main April 10, 2021 06:39
@schlessera schlessera force-pushed the fix/improve-hero-image-behavior branch from 236464f to 07c311e Compare April 10, 2021 06:41
@schlessera schlessera merged commit 90452d0 into main Apr 10, 2021
@schlessera schlessera deleted the fix/improve-hero-image-behavior branch April 10, 2021 15:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Optimizer Performance SSR Related to the serverside rendering of the Optimizer

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants