the need for speed! accelerated mobile, beyond amp
TRANSCRIPT
![Page 3: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/3.jpg)
@jonoalderson
There’s a lot of much-needed focus on (mobile)
performance at the moment
@jonoalderson
![Page 6: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/6.jpg)
@jonoalderson6
Just the tip of the iceberg...
@jonoalderson
![Page 8: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/8.jpg)
@jonoalderson
Risky? Dangerous? Subversive, even?
@jonoalderson
![Page 9: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/9.jpg)
@jonoalderson
Are you actively managing your AMP cache?
https://developers.google.com/amp/cache/update-ping
![Page 12: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/12.jpg)
@jonoalderson
Anyone can (theoretically) create an AMP cache.
https://github.com/ampproject/amphtml/blob/master/spec/amp-cache-guidelines.md
@jonoalderson
![Page 15: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/15.jpg)
@jonoalderson
To clarify, I’m not saying that you shouldn’t adopt AMP.
![Page 16: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/16.jpg)
@jonoalderson
So, what’s the broader performance toolkit look like?
![Page 18: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/18.jpg)
@jonoalderson
HTTP2 Implications
@jonoalderson
![Page 21: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/21.jpg)
@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
![Page 22: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/22.jpg)
@jonoalderson
online.marketing/guide/https
More here...
![Page 25: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/25.jpg)
@jonoalderson
bit.ly/http2-ilya
@jonoalderson
![Page 30: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/30.jpg)
@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
![Page 31: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/31.jpg)
@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.
3131
@jonoalderson
![Page 32: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/32.jpg)
@jonoalderson
For media/images…Test CSS3 vs images vs sprites vs encoding vs inlining
![Page 33: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/33.jpg)
@jonoalderson
http://bit.ly/srcsetstuff
SRCSET is the only solution for managing image sizes/resolutions.
![Page 34: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/34.jpg)
@jonoalderson
...And you can also use <picture> to support multiple formats
![Page 35: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/35.jpg)
@jonoalderson
base64-image.de
You can also base64() encode images...
![Page 36: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/36.jpg)
@jonoalderson
base64-image.de
@jonoalderson
![Page 38: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/38.jpg)
@jonoalderson
https://developers.google.com/speed/webp/
WebP > JPG & PNG
![Page 39: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/39.jpg)
@jonoalderson
Error management for common request headaches
Manage your robots, favicons, and other irritations.
@jonoalderson
![Page 40: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/40.jpg)
@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)
![Page 42: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/42.jpg)
@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
![Page 43: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/43.jpg)
developers.google.com/speed/pagespeed/insights/
@jonoalderson
![Page 44: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/44.jpg)
@jonoalderson
The Waterfall in Chrome
@jonoalderson
![Page 45: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/45.jpg)
@jonoalderson
http://bit.ly/newchrometoys
Brand New Chrome Dev Toys!
![Page 46: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/46.jpg)
@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
![Page 54: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/54.jpg)
@jonoalderson
Hostname sharding
https://blog.stackpath.com/glossary/domain-sharding/
![Page 57: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/57.jpg)
@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).
![Page 58: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/58.jpg)
@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
![Page 59: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/59.jpg)
@jonoalderson
Server Ecosystems
Varnish (static page cache) < Apache/Nginx < PHP/Python
(memcache) < MySQL/NoSQL (request cache)
vs
![Page 67: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/67.jpg)
@jonoalderson
Caching Policies● Set your expiry times (appropriately!)
● Use 304 “Not Modified” header
● Use ETags
![Page 68: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/68.jpg)
@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
![Page 69: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/69.jpg)
@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.
![Page 71: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/71.jpg)
@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
![Page 72: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/72.jpg)
@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
![Page 73: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/73.jpg)
@jonoalderson
CSS specificity = slow paint● .container > nav > ul > li > a { color: red; }
● .main-nav-link { color: red; }
![Page 74: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/74.jpg)
@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!
![Page 75: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/75.jpg)
@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?
![Page 77: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/77.jpg)
@jonoalderson
https://developers.google.com/web/progressive-web-apps/
![Page 78: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/78.jpg)
@jonoalderson
“Twitter Lite and High Performance React Progressive Web Apps at Scale”
http://bit.ly/twitterpwa
![Page 82: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/82.jpg)
@jonoalderson
You have a million opportunities to improve
performance ...and every byte matters to users.
![Page 83: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/83.jpg)
@jonoalderson
Ignore all of the scores the tools give you, and
just make things faster.
![Page 84: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/84.jpg)
@jonoalderson
Don’t neglect your infrastructure and back-
end opportunities
![Page 85: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/85.jpg)
@jonoalderson
The landscape is changingDon’t get caught up in today’s hype
![Page 87: The Need for Speed! Accelerated mobile, beyond AMP](https://reader034.vdocuments.site/reader034/viewer/2022052117/5a6ef2307f8b9a40118b51ad/html5/thumbnails/87.jpg)
GO OUT AND WIN