Building High PerformanceWeb SitesPraveen P. N ( @holydevil )
2006
2011trademarks and logos are the property of their respective owners
How the browser works
LatencyI/O latencyL1: 3 cyclesL2: 14 cyclesRAM: 250 cyclesDISK: 41,000,000 cyclesNETWORK: 240,000,000 cycles
Everybody makes mistakesHere are some common ones to avoid …
Not measuring is BADTools: Boomerang, WebPagetest, YSlow, Pagespeed, etc.
Measuring wrong pages is           WORSE!   Find where users spends most of their time!   Look for patternse.g. News Site ...
Cookie free domains!      rediff.com                                              ✗!      indiatimes.com                  ...
Getting Caching wrongHTTP/1.1 200 OK!Date: Mon, 25 Jul 2011 11:39:55 GMT!Expires: Tue, 22 Jul 2011 11:39:55 GMT!Last-Modif...
ProofHTTP/1.1 200 OK!Date: Mon, 25 Jul 2011 11:39:55 GMT!Cache-Control: no-cache!Last-Modified: Tue, 22 Jul 2011 11:30:45 ...
Big Wins
Post-load contentbelow the fold
Yahoo! News
Image optimization        Source: httparchive.orgTools: smush.it, pngcrush, etc.
Use a CDNAn example> www.example.com has 30 components(images+css+js)> All components are served from US and user is in In...
Selective loading of JavaScript         Source: httparchive.org!   Load JavaScript that is required for basic features!   ...
What do I do now?
TO-Do!   Start measuring    !   Use Boomerang, WPT, ShowSlow, etc.!   Use proven tools to find problems      !      Yslow,...
Thank you!and Questions
Contactpraveenp@yahoo-inc.com or @holydevil
Credits!     http://www.flickr.com/photos/sixthlie/4462063010/!     http://www.flickr.com/photos/aussiegall/286709039/!   ...
Building High Performance Web Sites
Upcoming SlideShare
Loading in …5
×

Building High Performance Web Sites

1,336 views
1,299 views

Published on

Users don't like slow sites, Search engines don't like slow sites, Nobody likes slow sites. This talk will give you a head start in performance optimization and explain how easy building High Performance Websites is. We'll be exploring ways to get big wins and some common mistakes to avoid.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,336
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Building High Performance Web Sites

  1. 1. Building High PerformanceWeb SitesPraveen P. N ( @holydevil )
  2. 2. 2006
  3. 3. 2011trademarks and logos are the property of their respective owners
  4. 4. How the browser works
  5. 5. LatencyI/O latencyL1: 3 cyclesL2: 14 cyclesRAM: 250 cyclesDISK: 41,000,000 cyclesNETWORK: 240,000,000 cycles
  6. 6. Everybody makes mistakesHere are some common ones to avoid …
  7. 7. Not measuring is BADTools: Boomerang, WebPagetest, YSlow, Pagespeed, etc.
  8. 8. Measuring wrong pages is WORSE!   Find where users spends most of their time!   Look for patternse.g. News Site Traffic Home page Article page Photos page
  9. 9. Cookie free domains! rediff.com ✗! indiatimes.com ✗! in.com ✗! microsoft.com ✗!   way2sms.com ✗! sulekha.com ✗! moneycontrol.com ✗Note: Randomly picked sites from Alexa top 50 list for India
  10. 10. Getting Caching wrongHTTP/1.1 200 OK!Date: Mon, 25 Jul 2011 11:39:55 GMT!Expires: Tue, 22 Jul 2011 11:39:55 GMT!Last-Modified: Tue, 22 Jul 2011 11:30:45 GMT!!HTTP/1.1 200 OK!Cache-Control: private!Date: Fri, 29 Jul 2011 17:23:34 GMT!Content-Length: 834!
  11. 11. ProofHTTP/1.1 200 OK!Date: Mon, 25 Jul 2011 11:39:55 GMT!Cache-Control: no-cache!Last-Modified: Tue, 22 Jul 2011 11:30:45 GMT!!Source: httparchive.org
  12. 12. Big Wins
  13. 13. Post-load contentbelow the fold
  14. 14. Yahoo! News
  15. 15. Image optimization Source: httparchive.orgTools: smush.it, pngcrush, etc.
  16. 16. Use a CDNAn example> www.example.com has 30 components(images+css+js)> All components are served from US and user is in IndiaAverage latency to US = 300ms30 X 300 ms = 9 sec (page load time)> If content is served by a CDN from IndiaAverage latency within India = 50ms30 X 50ms = 1.5 sec (page load time)
  17. 17. Selective loading of JavaScript Source: httparchive.org!   Load JavaScript that is required for basic features!   Defer the loading of other JS files based on time or user activity
  18. 18. What do I do now?
  19. 19. TO-Do!   Start measuring !   Use Boomerang, WPT, ShowSlow, etc.!   Use proven tools to find problems ! Yslow, Pagespeed, Dynatrace, etc.!   Fix issues!   Look at results!   WIN!
  20. 20. Thank you!and Questions
  21. 21. Contactpraveenp@yahoo-inc.com or @holydevil
  22. 22. Credits! http://www.flickr.com/photos/sixthlie/4462063010/! http://www.flickr.com/photos/aussiegall/286709039/! http://www.flickr.com/photos/ryusha/2438452274/Trademarks and logos used in this presentation are the property of their respectiveowners!   Slides will be available on Slideshare

×