Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Need for Speed! Accelerated mobile, beyond AMP

2,701 views

Published on

Performance is everything, but many people only do the basics. AMP is just the beginning. Want to go further, faster?
Brace yourself for a whirlwind of speed techniques and opportunities - from HTTP2 to PWAs and beyond!

Published in: Education
  • Be the first to comment

The Need for Speed! Accelerated mobile, beyond AMP

  1. 1. @jonoalderson
  2. 2. @jonoalderson@jonoalderson
  3. 3. @jonoalderson There’s a lot of much- needed focus on (mobile) performance at the moment @jonoalderson
  4. 4. @jonoalderson@jonoalderson
  5. 5. @jonoalderson On AMP, briefly...
  6. 6. @jonoalderson 6 Just the tip of the iceberg... @jonoalderson
  7. 7. @jonoalderson http://bit.ly/badams-amp
  8. 8. @jonoalderson Risky? Dangerous? Subversive, even? @jonoalderson
  9. 9. @jonoalderson Are you actively managing your AMP cache? https://developers.google.com/amp/cache/update-ping
  10. 10. @jonoalderson
  11. 11. @jonoalderson You don’t need AMP. You can do this yourself.
  12. 12. @jonoalderson Anyone can (theoretically) create an AMP cache. https://github.com/ampproject/amphtml/blob/master/spec/amp-cache-guidelines.md @jonoalderson
  13. 13. @jonoalderson
  14. 14. @jonoalderson http://bit.ly/ampJS What if you could de-couple AMP?
  15. 15. @jonoalderson To clarify, I’m not saying that you shouldn’t adopt AMP.
  16. 16. @jonoalderson So, what’s the broader performance toolkit look like?
  17. 17. @jonoalderson Infrastructure & network optimisation
  18. 18. @jonoalderson HTTP2 Implications @jonoalderson
  19. 19. @jonoalderson HTTPS isn’t a binary thing!
  20. 20. @jonoalderson SSL Chain LengthOn certificate length...
  21. 21. @jonoalderson HSTS ● Become compliant by adding extra HTTPS checks ● Register for the HSTS preload list (hstspreload.org) ● Skip the HTTP/HTTPS redirect when people type example.com
  22. 22. @jonoalderson online.marketing/guide/https More here...
  23. 23. @jonoalderson Let’s go faster.
  24. 24. @jonoalderson@jonoalderson
  25. 25. @jonoalderson bit.ly/http2-ilya @jonoalderson
  26. 26. @jonoalderson We need to go smarter, not faster
  27. 27. @jonoalderson@jonoalderson
  28. 28. @jonoalderson@jonoalderson
  29. 29. @jonoalderson Connection & data transfer
  30. 30. @jonoalderson With HTTP2, you don’t need to worry as much about round trips... ...but you should still consider what you’re transferring, and how. @jonoalderson
  31. 31. @jonoalderson For devices... ● Detect early, and adapt. Responsive = expensive! ● Make CSS mobile-first (build up from min-width); typically reduces sizes. ○ Conditionally layer on / load more for larger devices. 31 31 @jonoalderson
  32. 32. @jonoalderson For media/images… Test CSS3 vs images vs sprites vs encoding vs inlining
  33. 33. @jonoalderson http://bit.ly/srcsetstuff SRCSET is the only solution for managing image sizes/resolutions.
  34. 34. @jonoalderson ...And you can also use <picture> to support multiple formats
  35. 35. @jonoalderson base64-image.de You can also base64() encode images...
  36. 36. @jonoalderson base64-image.de @jonoalderson
  37. 37. @jonoalderson Sprite sheets are might still be a thing!
  38. 38. @jonoalderson https://developers.google.com/speed/webp/ WebP > JPG & PNG
  39. 39. @jonoalderson Error management for common request headaches Manage your robots, favicons, and other irritations. @jonoalderson
  40. 40. @jonoalderson apple-touch-icon.png (and variants) favicon.ico (and variants) browserconfig.xml Feeds (/rss/, /feed/, etc) Invalid page/date ranges Broken internal links (and missing http links) Alternate sitemap and metadata urls Breaking parameters (especially on images, from search engines)
  41. 41. @jonoalderson Measurement
  42. 42. @jonoalderson Which metrics matter? ● There’s no such thing as ‘speed’. What are we measuring? ● Numbers from Google Pagespeed Insights, Pingdom, WebPageTest, GA, etc, are all nonsense ● User satisfaction metrics > any technical speed metrics @jonoalderson
  43. 43. developers.google.com/speed/pagespeed/insights/ @jonoalderson
  44. 44. @jonoalderson The Waterfall in Chrome @jonoalderson
  45. 45. @jonoalderson http://bit.ly/newchrometoys Brand New Chrome Dev Toys!
  46. 46. @jonoalderson Which metrics matter? ● Don’t ignore, or get fixated on time ‘til first byte. ● You need to fix the front end and the back end. @jonoalderson
  47. 47. webpagetest.org @jonoalderson
  48. 48. @jonoalderson Other Tools
  49. 49. @jonoalderson
  50. 50. @jonoalderson
  51. 51. @jonoalderson
  52. 52. @jonoalderson
  53. 53. @jonoalderson Undoing bad habits
  54. 54. @jonoalderson Hostname sharding https://blog.stackpath.com/glossary/domain-sharding/
  55. 55. @jonoalderson Resource combination
  56. 56. @jonoalderson (I’m not going to talk about) Back-end optimisation
  57. 57. @jonoalderson Options for handling angular/react sites... 1. Hope for the best 2. Serve static HTML versions, then let the framework pick up the heavy lifting (using something like or PhantomJS) 3. Use something like Prerender.io (paid, or self-hosted).
  58. 58. @jonoalderson ● There comes a point where you outgrow a single server. ● If you’ve finite RAM and CPU, consider separating servers and databases. Latency, however! ● Consider caching, varnish, load-balancers Server Ecosystems
  59. 59. @jonoalderson Server Ecosystems Varnish (static page cache) < Apache/Nginx < PHP/Python (memcache) < MySQL/NoSQL (request cache) vs
  60. 60. @jonoalderson SCARY? Learn by doing
  61. 61. DIY time @jonoalderson
  62. 62. @jonoalderson
  63. 63. @jonoalderson
  64. 64. @jonoalderson
  65. 65. @jonoalderson
  66. 66. @jonoalderson (I’m going to skim over) Front-end optimisation
  67. 67. @jonoalderson Caching Policies ● Set your expiry times (appropriately!) ● Use 304 “Not Modified” header ● Use ETags
  68. 68. @jonoalderson Resource Hints ● Preload, preconnect, prefetch, dns-prefetch, prerender, and subresource. ○ <link rel="dns-prefetch" href="//example.com"> ○ <link rel="prefetch" href="image.png"> (when idle) ○ <link rel="subresource" href="styles.css"> (prioritises) ○ <link rel="preload" href="/styles/other.css" as="style"> (prioritises) ● Pass as tags, headers, or via js ● NB: Rel next/previous automatically triggers prefetch in Chrome+Firefox
  69. 69. @jonoalderson CDNs are still important ● Localisation is important! ● Latency is a bottleneck more often than you’d think. ● Cookieless subdomains reduce header sizes! ● Use resource CDNs (eg., cdnjs.cloudflare.com) for things like jQuery. ● Your first line of defense.
  70. 70. @jonoalderson
  71. 71. @jonoalderson Above the fold (critical path) rendering ● Reduces waiting time for the browser to download assets ● ...but can’t be (easily) cached! ● loadCSS is your friend (async loading and js support) https://github.com/filamentgroup/loadCSS ● Takes advantage of rel preload http://bit.ly/criticalpathcss
  72. 72. @jonoalderson (Re)paint & (Re)flow ● Consider how the page is constructed and how it behaves ● Minimise unknowns to reduce tearing and reflow in particular ● Small technical gains, big perception gains https://developers.google.com/speed/articles/reflow
  73. 73. @jonoalderson CSS specificity = slow paint ● .container > nav > ul > li > a { color: red; } ● .main-nav-link { color: red; }
  74. 74. @jonoalderson Animation & FPS ● jQuery, scrolling and changing elements costs GPU and CPU ● Consider the user’s physical hardware ● To maintain 60fps, you frame animations need to execute in less than 14ms. ● Transformation and opacity are the only ‘free’ animations. ● Measure with Chrome, and kick your devs!
  75. 75. @jonoalderson Deferring / async resources ● Do you need to load everything immediately? ● Do you need to load everything in the <head>? ● Do you need to load everything on every page? ● Do you understand the dependencies? ● What can you defer, load asynchronously, or load conditionally?
  76. 76. @jonoalderson (You should go learn about) PWAs
  77. 77. @jonoalderson https://developers.google.com/web/progressive-web-apps/
  78. 78. @jonoalderson “Twitter Lite and High Performance React Progressive Web Apps at Scale” http://bit.ly/twitterpwa
  79. 79. @jonoalderson
  80. 80. @jonoalderson Key takeaways...
  81. 81. @jonoalderson
  82. 82. @jonoalderson You have a million opportunities to improve performance ...and every byte matters to users.
  83. 83. @jonoalderson Ignore all of the scores the tools give you, and just make things faster.
  84. 84. @jonoalderson Don’t neglect your infrastructure and back- end opportunities
  85. 85. @jonoalderson The landscape is changing Don’t get caught up in today’s hype
  86. 86. @jonoalderson AMP is not the end. (but this is)
  87. 87. GO OUT AND WIN

×