AMP: Does it really make your site faster?
-
Upload
nicholas-jansma -
Category
Technology
-
view
1.622 -
download
0
Transcript of AMP: Does it really make your site faster?
![Page 1: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/1.jpg)
@querymetrics @nicj
AMP: Does it Really Make Your Site Faster?
Nigel Heron + Nic Jansma
![Page 2: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/2.jpg)
@querymetrics @nicj
Nigel Heron@querymetrics
Nic Jansma@nicj
https://slideshare.net/nicjansma/amp-does-it-really-make-your-site-faster
https://github.com/querymetrics/amp-analytics-demo
![Page 3: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/3.jpg)
@querymetrics @nicj
What is AMP?Accelerated Mobile Pages (AMP):
• A way to build websites optimized for performance
• Restricts how you build your pages to achieve this
Components:
• AMP HTML: Similar to HTML5, but with restrictions
• AMP JavaScript: JavaScript library you include
• Google AMP Cache: Free CDN for AMP pages
![Page 4: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/4.jpg)
@querymetrics @nicj
What you can include:
• Text (with custom fonts)
• Images
• Video
• Ads
• Third-party embeds (tweets, posts, etc)
What is AMP?
![Page 5: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/5.jpg)
@querymetrics @nicj
What is AMP?What you can’t include:
• External CSS
• JavaScript (except AMP JavaScript library)
• Flash / Java applets
• Forms and Inputs are experimental
![Page 6: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/6.jpg)
@querymetrics @nicj
Better performance on mobile devices
• Faster load time
• Less bandwidth usage
• Less memory usage
• Less CPU usage
• Less battery usage
• Better user experience
Why AMP: Performance
![Page 7: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/7.jpg)
@querymetrics @nicj
AMP enforces a lot of best practices:
• Async script loading
• CSS inline to avoid blocking font downloads
• CSS size limit
• Element dimensions are mandatory
Why AMP: Performance
![Page 8: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/8.jpg)
@querymetrics @nicj
Why AMP: PerformanceBuilt-in performance:
• Prioritized resource loading
• Prerender aware (instant load)
• Caching CDN (HTML, JavaScript, images, fonts)
• JavaScript resources shared by all AMP sites
![Page 9: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/9.jpg)
@querymetrics @nicj
Why AMP: BusinessAMP is smart for businesses:
• Google is prioritizing AMP in web and native app search results on mobile devices
• Support for ads (over 60 vendors)
• High-speed global caching CDN -- free of charge
![Page 10: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/10.jpg)
@querymetrics @nicj
Why AMP: DevelopersAMP pages are easy to develop:
• If you know HTML, you know AMP
• WordPress plugins available that automatically create AMP pages
• Built in validator helps developers reduce bugs
• Good documentation and examples
• Need a new feature? Open a Pull Request
![Page 11: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/11.jpg)
@querymetrics @nicj
Free CDN:
• HTTPS (HTTP/2, QUIC or SPDY)
• Supports HTTP or HTTPS origin servers
• Throttled cache revalidation
• Image cache with image optimization for mobile
Why AMP: CDN
![Page 12: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/12.jpg)
@querymetrics @nicj
Why AMP: CDNFree CDN:
• Font cache (4 whitelisted font providers)
• Rewrite font and image src to point to CDN
• HTML sanitization
• AMP validation
![Page 13: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/13.jpg)
@querymetrics @nicj
How we measure traditional websites doesn’t work for AMP:
• Web server logs or APM:
• Only gives server-side performance
• Doesn’t work with AMP Cache (CDN)
• JavaScript on the page or external JavaScript:
• Not allowed
Measuring AMP Performance
![Page 14: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/14.jpg)
@querymetrics @nicj
Measuring AMP PerformanceHow we measure traditional websites doesn’t work for AMP:
• JavaScript in an IFRAME:
• Sandboxed (RUM data unavailable)
• Synthetic monitoring:
• Works, but doesn’t tell the RUM story
![Page 15: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/15.jpg)
@querymetrics @nicj
Synthetic MonitoringGreat for A/B comparing AMP vs. non-AMP
Non-AMP AMP
![Page 16: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/16.jpg)
@querymetrics @nicj
Synthetic MonitoringNon-AMP AMP
![Page 17: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/17.jpg)
@querymetrics @nicj
Synthetic Monitoring
Non-AMP
AMP
![Page 18: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/18.jpg)
@querymetrics @nicj
Synthetic MonitoringNon-AMP AMP
![Page 19: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/19.jpg)
@querymetrics @nicj
Synthetic Monitoring
Non-AMP
AMP
![Page 20: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/20.jpg)
@querymetrics @nicj
Synthetic Monitoring
AMP is not a guarantee of performance.
Test Test Test!
![Page 21: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/21.jpg)
@querymetrics @nicj
Synthetic MonitoringDownsides:
• Doesn’t tell you how things are performing live
• Hard to estimate traffic patterns
• Is not Real User Monitoring (RUM)
• Controlled environment ( != real world / devices)
![Page 22: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/22.jpg)
@querymetrics @nicj
Measuring AMP Performance
Q: How do we collect RUM data without custom JavaScript?
A: We don’t, it’s built in!
![Page 23: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/23.jpg)
@querymetrics @nicj
<amp-pixel>: Overview<amp-pixel src="https://[your-url]">
• GET query URL
• Substitution variables to gather metrics
• No extra extension download required
• Triggered during page layout
• Because it's not tied to visibility, perf data might not be available
![Page 24: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/24.jpg)
@querymetrics @nicj
<amp-pixel>: Example
<amp-pixel
src="http://my-server.com/beacon?
url=${canonicalUrl}&title=${title}">
![Page 25: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/25.jpg)
@querymetrics @nicj
<amp-pixel>: Variable SubstitutionMany variable available:
• Document info (URL, canonical URL, title, referer)
• Navigation Timing (TCP, DNS, SSL, page load, etc)
• Navigation type and redirect count
• Persisted Client ID
• Total Engaged Time
• Screen/viewport dimensionshttps://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md
![Page 26: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/26.jpg)
@querymetrics @nicj
<amp-pixel>: User identificationAMP has a Client ID:
• Managed by AMP
• Saved via cookie
• Required because content may be from publisher's domain or AMP Cache
• amp-[base64 random]
![Page 27: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/27.jpg)
@querymetrics @nicj
If you don't want to roll-your-own, there's <amp-analytics>:
• Available as an extension
• Over 25 built in vendor configs
• Easy to configure
• Predefined list of metrics is sent to vendor
<amp-analytics>: Vendor
![Page 28: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/28.jpg)
@querymetrics @nicj
<amp-analytics> <script type="application/json"> [config] </script></amp-analytics>
• Harder to configure but customizable
• Variable substitution
• Can send metrics to your own server
• GET or POST
• Configurable trigger events
<amp-analytics>: DIY
![Page 29: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/29.jpg)
@querymetrics @nicj
<amp-analytics>: TriggersWhen will a beacon be sent?
• on visible / on hidden
• Page
• AMP element (time, percentage)
• on click (CSS selector)
• on scroll (horizontal, vertical percentage)
• on timer (interval)
![Page 30: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/30.jpg)
@querymetrics @nicj
Measuring AMP Performance
navTiming(navigationStart)navTiming(responseStart, responseEnd)
![Page 31: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/31.jpg)
@querymetrics @nicj
<amp-analytics> <script type="application/json">{ "requests": { "onvisible":"//my-server.com/beacon?u=${sourceUrl} &load=${navTiming(navigationStart,loadEventStart)}" }, "triggers": { "onvisible": { "on": "visible", "request": "onvisible" } }}</script></amp-analytics>
<amp-analytics>: DIY
![Page 32: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/32.jpg)
@querymetrics @nicj
DIY RUM dashboard
● <amp-analytics> tag sends beacon from AMP page
● Node.js: Web server receives beacon from AMP page and forwards to DB
● InfluxDB: Time series DB that stores Navigation Timing data from beacon
● Grafana: Dashboard to view aggregated data
AMP: Live Demohttps://amp.querymetrics.com/
![Page 33: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/33.jpg)
@querymetrics @nicj
AMP: DIY RUM Dashboard
![Page 34: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/34.jpg)
@querymetrics @nicj
How are AMP pages performing in the real world?
AMP Real-World Data
![Page 35: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/35.jpg)
@querymetrics @nicj
Real-world RUM data
![Page 36: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/36.jpg)
@querymetrics @nicj
Real-World DataRUM analysis of an AMP-enabled website
• News website with blog / articles
• 30+ days of data
• Thousands of articles with both AMP and non-AMP visitors
![Page 37: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/37.jpg)
@querymetrics @nicj
Sample Regular vs. AMP Page
Regular Site
350 Requests3.2 MB data
1,258ms First Byte
34.9s Page Load
6701 Speed Index
AMP
19 Requests250 KB data
598ms First Byte
3.6s Page Load
1790 Speed Index
![Page 38: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/38.jpg)
@querymetrics @nicj
Regular Site
Interactive Nav
High Res Images
Other Content Links
Third Party Content
AMP
Simple Nav
Article Text
Hero Image(s)
No Third Parties
Sample Regular vs. AMP Page
![Page 39: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/39.jpg)
@querymetrics @nicj
Sample Page Content
![Page 40: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/40.jpg)
@querymetrics @nicj
RUM Data
![Page 41: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/41.jpg)
@querymetrics @nicj
Real-World Data: Browsers
![Page 42: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/42.jpg)
@querymetrics @nicj
Real-World Data: OS
![Page 43: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/43.jpg)
@querymetrics @nicj
Real-World Data: Page Load Times
3.8xfaster
![Page 44: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/44.jpg)
@querymetrics @nicj
Real-World Data: Timings
![Page 45: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/45.jpg)
@querymetrics @nicj
Real-World Data: Timings
![Page 46: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/46.jpg)
@querymetrics @nicj
Real-World Data: Mobile Load Times
5.7xfaster
![Page 47: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/47.jpg)
@querymetrics @nicj
Real-World Data: AMP CDN Usage
![Page 48: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/48.jpg)
@querymetrics @nicj
Real-World Data: CDN Load Times
13%faster
![Page 49: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/49.jpg)
@querymetrics @nicj
Real-World Data: Session Length
48%lesspages
![Page 50: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/50.jpg)
@querymetrics @nicj
Real-World Data: Transitioning
Only 3% of AMP visitors transitioned to non-AMP URL
![Page 51: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/51.jpg)
@querymetrics @nicj
Real-World Data: Referrers
![Page 52: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/52.jpg)
@querymetrics @nicj
Real-World Data: Play Newsstand
![Page 53: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/53.jpg)
@querymetrics @nicj
Conclusions• AMP is a forcing function for best practices
• AMP is a great way to get rid of your third-party bloat
• You could get much of the same performance by applying the same optimizations to your own site without AMP
• AMP CDN can give you a free performance boost
• Business / SEO benefits
![Page 54: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/54.jpg)
@querymetrics @nicj
Downsides:
• Additional development resources to build
• Technical resources to maintain
Hand-Tuning
CPP: https://timkadlec.com/2016/02/a-standardized-alternative-to-amp/
Facebook Instant Articles (analytics sandboxed)
Do we need AMP?
![Page 55: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/55.jpg)
@querymetrics @nicj
Features we’d like to implement
● Collect ResourceTiming (amphtml PR 3593)
● Trigger / collect UserTiming
● Collect an indication that the page was prerendered and time spent in prerender
Future
![Page 56: AMP: Does it really make your site faster?](https://reader034.fdocuments.us/reader034/viewer/2022042723/58718dc21a28ab2c198b6d11/html5/thumbnails/56.jpg)
@querymetrics @nicj
Thank You
https://slideshare.net/nicjansma/amp-does-it-really-make-your-site-faster
https://github.com/querymetrics/amp-analytics-demo