High Performance Web Pages - 20 new best practices

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

The sluggish Web ,[object Object],[object Object],[object Object],[object Object],[object Object]

This talk ,[object Object],[object Object],[object Object],[object Object]

Exceptional Performance at Yahoo! ,[object Object],[object Object],[object Object],[object Object]

The Importance of Front-End Performance Back-end= 5% Front-end= 95% Even here, front-end= 88%

Focus on the front-end ,[object Object],[object Object],[object Object]

List of 14 best practices (updated) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],http://developer.yahoo.com/performance/rules.html content server server server server javascript javascript javascript javascript content css css css css content content

YSlow ,[object Object],[object Object],[object Object],[object Object],http://developer.yahoo.com/yslow/

The Life of Page 2.0 request HTML sent onload page settles conception birth graduation marriage? R.I.P. User perceived “onload” happens somewhere here user interaction, XHRs event handlers, components, XHRs request backend fetching components fetus child teen adult

After YSlow "A"? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],content javascript javascript content content content content server server css css images images images images mobile mobile cookie cookie content

Part I Review of 14 best practices (updated)

Make Fewer HTTP Requests ,[object Object],[object Object],[object Object]

CSS Sprites background-position: -0px -0px; background-position: -20px -0px; background-position: -40px -0px; background-position: -60px -0px; background-position: -80px -0px; background-position: -100px -0px; background-position: -120px -0px; background-position: -140px -0px; background-position: -160px -0px; background-position: -180px -0px; One request instead of ten! Tools: http://www.csssprites.com http://spritegen.website-performance.org/

Use a Content Delivery Network ,[object Object],[object Object],[object Object]

Add Expires header (or Cache-control) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Gzip Components ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Put CSS at the Top ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Move Scripts to the Bottom (inline too) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Avoid CSS Expressions ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Make JavaScript and CSS External ,[object Object],[object Object],[object Object],[object Object],[object Object]

Reduce DNS Lookups ,[object Object],[object Object],[object Object]

Minify JavaScript and CSS (inline too) ,[object Object],[object Object],[object Object],[object Object]

Minify: before ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Minify: after (function(){var B=YAHOO.util,K,I,J={},F={},M=window.document;YAHOO.env._id_counter=YAHOO.env._id_counter||0;

Avoid Redirects ,[object Object],[object Object]

Remove Duplicate Scripts ,[object Object],[object Object]

Configure ETags ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Make AJAX Cacheable ,[object Object],[object Object],[object Object],[object Object]

Part II After YSlow “A”: 20 more best practices

Part II tag: server tag: content tag: cookie tag: javascript tag: css tag: images tag: mobile

Flush the buffer early ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Use GET for AJAX requests ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Post-load components ,[object Object],[object Object],[object Object],[object Object],[object Object]

Post-load components ,[object Object],[object Object],[object Object]

Preload components ,[object Object],[object Object],[object Object],[object Object],[object Object]

Preload components (contd.) ,[object Object]

Preload components (contd.) ,[object Object],[object Object],[object Object]

Reduce the number of DOM elements ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Split components across domains ,[object Object],[object Object],[object Object],[object Object],[object Object]

Split components (contd.) 2 components in parallel 8 components in parallel

Minimize the number of iframes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

No 404s ,[object Object],[object Object],[object Object],[object Object],[object Object]

No 404s (contd.) The second component is a 404 JavaScript and it blocks the rest of the page

Reduce cookie size ,[object Object],[object Object],[object Object],[object Object]

Cookie-free hosting for components ,[object Object],[object Object],[object Object],[object Object],[object Object]

Minimize DOM access ,[object Object],[object Object],[object Object],[object Object]

Develop smart event handlers ,[object Object],[object Object],[object Object],[object Object],[object Object]

Choose <link> over @import ,[object Object],[object Object]

Avoid filters ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Optimize images ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Optimize images (contd.) ,[object Object],[object Object],[object Object],[object Object]

Optimize images (contd.) ,[object Object],[object Object]

Optimize CSS sprites ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Don't scale images in HTML ,[object Object],[object Object],[object Object],[object Object]

Make favicon.ico small and cacheable ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Bonus: crossdomain.xml ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Keep components under 25K ,[object Object],[object Object],[object Object]

Pack components into a multipart document ,[object Object],[object Object]

Tools ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

IBM Page Detailer ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Firebug NET Panel ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

URLs – Exceptional Performance ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

URLs (contd.) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Take-home ,[object Object],[object Object],[object Object],[object Object]

High Performance Web Pages - 20 new best practices

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to High Performance Web Pages - 20 new best practices

Similar to High Performance Web Pages - 20 new best practices (20)

More from Stoyan Stefanov

More from Stoyan Stefanov (20)

Recently uploaded

Recently uploaded (20)

High Performance Web Pages - 20 new best practices