Estelle Weyl | @estellevw | Github | Press → to advance, 2 for comments, 4 to read/write notes.

Web Performance

Understanding YSlow

80-90% of response time is spent downloading components

Take notes

Click on the #4 to show some notes stored with local storage
Click on the #2 to show presenter notes

Minimize HTTP Requests

Less than 20% of response time is server side. Requests to get data client side is the majority of the other 80%.

  • Combined files (stylesheets, scripts)
  • CSS Sprites
  • Data URIs
  • LocalStorage

Sprite your images

sprite of social icons

Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.

  • Arrange images horizontally (usually results in a smaller file size).
  • Combining similar colors in sprite to keep color count low and fit in PNG8.
  • Mobile friendly sprites have to be physically small for memory reasons.

Use a Content Delivery Network

Users' distance from your web server impacts response times

Content Delivery Network = CDN

CDN = Collection of web servers in several locations.

Proximity = Faster content delivery

Avoid empty src or href

Still an inssue in FF, resolved in other browsers.

Add an Expires or a Cache-Control Header

When elements are cached, reduced http requests on next page loads.

in Apache, use ExpiresDefault directive
ExpiresDefault "access plus 10 years"

If you use this, though, you need to change file name on file update

Gzip Components

Compression reduces size of HTTP response.

Accept-Encoding header in the HTTP request:
Accept-Encoding: gzip, deflate

Server tells client it's gzipped with Content-Encoding header in response:
Content-Encoding: gzip

Apache 1.3 uses mod_gzip, Apache 2.x uses mod_deflate.

GZip everything except images and PDFs (already compressed).

Put StyleSheets at the Top

Otherwise your risk a blank white screen or flash of unstyled content

Some browsers wait to render until they have styles, other render page, but it has to repain when styles are found

<link> are supposed to be in <head> anyhow

Put Scripts at the Bottom

scripts block parallel downloads

While a script is downloading, browser won't start any other downloads, even on different hostnames.

Also, use DEFER attribute to indicates script doesn't contain document.write

Avoid CSS Expressions

IE5, IE6 and IE7 supported CSS expressions, which allow CSS property values to be set dynamically

Issue: they're constantly evaluated!

Make JavaScript and CSS External

Allows for caching, reducing HTTP requests

size of the HTML document is reduced without increasing the number of HTTP requests.

Also, it improves site maintainability (not a perf issue)

Reduce DNS Lookups

Latency caused by DNS lookups

# of DNS lookups = # of unique hostnames in page

Minify JavaScript and CSS

Reduce load times by removing unnecessary characters from code to reduce its size

Avoid Redirects

Happens when you get a 301 or 302, like when a '/' is missing, or redirected

HTTP/1.1 301 Moved Permanently
Location: http://m.domain.com/
Content-Type: text/html

redirect info is in the headers and are not cached

redirects slow down the user experience

Apache Alias or mod_rewrite, or DirectorySlash directive

If domain name change is cause, use DNS CNAME with Alias or mod_rewrite.

Remove Duplicate Scripts

  1. unnecessary HTTP requests
  2. unnecessary JavaScript execution

Configure ETags

ETag = server generated token associated with web resource

  1. Client requests resource.
  2. Server sends back resource with an ETag.
  3. Client renders renders then caches resource with ETag.
  4. Client re-requests resource, passing along the ETag
  5. Server determines via ETag resource hasn't changed, responds with 304 (Not Modified) & empty body.

Make AJAX Cacheable

Think of an AJAX response as a web page. All the previous rules apply to your AJAX responses as well (cache, eTags, gZip, etc.).

Use GET for AJAX Requests

With XMLHttpRequest, POST is a two-step process: sending the headers first, then sending data.

GET only takes one TCP packet to send (unless you have a lot of cookies)

GET is meant for retrieving information. Use GET when only requesting data, as opposed to sending data to be stored server-side.

Reduce the Number of DOM Elements

  • More nodes, more bandwidth
  • More nodes take longer to loop thru
  • More nodes to measure when reflowing page

No 404s

Useless responses waste bandwidth and add latency

Reduce Cookie Size

Cookies are sent back and forth with every request and response by domain

  • Eliminate unnecessary cookies
  • Keep cookie small to minimize impact on user response time
  • Set cookies at appropriate domain level so other sub-domains are not affected
  • Set an Expires date. The earlier the date, or none, the sooner you stop the extra bandwidth improving response time

Use Cookie-Free Domains for Components

Do you need to send your shopping cart cookie when you get the logo png?

  • Use a cookieless CDN
  • Put static resources in a cookie-less subdomain

Avoid Filters

An IE6 CSS issue, the IE AlphaImageLoader transparency filter blocks rendering (freezing browser during download), increases memory consumption (applied per element, not per image). Use PNG8 instead. IE7+ handles png transparency fine.

Do Not Scale Images in HTML

Download images that are the correct size. Don't waste bandwidth on huge images that aren't seen at full scale.

Make favicon.ico Small and Cacheable

The browser requests it whether you link to it or not, so don't 404. So, have one, keep it small, and set future expires to cache it

Reminder: cookies are sent every time it's requested