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
Recommended
