AMP tries to fix the web - What can we learn from it

Transcript

1. AMP tries to fix the web
   What can we learn from it?
   (◠‿◠✿)
   @stefanjudis
   

   View Slide

2. Stefan Judis
   Frontend Developer, Occasional Teacher, Meetup Organizer
   ❤ Open Source, Performance and Accessibility ❤
   @stefanjudis
   

   View Slide

3. PERF TOOLING TODAY
   

   View Slide

4. OFF WITH
   ITS HEAD!
   Contentful the
   headless CMS...
   

   View Slide

5. CONTENT SOCKS
   

   View Slide

6. 6
   the here and now
   

   View Slide

7. SLOW LOADING PAGES
   110 requests & 956KB Page size
   

   View Slide

8. GOOGLE CONTINUES
   TO INFLUENCE SEARCH
   RESULTS
   

   View Slide

9. https://www.youtube.com/watch?v=3tUmh8OfAiY
   

   View Slide

10. INTERVENTIONS
    https://github.com/WICG/interventions
    

    View Slide

11. WHAT'S DISCUSSED IN THERE?
    Stop dummy history
    fast-forwarding
    Ignore clicks on iframes
    that have moved in the last 200ms
    Defer image loading
    until they are viewable
    Defer iframe loading
    until they are viewable
    Lower loading priority
    of cross-origin iframe
    

    View Slide

12. DOCUMENT.WRITE
    ON SLOW CONNECTIONS
    MAY BE BLOCKED IN FUTURE
    https://github.com/WICG/interventions/issues/17
    

    View Slide

13. https://github.com/h5bp/html5-boilerplate/blob/master/src/index.html#L26
    WATCH OUT!
    YOU MIGHT HAVE
    IT IN YOUR STACK!
    

    View Slide

14. SCROLL-ANCHORING
    https://github.com/WICG/interventions/blob/master/scroll-anchoring/explainer.md
    

    View Slide

15. 15
    The web is "broken"
    

    View Slide

16. View Slide

17. “For many, reading on the mobile web is
    a slow, clunky and frustrating experience
    - but it doesn’t have to be that way.”
    Accelerated Mobile Pages Project
    

    View Slide

18. https://search.googleblog.com/2016/09/search-results-are-officially-ampd.html
    SEARCH RESULTS ARE
    NOW OFFICIALLY
    AMP'D
    

    View Slide

19. HOW CAN IT BE SO FAST?
    

    View Slide

20. THREE MAIN PARTS
    AMP HTML AMP JS Google AMP Cache
    

    View Slide

21. 
    
    
    
    
    Hello World
    
    
    
    
    
    Hello World!
    
    
    GETTING STARTED
    HTML file
    

    View Slide

22. 
    
    
    
    
    Hello World
    
    
    
    
    
    Hello World!
    
    
    GETTING STARTED
    HTML file
    

    View Slide

23. GETTING STARTED
    double the maintenance
    AMP HTML
    HTML
    

    View Slide

24. 
    
    
    
    
    
    <br/>body{<br/>animation:-amp-start 8s steps(1,end) 0s 1 normal both<br/>}<br/>@keyframes -amp-start{<br/>from{visibility:hidden}<br/>to{visibility:visible}<br/>}<br/>
    
    body{-webkit-animation:none;-moz-animation:none;-ms-<br/>animation:none;animation:none}
    
    
    
    Hello World!
    
    GETTING STARTED
    AMP file
    

    View Slide

25. 
    
    
    
    
    
    <br/>body{<br/>animation:-amp-start 8s steps(1,end) 0s 1 normal both<br/>}<br/>@keyframes -amp-start{<br/>from{visibility:hidden}<br/>to{visibility:visible}<br/>}<br/>
    
    body{-webkit-animation:none;-moz-animation:none;-ms-<br/>animation:none;animation:none}
    
    
    
    Hello World!
    
    GETTING STARTED
    AMP file
    

    View Slide

26. 
    
    
    
    
    
    <br/>body{<br/>animation:-amp-start 8s steps(1,end) 0s 1 normal both<br/>}<br/>@keyframes -amp-start{<br/>from{visibility:hidden}<br/>to{visibility:visible}<br/>}<br/>
    
    body{-webkit-animation:none;-moz-animation:none;-ms-<br/>animation:none;animation:none}
    
    
    
    Hello World!
    
    GETTING STARTED
    AMP file
    

    View Slide

27. 
    
    
    
    
    
    <br/>body{<br/>animation:-amp-start 8s steps(1,end) 0s 1 normal both<br/>}<br/>@keyframes -amp-start{<br/>from{visibility:hidden}<br/>to{visibility:visible}<br/>}<br/>
    
    body{-webkit-animation:none;-moz-animation:none;-ms-<br/>animation:none;animation:none}
    
    
    
    Hello World!
    
    GETTING STARTED
    AMP file
    

    View Slide

28. 
    
    
    
    
    
    <br/>body{<br/>animation:-amp-start 8s steps(1,end) 0s 1 normal both<br/>}<br/>@keyframes -amp-start{<br/>from{visibility:hidden}<br/>to{visibility:visible}<br/>}<br/>
    
    body{-webkit-animation:none;-moz-animation:none;-ms-<br/>animation:none;animation:none}
    
    
    
    Hello World!
    
    GETTING STARTED
    AMP file
    

    View Slide

29. 
    
    
    
    
    
    <br/>body{<br/>animation:-amp-start 8s steps(1,end) 0s 1 normal both<br/>}<br/>@keyframes -amp-start{<br/>from{visibility:hidden}<br/>to{visibility:visible}<br/>}<br/>
    
    body{-webkit-animation:none;-moz-animation:none;-ms-<br/>animation:none;animation:none}
    
    
    
    Hello World!
    
    GETTING STARTED
    AMP file
    

    View Slide

30. 
    
    
    
    
    
    <br/>body{<br/>animation:-amp-start 8s steps(1,end) 0s 1 normal both<br/>}<br/>@keyframes -amp-start{<br/>from{visibility:hidden}<br/>to{visibility:visible}<br/>}<br/>
    
    body{-webkit-animation:none;-moz-animation:none;-ms-<br/>animation:none;animation:none}
    
    
    
    Hello World!
    
    GETTING STARTED
    AMP file
    

    View Slide

31. 
    
    
    
    
    
    <br/>body{<br/>animation:-amp-start 8s steps(1,end) 0s 1 normal both<br/>}<br/>@keyframes -amp-start{<br/>from{visibility:hidden}<br/>to{visibility:visible}<br/>}<br/>
    
    body{-webkit-animation:none;-moz-animation:none;-ms-<br/>animation:none;animation:none}
    
    
    
    Hello World!
    
    GETTING STARTED
    AMP file
    

    View Slide

32. GETTING STARTED
    AMP file
    HTML TAGS CAN BE USED UNCHANGED IN AMP HTML
    EXCEPT
    IMG, SCRIPT, VIDEO, IFRAME, ...
    https://www.ampproject.org/docs/reference/spec
    

    View Slide

33. THREE BUILTINS
    AMP-IMG AMP-PIXEL
    AMP-VIDEO
    src="/img/amp.jpg"
    width="1080"
    height="610"
    layout="responsive"
    alt="an image"
    >
    src="https://foo.com/px?123"
    >
    width="400"
    height="300"
    src="https://yourhost.com/myvideo.mp4"
    poster="poster.jpg">
    
    No support for HTML5
    
    
    
    
    

    View Slide

34. CUSTOM MARKUP
    IF YOU NEED MORE ELEMENTS
    custom-element="amp-sidebar"
    src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js">
    custom-element="amp-analytics"
    src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
    

    View Slide

35. THREE BUILTINS
    AMP-IMG AMP-PIXEL
    AMP-VIDEO
    src="/img/amp.jpg"
    width="1080"
    height="610"
    layout="responsive"
    alt="an image"
    >
    src="https://foo.com/px?123"
    >
    width="400"
    height="300"
    src="https://yourhost.com/myvideo.mp4"
    poster="poster.jpg">
    
    No support for HTML5
    
    
    
    
    

    View Slide

36. CUSTOM MARKUP
    // src/custom-element.js
    export function registerElement(win, name, implementationClass) {
    win.document.registerElement(name, {
    prototype: createAmpElementProto(win, name),
    });
    }
    https://github.com/ampproject/amphtml/blob/master/src/custom-element.js#L1429-L1435
    // builtins/amp-img.js
    export function installImg(win) {
    registerElement(win, 'amp-img', AmpImg);
    }
    https://github.com/ampproject/amphtml/blob/master/builtins/amp-img.js#L145-L147
    

    View Slide

37. CUSTOM ELEMENTS
    http://w3c.github.io/webcomponents/spec/custom/
    

    View Slide

38. Custom elements v0
    Custom elements v1
    

    View Slide

39. POLYFILL
    https://github.com/WebReflection/document-register-element
    WebReflection/document-register-element
    

    View Slide

40. CUSTOM MARKUP
    Custom Elements v0 Custom Elements v1
    
    var MyElement = document.registerElement(
    'hey-there',
    {
    prototype: Object.create(
    HTMLElement.prototype, {
    createdCallback: { value: function() {
    console.log('registered');
    }},
    attachedCallback: { value: function() {
    console.log('live on DOM :-)');
    }},
    detachedCallback: { value: function() {
    console.log('leaving the DOM :-(');
    }},
    attributeChangedCallback: {value: function(
    name, previousValue, value
    ) {}}
    })
    }
    );
    class HeyThere extends HTMLElement {
    constructor() {
    super();
    console.log('registered');
    }
    connectedCallback() {
    console.log('live on DOM :-)');
    }
    disconnectedCallback() {
    console.log('leaving the DOM :-(');
    }
    attributeChangedCallback() {}
    }
    customElements.define('hey-there', HeyThere);
    http://codepen.io/stefanjudis/pen/ZpZzmY http://codepen.io/stefanjudis/pen/dpvyok
    

    View Slide

41. CUSTOM MARKUP
    LIFECYCLE HTML ELEMENT
    createdCallback
    attachedCallback
    

    View Slide

42. CUSTOM MARKUP
    upgrade
    firstAttachedCallback
    buildCallback
    layoutCallback
    viewportCallback
    LIFECYCLE AMP ELEMENT
    createdCallback
    LIFECYCLE HTML ELEMENT
    createdCallback
    attachedCallback
    

    View Slide

43. CUSTOM MARKUP
    /** @override */
    buildCallback() {
    /** @private @const {boolean} */
    this.isPrerenderAllowed_ = !this.element.hasAttribute('noprerender');
    }
    /** @override */
    layoutCallback() {
    this.initialize_();
    let promise = this.updateImageSrc_();
    // We only allow to fallback on error on the initial layoutCallback
    // or else this would be pretty expensive.
    if (this.allowImgLoadFallback_) {
    promise = promise.catch(e => {
    this.onImgLoadingError_();
    throw e;
    });
    this.allowImgLoadFallback_ = false;
    }
    return promise;
    }
    https://github.com/ampproject/amphtml/blob/master/builtins/amp-img.js
    

    View Slide

44. HOW TO SPEED UP?
    Control everything
    

    View Slide

45. 45
    resource priority
    

    View Slide

46. RESOURCE PRIORITY
    without preloader
    http://yoavweiss.github.io/preloader-velocity-nyc-talk
    

    View Slide

47. RESOURCE PRIORITY
    with preloader
    http://yoavweiss.github.io/preloader-velocity-nyc-talk
    

    View Slide

48. 
    
    
    
    
    
    
    
    
    RESOURCE PRIORITY
    where the preloader fails
    

    View Slide

49. RESOURCE PRIORITY
    where the preloader fails
    

    View Slide

50. RESOURCE PRIORITY
    where the preloader fails
    

    View Slide

51. 
    
    
    
    
    src="http://some/path/image.jpg">
    RESOURCE PRIORITY
    the AMP runtime
    

    View Slide

52. RESOURCE PRIORITY
    the AMP runtime
    

    View Slide

53. NON CRITICAL RESOURCES
    GET OUT OF THE WAY
    RESOURCE PRIORITY
    the AMP runtime
    

    View Slide

54. RESOURCE PRIORITY
    the AMP runtime
    class AmpPixel extends BaseElement {
    getPriority() {
    // Loads after other content.
    return 1;
    }
    }
    

    View Slide

55. 55
    reflow management
    

    View Slide

56. 
    
    
    
    
    
    <br/>body{<br/>animation:-amp-start 8s steps(1,end) 0s 1 normal both<br/>}<br/>@keyframes -amp-start{<br/>from{visibility:hidden}<br/>to{visibility:visible}<br/>}<br/>
    
    body{-webkit-animation:none;-moz-animation:none;-ms-<br/>animation:none;animation:none}
    
    
    
    Hello World!
    
    REFLOW MANAGEMENT
    

    View Slide

57. 
    
    
    
    
    
    <br/>body{<br/>animation:-amp-start 8s steps(1,end) 0s 1 normal both<br/>}<br/>@keyframes -amp-start{<br/>from{visibility:hidden}<br/>to{visibility:visible}<br/>}<br/>
    
    body{-webkit-animation:none;-moz-animation:none;-ms-<br/>animation:none;animation:none}
    
    
    
    Hello World!
    
    REFLOW MANAGEMENT
    

    View Slide

58. REFLOW MANAGEMENT
    

    View Slide

59. REFLOW MANAGEMENT
    

    View Slide

60. REFLOW MANAGEMENT
    EXTERNALLY FETCHED RESOURCES
    MUST BE GIVEN AN EXPLICIT SIZE
    amp-img {
    background-color: grey;
    }
    width="1080"
    height="610"
    layout="responsive"
    alt="A chameleon catching bubbles">
    

    View Slide

61. REFLOW MANAGEMENT
    NO REFLOWS!
    

    View Slide

62. width="1080"
    height="610"
    layout="responsive"
    alt="A chameleon catching bubbles">
    
    src="https://chameleon-catching-bubbles.jpg">
    
    REFLOW MANAGEMENT
    https://www.smashingmagazine.com/2016/08/ways-to-reduce-content-shifting-on-page-load/
    AVOID REFLOWS TODAY
    

    View Slide

63. width="1080"
    height="610"
    layout="responsive"
    alt="A chameleon catching bubbles">
    
    src="https://chameleon-catching-bubbles.jpg">
    
    REFLOW MANAGEMENT
    https://www.smashingmagazine.com/2016/08/ways-to-reduce-content-shifting-on-page-load/
    AVOID REFLOWS TODAY
    

    View Slide

64. HOW TO SPEED UP?
    Enforce best practices
    

    View Slide

65. 65
    inline css
    

    View Slide

66. INLINE CSS
    https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css
    AVOID RENDER BLOCKING CSS
    

    View Slide

67. INLINE CSS
    <br/>body {<br/>color: #404040;<br/>font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;<br/>font-size: 14px;<br/>}<br/>.container {<br/>padding: 0 8px;<br/>}<br/>@media (min-width: 480px) {<br/>.container {<br/>padding: 0 16px;<br/>}<br/>}<br/>//<br/>// more things here<br/>//<br/>
    

    View Slide

68. 68
    custom fonts
    

    View Slide

69. CUSTOM FONTS
    @font-face {
    font-family: 'BioRhyme';
    font-style: normal;
    font-weight: 400;
    src: local('BioRhyme'),
    local('BioRhyme-Regular'),
    url(https://some.font.url/font.woff2) format('woff2');
    }
    "traditional" approach
    .custom-font-bold {
    font-family: 'BioRhyme', Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    }
    .custom-font {
    font-family: 'BioRhyme', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    }
    @font-face {
    font-family: 'BioRhyme';
    font-style: normal;
    font-weight: 700;
    src: local('BioRhyme Bold'),
    local('BioRhyme-Bold'),
    url(https://some.font.url/font-bold.woff2) format('woff2');
    }
    

    View Slide

70. "traditional" approach
    CUSTOM FONTS
    

    View Slide

71. "traditional" approach
    CUSTOM FONTS
    FOIT!
    

    View Slide

72. "new" approach
    layout="nodisplay"
    font-family="BioRhyme"
    font-weight="400"
    on-load-add-class="bio-rhyme-font-loaded">
    CUSTOM FONTS
    https://ampbyexample.com/components/amp-font/
    layout="nodisplay"
    font-family="BioRhyme"
    font-weight="700"
    on-load-add-class="bio-rhyme-bold-font-loaded">
    

    View Slide

73. "new" approach
    .custom-font {
    line-height: 1.3;
    letter-spacing: 2.675px;
    }
    .bio-rhyme-font-loaded .custom-font {
    font-family: 'BioRhyme', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    line-height: 1.25;
    }
    CUSTOM FONTS
    https://ampbyexample.com/components/amp-font/
    

    View Slide

74. "new" approach
    CUSTOM FONTS
    fixed-
    

    View Slide

75. "new" approach
    CUSTOM FONTS
    fixed-
    

    View Slide

76. "new" approach
    CUSTOM FONTS
    fixed-
    FOUT!
    

    View Slide

77. "new" approach
    if (this.canUseNativeApis_()) {
    // Check if font already exists.
    if (this.document_.fonts.check(fontString)) {
    resolve();
    } else {
    // Load font with native api if supported.
    this.document_.fonts.load(fontString).then(() => {
    // Workaround for chrome bug
    // https://bugs.chromium.org/p/chromium/issues/detail?id=347460
    return this.document_.fonts.load(fontString);
    }).then(() => {
    if (this.document_.fonts.check(fontString)) {
    resolve();
    } else {
    reject(new Error('Font could not be loaded,'
    + ' probably due to incorrect @font-face.'));
    }
    }).catch(reject);
    }
    }
    https://github.com/ampproject/amphtml/blob/master/extensions/amp-font/0.1/fontloader.js#L112-L131
    CUSTOM FONTS
    

    View Slide

78. "new" approach
    if (this.canUseNativeApis_()) {
    // Check if font already exists.
    if (this.document_.fonts.check(fontString)) {
    resolve();
    } else {
    // Load font with native api if supported.
    this.document_.fonts.load(fontString).then(() => {
    // Workaround for chrome bug
    // https://bugs.chromium.org/p/chromium/issues/detail?id=347460
    return this.document_.fonts.load(fontString);
    }).then(() => {
    if (this.document_.fonts.check(fontString)) {
    resolve();
    } else {
    reject(new Error('Font could not be loaded,'
    + ' probably due to incorrect @font-face.'));
    }
    }).catch(reject);
    }
    }
    https://github.com/ampproject/amphtml/blob/master/extensions/amp-font/0.1/fontloader.js#L112-L131
    CUSTOM FONTS
    

    View Slide

79. CSS FONT LOADING
    https://drafts.csswg.org/css-font-loading/
    

    View Slide

80. "new" approach
    CUSTOM FONTS
    CSS FONT LOADING
    https://github.com/zachleat/fontfaceonload
    POLYFILL
    

    View Slide

81. "new" approach
    CUSTOM FONTS
    @font-face {
    font-family: 'BioRhyme';
    font-display: swap;
    src: local('BioRhyme'),
    local('BioRhyme-Regular'),
    url(https://some.font.url/font.woff2) format('woff2');
    }
    https://developers.google.com/web/updates/2016/02/font-display
    

    View Slide

82. "new" approach
    CUSTOM FONTS
    @font-face {
    font-family: 'BioRhyme';
    font-display: swap;
    src: local('BioRhyme'),
    local('BioRhyme-Regular'),
    url(https://some.font.url/font.woff2) format('woff2');
    }
    https://developers.google.com/web/updates/2016/02/font-display
    

    View Slide

83. "new" approach
    CUSTOM FONTS
    CSS FONT-RENDERING CONTROLS
    font-display
    

    View Slide

84. FONT
    LOADING
    STRATEGY
    Rethink the usage of fonts!
    01
    Avoid FOIT!
    02
    03 Go for FOUT and adjust fallback fonts!
    https://www.zachleat.com/web/comprehensive-webfonts/
    

    View Slide

85. 85
    GPU-accelerated animations
    

    View Slide

86. GPU-ACCELERATED ANIMATIONS
    .sidebar {
    position: fixed;
    left: -300px;
    top: 0;
    bottom: 0;
    width: 300px;
    transition: left .5s ease-in-out;
    }
    .sidebar.is-open {
    left: 0;
    }
    

    View Slide

87. GPU-ACCELERATED ANIMATIONS
    

    View Slide

88. NOT 60 FRAMES
    PER SECOND ANYMORE
    

    View Slide

89. 
    
    Nav item 1
    Nav item 2
    Nav item 3
    
    
    
    GPU-ACCELERATED ANIMATIONS
    custom-element="amp-sidebar"
    src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js">
    

    View Slide

90. GPU-ACCELERATED ANIMATIONS
    .sidebar {
    position: fixed;
    right: 100%;
    top: 0;
    bottom: 0;
    width: 300px;
    transform: translate( 0, 0 );
    transition: transform .5s ease-in-out;
    will-change: transform;
    }
    .sidebar.is-open {
    transform: translate( 100%, 0 );
    }
    

    View Slide

91. GPU-ACCELERATED ANIMATIONS
    .sidebar {
    position: fixed;
    right: 100%;
    top: 0;
    bottom: 0;
    width: 300px;
    transform: translate( 0, 0 );
    transition: transform .5s ease-in-out;
    will-change: transform;
    }
    .sidebar.is-open {
    transform: translate( 100%, 0 );
    }
    

    View Slide

92. FPS
    

    View Slide

93. ANIMATIONS
    Use transform and opacity
    01
    Promote moving elements
    with 'will-change'
    02
    03 Don't overdo it
    https://developers.google.com/web/fundamentals/.../stick-to-compositor-only-properties-and-manage-layer-count
    https://csstriggers.com/
    

    View Slide

94. HOW TO SPEED UP?
    Ban everything harmful
    

    View Slide

95. 95
    the validator
    

    View Slide

96. https://addons.opera.com/en-gb/extensions/details/amp-validator/
    https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc
    #development=1
    

    View Slide

97. Google AMP Cache
    

    View Slide

98. Google AMP Cache
    

    View Slide

99. Google AMP Cache
    VALIDATION ERRORS
    

    View Slide

100. 100
     inline css
     

     View Slide

101. CSS CSS (gzipped)
     github.com ~109KB 23KB
     guardian.com ~295KB 46KB
     wired.com ~329KB 135KB
     dribbble.com ~385KB 68KB
     medium.com ~550KB 236KB
     m.facebook.com ~820KB 168KB
     mobile.nytimes.com ~900KB 189KB
     NOT INLINED CSS SHIPPED THESE DAYS
     (tested with iPhone 5 User agent)
     

     View Slide

102. AMOUNT OF INLINED CSS
     MAX
     KB
     50
     

     View Slide

103. 103
     script loading
     

     View Slide

104. SCRIPT LOADING
     
     

     View Slide

105. SCRIPT LOADING
     

     View Slide

106. SCRIPT LOADING
     REAL LIFE EXPERIENCE
     

     View Slide

107. SCRIPT LOADING
     REAL LIFE EXPERIENCE
     THIS REALLY HAPPENS!
     

     View Slide

108. SCRIPT LOADING
     
     

     View Slide

109. <br/>(function() {<br/>var src = (document.location.protocol === 'https:' ? 'https:/' :<br/>'http:/') + '/imagesrv.adition.com/js/srp.js';<br/>document.write('<scr' + 'ipt type="text/javascript" src="' + src + '"<br/>charset="utf-8"></scr' + 'ipt>');<br/>})();<br/>
     document.write
     SCRIPT LOADING
     

     View Slide

110. “But what happens when the JavaScript
     fails to load?”
     

     View Slide

111. NO PROGRESSIVE
     ENHANCEMENT
     

     View Slide

112. “We need to come up with a standard
     alternative real quick”
     Yoav Weiss
     Akamai
     https://twitter.com/yoavweiss/status/659141410990350336
     

     View Slide

113. “I’ve been on the jQuery team for many
     years, and personally have seen how a
     library can drive meaningful, healthy
     change to the ecosystem at large. This is
     what we want.”
     Paul Bakaus
     Open Web Developer Advocate at Google
     https://medium.com/@pbakaus/doesnt-come-across-snarky-all-good-9d4269f7dbe6
     

     View Slide

114. Feature Policy Ressource Limits CPU and Bandwidth
     Priority
     User Experience
     CONTENT PERFORMANCE POLICY
     http://wicg.github.io/ContentPerformancePolicy/
     

     View Slide

115. https://wicg.github.io/feature-policy/
     Feature-Policy: {
     "vibrate": ["self", "https://foo.com"],
     "sync-xhr": [],
     "usermedia": ["*"]
     }
     FEATURE POLICY
     content='"vibrate": ["self", "https://foo.com"], "sync-xhr": []'>
     VIA HEADERS
     VIA META ELEMENT
     
     VIA ATTRIBUTE
     Might change!
     currently in investigation
     

     View Slide

116. RESOURCE SIZE LIMITS
     NO CONCRETE PROPOSAL YET
     currently in investigation
     

     View Slide

117. CPU AND BANDWIDTH PRIORITY
     VIA META ELEMENT
     content="cpu-share 0.2;
     cpu-priority medium;
     net-share 0.8;
     net-priority medium;">
     
     
     Might change!
     currently in investigation
     

     View Slide

118. USER EXPERIENCE
     NO CONCRETE PROPOSAL YET
     currently in investigation
     

     View Slide

119. https://github.com/WICG/aspect-ratio
     ASPECT-RATIO
     img {
     size: calc(2/1);
     }
     Might change!
     

     View Slide

120. 120
     The web is catching up
     

     View Slide

121. HOW CAN IT BE SO FAST?
     

     View Slide

122. AMP CACHE & SEARCH
     How can it be so fast?
     https://cdn.ampproject.org/v/www.bbc.co.uk/news/amp/36202424
     COMPLETE DOCUMENTS
     GO INTO AMP CACHE
     

     View Slide

123. AMP CACHE & SEARCH
     How can it be so fast?
     class="u2quVpIWVr0__amp-doc"
     allowfullscreen="true"
     scrolling="no"
     src="https://cdn.ampproject.org/v/www.bbc.co.uk/news/amp/
     36202424?
     amp_js_v=5#dialog=0&prerenderSize=1&visibilityState=hid
     den&paddingTop=54&history=1&p2r=0&horizonta
     lScrolling=0&csi=0&storage=1" style="height:
     568px;">
     SMART PRELOADING
     https://www.google.nl/amp/www.bbc.co.uk/...
     

     View Slide

124. 124
     What is AMP?
     CONTROL BEST PRACTICES VALIDATION
     FOUNDER
     

     View Slide

125. 125
     Can we be as fast as AMP?
     JUP!
     

     View Slide

126. 126
     Is AMP the solution?
     ¯\_(ϑ)_/¯
     

     View Slide

127. “If you try to convince somebody,
     that contents are worth their time,
     you don't want a loading bar
     to get in their way.”
     Anand Varma
     National Geographic
     

     View Slide

128. Thanks!
     @stefanjudis
     bit.ly/fix-the-web
     Slides
     bit.ly/did-you-like-amp
     Feedback
     

     View Slide