AMP Speeds without AMP Validation

@Suzzicks MobileMoxie #SMXMunich@Suzzicks MobileMoxie #SMXMunich
AMP Speed without
AMP Validation
Cindy Krum, CEO
MobileMoxie
SMX Munich

@Suzzicks MobileMoxie #SMXMunich
AMP: Accelerated Mobile
Pages Project
• Framework for speed

Pages Project
• Built for static content

Pages Project
• Built for static content
• At the moment, primarily used by
major news publishers like:

Why the Hype?

Responsive is good…

Responsive is good… but not THE answer.

http://bit.ly/Cindy-AMP

AMP Addresses Many Problems of Modern Code
</>
.html
• Standardizes Common Site
Features

</>
.html
{ }
.CSS
Features

</>
.html
{ }
.CSS
{ ; }
.js
Features

AMP-HTML
HTML
Features
• Limits Reliance on Inefficient
Code

VS
Features
Code
• Requires Efficient Caching

Features
Code
• Requires Efficient Caching
• Requires Efficient
Compression

AMP-HTML Webpage
AMP JS Run-time
Features
Code
• Requires Efficient Caching &
Compression
• Adds Intelligent Runtime &
Pre-Render

AMP

AMP is Still in Development and Evolving

Your Content Demands
Sophisticated JS & HTML

Budget & Bandwidth - DEV Teams Are Not Ready

Only News/Blog
Carousels

The CMS Can’t Be Modified to Make AMP Pages

Google Analytics Solutions Provide Limited Data
AMP-Pixel AMP-Analytics AMP-iFrame

Omniture/ Adobe Solutions Provide Very Limited Data

We Need Cookies

Chrome Plugin AMP Validation bit.ly/validateAMP
1. Open your page in your browser
2. Add “#development=1” to the URL, for example,
http://localhost:8000/released.amp.html
#development=1.
3. Open the Chrome DevTools Console & check for errors.

bit.ly/validateAMP
Chrome Plugin AMP Validation

bit.ly/AMPValidation
Chrome Plugin AMP Validation
Interpreting Error
Code

http://www.technicalseo.info/seo-tools/amp/ http://bit.ly/AMP-Tool

http://www.technicalseo.info/seo-tools/amp/ http://bit.ly/AMP-Tool
Detects the Presence of AMP Code but
Does Not Actually Validate for
Appearance in Google Results!!!!
Good for Testing Intentional Non-
Validating AMP Pages 

http://tools.maxxeight.com/amp-html/ http://bit.ly/AMP-Tool-2

http://tools.maxxeight.com/amp-html/ http://bit.ly/AMP-Tool-2
Validates AMP Code & Lets You Edit the
HTML on Screen.

AMP-Like Performance Without AMP?

“AMP Is Not Faster Than What You Can Do If You Really
Know What You’re Doing.” - Malte Ubl, AMP Tech Lead
https://youtu.be/hVRkG1CQScA

But No AMP Carousel Rankings if You Are
Not AMP Valid

You Need A GOOD Developer…

A Really-Really
FANTASTIC
Developer…

Content
Efficiency

It’s All About Code CLEANSING & HYGIENE

And
Discipline….

Limiting
HTTP
Requests
for Styling

Limit Round Trip Requests for CSS
Best
Alternative
Good
Alternative
Max 50 KB/ page of CSS All
Inline – Limited Selectors &
Classes
Inline Above The Fold CSS &
Use a Deferred CSS for
Below The Fold. Combine &
Minify;
PreConnect Font Requests
or Host fonts on CDN
Ϟ AMP Requirement
Only Inline CSS, no More
than 50 KB per page –
Limited Selectors &
Classes
(Zero HTTP Requests before
Fonts Start Downloading)

Best
Alternative
Good
Alternative
Classes
Inline Above The Fold CSS
and Use a Deferred CSS for
Minify;
Ϟ AMP Requirement
Zero HTTP Requests
before Fonts Loaded &
than 50 KB per page
PreConnect for Web Fonts in HTML:
PreConnect for Web Fonts in JavaScript:

Best
Alternative
Good
Alternative
Classes
Minify;
Ϟ AMP Requirement
Zero HTTP Requests
before Fonts Loaded &
than 50 KB per page
PreConnect for Web Fonts from an HTTP Header:

Best
Alternative
Good
Alternative
Classes
Minify;
PreConnect WebFont
Requests or Host fonts on
CDN
Ϟ AMP Requirement
Zero HTTP Requests
before Fonts Loaded;
than 50 KB per page
In .htaccess or httpd.config add this code:
# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
# nginx config
if ($filename ~* ^.*?.(eot)|(ttf)|(woff)$){
add_header Access-Control-Allow-Origin *;
}
(Works only in WebKit browsers, not FireFox)

PreConnectWithout
PreConnect Hint
With
PreConnect Hint Source: https://www.igvita.com/2015/08/17/eliminating-roundtrips-with-preconnect/

Mimicking the
AMP JS Runtime

PreRender Content by Viewport
Best
Alternative
Good
Alternative
<link rel="preRender
preFetch”
href=”http://www.NextPage/
page”>
<link rel="preRender”
href=”http://www.NextPage
p.com/page”>
Ϟ AMP Requirement
PreRender Next Low-CPU,
In-Viewport Content
(Invisible Tab of Rendered Page Content)

PreRender Content by Viewport
Best
Alternative
Good
Alternative
<link rel="preRender
preFetch”
href=”http://www.NextPage/
page”>
<link rel="preRender”
href=”http://www.NextPage
p.com/page”>
Ϟ AMP Requirement
PreRender Next Low-CPU,
In-Viewport Content
(Invisible Tab of Rendered
Content)
preRender= HTML Page + Dependent Files
preFetch = HTML Page Only (Needed for FireFox)

Great Post about Rel-Prerender:
http://ipullrank.com/how-i-sped-up-my-site-68-percent-with-one-line-of-code/
http://bit.ly/MikeKingRocks

Critical Path Rendering

Loading of External JavaScript
Best
Alternative
Good
Alternative
Use the AMP JavaScript
Library & Modify as
Necessary; Load
Asynchronously
Utilize Both Async & Defer
Attributes for ALL External
JavaScript
Ϟ AMP Requirement
All External JavaScript are
Loaded Async from the
AMP JavaScript Library

Best
Alternative
Good
Alternative
Library & Modify as
Necessary; Load
Asynchronously
JavaScript
Ϟ AMP Requirement
Synchronous Loading= Scripts Download in Parallel & Execute in Source
Code Order. Blocks Rendering Until Execution is Complete (Normal - No
Benefit)
Defer= Scripts are Downloaded in Parallel & Executed in Source Code
Order after the Entire Document is parsed. No Impact on Scripts without
“src” or Scripts that are dynamically added. Flakey in some Browsers
(Some Benefit)
Async = Does not wait until the Document has parsed to execute. Scripts
are Downloaded in Parallel & Executed ASAP (Best Benefit – HTML5 is
Awesome!)

Best
Alternative
Good
Alternative
Library & Modify as
Necessary; Load
Asynchronously
JavaScript
Ϟ AMP Requirement
Defer & Async at the Same Time:
W3C Says: “The defer attribute may be specified even if the async attribute is specified, to cause legacy Web
browsers that only support defer (and not async) to fall back to the defer behavior instead of the synchronous
blocking behavior that is the default.”

Best
Alternative
Good
Alternative
Library & Modify as
Necessary; Load
Asynchronously
JavaScript
Ϟ AMP Requirement
BUT:
If You Need to get an AMP page to Validate, and 3rd party JS is the only thing
stopping you – Put it in a Sandboxed iFrame
(Really, anything that is preventing you from validating for AMP can be put in the
AMP-iFrame)

Static Resource Sizing
Best
Alternative
Good
Alternative
Include Height & Width
Dimensions for ALL Page
Elements & include HTML5
Tags like <picture> with the
Srcset
Include Height & Width
Dimensions for MOST Page
Elements & include HTML5
Tags like <picture> with the
Srcset. Keep the Design
Simple
Ϟ AMP Requirement
Resource Sizes Must be
Stated Explicitly
(But can Still Be
Responsive)

Minimal Style Recalculations
Best
Alternative
Good
Alternative
Use a Fastdom Regulatory
Layer so that All the ‘Reads’
Happen 1st, Then All the
‘Writes’
Perform Limited DOM
Batching Operations using
jQuery
Ϟ AMP Requirement
All DOM ‘Read’
Operations Done 1st,
Then All ‘Write’
Operations in the AMP
Runtime

Only GPU-Accelerated Animations
Best
Alternative
Good
Alternative
Selectively Promote
Animation Elements & Use
the ‘Transform’ Declaration:
[translateZ(0);] to Trigger
GPU Acceleration
Promote ALL Animation
Elements Indiscriminately &
Use the ‘Transform’
Declaration: [translateZ(0);]
to Trigger GPU Acceleration
Ϟ AMP Requirement
Only ‘Transform’ &
‘Opacity’ CSS Animations
& Must be GPU -
Accelerated. No Layout-
Changes
- GPU = Graphics Processing Unit
- Leverages Hardware Graphic Processing Rather than the
Browser
- GPU Acceleration was Created for 3D Graphics, but Can Be
Tricked into Use for Speed of CSS Graphics
- CSS Animations should Not Change Layout, to Avoid Adding
more Layout Recalculations – That is why ‘Transform’ &
‘Opacity’ are the only ones allowed in AMP

Only GPU-Accelerated Animations
Best
Alternative
Good
Alternative
Selectively Promote
Animation Elements & Use
the ‘Transform’ Declaration:
[translateZ(0);] to Trigger
GPU Acceleration
Promote ALL Animation
Elements Indiscriminately &
Use the ‘Transform’
Declaration: [translateZ(0);]
to Trigger GPU Acceleration
Ϟ AMP Requirement
Only ‘Transform’ &
‘Opacity’ CSS Animations
& Must be GPU -
Accelerated. No Layout-
Changes

HTTP/2

No Head of Line Blocking

Header Compression

Leverage HTTP2 Effectively
Best
Alternative
Good
Alternative
Update Site for HTTPS &
Servers for HTTP2
Begin Transition to HTTPS &
Planning for HTTP2
Ϟ AMP Requirement
HTTP2 Required

Cache Content

Extending AMP Caching Benefits
One AMP Validating Page
Holds All External Elements
Google’s FREE AMP Caches
Non-AMP Pages
on the Same Site

Leverage Caching Effectively
Best
Alternative
Good
Alternative
Still…Use Google’s Free AMP
Proxy Caches
Set all Static Content to
Cache for a Year. Use File
Management Software to
Update File Names &
Prevent Stale Content
Ϟ AMP Requirement
Use Google’s Free AMP
Proxy Caches or a CDN

Dankeschön!
@suzzicks
@mobilemoxie
facebook.com/mobilemoxie
www.mobilemoxie.com
2 Months Free: SMXMUNICH

AMP Speeds without AMP Validation

More Related Content

What's hot (18)

Similar to AMP Speeds without AMP Validation (20)

More from MobileMoxie (20)

Recently uploaded (6)

AMP Speeds without AMP Validation

Editor's Notes