Friday Nov 06, 2009

Web Site Performance Tips and Tools

The Top 10 Web Application security vulnerabilities

Web Site Performance Tips

  • Make Fewer HTTP Requests
    • reduce the number of components in a page by combining CSS into single stylesheet,  JS single script 
  • Use A Content Delivery Network
    • such as Akamai Technologies, Mirror Image Internet, or Limelight Networks. 
  • Add An Expires Header
    • for static components set a far future expires header
    • for dynamic us a cache-control header 
  • GZIP Components
    • reduces response times by reducing the size of the HTTP response.
  • Put Stylesheets At The Top
    • allows the page to display whatever content it has as soon as possible. 
  • Put Scripts At The Bottom
    • scripts block parallel downloads, which slows rendering of page
  • Avoid CSS Expressions For Dynamic Properties
    • they may be evaluated thousands of times and could affect the performance of your page.
  • Make JS and CSS External
    • if multiple pages re-use the same scripts and stylesheets, then making JS and CSS external files produces faster pages because the files are cached by the browser.
  • Reduce DNS Lookups
    • Reducing the number of unique hostnames used in the page's URL, images, script files, stylesheets.. reduces the number of DNS lookups but also reduces the amount of parallel downloading.  Split these components across at least 2 but no more than 4 hostnames.
  • Minify JavaScript
    • remove unnecessary characters from code to reduce its size  : remove whitespace, comments... Two popular tools for minifying JavaScript code are  JSMin and YUI Compressor. 
  • Avoid Redirects
    • redirects are slow, using Alias and mod_rewrite is faster
  • Remove Duplicate Scripts
  • Configure ETAGS
    • ETag is a string that uniquely identifies a specific version of a component. Used in conditional GET requests, browser uses the If-None-Match header. When ETags match, a 304 status code is returned reducing the response 
  • Optimize Images
  • Reduce Cookie Size
    • Information about cookies is exchanged in the HTTP headers between web servers and browsers.  Keep the size of cookies as low as possible to minimize the impact on the user's response time.
  • Avoid 404 errors
  • JavaScript:
    • make the AJAX responses cacheable, add an Expires or a Cache-Control Header. 
    • write efficient JS
    • reduce DOM elements
    • Make the messages between server and browser as small as possible
    • Don't rewrite the server application in javascript
  • Only Generate Content when Things Change
    • Break the system into components so that you can isolate the costs
      of things that change rapidly from those that change infrequently.

Web Site Performance Tools

Tools to find out What to Fix

  • HttpWatch
    • HttpWatch is an HTTP viewer and debugger that integrates with IE and Firefox to provide seamless HTTP and HTTPS monitoring
  • Firebug
    • Firebug integrates with Firefox . With Firebug you can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
  • Fiddler
    • Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet.
  • Network Protocol Analyzers:

Tools to find out How to Fix it

  • YSlow
    • YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page's performance, summarizes the page's components, displays statistics about the page, and provides tools for performance analysis, including Smush.it™ and JSLint.
  • Page Speed  http://code.google.com/speed/page-speed/
    • Page Speed is an open-source Firefox/Firebug Add-on. Webmasters and web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them.
  • Pagetest
    • Pagetest allows you to provide the URL of a webpage to be tested. The test will be conducted from the location specified and you will be provided a waterfall of your page load performance as well as a comparison against an optimization checklist.
  • Visual Round Trip Analyzer
    • Microsoft Web page performance visualizer and analyzer
  • neXpert Performance Tool
    • neXpert is an add-on to Fiddler Web Debugger which aids in performance testing web applications.  neXpert was created to reduce the time it takes to look for performance issues with Fiddler and to create a deliverable that can be used to educate development teams.
  • MSFast
    • MSFast is a browser plugin that help developers to improve their code performance by capturing and measuring possible bottlenecks on their web pages.

Other Tools 

  • CSS Sprite Generator  http://spritegen.website-performance.org/
    • CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.
  • SpriteMe  http://spriteme.org/ (in progress)
  • Hammerhead  http://stevesouders.com/hammerhead/
    • Hammerhead adds a tab to Firebug for measuring the load time of web pages
  • Cuzillion  http://cuzillion.com/
    • Cuzillion is a tool for quickly constructing web pages to see how components interact.
  • Smush.it  http://smush.it/
    • Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files
  • http://code.google.com/p/modjsmin/
    • Once installed, all JS files are minified on demand, leaving commented source intact
  • JSLint
    • JavaScript Code Quality Tool

References and More Information:


About

caroljmcdonald

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today