Add preload links & resource hints, and optimize order of elements in head #1295
Conversation
Ensure resource hints and preload links are located at the top of the head.
westonruter
force-pushed
the
add/preload-and-resource-hints
branch
from
1b87ed5 to
57defe2
Compare
westonruter
force-pushed
the
add/preload-and-resource-hints
branch
from
0559edb to
d09034d
Compare
westonruter
changed the title
westonruter
changed the title
includes/class-amp-theme-support.php
Outdated
| * in this case too we should defer to the theme as well to output the meta charset because it is possible the | ||
| * install is not on utf-8 and we may need to do a encoding conversion. | ||
| * "AMP HTML documents MUST contain the AMP boilerplate code (head > style[amp-boilerplate] and noscript > style[amp-boilerplate]) in their head tag." | ||
| * https://www.ampproject.org/docs/fundamentals/spec#required-markup |
There was a problem hiding this comment.
@westonruter What do you think about standardizing our inline link references to this:
"AMP HTML documents MUST contain the AMP boilerplate code (head > style[amp-boilerplate] and
noscript > style[amp-boilerplate]) in their head tag." {@link https://www.ampproject.org/docs/fundamentals/spec#required-markup AMP Required Markup}.
There was a problem hiding this comment.
That's fine with me, but at the same time since this is just a multiline comment and not a phpDoc /** comment, it wouldn't make a difference from an automated documentation generator perspective AFAIK.
There was a problem hiding this comment.
@westonruter True. I'm more thinking about consistency of how we document links whether in a DocBlock, file header, or inline comment. We have a mixture of documenting techniques:
{@see http Document Title}See http....see <http....>- etc.
This is a larger discussion on our coding standards to ensure we have consistency.
| $this->assertContains( '<script type="text/javascript" src="https://cdn.ampproject.org/v0/amp-mathml-latest.js" async custom-element="amp-mathml"></script>', $sanitized_html ); // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript | ||
| $this->assertContains( '<meta name="generator" content="AMP Plugin', $sanitized_html ); | ||
|
|
||
| $ordered_contains = array( |
|
@westonruter We do need to remember to update all links to the draft AMP Hosting Guide once it's finalized and published. |
In lieu of WordPress not yet supporting preload links (see #42438) and not always supporting resource hints (see #44668), we can use the fact that we have a
DOMDocumentto supply them when missing.This seeks to implement much of the drafted AMP hosting guide.
preloadlinks for AMP runtime and render-blocking extension scripts.preconnectresource link is added for Google Fonts.style[amp-custom]before external external stylesheets and place boilerplate afterstyle[amp-custom].In my testing, the changes in this PR improve the Lighthouse Performance score on my dev environment for Twenty Sixteen by 2 points: 78 to 80.
Note that this PR does not add
preloadlinks for images (i.e. header image and featured image since these are theme-specific; this needs to be done in core/ see #42438.)See also #1289.
For optimizing fonts other than from Google Fonts, see ampproject/amp-toolbox#76
Closes #1265.