optimize url for performance

Optimize URL for Performance

Morgan Cheng, Apr 15th 2011@morgancheng

Gawker Outage After Redesign

http://blogs.wsj.com/digits/2011/02/07/gawker-outage-causing-twitter-stir/

What The Hell?

http://lifehacker.com/#!5785979

HashBang

Why HashBang?

It All Starts With Desire for Performance

Web 1.0

Page A Page CPage B

Server

AJAX Web

One Page

Server

Fast is Not Enough

Bookmark-able

Hash Fragment is Not Sent to Server

http://lifehacker.com/#!5785979

http://lifehacker.com/#!3141592

Same PageDifferentiated by JavaScript

Navigable

Forward

Backward

Bonus: AJAX Caching

Looks Hash is enoughWhy Bang?

Audience of Web Site

Human User Search Engine Crawler

Google’s HashBang Scheme

http://code.google.com/web/ajaxcrawling/docs/specification.html

Two URLs for Same Content

http://example.com/#!12345

http://example.com/?_escaped_fragment_=12345

Only Google officially claims to support HashBang

HashBang makes your content dependent on JavaScript

Don’t Abuse Tech You Cannot Handle

Hey, but Facebook and Twitter do similar trick

So, Red Pill or Blue Pill?

Web Site or Web Application

HTML5 to Help

HTML5 History API

• history.pushState(state, newTitle, newUrl)

• history.replaceState(state, newTitle, newUrl)

• popstate event

Update URL without HashBang

history.pushState(null, null,

“http://lifehacker.com/314159”)

Current Page Doesn’t Refresh

HTML5 History API Detection

function supportHTML5History() {return !!(window.history && history.pushState);

}

When can I use HTML5 History?

http://caniuse.com/#search=history

YUI History Module

Y.History

Y.HistoryHash Y.HistoryHTML5

Hijax = Hijack + AJAX

Step 1: Build Web 1.0

<a href=“/31415926”>page one</a><a href=“/31415927”>page two</a>

Step 2: Add JavaScript

<a href=“/31415926”>page one</a><a href=“/31415927”>page two</a>

Y.delegate(‘click’, onPageClick, ‘body’, ‘a’);

Step 3: Hijack and Do AJAX

function onPageClick(ev) { if (isInternalLink(ev.target.get(‘href’)) {

ev.preventDefault(); // do AJAX to update page // update URL with Hash or History API }}

More Tricks

http://example.com/12345

http://example.com/12345#56789

Navigate

Bookmark

What about this?

Flush Inline JavaScript to Redirect<script type=“text/javascript”> if (window.location.hash) { window.location = directUrl(window.location.hash); }</script><?php flush(); ?>

http://example.com/12345#56789

http://example.com/56789

Redirect

Use Event Delegate

Don’t Over Cache

{

http://mustache.github.com/

Graceful Degradation vs.

Progressive Enhancement

Thanks