cast a wider net
TRANSCRIPT
![Page 1: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/1.jpg)
Casting a Wider Net
![Page 2: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/2.jpg)
Hi
![Page 3: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/3.jpg)
How Does a Browser Work?
![Page 4: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/4.jpg)
The Densest Interview Question ever
![Page 5: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/5.jpg)
![Page 6: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/6.jpg)
DNS
![Page 7: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/7.jpg)
Domain Name System
![Page 8: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/8.jpg)
![Page 9: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/9.jpg)
![Page 10: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/10.jpg)
![Page 11: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/11.jpg)
ISP
![Page 13: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/13.jpg)
Top Level Domain
![Page 15: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/15.jpg)
IP Address and Port!
![Page 16: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/16.jpg)
HTTP Request
![Page 17: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/17.jpg)
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
![Page 18: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/18.jpg)
Headers
Headers
![Page 19: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/19.jpg)
Telnet. Oooo
![Page 20: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/20.jpg)
![Page 21: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/21.jpg)
![Page 22: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/22.jpg)
TCP
![Page 23: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/23.jpg)
Transmission Control Protocol
![Page 24: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/24.jpg)
Synchronize/Acknowledge
![Page 25: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/25.jpg)
Latency?
![Page 26: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/26.jpg)
Grace Hopper
![Page 27: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/27.jpg)
The Response - you know this part
![Page 28: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/28.jpg)
14KB
![Page 29: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/29.jpg)
HTML
![Page 30: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/30.jpg)
Parse
![Page 31: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/31.jpg)
DOM Tree
![Page 32: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/32.jpg)
Fetch External Resources
![Page 33: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/33.jpg)
CSS files/style tags/style attributes
![Page 34: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/34.jpg)
CSSOM
![Page 35: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/35.jpg)
CASCADING
![Page 36: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/36.jpg)
Weight, then Specificity, then Order
![Page 37: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/37.jpg)
!important
![Page 38: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/38.jpg)
IDs, classes, tags oh my
![Page 39: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/39.jpg)
What’s next in line?
![Page 40: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/40.jpg)
CSS BLOCKS Rendering
![Page 41: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/41.jpg)
Render page
![Page 42: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/42.jpg)
Position (box model)
![Page 43: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/43.jpg)
Position (floats, absolutes, relatives)
![Page 44: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/44.jpg)
Layer
![Page 45: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/45.jpg)
Render
![Page 46: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/46.jpg)
Make small changes for faster renders
![Page 47: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/47.jpg)
JavaScript
![Page 48: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/48.jpg)
Parse + Execution Time?
![Page 49: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/49.jpg)
Compilers (overview)
![Page 50: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/50.jpg)
Tokeniser
![Page 51: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/51.jpg)
Parser
![Page 52: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/52.jpg)
Translator010100 100011 000111
![Page 53: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/53.jpg)
Interpreter010100 100011 000111
![Page 54: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/54.jpg)
Sloooowwwww
![Page 55: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/55.jpg)
JIT CompilerVery smart people made JS a lot faster
![Page 56: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/56.jpg)
Very smart people made JS a lot faster
![Page 57: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/57.jpg)
Very smart people made JS a lot faster
![Page 58: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/58.jpg)
We done yet?
![Page 59: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/59.jpg)
Images
![Page 60: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/60.jpg)
Fonts
![Page 61: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/61.jpg)
How do I make my stuff faster?
![Page 62: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/62.jpg)
HTTP 1.1
![Page 63: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/63.jpg)
Asset Pipeline
![Page 64: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/64.jpg)
project/ |_ js/ |_ lib/ |_ jquery.js |_ posts.js |_ users.js |_ admin.js
=>project/ |_ build/ _ js/ |_ all.js
JUST ONE REQUEST
Concatenate
![Page 65: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/65.jpg)
Minify
=>MAKES FILE SMALLER
![Page 66: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/66.jpg)
gzip
![Page 67: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/67.jpg)
Example - jQuery
79 Files to Start!
![Page 68: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/68.jpg)
Example - jQuery
CONCAT! =>One File - 276.79KB
MINIFY! =>One File - 93.66KB
GZIP!
One File - 32.55KB=>
![Page 69: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/69.jpg)
Scripts Block Parsing!
![Page 70: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/70.jpg)
Head vs. Bottom Block Example
![Page 71: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/71.jpg)
Use async or defer attributes
![Page 72: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/72.jpg)
async runs only when fully available and not blocking
![Page 73: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/73.jpg)
defer runs only when the DOM is completely built
![Page 74: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/74.jpg)
Async load Fonts
![Page 75: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/75.jpg)
async load everything not critical
https://www.filamentgroup.com/lab/weight-wait.html
![Page 76: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/76.jpg)
Server-Side Rendering
![Page 77: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/77.jpg)
Special Tangent
![Page 78: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/78.jpg)
Progressive Enhancement
![Page 79: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/79.jpg)
Single Point of Failure
![Page 80: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/80.jpg)
![Page 81: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/81.jpg)
![Page 82: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/82.jpg)
![Page 83: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/83.jpg)
Why do we care that it’s fast anyway?
![Page 84: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/84.jpg)
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/
![Page 85: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/85.jpg)
“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
![Page 86: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/86.jpg)
Mobile traffic is increasing
![Page 87: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/87.jpg)
Mobile Networks aren’t always speedy
![Page 88: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/88.jpg)
“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/
![Page 89: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/89.jpg)
https://twitter.com/BenedictEvans/status/513017790920290304
![Page 90: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/90.jpg)
Tangential Responsibility Rant
![Page 91: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/91.jpg)
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
![Page 92: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/92.jpg)
You are likely not your market
![Page 93: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/93.jpg)
The entire world is not San Francisco and Seattle
![Page 94: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/94.jpg)
There are Over 8.7 Billion Internet-Connected Devices Worldwide
![Page 95: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/95.jpg)
Worldwide Mobile Browser Usage
![Page 96: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/96.jpg)
Asian Mobile Browser Usage
![Page 97: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/97.jpg)
African Mobile Browser Usage
![Page 98: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/98.jpg)
South American Mobile Browser Usage
![Page 99: Cast a wider net](https://reader034.vdocuments.net/reader034/viewer/2022042723/58ed133a1a28ab626e8b45bf/html5/thumbnails/99.jpg)
@jefflembeck