Web Performance Optimization for Modern Web Applications

Chris Love

@ChrisLove

ProfessionalASPNET.com

Slide Deck & Source Code

Slide Deck – http://slidesha.re/SzoqKs

Source Code – http://GitHub.com/docluv

Web Performance Optimization Resources

High Performance Web Sites - http://bitly.com/U7GStY

Even Faster Web Sites - http://amzn.to/WTiDFM

Web Performance Daybook - http://amzn.to/VV4Grz

High Performance JavaScript - http://amzn.to/Sq9IFC

Steve Souders - http://www.stevesouders.com/

Web Performance Optimization

Web performance optimization, WPO, or

website optimization involves ongoing

monitoring and testing of websites to

achieve optimum performance under given

constraints. Usually optimization is

restricted due to lack of complete

information and metrics to evaluate the

performance of a website.

http://bit.ly/SWEh6E(Click the arrow when in Slide Show mode)

Matt Cutts

"Also take a step back for a minute and

consider the intent of this change: a faster

web is great for everyone, but especially for

users. Lots of websites have demonstrated

that speeding up the user experience

results in more usage. So speeding up your

website isn’t just something that can affect

your search rankings–it’s a fantastic idea for

your users."

http://bit.ly/SPPB4k(Click the arrow when in Slide Show mode)

Time === $$$$

Faster Sites Have Higher Conversion Rates

WalMart - http://bit.ly/S1fHSZ

Google – http://bit.ly/WajJbB

Amazon – http://bit.ly/S3UoAj

ShopZilla - http://bit.ly/RIQMDM

WalMart

Folks at Walmart knew their pages were slow. As a for

instance, initial measurement showed that an item page

took about 24 seconds to load for the slowest 5% of users.

Why? The usual culprits: too many page elements, slow

third-party scripts, multiple hosts (25% of page content is

served by partners, affiliates, and Marketplace), and various

best practice no-nos

http://bit.ly/WajJbB

½ Second Delay

Half a second delay caused a 20% drop in

traffic. Half a second delay killed user

satisfaction.

The lesson, Marissa said, is that speed matters.

People do not like to wait. Do not make them.

http://bit.ly/TPPhUp

WPO Fast Facts

• 57% Will Abandon a Slow Site After 3 Seconds

• We Have to Concentrate 50% Harder For Slow Sites

• 78% Have Felt Stress or Anger With Slow Sites

• 44% Say Slow Sites Make Them Anxious

• 4% Have Thrown Their Phone

http://bit.ly/SuBLDR

Web Sites/Apps Are Getting Larger

http://bit.ly/PVlLOC

86 Files

Requests

1.25MB

15 JavaScript

Files

214KB

53 Images

750KB

14 Domains

Web Sites/Apps Are Getting Larger

We Are Getting More Mobile

Assume Everyone is on Sprint 3G

http://bit.ly/WebIqD

And Is Using Android

http://bit.ly/ZGMm4A

YSlow Rules

1. Minimize HTTP Requests2. Use a Content Delivery Network3. Avoid empty src or href4. Add an Expires or a Cache-Control Header5. Gzip Components6. Put StyleSheets at the Top7. Put Scripts at the Bottom8. Avoid CSS Expressions9. Make JavaScript and CSS External10.Reduce DNS Lookups11.Minify JavaScript and CSS12.Avoid Redirects13.Remove Duplicate Scripts

14.Configure ETags15.Make AJAX Cacheable16.Use GET for AJAX Requests17.Reduce the Number of DOM Elements18.No 404s19.Reduce Cookie Size20.Use Cookie-Free Domains for Components21.Avoid Filters22.Do Not Scale Images in HTML23.Make favicon.ico Small and Cacheable

http://yhoo.it/W7BFIw

YSlow Rules – That Will Play A Part Today

1. Minimize HTTP Requests2. Use a Content Delivery Network3. Avoid empty src or href4. Add an Expires or a Cache-Control

Header5. Gzip Components6. Put StyleSheets at the Top7. Put Scripts at the Bottom8. Avoid CSS Expressions9. Make JavaScript and CSS External10.Reduce DNS Lookups11.Minify JavaScript and CSS12.Avoid Redirects

13.Remove Duplicate Scripts14.Configure ETags15.Make AJAX Cacheable16.Use GET for AJAX Requests17.Reduce the Number of DOM Elements18.No 404s19.Reduce Cookie Size20.Use Cookie-Free Domains for

Components21.Avoid Filters22.Do Not Scale Images in HTML23.Make favicon.ico Small and Cacheable

http://yhoo.it/W7BFIw

Mike Krieger “Most of your scaling problems wont be

glamorous"

http://bit.ly/QeKZsO(Click the arrow when in Slide Show mode)

Make FavIcon Small and Cacheable

Don’t Return 404

Make Sure Its Compatible

PNG/ICO

It Carries Cookie Weight

Instagram Lesson #1

http://bit.ly/RUXEiL

Speaking Of Cookies

• Cookies Add Weight

• Place Resources (img/css/js) on Cookieless Domains

• Consider Local Storage Instead

Impact of Cookies on Response Time

Use LocalStorage For Storage & Caching

• Allows You to Keep Data Locally in a Hash Table

• localStorage

• sessionStorage

• Approximately 5MB

• Replace Cookies

• Great For Caching

Let’s Examine Southwest.com

• 95 File Requests

• 6 Domains

• 2 CSS

• 17 Documents

• 49 Images

• 30 JavaScript Files

• 4 AJAX Calls

• 786 KB – 1.25MB

• 2042 KB Request Header

• 16.5KB Cookie

• 1430 DOM Elements

Combine 19 JavaScript Files

Combine 19 JavaScript Files

• Eliminated 18 file Requests

• 42.6KB Header Data

• Eliminated 18 Gzip Decompress

Operations

• Probably Shave ~ 1 Second

Southwest.com Page Structure

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

<link rel="shortcut icon" href="/assets/images/favicon.ico"/>

<style> … </style>

<script> … </script> - 22 Times

Script References in the HEAD – Should be at the Bottom

Southwest.com Improvements

Over the past few months I have been analyzing Southwest.com and have seen some tremendous improvements. Data transfer size has been cut in half this week alone. I have seen the complete load time reduced around 2 seconds in the past few weeks. The number of file requests has been reduced. So many be we will be privileged to a new WPO case study soon ;)

Let’s Look at Some Code!

Asynchronous Script Loading

http://bit.ly/TKdo6C

• Allows You to lazy Load Scripts• Great Way to Isolate 3rd Party Scripts• Helps Avoid Single Points of Failure

• Check For Existing Script Reference• Creates New Element• Executes a Callback When the Document is loaded• Appends the Script to the BODY

Image Optimization Tricks

• CSS Sprites

• Data URIs

<img src="data:image/png;base64,iVBORw0KGHAAAD…Zw4PIXZORK5CYII="/>

• CSS3 Features

• Rounded Corners

• Gradients

Use Native Selectors Instead of jQuery

http://bit.ly/S0bwby

Optimize CSS

• Good Structure• Size

• Colors

• Views/Controls

• Languages

• Avoid ID References

#