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

Translator010100 100011 000111

Interpreter010100 100011 000111

Sloooowwwww

JIT CompilerVery 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