[VIDEO] 5 tips to speed up your website? These Web page optimization tips will give Sonic Boom

Hello everyone and welcome to this tutorial on “How to speed up your website? Web page optimization tips” PART 02.

So, in my last post on website optimization, which is "10 tips to speed up your website? Web page optimization tips – Part 01", I described 10 ways to speed up your website. If you have missed those tips, I think you should not. Today I will be highlighting 5 more ways to actually give a Sonic Boom to your website. So, lets start.

Bored with the texts? Watch the video instead.

1. Leverage Browser Caching: Every time an user visits an website, the browser has to download a number of CSS, JS and image files which costs data that ultimately mean waiting. Browser caching enables the browser to store these files locally on user's computer so that the next the user visits the website the browser will load the locally saved files instead of downloading them again. This reduces the speed so much incredibly that you will get stunned if you haven't experienced it yet. To enable browser you have to add following lines of code into your .htaccess file.


ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"


So how this works? The code runs only when you have mod_expires.c module running. In line 4, for example, any files of type JPG will be cached or stored in user's local computer for 1 year. This means, from the when the user will first visit the site to the next 365 days, the image will be downloaded once and will be displayed again and again from user's computer. However, if the user cleans his browser cache, or uninstall the browser or the computer, the cache will be gone. If you have any more file type, you can add them just like others.

2. gZIP Compression: When browser requests for a website, the server has to sent all the output HTML and CSS, JS files to the browser. If the files are bigger then it will obviously take more time for the browser to finish downloading the files and display the output to the user. Gzip is a compression Technic that dramatically reduce the file size of the files that the server will send to browser. Gzip works web files so toughly because these files contains texts that repeats a lot. Gzip replaces repeated text temporarily. It has been found that gZIP may reduce file size upto 70%! Enabling gZIP is quite simple in your Apache server. Just add the following code to your .htaccess file.

  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent

However, enabling gZIP will require you to have mod_deflate.c module running. I am not describing the code, let me know your query, if any.
3. Accept Vary Header: This is very important. Sometimes the browser that requests a page lives behind one or more proxies. It may that the server is sending content in gZIP compressed format and the proxies are misinterpreting the compressed version as they don't work with gZIP well. There can be some more examples, however this is how you setup Vary Header in your .htaccess file

    Header append Vary: Accept-Encoding

4. Keep Alive: Keep alive enables the browser to make one TCP connection with the server and download all resources that needs to be downloaded from that server. Its like, you have to make 4 orders to a shop. So you by using Keep Alive, you make 1 phone call and order 4 orders and then cut the line instead of making 4 individual calls for 4 orders. To enable Keep Alive add these lines to your .htaccess file

Header set Connection keep-alive

5. Remove query strings from static resources: As we can turn on browser cache, we should know that browser will not cache a file if the link to the file is containing any query variable. For example, http://www.mysite.com/style.css?v=2 will not be cached by the browser though you wanted to have CSS files being cached, this link contains query variable "v", so the browser won't cache it. Anyway, there is nothing to code, just remove these query variables from files to be cached.

Alright guys, so try to implement these changes on your project and see the difference. I am sure you will say WOW! Let me know how your site feels now ....

Google Recommends Recommends


Contact Us