Performance tuning of Websites
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Performance tuning of Websites

on

  • 745 views

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.

Statistics

Views

Total Views
745
Views on SlideShare
745
Embed Views
0

Actions

Likes
1
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Performance tuning of Websites Presentation 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)