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.
## EXPIRES CACHING ##
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"
## EXPIRES CACHING ##
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 ….
