SlideShare a Scribd company logo
1 of 99
Download to read offline
Casting a Wider Net
Hi
How Does a Browser Work?
The Densest
Interview Question ever
DNS
Domain Name System
ISP
{a-m}.root-servers.net
Top Level Domain
ns1.nameserver.com
IP Address and Port!
HTTP Request
GET / HTTP/1.1
Host: www.google.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac
OS X 10.10; rv:40.0) Gecko/20100101 Firefox/
40.0
Headers
Headers
Telnet. Oooo
TCP
Transmission
Control Protocol
Synchronize/Acknowledge
Latency?
Grace Hopper
The Response - you know this part
14KB
HTML
Parse
DOM Tree
Fetch External Resources
CSS files/style tags/style attributes
CSSOM
CASCADING
Weight, then Specificity,
then Order
!important
IDs, classes, tags oh my
What’s next in line?
CSS BLOCKS
Rendering
Render page
Position (box model)
Position (floats, absolutes, relatives)
Layer
Render
Make small changes for faster renders
JavaScript
Parse + Execution Time?
Compilers (overview)
Tokeniser
Parser
Translator
010100
100011
000111
Interpreter
010100
100011
000111
Sloooowwwww
JIT Compiler
Very smart people made JS a lot faster
Very smart people made JS a lot faster
Very smart people made JS a lot faster
We done yet?
Images
Fonts
How do I make my stuff faster?
HTTP 1.1
Asset Pipeline
project/
|_ js/
|_ lib/
|_ jquery.js
|_ posts.js
|_ users.js
|_ admin.js
=>
project/
|_ build/
_ js/
|_ all.js
JUST ONE REQUEST
Concatenate
Minify
=>
MAKES FILE SMALLER
gzip
Example - jQuery
79 Files to Start!
Example - jQuery
CONCAT! =>
One File - 276.79KB
MINIFY! =>
One File - 93.66KB
GZIP!
One File - 32.55KB
=>
Scripts Block Parsing!
Head vs. Bottom Block
Example
Use async or defer
attributes
async runs only when fully available
and not blocking
defer runs only when the DOM
is completely built
Async load Fonts
async load everything
not critical
https://www.filamentgroup.com/lab/weight-wait.html
Server-Side Rendering
Special Tangent
Progressive Enhancement
Single Point of Failure
Why do we care that it’s fast anyway?
TOP SITES KNOW:
Performance is critical
page load +500ms = 3% drop in traffic

page load +1000ms = 6% drop
page load +100ms = 1% loss in sales
page load +500ms = 25% fewer searches
page load +400ms = 5–9% drop in traffic
http://www.guypo.com/business/17-statistics-to-sell-web-performance-optimization/
“Online shoppers expected pages
to load in 2 seconds or fewer —
and at 3 seconds, a large share
abandon the site.”
“For Impatient Web Users, an Eye Blink Is Just Too Long to Wait,” New York Times, February 29, 2012

http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-
sites.html?pagewanted=all&_r=0
Mobile traffic is
increasing
Mobile Networks aren’t always speedy
“Only 20% of N. American customers have LTE-
enabled handsets. Globally, LTE penetration rate
is ~5%”
“Bursting our Bubble: Mobile Performance Outside the First World” Performance Calendar, December 3, 2014

http://calendar.perfplanet.com/2014/bursting-our-bubble-mobile-performance-outside-the-first-world/
https://twitter.com/BenedictEvans/status/513017790920290304
Tangential Responsibility Rant
Your Income Over the Next Few Years
Median Income for a
Seattle-based software
developer: ~$92,000
Median Income for a
Seattle-based household
(2011): ~$52,000
You are likely not your market
The entire world is not San Francisco and
Seattle
There are Over 8.7 Billion Internet-
Connected Devices Worldwide
Worldwide Mobile Browser Usage
Asian Mobile Browser Usage
African Mobile Browser Usage
South American Mobile Browser Usage
@jefflembeck

More Related Content

What's hot

That's crazy! how to build single page web apps
That's crazy! how to build single page web appsThat's crazy! how to build single page web apps
That's crazy! how to build single page web apps
Chris Love
 
Angular – Say Goodbye to Javascript Soup
Angular – Say Goodbye to Javascript SoupAngular – Say Goodbye to Javascript Soup
Angular – Say Goodbye to Javascript Soup
Graeme Foster
 
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Katie Sylor-Miller
 
JS Meetup Webapp/Software communication
JS Meetup Webapp/Software communicationJS Meetup Webapp/Software communication
JS Meetup Webapp/Software communication
narcvs
 

What's hot (18)

Your Website Speed Matters
Your Website Speed MattersYour Website Speed Matters
Your Website Speed Matters
 
How I learned to stop worrying and love UX metrics
How I learned to stop worrying and love UX metricsHow I learned to stop worrying and love UX metrics
How I learned to stop worrying and love UX metrics
 
Html5 inputs
Html5 inputsHtml5 inputs
Html5 inputs
 
That's crazy! how to build single page web apps
That's crazy! how to build single page web appsThat's crazy! how to build single page web apps
That's crazy! how to build single page web apps
 
5 single page application principles developers need to know
5 single page application principles developers need to know5 single page application principles developers need to know
5 single page application principles developers need to know
 
An extended explanation of caching
An extended explanation of cachingAn extended explanation of caching
An extended explanation of caching
 
Performance Optimization for Mobile Web | Fresh Tilled Soil
Performance Optimization for Mobile Web | Fresh Tilled SoilPerformance Optimization for Mobile Web | Fresh Tilled Soil
Performance Optimization for Mobile Web | Fresh Tilled Soil
 
Angular – Say Goodbye to Javascript Soup
Angular – Say Goodbye to Javascript SoupAngular – Say Goodbye to Javascript Soup
Angular – Say Goodbye to Javascript Soup
 
Flash Xml Engine - Daniel Kawa - 2009 06 15
Flash Xml Engine - Daniel Kawa - 2009 06 15 Flash Xml Engine - Daniel Kawa - 2009 06 15
Flash Xml Engine - Daniel Kawa - 2009 06 15
 
How We Localize & Mobilize WP Sites - Pubcon 2013
How We Localize & Mobilize WP Sites - Pubcon 2013How We Localize & Mobilize WP Sites - Pubcon 2013
How We Localize & Mobilize WP Sites - Pubcon 2013
 
WPO Israel Meetup - Mobile Web Performance slides by Steve Souders
WPO Israel Meetup - Mobile Web Performance slides by Steve SoudersWPO Israel Meetup - Mobile Web Performance slides by Steve Souders
WPO Israel Meetup - Mobile Web Performance slides by Steve Souders
 
Progressive Web APP ( PWA )
Progressive Web APP ( PWA ) Progressive Web APP ( PWA )
Progressive Web APP ( PWA )
 
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
 
JS Meetup Webapp/Software communication
JS Meetup Webapp/Software communicationJS Meetup Webapp/Software communication
JS Meetup Webapp/Software communication
 
Usersnap and the javascript magic behind the scenes - ViennaJS
Usersnap and the javascript magic behind the scenes - ViennaJSUsersnap and the javascript magic behind the scenes - ViennaJS
Usersnap and the javascript magic behind the scenes - ViennaJS
 
PC Monitoring Software
PC Monitoring SoftwarePC Monitoring Software
PC Monitoring Software
 
2021 Chrome Dev Summit: Web Performance 101
2021 Chrome Dev Summit: Web Performance 1012021 Chrome Dev Summit: Web Performance 101
2021 Chrome Dev Summit: Web Performance 101
 
Web Performance 101
Web Performance 101Web Performance 101
Web Performance 101
 

Viewers also liked

Epiintestinalinfections 120507121831-phpapp01 (1)
Epiintestinalinfections 120507121831-phpapp01 (1)Epiintestinalinfections 120507121831-phpapp01 (1)
Epiintestinalinfections 120507121831-phpapp01 (1)
Rajab Khamis
 

Viewers also liked (14)

Is it Worth Paying for Computer Tech Support
Is it Worth Paying for Computer Tech SupportIs it Worth Paying for Computer Tech Support
Is it Worth Paying for Computer Tech Support
 
Computer Problems That Requires Professional Help
Computer Problems That Requires Professional HelpComputer Problems That Requires Professional Help
Computer Problems That Requires Professional Help
 
Epiintestinalinfections 120507121831-phpapp01 (1)
Epiintestinalinfections 120507121831-phpapp01 (1)Epiintestinalinfections 120507121831-phpapp01 (1)
Epiintestinalinfections 120507121831-phpapp01 (1)
 
Raspberry Pi Arcade
Raspberry Pi ArcadeRaspberry Pi Arcade
Raspberry Pi Arcade
 
The Design of Development - CascadiaFest - 2015
The Design of Development - CascadiaFest - 2015The Design of Development - CascadiaFest - 2015
The Design of Development - CascadiaFest - 2015
 
How Technical Support Industry Has Evolve Through the Years
How Technical Support Industry Has Evolve Through the YearsHow Technical Support Industry Has Evolve Through the Years
How Technical Support Industry Has Evolve Through the Years
 
Oriflame marzo 2014
Oriflame marzo 2014Oriflame marzo 2014
Oriflame marzo 2014
 
Oriflame junio.2014
Oriflame junio.2014Oriflame junio.2014
Oriflame junio.2014
 
Els escampats Xarxes socials i adolescència, complement o dependència?
Els escampats Xarxes socials i adolescència, complement o dependència?Els escampats Xarxes socials i adolescència, complement o dependència?
Els escampats Xarxes socials i adolescència, complement o dependència?
 
Horizon Fuel Cell Technologies Corporate Presentation
Horizon Fuel Cell Technologies Corporate PresentationHorizon Fuel Cell Technologies Corporate Presentation
Horizon Fuel Cell Technologies Corporate Presentation
 
Moneyball for performance metrics
Moneyball for performance metricsMoneyball for performance metrics
Moneyball for performance metrics
 
11 _
11  _11  _
11 _
 
Overclocking | Going Down the Rabbit Hole
Overclocking | Going Down the Rabbit HoleOverclocking | Going Down the Rabbit Hole
Overclocking | Going Down the Rabbit Hole
 
HWBOT X St Benoit - OC & PC Build Workshops
HWBOT X St Benoit - OC & PC Build WorkshopsHWBOT X St Benoit - OC & PC Build Workshops
HWBOT X St Benoit - OC & PC Build Workshops
 

Similar to Cast a wider net

Tuenti teams - Php Conference
Tuenti teams - Php ConferenceTuenti teams - Php Conference
Tuenti teams - Php Conference
Guille -bisho-
 
Tuenti Tech Teams. Frontend, Backend, Systems and more, working together
Tuenti Tech Teams. Frontend, Backend, Systems and more, working togetherTuenti Tech Teams. Frontend, Backend, Systems and more, working together
Tuenti Tech Teams. Frontend, Backend, Systems and more, working together
Tuenti
 
The Yin and Yang of Software
The Yin and Yang of SoftwareThe Yin and Yang of Software
The Yin and Yang of Software
elliando dias
 
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Katie Sylor-Miller
 

Similar to Cast a wider net (20)

Speed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceSpeed is Essential for a Great Web Experience
Speed is Essential for a Great Web Experience
 
Modern Web Applications
Modern Web ApplicationsModern Web Applications
Modern Web Applications
 
eCommerce performance, what is it costing you and what can you do about it?
eCommerce performance, what is it costing you and what can you do about it?eCommerce performance, what is it costing you and what can you do about it?
eCommerce performance, what is it costing you and what can you do about it?
 
Tuenti teams - Php Conference
Tuenti teams - Php ConferenceTuenti teams - Php Conference
Tuenti teams - Php Conference
 
Scaling wix.com to 100 million users
Scaling wix.com to 100 million users Scaling wix.com to 100 million users
Scaling wix.com to 100 million users
 
Tuenti Tech Teams. Frontend, Backend, Systems and more, working together
Tuenti Tech Teams. Frontend, Backend, Systems and more, working togetherTuenti Tech Teams. Frontend, Backend, Systems and more, working together
Tuenti Tech Teams. Frontend, Backend, Systems and more, working together
 
MeasureWorks - Why people hate to wait for your website to load (and how to f...
MeasureWorks - Why people hate to wait for your website to load (and how to f...MeasureWorks - Why people hate to wait for your website to load (and how to f...
MeasureWorks - Why people hate to wait for your website to load (and how to f...
 
The Yin and Yang of Software
The Yin and Yang of SoftwareThe Yin and Yang of Software
The Yin and Yang of Software
 
Profilling client performance
Profilling client performanceProfilling client performance
Profilling client performance
 
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
 
Unravelling Mobile Web Performance
Unravelling Mobile Web PerformanceUnravelling Mobile Web Performance
Unravelling Mobile Web Performance
 
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
 
Will Web 2.0 applications break the cloud?
Will Web 2.0 applications break the cloud?Will Web 2.0 applications break the cloud?
Will Web 2.0 applications break the cloud?
 
Running a Megasite on Microsoft Technologies
Running a Megasite on Microsoft TechnologiesRunning a Megasite on Microsoft Technologies
Running a Megasite on Microsoft Technologies
 
Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...
Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...
Cloud Performance: Guide to Tackling Cloud Latency [Cloud Connect - Chicago 2...
 
Content Delivery Network
Content Delivery NetworkContent Delivery Network
Content Delivery Network
 
IE9: Power, Peformance and Standards
IE9: Power, Peformance and StandardsIE9: Power, Peformance and Standards
IE9: Power, Peformance and Standards
 
Web 2.0 beta
Web 2.0 betaWeb 2.0 beta
Web 2.0 beta
 
Optimizing Speed & Security of Oracle Commerce Sites Using Cloudflare
Optimizing Speed & Security  of Oracle Commerce Sites Using CloudflareOptimizing Speed & Security  of Oracle Commerce Sites Using Cloudflare
Optimizing Speed & Security of Oracle Commerce Sites Using Cloudflare
 
Scaling Slack - The Good, the Unexpected, and the Road Ahead
Scaling Slack - The Good, the Unexpected, and the Road AheadScaling Slack - The Good, the Unexpected, and the Road Ahead
Scaling Slack - The Good, the Unexpected, and the Road Ahead
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Recently uploaded (20)

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Modernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using BallerinaModernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using Ballerina
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Quantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation ComputingQuantum Leap in Next-Generation Computing
Quantum Leap in Next-Generation Computing
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data PlatformLess Is More: Utilizing Ballerina to Architect a Cloud Data Platform
Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 

Cast a wider net