diff --git a/includes/sanitizers/class-amp-core-theme-sanitizer.php b/includes/sanitizers/class-amp-core-theme-sanitizer.php
index 0cc32de0ec0..89eea469975 100644
--- a/includes/sanitizers/class-amp-core-theme-sanitizer.php
+++ b/includes/sanitizers/class-amp-core-theme-sanitizer.php
@@ -1638,7 +1638,7 @@ public function wrap_modal_in_lightbox( $args = [] ) {
 			return;
 		}
 
-		$body_id = AMP_DOM_Utils::get_element_id( $this->dom->body, 'body' );
+		$body_id = $this->dom->getElementId( $this->dom->body, 'body' );
 
 		$open_xpaths  = isset( $args['open_button_xpath'] ) ? $args['open_button_xpath'] : [];
 		$close_xpaths = isset( $args['close_button_xpath'] ) ? $args['close_button_xpath'] : [];
@@ -1776,7 +1776,7 @@ public function add_twentytwenty_modals() {
 				}
 			}
 
-			$modal_id = AMP_DOM_Utils::get_element_id( $modal );
+			$modal_id = $this->dom->getElementId( $modal );
 
 			// Add the lightbox itself as a close button xpath as well.
 			// With twentytwenty compat, the lightbox fills the entire screen, and only an inner wrapper will contain
@@ -1808,7 +1808,7 @@ public function add_twentytwenty_modals() {
 	 */
 	public function add_twentytwenty_toggles() {
 		$toggles = $this->dom->xpath->query( '//*[ @data-toggle-target ]' );
-		$body_id = AMP_DOM_Utils::get_element_id( $this->dom->body, 'body' );
+		$body_id = $this->dom->getElementId( $this->dom->body, 'body' );
 
 		if ( false === $toggles || 0 === $toggles->length ) {
 			return;
@@ -1821,7 +1821,7 @@ public function add_twentytwenty_toggles() {
 		 */
 		foreach ( $toggles as $toggle ) {
 			$toggle_target = $toggle->getAttribute( 'data-toggle-target' );
-			$toggle_id     = AMP_DOM_Utils::get_element_id( $toggle );
+			$toggle_id     = $this->dom->getElementId( $toggle );
 
 			if ( 'next' === $toggle_target ) {
 				$target_node = $toggle->nextSibling;
@@ -1847,7 +1847,7 @@ public function add_twentytwenty_toggles() {
 
 			$is_sub_menu     = AMP_DOM_Utils::has_class( $target_node, 'sub-menu' );
 			$new_target_node = $is_sub_menu ? $this->get_closest_submenu( $toggle ) : $target_node;
-			$new_target_id   = AMP_DOM_Utils::get_element_id( $new_target_node );
+			$new_target_id   = $this->dom->getElementId( $new_target_node );
 
 			$state_string = str_replace( '-', '_', $new_target_id );
 
@@ -1869,7 +1869,7 @@ public function add_twentytwenty_toggles() {
 						// Skip adding the 'active' class on the "Close" button in the primary nav menu.
 						continue;
 					}
-					$target_toggle_id = AMP_DOM_Utils::get_element_id( $target_toggle );
+					$target_toggle_id = $this->dom->getElementId( $target_toggle );
 					AMP_DOM_Utils::add_amp_action( $toggle, 'tap', "{$target_toggle_id}.toggleClass(class='active')" );
 				}
 			}
@@ -1888,7 +1888,7 @@ public function add_twentytwenty_toggles() {
 					$focus_element = $this->dom->xpath->query( $focus_xpath )->item( 0 );
 
 					if ( $focus_element instanceof DOMElement ) {
-						$focus_element_id = AMP_DOM_Utils::get_element_id( $focus_element );
+						$focus_element_id = $this->dom->getElementId( $focus_element );
 						AMP_DOM_Utils::add_amp_action( $toggle, 'tap', "{$focus_element_id}.focus" );
 					}
 				}
diff --git a/includes/utils/class-amp-dom-utils.php b/includes/utils/class-amp-dom-utils.php
index ffa2aff6085..c7eadeaf234 100644
--- a/includes/utils/class-amp-dom-utils.php
+++ b/includes/utils/class-amp-dom-utils.php
@@ -365,31 +365,22 @@ public static function has_class( DOMElement $element, $class ) {
 	 * If the element does not have an ID, create one first.
 	 *
 	 * @since 1.4.0
+	 * @since 1.5.1 Deprecated for AmpProject\Dom\Document::getElementId()
+	 *
+	 * @deprecated Use AmpProject\Dom\Document::getElementId() instead.
 	 *
 	 * @param DOMElement $element Element to get the ID for.
-	 * @param string     $prefix  Optional. Defaults to '_amp_wp_id_'.
+	 * @param string     $prefix  Optional. Defaults to 'amp-wp-id'.
 	 * @return string ID to use.
 	 */
 	public static function get_element_id( $element, $prefix = 'amp-wp-id' ) {
-		static $index_counter = [];
-
-		if ( $element->hasAttribute( 'id' ) ) {
-			return $element->getAttribute( 'id' );
-		}
-
-		if ( ! array_key_exists( $prefix, $index_counter ) ) {
-			$index_counter[ $prefix ] = 2;
-			$element->setAttribute( 'id', $prefix );
-
-			return $prefix;
-		}
-
-		$id = "{$prefix}-{$index_counter[ $prefix ]}";
-		$index_counter[ $prefix ] ++;
-
-		$element->setAttribute( 'id', $id );
+		_deprecated_function(
+			'AMP_DOM_Utils::get_element_id',
+			'1.5.1',
+			'Use AmpProject\Amp\Dom\Document::getElementId() instead'
+		);
 
-		return $id;
+		return Document::fromNode( $element )->getElementId( $element, $prefix );
 	}
 
 	/**
diff --git a/lib/common/composer.json b/lib/common/composer.json
index 5509862caa9..d92993142eb 100644
--- a/lib/common/composer.json
+++ b/lib/common/composer.json
@@ -8,11 +8,11 @@
     "ext-dom": "*",
     "ext-iconv": "*",
     "ext-json": "*",
-    "ext-libxml": "*"
+    "ext-libxml": "*",
+    "php-parallel-lint/php-parallel-lint": "^1.2"
   },
   "require-dev": {
     "civicrm/composer-downloads-plugin": "^2.1",
-    "jakub-onderka/php-parallel-lint": "^1.0",
     "roave/security-advisories": "dev-master",
     "squizlabs/php_codesniffer": "^3"
   },
diff --git a/lib/common/src/Attribute.php b/lib/common/src/Attribute.php
index 03c6f57a54d..9555b5d7ed6 100644
--- a/lib/common/src/Attribute.php
+++ b/lib/common/src/Attribute.php
@@ -58,6 +58,7 @@ interface Attribute
     const PROFILE               = 'profile';
     const REL                   = 'rel';
     const ROLE                  = 'role';
+    const SRCSET                = 'srcset';
     const SIZES                 = 'sizes';
     const STYLE                 = 'style';
     const SRC                   = 'src';
diff --git a/lib/common/src/Dom/CssByteCountCalculator.php b/lib/common/src/Dom/CssByteCountCalculator.php
new file mode 100644
index 00000000000..89accc786f8
--- /dev/null
+++ b/lib/common/src/Dom/CssByteCountCalculator.php
@@ -0,0 +1,79 @@
+<?php
+
+namespace AmpProject\Dom;
+
+use DOMNodeList;
+
+/**
+ * Class AmpProject\Dom\CssByteCountCalculator.
+ *
+ * Calculates the total byte count of CSS styles in a given document.
+ *
+ * This can be used to check against the allowed limit of 75kB that AMP enforces.
+ *
+ * @package ampproject/common
+ */
+final class CssByteCountCalculator
+{
+
+    /**
+     * XPath query to fetch the <style amp-custom> tag, relative to the <head> node.
+     *
+     * @var string
+     */
+    const AMP_CUSTOM_STYLE_TAG_XPATH = './/style[@amp-custom]';
+
+    /**
+     * XPath query to fetch the inline style attributes, relative to the <body> node.
+     *
+     * @var string
+     */
+    const INLINE_STYLE_ATTRIBUTES_XPATH = './/@style';
+
+    /**
+     * Document to calculate the total byte count for.
+     *
+     * @var Document
+     */
+    private $document;
+
+    /**
+     * Instantiate a CssByteCountCalculator object.
+     *
+     * @param Document $document Document to calculate the total byte count for.
+     */
+    public function __construct(Document $document)
+    {
+        $this->document = $document;
+    }
+
+    /**
+     * Calculate the byte count for the provided document.
+     *
+     * @return int Total byte count of CSS styles in the document.
+     */
+    public function calculate()
+    {
+        $ampCustomStyle = $this->document->xpath->query(self::AMP_CUSTOM_STYLE_TAG_XPATH, $this->document->head);
+        $inlineStyles   = $this->document->xpath->query(self::INLINE_STYLE_ATTRIBUTES_XPATH, $this->document->body);
+
+        return $this->calculateForNodeList($ampCustomStyle) + $this->calculateForNodeList($inlineStyles);
+    }
+
+    /**
+     * Calculate the byte count of CSS styles for a given node list.
+     *
+     * @param DOMNodeList $nodeList Node list to calculate the byte count of CSS styles for.
+     * @return int Byte count of CSS styles for the given node list.
+     */
+    private function calculateForNodeList(DOMNodeList $nodeList)
+    {
+        $byteCount = 0;
+
+        foreach ($nodeList as $node) {
+            $byteCount += strlen($node->textContent);
+        }
+
+        return $byteCount;
+    }
+}
diff --git a/lib/common/src/Dom/Document.php b/lib/common/src/Dom/Document.php
index 3e0a64a2526..428e9c6f472 100644
--- a/lib/common/src/Dom/Document.php
+++ b/lib/common/src/Dom/Document.php
@@ -236,6 +236,15 @@ final class Document extends DOMDocument
      */
     private $usedAmpEmoji;
 
+    /**
+     * Store the current index by prefix.
+     *
+     * This is used to generate unique-per-prefix IDs.
+     *
+     * @var int[]
+     */
+    private $indexCounter = [];
+
     /**
      * Creates a new AmpProject\Dom\Document object
      *
@@ -314,7 +323,7 @@ public static function fromNode(DOMNode &$node)
         // We replace the $node by reference, to make sure the next lines of code will
         // work as expected with the new document.
         // Otherwise $dom and $node would refer to two different DOMDocuments.
-        $node = $dom->importNode($root->documentElement ?: $root, true);
+        $node = $dom->importNode($node, true);
         $dom->appendChild($node);
 
         $dom->hasInitialAmpDevMode = $dom->documentElement->hasAttribute(DevMode::DEV_MODE_ATTRIBUTE);
@@ -1474,6 +1483,39 @@ public function isValidHeadNode(DOMNode $node)
         );
     }
 
+    /**
+     * Get the ID for an element.
+     *
+     * If the element does not have an ID, create one first.
+     *
+     * @param DOMElement $element Element to get the ID for.
+     * @param string     $prefix  Optional. The prefix to use (should not have a trailing dash). Defaults to 'i-amp-id'.
+     * @return string ID to use.
+     */
+    public function getElementId(DOMElement $element, $prefix = 'i-amp-id')
+    {
+        if ($element->hasAttribute('id')) {
+            return $element->getAttribute('id');
+        }
+
+        if (array_key_exists($prefix, $this->indexCounter)) {
+            ++$this->indexCounter[$prefix];
+            $id = "{$prefix}-{$this->indexCounter[ $prefix ]}";
+        } else {
+            $id                          = $prefix;
+            $this->indexCounter[$prefix] = 1;
+        }
+
+        while ($this->getElementById($id) instanceof DOMElement) {
+            ++$this->indexCounter[$prefix];
+            $id = "{$prefix}-{$this->indexCounter[ $prefix ]}";
+        }
+
+        $element->setAttribute('id', $id);
+
+        return $id;
+    }
+
     /**
      * Determine whether `data-ampdevmode` was initially set on the document element.
      *
diff --git a/lib/common/tests/Dom/CssByteCountCalculatorTest.php b/lib/common/tests/Dom/CssByteCountCalculatorTest.php
new file mode 100644
index 00000000000..a2b2e672de7
--- /dev/null
+++ b/lib/common/tests/Dom/CssByteCountCalculatorTest.php
@@ -0,0 +1,58 @@
+<?php
+
+namespace AmpProject\Common;
+
+use AmpProject\Dom\CssByteCountCalculator;
+use AmpProject\Dom\Document;
+use PHPUnit\Framework\TestCase;
+
+/**
+ * Tests for AmpProject\Dom\CssByteCountCalculator.
+ *
+ * @covers  CssByteCountCalculator
+ * @package ampproject/common
+ */
+class CssByteCountCalculatorTest extends TestCase
+{
+
+    /**
+     * Data provider for testing the calculate() method.
+     *
+     * @return array Testing data.
+     */
+    public function dataCalculate()
+    {
+        return [
+            'amp_custom_style_tag' => [
+                '<html><head><style amp-custom>12345</style>', 5,
+            ],
+            'one_inline_style_attribute' => [
+                '<html><body><div style="12345"></div></body></html>', 5,
+            ],
+            'multiple_inline_style_attributes' => [
+                '<html><body><div style="1234"></div><div style="567"><div style="89"></body></html>', 9,
+            ],
+            'amp_custom_style_tag_and_multiple_inline_style_attributes' => [
+                '<html><head><style amp-custom>12345</style></head><body><div style="1234"></div><div style="567"><div style="89"></body></html>', 14,
+            ],
+            'amp_custom_style_tag_outside_head' => [
+                '<html><head><style amp-custom>12345</style></head><body><style amp-custom>123</style></body></html>', 5,
+            ],
+            'multibyte_chars_are_counted_in_bytes_not_chars' => [
+                '<html><head><style amp-custom>Iñtërnâtiônàlizætiøn</style></head><body><div style="Iñtërnâtiônàlizætiøn"></div></body></html>', 54,
+            ],
+        ];
+    }
+
+    /**
+     * Test the calculate() method.
+     *
+     * @dataProvider dataCalculate
+     * @covers       CssByteCountCalculator::calculate()
+     */
+    public function testCalculate($html, $expected)
+    {
+        $document = Document::fromHtml($html);
+        $this->assertEquals($expected, (new CssByteCountCalculator($document))->calculate());
+    }
+}
diff --git a/lib/common/tests/Dom/DocumentTest.php b/lib/common/tests/Dom/DocumentTest.php
index c8738dc1a7e..d367b6e42fd 100644
--- a/lib/common/tests/Dom/DocumentTest.php
+++ b/lib/common/tests/Dom/DocumentTest.php
@@ -705,4 +705,105 @@ public function testHasInitialAmpDevMode($document, $hasInitialDevMode)
     {
         $this->assertEquals($hasInitialDevMode, $document->hasInitialAmpDevMode());
     }
+
+    /**
+     * Data provider for Dom\Document::getElementId() tests.
+     *
+     * @return array
+     */
+    public function getGetElementIdData()
+    {
+        $elementFactory = static function ($dom, $id = null) {
+            $element = $dom->createElement('div');
+
+            if ($id) {
+                $element->setAttribute('id', $id);
+            }
+
+            $dom->body->appendChild($element);
+
+            return $element;
+        };
+
+        return [
+            'single check with existing ID'         => [
+                [
+                    [ $elementFactory, 'my-id', 'some-prefix', 'my-id' ],
+                ],
+            ],
+
+            'single check without existing ID'      => [
+                [
+                    [ $elementFactory, null, 'some-prefix', 'some-prefix' ],
+                ],
+            ],
+
+            'consecutive checks count upwards'      => [
+                [
+                    [ $elementFactory, null, 'some-prefix', 'some-prefix' ],
+                    [ $elementFactory, null, 'some-prefix', 'some-prefix-2' ],
+                ],
+            ],
+
+            'consecutive checks for same element return same ID' => [
+                [
+                    [ $elementFactory, null, 'some-prefix', 'some-prefix' ],
+                    [ null, null, 'some-prefix', 'some-prefix' ],
+                ],
+            ],
+
+            'mixing prefixes keeps counts separate' => [
+                [
+                    [ $elementFactory, 'my-id', 'some-prefix', 'my-id' ],
+                    [ $elementFactory, null, 'some-prefix', 'some-prefix' ],
+                    [ $elementFactory, null, 'some-prefix', 'some-prefix-2' ],
+                    [ $elementFactory, null, 'other-prefix', 'other-prefix' ],
+                    [ $elementFactory, null, 'other-prefix', 'other-prefix-2' ],
+                    [ $elementFactory, null, 'some-prefix', 'some-prefix-3' ],
+                    [ $elementFactory, 'another-id', 'some-prefix', 'another-id' ],
+                    [ $elementFactory, null, 'some-prefix', 'some-prefix-4' ],
+                    [ null, null, 'some-prefix', 'some-prefix-4' ],
+                ],
+            ],
+        ];
+    }
+
+    /**
+     * Test Document::getElementId().
+     *
+     * @dataProvider getGetElementIdData
+     * @covers Document::getElementId()
+     *
+     * @param array $checks Checks to perform. Each check is an array containing an element, a prefix and an expected ID.
+     */
+    public function testGetElementId($checks)
+    {
+        $dom = new Document();
+        foreach ($checks as list($elementFactory, $id, $prefix, $expected)) {
+            // If no element factory was passed, just reuse the previous element.
+            if ($elementFactory) {
+                $element = $elementFactory($dom, $id);
+            }
+
+            $actual = $dom->getElementId($element, $prefix);
+            $this->assertEquals($expected, $actual);
+        }
+    }
+
+    /**
+     * Test whether existing element IDs are taken into account, even if the index counter is off.
+     *
+     * @covers Document::getElementId()
+     */
+    public function testGetElementIdOnPreexistingIds()
+    {
+        $dom = Document::fromHtml(
+            '<body><div id="some-prefix"><div id="some-prefix-2"><div id="some-prefix-3"></body>'
+        );
+
+        $element = $dom->createElement('div');
+        $dom->body->appendChild($element);
+
+        $this->assertEquals('some-prefix-4', $dom->getElementId($element, 'some-prefix'));
+    }
 }
diff --git a/lib/optimizer/composer.json b/lib/optimizer/composer.json
index 30b1e8bcad9..ce095175d7a 100644
--- a/lib/optimizer/composer.json
+++ b/lib/optimizer/composer.json
@@ -8,12 +8,12 @@
     "ext-dom": "*",
     "ext-iconv": "*",
     "ext-libxml": "*",
-    "ampproject/common": "^1"
+    "ampproject/common": "^1",
+    "php-parallel-lint/php-parallel-lint": "^1.2"
   },
   "require-dev": {
     "ext-zip": "*",
     "civicrm/composer-downloads-plugin": "^2.1",
-    "jakub-onderka/php-parallel-lint": "^1.0",
     "roave/security-advisories": "dev-master",
     "squizlabs/php_codesniffer": "^3"
   },
diff --git a/lib/optimizer/resources/local_fallback/rtv/metadata b/lib/optimizer/resources/local_fallback/rtv/metadata
index 031b783c4a1..027f378ccb3 100644
--- a/lib/optimizer/resources/local_fallback/rtv/metadata
+++ b/lib/optimizer/resources/local_fallback/rtv/metadata
@@ -1 +1 @@
-{"ampRuntimeVersion":"012004252135000","ampCssUrl":"https://cdn.ampproject.org/rtv/012004252135000/v0.css","canaryPercentage":"0.005","diversions":["002004252135000","002005050322000","022004252135000","032004252135000","032005050322000","042005051629000","052004252135000","102004252135000"],"ltsRuntimeVersion":"012004030010070","ltsCssUrl":"https://cdn.ampproject.org/rtv/012004030010070/v0.css"}
\ No newline at end of file
+{"ampRuntimeVersion":"012004252135000","ampCssUrl":"https://cdn.ampproject.org/rtv/012004252135000/v0.css","canaryPercentage":"0.005","diversions":["002005050322000","022004252135000","032005050322000","042005062312000","052004252135000","102005050322000"],"ltsRuntimeVersion":"012004030010070","ltsCssUrl":"https://cdn.ampproject.org/rtv/012004030010070/v0.css"}
\ No newline at end of file
diff --git a/lib/optimizer/src/Error/CannotRemoveBoilerplate.php b/lib/optimizer/src/Error/CannotRemoveBoilerplate.php
index 94473487636..4f9f5c2e791 100644
--- a/lib/optimizer/src/Error/CannotRemoveBoilerplate.php
+++ b/lib/optimizer/src/Error/CannotRemoveBoilerplate.php
@@ -4,12 +4,14 @@
 
 use AmpProject\Optimizer\Error;
 use DOMElement;
+use Exception;
 
 final class CannotRemoveBoilerplate implements Error
 {
     use ErrorProperties;
 
-    const ATTRIBUTES_STRING             = 'Cannot remove boilerplate as either heights, media or sizes attribute is set: ';
+    const ATTRIBUTES_STRING             = 'Cannot remove boilerplate as either heights, media or sizes attribute is set and cannot be adapted: ';
+    const ATTRIBUTES_EXCEPTION_STRING   = 'Cannot remove boilerplate as the removal of either heights, media or sizes attribute produced an error: ';
     const RENDER_DELAYING_SCRIPT_STRING = 'Cannot remove boilerplate because the document contains a render-delaying extension: ';
     const AMP_AUDIO_STRING              = 'Cannot remove boilerplate because the document contains an extension that needs to know the dimensions of the browser: ';
     const UNSUPPORTED_LAYOUT_STRING     = 'Cannot remove boilerplate because of an unsupported layout: ';
@@ -25,6 +27,17 @@ public static function fromAttributesRequiringBoilerplate(DOMElement $element)
         return new self(self::ATTRIBUTES_STRING . new ElementDump($element));
     }
 
+    /**
+     * Instantiate a CannotRemoveBoilerplate object for attributes that require the boilerplate to be around.
+     *
+     * @param Exception $exception Exception being thrown.
+     * @return self
+     */
+    public static function fromAttributeThrowingException($exception)
+    {
+        return new self(self::ATTRIBUTES_EXCEPTION_STRING . $exception->getMessage());
+    }
+
     /**
      * Instantiate a CannotRemoveBoilerplate object for an amp-experiment element.
      *
diff --git a/lib/optimizer/src/Exception/InvalidHtmlAttribute.php b/lib/optimizer/src/Exception/InvalidHtmlAttribute.php
new file mode 100644
index 00000000000..5e306835071
--- /dev/null
+++ b/lib/optimizer/src/Exception/InvalidHtmlAttribute.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace AmpProject\Optimizer\Exception;
+
+use AmpProject\Optimizer\Error\ElementDump;
+use DomainException;
+use DOMElement;
+
+/**
+ * Exception thrown when an invalid HTML attribute was detected.
+ *
+ * @package ampproject/optimizer
+ */
+final class InvalidHtmlAttribute extends DomainException implements AmpOptimizerException
+{
+
+    /**
+     * Instantiate an InvalidHtmlAttribute exception for an invalid attribute value.
+     *
+     * @param string     $attributeName Name of the attribute.
+     * @param DOMElement $element       Element that contains the invalid attribute.
+     * @return self
+     */
+    public static function fromAttribute($attributeName, DOMElement $element)
+    {
+        $message = "Invalid value detected for attribute '{$attributeName}': " . new ElementDump($element);
+
+        return new self($message);
+    }
+}
diff --git a/lib/optimizer/src/Transformer/ServerSideRendering.php b/lib/optimizer/src/Transformer/ServerSideRendering.php
index ea753b1898b..7892bac3c9b 100644
--- a/lib/optimizer/src/Transformer/ServerSideRendering.php
+++ b/lib/optimizer/src/Transformer/ServerSideRendering.php
@@ -4,16 +4,20 @@
 
 use AmpProject\Amp;
 use AmpProject\Attribute;
+use AmpProject\Dom\CssByteCountCalculator;
 use AmpProject\Dom\Document;
 use AmpProject\CssLength;
 use AmpProject\Extension;
 use AmpProject\Layout;
 use AmpProject\Optimizer\Error;
 use AmpProject\Optimizer\ErrorCollection;
+use AmpProject\Optimizer\Exception\InvalidHtmlAttribute;
 use AmpProject\Optimizer\Transformer;
 use AmpProject\Role;
 use AmpProject\Tag;
+use DOMAttr;
 use DOMElement;
+use Exception;
 
 /**
  * Transformer applying the server-side rendering transformations to the HTML input.
@@ -34,6 +38,11 @@
 final class ServerSideRendering implements Transformer
 {
 
+    /**
+     * List of layouts that support server-side rendering.
+     *
+     * @var string[]
+     */
     const SUPPORTED_LAYOUTS = [
         '',
         Layout::NODISPLAY,
@@ -46,6 +55,68 @@ final class ServerSideRendering implements Transformer
         Layout::INTRINSIC,
     ];
 
+    /**
+     * List of elements to exclude from rendering their layout at the server.
+     *
+     * @var string[]
+     */
+    const EXCLUDED_ELEMENTS = [
+        'amp-audio',
+    ];
+
+    /**
+     * XPath query to retrieve the <style amp-custom> tag, relative to the <head> node.
+     *
+     * @var string
+     */
+    const STYLE_AMP_CUSTOM_XPATH = './/style[@amp-custom]';
+
+    /**
+     * Regex pattern to match a CSS Dimension with an associated media condition.
+     *
+     * @var string
+     */
+    const CSS_DIMENSION_WITH_MEDIA_CONDITION_REGEX_PATTERN = '/(?<media_condition>.*)\s(?<dimension>.*)/m';
+
+    /**
+     * Characters to use for trimming CSS values.
+     *
+     * @var string
+     */
+    const CSS_TRIM_CHARACTERS = " \t\n\r\0\x0B;";
+
+    /**
+     * Maximum size of the CSS styles in bytes.
+     *
+     * @todo Max size is hard-coded for now until we ported over the generated spec into a reusable package.
+     *
+     * @var int
+     */
+    const MAX_CSS_BYTE_COUNT = 75000;
+
+    /**
+     * The <style amp-custom> element that custom CSS styles need to be added to.
+     *
+     * @var DOMElement
+     */
+    private $ampCustomStyleElement;
+
+    /**
+     * Count of bytes to calculate against the AMP size limit for the custom CSS styling.
+     *
+     * AMP only allows for 75000 bytes of CSS across <style amp-custom> and inline style attributes.
+     *
+     * @var int
+     */
+    private $ampCustomCssByteCount = 0;
+
+    /**
+     * Associative array of custom sizer styles where the key is the ID of the associated element.
+     *
+     * @var string[]
+     */
+    private $customSizerStyles = [];
+
     /**
      * Apply transformations to the provided DOM document.
      *
@@ -64,41 +135,41 @@ public function transform(Document $document, ErrorCollection $errors)
          * we also look for reasons not to remove the boilerplate.
          */
         $canRemoveBoilerplate = true;
-        foreach ($document->ampElements as $amp_element) {
+        foreach ($document->ampElements as $ampElement) {
             // Make sure we only deal with valid elements.
-            if (!$amp_element instanceof DOMElement) {
+            if (! $ampElement instanceof DOMElement) {
                 continue;
             }
 
             // Skip tags inside a template tag.
-            if ($this->hasAncestorWithTag($amp_element, Tag::TEMPLATE)) {
+            if ($this->hasAncestorWithTag($ampElement, Tag::TEMPLATE)) {
                 continue;
             }
 
             /*
-             * If these attributes are used on any AMP custom element tags within the document, we can't remove the
-             * boilerplate - they require the boilerplate.
+             * amp-experiment is a render delaying extension iff the tag is used in the doc. We check for that here
+             * rather than checking for the existence of the amp-experiment script in IsRenderDelayingExtension below.
              */
-            if ($amp_element->hasAttribute(Attribute::HEIGHTS) || $amp_element->hasAttribute(Attribute::MEDIA) || $amp_element->hasAttribute(Attribute::SIZES)) {
-                $errors->add(Error\CannotRemoveBoilerplate::fromAttributesRequiringBoilerplate($amp_element));
+            if ($ampElement->tagName === Extension::EXPERIMENT && $this->isAmpExperimentUsed($ampElement)) {
+                $errors->add(Error\CannotRemoveBoilerplate::fromAmpExperiment($ampElement));
                 $canRemoveBoilerplate = false;
             }
 
             /*
-             * amp-experiment is a render delaying extension iff the tag is used in the doc. We check for that here
-             * rather than checking for the existence of the amp-experiment script in IsRenderDelayingExtension below.
+             * amp-audio requires knowing the dimensions of the browser. Do not remove the boilerplate or apply layout
+             * if amp-audio is present in the document.
              */
-            if ($amp_element->tagName === Extension::EXPERIMENT && $this->isAmpExperimentUsed($amp_element)) {
-                $errors->add(Error\CannotRemoveBoilerplate::fromAmpExperiment($amp_element));
+            if ($ampElement->tagName === Extension::AUDIO) {
+                $errors->add(Error\CannotRemoveBoilerplate::fromAmpAudio($ampElement));
                 $canRemoveBoilerplate = false;
             }
 
             /*
-             * amp-audio requires knowing the dimensions of the browser. Do not remove the boilerplate or apply layout
-             * if amp-audio is present in the document.
+             * Try to adapt 'sizes', 'heights' and 'media' attribute to turn them from blocking attributes into CSS
+             * styles we add to <style amp-custom>.
              */
-            if ($amp_element->tagName === Extension::AUDIO) {
-                $errors->add(Error\CannotRemoveBoilerplate::fromAmpAudio($amp_element));
+            $attributesToRemove = $this->adaptBlockingAttributes($document, $ampElement, $errors);
+            if ($attributesToRemove === false) {
                 $canRemoveBoilerplate = false;
                 continue;
             }
@@ -107,9 +178,15 @@ public function transform(Document $document, ErrorCollection $errors)
              * Now apply the layout to the custom elements. If we encounter any unsupported layout, the applyLayout()
              * method returns false and we can't remove the boilerplate.
              */
-            if (! $this->applyLayout($document, $amp_element, $errors)) {
-                $errors->add(Error\CannotRemoveBoilerplate::fromUnsupportedLayout($amp_element));
+            if (! $this->applyLayout($document, $ampElement, $errors)) {
+                $errors->add(Error\CannotRemoveBoilerplate::fromUnsupportedLayout($ampElement));
                 $canRemoveBoilerplate = false;
+                continue;
+            }
+
+            // Removal of attributes is defer as layout application needs them.
+            foreach ($attributesToRemove as $attributeToRemove) {
+                $ampElement->removeAttribute($attributeToRemove);
             }
         }
 
@@ -362,6 +439,10 @@ private function isSupportedLayout($layout)
      */
     private function applyLayoutAttributes(DOMElement $element, $layout, CssLength $width, CssLength $height)
     {
+        if ($this->isExcludedElement($element)) {
+            return;
+        }
+
         $this->addClass($element, $this->getLayoutClass($layout));
 
         if ($this->isLayoutSizeDefined($layout)) {
@@ -478,7 +559,12 @@ private function maybeAddSizerInto(
         $sizer = null;
 
         if ($layout === Layout::RESPONSIVE) {
-            $sizer = $this->createResponsiveSizer($document, $width, $height);
+            $elementId = $element->getAttribute(Attribute::ID);
+            if (!empty($elementId) && array_key_exists($elementId, $this->customSizerStyles)) {
+                $sizer = $this->createResponsiveSizer($document, $width, $height, $this->customSizerStyles[$elementId]);
+            } else {
+                $sizer = $this->createResponsiveSizer($document, $width, $height);
+            }
         } elseif ($layout === Layout::INTRINSIC) {
             $sizer = $this->createIntrinsicSizer($document, $width, $height);
         }
@@ -494,13 +580,15 @@ private function maybeAddSizerInto(
      * @param Document  $document DOM document to create the sizer for.
      * @param CssLength $width    Calculated width of the element.
      * @param CssLength $height   Calculated height of the element.
+     * @param string    $style    Style to use for the sizer. Defaults to padding-top in percentage.
      * @return DOMElement
      */
-    private function createResponsiveSizer(Document $document, CssLength $width, CssLength $height)
+    private function createResponsiveSizer(Document $document, CssLength $width, CssLength $height, $style = 'padding-top:%1.4F%%;')
     {
         $padding = $height->getNumeral() / $width->getNumeral() * 100;
         $sizer   = $document->createElement(Amp::SIZER_ELEMENT);
-        $sizer->setAttribute(Tag::STYLE, sprintf('display:block;padding-top:%1.4F%%;', $padding));
+        $style   = empty($style) ? 'display:block' : "display:block;{$style}";
+        $sizer->setAttribute(Tag::STYLE, sprintf($style, $padding));
 
         return $sizer;
     }
@@ -567,7 +655,7 @@ private function hasAncestorWithTag(DOMElement $element, $tagName)
      * not empty. The validator ensures that the script/json is parsable but since transformers may be used outside of
      * validation it is checked here as well.
      *
-     * @param DOMElement $element Element to check,
+     * @param DOMElement $element Element to check.
      * @return bool Whether the amp-experiment element is actually used.
      */
     private function isAmpExperimentUsed(DOMElement $element)
@@ -620,4 +708,274 @@ private function isAmpExperimentUsed(DOMElement $element)
         // Otherwise, used.
         return true;
     }
+
+    /**
+     * Adapt blocking attributes so that they allow for boilerplate removal.
+     *
+     * Blocking attributes that need special attention are `sizes`, `heights` and `media`.
+     *
+     * @see https://github.com/ampproject/amp-wp/issues/4439
+     *
+     * @param Document        $document   DOM document to apply the transformations to.
+     * @param DOMElement      $ampElement Element to adapt.
+     * @param ErrorCollection $errors     Collection of errors that are collected during transformation.
+     * @return string[]|false Attribute names to remove, or false if attributes could not be adapted.
+     */
+    private function adaptBlockingAttributes(Document $document, DOMElement $ampElement, ErrorCollection $errors)
+    {
+        $attributes = $ampElement->attributes;
+
+        if ($attributes === null) {
+            return [];
+        }
+
+        $customCss          = '';
+        $attributesToRemove = [];
+
+        foreach ($attributes as $attribute) {
+            /**
+             * Attribute to check.
+             *
+             * @var DOMAttr $attribute
+             */
+            $normalizedAttributeName = strtolower($attribute->name);
+
+            try {
+                switch ($normalizedAttributeName) {
+                    case Attribute::SIZES:
+                        if ($ampElement->hasAttribute(Attribute::DISABLE_INLINE_WIDTH)) {
+                            // Don't remove sizes when disable-inline-width is set.
+                            // @see https://github.com/ampproject/amphtml/pull/27083
+                            break;
+                        }
+
+                        $customCss           .= $this->extractSizesAttributeCss($document, $ampElement, $attribute);
+                        $attributesToRemove[] = $attribute->name;
+                        break;
+
+                    case Attribute::HEIGHTS:
+                        $customCss           .= $this->extractHeightsAttributeCss($document, $ampElement, $attribute);
+                        $attributesToRemove[] = $attribute->name;
+                        break;
+
+                    case Attribute::MEDIA:
+                        $customCss           .= $this->extractMediaAttributeCss($document, $ampElement, $attribute);
+                        $attributesToRemove[] = $attribute->name;
+                        break;
+                }
+            } catch (Exception $exception) {
+                $errors->add(Error\CannotRemoveBoilerplate::fromAttributeThrowingException($exception));
+                return false;
+            }
+        }
+
+        if (!empty($customCss) && ! $this->addCustomCss($document, $customCss)) {
+            $errors->add(Error\CannotRemoveBoilerplate::fromAttributesRequiringBoilerplate($ampElement));
+            return false;
+        }
+
+        return $attributesToRemove;
+    }
+
+    /**
+     * Add custom CSS styling to the document.
+     *
+     * @param Document $document  Document to add the custom CSS styling to.
+     * @param string   $customCss Custom CSS styling to add.
+     * @return bool Whether adding the custom CSS styling to the document succeeded.
+     */
+    private function addCustomCss(Document $document, $customCss)
+    {
+        $additionalBytes = strlen($customCss);
+
+        if (($this->ampCustomCssByteCount + $additionalBytes) > self::MAX_CSS_BYTE_COUNT) {
+            return false;
+        }
+
+        if (empty($this->ampCustomStyleElement)) {
+            $ampCustomStyleElement = $document->xpath->query(self::STYLE_AMP_CUSTOM_XPATH, $document->head)->item(0);
+            if ($ampCustomStyleElement instanceof DOMElement) {
+                $this->ampCustomStyleElement = $ampCustomStyleElement;
+                $this->ampCustomCssByteCount = (new CssByteCountCalculator($document))->calculate();
+                if (($this->ampCustomCssByteCount + $additionalBytes) > self::MAX_CSS_BYTE_COUNT) {
+                    return false;
+                }
+            } else {
+                $ampCustomStyleElement = $document->createElement(Tag::STYLE);
+                $ampCustomStyleElement->setAttribute(Attribute::AMP_CUSTOM, null);
+                $this->ampCustomStyleElement = $ampCustomStyleElement;
+                $document->head->appendChild($this->ampCustomStyleElement);
+            }
+        }
+
+        // Inject new styles before any source map annotation comment if it exists, like: /*# sourceURL=amp-custom.css */
+        // If not present, then just put it at the end of the stylesheet. This isn't strictly required, but putting the
+        // source map comments at the end is the convention.
+        $this->ampCustomStyleElement->textContent = preg_replace(
+            ':(?=\s+/\*#[^*]+?\*/\s*$|$):s',
+            $customCss,
+            $this->ampCustomStyleElement->textContent,
+            1
+        );
+
+        $this->ampCustomCssByteCount += strlen($customCss);
+
+        return true;
+    }
+
+    /**
+     * Extract the custom CSS styling from a 'sizes' attribute.
+     *
+     * __sizes__
+     * "One or more strings separated by commas, indicating a set of source sizes. Each source size consists of:
+     * - A media condition. This must be omitted for the last item in the list.
+     * - A source size value."
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
+     *
+     * @param Document   $document  Document containing the element to adapt.
+     * @param DOMElement $element   Element to adapt.
+     * @param DOMAttr    $attribute Attribute to be extracted.
+     * @return string Extract custom CSS styling.
+     */
+    private function extractSizesAttributeCss(Document $document, DOMElement $element, DOMAttr $attribute)
+    {
+        if (!$element->hasAttribute(Attribute::SRCSET) || empty($element->getAttribute(Attribute::SRCSET))) {
+            // According to the Mozilla docs, a sizes attribute without a valid srcset attribute should have no effect.
+            // Therefore, it should simply be stripped, without producing media queries.
+            // @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
+            return '';
+        }
+
+        return $this->extractAttributeCss(
+            $document,
+            $element,
+            $attribute,
+            '#__ID__{width:%s}',
+            '@media %s{#__ID__{width:%s}}'
+        );
+    }
+
+    /**
+     * Extract the custom CSS styling from a 'heights' attribute.
+     *
+     * __heights__ (AMP-specific)
+     * "The value of this attribute is a sizes expression based on media expressions, similar to the sizes attribute on
+     * img tags but with two key differences:
+     * - The value applies to the height, not the width of the element.
+     * - Percent values are allowed. A percent value indicates the percent of the element's width. For example, a value
+     *   of 80% indicates that the height of the element will be 80% of the element's width."
+     *
+     * @see https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes/#heights
+     *
+     * @param Document   $document  Document containing the element to adapt.
+     * @param DOMElement $element   Element to adapt.
+     * @param DOMAttr    $attribute Attribute to be extracted.
+     * @return string Extract custom CSS styling.
+     */
+    private function extractHeightsAttributeCss(Document $document, DOMElement $element, DOMAttr $attribute)
+    {
+        $this->customSizerStyles[$document->getElementId($element)] = '';
+
+        return $this->extractAttributeCss(
+            $document,
+            $element,
+            $attribute,
+            '#__ID__>:first-child{padding-top:%s}',
+            '@media %s{#__ID__>:first-child{padding-top:%s}}'
+        );
+    }
+
+    /**
+     * Extract the custom CSS styling from an attribute and turn into a templated CSS style string.
+     *
+     * @param Document   $document        Document containing the element to adapt.
+     * @param DOMElement $element         Element to adapt.
+     * @param DOMAttr    $attribute       Attribute to be extracted.
+     * @param string     $mainStyle       CSS template for the main style.
+     * @param string     $mediaQueryStyle CSS template for a media query style.
+     * @return string Extract custom CSS styling.
+     */
+    private function extractAttributeCss(Document $document, DOMElement $element, DOMAttr $attribute, $mainStyle, $mediaQueryStyle)
+    {
+        if (empty($attribute->nodeValue)) {
+            return '';
+        }
+
+        $sourceSizes = explode(',', $attribute->nodeValue);
+        $lastItem    = trim(array_pop($sourceSizes), self::CSS_TRIM_CHARACTERS);
+
+        if (empty($lastItem)) {
+            throw InvalidHtmlAttribute::fromAttribute($attribute->nodeName, $element);
+        }
+
+        $customCss = sprintf($mainStyle, $lastItem);
+
+        foreach ($sourceSizes as $sourceSize) {
+            $matches = [];
+            if (preg_match(self::CSS_DIMENSION_WITH_MEDIA_CONDITION_REGEX_PATTERN, $sourceSize, $matches)) {
+                $mediaCondition = trim($matches['media_condition'], self::CSS_TRIM_CHARACTERS);
+
+                if (empty($mediaCondition)) {
+                    throw InvalidHtmlAttribute::fromAttribute($attribute->nodeName, $element);
+                }
+
+                $dimension = trim($matches['dimension'], self::CSS_TRIM_CHARACTERS);
+
+                if (empty($dimension)) {
+                    throw InvalidHtmlAttribute::fromAttribute($attribute->nodeName, $element);
+                }
+
+                $customCss .= sprintf($mediaQueryStyle, $mediaCondition, $dimension);
+            }
+        }
+
+        $elementId = $document->getElementId($element);
+        $customCss = str_replace('__ID__', $elementId, $customCss);
+
+        return $customCss;
+    }
+
+    /**
+     * Extract the custom CSS styling from a 'media' attribute.
+     *
+     * __media__
+     * "The value of media is a media query. If the query does not match, the element is not rendered and its resources
+     * and potentially its child resources will not be fetched. If the browser window changes size or orientation, the
+     * media queries are re-evaluated and elements are hidden and shown based on the new results."
+     *
+     * @param Document   $document  Document containing the element to adapt.
+     * @param DOMElement $element   Element to adapt.
+     * @param DOMAttr    $attribute Attribute to be extracted.
+     * @return string Extract custom CSS styling.
+     */
+    private function extractMediaAttributeCss(Document $document, DOMElement $element, DOMAttr $attribute)
+    {
+        $attributeValue = trim($attribute->nodeValue, self::CSS_TRIM_CHARACTERS);
+
+        if (empty($attributeValue)) {
+            return '';
+        }
+
+        if ($attributeValue[0] === '(') {
+            $attributeValue = 'all and ' . $attributeValue;
+        }
+
+        return sprintf(
+            '@media not %s{#%s{display:none}}',
+            $attributeValue,
+            $document->getElementId($element)
+        );
+    }
+
+    /**
+     * Check whether a given element should be excluded from applying its layout on the server.
+     *
+     * @param DOMElement $element Element to check.
+     * @return bool Whether to exclude the element or not.
+     */
+    private function isExcludedElement(DOMElement $element)
+    {
+        return in_array($element->tagName, self::EXCLUDED_ELEMENTS, true);
+    }
 }
diff --git a/lib/optimizer/tests/SpecTest.php b/lib/optimizer/tests/SpecTest.php
index 8d417ea6078..453b103fcee 100644
--- a/lib/optimizer/tests/SpecTest.php
+++ b/lib/optimizer/tests/SpecTest.php
@@ -30,6 +30,9 @@ final class SpecTest extends TestCase
         'ReorderHead - reorders_head_a4a'                => 'see https://github.com/ampproject/amp-toolbox/issues/583',
         'ReorderHead - reorders_head_amphtml'            => 'see https://github.com/ampproject/amp-toolbox/issues/583',
         'ReorderHead - preserves_amp_custom_style_order' => 'see https://github.com/ampproject/amp-toolbox/issues/604',
+
+        'ServerSideRendering - noscript_then_boilerplate_not_removed_due_to_attribute' => 'see https://github.com/ampproject/amp-wp/issues/4439',
+        'ServerSideRendering - boilerplate_then_noscript_not_removed_due_to_attribute' => 'see https://github.com/ampproject/amp-wp/issues/4439',
     ];
 
     const CLASS_SKIP_TEST = '__SKIP__';
diff --git a/lib/optimizer/tests/Transformer/ServerSideRenderingTest.php b/lib/optimizer/tests/Transformer/ServerSideRenderingTest.php
index 8410bf02703..0f6f816b563 100644
--- a/lib/optimizer/tests/Transformer/ServerSideRenderingTest.php
+++ b/lib/optimizer/tests/Transformer/ServerSideRenderingTest.php
@@ -5,6 +5,7 @@
 use AmpProject\Dom\Document;
 use AmpProject\Optimizer\Error;
 use AmpProject\Optimizer\ErrorCollection;
+use AmpProject\Optimizer\Exception\InvalidHtmlAttribute;
 use AmpProject\Optimizer\Tests\ErrorComparison;
 use AmpProject\Optimizer\Tests\MarkupComparison;
 use AmpProject\Optimizer\Tests\TestMarkup;
@@ -30,8 +31,8 @@ public function dataTransform()
         $input = static function ($body, $extraHead = '') {
             return TestMarkup::DOCTYPE . '<html ⚡><head>'
                    . TestMarkup::META_CHARSET . TestMarkup::META_VIEWPORT . TestMarkup::SCRIPT_AMPRUNTIME
-                   . $extraHead
                    . TestMarkup::LINK_FAVICON . TestMarkup::LINK_CANONICAL . TestMarkup::STYLE_AMPBOILERPLATE . TestMarkup::NOSCRIPT_AMPBOILERPLATE
+                   . $extraHead
                    . '</head><body>'
                    . $body
                    . '</body></html>';
@@ -40,8 +41,8 @@ public function dataTransform()
         $expectWithoutBoilerplate = static function ($body, $extraHead = '') {
             return TestMarkup::DOCTYPE . '<html ⚡ i-amphtml-layout="" i-amphtml-no-boilerplate=""><head>'
                    . TestMarkup::STYLE_AMPRUNTIME . TestMarkup::META_CHARSET . TestMarkup::META_VIEWPORT . TestMarkup::SCRIPT_AMPRUNTIME
-                   . $extraHead
                    . TestMarkup::LINK_FAVICON . TestMarkup::LINK_CANONICAL
+                   . $extraHead
                    . '</head><body>'
                    . $body
                    . '</body></html>';
@@ -50,8 +51,8 @@ public function dataTransform()
         $expectWithBoilerplate = static function ($body, $extraHead = '') {
             return TestMarkup::DOCTYPE . '<html ⚡ i-amphtml-layout=""><head>'
                    . TestMarkup::STYLE_AMPRUNTIME . TestMarkup::META_CHARSET . TestMarkup::META_VIEWPORT . TestMarkup::SCRIPT_AMPRUNTIME
-                   . $extraHead
                    . TestMarkup::LINK_FAVICON . TestMarkup::LINK_CANONICAL . TestMarkup::STYLE_AMPBOILERPLATE . TestMarkup::NOSCRIPT_AMPBOILERPLATE
+                   . $extraHead
                    . '</head><body>'
                    . $body
                    . '</body></html>';
@@ -123,43 +124,149 @@ public function dataTransform()
             'amp-audio' => [
                 $input('<amp-audio></amp-audio>'),
                 $expectWithBoilerplate('<amp-audio></amp-audio>'),
-                [Error\CannotRemoveBoilerplate::class],
+                [
+                    Error\CannotRemoveBoilerplate::fromAmpAudio(
+                        Document::fromHtmlFragment(
+                            '<amp-audio></amp-audio>'
+                        )->body->firstChild
+                    ),
+                ],
             ],
 
             'amp-experiment is non-empty' => [
                 $input('<amp-experiment><script type="application/json">{ "exp": { "variants": { "a": 25, "b": 25 } } }</script></amp-experiment>'),
                 $expectWithBoilerplate('<amp-experiment class="i-amphtml-layout-container" i-amphtml-layout="container"><script type="application/json">{ "exp": { "variants": { "a": 25, "b": 25 } } }</script></amp-experiment>'),
-                [Error\CannotRemoveBoilerplate::class],
+                [
+                    Error\CannotRemoveBoilerplate::fromAmpExperiment(
+                        Document::fromHtmlFragment(
+                            '<amp-experiment><script type="application/json">{ "exp": { "variants": { "a": 25, "b": 25 } } }</script></amp-experiment>'
+                        )->body->firstChild
+                    ),
+                ],
             ],
 
             'amp-story' => [
                 $input('', TestMarkup::SCRIPT_AMPSTORY),
                 $expectWithBoilerplate('', TestMarkup::SCRIPT_AMPSTORY),
-                [Error\CannotRemoveBoilerplate::class],
+                [
+                    Error\CannotRemoveBoilerplate::fromRenderDelayingScript(
+                        Document::fromHtmlFragment(
+                            TestMarkup::SCRIPT_AMPSTORY
+                        )->head->firstChild
+                    ),
+                ],
             ],
 
             'amp-dynamic-css-classes' => [
                 $input('', TestMarkup::SCRIPT_AMPDYNAMIC_CSSCLASSES),
                 $expectWithBoilerplate('', TestMarkup::SCRIPT_AMPDYNAMIC_CSSCLASSES),
-                [Error\CannotRemoveBoilerplate::class],
+                [
+                    Error\CannotRemoveBoilerplate::fromRenderDelayingScript(
+                        Document::fromHtmlFragment(
+                            TestMarkup::SCRIPT_AMPDYNAMIC_CSSCLASSES
+                        )->head->firstChild
+                    ),
+                ],
             ],
 
-            'heights attribute' => [
-                $input('<amp-img height="256" heights="(min-width:500px) 200px, 80%" layout="responsive" width="320"></amp-img>'),
-                $expectWithBoilerplate('<amp-img height="256" heights="(min-width:500px) 200px, 80%" layout="responsive" width="320" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer style="display:block;padding-top:80.0000%;"></i-amphtml-sizer></amp-img>'),
-                [Error\CannotRemoveBoilerplate::class],
+            'sizes attribute without amp-custom' => [
+                $input('<amp-img height="300" layout="responsive" srcset="https://acme.org/image1.png 320w, https://acme.org/image2.png 640w, https://acme.org/image3.png 1280w" sizes="(min-width: 320px) 320px, 100vw" src="https://acme.org/image1.png" width="400"></amp-img>'),
+                $expectWithoutBoilerplate(
+                    '<amp-img height="300" layout="responsive" srcset="https://acme.org/image1.png 320w, https://acme.org/image2.png 640w, https://acme.org/image3.png 1280w" src="https://acme.org/image1.png" width="400" id="i-amp-id" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer style="display:block;padding-top:75.0000%;"></i-amphtml-sizer></amp-img>',
+                    '<style amp-custom>#i-amp-id{width:100vw}@media (min-width: 320px){#i-amp-id{width:320px}}</style>'
+                ),
+                [],
             ],
 
-            'media attribute' => [
-                $input('<amp-img height="355" layout="fixed" media="(min-width: 650px) and handheld" src="wide.jpg" width="466"></amp-img>'),
-                $expectWithBoilerplate('<amp-img height="355" layout="fixed" media="(min-width: 650px) and handheld" src="wide.jpg" width="466" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:466px;height:355px;" i-amphtml-layout="fixed"></amp-img>'),
-                [Error\CannotRemoveBoilerplate::class],
+            'sizes attribute with amp-custom' => [
+                $input(
+                    '<amp-img height="300" layout="responsive" srcset="https://acme.org/image1.png 320w, https://acme.org/image2.png 640w, https://acme.org/image3.png 1280w" sizes="(min-width: 320px) 320px, 100vw" src="https://acme.org/image1.png" width="400"></amp-img>',
+                    '<style amp-custom>body h1{color:red;}</style>'
+                ),
+                $expectWithoutBoilerplate(
+                    '<amp-img height="300" layout="responsive" srcset="https://acme.org/image1.png 320w, https://acme.org/image2.png 640w, https://acme.org/image3.png 1280w" src="https://acme.org/image1.png" width="400" id="i-amp-id" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer style="display:block;padding-top:75.0000%;"></i-amphtml-sizer></amp-img>',
+                    '<style amp-custom>body h1{color:red;}#i-amp-id{width:100vw}@media (min-width: 320px){#i-amp-id{width:320px}}</style>'
+                ),
+                [],
             ],
 
-            'sizes attribute' => [
+            // According to the Mozilla docs, a sizes attribute without a valid srcset attribute should have no effect.
+            // Therefore, it should simply be stripped, without producing media queries.
+            // @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
+            'sizes attribute without srcset' => [
                 $input('<amp-img height="300" layout="responsive" sizes="(min-width: 320px) 320px, 100vw" src="https://acme.org/image1.png" width="400"></amp-img>'),
-                $expectWithBoilerplate('<amp-img height="300" layout="responsive" sizes="(min-width: 320px) 320px, 100vw" src="https://acme.org/image1.png" width="400" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer style="display:block;padding-top:75.0000%;"></i-amphtml-sizer></amp-img>'),
-                [Error\CannotRemoveBoilerplate::class],
+                $expectWithoutBoilerplate(
+                    '<amp-img height="300" layout="responsive" src="https://acme.org/image1.png" width="400" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer style="display:block;padding-top:75.0000%;"></i-amphtml-sizer></amp-img>'
+                ),
+                [],
+            ],
+
+            'sizes attribute empty srcset' => [
+                $input('<amp-img height="300" layout="responsive" srcset="" sizes="(min-width: 320px) 320px, 100vw" src="https://acme.org/image1.png" width="400"></amp-img>'),
+                $expectWithoutBoilerplate(
+                    '<amp-img height="300" layout="responsive" srcset="" src="https://acme.org/image1.png" width="400" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer style="display:block;padding-top:75.0000%;"></i-amphtml-sizer></amp-img>'
+                ),
+                [],
+            ],
+
+            'sizes attribute with disable-inline-width' => [
+                $input('<amp-img height="300" layout="responsive" srcset="https://acme.org/image1.png 320w, https://acme.org/image2.png 640w, https://acme.org/image3.png 1280w" sizes="(min-width: 320px) 320px, 100vw" src="https://acme.org/image1.png" width="400" disable-inline-width></amp-img>'),
+                $expectWithoutBoilerplate(
+                    '<amp-img height="300" layout="responsive" srcset="https://acme.org/image1.png 320w, https://acme.org/image2.png 640w, https://acme.org/image3.png 1280w" sizes="(min-width: 320px) 320px, 100vw" src="https://acme.org/image1.png" width="400" disable-inline-width class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer style="display:block;padding-top:75.0000%;"></i-amphtml-sizer></amp-img>'
+                ),
+                [],
+            ],
+
+            'bad sizes attribute' => [
+                $input('<amp-img height="300" layout="responsive" srcset="https://acme.org/image1.png 320w, https://acme.org/image2.png 640w, https://acme.org/image3.png 1280w" sizes=",,," src="https://acme.org/image1.png" width="400"></amp-img>'),
+                $expectWithBoilerplate('<amp-img height="300" layout="responsive" srcset="https://acme.org/image1.png 320w, https://acme.org/image2.png 640w, https://acme.org/image3.png 1280w" sizes=",,,"  src="https://acme.org/image1.png" width="400"></amp-img>'),
+                [
+                    Error\CannotRemoveBoilerplate::fromAttributeThrowingException(
+                        InvalidHtmlAttribute::fromAttribute(
+                            'sizes',
+                            Document::fromHtmlFragment(
+                                '<amp-img height="300" layout="responsive" srcset="https://acme.org/image1.png 320w, https://acme.org/image2.png 640w, https://acme.org/image3.png 1280w" sizes=",,," src="https://acme.org/image1.png" width="400"></amp-img>'
+                            )->body->firstChild
+                        )
+                    ),
+                ],
+            ],
+
+            'heights attribute without amp-custom' => [
+                $input('<amp-img height="256" heights="(min-width: 500px) 200px, 80%" layout="responsive" width="320"></amp-img>'),
+                $expectWithoutBoilerplate(
+                    '<amp-img height="256" layout="responsive" width="320" id="i-amp-id" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer style="display:block"></i-amphtml-sizer></amp-img>',
+                    '<style amp-custom>#i-amp-id>:first-child{padding-top:80%}@media (min-width: 500px){#i-amp-id>:first-child{padding-top:200px}}</style>'
+                ),
+                [],
+            ],
+
+            'heights attribute with amp-custom' => [
+                $input(
+                    '<amp-img height="256" heights="(min-width: 500px) 200px, 80%" layout="responsive" width="320"></amp-img>',
+                    '<style amp-custom>body h1{color:red;}</style>'
+                ),
+                $expectWithoutBoilerplate(
+                    '<amp-img height="256" layout="responsive" width="320" id="i-amp-id" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer style="display:block"></i-amphtml-sizer></amp-img>',
+                    '<style amp-custom>body h1{color:red;}#i-amp-id>:first-child{padding-top:80%}@media (min-width: 500px){#i-amp-id>:first-child{padding-top:200px}}</style>'
+                ),
+                [],
+            ],
+
+            'bad heights attribute' => [
+                $input('<amp-img height="256" heights=",,," layout="responsive" width="320"></amp-img>'),
+                // This adds an ID as it stores the CSS to inline before the actual error is detected.
+                $expectWithBoilerplate('<amp-img height="256" heights=",,," layout="responsive" width="320" id="i-amp-id"></amp-img>'),
+                [
+                    Error\CannotRemoveBoilerplate::fromAttributeThrowingException(
+                        InvalidHtmlAttribute::fromAttribute(
+                            'heights',
+                            Document::fromHtmlFragment(
+                                '<amp-img height="256" heights=",,," layout="responsive" width="320"></amp-img>'
+                            )->body->firstChild
+                        )
+                    ),
+                ],
             ],
 
             // @todo Remove floor when ampproject/amphtml#27528 is resolved.
@@ -173,6 +280,36 @@ public function dataTransform()
                 $input('<amp-img src="https://blog.amp.dev/wp-content/uploads/2020/03/AMP_camp_Blog.png" alt="" height="100.6" width="200.8" layout="intrinsic"></amp-img>'),
                 $expectWithoutBoilerplate('<amp-img src="https://blog.amp.dev/wp-content/uploads/2020/03/AMP_camp_Blog.png" alt="" height="100.6" width="200.8" layout="intrinsic" class="i-amphtml-layout-intrinsic i-amphtml-layout-size-defined" i-amphtml-layout="intrinsic"><i-amphtml-sizer class="i-amphtml-sizer"><img alt="" aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;charset=utf-8,<svg height=&quot;100&quot; width=&quot;200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot;/>"></i-amphtml-sizer></amp-img>'),
             ],
+
+            'media attribute without amp-custom' => [
+                $input('<amp-img height="355" layout="fixed" media="(min-width: 650px)" src="wide.jpg" width="466"></amp-img>'),
+                $expectWithoutBoilerplate(
+                    '<amp-img height="355" layout="fixed" src="wide.jpg" width="466" id="i-amp-id" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:466px;height:355px;" i-amphtml-layout="fixed"></amp-img>',
+                    '<style amp-custom>@media not all and (min-width: 650px){#i-amp-id{display:none}}</style>'
+                ),
+                [],
+            ],
+
+            'media attribute with amp-custom' => [
+                $input(
+                    '<amp-img height="355" layout="fixed" media="(min-width: 650px)" src="wide.jpg" width="466"></amp-img>',
+                    '<style amp-custom>body h1{color:red;}</style>'
+                ),
+                $expectWithoutBoilerplate(
+                    '<amp-img height="355" layout="fixed" src="wide.jpg" width="466" id="i-amp-id" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:466px;height:355px;" i-amphtml-layout="fixed"></amp-img>',
+                    '<style amp-custom>body h1{color:red;}@media not all and (min-width: 650px){#i-amp-id{display:none}}</style>'
+                ),
+                [],
+            ],
+
+            'media attribute with type condition' => [
+                $input('<amp-img height="355" layout="fixed" media="screen and (min-width: 650px)" src="wide.jpg" width="466"></amp-img>'),
+                $expectWithoutBoilerplate(
+                    '<amp-img height="355" layout="fixed" src="wide.jpg" width="466" id="i-amp-id" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:466px;height:355px;" i-amphtml-layout="fixed"></amp-img>',
+                    '<style amp-custom>@media not screen and (min-width: 650px){#i-amp-id{display:none}}</style>'
+                ),
+                [],
+            ],
         ];
     }
 
@@ -194,7 +331,7 @@ public function testTransform($source, $expectedHtml, $expectedErrors = [])
 
         $transformer->transform($document, $errors);
 
-        $this->assertEqualMarkup($expectedHtml, $document->saveHTML());
+        $this->assertSimilarMarkup($expectedHtml, $document->saveHTML());
         $this->assertSameErrors($expectedErrors, $errors);
     }
 }
diff --git a/tests/php/test-class-amp-dom-utils.php b/tests/php/test-class-amp-dom-utils.php
index ca57c58d1cc..d6d3ff74aa8 100644
--- a/tests/php/test-class-amp-dom-utils.php
+++ b/tests/php/test-class-amp-dom-utils.php
@@ -349,29 +349,58 @@ public function test_has_class( DOMElement $element, $class, $expected ) {
 	}
 
 	public function get_get_element_id_data() {
-		$dom = new Document();
+		$element_factory = static function ( $dom, $id = null ) {
+			$element = $dom->createElement( 'div' );
+
+			if ( $id ) {
+				$element->setAttribute( 'id', $id );
+			}
 
-		$same_element = AMP_DOM_Utils::create_node( $dom, 'div', [] );
+			$dom->body->appendChild( $element );
+
+			return $element;
+		};
 
 		return [
-			// Element with existing ID
-			[ AMP_DOM_Utils::create_node( $dom, 'div', [ 'id' => 'my-id' ] ), 'some-prefix', 'my-id' ],
-			// Element without ID
-			[ AMP_DOM_Utils::create_node( $dom, 'div', [] ), 'some-prefix', 'some-prefix' ],
-			// Another element without ID with same prefix
-			[ AMP_DOM_Utils::create_node( $dom, 'div', [] ), 'some-prefix', 'some-prefix-2' ],
-			// Another element without ID with different prefix
-			[ AMP_DOM_Utils::create_node( $dom, 'div', [] ), 'other-prefix', 'other-prefix' ],
-			// Another element without ID with different prefix again
-			[ AMP_DOM_Utils::create_node( $dom, 'div', [] ), 'other-prefix', 'other-prefix-2' ],
-			// Another element without ID with first prefix again
-			[ AMP_DOM_Utils::create_node( $dom, 'div', [] ), 'some-prefix', 'some-prefix-3' ],
-			// Element with existing prefix again
-			[ AMP_DOM_Utils::create_node( $dom, 'div', [ 'id' => 'another-id' ] ), 'some-prefix', 'another-id' ],
-			// Same element first time
-			[ $same_element, 'some-prefix', 'some-prefix-4' ],
-			// Same element second time
-			[ $same_element, 'some-prefix', 'some-prefix-4' ],
+			'single check with existing ID'         => [
+				[
+					[ $element_factory, 'my-id', 'some-prefix', 'my-id' ],
+				],
+			],
+
+			'single check without existing ID'      => [
+				[
+					[ $element_factory, null, 'some-prefix', 'some-prefix' ],
+				],
+			],
+
+			'consecutive checks count upwards'      => [
+				[
+					[ $element_factory, null, 'some-prefix', 'some-prefix' ],
+					[ $element_factory, null, 'some-prefix', 'some-prefix-2' ],
+				],
+			],
+
+			'consecutive checks for same element return same ID' => [
+				[
+					[ $element_factory, null, 'some-prefix', 'some-prefix' ],
+					[ null, null, 'some-prefix', 'some-prefix' ],
+				],
+			],
+
+			'mixing prefixes keeps counts separate' => [
+				[
+					[ $element_factory, 'my-id', 'some-prefix', 'my-id' ],
+					[ $element_factory, null, 'some-prefix', 'some-prefix' ],
+					[ $element_factory, null, 'some-prefix', 'some-prefix-2' ],
+					[ $element_factory, null, 'other-prefix', 'other-prefix' ],
+					[ $element_factory, null, 'other-prefix', 'other-prefix-2' ],
+					[ $element_factory, null, 'some-prefix', 'some-prefix-3' ],
+					[ $element_factory, 'another-id', 'some-prefix', 'another-id' ],
+					[ $element_factory, null, 'some-prefix', 'some-prefix-4' ],
+					[ null, null, 'some-prefix', 'some-prefix-4' ],
+				],
+			],
 		];
 	}
 
@@ -381,13 +410,21 @@ public function get_get_element_id_data() {
 	 * @dataProvider get_get_element_id_data
 	 * @covers \AMP_DOM_Utils::get_element_id()
 	 *
-	 * @param DOMElement $element  Element.
-	 * @param string     $prefix   Prefix.
-	 * @param string     $expected Expected element ID.
+	 * @expectedDeprecated AMP_DOM_Utils::get_element_id
+	 *
+	 * @param array $checks Checks to perform. Each check is an array containing an element, a prefix and an expected ID.
 	 */
-	public function test_get_element_id( DOMElement $element, $prefix, $expected ) {
-		$actual = AMP_DOM_Utils::get_element_id( $element, $prefix );
-		$this->assertEquals( $expected, $actual );
+	public function test_get_element_id( $checks ) {
+		$dom = new Document();
+		foreach ( $checks as list( $element_factory, $id, $prefix, $expected ) ) {
+			// If no element factory was passed, just reuse the previous element.
+			if ( $element_factory ) {
+				$element = $element_factory( $dom, $id );
+			}
+
+			$actual = AMP_DOM_Utils::get_element_id( $element, $prefix );
+			$this->assertEquals( $expected, $actual );
+		}
 	}
 
 	public function get_add_amp_action_data() {