Speed up page loading & save bandwidth by reducing page size

Yesterday, while fixing some browser compatibility issues of my new theme, I was surprised to know that my homepage was over 400 KB in size and took more than 30 seconds to completely load with my DSL connection. More than 80 files, including images, javascript and css, were embedded within the page.

I decided to optimize the page and found that the following actions can be taken to decrease the load time.

• Reduce the number of requests
  First of all, I opened up my theme’s stylesheet and found several unused classes with image backgrounds and bullets. I removed those classes and removed all references to non-existant files.
• Reduce the total download size
  I tried removing unwanted markup and html comments left by my theme and plugins. But that did not create much difference in size. Next I converted some of the images from PNG to JPEG format. This reduced the total size by over 30 KB. But most of the page size was due to the embedded Javascript and CSS files. For example, the prototype javascript library is over 90 KB in size, which on compression get reduced to 22KB. Hence I used Apache Module mod_deflate to compress my files dynamically for gzip enabled browsers. I used the following code in my .htaccess file to compress files of the following mime types  – text/css,  text/html,  text/plain,  text/xml and application/x-javascript. For this to work on your server, you should have mod_deflate enabled. Most webhosts have this enabled. If not, you may also try  PHP mod_gzip or ZLib compression.

  # Insert filter
  SetOutputFilter DEFLATE
  
  AddOutputFilterByType DEFLATE text/css text/html text/plain text/xml application/x-javascript
  
  # Netscape 4.x has some problems...
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  
  # Netscape 4.06-4.08 have some more problems
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  
  # MSIE masquerades as Netscape, but it is fine
  # BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  
  # NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
  # the above regex won't work. You can use the following
  # workaround to get the desired effect:
  BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
  
  # Make sure proxies don't deliver the wrong content
  Header append Vary User-Agent env=!dont-vary

• Cache files client side
  Almost all browsers have the ability to cache files on your computer for faster loading. If we set the expiry time of the file, the browser will check for updated content only after the specified time. We can use the Apache module mod_expires for this purpose. The following code will request the browser to cache all files for three hours. This can make the browser download the file only once during a session, but will update the content on next visit. You may also use the ExpiresByType directive to set different time for images, javascript and css files.

  # Cache all files for the next 3 hours
  ExpiresActive On
  ExpiresDefault "access plus 3 hours"

Results

The final result was great. The homepage size got reduced to 159 KB, which was less than half of the original size. The page load time also reduced to 19.3 seconds from about 32 seconds.

The load time and page size were calculated using the Web Page Speed Report tool from www.websiteoptimization.com.

Make sure you backup your current .htaccess file before trying the above code. So that you can revert back if something goes wrong.