SlideShare a Scribd company logo
1 of 78
Accelerated Mobile...
Beyond AMP!
1
1
#SMX @jonoalderson
#SMX @JonoAlderson2
2
#SMX @jonoalderson
#SMX @JonoAlderson
4
There’s a lot of much-needed
focus on (mobile) performance
at the moment
4
#SMX @jonoalderson
5
5
#SMX @jonoalderson
On AMP, briefly...
6
6
#SMX @jonoalderson
7
Just the tip of the iceberg...
7
#SMX @jonoalderson
8
Risky? Dangerous? Subversive, even?
8
#SMX @jonoalderson
9
9
#SMX @jonoalderson
Are you actively
managing your
AMP cache?
https://developers.google.com/amp/cache/update-ping
10
10
#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.
14
14
#SMX @jonoalderson
So, what’s the broader performance
toolkit look like?
15
15
#SMX @jonoalderson
Infrastructure & network optimisation
16
16
#SMX @jonoalderson
HTTP2 Implications
17
17
#SMX @jonoalderson
#SMX @jonoalderson
online.marketing/guide/https
SSL Chain Length
19
On certificate length...
19
#SMX @jonoalderson
20
20
#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
2222
22
#SMX @jonoalderson
Connection & data transfer
23
23
#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!
24
24
#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.
26
26
#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.
27
27
#SMX @jonoalderson
For media/images…
Test CSS3 vs images vs sprites vs encoding vs inlining
28
28
#SMX @jonoalderson
base64-image.de
29
29
#SMX @jonoalderson
base64-image.de
30
30
#SMX @jonoalderson
http://bit.ly/srcsetstuff
SRCSET is the only solution for
managing image sizes/resolutions.
31
31
#SMX @jonoalderson
32
Sprite sheets are still a thing!
32
32
#SMX @jonoalderson
https://developers.google.com/speed/webp/
WebP
33
#SMX @jonoalderson
Error management for
common request headaches
Manage your robots, favicons, and other irritations.
3434
34
#SMX @jonoalderson
3535
35
#SMX @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)
Measurement
36
36
#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.
37
37
#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.
40
40
#SMX @jonoalderson
@jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress)
webpagetest.org
#SMX @jonoalderson
Other Tools
42
42
#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
47
47
#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).
48
48
#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
49
49
#SMX @jonoalderson
Server Ecosystems
50
50
#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
51
51
#SMX @jonoalderson
SCARY?
5252
52
#SMX @jonoalderson
@jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress)
53
53
#SMX @jonoalderson
@jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress)
cPanel
54
54
#SMX @jonoalderson
@jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress)
55
55
#SMX @jonoalderson
@jonoaldersonTurbo-charging your WordPress website (bit.ly/turbo-charge-wordpress)
56
56
#SMX @jonoalderson
5757
57
#SMX @jonoalderson
Front-end optimisation
58
58
#SMX @jonoalderson
Caching Policies
● Set your expiry times (appropriately!)
● Use 304 “Not Modified” header
● Use ETags
59
59
#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
60
60
#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.
61
61
#SMX @jonoalderson
62
62
#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
69
69
#SMX @jonoalderson
https://developers.google.com/web/progressive-web-apps/
#SMX @jonoalderson
#SMX @jonoalderson
Key takeaways...
72
72
#SMX @jonoalderson
You have a million
opportunities to improve
performance
...and every byte matters to users.
7373
73
#SMX @jonoalderson
Ignore all of the scores
the tools give you, and
just make things faster.
7474
74
#SMX @jonoalderson
Don’t neglect your
infrastructure and back-
end opportunities
7575
75
#SMX @jonoalderson
The landscape is changing
Don’t get caught up in today’s hype
7676
76
#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 WIN
78
78
#SMX @jonoalderson

More Related Content

What's hot

What's hot (20)

Page Speed
Page SpeedPage Speed
Page Speed
 
Three site speed optimisation tips to make your website REALLY fast - Brighto...
Three site speed optimisation tips to make your website REALLY fast - Brighto...Three site speed optimisation tips to make your website REALLY fast - Brighto...
Three site speed optimisation tips to make your website REALLY fast - Brighto...
 
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
 
Whats Next in SEO & CRO - 3XE Conference 2018 Dublin
Whats Next in SEO & CRO - 3XE Conference 2018 DublinWhats Next in SEO & CRO - 3XE Conference 2018 Dublin
Whats Next in SEO & CRO - 3XE Conference 2018 Dublin
 
AMP - SMX München 2018
AMP - SMX München 2018AMP - SMX München 2018
AMP - SMX München 2018
 
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick StoxSMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox
SMX Advanced 2018 SEO for Javascript Frameworks by Patrick Stox
 
Structured Data & Schema.org - SMX Milan 2014
Structured Data & Schema.org - SMX Milan 2014Structured Data & Schema.org - SMX Milan 2014
Structured Data & Schema.org - SMX Milan 2014
 
What's in my SEO Toolbox: Linkbuilding Edition - SMX Milan 2014
What's in my SEO Toolbox: Linkbuilding Edition - SMX Milan 2014What's in my SEO Toolbox: Linkbuilding Edition - SMX Milan 2014
What's in my SEO Toolbox: Linkbuilding Edition - SMX Milan 2014
 
Make your website load really really fast - seo campus 2017
Make your website load really really fast  - seo campus 2017Make your website load really really fast  - seo campus 2017
Make your website load really really fast - seo campus 2017
 
Seozone - 5 tips
Seozone  - 5 tips Seozone  - 5 tips
Seozone - 5 tips
 
How fast is fast enough - SMX West 2018
How fast is fast enough - SMX West 2018How fast is fast enough - SMX West 2018
How fast is fast enough - SMX West 2018
 
10 Things Webdesigners tend to do Wrong in SEO - SMX 2014
10 Things Webdesigners tend to do Wrong in SEO  - SMX 201410 Things Webdesigners tend to do Wrong in SEO  - SMX 2014
10 Things Webdesigners tend to do Wrong in SEO - SMX 2014
 
How I learned to stop worrying and love the .htaccess file
How I learned to stop worrying and love the .htaccess fileHow I learned to stop worrying and love the .htaccess file
How I learned to stop worrying and love the .htaccess file
 
JavaScript Tips & Tricks 2018 - SMX East
JavaScript Tips & Tricks 2018 - SMX EastJavaScript Tips & Tricks 2018 - SMX East
JavaScript Tips & Tricks 2018 - SMX East
 
SEO Tools of the Trade - Barcelona Affiliate Conference 2014
SEO Tools of the Trade - Barcelona Affiliate Conference 2014SEO Tools of the Trade - Barcelona Affiliate Conference 2014
SEO Tools of the Trade - Barcelona Affiliate Conference 2014
 
Dynamic Rendering - is this really an SEO silver bullet? SMX WEST
Dynamic Rendering - is this really an SEO silver bullet? SMX WESTDynamic Rendering - is this really an SEO silver bullet? SMX WEST
Dynamic Rendering - is this really an SEO silver bullet? SMX WEST
 
Hardening WordPress - Friends of Search 2014 (WordPress Security)
Hardening WordPress - Friends of Search 2014 (WordPress Security)Hardening WordPress - Friends of Search 2014 (WordPress Security)
Hardening WordPress - Friends of Search 2014 (WordPress Security)
 
SMX Munich 2018 - Current State of JavaScript SEO
SMX Munich 2018 - Current State of JavaScript SEOSMX Munich 2018 - Current State of JavaScript SEO
SMX Munich 2018 - Current State of JavaScript SEO
 
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
 
Pubcon Vegas 2017 You're Going To Screw Up International SEO - Patrick Stox
Pubcon Vegas 2017 You're Going To Screw Up International SEO - Patrick StoxPubcon Vegas 2017 You're Going To Screw Up International SEO - Patrick Stox
Pubcon Vegas 2017 You're Going To Screw Up International SEO - Patrick Stox
 

Viewers also liked

How does your media product represent particular social
How does your media product represent particular socialHow does your media product represent particular social
How does your media product represent particular social
chloe_mullahy
 

Viewers also liked (20)

The experience age has arrived...
The experience age has arrived...The experience age has arrived...
The experience age has arrived...
 
The Search Landscape in 2017
The Search Landscape in 2017The Search Landscape in 2017
The Search Landscape in 2017
 
HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017
 
Humanizing The Serp, One Word at a Time
Humanizing The Serp, One Word at a TimeHumanizing The Serp, One Word at a Time
Humanizing The Serp, One Word at a Time
 
Smart Attribution + Cross Device - #SMXMunich 2017 - www.cubed.ai
Smart Attribution + Cross Device - #SMXMunich 2017 - www.cubed.aiSmart Attribution + Cross Device - #SMXMunich 2017 - www.cubed.ai
Smart Attribution + Cross Device - #SMXMunich 2017 - www.cubed.ai
 
Keyword Strategie: Do's & Don'ts bei der Keyword Recherche - SMX München 2017
Keyword Strategie: Do's & Don'ts bei der Keyword Recherche - SMX München 2017Keyword Strategie: Do's & Don'ts bei der Keyword Recherche - SMX München 2017
Keyword Strategie: Do's & Don'ts bei der Keyword Recherche - SMX München 2017
 
SEO: SERPs im Wandel - SMX Munich 2017
SEO: SERPs im Wandel - SMX Munich 2017SEO: SERPs im Wandel - SMX Munich 2017
SEO: SERPs im Wandel - SMX Munich 2017
 
Relaunch & SEO: Best Practice, Checklists, Stolpersteine
Relaunch & SEO: Best Practice, Checklists, StolpersteineRelaunch & SEO: Best Practice, Checklists, Stolpersteine
Relaunch & SEO: Best Practice, Checklists, Stolpersteine
 
Minerals & Energy Resources
Minerals & Energy ResourcesMinerals & Energy Resources
Minerals & Energy Resources
 
The Future of Mobile - Presented at SMX Munich
The Future of Mobile - Presented at SMX MunichThe Future of Mobile - Presented at SMX Munich
The Future of Mobile - Presented at SMX Munich
 
#SMX Munich - Think BIG act BIG
#SMX Munich - Think BIG act BIG#SMX Munich - Think BIG act BIG
#SMX Munich - Think BIG act BIG
 
Animal parts
Animal partsAnimal parts
Animal parts
 
Next Era of SEO: A Guide to SEO Split-Testing
Next Era of SEO: A Guide to SEO Split-TestingNext Era of SEO: A Guide to SEO Split-Testing
Next Era of SEO: A Guide to SEO Split-Testing
 
SEO: Crawl Budget Optimierung & Onsite SEO
SEO: Crawl Budget Optimierung & Onsite SEOSEO: Crawl Budget Optimierung & Onsite SEO
SEO: Crawl Budget Optimierung & Onsite SEO
 
257759909 seismologi
257759909 seismologi257759909 seismologi
257759909 seismologi
 
Fast Growing Companies: 10 SEO Lessons Learned
Fast Growing Companies: 10 SEO Lessons LearnedFast Growing Companies: 10 SEO Lessons Learned
Fast Growing Companies: 10 SEO Lessons Learned
 
Searching higher up the funnel
Searching higher up the funnelSearching higher up the funnel
Searching higher up the funnel
 
TRANSPORTE NEUMATICO
TRANSPORTE NEUMATICOTRANSPORTE NEUMATICO
TRANSPORTE NEUMATICO
 
How does your media product represent particular social
How does your media product represent particular socialHow does your media product represent particular social
How does your media product represent particular social
 
Q1 evaluation
Q1 evaluation Q1 evaluation
Q1 evaluation
 

Similar to Accelerated Mobile - Beyond AMP

Similar to Accelerated Mobile - Beyond AMP (20)

The Need for Speed! Accelerated mobile, beyond AMP
The Need for Speed! Accelerated mobile, beyond AMPThe Need for Speed! Accelerated mobile, beyond AMP
The Need for Speed! Accelerated mobile, beyond AMP
 
The Inbounder London - Jono Alderson
The Inbounder London - Jono AldersonThe Inbounder London - Jono Alderson
The Inbounder London - Jono Alderson
 
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
 
SMX_DevTools_Monaco_2.pdf
SMX_DevTools_Monaco_2.pdfSMX_DevTools_Monaco_2.pdf
SMX_DevTools_Monaco_2.pdf
 
Preconnect, prefetch, prerender...
Preconnect, prefetch, prerender...Preconnect, prefetch, prerender...
Preconnect, prefetch, prerender...
 
Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018Super speed around the globe - SearchLeeds 2018
Super speed around the globe - SearchLeeds 2018
 
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
SearchLeeds 2018 - Bastian Grimm - Peak Ace - International site speed: Going...
 
Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018Web Performance Madness - brightonSEO 2018
Web Performance Madness - brightonSEO 2018
 
Desenvolvimento Mobile Híbrido
Desenvolvimento Mobile HíbridoDesenvolvimento Mobile Híbrido
Desenvolvimento Mobile Híbrido
 
Optimizing your WordPress website
Optimizing your WordPress websiteOptimizing your WordPress website
Optimizing your WordPress website
 
Single Page Applications – Know The Ecosystem system
Single Page Applications – Know The Ecosystem systemSingle Page Applications – Know The Ecosystem system
Single Page Applications – Know The Ecosystem system
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
 
Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...
Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...
Satisfying the Need for Speed (By Aleh Barysevich of SEO PowerSuite, SMX Lond...
 
Measuring Front-End Performance - What, When and How?
Measuring Front-End Performance - What, When and How?Measuring Front-End Performance - What, When and How?
Measuring Front-End Performance - What, When and How?
 
Intro To Django
Intro To DjangoIntro To Django
Intro To Django
 
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
 
Chrome Dev Summit Summary 2013 part 1 - what’s hot ?
Chrome Dev Summit Summary 2013 part 1 - what’s hot ?Chrome Dev Summit Summary 2013 part 1 - what’s hot ?
Chrome Dev Summit Summary 2013 part 1 - what’s hot ?
 
Mobius keynote
Mobius keynoteMobius keynote
Mobius keynote
 
Navigating the critical rendering path - Jamie Alberico - VirtuaCon
Navigating the critical rendering path -  Jamie Alberico - VirtuaConNavigating the critical rendering path -  Jamie Alberico - VirtuaCon
Navigating the critical rendering path - Jamie Alberico - VirtuaCon
 

More from Jono Alderson

Digital marketing by numbers
Digital marketing by numbersDigital marketing by numbers
Digital marketing by numbers
Jono Alderson
 

More from Jono Alderson (15)

What happens when everybody's website is fixed
What happens when everybody's website is fixed What happens when everybody's website is fixed
What happens when everybody's website is fixed
 
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
 
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
 
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

會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
中 央社
 
SURVEY I created for uni project research
SURVEY I created for uni project researchSURVEY I created for uni project research
SURVEY I created for uni project research
CaitlinCummins3
 
The basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptxThe basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptx
heathfieldcps1
 

Recently uploaded (20)

Operations Management - Book1.p - Dr. Abdulfatah A. Salem
Operations Management - Book1.p  - Dr. Abdulfatah A. SalemOperations Management - Book1.p  - Dr. Abdulfatah A. Salem
Operations Management - Book1.p - Dr. Abdulfatah A. Salem
 
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community PartnershipsSpring gala 2024 photo slideshow - Celebrating School-Community Partnerships
Spring gala 2024 photo slideshow - Celebrating School-Community Partnerships
 
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjj
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjjStl Algorithms in C++ jjjjjjjjjjjjjjjjjj
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjj
 
philosophy and it's principles based on the life
philosophy and it's principles based on the lifephilosophy and it's principles based on the life
philosophy and it's principles based on the life
 
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽會考英聽
 
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
Exploring Gemini AI and Integration with MuleSoft | MuleSoft Mysore Meetup #45
 
MOOD STABLIZERS DRUGS.pptx
MOOD     STABLIZERS           DRUGS.pptxMOOD     STABLIZERS           DRUGS.pptx
MOOD STABLIZERS DRUGS.pptx
 
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
 
Features of Video Calls in the Discuss Module in Odoo 17
Features of Video Calls in the Discuss Module in Odoo 17Features of Video Calls in the Discuss Module in Odoo 17
Features of Video Calls in the Discuss Module in Odoo 17
 
HVAC System | Audit of HVAC System | Audit and regulatory Comploance.pptx
HVAC System | Audit of HVAC System | Audit and regulatory Comploance.pptxHVAC System | Audit of HVAC System | Audit and regulatory Comploance.pptx
HVAC System | Audit of HVAC System | Audit and regulatory Comploance.pptx
 
SURVEY I created for uni project research
SURVEY I created for uni project researchSURVEY I created for uni project research
SURVEY I created for uni project research
 
IPL Online Quiz by Pragya; Question Set.
IPL Online Quiz by Pragya; Question Set.IPL Online Quiz by Pragya; Question Set.
IPL Online Quiz by Pragya; Question Set.
 
Capitol Tech Univ Doctoral Presentation -May 2024
Capitol Tech Univ Doctoral Presentation -May 2024Capitol Tech Univ Doctoral Presentation -May 2024
Capitol Tech Univ Doctoral Presentation -May 2024
 
The Ball Poem- John Berryman_20240518_001617_0000.pptx
The Ball Poem- John Berryman_20240518_001617_0000.pptxThe Ball Poem- John Berryman_20240518_001617_0000.pptx
The Ball Poem- John Berryman_20240518_001617_0000.pptx
 
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...
 
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
 
The basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptxThe basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptx
 
An Overview of the Odoo 17 Knowledge App
An Overview of the Odoo 17 Knowledge AppAn Overview of the Odoo 17 Knowledge App
An Overview of the Odoo 17 Knowledge App
 
Mattingly "AI and Prompt Design: LLMs with Text Classification and Open Source"
Mattingly "AI and Prompt Design: LLMs with Text Classification and Open Source"Mattingly "AI and Prompt Design: LLMs with Text Classification and Open Source"
Mattingly "AI and Prompt Design: LLMs with Text Classification and Open Source"
 
“O BEIJO” EM ARTE .
“O BEIJO” EM ARTE                       .“O BEIJO” EM ARTE                       .
“O BEIJO” EM ARTE .
 

Accelerated Mobile - Beyond AMP

Editor's Notes

  1. No Fili! Lots of little tips; I’ve included links, but you can Google everything in here. I know you’re not web developers… but this is going to get techy.
  2. 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!
  3. 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.
  4. 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).
  5. Why is AMP not a magic bullet? Ad networks, 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?
  6. Have to ping to manage versions
  7. But no guarantees; flakey!
  8. 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
  9. 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.
  10. 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.
  11. 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
  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. 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.
  14. 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?
  15. Parallelised/individual resources & require.js, etc Enables keep-alive by default No more hostname sharding (or, maybe - to support some browsers [esp older mobile]; serve from same IP [cached hostnames]) Itemised SASS/LESS/JS outputs - only load the bits you need
  16. A lot of the page speed tools misreport on this. Combine your javascript! Distribute your resources!
  17. Still bottlenecks based on the number of assets you’re loading, the size of those, where they’re hosted, etc.
  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. Base64 encode fonts and icons, and SVGs!
  20. Doesn’t need an extra request, which still carries overhead
  21. 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
  22. Up to 40% smaller! Better compression, shared headers, etc.
  23. 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.
  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. 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
  26. 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!
  27. VPS, Heart?
  28. Email, FTP, SQL, PHPmyadmin. Start to see behind the curtain.
  29. Gzip RAM allocation Gzip variablles!
  30. PHP versions, addons, etc
  31. 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.
  32. Edge caching assets easy; html less so. Uncommon. More complex setups; distributed servers/etc.
  33. Homepage icon Online/offline hybridisation; control local caching, etc Need URL-based nav (which you already need for app indexing) Precursor to sideloaded APKs
  34. 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.