New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add preload links & resource hints, and optimize order of elements in head #1295

Merged
merged 5 commits into from Aug 4, 2018

Conversation

Projects
None yet
2 participants
@westonruter
Member

westonruter commented Jul 31, 2018

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 DOMDocument to supply them when missing.

This seeks to implement much of the drafted AMP hosting guide.

  • Add preload links for AMP runtime and render-blocking extension scripts.
  • Ensure preconnect resource link is added for Google Fonts.
  • Optimize order of elements in head, including putting style[amp-custom] before external external stylesheets and place boilerplate after style[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.

image

Note that this PR does not add preload links 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.

@westonruter westonruter added this to the v1.0 milestone Jul 31, 2018

westonruter added some commits Jul 30, 2018

Add preload links for AMP runtime and extension scripts
Ensure resource hints and preload links are located at the top of the head.

@westonruter westonruter force-pushed the add/preload-and-resource-hints branch from 1b87ed5 to 57defe2 Aug 3, 2018

@westonruter westonruter force-pushed the add/preload-and-resource-hints branch from 0559edb to d09034d Aug 4, 2018

@westonruter westonruter changed the title from [WIP] Add preload links and resource hints to Add preload links and resource hints Aug 4, 2018

@westonruter westonruter changed the title from Add preload links and resource hints to Add preload links & resource hints, and optimize order of elements in head Aug 4, 2018

@westonruter westonruter requested a review from hellofromtonya Aug 4, 2018

* 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

This comment has been minimized.

@hellofromtonya

hellofromtonya Aug 4, 2018

Collaborator

@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}.

This comment has been minimized.

@westonruter

westonruter Aug 4, 2018

Member

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.

This comment has been minimized.

@hellofromtonya

hellofromtonya Aug 4, 2018

Collaborator

@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(

This comment has been minimized.

@hellofromtonya

hellofromtonya Aug 4, 2018

Collaborator

👍

@hellofromtonya

Good work. 👍

@hellofromtonya

This comment has been minimized.

Collaborator

hellofromtonya commented Aug 4, 2018

@westonruter We do need to remember to update all links to the draft AMP Hosting Guide once it's finalized and published.

@hellofromtonya hellofromtonya merged commit b074286 into develop Aug 4, 2018

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details

@westonruter westonruter deleted the add/preload-and-resource-hints branch Sep 6, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment