The Inbounder London - Jono Alderson

Jono Alderson
Accelerated Mobile...
Beyond AMP!
@jonoalderson

@jonoalderson #TheInbounder@jonoalderson #TheInbounder

@jonoalderson #TheInbounder
There’s a lot of much-needed
focus on (mobile) performance
at the moment

On AMP, briefly...

8
Just the tip of the iceberg...

http://bit.ly/badams-amp

Risky? Dangerous? Subversive, even?

Are you actively
managing your
AMP cache?
https://developers.google.com/amp/cache/update-ping

Anyone can (theoretically)
create an AMP cache.
https://github.com/ampproject/amphtml/blob/master/spec/amp-cache-guidelines.md

http://bit.ly/ampJS
What if you could
de-couple AMP?

To clarify, I’m not saying that you
shouldn’t adopt AMP.

So, what’s the broader performance
toolkit look like?

Infrastructure & network optimisation

HTTP2 Implications

HTTPS isn’t a binary thing!

SSL Chain LengthOn certificate length...

HSTS
● Become compliant by adding extra HTTPS checks
● Register for the HSTS the preload list (hstspreload.org)
● Skip the HTTP/HTTPS redirect when people type example.com

online.marketing/guide/https
More here...

We have a performance problem...

Go smarter, not faster!
bit.ly/http2-ilya

Connection & data transfer

With HTTP2, you
don’t need to worry
as much about
round trips...
...but you should
still consider what
you’re transferring,
and how.

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.
30
30

For media/images…
Test CSS3 vs images vs sprites vs encoding vs inlining

http://bit.ly/srcsetstuff
SRCSET is the only solution for
managing image sizes/resolutions.

...And you can also use <picture> to
support multiple formats

base64-image.de
You can also base64() encode images...

base64-image.de

Sprite sheets are might still be a thing!

https://developers.google.com/speed/webp/
WebP > JPG & PNG

Error management for
common request headaches
Manage your robots, favicons, and other irritations.

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)

Measurement

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

developers.google.com/speed/pagespeed/insights/

The Waterfall in Chrome

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.

webpagetest.org

Other Tools

Undoing bad habits

Hostname sharding
https://blog.stackpath.com/glossary/domain-sharding/

Resource combination

http://bit.ly/newchrometoys
Brand New Chrome Dev Toys

Back-end optimisation

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).

● 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

Server Ecosystems
Varnish (static page cache) < Apache/Nginx < PHP/Python
(memcache) < MySQL/NoSQL (request cache)
vs

SCARY?
Learn by doing

DIY time

Front-end optimisation

Caching Policies
● Set your expiry times (appropriately!)
● Use 304 “Not Modified” header
● Use ETags

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

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.

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

(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

CSS specificity = slow paint
● .container > nav > ul > li > a { color: red; }
● .main-nav-link { color: red; }

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!

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?

PWAs

https://developers.google.com/web/progressive-web-apps/

“Twitter Lite and High Performance React
Progressive Web Apps at Scale”
http://bit.ly/twitterpwa

78

Key takeaways...

You have a million
opportunities to improve
performance
...and every byte matters to users.

Ignore all of the scores
the tools give you, and
just make things faster.

Don’t neglect your
infrastructure and
back-end opportunities

The landscape is changing
Don’t get caught up in today’s hype

AMP is not the end.
(but this is)

The Inbounder London - Jono Alderson

The Inbounder London - Jono Alderson

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to The Inbounder London - Jono Alderson

Similar to The Inbounder London - Jono Alderson (20)

More from We Are Marketing

More from We Are Marketing (20)

Recently uploaded

Recently uploaded (20)

The Inbounder London - Jono Alderson