• Thanks!

    Your email was successfully sent. Your enquiry will be dealt with as soon as possible.

    Required fields not completed correctly.

  •  
  •  

How to test a website and improve its performance

Getting back to writing after few days is really difficult some times. It requires a lot of motivation and a positive mind. Though our topic for today’s post is not about motivation for writing but I can really say that getting back to writing is difficult if you expect to produce a quality post. I have been away from writing for few days only but missed a post, in the meantime I could get some time that I thought of wasting behind a task that had really produced for me. The task is improving the page loading speed of my blog and adding some useful element. After doing all this exercise I must admit that maintaining beauty and size of a webpage is a truly challenging task. I had mentioned that I wasted some time behind this task only because I have been researching on performance of a blog or a website for most of the time and the time is actually more than the time I offer for creation of posts. Getting back to writing is and I thought of the writing topic. Without much of the thinking I could realize that writing a post about testing website performance and actually answering the question ” How to test a website ? ” can be the best possible topic and here we have a post about it.

Importance of better performance

Before we proceed to explore this topic in depth, let us just have a look at the importance of performance of webpages. Time is crucial for everyone and people have more choice but less patience. If a webpage is not loading properly, the reaction of visitor will be the same that we might to if happened with us. We will surely go for other options. To understand it better we can ask ourselves that why Google home page less fancy ?, Why Facebook home page has very few elements ?, Why Wikipedia is not having social share buttons ? and many such others. In all the cases the answer will be that they want this pages to load as quickly as possible. I do not at all mean that we must not have social share buttons but the point is making pages load faster.

Webpage speed is a very important factor in SEO these days and we know how important SEO is for us. So now it is very clear that website performance is a key point on our agenda.

Usage of mobile phones has also increased and making webpages load faster on mobile phone is also essential these days.

Performance basics for small blogs

Small blogs and websites have a different need and before digging in the high scale performance scenario we have to understand that small blog and websites have to be as per their need. The need of small blog can be maintaining good performance on  shared servers.

Shared servers are good to start with but not a very proper option as your traffic goes up. A shared server is basically a large machine but having many sites hosted on it. Shared servers do not allow custom hosting environment and have server configured to work with most common website needs. In some cases shared servers can handle hundreds of visitors at once and if resources are used by other sites on the same server, they may not handle few visitors.

In this case going for a shared host with plans for the CMS or blogging software you are using is essential and also the theme used must not requires fancy server configuration.

Selecting shared host is very important because if the host is allowing too many sites on a server, the server will actually perform very bad. Looking for a shared host with 99.99% up-time is really difficult because if other sites hosted on the same Servers have bad code or configuration or high traffic, you are going to suffer.

I recommend that the theme selected for hosting a blog on shared server must be very minimum and avoid fancy JavaScript and CSS. You will have all the possibility to use this later and on better servers. The recommended page size before adding any external elements can be 200 Kb to 300 Kb and on using any plugins or any thing else it can be up to 500 Kb to 600 Kb.

If you are hosting blog on Blogger hosting, you actually do not need to worry about it but still keeping page sizes low will help. Blogger blog are hosted in Google powered cloud with high scalabilty, performance and latency. I recommend blogger to start with blogging.

 

Understanding elements of a webpage and their contribution

When we analyze a webpage it is essential that we understand the elements of a webpage, a webpage in general have HTML, CSS, JavaScript, Images, Media and few other elements. HTML and CSS are generally moderate sized but JavaScript and images, media can be high size elements. In recent time with CSS3 in action CSS file too are high size and support fancy designs.

CSS3 though can be really create similar effect like JavaScript can create to some extent but with less size. However JavaScript is a client side script that is downloaded to browser and behaves as per the way it is asked to.

Images are a large part of posts but they are essential too. Images can be optimized before using them, optimization can help reduce image size by up to 80%. Many tools like Yahoo SmushIT are available for image optimization. Do bit search to find them. Other ways of loading images faster is using auto optimization service. Cloudflare offers image auto optimization service with their paid plan, many other CDN ( Content Delivery Networks) may also offer similar plans.

Images can be hosted on CDN like AWS S3 and used on your blog or website, so that they load faster. However this will be a paid affair and you may need it once you have some visitors.

Images can also be combined into CSS sprites so that many images are combined in a single images. This will require moderate skills but its use may not be possible on all themes. Services like SpriteMe can help in creation of CSS sprites.

For JavaScript, CSS and HTML combing them and minifying them is the best way to reduce their size and number of HTTP requests. HTTP request is a request that the browser makes to the server for each resource and irrespective of size the request serving takes time. Reducing number of HTTP request can significantly reduce webpage load time, this will be helpful on shared server to great extent.

CMS and blogging platforms like WordPress have plugins that help minification but it is not very easy to get it in action properly because a plugin is one and themes are different. Every theme can not work with minification and combining of JavaScript and CSS. A recommended way is to use free plan of Cloudflare with auto minification and caching.

Use of fancy stuff like sharing buttons of social sites can contribute a lot to webpage size and time. Though the JavaScript and other files used by social sites to offer social share buttons are hosted on high latency servers but still every element added will increase page-load time.

Use of sharing links than using share button can significantly reduce loading time and number of HTTP request. Recently the changed design of Mashable introduced new social share buttons that reduced page size by a big margin. Just understand that why a top site like Mashable needs to do this. Sharing links will do the same stuff and the only difference will be that users will be redirected to different page. JavaScript enabled buttons will allow sharing from the page itself but it is recommended that you let visitors share a page on Facebook rather than just liking it, both are different and carrying different importance. It is more likely that people will like your post if it is shared on Facebook.

Understand caching and the way it can help improve performance

Server configuration and caching is also important. In case of Apache HTTP server, mod_gzip and mod_deflate can help improve performance dramatically by delivering resources in compressed format. Caching utilities like APC, Xcache, eAccelerator, WinCache can help do the server side caching. Server side caching cab be also on disk caching without any of the mentioned component. Disk caching is best suited for shared hosting as it is more likely they wont have any caching utility installed. A quality plugin named W3 Total Cache is available for WordPress and it can handle many caching tasks.

Now to understand it further we should know that caching is at the server and at the client side. The client side cache is browser cache. There can be one more caching between these two and that is a CDN (Content delivery network) but only if its is used. CDN is generally used for high traffic websites or sites maintained for high performance. A free CDN like CloudFlare can be used by anyone.

The order of availability will be that a browser cache will always be there, server caching must be set by web host or by you on a configurable server and CDN is a choice. Though browser cache is always available but we have to compliment it by adding browsers caching policy and expires headers to our webpages. W3 Total Cache can do it really well in case of WordPress but I still recommend going for CloudFlare as it will be very easy to use and they have a free plan too.

 

Checking the performance of your webpages

There are many utilities that you can use t check the performance of your webpages and below are few recommended of them.

Pingdom – Pingdom FPT is a popular online utility that can check the actual user experience of your visitors when they visit your pages. It shown the element loading timeline and various other metrics. It also displays the key causes per bad performance and their solutions too.

GTmetrix – GTmetrix is also a popular choice and helpful because it tests webpages using Google Page Speed and Yahoo Yslow techniques. These techniques are used by both search engines to evaluate the speed of webpages. You can analyze how these search engines see and rank your pages.

Web Page test - Web Page Test can conduct specified number of tests using specified connection type. You can easily see how your site will perform for users of various internet data connection types.

Firebug - Firebug is a Mozilla Firefox web browser extension that has various utilities but also has the ability to test loading time, calculate number of requests, element and their loading etc. This tool can check page load using browser cache and disabling browser cache too, so you can see how a new user to your site will experience your webpages and at the type of connection you have.

Load Impact - Load impact is also a very unique service that can test the load bearing capacity of a web-server by creating number of users accessing the site from various locations in the world at the same time.

 

Everything that a webpage has will add to HTTP request and page size. The capacity  and performance of servers will depend on its hardware and software configuration. Caching is must in any case. So the final call is that w have to reduce the page size to least possible but have all necessary elements, we must use a web-server that meets our needs and we must have best possible caching techniques used.

 

*Image courtesy of photoexplorer at FreeDigitalPhotos.net