SlideShare a Scribd company logo
@jonoalderson
@jonoalderson@jonoalderson
@jonoalderson
There’s a lot of much-
needed focus on (mobile)
performance at the moment
@jonoalderson
@jonoalderson@jonoalderson
@jonoalderson
On AMP, briefly...
@jonoalderson
6
Just the tip of the iceberg...
@jonoalderson
@jonoalderson
http://bit.ly/badams-amp
@jonoalderson
Risky? Dangerous? Subversive, even?
@jonoalderson
@jonoalderson
Are you actively
managing your
AMP cache?
https://developers.google.com/amp/cache/update-ping
@jonoalderson
@jonoalderson
You don’t need AMP.
You can do this yourself.
@jonoalderson
Anyone can (theoretically)
create an AMP cache.
https://github.com/ampproject/amphtml/blob/master/spec/amp-cache-guidelines.md
@jonoalderson
@jonoalderson
@jonoalderson
http://bit.ly/ampJS
What if you could
de-couple AMP?
@jonoalderson
To clarify, I’m not saying that you
shouldn’t adopt AMP.
@jonoalderson
So, what’s the broader performance
toolkit look like?
@jonoalderson
Infrastructure & network optimisation
@jonoalderson
HTTP2 Implications
@jonoalderson
@jonoalderson
HTTPS isn’t a binary thing!
@jonoalderson
SSL Chain LengthOn certificate length...
@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
@jonoalderson
online.marketing/guide/https
More here...
@jonoalderson
Let’s go faster.
@jonoalderson@jonoalderson
@jonoalderson
bit.ly/http2-ilya
@jonoalderson
@jonoalderson
We need to go smarter, not faster
@jonoalderson@jonoalderson
@jonoalderson@jonoalderson
@jonoalderson
Connection & data transfer
@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
@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.
31
31
@jonoalderson
@jonoalderson
For media/images…
Test CSS3 vs images vs sprites vs encoding vs inlining
@jonoalderson
http://bit.ly/srcsetstuff
SRCSET is the only solution for
managing image sizes/resolutions.
@jonoalderson
...And you can also use <picture> to
support multiple formats
@jonoalderson
base64-image.de
You can also base64() encode images...
@jonoalderson
base64-image.de
@jonoalderson
@jonoalderson
Sprite sheets are might still be a thing!
@jonoalderson
https://developers.google.com/speed/webp/
WebP > JPG & PNG
@jonoalderson
Error management for
common request headaches
Manage your robots, favicons, and other irritations.
@jonoalderson
@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)
@jonoalderson
Measurement
@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
developers.google.com/speed/pagespeed/insights/
@jonoalderson
@jonoalderson
The Waterfall in Chrome
@jonoalderson
@jonoalderson
http://bit.ly/newchrometoys
Brand New Chrome Dev Toys!
@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
webpagetest.org
@jonoalderson
@jonoalderson
Other Tools
@jonoalderson
@jonoalderson
@jonoalderson
@jonoalderson
@jonoalderson
Undoing bad habits
@jonoalderson
Hostname sharding
https://blog.stackpath.com/glossary/domain-sharding/
@jonoalderson
Resource combination
@jonoalderson
(I’m not going to talk about)
Back-end optimisation
@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).
@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
@jonoalderson
Server Ecosystems
Varnish (static page cache) < Apache/Nginx < PHP/Python
(memcache) < MySQL/NoSQL (request cache)
vs
@jonoalderson
SCARY?
Learn by doing
DIY time
@jonoalderson
@jonoalderson
@jonoalderson
@jonoalderson
@jonoalderson
@jonoalderson
(I’m going to skim over)
Front-end optimisation
@jonoalderson
Caching Policies
● Set your expiry times (appropriately!)
● Use 304 “Not Modified” header
● Use ETags
@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
@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.
@jonoalderson
@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
@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
@jonoalderson
CSS specificity = slow paint
● .container > nav > ul > li > a { color: red; }
● .main-nav-link { color: red; }
@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!
@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?
@jonoalderson
(You should go learn about)
PWAs
@jonoalderson
https://developers.google.com/web/progressive-web-apps/
@jonoalderson
“Twitter Lite and High Performance React
Progressive Web Apps at Scale”
http://bit.ly/twitterpwa
@jonoalderson
@jonoalderson
Key takeaways...
@jonoalderson
@jonoalderson
You have a million
opportunities to improve
performance
...and every byte matters to users.
@jonoalderson
Ignore all of the scores
the tools give you, and
just make things faster.
@jonoalderson
Don’t neglect your
infrastructure and back-
end opportunities
@jonoalderson
The landscape is changing
Don’t get caught up in today’s hype
@jonoalderson
AMP is not the end.
(but this is)
GO OUT AND WIN

More Related Content

What's hot

Browser Changes That Will Impact SEO From 2019-2020
Browser Changes That Will Impact SEO From 2019-2020Browser Changes That Will Impact SEO From 2019-2020
Browser Changes That Will Impact SEO From 2019-2020
Tom Anthony
 
So you think you know canonical tags - Sean Butcher Brighton SEO presentation
So you think you know canonical tags -  Sean Butcher Brighton SEO presentationSo you think you know canonical tags -  Sean Butcher Brighton SEO presentation
So you think you know canonical tags - Sean Butcher Brighton SEO presentation
Sean Butcher
 
SearchLove London 2018 - John Campbell - Voice Search – Calculating and Seizi...
SearchLove London 2018 - John Campbell - Voice Search – Calculating and Seizi...SearchLove London 2018 - John Campbell - Voice Search – Calculating and Seizi...
SearchLove London 2018 - John Campbell - Voice Search – Calculating and Seizi...
Distilled
 
Technical SEO for international markets - Leonie Mann - Brighton SEO 2021
Technical SEO for international markets- Leonie Mann - Brighton SEO 2021Technical SEO for international markets- Leonie Mann - Brighton SEO 2021
Technical SEO for international markets - Leonie Mann - Brighton SEO 2021
Leonie Mann
 
SEO for Large Websites
SEO for Large WebsitesSEO for Large Websites
SEO for Large Websites
Dominic Woodman
 
Do SEOs Need to Know About Chromium? Of CORS! Extended Edition - BrightonSEO ...
Do SEOs Need to Know About Chromium? Of CORS! Extended Edition - BrightonSEO ...Do SEOs Need to Know About Chromium? Of CORS! Extended Edition - BrightonSEO ...
Do SEOs Need to Know About Chromium? Of CORS! Extended Edition - BrightonSEO ...
Jamie Indigo
 
Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript
Onely
 
SearchLove Boston 2018 - Emily Grossman - The Marketer’s Guide to Performance...
SearchLove Boston 2018 - Emily Grossman - The Marketer’s Guide to Performance...SearchLove Boston 2018 - Emily Grossman - The Marketer’s Guide to Performance...
SearchLove Boston 2018 - Emily Grossman - The Marketer’s Guide to Performance...
Distilled
 
Mauro Cattaneo - Why hreflang is crucial to international SEO success - Brigh...
Mauro Cattaneo - Why hreflang is crucial to international SEO success - Brigh...Mauro Cattaneo - Why hreflang is crucial to international SEO success - Brigh...
Mauro Cattaneo - Why hreflang is crucial to international SEO success - Brigh...
Mauro Cattaneo
 
Schema.org and the changing world of Rich Results - SEOEdinburgh Meetup
Schema.org and the changing world of Rich Results - SEOEdinburgh MeetupSchema.org and the changing world of Rich Results - SEOEdinburgh Meetup
Schema.org and the changing world of Rich Results - SEOEdinburgh Meetup
Geoff Kennedy
 
Debugging rendering problems at scale
Debugging rendering problems at scaleDebugging rendering problems at scale
Debugging rendering problems at scale
Giacomo Zecchini
 
Redefining Technical SEO, #MozCon 2019 by Paul Shapiro
Redefining Technical SEO, #MozCon 2019 by Paul ShapiroRedefining Technical SEO, #MozCon 2019 by Paul Shapiro
Redefining Technical SEO, #MozCon 2019 by Paul Shapiro
Paul Shapiro
 
Moving URLs: Structural Web changes 
without losing rankings #SearchLove
Moving URLs: Structural Web changes 
without losing rankings #SearchLoveMoving URLs: Structural Web changes 
without losing rankings #SearchLove
Moving URLs: Structural Web changes 
without losing rankings #SearchLove
Aleyda Solís
 
Introduction to PWAs & New JS Frameworks for Mobile
Introduction to PWAs & New JS Frameworks for MobileIntroduction to PWAs & New JS Frameworks for Mobile
Introduction to PWAs & New JS Frameworks for Mobile
MobileMoxie
 
How to build simple web apps to automate your SEO tasks - BrightonSEO Spring ...
How to build simple web apps to automate your SEO tasks - BrightonSEO Spring ...How to build simple web apps to automate your SEO tasks - BrightonSEO Spring ...
How to build simple web apps to automate your SEO tasks - BrightonSEO Spring ...
Charly Wargnier
 
The State of the Web: Pagination and Infinite Scroll
The State of the Web: Pagination and Infinite ScrollThe State of the Web: Pagination and Infinite Scroll
The State of the Web: Pagination and Infinite Scroll
Adam Gent
 
SearchLove London 2016 | Dom Woodman | How to Get Insight From Your Logs
SearchLove London 2016 | Dom Woodman | How to Get Insight From Your LogsSearchLove London 2016 | Dom Woodman | How to Get Insight From Your Logs
SearchLove London 2016 | Dom Woodman | How to Get Insight From Your Logs
Distilled
 
Technical Content Optimization
Technical Content OptimizationTechnical Content Optimization
Technical Content Optimization
Michael King
 
Split Testing for SEO - 9 Months of Learning
Split Testing for SEO - 9 Months of LearningSplit Testing for SEO - 9 Months of Learning
Split Testing for SEO - 9 Months of Learning
Dominic Woodman
 
SMX East - SEO Tools Panel
SMX East - SEO Tools PanelSMX East - SEO Tools Panel
SMX East - SEO Tools Panel
Abby Hamilton
 

What's hot (20)

Browser Changes That Will Impact SEO From 2019-2020
Browser Changes That Will Impact SEO From 2019-2020Browser Changes That Will Impact SEO From 2019-2020
Browser Changes That Will Impact SEO From 2019-2020
 
So you think you know canonical tags - Sean Butcher Brighton SEO presentation
So you think you know canonical tags -  Sean Butcher Brighton SEO presentationSo you think you know canonical tags -  Sean Butcher Brighton SEO presentation
So you think you know canonical tags - Sean Butcher Brighton SEO presentation
 
SearchLove London 2018 - John Campbell - Voice Search – Calculating and Seizi...
SearchLove London 2018 - John Campbell - Voice Search – Calculating and Seizi...SearchLove London 2018 - John Campbell - Voice Search – Calculating and Seizi...
SearchLove London 2018 - John Campbell - Voice Search – Calculating and Seizi...
 
Technical SEO for international markets - Leonie Mann - Brighton SEO 2021
Technical SEO for international markets- Leonie Mann - Brighton SEO 2021Technical SEO for international markets- Leonie Mann - Brighton SEO 2021
Technical SEO for international markets - Leonie Mann - Brighton SEO 2021
 
SEO for Large Websites
SEO for Large WebsitesSEO for Large Websites
SEO for Large Websites
 
Do SEOs Need to Know About Chromium? Of CORS! Extended Edition - BrightonSEO ...
Do SEOs Need to Know About Chromium? Of CORS! Extended Edition - BrightonSEO ...Do SEOs Need to Know About Chromium? Of CORS! Extended Edition - BrightonSEO ...
Do SEOs Need to Know About Chromium? Of CORS! Extended Edition - BrightonSEO ...
 
Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript
 
SearchLove Boston 2018 - Emily Grossman - The Marketer’s Guide to Performance...
SearchLove Boston 2018 - Emily Grossman - The Marketer’s Guide to Performance...SearchLove Boston 2018 - Emily Grossman - The Marketer’s Guide to Performance...
SearchLove Boston 2018 - Emily Grossman - The Marketer’s Guide to Performance...
 
Mauro Cattaneo - Why hreflang is crucial to international SEO success - Brigh...
Mauro Cattaneo - Why hreflang is crucial to international SEO success - Brigh...Mauro Cattaneo - Why hreflang is crucial to international SEO success - Brigh...
Mauro Cattaneo - Why hreflang is crucial to international SEO success - Brigh...
 
Schema.org and the changing world of Rich Results - SEOEdinburgh Meetup
Schema.org and the changing world of Rich Results - SEOEdinburgh MeetupSchema.org and the changing world of Rich Results - SEOEdinburgh Meetup
Schema.org and the changing world of Rich Results - SEOEdinburgh Meetup
 
Debugging rendering problems at scale
Debugging rendering problems at scaleDebugging rendering problems at scale
Debugging rendering problems at scale
 
Redefining Technical SEO, #MozCon 2019 by Paul Shapiro
Redefining Technical SEO, #MozCon 2019 by Paul ShapiroRedefining Technical SEO, #MozCon 2019 by Paul Shapiro
Redefining Technical SEO, #MozCon 2019 by Paul Shapiro
 
Moving URLs: Structural Web changes 
without losing rankings #SearchLove
Moving URLs: Structural Web changes 
without losing rankings #SearchLoveMoving URLs: Structural Web changes 
without losing rankings #SearchLove
Moving URLs: Structural Web changes 
without losing rankings #SearchLove
 
Introduction to PWAs & New JS Frameworks for Mobile
Introduction to PWAs & New JS Frameworks for MobileIntroduction to PWAs & New JS Frameworks for Mobile
Introduction to PWAs & New JS Frameworks for Mobile
 
How to build simple web apps to automate your SEO tasks - BrightonSEO Spring ...
How to build simple web apps to automate your SEO tasks - BrightonSEO Spring ...How to build simple web apps to automate your SEO tasks - BrightonSEO Spring ...
How to build simple web apps to automate your SEO tasks - BrightonSEO Spring ...
 
The State of the Web: Pagination and Infinite Scroll
The State of the Web: Pagination and Infinite ScrollThe State of the Web: Pagination and Infinite Scroll
The State of the Web: Pagination and Infinite Scroll
 
SearchLove London 2016 | Dom Woodman | How to Get Insight From Your Logs
SearchLove London 2016 | Dom Woodman | How to Get Insight From Your LogsSearchLove London 2016 | Dom Woodman | How to Get Insight From Your Logs
SearchLove London 2016 | Dom Woodman | How to Get Insight From Your Logs
 
Technical Content Optimization
Technical Content OptimizationTechnical Content Optimization
Technical Content Optimization
 
Split Testing for SEO - 9 Months of Learning
Split Testing for SEO - 9 Months of LearningSplit Testing for SEO - 9 Months of Learning
Split Testing for SEO - 9 Months of Learning
 
SMX East - SEO Tools Panel
SMX East - SEO Tools PanelSMX East - SEO Tools Panel
SMX East - SEO Tools Panel
 

Similar to The Need for Speed! Accelerated mobile, beyond AMP

Accelerated Mobile - Beyond AMP
Accelerated Mobile - Beyond AMPAccelerated Mobile - Beyond AMP
Accelerated Mobile - Beyond AMP
Jono Alderson
 
How to Take Your Website Beyond Fast
How to Take Your Website Beyond FastHow to Take Your Website Beyond Fast
How to Take Your Website Beyond Fast
Search Engine Journal
 
The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018
Anton Shulke
 
Frontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser renderingFrontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser rendering
Manuel Garcia
 
The Need For Speed
The Need For SpeedThe Need For Speed
The Need For Speed
Andy Davies
 
Performance as UX with Justin Howlett
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin Howlett
FITC
 
Javascript & SEO 2019
Javascript & SEO 2019Javascript & SEO 2019
Javascript & SEO 2019
Edd Wilson
 
The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018
Bastian Grimm
 
Intro To Django
Intro To DjangoIntro To Django
Intro To Django
Udi Bauman
 
After YSlow "A"
After YSlow "A"After YSlow "A"
After YSlow "A"
Nicole Sullivan
 
Desenvolvimento Mobile Híbrido
Desenvolvimento Mobile HíbridoDesenvolvimento Mobile Híbrido
Desenvolvimento Mobile Híbrido
Juliano Martins
 
How Googlebot Renders (Roleplaying as Google's Web Rendering Service-- D&D st...
How Googlebot Renders (Roleplaying as Google's Web Rendering Service-- D&D st...How Googlebot Renders (Roleplaying as Google's Web Rendering Service-- D&D st...
How Googlebot Renders (Roleplaying as Google's Web Rendering Service-- D&D st...
Jamie Indigo
 
Mobile html5 today
Mobile html5 todayMobile html5 today
Mobile html5 today
Ido Green
 
Troubleshooting SEO for JS Frameworks - Patrick Stox - DTD 2018
Troubleshooting SEO for JS Frameworks - Patrick Stox - DTD 2018Troubleshooting SEO for JS Frameworks - Patrick Stox - DTD 2018
Troubleshooting SEO for JS Frameworks - Patrick Stox - DTD 2018
patrickstox
 
0.6 seconds is the new slow
0.6 seconds is the new slow0.6 seconds is the new slow
0.6 seconds is the new slow
Jono Alderson
 
Educate 2017: Quick 'n Lazy: How we keep things speedy while staying out of y...
Educate 2017: Quick 'n Lazy: How we keep things speedy while staying out of y...Educate 2017: Quick 'n Lazy: How we keep things speedy while staying out of y...
Educate 2017: Quick 'n Lazy: How we keep things speedy while staying out of y...
Learnosity
 
Welcome to a new reality - DeepCrawl Webinar 2018
Welcome to a new reality - DeepCrawl Webinar 2018Welcome to a new reality - DeepCrawl Webinar 2018
Welcome to a new reality - DeepCrawl Webinar 2018
Bastian Grimm
 
AMP - SMX München 2018
AMP - SMX München 2018AMP - SMX München 2018
AMP - SMX München 2018
Bastian Grimm
 
Running HTML5 Mobile Web Games at 60fps
Running HTML5 Mobile Web Games at 60fpsRunning HTML5 Mobile Web Games at 60fps
Running HTML5 Mobile Web Games at 60fps
Apoorv Saxena
 
Using Cool New Frameworks in (Mobile) Domino Apps
Using Cool New Frameworks in (Mobile) Domino AppsUsing Cool New Frameworks in (Mobile) Domino Apps
Using Cool New Frameworks in (Mobile) Domino Apps
Teamstudio
 

Similar to The Need for Speed! Accelerated mobile, beyond AMP (20)

Accelerated Mobile - Beyond AMP
Accelerated Mobile - Beyond AMPAccelerated Mobile - Beyond AMP
Accelerated Mobile - Beyond AMP
 
How to Take Your Website Beyond Fast
How to Take Your Website Beyond FastHow to Take Your Website Beyond Fast
How to Take Your Website Beyond Fast
 
The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018
 
Frontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser renderingFrontend Performance: Illusions & browser rendering
Frontend Performance: Illusions & browser rendering
 
The Need For Speed
The Need For SpeedThe Need For Speed
The Need For Speed
 
Performance as UX with Justin Howlett
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin Howlett
 
Javascript & SEO 2019
Javascript & SEO 2019Javascript & SEO 2019
Javascript & SEO 2019
 
The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018The need for Speed: Advanced #webperf - SEOday 2018
The need for Speed: Advanced #webperf - SEOday 2018
 
Intro To Django
Intro To DjangoIntro To Django
Intro To Django
 
After YSlow "A"
After YSlow "A"After YSlow "A"
After YSlow "A"
 
Desenvolvimento Mobile Híbrido
Desenvolvimento Mobile HíbridoDesenvolvimento Mobile Híbrido
Desenvolvimento Mobile Híbrido
 
How Googlebot Renders (Roleplaying as Google's Web Rendering Service-- D&D st...
How Googlebot Renders (Roleplaying as Google's Web Rendering Service-- D&D st...How Googlebot Renders (Roleplaying as Google's Web Rendering Service-- D&D st...
How Googlebot Renders (Roleplaying as Google's Web Rendering Service-- D&D st...
 
Mobile html5 today
Mobile html5 todayMobile html5 today
Mobile html5 today
 
Troubleshooting SEO for JS Frameworks - Patrick Stox - DTD 2018
Troubleshooting SEO for JS Frameworks - Patrick Stox - DTD 2018Troubleshooting SEO for JS Frameworks - Patrick Stox - DTD 2018
Troubleshooting SEO for JS Frameworks - Patrick Stox - DTD 2018
 
0.6 seconds is the new slow
0.6 seconds is the new slow0.6 seconds is the new slow
0.6 seconds is the new slow
 
Educate 2017: Quick 'n Lazy: How we keep things speedy while staying out of y...
Educate 2017: Quick 'n Lazy: How we keep things speedy while staying out of y...Educate 2017: Quick 'n Lazy: How we keep things speedy while staying out of y...
Educate 2017: Quick 'n Lazy: How we keep things speedy while staying out of y...
 
Welcome to a new reality - DeepCrawl Webinar 2018
Welcome to a new reality - DeepCrawl Webinar 2018Welcome to a new reality - DeepCrawl Webinar 2018
Welcome to a new reality - DeepCrawl Webinar 2018
 
AMP - SMX München 2018
AMP - SMX München 2018AMP - SMX München 2018
AMP - SMX München 2018
 
Running HTML5 Mobile Web Games at 60fps
Running HTML5 Mobile Web Games at 60fpsRunning HTML5 Mobile Web Games at 60fps
Running HTML5 Mobile Web Games at 60fps
 
Using Cool New Frameworks in (Mobile) Domino Apps
Using Cool New Frameworks in (Mobile) Domino AppsUsing Cool New Frameworks in (Mobile) Domino Apps
Using Cool New Frameworks in (Mobile) Domino Apps
 

More from Jono Alderson

The Democratization of SEO
The Democratization of SEOThe Democratization of SEO
The Democratization of SEO
Jono Alderson
 
(How to) stop pretending that you're customer-centric
(How to) stop pretending that you're customer-centric(How to) stop pretending that you're customer-centric
(How to) stop pretending that you're customer-centric
Jono Alderson
 
The experience age has arrived...
The experience age has arrived...The experience age has arrived...
The experience age has arrived...
Jono Alderson
 
Searching higher up the funnel
Searching higher up the funnelSearching higher up the funnel
Searching higher up the funnel
Jono Alderson
 
Product Marketing by Numbers - Objectives, Goals and KPI frameworks
Product Marketing by Numbers - Objectives, Goals and KPI frameworksProduct Marketing by Numbers - Objectives, Goals and KPI frameworks
Product Marketing by Numbers - Objectives, Goals and KPI frameworks
Jono Alderson
 
Doing an awesome site audit
Doing an awesome site auditDoing an awesome site audit
Doing an awesome site audit
Jono Alderson
 
Advanced keyword research
Advanced keyword researchAdvanced keyword research
Advanced keyword research
Jono Alderson
 
Getting Around Finance - Keyword Research & Tagging
Getting Around Finance - Keyword Research & TaggingGetting Around Finance - Keyword Research & Tagging
Getting Around Finance - Keyword Research & Tagging
Jono Alderson
 
Data layers 101
Data layers 101Data layers 101
Data layers 101
Jono Alderson
 
Organisation Hacking
Organisation HackingOrganisation Hacking
Organisation Hacking
Jono Alderson
 
Changing Channel - Linkdex iGaming #thinktank
Changing Channel - Linkdex iGaming #thinktankChanging Channel - Linkdex iGaming #thinktank
Changing Channel - Linkdex iGaming #thinktank
Jono Alderson
 
Universal Analytics & Single User View
Universal Analytics & Single User ViewUniversal Analytics & Single User View
Universal Analytics & Single User View
Jono Alderson
 
Measuring the ROI of content marketing
Measuring the ROI of content marketingMeasuring the ROI of content marketing
Measuring the ROI of content marketing
Jono Alderson
 
Digital marketing by numbers
Digital marketing by numbersDigital marketing by numbers
Digital marketing by numbers
Jono Alderson
 
What’s the big deal about semantic HTML?
What’s the big deal about semantic HTML?What’s the big deal about semantic HTML?
What’s the big deal about semantic HTML?
Jono Alderson
 

More from Jono Alderson (15)

The Democratization of SEO
The Democratization of SEOThe Democratization of SEO
The Democratization of SEO
 
(How to) stop pretending that you're customer-centric
(How to) stop pretending that you're customer-centric(How to) stop pretending that you're customer-centric
(How to) stop pretending that you're customer-centric
 
The experience age has arrived...
The experience age has arrived...The experience age has arrived...
The experience age has arrived...
 
Searching higher up the funnel
Searching higher up the funnelSearching higher up the funnel
Searching higher up the funnel
 
Product Marketing by Numbers - Objectives, Goals and KPI frameworks
Product Marketing by Numbers - Objectives, Goals and KPI frameworksProduct Marketing by Numbers - Objectives, Goals and KPI frameworks
Product Marketing by Numbers - Objectives, Goals and KPI frameworks
 
Doing an awesome site audit
Doing an awesome site auditDoing an awesome site audit
Doing an awesome site audit
 
Advanced keyword research
Advanced keyword researchAdvanced keyword research
Advanced keyword research
 
Getting Around Finance - Keyword Research & Tagging
Getting Around Finance - Keyword Research & TaggingGetting Around Finance - Keyword Research & Tagging
Getting Around Finance - Keyword Research & Tagging
 
Data layers 101
Data layers 101Data layers 101
Data layers 101
 
Organisation Hacking
Organisation HackingOrganisation Hacking
Organisation Hacking
 
Changing Channel - Linkdex iGaming #thinktank
Changing Channel - Linkdex iGaming #thinktankChanging Channel - Linkdex iGaming #thinktank
Changing Channel - Linkdex iGaming #thinktank
 
Universal Analytics & Single User View
Universal Analytics & Single User ViewUniversal Analytics & Single User View
Universal Analytics & Single User View
 
Measuring the ROI of content marketing
Measuring the ROI of content marketingMeasuring the ROI of content marketing
Measuring the ROI of content marketing
 
Digital marketing by numbers
Digital marketing by numbersDigital marketing by numbers
Digital marketing by numbers
 
What’s the big deal about semantic HTML?
What’s the big deal about semantic HTML?What’s the big deal about semantic HTML?
What’s the big deal about semantic HTML?
 

Recently uploaded

Pengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptxPengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptx
Fajar Baskoro
 
Electric Fetus - Record Store Scavenger Hunt
Electric Fetus - Record Store Scavenger HuntElectric Fetus - Record Store Scavenger Hunt
Electric Fetus - Record Store Scavenger Hunt
RamseyBerglund
 
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptxRESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
zuzanka
 
Juneteenth Freedom Day 2024 David Douglas School District
Juneteenth Freedom Day 2024 David Douglas School DistrictJuneteenth Freedom Day 2024 David Douglas School District
Juneteenth Freedom Day 2024 David Douglas School District
David Douglas School District
 
Standardized tool for Intelligence test.
Standardized tool for Intelligence test.Standardized tool for Intelligence test.
Standardized tool for Intelligence test.
deepaannamalai16
 
Haunted Houses by H W Longfellow for class 10
Haunted Houses by H W Longfellow for class 10Haunted Houses by H W Longfellow for class 10
Haunted Houses by H W Longfellow for class 10
nitinpv4ai
 
NEWSPAPERS - QUESTION 1 - REVISION POWERPOINT.pptx
NEWSPAPERS - QUESTION 1 - REVISION POWERPOINT.pptxNEWSPAPERS - QUESTION 1 - REVISION POWERPOINT.pptx
NEWSPAPERS - QUESTION 1 - REVISION POWERPOINT.pptx
iammrhaywood
 
Temple of Asclepius in Thrace. Excavation results
Temple of Asclepius in Thrace. Excavation resultsTemple of Asclepius in Thrace. Excavation results
Temple of Asclepius in Thrace. Excavation results
Krassimira Luka
 
HYPERTENSION - SLIDE SHARE PRESENTATION.
HYPERTENSION - SLIDE SHARE PRESENTATION.HYPERTENSION - SLIDE SHARE PRESENTATION.
HYPERTENSION - SLIDE SHARE PRESENTATION.
deepaannamalai16
 
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptxBeyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
EduSkills OECD
 
A Visual Guide to 1 Samuel | A Tale of Two Hearts
A Visual Guide to 1 Samuel | A Tale of Two HeartsA Visual Guide to 1 Samuel | A Tale of Two Hearts
A Visual Guide to 1 Samuel | A Tale of Two Hearts
Steve Thomason
 
Jemison, MacLaughlin, and Majumder "Broadening Pathways for Editors and Authors"
Jemison, MacLaughlin, and Majumder "Broadening Pathways for Editors and Authors"Jemison, MacLaughlin, and Majumder "Broadening Pathways for Editors and Authors"
Jemison, MacLaughlin, and Majumder "Broadening Pathways for Editors and Authors"
National Information Standards Organization (NISO)
 
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
imrankhan141184
 
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) CurriculumPhilippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
MJDuyan
 
math operations ued in python and all used
math operations ued in python and all usedmath operations ued in python and all used
math operations ued in python and all used
ssuser13ffe4
 
Mule event processing models | MuleSoft Mysore Meetup #47
Mule event processing models | MuleSoft Mysore Meetup #47Mule event processing models | MuleSoft Mysore Meetup #47
Mule event processing models | MuleSoft Mysore Meetup #47
MysoreMuleSoftMeetup
 
skeleton System.pdf (skeleton system wow)
skeleton System.pdf (skeleton system wow)skeleton System.pdf (skeleton system wow)
skeleton System.pdf (skeleton system wow)
Mohammad Al-Dhahabi
 
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptxC1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
mulvey2
 
How to Predict Vendor Bill Product in Odoo 17
How to Predict Vendor Bill Product in Odoo 17How to Predict Vendor Bill Product in Odoo 17
How to Predict Vendor Bill Product in Odoo 17
Celine George
 
What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...
What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...
What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...
GeorgeMilliken2
 

Recently uploaded (20)

Pengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptxPengantar Penggunaan Flutter - Dart programming language1.pptx
Pengantar Penggunaan Flutter - Dart programming language1.pptx
 
Electric Fetus - Record Store Scavenger Hunt
Electric Fetus - Record Store Scavenger HuntElectric Fetus - Record Store Scavenger Hunt
Electric Fetus - Record Store Scavenger Hunt
 
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptxRESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
 
Juneteenth Freedom Day 2024 David Douglas School District
Juneteenth Freedom Day 2024 David Douglas School DistrictJuneteenth Freedom Day 2024 David Douglas School District
Juneteenth Freedom Day 2024 David Douglas School District
 
Standardized tool for Intelligence test.
Standardized tool for Intelligence test.Standardized tool for Intelligence test.
Standardized tool for Intelligence test.
 
Haunted Houses by H W Longfellow for class 10
Haunted Houses by H W Longfellow for class 10Haunted Houses by H W Longfellow for class 10
Haunted Houses by H W Longfellow for class 10
 
NEWSPAPERS - QUESTION 1 - REVISION POWERPOINT.pptx
NEWSPAPERS - QUESTION 1 - REVISION POWERPOINT.pptxNEWSPAPERS - QUESTION 1 - REVISION POWERPOINT.pptx
NEWSPAPERS - QUESTION 1 - REVISION POWERPOINT.pptx
 
Temple of Asclepius in Thrace. Excavation results
Temple of Asclepius in Thrace. Excavation resultsTemple of Asclepius in Thrace. Excavation results
Temple of Asclepius in Thrace. Excavation results
 
HYPERTENSION - SLIDE SHARE PRESENTATION.
HYPERTENSION - SLIDE SHARE PRESENTATION.HYPERTENSION - SLIDE SHARE PRESENTATION.
HYPERTENSION - SLIDE SHARE PRESENTATION.
 
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptxBeyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
 
A Visual Guide to 1 Samuel | A Tale of Two Hearts
A Visual Guide to 1 Samuel | A Tale of Two HeartsA Visual Guide to 1 Samuel | A Tale of Two Hearts
A Visual Guide to 1 Samuel | A Tale of Two Hearts
 
Jemison, MacLaughlin, and Majumder "Broadening Pathways for Editors and Authors"
Jemison, MacLaughlin, and Majumder "Broadening Pathways for Editors and Authors"Jemison, MacLaughlin, and Majumder "Broadening Pathways for Editors and Authors"
Jemison, MacLaughlin, and Majumder "Broadening Pathways for Editors and Authors"
 
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
 
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) CurriculumPhilippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
Philippine Edukasyong Pantahanan at Pangkabuhayan (EPP) Curriculum
 
math operations ued in python and all used
math operations ued in python and all usedmath operations ued in python and all used
math operations ued in python and all used
 
Mule event processing models | MuleSoft Mysore Meetup #47
Mule event processing models | MuleSoft Mysore Meetup #47Mule event processing models | MuleSoft Mysore Meetup #47
Mule event processing models | MuleSoft Mysore Meetup #47
 
skeleton System.pdf (skeleton system wow)
skeleton System.pdf (skeleton system wow)skeleton System.pdf (skeleton system wow)
skeleton System.pdf (skeleton system wow)
 
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptxC1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
 
How to Predict Vendor Bill Product in Odoo 17
How to Predict Vendor Bill Product in Odoo 17How to Predict Vendor Bill Product in Odoo 17
How to Predict Vendor Bill Product in Odoo 17
 
What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...
What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...
What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...
 

The Need for Speed! Accelerated mobile, beyond AMP

Editor's Notes

  1. Why is performance important? Everybody seen the Amazon studies (and all of the others?) Why is it only going to get more important? Instantaneous is the new 2 seconds is the new 5 seconds!
  2. This session is for anybody who wants to go faster (either with AMP, or without), but doesn’t know where to start; front end, back end, and everything inbetween.
  3. The AMP project in particular has pushed performance forward (not without politics)... (AND, there may be good reasons why you don’t want to use AMP, but still want the benefits).
  4. Not a magic bullet. Walled gardens and dependency on Google, poor implementation. Yet another language/framework to maintain (for them, and for us). Deprecation? Invalid code? Security? Pinging, caching. Pros and cons? Control! Ownership! Are there alternatives?
  5. Have to ping to manage versions
  6. But no guarantees; flakey!
  7. Other people are getting involved. But is it enough?...AND… their implementation is a little… odd… not easy to do your own amp cache, as you need to host and maintain your own version of the amp library# no guarantees your amp cache is used by third parties such as search engines
  8. What’s your motivation for adopting AMP; the performance, or access to the sandpit? You can have all the performance advantages without having to be in the cache, etc.
  9. But it’s a choice, with implications. And there are other options. But it’s also the tip of the iceberg; if your goal is performance, there are a million other things you can do.
  10. HTTPS is mandatory. Security. Performance. Acceptance. This thinking assumes that you’re already compliant, or are about to be. No reason not to (ad platforms, etc) “HTTPS is slower!” - the myth of secure handshake bottlenecks
  11. Not binary!
  12. Cheap certs often = long chains! Cloudflare = shared/cheap Let’s Encrypt; install in/on server. Also, cPanel now DIY’s, too. Better certs = closer to trusted sources, and also better liabilities
  13. Still bottlenecks based on the number of assets you’re loading, the size of those, where they’re hosted, etc.
  14. Still bottlenecks based on the number of assets you’re loading, the size of those, where they’re hosted, etc.
  15. Apache config, or automate via Cloudflare (etc) Cloudflare - also, upgrade insecure resources, force https, free sll certs, etc. At some point you have to sort all of this out, so it should probably be now.
  16. Parallelised/individual resources; no waiting! Enables keep-alive by default
  17. A FAST, wired connection from east coast to west coast USA might take ~60-100ms. A 4g connection to a remote server might take up to ~200ms (‘sluggish’)! HTTP services do round-trips to get resources; HTTP2 services run in parallel. What goes into your first few packets?
  18. CSS3 is often faster than using images ...Though processing and rendering are your bottlenecks SVGs > JPG/PNG is a good general rule. WebP even better, but challenges. Although… inlining resources makes them harder to cache, and may not be optimal in terms of prioritsation
  19. Conditional media queries still (can) load all the assets Mechanisms which use display:none still load the image Mechanisms which replace the image src attribute to lazy-load probably aren’t great for accessibility or SEO
  20. Conditional media queries still (can) load all the assets Mechanisms which use display:none still load the image Mechanisms which replace the image src attribute to lazy-load probably aren’t great for accessibility or SEO
  21. Base64 encode fonts and icons, and SVGs!
  22. Doesn’t need an extra request, which still carries overhead
  23. Up to 40% smaller! Better compression, shared headers, etc.
  24. Most systems don’t cache 404s (or other errors) Some scenarios mean that requests to errors redirect, download subsequent resources, etc. Cost-intensive. Robots.txt, favicons, app icons, msapplication policies, requests to old URLs, security probes.
  25. Most systems don’t cache 404s (or other errors) Some scenarios mean that requests to errors redirect, download subsequent resources, etc. Cost-intensive. Robots.txt, favicons, app icons, msapplication policies, requests to old URLs, security probes.
  26. Your best tool is your brain, and your experience. Use the Chrome waterfall, look for slow request/respond/paint processes. Click on them, and read! It’ll give you tips. Diagnosing bottlenecks
  27. Longest single wait is often connect + receive* Nothing else can happen until this is done. More time processing, or more time delivering? Don’t ignore, and don’t get obsessed! CDNs; later!
  28. HTTP/2 will automatically coalesce connections if the host resolves to the same IP and the TLS certificate is valid on both
  29. Itemised SASS/LESS/JS outputs - only load the bits you need Different expirey and caching methodologies for different assets and types?
  30. VPS, Heart?
  31. Email, FTP, SQL, PHPmyadmin. Start to see behind the curtain.
  32. Gzip RAM allocation Gzip variablles!
  33. PHP versions, addons, etc
  34. Be careful about accidentally consuming CPU/GPU, wasting bandwidth, triggering JS, etc https://www.w3.org/TR/page-visibility/ - page visibility API is generally supported, and lets you check if a tab is active/visible.
  35. Edge caching assets easy; html less so. Uncommon. More complex setups; distributed servers/etc.
  36. Homepage icon prompt Online/offline hybridisation; control local caching, etc Need URL-based nav (which you already need for app indexing) Precursor to sideloaded APKs!
  37. Consider that maybe a separate app isn’t the future ...That Google want to push for seamless search>content transition (albeit with monetisation) The app store disrupts this; and Google Now scraping apps isn’t a good enough fix. AMP and PWA pages are increasingly gaining access to mobile hardware; seamless transition into apps, and even into VR.