Merge pull request #544 from ampproject/feature/fetchpriority-on-hero-images

Add `fetchpriority=high` on hero images

Author: westonruter

src/Html/Attribute.php

@@ -344,6 +344,7 @@ interface Attribute
     const EXTRA_SPACE                     = 'extra-space';
     const FALLBACK                        = 'fallback';
     const FETCH_ERROR                     = 'fetch-error';
+    const FETCHPRIORITY                   = 'fetchpriority';
     const FILL                            = 'fill';
     const FILL_OPACITY                    = 'fill-opacity';
     const FILL_RULE                       = 'fill-rule';

src/Optimizer/Transformer/OptimizeHeroImages.php

@@ -113,6 +113,13 @@ final class OptimizeHeroImages implements Transformer
      */
     const NOSCRIPT_IMG_XPATH_QUERY = './noscript/img';
 
+    /**
+     * XPath query to relatively fetch all noscript > img[fetchpriority="high"] elements.
+     *
+     * @var string
+     */
+    const NOSCRIPT_IMG_FETCHPRIORITY_HIGH_XPATH_QUERY = './noscript/img[@fetchpriority="high"]';
+
     /**
      * Regular expression pattern to extract the URL from a CSS background-image property.
      *
@@ -215,6 +222,17 @@ private function findHeroImages(Document $document, $maxHeroImageCount)
                 $seenParagraphCount++;
             }
 
+            if ($node->tagName === Extension::IMG && ! $node->hasAttribute(Attribute::DATA_HERO)) {
+                $highFetchpriorityImage = $document->xpath->query(
+                    self::NOSCRIPT_IMG_FETCHPRIORITY_HIGH_XPATH_QUERY,
+                    $node
+                )->item(0);
+
+                if ($highFetchpriorityImage instanceof Element) {
+                    $node->appendChild($document->createAttribute(Attribute::DATA_HERO));
+                }
+            }
+
             $heroImage = $this->detectImageWithAttribute($node, Attribute::DATA_HERO);
             if ($heroImage) {
                 $heroImages[] = $heroImage;
@@ -566,6 +584,14 @@ private function generateImg(HeroImage $heroImage, Document $document)
                 $imgElement->setAttribute(Attribute::LOADING, $noscript_img->getAttribute(Attribute::LOADING));
             }
 
+            // Preserve the original fetchpriority attribute from the noscript fallback img.
+            if ($noscript_img->hasAttribute(Attribute::FETCHPRIORITY)) {
+                $imgElement->setAttribute(
+                    Attribute::FETCHPRIORITY,
+                    $noscript_img->getAttribute(Attribute::FETCHPRIORITY)
+                );
+            }
+
             // Remove any noscript>img when an amp-img is pre-rendered.
             $noscript_img->parentNode->parentNode->removeChild($noscript_img->parentNode);
         } elseif (! $this->isMarkedAsHeroImage($element)) {

tests/Optimizer/Transformer/OptimizeHeroImagesTest.php

@@ -341,6 +341,30 @@ public function dataTransform()
                     . '</amp-story-player>'
                 ),
             ],
+
+            'preserves fetchpriority attribute from noscript fallback img' => [
+                $input(
+                    '<amp-img width="500" height="400" src="/img1.png"><noscript><img src="/img1.png" width="500" height="400" fetchpriority="high"></noscript></amp-img>'
+                ),
+                $output(
+                    '<amp-img data-hero width="500" height="400" src="/img1.png" i-amphtml-ssr><img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" fetchpriority="high" src="/img1.png"></amp-img>'
+                ),
+            ],
+
+            'automatically ssr img element with high fetchpriority attribute from noscript fallback img even when not a hero image' => [
+                $input(
+                    '<amp-img width="500" height="400" src="/img1.png"></amp-img>'
+                    . '<p>Hello World 1</p>'
+                    . '<p>Hello World 2</p>'
+                    .  '<amp-img width="500" height="400" src="/img2.png"><noscript><img src="/img2.png" width="500" height="400" fetchpriority="high"></noscript></amp-img>'
+                ),
+                $output(
+                    '<amp-img width="500" height="400" src="/img1.png"></amp-img>'
+                    . '<p>Hello World 1</p>'
+                    . '<p>Hello World 2</p>'
+                    . '<amp-img data-hero width="500" height="400" src="/img2.png" i-amphtml-ssr><img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" fetchpriority="high" src="/img2.png"></amp-img>'
+                ),
+            ],
         ];
     }