accelerated mobile - beyond amp
TRANSCRIPT
![Page 1: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/1.jpg)
Accelerated Mobile... Beyond AMP!
11
#SMX @jonoalderson
![Page 2: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/2.jpg)
#SMX @JonoAlderson22#SMX @jonoalderson
![Page 3: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/3.jpg)
#SMX @JonoAlderson
!
![Page 4: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/4.jpg)
4
There’s a lot of much-needed focus on
(mobile) performance at the moment
4#SMX @jonoalderson
![Page 5: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/5.jpg)
55
#SMX @jonoalderson
![Page 6: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/6.jpg)
On AMP, briefly...
66
#SMX @jonoalderson
![Page 7: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/7.jpg)
7
Just the tip of the iceberg...
7#SMX @jonoalderson
![Page 8: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/8.jpg)
8
Risky? Dangerous? Subversive, even?
8#SMX @jonoalderson
![Page 9: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/9.jpg)
99
#SMX @jonoalderson
Are you actively managing your AMP cache?
https://developers.google.com/amp/cache/update-ping
![Page 10: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/10.jpg)
1010
#SMX @jonoalderson
![Page 11: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/11.jpg)
Anyone can (theoretically) create an AMP cache.
11
https://github.com/ampproject/amphtml/blob/master/spec/amp-cache-guidelines.md
11#SMX @jonoalderson
![Page 12: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/12.jpg)
12#SMX @jonoalderson
![Page 13: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/13.jpg)
https://github.com/ampproject/amphtml/tree/master/src
13
What if you could de-
couple AMP?
13#SMX @jonoalderson
![Page 14: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/14.jpg)
To clarify, I’m not saying that you shouldn’t adopt AMP.
1414
#SMX @jonoalderson
![Page 15: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/15.jpg)
So, what’s the broader performance toolkit look like?
1515
#SMX @jonoalderson
![Page 16: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/16.jpg)
Infrastructure & network optimisation
1616
#SMX @jonoalderson
![Page 17: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/17.jpg)
HTTP2 Implications
1717
#SMX @jonoalderson
![Page 18: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/18.jpg)
#SMX @jonoalderson
online.marketing/guide/https
![Page 19: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/19.jpg)
SSL Chain Length
19
On certificate length...
19#SMX @jonoalderson
![Page 20: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/20.jpg)
2020
#SMX @jonoalderson
![Page 21: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/21.jpg)
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
![Page 22: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/22.jpg)
222222
#SMX @jonoalderson
![Page 23: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/23.jpg)
Connection & data transfer
2323
#SMX @jonoalderson
![Page 24: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/24.jpg)
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!
2424
#SMX @jonoalderson
![Page 25: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/25.jpg)
Packet sizes & cookie worries aren’t a thing any more
25
https://hpbn.co/building-blocks-of-tcp/
25#SMX @jonoalderson
![Page 26: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/26.jpg)
...but data & connection efficiency is.
2626
#SMX @jonoalderson
![Page 27: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/27.jpg)
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.
2727
#SMX @jonoalderson
![Page 28: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/28.jpg)
For media/images…Test CSS3 vs images vs sprites vs encoding vs inlining
2828
#SMX @jonoalderson
![Page 31: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/31.jpg)
http://bit.ly/srcsetstuff
SRCSET is the only solution for managing image sizes/resolutions.
3131
#SMX @jonoalderson
![Page 32: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/32.jpg)
32
Sprite sheets are still a thing!
3232
#SMX @jonoalderson
![Page 33: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/33.jpg)
https://developers.google.com/speed/webp/
WebP
33#SMX @jonoalderson
![Page 34: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/34.jpg)
Error management for common request
headachesManage your robots, favicons, and other
irritations.
343434
#SMX @jonoalderson
![Page 35: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/35.jpg)
353535
#SMX @jonoalderson
apple-touch-icon.png (and variants)favicon.ico (and variants)
browserconfig.xmlFeeds (/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 36: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/36.jpg)
Measurement
3636
#SMX @jonoalderson
![Page 37: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/37.jpg)
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.
3737
#SMX @jonoalderson
![Page 38: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/38.jpg)
@jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress)
developers.google.com/speed/pagespeed/insights/
#SMX @jonoalderson
![Page 39: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/39.jpg)
The Waterfall in Chrome
39#SMX @jonoalderson
![Page 40: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/40.jpg)
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.
4040
#SMX @jonoalderson
![Page 41: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/41.jpg)
@jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress)
webpagetest.org
#SMX @jonoalderson
![Page 42: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/42.jpg)
Other Tools
4242
#SMX @jonoalderson
![Page 43: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/43.jpg)
#SMX @jonoalderson
![Page 44: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/44.jpg)
#SMX @jonoalderson
![Page 45: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/45.jpg)
@jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress)
Expert tip... NewRelic
#SMX @jonoalderson
![Page 46: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/46.jpg)
@jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress)
#SMX @jonoalderson
![Page 47: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/47.jpg)
Back-end optimisation
4747
#SMX @jonoalderson
![Page 48: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/48.jpg)
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).
4848
#SMX @jonoalderson
![Page 49: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/49.jpg)
● 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
4949
#SMX @jonoalderson
![Page 50: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/50.jpg)
Server Ecosystems
5050
#SMX @jonoalderson
Varnish (static page cache) < Apache/Nginx < PHP/Python (memcache) < MySQL/NoSQL (request cache)
vs
![Page 51: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/51.jpg)
● 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
5151
#SMX @jonoalderson
![Page 52: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/52.jpg)
SCARY?
525252
#SMX @jonoalderson
![Page 53: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/53.jpg)
@jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress)
5353
#SMX @jonoalderson
![Page 54: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/54.jpg)
@jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress)
cPanel
5454
#SMX @jonoalderson
![Page 55: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/55.jpg)
@jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress)
5555
#SMX @jonoalderson
![Page 56: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/56.jpg)
@jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress)
5656
#SMX @jonoalderson
![Page 57: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/57.jpg)
575757
#SMX @jonoalderson
![Page 58: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/58.jpg)
Front-end optimisation
5858
#SMX @jonoalderson
![Page 59: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/59.jpg)
Caching Policies● Set your expiry times (appropriately!)● Use 304 “Not Modified” header● Use ETags
5959
#SMX @jonoalderson
![Page 60: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/60.jpg)
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
6060
#SMX @jonoalderson
![Page 61: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/61.jpg)
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.
6161
#SMX @jonoalderson
![Page 62: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/62.jpg)
6262
#SMX @jonoalderson
![Page 63: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/63.jpg)
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
![Page 64: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/64.jpg)
(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.
![Page 65: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/65.jpg)
#SMX @jonoalderson
https://developers.google.com/speed/articles/reflow
![Page 66: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/66.jpg)
CSS specificity = slow paint● .container > nav > ul > li > a { color: red; }● .main-nav-link { color: red; }
66#SMX @jonoalderson
![Page 67: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/67.jpg)
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
![Page 68: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/68.jpg)
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
![Page 69: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/69.jpg)
PWAs
6969
#SMX @jonoalderson
![Page 70: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/70.jpg)
https://developers.google.com/web/progressive-web-apps/
#SMX @jonoalderson
![Page 71: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/71.jpg)
#SMX @jonoalderson
![Page 72: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/72.jpg)
Key takeaways...
7272
#SMX @jonoalderson
![Page 73: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/73.jpg)
You have a million opportunities to
improve performance ...and every byte matters to users.
737373
#SMX @jonoalderson
![Page 74: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/74.jpg)
Ignore all of the scores the tools give you, and just make
things faster.
747474
#SMX @jonoalderson
![Page 75: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/75.jpg)
Don’t neglect your infrastructure and
back-end opportunities
757575
#SMX @jonoalderson
![Page 76: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/76.jpg)
The landscape is changing
Don’t get caught up in today’s hype
767676
#SMX @jonoalderson
![Page 77: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/77.jpg)
AMP is not the end.
77
(but this is)
77#SMX @jonoalderson
![Page 78: Accelerated Mobile - Beyond AMP](https://reader035.vdocuments.site/reader035/viewer/2022062522/58d128051a28abe3298b48ef/html5/thumbnails/78.jpg)
@jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress)
GO OUT AND WIN7878
#SMX @jonoalderson