NU Web Steering Committee - Oct 11 - Web Performance

Top Level Northwestern Pages Go Mobile

Need for Speed!

Why prioritize speed?

* Data diets (almost… American like)

* Bad reception situations (almost… Telephone like)

* Slow networks (almost… Telegraph like)

* Roaming data can be expensive

* Network-starved regions

* Speed is awesome

Need for Speed!

Why prioritize speed?

Students from the World

Why prioritize speed?

International Office Jan 2011 Report

# of Foreign Students:

2,426

Top Countries:

China

South Korea

India

Canada

Taiwan

Broadband Prices

“This… is a country. It’s a country we put a huge amount

of talent and money into… it’s a place where an 8mbps

home connection costs $160+ USD. No one seems to be

able to agree how to pronounce its name”.

Broadband Options

This slide intentionally left blank

HTTP and Web Browsers

To make performant websites, you really need to understand how the

browser and web server work, inside and out.

To me that’s like asking an astronaut to understand how the rocket

engine works, but whatever, we have to deal with it.

Besides, we’re better than astronauts.

HTTP and Web Browsers

Screwy rules

• Javascript blocks (halts) processing of page

• No more than N# HTTP requests per domain at any time

• DNS lookups take time

• ApplicationCache has same-origin restrictions

• Redirects eat at least 300ms

• Cellular Network and device configuration dictates radio power up/down

thresholds

HTTP and Web Browsers

HTTP and Web Browsers

Steve Souders, Google

HTTP and Web Browsers

Microframeworks not Frameworks.

Everyone uses jQuery! I’ll just use the jQuery CDN and no one will have to

download a thing.

Wrong.

Yahoo User Interface Blog

http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/

Frameworks

jQuery “Mobile”, only 24KB!

Doesn’t count the jQuery dependency @ 31KB.

Other frameworks:

* Sencha Touch

* jqTouch

* …

Yahoo User Interface Blog

http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/

Frameworks

Alternatives are available. Open directory at

microjs.com.

I prefer Zepto.js. Why?

It’s 5KB and packs a huge punch.

It is jQuery-compatible.

It targets webkit only, saves on speed & size.

You can serve it to mobiles and serve jQuery

to desktops (IE, Firefox) & others instead if

need be.

Frameworks

“The future is getting better, so none of this matters!”

Yahoo User Interface Blog

http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/

Frameworks

“The future is getting better, so none of this matters!”

The HTTP Archive

http://httparchive.org/compare.php?&r1=Nov%2015%202010&s1=intersection&r2=Aug

%2015%202011&s2=intersection

Nov 15 2010 Oct 15 2011

HTML5

Quick Tour

CSS Animation

CSS3

FLEXBOX LAYOUT!.column-in-thirds {

width: 33.333333333333333333333333333333%;

}

.column-in-thirds {

border: 2px solid purplepride;

padding: not-ugly-padding;

width: uhhhhhh

}

Instead:

.column-in-equals {

-webkit-flex: 1;

}

Hocus-pocus set and forget equal-width elements.

CSS3

Flexbox is the Advil of Front-end Design

HTML5 Markup

USE IT NOW!

Many new elements and attributes for existing elements

• <audio>, <video>

• HTML Forms (input@autocomplete, input@autocapitalize, input@autocorrect)

Application Cache

Tell the browser “give me some disk space and put these files on it, then keep them there and use them until I tell you otherwise.”

Yourapp.appcache – manifest of files/css/style.css

/js/wowee.js

HTTP Headers

Spend time configuring eTags and Expires headers carefully for CSS, JS, etc.

Can be an alternative to AppCache.

First-time Visitor. 10 SECONDS!?

According to Yahoo!'s Exceptional

Performance Team, 40% to 60% of

Yahoo!'s users have an empty cache

experience and about 20% of all page

views are done with an empty cache.

First-time Visitor. 10 SECONDS!?

35+ CSS files waited for connections

Combine these into one file by hand or using server-side scripts.

Use a CSS compressor.

First-time Visitor. 10 SECONDS!?

Compress and minify your Javascript as well, and

defer loading it until absolutely necessary. Paint a

screen for folks as fast as possible and load Javascript

to handle your interaction afterward.

It took 6.11 seconds just to paint anything on the

screen for this site and another 2.2 seconds to finish

downloading Javascript files.

Finally, images took another 1.5 seconds.

On a desktop computer.

First-time Visitor. 10 SECONDS!?

Images are usually the last thing to get loaded by the

browser from the network. Consider “sprite”-ing your

design/template images. That is, put them into a single

large image file and use CSS positioning rules to

move the viewable “window” that is the height and

width of your element to the right place on the gigantic

background image.

Second-time Visitor

Browser cache is not a free pass.

We didn’t transfer nearly as much data (82KB vs 1.2MB), but we STILL

had to spend a ton of time sending the last date we fetched each CSS

file up to the server and waiting for it to tell us if it had a newer copy we

needed to download.

Wrap-up

HTML5: form inputs, caching

CSS3: animations, layout

Minify and combine CSS

Minify and combine Javascript

Defer Javascript until later

Users hate slow sites

Servers hate slow sites

Google hates slow sites