Upload
jono-alderson
View
160
Download
0
Embed Size (px)
Citation preview
Accelerated Mobile... Beyond AMP!
11
#SMX @jonoalderson
#SMX @JonoAlderson22#SMX @jonoalderson
#SMX @JonoAlderson
!
4
There’s a lot of much-needed focus on
(mobile) performance at the moment
4#SMX @jonoalderson
55
#SMX @jonoalderson
On AMP, briefly...
66
#SMX @jonoalderson
7
Just the tip of the iceberg...
7#SMX @jonoalderson
8
Risky? Dangerous? Subversive, even?
8#SMX @jonoalderson
99
#SMX @jonoalderson
Are you actively managing your AMP cache?
https://developers.google.com/amp/cache/update-ping
1010
#SMX @jonoalderson
Anyone can (theoretically) create an AMP cache.
11
https://github.com/ampproject/amphtml/blob/master/spec/amp-cache-guidelines.md
11#SMX @jonoalderson
12#SMX @jonoalderson
https://github.com/ampproject/amphtml/tree/master/src
13
What if you could de-
couple AMP?
13#SMX @jonoalderson
To clarify, I’m not saying that you shouldn’t adopt AMP.
1414
#SMX @jonoalderson
So, what’s the broader performance toolkit look like?
1515
#SMX @jonoalderson
Infrastructure & network optimisation
1616
#SMX @jonoalderson
HTTP2 Implications
1717
#SMX @jonoalderson
#SMX @jonoalderson
online.marketing/guide/https
SSL Chain Length
19
On certificate length...
19#SMX @jonoalderson
2020
#SMX @jonoalderson
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
222222
#SMX @jonoalderson
Connection & data transfer
2323
#SMX @jonoalderson
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
Packet sizes & cookie worries aren’t a thing any more
25
https://hpbn.co/building-blocks-of-tcp/
25#SMX @jonoalderson
...but data & connection efficiency is.
2626
#SMX @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.
2727
#SMX @jonoalderson
For media/images…Test CSS3 vs images vs sprites vs encoding vs inlining
2828
#SMX @jonoalderson
http://bit.ly/srcsetstuff
SRCSET is the only solution for managing image sizes/resolutions.
3131
#SMX @jonoalderson
32
Sprite sheets are still a thing!
3232
#SMX @jonoalderson
https://developers.google.com/speed/webp/
WebP
33#SMX @jonoalderson
Error management for common request
headachesManage your robots, favicons, and other
irritations.
343434
#SMX @jonoalderson
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)
Measurement
3636
#SMX @jonoalderson
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
@jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress)
developers.google.com/speed/pagespeed/insights/
#SMX @jonoalderson
The Waterfall in Chrome
39#SMX @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.
4040
#SMX @jonoalderson
@jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress)
webpagetest.org
#SMX @jonoalderson
Other Tools
4242
#SMX @jonoalderson
#SMX @jonoalderson
#SMX @jonoalderson
@jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress)
Expert tip... NewRelic
#SMX @jonoalderson
@jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress)
#SMX @jonoalderson
Back-end optimisation
4747
#SMX @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).
4848
#SMX @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
4949
#SMX @jonoalderson
Server Ecosystems
5050
#SMX @jonoalderson
Varnish (static page cache) < Apache/Nginx < PHP/Python (memcache) < MySQL/NoSQL (request cache)
vs
● 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
SCARY?
525252
#SMX @jonoalderson
@jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress)
5353
#SMX @jonoalderson
@jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress)
cPanel
5454
#SMX @jonoalderson
@jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress)
5555
#SMX @jonoalderson
@jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress)
5656
#SMX @jonoalderson
575757
#SMX @jonoalderson
Front-end optimisation
5858
#SMX @jonoalderson
Caching Policies● Set your expiry times (appropriately!)● Use 304 “Not Modified” header● Use ETags
5959
#SMX @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)
● Rel next/previous automatically triggers prefetch in Chrome+Firefox
6060
#SMX @jonoalderson
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
6262
#SMX @jonoalderson
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
(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.
#SMX @jonoalderson
https://developers.google.com/speed/articles/reflow
CSS specificity = slow paint● .container > nav > ul > li > a { color: red; }● .main-nav-link { color: red; }
66#SMX @jonoalderson
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
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
PWAs
6969
#SMX @jonoalderson
https://developers.google.com/web/progressive-web-apps/
#SMX @jonoalderson
#SMX @jonoalderson
Key takeaways...
7272
#SMX @jonoalderson
You have a million opportunities to
improve performance ...and every byte matters to users.
737373
#SMX @jonoalderson
Ignore all of the scores the tools give you, and just make
things faster.
747474
#SMX @jonoalderson
Don’t neglect your infrastructure and
back-end opportunities
757575
#SMX @jonoalderson
The landscape is changing
Don’t get caught up in today’s hype
767676
#SMX @jonoalderson
AMP is not the end.
77
(but this is)
77#SMX @jonoalderson
@jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress)
GO OUT AND WIN7878
#SMX @jonoalderson