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

base64-image.de

2929

#SMX @jonoalderson

base64-image.de

3030

#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