1 of 58

AMP: Does it Really Make Your Site Faster?

Nigel Heron + Nic Jansma

@querymetrics @nicj

2 of 58

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

@querymetrics @nicj

3 of 58

Agenda

  • What is AMP?
  • Why is AMP fast?
  • How can we monitor AMP?
  • Demo AMP + monitoring
  • Real-world AMP performance data

@querymetrics @nicj

4 of 58

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

@querymetrics @nicj

5 of 58

What is AMP?

What you can include:

  • Text (with custom fonts)
  • Images
  • Video
  • Ads
  • Third-party embeds (tweets, posts, etc)
  • Forms and Inputs (validation is experimental)

@querymetrics @nicj

6 of 58

What is AMP?

What you can’t include:

  • External CSS
  • JavaScript (except AMP JavaScript library)
  • Flash / Java applets
  • Arbitrary cookies or local storage

@querymetrics @nicj

7 of 58

Why AMP: Performance

What does performance mean for mobile devices?

  • Faster load time
  • Less bandwidth usage
  • Less memory usage
  • Less CPU usage
  • Less battery usage
  • Better user experience

@querymetrics @nicj

8 of 58

Why AMP: Performance

AMP enforces a lot of best practices:

  • Async script loading
  • CSS inline to avoid blocking font downloads
  • CSS size limit
  • Element dimensions are mandatory

@querymetrics @nicj

9 of 58

Why AMP: Performance

Built-in performance:

  • Prioritized resource loading
  • Prerender aware (instant load)
  • Caching CDN (HTML, JavaScript, images, fonts)
  • JavaScript resources shared by all AMP pages

@querymetrics @nicj

10 of 58

Why AMP: Business

AMP 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

​

​

@querymetrics @nicj

11 of 58

Why AMP: Developers

AMP 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

@querymetrics @nicj

12 of 58

Why AMP: CDN

Free CDN:

  • HTTPS (HTTP/2, QUIC or SPDY)
  • Supports HTTP or HTTPS origin servers
  • Throttled cache revalidation
  • Image cache with image optimization for mobile

​

@querymetrics @nicj

13 of 58

Why AMP: CDN

Free CDN:

  • Font cache (4 whitelisted font providers)
  • Rewrite font and image src to point to CDN
  • HTML sanitization
  • AMP validation

@querymetrics @nicj

14 of 58

Measuring AMP Performance

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

@querymetrics @nicj

15 of 58

Measuring AMP Performance

How we measure traditional websites doesn’t work for AMP:

  • JavaScript in an IFRAME:
    • Sandboxed (RUM data unavailable)
  • Synthetic monitoring:
    • Works, with usual caveats (not RUM)

@querymetrics @nicj

16 of 58

Synthetic Monitoring

Great for A/B comparing AMP vs. non-AMP

Non-AMP

AMP

@querymetrics @nicj

17 of 58

Synthetic Monitoring

Non-AMP

AMP

@querymetrics @nicj

18 of 58

Synthetic Monitoring

Non-AMP

AMP

29.5s

5.9mb

3.3s

0.8mb

AMP

@querymetrics @nicj

19 of 58

Synthetic Monitoring

Non-AMP

AMP

@querymetrics @nicj

20 of 58

Synthetic Monitoring

Non-AMP

AMP

11.8s

0.4mb

70.7s

5.9mb

@querymetrics @nicj

21 of 58

Synthetic Monitoring

AMP is not a guarantee of performance.

Test Test Test!

@querymetrics @nicj

22 of 58

Synthetic Monitoring

Downsides:

  • 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)

@querymetrics @nicj

23 of 58

Measuring AMP Performance

Q: How do we collect RUM data without custom JavaScript?

A: We don’t, it’s built in!

@querymetrics @nicj

24 of 58

<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

​

@querymetrics @nicj

25 of 58

<amp-pixel>: Example

<amp-pixel� src="https://my-server.com/beacon?� url=${canonicalUrl}&title=${title}">

@querymetrics @nicj

26 of 58

<amp-pixel>: Variable Substitution

Many 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 dimensions

https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md

@querymetrics @nicj

27 of 58

<amp-pixel>: User identification

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

​

@querymetrics @nicj

28 of 58

<amp-analytics>: Vendor

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

@querymetrics @nicj

29 of 58

<amp-analytics>: DIY

<amp-analytics>� <script type="application/json"> [config] </script>

</amp-analytics>

  • Harder to configure but customizable
  • Can send metrics to your own server
  • Variable substitution
  • GET or POST
  • Configurable trigger events

@querymetrics @nicj

30 of 58

<amp-analytics>: Triggers

When 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)

@querymetrics @nicj

31 of 58

Measuring AMP Performance

navTiming(navigationStart)�navTiming(responseStart, responseEnd)

@querymetrics @nicj

32 of 58

<amp-analytics>: DIY

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

@querymetrics @nicj

33 of 58

AMP: Live Demo

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

https://amp.querymetrics.com/

@querymetrics @nicj

34 of 58

AMP: DIY RUM Dashboard

@querymetrics @nicj

35 of 58

AMP Real-World Data

How are AMP pages performing in the real world?

@querymetrics @nicj

36 of 58

Real-world RUM data

Non-AMP

AMP

@querymetrics @nicj

37 of 58

Real-World Data

RUM analysis of AMP-enabled websites

  • News-style websites with blog / articles
  • > 100 days of data
  • Thousands of articles with both AMP and non-AMP visitors

​

@querymetrics @nicj

38 of 58

Sample Regular vs. AMP Page

Regular Site

​

350 Requests

3.2 MB data

​

1,258ms First Byte

​

34.9s Page Load

​

6701 Speed Index

AMP

​

19 Requests

250 KB data

​

598ms First Byte

​

3.6s Page Load

​

1790 Speed Index

@querymetrics @nicj

39 of 58

Sample Regular vs. AMP Page

Regular Site

​

Interactive Nav

​

High Res Images

​

Other Content Links

​

Third Party Content

​

AMP

​

Simple Nav

​

Article Text

​

Hero Image(s)

​

No Third Parties

@querymetrics @nicj

40 of 58

Sample Page Content

@querymetrics @nicj

41 of 58

RUM Data

@querymetrics @nicj

42 of 58

Real-World Data: Browsers

@querymetrics @nicj

43 of 58

Real-World Data: OS

@querymetrics @nicj

44 of 58

Real-World Data: Page Load Times

80%

faster

@querymetrics @nicj

45 of 58

Real-World Data: Mobile Load Times

85%

faster

@querymetrics @nicj

46 of 58

Real-World Data: Timings

@querymetrics @nicj

47 of 58

Real-World Data: AMP CDN Usage

@querymetrics @nicj

48 of 58

Real-World Data: CDN Load Times

13%

faster

@querymetrics @nicj

49 of 58

Performance data tells one story.

​

What about user engagement?

@querymetrics @nicj

50 of 58

Real-World Data: Session Length

52%

fewer

pages

@querymetrics @nicj

51 of 58

Real-World Data: Bounce Rate

Regular

AMP

58%

82%

@querymetrics @nicj

52 of 58

Real-World Data: Transitioning

Only 3-10% of AMP visitors transitioned to non-AMP URL

* Based on data from 3 sites

@querymetrics @nicj

53 of 58

Real-World Data: Referrers

@querymetrics @nicj

54 of 58

Real-World Data: Apps

Google Play Newsstand

Bing Search (Android)

@querymetrics @nicj

55 of 58

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

@querymetrics @nicj

56 of 58

Do we need AMP?

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)

@querymetrics @nicj

57 of 58

Future

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

@querymetrics @nicj

58 of 58

Thank You

https://slideshare.net/nicjansma/amp-does-it-really-make-your-site-faster

​

https://github.com/querymetrics/amp-analytics-demo

@querymetrics @nicj