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.

Accelerated Mobile - Beyond AMP

708 views

Published on

Hardcore website technical performance optimisation!

Published in: Education
  • Be the first to comment

Accelerated Mobile - Beyond AMP

  1. 1. Accelerated Mobile... Beyond AMP! 1 1 #SMX @jonoalderson
  2. 2. #SMX @JonoAlderson2 2 #SMX @jonoalderson
  3. 3. #SMX @JonoAlderson
  4. 4. 4 There’s a lot of much-needed focus on (mobile) performance at the moment 4 #SMX @jonoalderson
  5. 5. 5 5 #SMX @jonoalderson
  6. 6. On AMP, briefly... 6 6 #SMX @jonoalderson
  7. 7. 7 Just the tip of the iceberg... 7 #SMX @jonoalderson
  8. 8. 8 Risky? Dangerous? Subversive, even? 8 #SMX @jonoalderson
  9. 9. 9 9 #SMX @jonoalderson Are you actively managing your AMP cache? https://developers.google.com/amp/cache/update-ping
  10. 10. 10 10 #SMX @jonoalderson
  11. 11. Anyone can (theoretically) create an AMP cache. 11 https://github.com/ampproject/amphtml/blob/master/spec/amp-cache-guidelines.md 11 #SMX @jonoalderson
  12. 12. 12 #SMX @jonoalderson
  13. 13. https://github.com/ampproject/amphtml/tree/master/src 13 What if you could de-couple AMP? 13 #SMX @jonoalderson
  14. 14. To clarify, I’m not saying that you shouldn’t adopt AMP. 14 14 #SMX @jonoalderson
  15. 15. So, what’s the broader performance toolkit look like? 15 15 #SMX @jonoalderson
  16. 16. Infrastructure & network optimisation 16 16 #SMX @jonoalderson
  17. 17. HTTP2 Implications 17 17 #SMX @jonoalderson
  18. 18. #SMX @jonoalderson online.marketing/guide/https
  19. 19. SSL Chain Length 19 On certificate length... 19 #SMX @jonoalderson
  20. 20. 20 20 #SMX @jonoalderson
  21. 21. 21 With HTTP2, you don’t need to worry as much about round trips... ...but you should still consider what you’re transferring, and how. 21 #SMX @jonoalderson
  22. 22. 2222 22 #SMX @jonoalderson
  23. 23. Connection & data transfer 23 23 #SMX @jonoalderson
  24. 24. HSTS ● Become compliant by adding extra HTTPS checks. ● Register for the HSTS the preload list. ● Skip the HTTP/HTTPS redirect when people type example.com! 24 24 #SMX @jonoalderson
  25. 25. Packet sizes & cookie worries aren’t a thing any more 25 https://hpbn.co/building-blocks-of-tcp/ 25 #SMX @jonoalderson
  26. 26. ...but data & connection efficiency is. 26 26 #SMX @jonoalderson
  27. 27. 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. 27 27 #SMX @jonoalderson
  28. 28. For media/images… Test CSS3 vs images vs sprites vs encoding vs inlining 28 28 #SMX @jonoalderson
  29. 29. base64-image.de 29 29 #SMX @jonoalderson
  30. 30. base64-image.de 30 30 #SMX @jonoalderson
  31. 31. http://bit.ly/srcsetstuff SRCSET is the only solution for managing image sizes/resolutions. 31 31 #SMX @jonoalderson
  32. 32. 32 Sprite sheets are still a thing! 32 32 #SMX @jonoalderson
  33. 33. https://developers.google.com/speed/webp/ WebP 33 #SMX @jonoalderson
  34. 34. Error management for common request headaches Manage your robots, favicons, and other irritations. 3434 34 #SMX @jonoalderson
  35. 35. 3535 35 #SMX @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)
  36. 36. Measurement 36 36 #SMX @jonoalderson
  37. 37. Which metrics matter? ● There’s no such thing as ‘speed’. What are we measuring, exactly? ● Numbers from Google Pagespeed Insights, Pingdom, WebPageTest, GA, etc, are all nonsense. ● User satisfaction metrics > any technical speed metrics. 37 37 #SMX @jonoalderson
  38. 38. @jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress) developers.google.com/speed/pagespeed/insights/ #SMX @jonoalderson
  39. 39. The Waterfall in Chrome 39#SMX @jonoalderson
  40. 40. 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. 40 40 #SMX @jonoalderson
  41. 41. @jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress) webpagetest.org #SMX @jonoalderson
  42. 42. Other Tools 42 42 #SMX @jonoalderson
  43. 43. #SMX @jonoalderson
  44. 44. #SMX @jonoalderson
  45. 45. @jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress) Expert tip... NewRelic #SMX @jonoalderson
  46. 46. @jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress) #SMX @jonoalderson
  47. 47. Back-end optimisation 47 47 #SMX @jonoalderson
  48. 48. 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). 48 48 #SMX @jonoalderson
  49. 49. ● 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 49 49 #SMX @jonoalderson
  50. 50. Server Ecosystems 50 50 #SMX @jonoalderson Varnish (static page cache) < Apache/Nginx < PHP/Python (memcache) < MySQL/NoSQL (request cache) vs
  51. 51. ● It's a pain supporting HTTP2 with Varnish and other performance frameworks. So just put it on the front end as a reverse-proxy. ● (Fixed in newer versions) Varnish + HTTP2 51 51 #SMX @jonoalderson
  52. 52. SCARY? 5252 52 #SMX @jonoalderson
  53. 53. @jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress) 53 53 #SMX @jonoalderson
  54. 54. @jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress) cPanel 54 54 #SMX @jonoalderson
  55. 55. @jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress) 55 55 #SMX @jonoalderson
  56. 56. @jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress) 56 56 #SMX @jonoalderson
  57. 57. 5757 57 #SMX @jonoalderson
  58. 58. Front-end optimisation 58 58 #SMX @jonoalderson
  59. 59. Caching Policies ● Set your expiry times (appropriately!) ● Use 304 “Not Modified” header ● Use ETags 59 59 #SMX @jonoalderson
  60. 60. 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) ● Rel next/previous automatically triggers prefetch in Chrome+Firefox 60 60 #SMX @jonoalderson
  61. 61. CDNs are still important ● Localisation is important! ● Latency is a bottleneck more often than you’d think. ● Use resource CDNs (eg., cdnjs.cloudflare.com) for things like jQuery. ● Your first line of defense. 61 61 #SMX @jonoalderson
  62. 62. 62 62 #SMX @jonoalderson
  63. 63. Above the fold (critical path) rendering 63 #SMX @jonoalderson ● Reduces waiting time for the browser to download assets. ● ...but can’t be cached! ● http://bit.ly/criticalpathcss
  64. 64. (Re)paint & (Re)flow 64 #SMX @jonoalderson ● 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.
  65. 65. #SMX @jonoalderson https://developers.google.com/speed/articles/reflow
  66. 66. CSS specificity = slow paint ● .container > nav > ul > li > a { color: red; } ● .main-nav-link { color: red; } 66 #SMX @jonoalderson
  67. 67. Animation & FPS ● jQuery, scrolling and changing elements costs GPU and CPU ● Consider the user’s physical hardware! ● Measure with Chrome, and kick your devs! 67 #SMX @jonoalderson
  68. 68. 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? 68 #SMX @jonoalderson
  69. 69. PWAs 69 69 #SMX @jonoalderson
  70. 70. https://developers.google.com/web/progressive-web-apps/ #SMX @jonoalderson
  71. 71. #SMX @jonoalderson
  72. 72. Key takeaways... 72 72 #SMX @jonoalderson
  73. 73. You have a million opportunities to improve performance ...and every byte matters to users. 7373 73 #SMX @jonoalderson
  74. 74. Ignore all of the scores the tools give you, and just make things faster. 7474 74 #SMX @jonoalderson
  75. 75. Don’t neglect your infrastructure and back- end opportunities 7575 75 #SMX @jonoalderson
  76. 76. The landscape is changing Don’t get caught up in today’s hype 7676 76 #SMX @jonoalderson
  77. 77. AMP is not the end. 77 (but this is) 77 #SMX @jonoalderson
  78. 78. @jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress) GO OUT AND WIN 78 78 #SMX @jonoalderson

×