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.

2. Building High Performance
Web Sites
Praveen P. N ( @holydevil )

3. 2006

4. 2011
trademarks and logos are the property of their respective owners

5. How the browser works

6. Latency
I/O latency
L1: 3 cycles
L2: 14 cycles
RAM: 250 cycles
DISK: 41,000,000 cycles
NETWORK: 240,000,000 cycles

7. Everybody makes mistakes
Here are some common ones to avoid …

8. Not measuring is BAD
Tools: Boomerang, WebPagetest, YSlow, Pagespeed, etc.

9. Measuring wrong pages is
WORSE
! Find where users spends most of their time
! Look for patterns
e.g. News Site
Traffic
Home page
Article page
Photos page

10. 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

11. Getting Caching wrong
HTTP/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!

12. Proof
HTTP/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

13. Big Wins

14. Post-load content
below the fold

15. Yahoo! News

16. Image optimization
Source: httparchive.org
Tools: smush.it, pngcrush, etc.

17. Use a CDN
An example
> www.example.com has 30 components(images+css+js)
> All components are served from US and user is in India
Average latency to US = 300ms
30 X 300 ms = 9 sec (page load time)
> If content is served by a CDN from India
Average latency within India = 50ms
30 X 50ms = 1.5 sec (page load time)

18. 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

19. What do I do now?

20. 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!

21. Thank you!
and Questions

22. Contact
praveenp@yahoo-inc.com or @holydevil

23. 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 respective
owners
! Slides will be available on Slideshare