How to speed-up your webpage

Last weekend I was working on a mobile web application, the site taking time to load on mobile browser, so I was looking for a solution to improve the webpage speed.

How we can increase  the speed of a web application

1. Compression: There is compression techique, Gzip compression.  Gzip compression can reduce the html, css, javascript file size upto 70%.  And one good news is nowdays most modren browsers support the Gzip compression.

The compression is very simple, you just have to edit the .htaccess file. Add the following code to your .htaccess file

# compress text, HTML, JavaScript, CSS, and XML
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# remove browser bugs
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

Now everytime when the web page will be refressed, browser will receive the compressed file and it will surely improve the application’s speed.

2. Caching: If we can leverage the browser cache, it can improve the speed, as most of the files are just static, like images, CSS, PDF’s, JS, Docs etc. We can cache those files on user’s browser. Once these files are cached, instead of a new request to server, browser will just fetch the file from local cache.

Again to implement this there is a very simple solution, just edit the .htaccess file and add this code

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg "access 1 year"

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

Hope this will help most of you. The latest firefox addon can actually show you whether your page is compressed or not.