amp speeds without amp validation

PowerPoint Presentation

@Suzzicks MobileMoxie #SMXMunich

AMP Speed without AMP ValidationCindy Krum, CEOMobileMoxieSMX Munich

@Suzzicks MobileMoxie #SMXMunichRocket Designed by Freepik1

AMP: Accelerated Mobile Pages ProjectFramework for speed@Suzzicks MobileMoxie #SMXMunich

@Suzzicks MobileMoxie #SMXMunichAccelerated Mobile Pages (AMP) Project is an open source initiative that embodies the vision that publishers can create mobile optimized content once and have it load instantly everywhere.2

AMP: Accelerated Mobile Pages ProjectFramework for speedBuilt for static content@Suzzicks MobileMoxie #SMXMunich


AMP: Accelerated Mobile Pages ProjectFramework for speedBuilt for static contentAt the moment, primarily used by major news publishers like:



Why the Hype?@Suzzicks MobileMoxie #SMXMunich


Responsive is good@Suzzicks MobileMoxie #SMXMunich

@Suzzicks MobileMoxie #SMXMunichResponsive Design is Good but Not THE AnswerOften Slow Especially on MobileWont Work on Tiny Screens like WatchesDevelopers were Getting Too Creative with JS Functionality

6

Responsive is good but not THE answer.@Suzzicks MobileMoxie #SMXMunich

@Suzzicks MobileMoxie #SMXMunichResponsive Design is Good but Not THE AnswerOften Slow Especially on MobileWont Work on Tiny Screens like WatchesDevelopers were Getting Too Creative with JS Functionality

7

http://bit.ly/Cindy-AMP



8

AMP Addresses Many Problems of Modern Code

.html


Standardizes Common Site Features

@Suzzicks MobileMoxie #SMXMunichAMP Addresses Many Problems of Modern CodeStandardizes Common Site FeaturesHTMLCSSJSLimits Reliance on Inefficient CodeRequires Efficient Caching & CompressionAdds Intelligent Runtime & Pre-Render

9


.html


{ }.CSSStandardizes Common Site Features


10


.html


{ }.CSS

{ ; }.jsStandardizes Common Site Features


11


AMP-HTMLHTMLStandardizes Common Site FeaturesLimits Reliance on Inefficient Code


12


VS

Standardizes Common Site FeaturesLimits Reliance on Inefficient CodeRequires Efficient Caching


13

AMP Addresses Many Problems of Modern CodeStandardizes Common Site FeaturesLimits Reliance on Inefficient CodeRequires Efficient CachingRequires Efficient Compression


14


AMP-HTML WebpageAMP JS Run-time

Standardizes Common Site FeaturesLimits Reliance on Inefficient CodeRequires Efficient Caching & CompressionAdds Intelligent Runtime & Pre-Render


15

AMP

@Suzzicks MobileMoxie #SMXMunichAMP is Still in Development and Evolving

@Suzzicks MobileMoxie #SMXMunichhttps://www.exchangewire.com/wp-content/uploads/2015/02/Evolution.jpg17

Your Content DemandsSophisticated JS & HTML@Suzzicks MobileMoxie #SMXMunich

@Suzzicks MobileMoxie #SMXMunichBudget & Bandwidth - DEV Teams Are Not Ready

@Suzzicks MobileMoxie #SMXMunichOnly News/BlogCarousels

@Suzzicks MobileMoxie #SMXMunichThe CMS Cant Be Modified to Make AMP Pages


@Suzzicks MobileMoxie #SMXMunichGoogle Analytics Solutions Provide Limited Data

AMP-Pixel

AMP-AnalyticsAMP-iFrame

@Suzzicks MobileMoxie #SMXMunichOmniture/ Adobe Solutions Provide Very Limited Data

@Suzzicks MobileMoxie #SMXMunichhttps://amphtml.wordpress.com/2016/02/24/adobe-analytics-for-the-accelerated-mobile-pages-project/23

We Need Cookies

@Suzzicks MobileMoxie #SMXMunichhttps://cldup.com/_d6DG7yyR8.png24

We Need Cookies



We Need Cookies




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

@Suzzicks MobileMoxie #SMXMunichhttp://bit.ly/validateAMP

28

bit.ly/validateAMPChrome Plugin AMP Validation

@Suzzicks MobileMoxie #SMXMunichhttp://bit.ly/validateAMP

29

bit.ly/AMPValidationErrors@Suzzicks MobileMoxie #SMXMunich

Chrome Plugin AMP ValidationInterpreting Error Code

@Suzzicks MobileMoxie #SMXMunichhttp://bit.ly/AMPValidationErrors

30


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



http://www.technicalseo.info/seo-tools/amp/http://bit.ly/AMP-ToolDetects 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@Suzzicks MobileMoxie #SMXMunich


http://tools.maxxeight.com/amp-html/http://bit.ly/AMP-Tool-2@Suzzicks MobileMoxie #SMXMunich

Validates AMP Code & Lets You Edit the HTML on Screen.





AMP-Like Performance Without AMP?@Suzzicks MobileMoxie #SMXMunich

@Suzzicks MobileMoxie #SMXMunichhttp://superfastvps.com/wp-content/uploads/2014/11/Super-Fast-Internet.jpg38

AMP Is Not Faster Than What You Can Do If You Really Know What Youre Doing. - Malte Ubl, AMP Tech Leadhttps://youtu.be/hVRkG1CQScA


39

But No AMP Carousel Rankings if You Are Not AMP Valid



You Need A GOOD Developer@Suzzicks MobileMoxie #SMXMunich



A Really-Really FANTASTIC Developer


Content Efficiency @Suzzicks MobileMoxie #SMXMunich

@Suzzicks MobileMoxie #SMXMunichOptimize data delivery

https://upload.wikimedia.org/wikipedia/commons/8/87/Efficiency.png43

Its All About Code CLEANSING & HYGIENE@Suzzicks MobileMoxie #SMXMunich

@Suzzicks MobileMoxie #SMXMunichGetting AMP-like performance is about adopting a development philosophy where hygiene is of the utmost importance. 44

And Discipline.



LimitingHTTPRequestsfor Styling@Suzzicks MobileMoxie #SMXMunich

@Suzzicks MobileMoxie #SMXMunichLimit Round Trip Requests for CSSBest AlternativeGood AlternativeMax 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)

@Suzzicks MobileMoxie #SMXMunichhttps://www.igvita.com/2015/08/17/eliminating-roundtrips-with-preconnect/ See point one for the CDN option under good: https://davidwalsh.name/font-loading47

Limit Round Trip Requests for CSSBest AlternativeGood AlternativeMax 50 KB/ page of CSS All Inline Limited Selectors & ClassesInline Above The Fold CSS and Use a Deferred CSS for Below The Fold. Combine & Minify; PreConnect Font Requests or Host fonts on CDN

AMP RequirementZero HTTP Requests before Fonts Loaded & Only Inline CSS, no More than 50 KB per page

PreConnect for Web Fonts in HTML:

PreConnect for Web Fonts in JavaScript:




PreConnect for Web Fonts in HTML:

PreConnect for Web Fonts in JavaScript:




PreConnect for Web Fonts from an HTTP Header:


Limit Round Trip Requests for CSSBest AlternativeGood AlternativeMax 50 KB/ page of CSS All Inline Limited Selectors & Classes

Inline Above The Fold CSS and Use a Deferred CSS for Below The Fold. Combine & Minify; PreConnect WebFont Requests or Host fonts on CDN

AMP RequirementZero HTTP Requests before Fonts Loaded; Only Inline CSS, no More than 50 KB per page

In .htaccess or httpd.config add this code:

# Apache config

Header set Access-Control-Allow-Origin "*"

# nginx configif ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){add_header Access-Control-Allow-Origin *;}

(Works only in WebKit browsers, not FireFox)


PreConnectWithout PreConnect Hint

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


Mimicking theAMP JS Runtime


@Suzzicks MobileMoxie #SMXMunichUsers notice if sites and apps don't run well, so optimizing rendering performance is crucial!

Img: https://pixabay.com/en/browser-web-www-computer-773215/53

PreRender Content by ViewportBest AlternativeGood Alternative

AMP RequirementPreRender Next Low-CPU, In-Viewport Content (Invisible Tab of Rendered Page Content)

@Suzzicks MobileMoxie #SMXMunichSource for best Maltes response to an answer here: http://stackoverflow.com/questions/35133669/details-on-pre-rendering-with-amp-htmlFor Good, maybe reference Mike Kings post for more details on rel-prerender tag: http://ipullrank.com/how-i-sped-up-my-site-68-percent-with-one-line-of-code/ (Saying Good because it doesnt seem as AMP-esque as the statement by Malte in the StackOverflow exchange). 54

PreRender Content by ViewportBest AlternativeGood Alternative

AMP RequirementPreRender Next Low-CPU, In-Viewport Content (Invisible Tab of Rendered Content)preRender= HTML Page + Dependent FilespreFetch = HTML Page Only (Needed for FireFox)

@Suzzicks MobileMoxie #SMXMunichSource for best Maltes response to an answer here: http://stackoverflow.com/questions/35133669/details-on-pre-rendering-with-amp-htmlFor Good, maybe reference Mike Kings post for more details on rel-prerender tag: http://ipullrank.com/how-i-sped-up-my-site-68-percent-with-one-line-of-code/ (Saying Good because it doesnt seem as AMP-esque as the statement by Malte in the StackOverflow exchange). 55

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

@Suzzicks MobileMoxie #SMXMunichCritical Path Rendering

@Suzzicks MobileMoxie #SMXMunichOptimizing the critical rendering path refers to prioritizing the display of content that relates to the current user action.57

Loading of External JavaScriptBest AlternativeGood AlternativeUse the AMP JavaScript Library & Modify as Necessary; Load AsynchronouslyUtilize Both Async & Defer Attributes for ALL External JavaScript

AMP RequirementAll External JavaScript are Loaded Async from the AMP JavaScript Library

@Suzzicks MobileMoxie #SMXMunichhttps://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/

58


AMP RequirementAll External JavaScript are Loaded Async from the AMP JavaScript LibrarySynchronous 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!)


59


AMP RequirementAll External JavaScript are Loaded Async from the AMP JavaScript LibraryDefer & 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.


60


AMP RequirementAll External JavaScript are Loaded Async from the AMP JavaScript Library

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)


61

Static Resource SizingBest AlternativeGood AlternativeInclude Height & Width Dimensions for ALL Page Elements & include HTML5 Tags like with the SrcsetInclude Height & Width Dimensions for MOST Page Elements & include HTML5 Tags like with the Srcset. Keep the Design Simple

AMP RequirementResource Sizes Must be Stated Explicitly(But can Still Be Responsive)

@Suzzicks MobileMoxie #SMXMunichSource: http://www.html5rocks.com/en/tutorials/responsive/picture-element/

62

Minimal Style RecalculationsBest AlternativeGood AlternativeUse a Fastdom Regulatory Layer so that All the Reads Happen 1st, Then All the WritesPerform Limited DOM Batching Operations using jQuery

AMP RequirementAll DOM Read Operations Done 1st, Then All Write Operations in the AMP Runtime

@Suzzicks MobileMoxie #SMXMunichSource for good (it says complications can arise when fastdom is used on third-party scripts): https://github.com/wilsonpage/fastdom/issues/65http://www.htmlgoodies.com/beyond/reference/performing-batch-dom-operations-using-jquery.html 63

Only GPU-Accelerated AnimationsBest AlternativeGood AlternativeSelectively Promote Animation Elements & Use the Transform Declaration: [translateZ(0);] to Trigger GPU AccelerationPromote ALL Animation Elements Indiscriminately & Use the Transform Declaration: [translateZ(0);] to Trigger GPU Acceleration

AMP RequirementOnly 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

@Suzzicks MobileMoxie #SMXMunichThis seems somewhat disputed. A Treehouse article says to follow the recommendation Ive stated above: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-cssBut StackOverflow has people contesting it, offering other ideas: http://stackoverflow.com/questions/10814178/css-performance-relative-to-translatez0If you go to Google Developers, it looks like the approach above is okay, so long as youre careful about understanding the layers of your app and not promoting elements unnecessarily: https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count

64

Only GPU-Accelerated AnimationsBest AlternativeGood AlternativeSelectively Promote Animation Elements & Use the Transform Declaration: [translateZ(0);] to Trigger GPU AccelerationPromote ALL Animation Elements Indiscriminately & Use the Transform Declaration: [translateZ(0);] to Trigger GPU Acceleration

AMP RequirementOnly Transform & Opacity CSS Animations & Must be GPU -Accelerated. No Layout-Changes


65

HTTP/2@Suzzicks MobileMoxie #SMXMunich

@Suzzicks MobileMoxie #SMXMunichThis would be kind of bonus info about content efficiency because HTTP/2 isnt really referenced in talks specific to AMP. The spirit of it is in line with AMPs emphasis on speed, though, particularly the two elements I singled out here. (There are others. I would couch this by being like HTTP/2 is really its own talk, but here are two pieces that are cool to quickly cover. )

Photo: https://i.ytimg.com/vi/M7ZQP0aTfIM/maxresdefault.jpgALT: https://c1.staticflickr.com/5/4028/4397111144_2cfacd3fc0_b.jpg66

No Head of Line Blocking@Suzzicks MobileMoxie #SMXMunich

@Suzzicks MobileMoxie #SMXMunichNo head of line blockingNow a logical stream all streams share this connection, multiplexed on this single connection

Img source: HTTP/2 101 (Chrome Dev Summit 2015) 67

Header Compression@Suzzicks MobileMoxie #SMXMunich

@Suzzicks MobileMoxie #SMXMunichHTTP/2 101 (Chrome Dev Summit 2015) Around 15:20HPACK Header compression specifically for HTTP

Img source:68

Leverage HTTP2 EffectivelyBest AlternativeGood AlternativeUpdate Site for HTTPS & Servers for HTTP2Begin Transition to HTTPS & Planning for HTTP2

AMP RequirementHTTP2 Required


69

Cache Content@Suzzicks MobileMoxie #SMXMunich


Extending AMP Caching Benefits

One AMP Validating Page Holds All External ElementsGoogles FREE AMP Caches

Non-AMP Pages on the Same Site

@Suzzicks MobileMoxie #SMXMunichLeverage Caching EffectivelyBest AlternativeGood AlternativeStillUse Googles Free AMP Proxy CachesSet all Static Content to Cache for a Year. Use File Management Software to Update File Names & Prevent Stale Content

AMP RequirementUse Googles Free AMP Proxy Caches or a CDN


72

Dankeschn!@suzzicks@mobilemoxie

facebook.com/mobilemoxie

www.mobilemoxie.com2 Months Free: SMXMUNICH
