Best Practices for Speeding Up Your Web Site

The Exceptional Performance team has identified a number of best practices for making web pages fast. The list includes 35 best practices divided into 7 categories.


  1. Make Fewer HTTP Requests
  2. Use a Content Delivery Network (CDN)
  3. Add Expires or Cache-Control Header
  4. Gzip Components
  5. Put Stylesheets at Top
  6. Put Scripts at Bottom
  7. Avoid CSS Expressions
  8. Make JavaScript and CSS External
  9. Reduce DNS Lookups
  10. Minify JavaScript and CSS
  11. Avoid Redirects
  12. Remove Duplicate Scripts
  13. Configure ETags
  14. Make Ajax Cacheable
  15. Flush Buffer Early
  16. Use GET for Ajax Requests
  17. Postload Components
  18. Preload Components
  19. Reduce the Number of DOM Elements
  20. Split Components Across Domains
  21. Minimize Number of iframes
  22. Avoid 404s
  23. Reduce Cookie Size
  24. Use Cookie-Free Domains for Components
  25. Minimize DOM Access
  26. Develop Smart Event Handlers
  27. Choose Over @import
  28. Avoid Filters
  29. Optimize Images
  30. Optimize CSS Sprites
  31. Do Not Scale Images in HTML
  32. Make favicon.ico Small and Cacheable
  33. Keep Components Under 25 KB
  34. Pack Components Into a Multipart Document
  35. Avoid Empty Image src

For details – >http://developer.yahoo.com/performance/rules.html

For test your website speed, There are some site such as->

  1. http://gtmetrix.com,
  2. http://www.webpagetest.org ,
  3. http://www.websiteoptimization.com/services/analyze/

 

 

-------------------------

Prefer asynchronous resources

 

Combine images using CSS sprites

Combining images into as few files as possible using CSS sprites reduces the number of round-trips and delays in downloading other resources, reduces request overhead, and can reduce the total number of bytes downloaded by a web page.

Serve resources from a consistent URL

Sometimes it's necessary to reference the same resource from multiple places in a page — images are a typical example. Even more likely is that you share the same resources across multiple pages in a site such as .css and .js files. If your pages do need to include the same resource, the resource should always be served from a consistent URL. Ensuring that one resource is always assigned a single URL has a number of benefits. It reduces the overall payload size, as the browser does not need to download additional copies of the same bytes. Also, most browsers will not issue more than one HTTP request for a single URL in one session, whether or not the resource is cacheable, so you also save additional round-trip times. It's especially important to ensure that the same resource is not served from a different hostname, to avoid the performance penalty of additional DNS lookups.

Optimize the order of styles and scripts

Correctly ordering external stylesheets and external and inline scripts enables better parallelization of downloads and speeds up browser rendering time

Optimize images

Properly formatting and compressing images can save many bytes of data.

Specify a character set early

Specifying a character set early for your HTML documents allows the browser to begin executing scripts immediately.

Defer parsing of JavaScript

In order to load a page, the browser must parse the contents of all <script> tags, which adds additional time to the page load. By minimizing the amount of JavaScript needed to render the page, and deferring parsing of unneeded JavaScript until it needs to be executed, you can reduce the initial load time of your page.

Add Expires headers

Use an Expires header to control how your site is cached on visitors' browsers.

Configure entity tags (ETags)

Running multiple servers with default ETag settings can prevent 304 responses.

 

Enable gzip compression

Compressing resources with gzip or deflate can reduce the number of bytes sent over the network.

<IfModule mod_gzip.c>

     mod_gzip_on       Yes

     mod_gzip_dechunk  Yes

     mod_gzip_item_include file      \.(html?|txt|css|js|php|pl)$

     mod_gzip_item_include handler   ^cgi-script$

     mod_gzip_item_include mime      ^text/.*

     mod_gzip_item_include mime      ^application/x-javascript.*

     mod_gzip_item_exclude mime      ^image/.*

     mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

 </IfModule>

or

# BEGIN Compress text files

<ifModule mod_deflate.c>

  AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript

</ifModule>

# END Compress text files

 

Minify HTML

Compacting HTML code, including any inline JavaScript and CSS contained in it, can save many bytes of data and speed up downloading, parsing, and execution time.

Minify CSS

Compacting CSS code can save many bytes of data and speed up downloading, parsing, and execution time.

Minify JavaScript

Compacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time.

Put CSS in the document head

Moving inline style blocks and <link> elements from the document body to the document head improves rendering performance.

 

 

Avoid a character set in the meta tag

Specifying a character set in a meta tag disables the lookahead downloader in IE8. To improve resource download parallelization, move the character set to the HTTP Content-Type response header.

Read more

 

Minify CSS

Compacting CSS code can save many bytes of data and speed up downloading, parsing, and execution time.

 

 

Leverage browser caching

Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.

Solution:

"The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources:..."

I search google and found an easy way to solve this issue.

Put this code into your .htaccess file and upload it:

 

<FilesMatch "\.(ico|jpg|jpeg|png|gif|js|css|swf)$"> 

<IfModule mod_expires.c> 

ExpiresActive on

ExpiresDefault "access plus 30 days"

</IfModule>

Header unset ETag

FileETag None

</FilesMatch>


Now, wait few mins, and recheck your Google Page Speed Score. You will see your Page Speed Score will be improved. My Google Page Speed Score improved and jumped to 98/100.