Speeding up your website

Site speed is very important for any website for visitors to return back. It is evident that people loose interest and leave if the site is not stable or not fast enough. Search engines like Google penalize websites which are slow and thus lowers the rankings.

There are few tips and tricks to make your site faster and more reachable. These are very small minor tweaks which can change the performance of the website significantly.

Expires Header

For all your static resources such as CSS, JS use appropriate future Expires header, whereas for all dynamic resources you would use Cache-Control headers.

On apache, you could add something like this in your .htaccess or virtualhost configuration;

ExpiresDefault "access plus 1 year"

You can also further customise;

ExpiresActive On

ExpiresByType text/html "access plus 1 day"
ExpiresByType text/html "modification plus 1 day"
ExpiresByType image/jpeg A2592000
ExpiresByType image/jpg A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/css A2592000

On nginx you would do something like this;

expires 24h;

Compress Components

Lots of web clients/browsers now support compression, a popular method currently used in gzip. They indicate this header in the request

Accept-Encoding: gzip, deflate

Webserver further responds with the following header upon this request

Content-Encoding: gzip

On apache you configure this by doing the following in .htaccess or virtual host configuration.

SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/css application/x-javascript text/x-component text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon

For older browsers it’s suggested you add the following;

#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

On nginx, you would do something like this;

gzip on;
gzip_min_length 1000;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain application/xml;
gzip_disable "MSIE [1-6]\.";

Just by doing the above alone, there will be significant performance improvements to your website. There will be at least 50% bandwidth gain if your site contains lots of images/static resources.

Lossless Compression on Images

Often when images are saved (even though you optimize in photoshop), they sometimes contain some irrelevant information which adds certain space in the image file size.

There are few techniques which enable you to achieve lossless compression.

If you are using imagemagick, you could resize by adding following options to “convert” command

-strip -compress Lossless

Save images as png if appropriate. use jpegtran on your jpg images

jpegtran -copy none -optimize -perfect

You could also use Yahoo smushit to resize your images which does the lossless compression for you (though it does add some additional manual work).

CDN

To further improve the performance of the site, you can move all your static resources to a CDN (Content Delivery Network). CDN not only allows parallel downloading of your resources to make your webpage load faster, it also delivers the content from the servers which are faster to your network.

Akamai determines where to send you based on the location of your DNS servers, the network quality between you and the edge nodes, and the likelihood that a server contains a copy of the file being served.

There are lots of CDN services available, such as Amazon Cloudfront, MaxCDN and Rackspace Cloudfiles to name a few, all of these come with their own api, and there are lots of plugins/extensions for popular platforms to use with these services.

You can also create a self-hosted CDN, however using a popular CDN is a wise choice. By using a CDN you are freeing up more server resources to your webserver which can significantly improve your dynamic page serving.

 

 

Here are few ping statistics

Pinging a CDN from US
ping cdn.sailusfood.com
PING a98.cf.akamai.net (63.84.95.8) 56(84) bytes of data.
64 bytes from host8.factsmgt.com (63.84.95.8): icmp_seq=1 ttl=54 time=56.0 ms

Pinging a Server hosted in US from US
PING www.sailusfood.com (173.45.229.34) 56(84) bytes of data.
64 bytes from 173-45-229-34.static.cloud-ips.com (173.45.229.34): icmp_seq=1 ttl=47 time=41.1 ms

Pinging a Server hosted in US from Australia
ping www.sailusfood.com
PING www.sailusfood.com (173.45.229.34) 56(84) bytes of data.
64 bytes from 173-45-229-34.static.cloud-ips.com (173.45.229.34): icmp_seq=0 ttl=45 time=210 ms

Pinging a CDN from Australia
ping cdn.sailusfood.com
PING a98.cf.akamai.net (144.135.8.203) 56(84) bytes of data.
64 bytes from 144.135.8.203: icmp_seq=0 ttl=52 time=5.24 ms

Minifying

Minifying js or css is a good idea, and you wouldn’t believe how much space is saved by minimizing, further decreasing the file size which results in faster downloads for clients. Where possible minimize the number of HTTP requests and combine js and combine css.

You can use tools such as YUI Compressor to minimize the javascript or css.

Deferring Javascript

Most of the websites use javascript now and we have habit of putting them in, If you have javascript includes in head tag, these blocks the loading of the page thus clients sees a blank page until the page finishes loading.

Most of the javascript includes can be moved to the bottom of the page before the end of body tag.

Tools

There are lots of tools available now to check the page speed and give you suggestions to improve the performance.

Some of the tools listed below

YSlow

A product of Yahoo!, yslow This is a firefox extension which is hugely popular, analyzes your page and gives suggestions for improvement. This is one of the first page-speed tools and performs very well. Provides a waterfall graph of the loading of resources. More performance techniques are available here

PageSpeed Online

PageSpeed is a product from Google Labs. This gives a detailed explanation on each element of your page and provides suggestions for improvement. Lots of graphs and analysis.

WebpageTest

WebpageTest is a cool online tool which can emulate the loading of the page and also gives lots of statistics by comparing the previous analysis.

If you are using wordpress, install W3 Total Cache plugin which applies most of these rules, if you use a customised or another CMS you may have to an find appropriate extension or configure manually. The time you spend on optimizing truly earn rewards.

More optimisation and server scaling techniques will be posted later, watch out for this space.

We at Medhaa have recently applied these techniques on www.bicyclestore.com.au, www.firstclass.com.au and www.sailusfood.com and they see significant improvements in performance and clearly see increase on their leads and sales.

Do you want your website to be optimized and scaled for millions of users? Contact us.

Leave a Reply