Accelerated Mobile - Beyond AMP
•Télécharger en tant que PPTX, PDF•
5 j'aime•989 vues
Hardcore website technical performance optimisation!
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (20)
Similaire à Accelerated Mobile - Beyond AMP
Similaire à Accelerated Mobile - Beyond AMP (20)
Plus de Jono Alderson
Plus de Jono Alderson (15)
Dernier
Dernier (20)
Accelerated Mobile - Beyond AMP
- 1. Accelerated Mobile... Beyond AMP! 1 1 #SMX @jonoalderson
- 4. 4 There’s a lot of much-needed focus on (mobile) performance at the moment 4 #SMX @jonoalderson
- 6. On AMP, briefly... 6 6 #SMX @jonoalderson
- 7. 7 Just the tip of the iceberg... 7 #SMX @jonoalderson
- 8. 8 Risky? Dangerous? Subversive, even? 8 #SMX @jonoalderson
- 9. 9 9 #SMX @jonoalderson Are you actively managing your AMP cache? https://developers.google.com/amp/cache/update-ping
- 11. Anyone can (theoretically) create an AMP cache. 11 https://github.com/ampproject/amphtml/blob/master/spec/amp-cache-guidelines.md 11 #SMX @jonoalderson
- 13. https://github.com/ampproject/amphtml/tree/master/src 13 What if you could de-couple AMP? 13 #SMX @jonoalderson
- 14. To clarify, I’m not saying that you shouldn’t adopt AMP. 14 14 #SMX @jonoalderson
- 15. So, what’s the broader performance toolkit look like? 15 15 #SMX @jonoalderson
- 16. Infrastructure & network optimisation 16 16 #SMX @jonoalderson
- 19. SSL Chain Length 19 On certificate length... 19 #SMX @jonoalderson
- 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
- 23. Connection & data transfer 23 23 #SMX @jonoalderson
- 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. Packet sizes & cookie worries aren’t a thing any more 25 https://hpbn.co/building-blocks-of-tcp/ 25 #SMX @jonoalderson
- 26. ...but data & connection efficiency is. 26 26 #SMX @jonoalderson
- 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. For media/images… Test CSS3 vs images vs sprites vs encoding vs inlining 28 28 #SMX @jonoalderson
- 31. http://bit.ly/srcsetstuff SRCSET is the only solution for managing image sizes/resolutions. 31 31 #SMX @jonoalderson
- 32. 32 Sprite sheets are still a thing! 32 32 #SMX @jonoalderson
- 34. Error management for common request headaches Manage your robots, favicons, and other irritations. 3434 34 #SMX @jonoalderson
- 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)
- 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. @jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress) developers.google.com/speed/pagespeed/insights/ #SMX @jonoalderson
- 39. The Waterfall in Chrome 39#SMX @jonoalderson
- 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. @jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress) webpagetest.org #SMX @jonoalderson
- 45. @jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress) Expert tip... NewRelic #SMX @jonoalderson
- 46. @jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress) #SMX @jonoalderson
- 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. ● 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. Server Ecosystems 50 50 #SMX @jonoalderson Varnish (static page cache) < Apache/Nginx < PHP/Python (memcache) < MySQL/NoSQL (request cache) vs
- 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
- 53. @jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress) 53 53 #SMX @jonoalderson
- 54. @jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress) cPanel 54 54 #SMX @jonoalderson
- 55. @jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress) 55 55 #SMX @jonoalderson
- 56. @jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress) 56 56 #SMX @jonoalderson
- 59. Caching Policies ● Set your expiry times (appropriately!) ● Use 304 “Not Modified” header ● Use ETags 59 59 #SMX @jonoalderson
- 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. 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
- 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. (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.
- 66. CSS specificity = slow paint ● .container > nav > ul > li > a { color: red; } ● .main-nav-link { color: red; } 66 #SMX @jonoalderson
- 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. 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
- 73. You have a million opportunities to improve performance ...and every byte matters to users. 7373 73 #SMX @jonoalderson
- 74. Ignore all of the scores the tools give you, and just make things faster. 7474 74 #SMX @jonoalderson
- 75. Don’t neglect your infrastructure and back- end opportunities 7575 75 #SMX @jonoalderson
- 76. The landscape is changing Don’t get caught up in today’s hype 7676 76 #SMX @jonoalderson
- 77. AMP is not the end. 77 (but this is) 77 #SMX @jonoalderson
- 78. @jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress) GO OUT AND WIN 78 78 #SMX @jonoalderson
Notes de l'éditeur
- No Fili! Lots of little tips; I’ve included links, but you can Google everything in here. I know you’re not web developers… but this is going to get techy.
- Why is performance important? Everybody seen the Amazon studies (and all of the others?) Why is it only going to get more important? Instantaneous is the new 2 seconds is the new 5 seconds!
- This session is for anybody who wants to go faster (either with AMP, or without), but doesn’t know where to start; front end, back end, and everything inbetween.
- The AMP project in particular has pushed performance forward (not without politics)... (AND, there may be good reasons why you don’t want to use AMP, but still want the benefits).
- Why is AMP not a magic bullet? Ad networks, walled gardens and dependency on Google, poor implementation. Yet another language/framework to maintain (for them, and for us). Deprecation? Invalid code? Security? Pinging, caching. Pros and cons? Control! Ownership! Are there alternatives?
- Have to ping to manage versions
- But no guarantees; flakey!
- Other people are getting involved. But is it enough?...AND… their implementation is a little… odd… not easy to do your own amp cache, as you need to host and maintain your own version of the amp library# no guarantees your amp cache is used by third parties such as search engines
- What’s your motivation for adopting AMP; the performance, or access to the sandpit? You can have all the performance advantages without having to be in the cache, etc.
- But it’s a choice, with implications. And there are other options. But it’s also the tip of the iceberg; if your goal is performance, there are a million other things you can do.
- HTTPS is mandatory. Security. Performance. Acceptance. This thinking assumes that you’re already compliant, or are about to be. No reason not to (ad platforms, etc) “HTTPS is slower!” - the myth of secure handshake bottlenecks
- Cheap certs often = long chains! Cloudflare = shared/cheap Let’s Encrypt; install in/on server. Also, cPanel now DIY’s, too. Better certs = closer to trusted sources, and also better liabilities
- Apache config, or automate via Cloudflare (etc) Cloudflare - also, upgrade insecure resources, force https, free sll certs, etc. At some point you have to sort all of this out, so it should probably be now.
- A FAST, wired connection from east coast to west coast USA might take ~60-100ms. A 4g connection to a remote server might take up to ~200ms (‘sluggish’)! HTTP services do round-trips to get resources; HTTP2 services run in parallel. What goes into your first few packets?
- Parallelised/individual resources & require.js, etc Enables keep-alive by default No more hostname sharding (or, maybe - to support some browsers [esp older mobile]; serve from same IP [cached hostnames]) Itemised SASS/LESS/JS outputs - only load the bits you need
- A lot of the page speed tools misreport on this. Combine your javascript! Distribute your resources!
- Still bottlenecks based on the number of assets you’re loading, the size of those, where they’re hosted, etc.
- CSS3 is often faster than using images ...Though processing and rendering are your bottlenecks SVGs > JPG/PNG is a good general rule. WebP even better, but challenges. Although… inlining resources makes them harder to cache, and may not be optimal in terms of prioritsation
- Base64 encode fonts and icons, and SVGs!
- Doesn’t need an extra request, which still carries overhead
- Conditional media queries still (can) load all the assets Mechanisms which use display:none still load the image Mechanisms which replace the image src attribute to lazy-load probably aren’t great for accessibility or SEO
- Up to 40% smaller! Better compression, shared headers, etc.
- Most systems don’t cache 404s (or other errors) Some scenarios mean that requests to errors redirect, download subsequent resources, etc. Cost-intensive. Robots.txt, favicons, app icons, msapplication policies, requests to old URLs, security probes.
- Most systems don’t cache 404s (or other errors) Some scenarios mean that requests to errors redirect, download subsequent resources, etc. Cost-intensive. Robots.txt, favicons, app icons, msapplication policies, requests to old URLs, security probes.
- Your best tool is your brain, and your experience. Use the Chrome waterfall, look for slow request/respond/paint processes. Click on them, and read! It’ll give you tips. Diagnosing bottlenecks
- Longest single wait is often connect + receive* Nothing else can happen until this is done. More time processing, or more time delivering? Don’t ignore, and don’t get obsessed! CDNs; later!
- VPS, Heart?
- Email, FTP, SQL, PHPmyadmin. Start to see behind the curtain.
- Gzip RAM allocation Gzip variablles!
- PHP versions, addons, etc
- Be careful about accidentally consuming CPU/GPU, wasting bandwidth, triggering JS, etc https://www.w3.org/TR/page-visibility/ - page visibility API is generally supported, and lets you check if a tab is active/visible.
- Edge caching assets easy; html less so. Uncommon. More complex setups; distributed servers/etc.
- Homepage icon Online/offline hybridisation; control local caching, etc Need URL-based nav (which you already need for app indexing) Precursor to sideloaded APKs
- Consider that maybe a separate app isn’t the future ...That Google want to push for seamless search>content transition (albeit with monetisation) The app store disrupts this; and Google Now scraping apps isn’t a good enough fix. AMP and PWA pages are increasingly gaining access to mobile hardware; seamless transition into apps, and even into VR.