Your SlideShare is downloading. ×
Performance tuning of Websites
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Performance tuning of Websites

644
views

Published on

A tutorial on how to improve performance of webpages. Covers most of the artifacts needed for a good audit score on browsers.

A tutorial on how to improve performance of webpages. Covers most of the artifacts needed for a good audit score on browsers.

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
644
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Performance Tuning of web pages By Ritesh M Nayak
  • 2. Why is speed important? • Offers a good user experience • No broken functionality • Part of SLAs for many projects • Doesn’t make one feel like they are living in the 90s Does anyone remember this?
  • 3. Why is speed important?
  • 4. Speed is the new SEO
  • 5. remember the 80/20 rule 10 to 20% of the end user response time is spent downloading the actual HTML content of the page, the rest is used to download the components of a page.
  • 6. Audit of a popular webpage
  • 7. Load time: 26 seconds Page size: 5.2 MB Requests: 172 HTTP requests This is horribly wrong
  • 8. Follow these basic rules if you want to improve performance Please download the Yslow plugin for firefox or use the Chrome’s built in Audit feature
  • 9. 1. Make fewer HTTP requests Let’s talk a little bit about HTTP 1.1 and browser implementations here • Combine JS and CSS files • Use sprites instead of individual images • Inline images
  • 10. 2. Use a CDN • Understand what server proximity constraints are and choose accordingly • CDNs are inexpensive these days and can make a great difference to your application Ex: Rackspace’s CloudFiles, Amazon’s CloudFront or Akamai at $10c /GB/Month it is totally worth it
  • 11. 3.Use the Expires header • Helps restrict unnecessary requests • Use expires date in the far future • HTTP 1.1 also supports cache-control , so use the max-age with a high value HTTP/1.1 200 OK Content-Type: application/x-javascript Last-Modified: Thu, 10 Mar 2011 12:23:32 GTM Expires: Thu, 10 Mar 2032 18:23:32 GTM On Apache, look at the mod_expires module for more info
  • 12. 4. GZIP components • • • • GET /sample.com/index HTTP/1.1 HOST: sample.com Accept-Encoding: gzip,deflate Helpful in conserving bandwidth Compress all text responses Use the vary header if you use proxies Don’t use ETAGS in the header On Apache, look at the mod_zip and mod_deflate for more info 50%
  • 13. 5. CSS on top • Users don’t get to see un-styled content/white screen • Drop all inline styles if possible and don’t use browser specific CSS effects (esp. IE)(not cached) • Progressive rendering Avoid CSS expressions ! background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
  • 14. 6. JS at the bottom • Helps in unblocking parallel downloads • DOM is mostly accessible unless you are doing something fancy • Order them in the way you want them executed • Drop inline scripts (not cached)
  • 15. 7. Reduce DNS lookups • Typically takes 20-120 ms to look up a domain • As a practice, don’t use more than 4 hostnames
  • 16. 8. Minify Javascript • Reduced bandwidth significantly • Use asset mgmt. libraries like assetic(php), static resources (grails) • It is also useful to Obfuscate JavaScript sometimes to protect your code against attacks
  • 17. 9. Avoid redirects • Creates a lot of Idle time for the user • Use only for POSTs, but not for tracking, rewrite Look at mod_rewrite best practices when using the module
  • 18. 10. Cache AJAX requests • Use GET requests for AJAX (uses 1 packet) • Seem fairly obvious but not done by people • Especially for auto-complete textboxes or commonly occurring states like checking for username availability etc To override the caching, append current timestamp to the ajax request as a query parameter ?thetimeis=42392991821
  • 19. 11. Caching caching caching • Use memcached; can be deployed separately • Use database level caching via ORMs or other similar libraries. Consistent queries also help optimize query tuning • Cache commonly hit pages (interpreted languages)
  • 20. 12. flush() • Use PHPs flush() function to render a partially complete HTML page, so that the components can start loading instead of the browser remaining idle More info here: http://php.net/manual/en/function.flush.php
  • 21. 13. Pre/post loading components • Post load components which are out of the immediate viewport of the user. Example: scripts not needed at DOM load • Pre load components rendered as part of a container refresh
  • 22. 14. Split components on domains • To maximize parallel downloads, use different subdomains (stick to 4 hostnames) • Use a cookieless subdomain/domain for components
  • 23. 15. Minimize , cut , snip , chop • Minimize DOM elements. Slows down JS • Minimize IFrame (block page onload) • Minimize 3rd party scripts. See if you load those asynchronously • Reduce the cookie size (more info here) • Optimize images, use PNG instead of GIF. Reduce JPG quality. Tools like jpgtran, pngcrush, optipng will help, remove exif and comments
  • 24. Mobile Browser • Keep components under 25kb • Minify HTML in addition to js and css • Use multipart documents (email)