SlideShare a Scribd company logo
1 of 36
Download to read offline
Client-Side Performance Sucks Craig Walker, Chief Technology Officer And what you can do to make it suck less. www.xero.com
Your typical internal network: ,[object Object],[object Object],[object Object]
There's a reason why the words “world” and “wide” are in the acronym Control and knowledge are limited to your own environment. Even how the packets fly around the internet is out of your control. www.xero.com
The HTTP Request Server Browser Receive Last Byte Send  Last Byte Send Data Establish  Connection Initial Connection Open Socket Initial HTTP Request First Byte Receive First Byte Send  First Byte Content Download ISP Get IP DNS Lookup
5% Server side performance often not the problem with response time 95% Most of the response time is taken up here
25% 75%
Empty Cache Primed Cache
Focus on the front-end ,[object Object],[object Object],[object Object],[object Object]
Performance === Usability www.xero.com
The giants who’s shoulders I’m standing on ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Zip It! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Fly’s down Zipped
Reduce HTTP Requests ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Sprites ,[object Object],[object Object]
The designers want what? 11 Images 11 HTTP Requests 3.3 KB total size
Obey your thirst ® 1 Image 1 HTTP Request 1.6 KB total size
And the CSS? <div class=&quot;buttons&quot;> <span class=&quot;large green button&quot;> <button type=&quot;button&quot;> <span class=&quot;checkbox icon&quot;> Approve </span> </button> </span> <span class=&quot;large blue button&quot;> <button type=&quot;button&quot;> <span> Save </span> </button> </span> <span class=&quot;large red button&quot;> <button type=&quot;button&quot;> <span class=&quot;delete icon&quot;> Delete </span> </button> </span> <span class=&quot;medium gray button&quot;> <button type=&quot;button&quot;> <span class=&quot;delete icon&quot;> Cancel </span> </button> </span> </div> ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],The HTML The CSS
Maximise Parallel Downloads ,[object Object],[object Object],[object Object],Browser Parallel Downloads Firefox 2 2 Firefox 3 6 Internet Explorer 7 2 Internet Explorer 8 6 Safari 3.1 4 Safari 4.0 4
Maximise Parallel Downloads ,[object Object],[object Object],Increased parallelism  (using 2 hostnames)
Use a CDN ,[object Object],[object Object],[object Object],[object Object],[object Object]
How it works: Images JS CSS <xsl:value-of select=&quot;Page:RegisterCSS('/common/style/xero.css','screen')&quot;/> <xsl:value-of select=&quot;Page:RegisterJavascript('/common/scripts/xero.js'&quot;/>  <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;  href=&quot;https://nzs1.xero.com/common/style/xero.css&quot; /> <script type=&quot;text/javascript&quot;  src=&quot;https://nzs2.xero.com/common/scripts/xero.js&quot;></script> GET Request Response with HTML document Get  location  from IP
Maximise the cache ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS external and on top ,[object Object],[object Object],[object Object],[object Object],[object Object]
JavaScript external and on the bottom ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Notice the  parallel  download here … …  until we hit the JavaScript files where they come down sequentially, blocking any other downloads
Minify all static content ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Optimise images ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Preloading … ,[object Object],[object Object],[object Object],[object Object],[object Object]
Reduce cookie weight ,[object Object],[object Object],[object Object]
Keep it clean ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Things to take away ,[object Object],[object Object],[object Object],[object Object]
YSlow ,[object Object],[object Object],[object Object]
Fiddler ,[object Object],[object Object],[object Object]
AOL PageTest ,[object Object],[object Object],[object Object],[object Object]
Any questions? www.xero.com
www.xero.com 0800 GET XERO

More Related Content

What's hot

Automated Testing with Google Chrome - WebDriver- ChromeDriver
Automated Testing with Google Chrome - WebDriver- ChromeDriverAutomated Testing with Google Chrome - WebDriver- ChromeDriver
Automated Testing with Google Chrome - WebDriver- ChromeDriverManoj Kumar Kumar
 
Do things faster and better with WebAssembly - Sendil Kumar Nellaiyapen - Cod...
Do things faster and better with WebAssembly - Sendil Kumar Nellaiyapen - Cod...Do things faster and better with WebAssembly - Sendil Kumar Nellaiyapen - Cod...
Do things faster and better with WebAssembly - Sendil Kumar Nellaiyapen - Cod...Codemotion
 
How to make your site 5 times faster in 10 minutes
How to make your site 5 times faster in 10 minutesHow to make your site 5 times faster in 10 minutes
How to make your site 5 times faster in 10 minutesGal Baras
 
Front-End Web Performance Optimization by BucketSoft
Front-End Web Performance Optimization by BucketSoftFront-End Web Performance Optimization by BucketSoft
Front-End Web Performance Optimization by BucketSoftSteve Wortham
 
How To Combine Back-End 
 & Front-End Testing with BlazeMeter & Sauce Labs
How To Combine Back-End 
 & Front-End Testing with BlazeMeter & Sauce LabsHow To Combine Back-End 
 & Front-End Testing with BlazeMeter & Sauce Labs
How To Combine Back-End 
 & Front-End Testing with BlazeMeter & Sauce LabsSauce Labs
 
Magento performancenbs
Magento performancenbsMagento performancenbs
Magento performancenbsvarien
 
WordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & TuningWordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & TuningTimothy Wood
 
Wordcamp2009
Wordcamp2009Wordcamp2009
Wordcamp2009joetek
 
UXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UXUXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UXStoian Dipchikov
 
Web Performance, Scalability, and Testing Techniques - Boston PHP Meetup
Web Performance, Scalability, and Testing Techniques - Boston PHP MeetupWeb Performance, Scalability, and Testing Techniques - Boston PHP Meetup
Web Performance, Scalability, and Testing Techniques - Boston PHP MeetupJonathan Klein
 
High Performance Web/Mobile Pages - Automation
High Performance Web/Mobile Pages - AutomationHigh Performance Web/Mobile Pages - Automation
High Performance Web/Mobile Pages - Automationsoheil416
 
DeepCrawl Webinar: Performing SEO on the Edge
DeepCrawl Webinar: Performing SEO on the EdgeDeepCrawl Webinar: Performing SEO on the Edge
DeepCrawl Webinar: Performing SEO on the EdgeDan Taylor
 
How to Speed Up Your Joomla! Site
How to Speed Up Your Joomla! SiteHow to Speed Up Your Joomla! Site
How to Speed Up Your Joomla! SiteDaniel Kanchev
 
SQL Server - CLR integration
SQL Server - CLR integrationSQL Server - CLR integration
SQL Server - CLR integrationPeter Gfader
 
NextJS - Online Summit for Frontend Developers September 2020
NextJS - Online Summit for Frontend Developers September 2020NextJS - Online Summit for Frontend Developers September 2020
NextJS - Online Summit for Frontend Developers September 2020Milad Heydari
 
NextJS, A JavaScript Framework for building next generation SPA
NextJS, A JavaScript Framework for building next generation SPA  NextJS, A JavaScript Framework for building next generation SPA
NextJS, A JavaScript Framework for building next generation SPA Pramendra Gupta
 
BDD in Java using Cucumber
BDD in Java using CucumberBDD in Java using Cucumber
BDD in Java using Cucumberslavkurochkin
 
Web Cache Deception Attack
Web Cache Deception AttackWeb Cache Deception Attack
Web Cache Deception AttackOmer Gil
 

What's hot (20)

Automated Testing with Google Chrome - WebDriver- ChromeDriver
Automated Testing with Google Chrome - WebDriver- ChromeDriverAutomated Testing with Google Chrome - WebDriver- ChromeDriver
Automated Testing with Google Chrome - WebDriver- ChromeDriver
 
Do things faster and better with WebAssembly - Sendil Kumar Nellaiyapen - Cod...
Do things faster and better with WebAssembly - Sendil Kumar Nellaiyapen - Cod...Do things faster and better with WebAssembly - Sendil Kumar Nellaiyapen - Cod...
Do things faster and better with WebAssembly - Sendil Kumar Nellaiyapen - Cod...
 
How to make your site 5 times faster in 10 minutes
How to make your site 5 times faster in 10 minutesHow to make your site 5 times faster in 10 minutes
How to make your site 5 times faster in 10 minutes
 
Front-End Web Performance Optimization by BucketSoft
Front-End Web Performance Optimization by BucketSoftFront-End Web Performance Optimization by BucketSoft
Front-End Web Performance Optimization by BucketSoft
 
How To Combine Back-End 
 & Front-End Testing with BlazeMeter & Sauce Labs
How To Combine Back-End 
 & Front-End Testing with BlazeMeter & Sauce LabsHow To Combine Back-End 
 & Front-End Testing with BlazeMeter & Sauce Labs
How To Combine Back-End 
 & Front-End Testing with BlazeMeter & Sauce Labs
 
Magento performancenbs
Magento performancenbsMagento performancenbs
Magento performancenbs
 
WordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & TuningWordCamp RVA 2011 - Performance & Tuning
WordCamp RVA 2011 - Performance & Tuning
 
Wordcamp2009
Wordcamp2009Wordcamp2009
Wordcamp2009
 
UXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UXUXify 2015 - Front-end Developers' Checklist for Better UX
UXify 2015 - Front-end Developers' Checklist for Better UX
 
Universal React apps in Next.js
Universal React apps in Next.jsUniversal React apps in Next.js
Universal React apps in Next.js
 
Metarefresh
MetarefreshMetarefresh
Metarefresh
 
Web Performance, Scalability, and Testing Techniques - Boston PHP Meetup
Web Performance, Scalability, and Testing Techniques - Boston PHP MeetupWeb Performance, Scalability, and Testing Techniques - Boston PHP Meetup
Web Performance, Scalability, and Testing Techniques - Boston PHP Meetup
 
High Performance Web/Mobile Pages - Automation
High Performance Web/Mobile Pages - AutomationHigh Performance Web/Mobile Pages - Automation
High Performance Web/Mobile Pages - Automation
 
DeepCrawl Webinar: Performing SEO on the Edge
DeepCrawl Webinar: Performing SEO on the EdgeDeepCrawl Webinar: Performing SEO on the Edge
DeepCrawl Webinar: Performing SEO on the Edge
 
How to Speed Up Your Joomla! Site
How to Speed Up Your Joomla! SiteHow to Speed Up Your Joomla! Site
How to Speed Up Your Joomla! Site
 
SQL Server - CLR integration
SQL Server - CLR integrationSQL Server - CLR integration
SQL Server - CLR integration
 
NextJS - Online Summit for Frontend Developers September 2020
NextJS - Online Summit for Frontend Developers September 2020NextJS - Online Summit for Frontend Developers September 2020
NextJS - Online Summit for Frontend Developers September 2020
 
NextJS, A JavaScript Framework for building next generation SPA
NextJS, A JavaScript Framework for building next generation SPA  NextJS, A JavaScript Framework for building next generation SPA
NextJS, A JavaScript Framework for building next generation SPA
 
BDD in Java using Cucumber
BDD in Java using CucumberBDD in Java using Cucumber
BDD in Java using Cucumber
 
Web Cache Deception Attack
Web Cache Deception AttackWeb Cache Deception Attack
Web Cache Deception Attack
 

Viewers also liked

Client-side Performance Testing
Client-side Performance TestingClient-side Performance Testing
Client-side Performance TestingThoughtworks
 
Client-Side Performance Testing
Client-Side Performance TestingClient-Side Performance Testing
Client-Side Performance TestingAnand Bagmar
 
Introduction to performance testing
Introduction to performance testingIntroduction to performance testing
Introduction to performance testingRichard Bishop
 
Client-Side Performance Testing
Client-Side Performance TestingClient-Side Performance Testing
Client-Side Performance TestingAnand Bagmar
 
Performance Testing
Performance TestingPerformance Testing
Performance Testingsharmaparish
 
Introduction to performance testing
Introduction to performance testingIntroduction to performance testing
Introduction to performance testingTharinda Liyanage
 

Viewers also liked (6)

Client-side Performance Testing
Client-side Performance TestingClient-side Performance Testing
Client-side Performance Testing
 
Client-Side Performance Testing
Client-Side Performance TestingClient-Side Performance Testing
Client-Side Performance Testing
 
Introduction to performance testing
Introduction to performance testingIntroduction to performance testing
Introduction to performance testing
 
Client-Side Performance Testing
Client-Side Performance TestingClient-Side Performance Testing
Client-Side Performance Testing
 
Performance Testing
Performance TestingPerformance Testing
Performance Testing
 
Introduction to performance testing
Introduction to performance testingIntroduction to performance testing
Introduction to performance testing
 

Similar to Client Side Performance @ Xero

Building Faster Websites
Building Faster WebsitesBuilding Faster Websites
Building Faster WebsitesCraig Walker
 
DrupalCampLA 2011 - Drupal frontend-optimizing
DrupalCampLA 2011 - Drupal frontend-optimizingDrupalCampLA 2011 - Drupal frontend-optimizing
DrupalCampLA 2011 - Drupal frontend-optimizingAshok Modi
 
Going on an HTTP Diet: Front-End Web Performance
Going on an HTTP Diet: Front-End Web PerformanceGoing on an HTTP Diet: Front-End Web Performance
Going on an HTTP Diet: Front-End Web PerformanceAdam Norwood
 
Web Speed And Scalability
Web Speed And ScalabilityWeb Speed And Scalability
Web Speed And ScalabilityJason Ragsdale
 
Oracle UCM: Web Site Performance Tuning
Oracle UCM: Web Site Performance TuningOracle UCM: Web Site Performance Tuning
Oracle UCM: Web Site Performance TuningBrian Huff
 
Web performance - Analysing Heart.co.uk
Web performance - Analysing Heart.co.ukWeb performance - Analysing Heart.co.uk
Web performance - Analysing Heart.co.ukgareth53
 
High Performance Web Pages - 20 new best practices
High Performance Web Pages - 20 new best practicesHigh Performance Web Pages - 20 new best practices
High Performance Web Pages - 20 new best practicesStoyan Stefanov
 
Csdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer YahooCsdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer Yahooguestb1b95b
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax ApplicationsSiarhei Barysiuk
 
A little journey into website optimization
A little journey into website optimizationA little journey into website optimization
A little journey into website optimizationStelian Firez
 
Joomla! Performance on Steroids
Joomla! Performance on SteroidsJoomla! Performance on Steroids
Joomla! Performance on SteroidsSiteGround.com
 
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
AD113  Speed Up Your Applications w/ Nginx and PageSpeedAD113  Speed Up Your Applications w/ Nginx and PageSpeed
AD113 Speed Up Your Applications w/ Nginx and PageSpeededm00se
 
Web Client Performance
Web Client PerformanceWeb Client Performance
Web Client PerformanceHerea Adrian
 
Ajax to the Moon
Ajax to the MoonAjax to the Moon
Ajax to the Moondavejohnson
 
Frontend performance
Frontend performanceFrontend performance
Frontend performancesacred 8
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Timothy Fisher
 

Similar to Client Side Performance @ Xero (20)

Building Faster Websites
Building Faster WebsitesBuilding Faster Websites
Building Faster Websites
 
DrupalCampLA 2011 - Drupal frontend-optimizing
DrupalCampLA 2011 - Drupal frontend-optimizingDrupalCampLA 2011 - Drupal frontend-optimizing
DrupalCampLA 2011 - Drupal frontend-optimizing
 
Going on an HTTP Diet: Front-End Web Performance
Going on an HTTP Diet: Front-End Web PerformanceGoing on an HTTP Diet: Front-End Web Performance
Going on an HTTP Diet: Front-End Web Performance
 
Web Speed And Scalability
Web Speed And ScalabilityWeb Speed And Scalability
Web Speed And Scalability
 
Oracle UCM: Web Site Performance Tuning
Oracle UCM: Web Site Performance TuningOracle UCM: Web Site Performance Tuning
Oracle UCM: Web Site Performance Tuning
 
Web performance - Analysing Heart.co.uk
Web performance - Analysing Heart.co.ukWeb performance - Analysing Heart.co.uk
Web performance - Analysing Heart.co.uk
 
High Performance Web Pages - 20 new best practices
High Performance Web Pages - 20 new best practicesHigh Performance Web Pages - 20 new best practices
High Performance Web Pages - 20 new best practices
 
Performance engineering
Performance engineeringPerformance engineering
Performance engineering
 
performance.ppt
performance.pptperformance.ppt
performance.ppt
 
Csdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer YahooCsdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer Yahoo
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
 
Speed!
Speed!Speed!
Speed!
 
A little journey into website optimization
A little journey into website optimizationA little journey into website optimization
A little journey into website optimization
 
Joomla! Performance on Steroids
Joomla! Performance on SteroidsJoomla! Performance on Steroids
Joomla! Performance on Steroids
 
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
AD113  Speed Up Your Applications w/ Nginx and PageSpeedAD113  Speed Up Your Applications w/ Nginx and PageSpeed
AD113 Speed Up Your Applications w/ Nginx and PageSpeed
 
Web Client Performance
Web Client PerformanceWeb Client Performance
Web Client Performance
 
Ajax to the Moon
Ajax to the MoonAjax to the Moon
Ajax to the Moon
 
Frontend performance
Frontend performanceFrontend performance
Frontend performance
 
High-Speed HTML5
High-Speed HTML5High-Speed HTML5
High-Speed HTML5
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
 

Recently uploaded

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 

Recently uploaded (20)

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 

Client Side Performance @ Xero

  • 1. Client-Side Performance Sucks Craig Walker, Chief Technology Officer And what you can do to make it suck less. www.xero.com
  • 2.
  • 3. There's a reason why the words “world” and “wide” are in the acronym Control and knowledge are limited to your own environment. Even how the packets fly around the internet is out of your control. www.xero.com
  • 4. The HTTP Request Server Browser Receive Last Byte Send Last Byte Send Data Establish Connection Initial Connection Open Socket Initial HTTP Request First Byte Receive First Byte Send First Byte Content Download ISP Get IP DNS Lookup
  • 5. 5% Server side performance often not the problem with response time 95% Most of the response time is taken up here
  • 8.
  • 10.
  • 11.
  • 13.
  • 14.
  • 15. The designers want what? 11 Images 11 HTTP Requests 3.3 KB total size
  • 16. Obey your thirst ® 1 Image 1 HTTP Request 1.6 KB total size
  • 17.
  • 18.
  • 19.
  • 20.
  • 21. How it works: Images JS CSS <xsl:value-of select=&quot;Page:RegisterCSS('/common/style/xero.css','screen')&quot;/> <xsl:value-of select=&quot;Page:RegisterJavascript('/common/scripts/xero.js'&quot;/> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; href=&quot;https://nzs1.xero.com/common/style/xero.css&quot; /> <script type=&quot;text/javascript&quot; src=&quot;https://nzs2.xero.com/common/scripts/xero.js&quot;></script> GET Request Response with HTML document Get location from IP
  • 22.
  • 23.
  • 24.
  • 25. Notice the parallel download here … … until we hit the JavaScript files where they come down sequentially, blocking any other downloads
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.