ampproject / amp-toolbox-php Goto Github PK

• Add preconnect link tag for Google fonts resources
• Add preconnect link tag to the publisher's own origin
• Preload images
• Preload AMP runtime script
• Prune duplicate resource hints

I encountered an problem in optimizeHtml while in an de_DE.UTF-8 environment.
The i-amphtml-sizer's padding-top is set with comma instead of dot leading to non-rendered images.

please consiger using
$paddingString = (string) number_format($padding, 4, '.');
instead of
$paddingString = (string) round($padding, 4);
in ServerSideRendering::createResponsiveSizer

The following scenarios should be tested to evaluate improved lazy-loading behavior with regards to optimizing hero images:

1. Remove lazy-loading not only for images marked with data-hero, but also those marked with data-hero-candidate. See #141 (comment)
2. For images not marked with data-hero, check if there is a noscript > img to copy an existing loading attribute from. See https://github.com/ampproject/amp-toolbox-php/pull/141/files#r611001917

Hi there,

the optimizer does not seem to respect the XML Namespace. As SVG is XML, and thus case sensitive (opposed to HTML, which is case insensitive), the SVG viewBox attribute gets lowercased by the amp-optimizer. Browsers seem to ignore the problem, so this is more a nitpick.

See the viewBox attribute here:

Before:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 137.7 25.1"><path d="M41 7.7l-1.2 2a4.4 4.4 0 0 0-3-.9 4 4 0 0 0-3.2 1.5 5.5 5.5 0 0 0-1.3 3.7 5.2 5.2 0 0 0 1.2 3.5 4 4 0 0 0 3 1.3 4.3 4.3 0 0 0 3.5-1.4l1.3 2a7 7 0 0 1-5 1.6 6.7 6.7 0 0 1-5-1.9 7.3 7.3 0 0 1-1.9-5.2 7.1 7.1 0 0 1 2-5.2 6.8 6.8 0 0 1 5.2-2 8.3 8.3 0 0 1 4.3 1m11.7 13.1v-6.2h-6.2v6.2h-2.8V6.9h2.8v5.5h6.2V6.9h2.7v13.9m6-11.7v3.2h5v2.1h-5v4.3h7v2.2h-9.8v-14h9.9v2.2m5.3 0v3.2h5.5v2.2h-5.5v6.3H71V6.9h10.3v2.2m11.3 11.7l-4.4-6-1.7 2.2v3.8h-2.8V6.9h2.8v6.7l5.3-6.7H95l-5 6 6 7.9m.5-7a7.3 7.3 0 0 1 1.8-5 6.2 6.2 0 0 1 4.9-2.1 6.8 6.8 0 0 1 5.1 1.8 7.2 7.2 0 0 1 1.8 5.2 7.5 7.5 0 0 1-1.8 5.4 7 7 0 0 1-5.3 2 6 6 0 0 1-4.8-2 8 8 0 0 1-1.7-5.4m2.9 0a6.5 6.5 0 0 0 .9 3.8 3 3 0 0 0 2.7 1.4 3.9 3.9 0 0 0 3.2-1.3 5.8 5.8 0 0 0 1-3.9q0-4.8-4-4.8a3.3 3.3 0 0 0-2.9 1.3 5.8 5.8 0 0 0-1 3.5m24-6l-1.1 2a4.4 4.4 0 0 0-3-.9 4 4 0 0 0-3.2 1.5 5.5 5.5 0 0 0-1.3 3.7 5.2 5.2 0 0 0 1.2 3.5 4 4 0 0 0 3 1.3 4.3 4.3 0 0 0 3.5-1.4l1.3 2a7 7 0 0 1-5 1.6 6.7 6.7 0 0 1-5-1.9 7.3 7.3 0 0 1-1.9-5.2 7.1 7.1 0 0 1 2-5.2 6.9 6.9 0 0 1 5.2-2 8.2 8.2 0 0 1 4.3 1M135 20.8v-6.2h-6.3v6.2H126V6.9h2.7v5.5h6.3V6.9h2.7v13.9"/><path fill="#618f30" d="M18.8 1.5l-1.3-.4C13-.3 13-.3 7.8.7l-1 .2C4.6.6 2.3.5.3 1.8a.7.7 0 0 0-.3.7l1.2 18.4v3.5a.7.7 0 0 0 .7.7h15.4a.7.7 0 0 0 .7-.7v-3.5l1.4-18.6a.7.7 0 0 0-.6-.8zm-2 21.3a.9.9 0 0 1-1 .9H3.7a.9.9 0 0 1-1-.9v-1.1a.9.9 0 0 1 1-.9h12.3a.9.9 0 0 1 .9.9v1.1zm1.1-19.2l-1.1 15.2a.7.7 0 0 1-.7.7h-.6c-.3 0-.5-.1-.5-.4l1-14.9s0-.2-.2-.2h-.2a.3.3 0 0 0-.2.3l-1 14.9c0 .2-.2.3-.6.3h-1a.4.4 0 0 1-.3-.4L13 3.7a.2.2 0 0 0-.2-.3h-.2a.3.3 0 0 0-.2.3l-.6 15.5c0 .2-.3.3-.6.3h-.9a.4.4 0 0 1-.4-.4v-15a.2.2 0 0 0-.2-.3h-.2a.2.2 0 0 0-.2.3v15.1c0 .2-.2.3-.5.3h-.9c-.3 0-.5-.1-.6-.3L6.8 4.4a.3.3 0 0 0-.3-.2h-.2a.2.2 0 0 0-.2.2l.6 14.7c0 .3-.2.4-.4.4h-1c-.3 0-.5-.1-.5-.3l-1-15.4a.3.3 0 0 0-.3-.3h-.2c-.1 0-.2.1-.2.3l1 15.3a.4.4 0 0 1-.4.4h-.5a.7.7 0 0 1-.7-.7l-1-15a.7.7 0 0 1 .3-.7 7.6 7.6 0 0 1 5.5-.8l.8-.1c4.2-.9 4.4-.9 8.2.3l1 .3a.7.7 0 0 1 .6.8z"/></svg>

After optimization:

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 137.7 25.1"><path d="M41 7.7l-1.2 2a4.4 4.4 0 0 0-3-.9 4 4 0 0 0-3.2 1.5 5.5 5.5 0 0 0-1.3 3.7 5.2 5.2 0 0 0 1.2 3.5 4 4 0 0 0 3 1.3 4.3 4.3 0 0 0 3.5-1.4l1.3 2a7 7 0 0 1-5 1.6 6.7 6.7 0 0 1-5-1.9 7.3 7.3 0 0 1-1.9-5.2 7.1 7.1 0 0 1 2-5.2 6.8 6.8 0 0 1 5.2-2 8.3 8.3 0 0 1 4.3 1m11.7 13.1v-6.2h-6.2v6.2h-2.8V6.9h2.8v5.5h6.2V6.9h2.7v13.9m6-11.7v3.2h5v2.1h-5v4.3h7v2.2h-9.8v-14h9.9v2.2m5.3 0v3.2h5.5v2.2h-5.5v6.3H71V6.9h10.3v2.2m11.3 11.7l-4.4-6-1.7 2.2v3.8h-2.8V6.9h2.8v6.7l5.3-6.7H95l-5 6 6 7.9m.5-7a7.3 7.3 0 0 1 1.8-5 6.2 6.2 0 0 1 4.9-2.1 6.8 6.8 0 0 1 5.1 1.8 7.2 7.2 0 0 1 1.8 5.2 7.5 7.5 0 0 1-1.8 5.4 7 7 0 0 1-5.3 2 6 6 0 0 1-4.8-2 8 8 0 0 1-1.7-5.4m2.9 0a6.5 6.5 0 0 0 .9 3.8 3 3 0 0 0 2.7 1.4 3.9 3.9 0 0 0 3.2-1.3 5.8 5.8 0 0 0 1-3.9q0-4.8-4-4.8a3.3 3.3 0 0 0-2.9 1.3 5.8 5.8 0 0 0-1 3.5m24-6l-1.1 2a4.4 4.4 0 0 0-3-.9 4 4 0 0 0-3.2 1.5 5.5 5.5 0 0 0-1.3 3.7 5.2 5.2 0 0 0 1.2 3.5 4 4 0 0 0 3 1.3 4.3 4.3 0 0 0 3.5-1.4l1.3 2a7 7 0 0 1-5 1.6 6.7 6.7 0 0 1-5-1.9 7.3 7.3 0 0 1-1.9-5.2 7.1 7.1 0 0 1 2-5.2 6.9 6.9 0 0 1 5.2-2 8.2 8.2 0 0 1 4.3 1M135 20.8v-6.2h-6.3v6.2H126V6.9h2.7v5.5h6.3V6.9h2.7v13.9"></path><path fill="#618f30" d="M18.8 1.5l-1.3-.4C13-.3 13-.3 7.8.7l-1 .2C4.6.6 2.3.5.3 1.8a.7.7 0 0 0-.3.7l1.2 18.4v3.5a.7.7 0 0 0 .7.7h15.4a.7.7 0 0 0 .7-.7v-3.5l1.4-18.6a.7.7 0 0 0-.6-.8zm-2 21.3a.9.9 0 0 1-1 .9H3.7a.9.9 0 0 1-1-.9v-1.1a.9.9 0 0 1 1-.9h12.3a.9.9 0 0 1 .9.9v1.1zm1.1-19.2l-1.1 15.2a.7.7 0 0 1-.7.7h-.6c-.3 0-.5-.1-.5-.4l1-14.9s0-.2-.2-.2h-.2a.3.3 0 0 0-.2.3l-1 14.9c0 .2-.2.3-.6.3h-1a.4.4 0 0 1-.3-.4L13 3.7a.2.2 0 0 0-.2-.3h-.2a.3.3 0 0 0-.2.3l-.6 15.5c0 .2-.3.3-.6.3h-.9a.4.4 0 0 1-.4-.4v-15a.2.2 0 0 0-.2-.3h-.2a.2.2 0 0 0-.2.3v15.1c0 .2-.2.3-.5.3h-.9c-.3 0-.5-.1-.6-.3L6.8 4.4a.3.3 0 0 0-.3-.2h-.2a.2.2 0 0 0-.2.2l.6 14.7c0 .3-.2.4-.4.4h-1c-.3 0-.5-.1-.5-.3l-1-15.4a.3.3 0 0 0-.3-.3h-.2c-.1 0-.2.1-.2.3l1 15.3a.4.4 0 0 1-.4.4h-.5a.7.7 0 0 1-.7-.7l-1-15a.7.7 0 0 1 .3-.7 7.6 7.6 0 0 1 5.5-.8l.8-.1c4.2-.9 4.4-.9 8.2.3l1 .3a.7.7 0 0 1 .6.8z"></path></svg>

The w3c validator complains about the lowercased viewbox attribute when validated as SVG 1.1:

When pipes are being used in href attributes, like it is the case for Google Fonts links, then the DOMDocument seems to encode these pipes, making them ugly to read.

As an alternative to ampproject/amp-wp#2382 , we should generate an AmpCache class from the https://cdn.ampproject.org/caches.json that turn the JSON file into readily usable class constants in PHP code.

This can make use of the logic that is used by the validator spec code generation.

Hi all.

My colleagues and I are very interested in dedicate time to create a Symfony bundle for the easy integration and configuration of this library.
I'd like to know if someone is already on this or if there is someone interested.
@dritter I've seen you were using something already. Is it correct?

Marco

Feature description

The Common package (ampproject/common) is currently sitting at and enforcing level 4 of PHPStan static analysis.

There are 2 errors that need to be fixed so that we can raise the level to 5 and enforce this new quality level in Travis CI.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• PHPStan does not show any detected errors when run on level 5.

Implementation brief

• Change the level to 5 in the file phpstan.neon.dist.
• Run composer analyze.
• Fix detected errors until no more are found.

QA testing instructions

Demo

Changelog entry

I try to apply amp-toolbox for our website then facing this issue

The mustache templace contains "&" character in the href

Feature description

See ampproject/amp-toolbox#722.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

Add a new transformer BlurredPlaceholders that adds blurred placeholders into the HTML markup for images and video posters.

These placeholders are very lightweight inline representations of the images that are available as soon as the HTML was loaded and shown while the actual full-size images are being transferred.

Related ampproject/amp-wp#4213

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• All images and video posters have a lightweight inline placeholder representation directly in the HTML markup
• The inline placeholder is swapped out for the full-size image as soon as that has been fully transferred

Implementation brief

• See https://github.com/ampproject/amp-toolbox/blob/master/packages/optimizer/lib/transformers/AddBlurryImagePlaceholders.js

QA testing instructions

1. Verify: AMP optimization is enabled
2. Go to the AMP version of a page with many images below the fold
3. While scrolling new images into view which are being lazy-loaded, there will be an immediate display of a blurred version of the image until the full-size version was fully transferred and swapped in

Demo

Changelog entry

Feature description

Add logic to the existing Minify transformer so that it collapses and trims whitespace in body text nodes

Related ampproject/amp-wp#4213

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Generated HTML output from the Optimizer is minified
• The text nodes within <body> only contain the essential whitespace to maintain their displayed result

Implementation brief

QA testing instructions

Demo

Changelog entry

Is-state
On some sites of my website the placeholder shows:
<i-amphtml-sizer style="display:block;padding-top:20,4082%" slot="i-amphtml-svc"></i-amphtml-sizer>

Tobe-state
<i-amphtml-sizer style="display:block;padding-top:20.4082%" slot="i-amphtml-svc"></i-amphtml-sizer>

Rationale:
In Chrome the image will not rendered. The Console shows a error of the format and ignores the CSS rule. The high is set to 0.

Maybe:
The only different between site with comma instead of dot that I can find ist the header:
<html amp lang="nl" i-amphtml-layout="" i-amphtml-no-boilerplate="" transformed="self;v=1"> <--- with comma
<html amp lang="de" i-amphtml-layout="" i-amphtml-no-boilerplate="" transformed="self;v=1"> <--- with dot

Per ampproject/amp-toolbox#1146:

See ampproject/amphtml#22543 (comment).

Support adding <script amp-onerror>document.querySelector("script[src*='/v0.js']").onerror=function(){document.querySelector('style[amp-boilerplate]').textContent=''}</script> to the <head> in AMP Optimizer.

The Node.JS implementation deprecated PreloadHeroImages in favor of a new OptimizeHeroImages with more sophisticated configuration arguments.

The PHP version needs to be adapted in order to support these via the imported spec tests.

See ampproject/amp-toolbox#1133

To allow for proper testing of PHP 8 compatibility and reduce the current hassle of fetching a fixed PHPUnit version based on the PHP version, the following changes should be made:

• Switch from a globally installed PHPUnit version to one that is fetched via Composer and thus respects the platform requirements automatically
• Include https://github.com/Yoast/PHPUnit-Polyfills and write tests against the PHPUnit 9 API
• Remove custom test compact code like https://github.com/ampproject/amp-toolbox-php/blob/0.1.0/tests/src/AssertContainsCompatibility.php and switch to the polyfills provided by above library, to reduce some of the maintenance effort
• Add PHP 8 to the testing matrix
• (?>Fix PHP 8 booboos)+

I'm getting the following error in one of our client projects:

Amp render failure: Cannot inline the amp-runtime CSS in unspecified version into <style amp-runtime="">: ErrorException: curl_errno(): supplied resource is not a valid cURL handle resource in /vendor/ampproject/amp-toolbox/src/RemoteRequest/CurlRemoteGetRequest.php:136

Should be solved by this #128

🙂

If the viewport tag does not contain any scale and only has width=device-width, double-tap to zoom is disable, which means the browser does not need to add an artificial delay of 300ms or more to detect a double-tap.

This improves FID.

See ampproject/amp.dev#5063

Bug Description

Given an AMP page that has an style[amp-custom] which is just under the 75000 byte limit at 74,998 bytes.

If this AMP page also has an amp-analytics tag, then the SSR transformer will end up adding an inline style to this element like so:

<amp-analytics type="analytics" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:1px;height:1px;" i-amphtml-layout="fixed">

The result is an AMP validation error is leaked to the frontend:

The author stylesheet specified in tag ‘style amp-custom’ and the combined inline styles is too large – document contains 75023 bytes whereas the limit is 75000 bytes.

Why is this? It's because width:1px;height:1px; (21 bytes) is added to the size of style[amp-custom] (74,998 bytes): 74,998 + 21 = 75,023. The key line in the error message is “and the combined inline styles”.

Originally reported in support topic: https://wordpress.org/support/topic/gcs-error/

Example document that has this problem: https://gist.github.com/westonruter/4dd1f81cc393568e9eef3e008f6615e6#file-que-son-gadget-amp-html

The current workaround is to install the AMP Disable SSR plugin.

Expected Behaviour

SSR should not cause the total amp-custom CSS to go over 75000 bytes. It should keep track of how much CSS it is adding to the page, and if that causes the total to go over what is already in style[amp-custom], it should abort SSR.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

This is moved over from outstanding issues on the PR in the ampproject/amp-wp repository (ampproject/amp-wp#5350 (comment)).

Per ampproject/amp-toolbox#1147:

See ampproject/amphtml#32851

Part of ampproject/amphtml#27590

Enables a considerably faster scanning method in amp-bind, by injecting a i-amphtml-binding attribute on all elements with a bound attribute.

The ReorderHead transformer uses the URL as an array key when collecting <script> elements to reorder. This means that if multiple <script> elements use the same URL (like for .mjs script + nomodule fallback), they overwrite each other in the array and are effectively "deduplicated".

The ReorderHead transformer needs a more robust algorithm. It seems that deduplication is still desirable, but will need to rely on "URL + a selection of attributes". The exact selection needs to be clarified, but for now it might help to hash the URL + the presence of nomodule as a first bug fix.

The Dom\Document class is too large and too complex right now.

There is a lot of logic that can be extracted into separate objects. This will make testing easier, churn on Dom\Document lower and help documentation and maintenance overall.

Ultimately, Dom\Document itself should contain the actual logic only for code that directly deals with controlling the underlying DOMDocument. For all of the different "hacks" that are currently included, like normalizing attributes, securing unparseable markup, etc..., those can easily be extracted into separate objects each and the Dom\Document would only be responsible of deciding "when" to do these things, but not "how" to do them.

This is moved over from outstanding issues on the PR in the ampproject/amp-wp repository (ampproject/amp-wp#5350 (comment)).

Via @westonruter:

They are valid on amp-img. If supplied on an img, then the AMP_Image_Sanitizer passes them through.

Nevertheless, for the purposes of SSR images, given this non-optimized input:

<amp-img src="https://amp.dev/static/img/icons/icon-512x512.png" width="512" height="250" object-fit="cover" object-position="right top"></amp-img>

The Node.js Optimizer does this for SSR:

<amp-img src="https://amp.dev/static/img/icons/icon-512x512.png" width="512" height="250" object-fit="cover" object-position="right top" i-amphtml-ssr data-hero class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:512px;height:250px;" i-amphtml-layout="fixed">
	<img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" object-fit="cover" object-position="right top" src="https://amp.dev/static/img/icons/icon-512x512.png">
</amp-img>

So it is copying the object-fit and object-position attributes. Nevertheless, the Node.js Optimizer does not seem to be right here either. I can see that the AMP runtime is also adding an inline style to the img: object-fit: cover; object-position: right top;. This is causing some LCP. So in reality, the object-position and object-fit should instead be copied into a style attribute like so:

<amp-img src="https://amp.dev/static/img/icons/icon-512x512.png" width="512" height="250" object-fit="cover" object-position="right top" i-amphtml-ssr data-hero class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:512px;height:250px;" i-amphtml-layout="fixed">
	<img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" style="object-fit: cover; object-position: right top;" src="https://amp.dev/static/img/icons/icon-512x512.png">
</amp-img>

This will eliminate any negative LCP once the runtime initializes.

This also needs to be fixed in the Node.js Optimizer.

See AMP Playground example.

The AMP Toolbox should have a full PHP implementation of the AMP validator

• Generate PHP representation of validator spec => #100
• Implement validators that pass or fail validator spec rules
• Hook up https://github.com/ampproject/amphtml/tree/main/validator/testdata to verify parity with upstream
• Build CLI command to validate a URL or a piece of markup

Bug Description

As reported on support forum, when adding amp-access for Scroll to the page, the amp-access-scroll component script fail to be added automatically.

For example, given this code:

add_action('wp_head', function () {
	?>
	<script id="amp-access" type="application/json">
		{
			"vendor": "scroll",
			"namespace": "scroll"
		}
	</script>
	<?php
});

add_action( 'wp_footer', function () {
	?>
	<section amp-access="NOT scroll.scroll">
		ad goes here
	</section>
	<?php
} );

The result is only that the main amp-access script is added to the page:

<script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>

Expected Behaviour

Expected the amp-access-scroll to also be added:

<script async custom-element="amp-access-scroll" src="https://cdn.ampproject.org/v0/amp-access-scroll-0.1.js"></script>

Steps to reproduce

1. Put the above PHP code in a plugin.
2. View an AMP page in Standard, Transitional, or non-legacy Reader mode.

Workaround

There is a workaround and that is to manually add the amp-access-scroll component to the page. This can either be done by enqueueing the script:

wp_enqueue_script( 'amp-access-scroll' );

Also, the script can just be manually printed out anywhere in the page:

<script async custom-element="amp-access-scroll" src="https://cdn.ampproject.org/v0/amp-access-scroll-0.1.js"></script>

The AMP plugin will automatically move it to the head.

Something to investigate is why the amp-access-scroll script is not removed automatically given that it was not added automatically in the first place. The AMP plugin is supposed to be removing components automatically which are not needed in the document.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

In regards to #130 (comment), I found that when I try developing with amp-toolbox-php when it is installed as a vendor dependency in the AMP plugin, the phpcs/phpcbf commands find no files.

The reason appears to be that the path is .../amp/vendor/ampproject/amp-toolbox which contains vendor/ so it is matched in this exclude-pattern:

I found that I needed to change it to:

	<exclude-pattern>amp-toolbox/vendor/</exclude-pattern>
	<exclude-pattern>amp-toolbox-php/vendor/</exclude-pattern>

The first one prevents matching against itself when installed as a Composer vendor dependency, and the second one is needed when the repo is cloned separately such as when GitHub actions are run.

The following code produces broken encoding within Dom\Document:

$html     = '<div style="Iñtërnâtiônàlizætiøn"></div>';
$document = Document::fromHtmlFragment($html);
var_dump($document)->saveHtml();

// Output:
// string(101) "<html><head></head><body><div style="Iñtërnâtiônàlizætiøn"></div></body></html>\n"

However, the following code seems to work just fine (note the added <head> tag):

$html     = '<head></head><div style="Iñtërnâtiônàlizætiøn"></div>';
$document = Document::fromHtmlFragment($html);
var_dump($document)->saveHtml();

// Output:
// string(87) "<html><head></head><body><div style="Iñtërnâtiônàlizætiøn"></div></body></html>\n"

This needs investigation. My first assumption is that we do some normalization that requires the <head> tag and silently fails when it is missing.

The 0.5.0 release is not passing amp validator. This page for exemple

Feature description

If we prepare a response in WP and the header has not yet been sent, we could run an additional transformer to elevate the resource hints (<link> elements in head) to the header as Link: ... entries: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link

This would have these resource hints be active even when a URL from our origin is only sent as header for a prefetch.

This is done by the Amp package for signed exchanges: https://github.com/ampproject/amppackager/blob/cc38c5fad40fc603119a298700820b97a4f0c54f/transformer/transformer.go#L194

I'm unsure whether that would be the case and whether we'd actually profit from this.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

Feature description

Add logic to the existing Minify transformer so that it strips unneeded comments.

A configuration will be needed to let users add to that patterns of comments to skip.

Related ampproject/amp-wp#4213

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Generated HTML output from the Optimizer is minified
• All non-essential HTML comments in the minified output have been removed
• Users can use a configuration value to retain a given comment or family of comments

Implementation brief

• See https://github.com/ampproject/amp-toolbox/pull/588/files

QA testing instructions

1. Verify: AMP optimization is enabled
2. Go to the AMP version of a page
3. use "View Source..." on the page to see the generated HTML markup
4. Verify: The generated HTML markup is minified
5. Verify: Non-essential comments have been removed

Demo

Changelog entry

The TransformationEngine should accept a PSR-3 logger implementation and route it through to the transformers. This is a standardized way of letting the consumer of the library decide how and when to accept logging information and is mandatory in larger projects to maintain control over the different parts of the system.

The library should also include a logger implementation that can be used (or will be used by default, TBD) that logs errors into HTML comments, as a sort of last resort to communicating error conditions in an HTTP stack that doesn't come with its own PSR-3 routing.

In the future, the validator and the sanitizer engines should accept such a PSR-3 logger as well.

Feature description

The Common package (ampproject/optimizer) is currently sitting at and enforcing level 4 of PHPStan static analysis.

There is 1 error that needs to be fixed so that we can raise the level to 5 and enforce this new quality level in Travis CI.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• PHPStan does not show any detected errors when run on level 5.

Implementation brief

• Change the level to 5 in the file phpstan.neon.dist.
• Run composer analyze.
• Fix detected errors until no more are found.

QA testing instructions

Demo

Changelog entry

Feature description

Add a new transformer that minifies HTML. The initial implementation should remain simple and do the following transformations:

• collapse whitespace (except in <pre>, <textarea>, <script>)
• trim whitespace within <head>

Related ampproject/amp-wp#4213

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Generated HTML output from the Optimizer is minified
• Minification reduces whitespace to a minimum

Implementation brief

• See ampproject/amp-toolbox#588 & ampproject/amp-toolbox@952b1c4

QA testing instructions

1. Verify: AMP optimization is enabled
2. Go to the AMP version of a page
3. use "View Source..." on the page to see the generated HTML markup
4. Verify: The generated HTML markup is minified and only contains a minimum of whitespace

Demo

Changelog entry

The section on amp.dev that deals with the AMP Optimizer has a guide on how to use the Node.JS Optimizer version.

We should add a guide for the PHP version of the optimizer as well.

Profiling the current test suite showed that the use of mb_detect_encoding() made up more than 40% of the execution time of the entire test suite.

We should:

• ensure we only use it if really necessary to decrease the amount of times it runs
• document that it is slow and that documents should therefore use a proper charset meta tag to begin with
• make sure a charset is set in integration like the WP plugin to avoid its use altogether in those cases

Hi there,

we just started using the AMP Optimizer library and found a bug. In our admittedly strange setup, we use a class binding on the html element to set some marker classes. These class binding gets removed when using the AMP Optimizer.

Input:

<!doctype html>
<html ⚡ [class]="mystate.class" class="blue">
<head>
    <meta charset="utf-8">
    <title>My AMP Page</title>
    <link rel="canonical" href="self.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
    <style amp-custom>
        h1 {
            margin: 1rem;
        }
        .blue {
            background-color: blue;
        }
        .yellow {
            background-color: yellow;
        }
    </style>
</head>
<body>
<amp-state id="mystate">
    <script type="application/json">
        {
            "class": "blue"
        }
    </script>
</amp-state>
<button on="tap:AMP.setState({mystate: {class: 'yellow'}})">
    yellow
</button>
<button on="tap:AMP.setState({mystate: {class: 'blue'}})">
    blue
</button>
</body>
</html>

Output (the relevant part):

<!DOCTYPE html>
<html ⚡ class="blue" i-amphtml-layout="" i-amphtml-no-boilerplate="" transformed="self;v=1">
<head><meta charset="utf-8">

So after the optimization, clicking on the buttons has no effect.

We use the Optimizer with the default configuration (nothing special).

Feature description

Add a new transformer BrowserHints that adds browser hints as meta tags to the <head> node. The initial implementation should add the following hint:

• Add preload hint for the first X images in the page

The number X should be configurable by the user and default to 5.

Related ampproject/amp-wp#4213

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Generated HTML output from the Optimizer contains one or more resource hints that tell the browser to preload images
• Images selected for preloading should be the first X in the main post, as well as anything needed for the site header (X defaults to 5)
• Images smaller then Y pixels are ignored (Y defaults to 150)
• Images with an aspect ratio larger than Z are ignored (Z defaults to 16)
• The number of images X, the minimum size Y and the maximum aspect ratio Z are configurable by the user

Implementation brief

• See https://github.com/ampproject/amppackager/blob/releases/transformer/transformers/preloadimage.go

QA testing instructions

1. Verify: AMP optimization is enabled
2. Go to the AMP version of a page that contains multiple images
3. Use "View Source..." on the page to see the generated HTML markup
4. Verify: The <head> element contains <link rel=preload ...> elements pointing to the first few images

Demo

Changelog entry

The Dom\Document abstraction relies on valid byte sequences to either keep existing UTF-8 content or convert content in a different encoding to the UTF-8 encoding.

If a document contains a malformed byte sequence, the parsing done by DOMDocument fails in a random way (silently) and produces garbage:

This is not only bad because of the garbled end result, it also looks like the AMP conversion is the culprit and makes it difficult for the user to diagnose the real issue.

The source of this problem (the malformed byte sequence) can actually be detected in the non-AMP document and is also shown by the W3C validator:

PHP has a function mb_check_encoding() which seems to be able to detect malformed byte sequences (see https://3v4l.org/ciAPf). We should investigate whether we can detect this problem upfront and warn the user about it.

Things to check:

• How reliable does mb_check_encoding() work, and does it get trigger on other issues as well?
• What is the performance impact of checking the entire document before parsing it via Dom\Document?

• Automatically add scripts for used extensions
• Strip unused extension scripts

The following is a list of tasks/issues we need to complete for a feature-complete v1.0.0 release of the optimizer.

• New Transformer: BrowserHints [#31]
• New Transformer: AutoExtensions [#32]
• Copy object-position & object-fit into style attribute to reduce LCP [#6]
• Server-side rendering can cause style[amp-custom] CSS overage [#19]
• Support unit-based width/height attributes in ImageDimensions [#4]
• Add PHP Optimizer guide to amp.dev [#33]
• Validator: Initial implementation [#194]
• Sanitizer: Initial implementation [#195]

The library should come with a small lightweight CLI command wrapper so that you can run it from a shell or from within a CI environment easily.

Synopsis:

bin/optimize [input-file]

Examples:

# Run the optimizer on a specific file and store that file.
bin/optimize my-page.html > my-optimized-page.html

# Use STDIN if [input-file] is omitted
echo '<amp-img width=200 height=100 src="my-img.jpg">' | bin/optimize > optimized-amp-img.html

A few spec test files can create issues on some environments:

[RuntimeException]
  Failed to extract ampproject/amp-toolbox: (2) unzip -qq -o '/Users/albertomedina/Local Sites/amp
  -plugin-training/app/public/wp-content/plugins/amp/vendor/composer/tmp-176759d83548d80cf67a6bab5
  57774d5' -d '/Users/albertomedina/Local Sites/amp-plugin-training/app/public/wp-content/plugins/
  amp/vendor/composer/a0d79b6b'
  checkdir error:  cannot create /Users/albertomedina/Local Sites/amp-plugin-training/app/public/w
  p-content/plugins/amp/vendor/composer/a0d79b6b/ampproject-amp-toolbox-php-e0a1943/tests/spec/tra
  nsformers/experimental/RemoveAmpAttribute/remove_���
                   Illegal byte sequence
                   unable to process ampproject-amp-toolbox-php-e0a1943/tests/spec/transformers/ex
  perimental/RemoveAmpAttribute/remove_���/.
  checkdir error:  cannot create /Users/albertomedina/Local Sites/amp-plugin-training/app/public/w
  p-content/plugins/amp/vendor/composer/a0d79b6b/ampproject-amp-toolbox-php-e0a1943/tests/spec/tra
  nsformers/experimental/RemoveAmpAttribute/remove_���
                   Illegal byte sequence
                   unable to process ampproject-amp-toolbox-php-e0a1943/tests/spec/transformers/ex
  perimental/RemoveAmpAttribute/remove_���/expected_output.html.
  checkdir error:  cannot create /Users/albertomedina/Local Sites/amp-plugin-training/app/public/w
  p-content/plugins/amp/vendor/composer/a0d79b6b/ampproject-amp-toolbox-php-e0a1943/tests/spec/tra
  nsformers/experimental/RemoveAmpAttribute/remove_���
                   Illegal byte sequence
                   unable to process ampproject-amp-toolbox-php-e0a1943/tests/spec/transformers/ex
  perimental/RemoveAmpAttribute/remove_���/input.html.

To avoid this, it makes sense to prune all unneeded files from the dist archives so that a regular composer install will only pull in files that are needed on production servers.

Feature description

We should have an automated way of syncing the test specs for the Optimizer library on a scheduled basis, perhaps via a GtiHub Action.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

The code in this repository was started as part of a WordPress plugin. Therefore, we still have code rules in place that come from the WordPress Coding Standard (WPCS) and that we keep for consistency.

However, when the reliance on WPCS was removed from this repository, some of the checks were removed as well that would be needed to ensure the above consistency.

From @sebastianbenz on ampproject/amp-toolbox#1132:

We can't tell whether a hero image is responsive and is loaded depending
on viewport size. The current implementation will always preload hero
images, which means images might be preloaded even if they are not
visible on the page. This PR reverts this behavior and disables
preload generation for hero images.

The only exception is when an image defines a media attribute.

When running a Lighthouse audit on an AMP page that contains an amp-youtube component in the first viewport, I saw a “Preconnect to required origins” warning:

While AMP components already do preconnect in themselves, they do so after the component script has loaded and ran. If we add rel=preconnect resource hint links to pages that have amp-youtube elements automatically, then we could shave some additional milliseconds and improve the Lighthouse score.

This is moved over from outstanding issues on the PR in the ampproject/amp-wp repository (ampproject/amp-wp#5350 (comment)).

Via @westonruter:

Even though the docs say they should be integer pixel values, this is not enforced and non-integers can be supplied.

For floats, see: ampproject/amphtml#27528

And this is valid AMP:

<amp-img src="https://amp.dev/static/img/icons/icon-512x512.png" width="50vw" height="50vh"></amp-img>

The use of decimals and/or CSS units been allowed accidentally, but since it is valid it cannot be removed.

Feature description

When the AMP boilerplate is removed by the SSR logic, preloading of the AMP runtime is less critical and it seems to slow down other assets that are of higher priority in that scenario.

The Optimizer should remove an existing preload for the AMP runtime again when the boilerplate was indeed removed.

This was originally reported by @mehigh for an XWP project.

/cc @sebastianbenz

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

• Add small transformer that runs after the ServerSideRendering transformer and removes an existing AMP runtime preload iff the AMP boilerplate was removed.

QA testing instructions

Demo

Changelog entry

In the Web Stories plugin we parse the story markup using Document::fromHtml( $markup, get_bloginfo( 'charset' ) ) for further processing.

A user has now reported an issue with that, where somehow the parsing fails, causing the doccumentElement property to be null. Here's the screenshot of the error:

My hunch is that it's related to an encoding issue, but not sure.

Maybe it's possible to add some hardening to the Document class around instances of using $this->documentElement, i.e. first checking whether it exists