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 Inbounder London - Jono Alderson

929 views

Published on

accelerated mobile, beyond amp

Published in: Marketing
  • Be the first to comment

The Inbounder London - Jono Alderson

  1. 1. Jono Alderson Accelerated Mobile... Beyond AMP! @jonoalderson
  2. 2. @jonoalderson #TheInbounder
  3. 3. @jonoalderson #TheInbounder@jonoalderson #TheInbounder
  4. 4. @jonoalderson #TheInbounder There’s a lot of much-needed focus on (mobile) performance at the moment @jonoalderson #TheInbounder
  5. 5. @jonoalderson #TheInbounder@jonoalderson #TheInbounder
  6. 6. @jonoalderson #TheInbounder On AMP, briefly...
  7. 7. @jonoalderson #TheInbounder 8 Just the tip of the iceberg... @jonoalderson #TheInbounder
  8. 8. @jonoalderson #TheInbounder http://bit.ly/badams-amp
  9. 9. @jonoalderson #TheInbounder Risky? Dangerous? Subversive, even? @jonoalderson #TheInbounder
  10. 10. @jonoalderson #TheInbounder Are you actively managing your AMP cache? https://developers.google.com/amp/cache/update-ping
  11. 11. @jonoalderson #TheInbounder
  12. 12. @jonoalderson #TheInbounder Anyone can (theoretically) create an AMP cache. https://github.com/ampproject/amphtml/blob/master/spec/amp-cache-guidelines.md @jonoalderson #TheInbounder
  13. 13. @jonoalderson #TheInbounder
  14. 14. @jonoalderson #TheInbounder http://bit.ly/ampJS What if you could de-couple AMP?
  15. 15. @jonoalderson #TheInbounder To clarify, I’m not saying that you shouldn’t adopt AMP.
  16. 16. @jonoalderson #TheInbounder So, what’s the broader performance toolkit look like?
  17. 17. @jonoalderson #TheInbounder Infrastructure & network optimisation
  18. 18. @jonoalderson #TheInbounder HTTP2 Implications @jonoalderson #TheInbounder
  19. 19. @jonoalderson #TheInbounder HTTPS isn’t a binary thing!
  20. 20. @jonoalderson #TheInbounder SSL Chain LengthOn certificate length...
  21. 21. @jonoalderson #TheInbounder HSTS ● Become compliant by adding extra HTTPS checks ● Register for the HSTS the preload list (hstspreload.org) ● Skip the HTTP/HTTPS redirect when people type example.com
  22. 22. @jonoalderson #TheInbounder online.marketing/guide/https More here...
  23. 23. @jonoalderson #TheInbounder We have a performance problem...
  24. 24. @jonoalderson #TheInbounder Go smarter, not faster! bit.ly/http2-ilya @jonoalderson #TheInbounder
  25. 25. @jonoalderson #TheInbounder@jonoalderson #TheInbounder
  26. 26. @jonoalderson #TheInbounder@jonoalderson #TheInbounder
  27. 27. @jonoalderson #TheInbounder Connection & data transfer
  28. 28. @jonoalderson #TheInbounder 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 #TheInbounder
  29. 29. @jonoalderson #TheInbounder 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. 30 30 @jonoalderson #TheInbounder
  30. 30. @jonoalderson #TheInbounder For media/images… Test CSS3 vs images vs sprites vs encoding vs inlining
  31. 31. @jonoalderson #TheInbounder http://bit.ly/srcsetstuff SRCSET is the only solution for managing image sizes/resolutions.
  32. 32. @jonoalderson #TheInbounder ...And you can also use <picture> to support multiple formats
  33. 33. @jonoalderson #TheInbounder base64-image.de You can also base64() encode images...
  34. 34. @jonoalderson #TheInbounder base64-image.de @jonoalderson #TheInbounder
  35. 35. @jonoalderson #TheInbounder Sprite sheets are might still be a thing!
  36. 36. @jonoalderson #TheInbounder https://developers.google.com/speed/webp/ WebP > JPG & PNG
  37. 37. @jonoalderson #TheInbounder Error management for common request headaches Manage your robots, favicons, and other irritations. @jonoalderson #TheInbounder
  38. 38. @jonoalderson #TheInbounder 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)
  39. 39. @jonoalderson #TheInbounder Measurement
  40. 40. @jonoalderson #TheInbounder 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 #TheInbounder
  41. 41. developers.google.com/speed/pagespeed/insights/ @jonoalderson #TheInbounder
  42. 42. @jonoalderson #TheInbounder The Waterfall in Chrome @jonoalderson #TheInbounder
  43. 43. @jonoalderson #TheInbounder 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 #TheInbounder
  44. 44. webpagetest.org @jonoalderson #TheInbounder
  45. 45. @jonoalderson #TheInbounder Other Tools
  46. 46. @jonoalderson #TheInbounder
  47. 47. @jonoalderson #TheInbounder
  48. 48. @jonoalderson #TheInbounder
  49. 49. @jonoalderson #TheInbounder
  50. 50. @jonoalderson #TheInbounder Undoing bad habits
  51. 51. @jonoalderson #TheInbounder Hostname sharding https://blog.stackpath.com/glossary/domain-sharding/
  52. 52. @jonoalderson #TheInbounder Resource combination
  53. 53. @jonoalderson #TheInbounder http://bit.ly/newchrometoys Brand New Chrome Dev Toys
  54. 54. @jonoalderson #TheInbounder Back-end optimisation
  55. 55. @jonoalderson #TheInbounder 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).
  56. 56. @jonoalderson #TheInbounder ● 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
  57. 57. @jonoalderson #TheInbounder Server Ecosystems Varnish (static page cache) < Apache/Nginx < PHP/Python (memcache) < MySQL/NoSQL (request cache) vs
  58. 58. @jonoalderson #TheInbounder SCARY? Learn by doing
  59. 59. DIY time @jonoalderson #TheInbounder
  60. 60. @jonoalderson #TheInbounder
  61. 61. @jonoalderson #TheInbounder
  62. 62. @jonoalderson #TheInbounder
  63. 63. @jonoalderson #TheInbounder
  64. 64. @jonoalderson #TheInbounder Front-end optimisation
  65. 65. @jonoalderson #TheInbounder Caching Policies ● Set your expiry times (appropriately!) ● Use 304 “Not Modified” header ● Use ETags
  66. 66. @jonoalderson #TheInbounder 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
  67. 67. @jonoalderson #TheInbounder 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.
  68. 68. @jonoalderson #TheInbounder
  69. 69. @jonoalderson #TheInbounder 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
  70. 70. @jonoalderson #TheInbounder (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
  71. 71. @jonoalderson #TheInbounder CSS specificity = slow paint ● .container > nav > ul > li > a { color: red; } ● .main-nav-link { color: red; }
  72. 72. @jonoalderson #TheInbounder 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!
  73. 73. @jonoalderson #TheInbounder 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?
  74. 74. @jonoalderson #TheInbounder PWAs
  75. 75. @jonoalderson #TheInbounder https://developers.google.com/web/progressive-web-apps/
  76. 76. @jonoalderson #TheInbounder “Twitter Lite and High Performance React Progressive Web Apps at Scale” http://bit.ly/twitterpwa
  77. 77. @jonoalderson #TheInbounder 78
  78. 78. @jonoalderson #TheInbounder Key takeaways...
  79. 79. @jonoalderson #TheInbounder
  80. 80. @jonoalderson #TheInbounder You have a million opportunities to improve performance ...and every byte matters to users.
  81. 81. @jonoalderson #TheInbounder Ignore all of the scores the tools give you, and just make things faster.
  82. 82. @jonoalderson #TheInbounder Don’t neglect your infrastructure and back-end opportunities
  83. 83. @jonoalderson #TheInbounder The landscape is changing Don’t get caught up in today’s hype
  84. 84. @jonoalderson #TheInbounder AMP is not the end. (but this is)
  85. 85. GO OUT AND WIN

×