I have always under the notion that page performance for big websites or websites that have a sole server and various resources like CDN and load balancers. So I wanted to know if this is true. I set out to try web page performance my blog. I just wanted to see how much I can reduce the roundtrip time of this blog. I will be doing the analysis and optimization in parts. So here goes whatever I have done till now.
Ok. So the first part of improving performance is benchmarking or knowing what is the performance currently.So I selected two most important or most visited pages in my blog – The home page and the Post page. Now I need to test the current performance of the site. So I used Webpagetest for the same. It gave me the roundtrip time taken for the pages on a selected ISP. As I am not currently thinking of optimizing the page at ISP level. It was fine for whichever ISP it is as long as I keep it the same though out the test. So the results is as follows:
- Home Page
- Post Page
I am starting with the obvious or simplest things to be done for performance.
- Remove what you dont need: Bring down your site to only things you need only. This is essential because we don’t want to spend time debugging a plugin or feature that is affecting performance which is not essential in the first place. So remove things you don’t need or things which you think is affecting performance. I removed:
- My ratings plug-in because not many people were using it to rate my blog.
- My mobile Statistics because I can use my ordinary Statistics to get me this data also.
- Add Expiry Header: Expiry field in the header of any item, may it be image, js, css says to the browser that the file doesn’t expire or change till the expiry date arrives. What this allows the browser to do is I can make the browser cache the file and hence eliminates the need for requesting for the file again till the expiry date. Thus when a user returns to the page the next day, why should the user again download all the theme images, js, css which hasn’t changed since then. So this reduces the round trip for a repeated user. So how to enable this? Go to your domain root folder and find a file .htaccess (if there is no .htaccess file create one). And insert the following line.
- Move all Static content to Cookie Free Domain: Once a domain has set a cookie in the browser the cookie will be send to the server on each request. This is really not needed. Why should be browser send me user cookies for static images, js or css? So what I did is, I moved my images ( just images for now) to a different subdomain(labs.sriunplugged.com). As my cookie is being set on the blog subdomain (blog.sriunplugged.com) it wont be send to server for the images request. Hence lets see the savings I got. My cookie size was 1.3Kb ( reducing my cookie size is in my todo) and I have 10 images on the template. So I saved 13KB from the request header ie 13kb lesser of data transfer needed for the page to load.
- Remove the Etag: According to YDN Blog, Etag is not really necessary as it really depends on the server and Inode of the file. And its not really necessary for the purpose its meant for. Etag is used for checking if the version present in the browser cache is latest or not. But this is done without it using Etag. The browser request header contains a parameter If-Modified-Since. This will make sure that the server returns the element only if its edited after then time stamp specified and if not edited it would send just a Header saying its not edited and browser can use the cached file. It this by using a HTTP Code 304 (Not Modified).
- Add a Favicon: Favicon is something that browser queries for to the server automatically. It should be located in the domain root as well. Its important to add a favicon as if not the request would be a HTTP 404 error. Having a small file as favicon is less costlier than having a 404. Hence create a favicon using a favicon creator and set it in domain root.
- Minify All Css and Js: Its a must to minify Js and Css as it removes a lot of unnecessary space from the file. This will cause the size of file to shrink to the needed amount only. YUI compressor is one way to do it. You can use the desktop version of it or there is many online implementations of it. After compressing replace the css and Js files with the minified ones. One thing to be taken care is WordPress has a comment on the top of the file explaining the theme name and author etc. This will be removed on compressing it. But this is essential for displaying the css or js inside editor option in wordpress. So after compressing put back this comment back.
- Gzip everything possible: You can Gzip all text contents to reduce the size of them. This is useful only on css,js and html. It wont really give you good results for images as they are already compressed by their specific encoding. Do switch on compression. I used an Apache Directive mod_deflate this has to be enabled by the apache(which can be found out by phpinfo() function). If its enabled at apache level you can Gzip all the files in a domain by inserting the following commands in .htaccess in domain root folder:
Well that concludes the first part of blog performance. Now lets see the performance improvement received by the above improvement.
- Home page
- Post Page
Well let the numbers speak for itself. I am collecting knowledge and trying out various methods for my next part of performance improvements on the blog.Currently I am considering the following:
- Minify the inline js and css
- Combine css,js,images
- Reduce cookie size
- Look into DB issues and check if mdbm can be implemented.
- Look into installing performance measurement tool, boomerang and try to gauge how its performing in the real world.
Please leave me a comment on other things I should look into and how the improvements I mentioned above worked for you.