Page load time is serious business. Okay may not be for my old PhotoShop blog which I no longer maintain, but for your main-source-of-income site it is! In 2012 Amazon analyzed its data and calculated that a page load slowdown of just one second could cost it $1.6 billion in sales each year. That’s massive, in fact let me help you visualize that amount – Facebook bought Instagram for $1 billion same year. You can do your math now!
Anyway coming back to reality, I have this old blog that I used to maintain in my freshman year. It was terribly built over blogspot. I copy pasted some theme, bundled a bunch of widgets and marketed extensively among my peer which lead to some good traffic. That improved my google rank especially for one particular post on Godfather style poster designing.
Fast forward today, I accidentally visited my old blog and realized it was still getting consistent traffic. That was great! However first thing I noticed about my own blog was – how shitty it was! I checked my browser console only to confirm my blog was bleeding with javascript errors. So much so, even posts date were displayed as “undefined”.
Next thing I noticed was the painful load time. I felt like running out of patience with my own blog owing its terrible load speed. My blog had one share widget that would take forever to load. Then there were links that were not pointing to anywhere. Sadly I had no one to blame and I didn’t feel very proud of myself.
I would have left it on its state as I have no intentions of contributing there, however there is something every emotional about your first blog. Also the developer in me could not tolerate such mess of code and hence I decided to get my hands dirty cleaning it.
Say no to JavaScript errors
Here is how my browser console looked initially on page load:
That’s ugly. There are a lot of stupid errors that can easily be solved. As clearly visible from above screenshot my theme was trying to load some amazon affiliate link. An adware? maybe! after all I copy pasted theme code from some untrusted source. First thing was to remove any code I cannot understand . This was a time taking task but result was worth it. It took care of all javascript errors and cleaned my blog from all adwares and unwanted backlinks.
Widgets should not slow you down
I noticed my share widget would just take forever to load. An ideal solution would have been to fix it or replace it with a better light-weight share widget, however I went brutal here and chopped it off completely from my site. One less thing to worry about!
Bare minimum navigation
As mentioned above my blog had nav menus pointing no where. That was bad design, confusing and hence completely unacceptable. Fix – remove them or replace them with more suited menus.
Here’s how it looked initially:
“Post RSS” and “Comments RSS” are of least importance and surely does not deserve a place in top menu. “Edit”? Now seriously, how did it even get there? It was plane stupid. I removed all these three menus and replaced them with “About me” which link to About page of this blog.
UI glitches are disgrace
My posts were not able to show post date correctly, instead it would print undefined:
I looked into the theme code, the issue here was, the original author made an assumption about the date format returned upon query. Obviously his assumption was wrong and hence his clever attempt of parsing the result resulted “undefined” . If years of coding has taught me one thing, its say no to assumptions. I simplified the code and completely removed the parsing part to display simple date.
Say yes to page-breaks
All these changes did very little to improve my page load time since my home page was still fetching a lot of data. This made me realize my posts had no page breaks. Just for sake of clarifying: A page break is a marker in an electronic document that tells the document interpreter that the content which follows is part of a newpage. Or in simpler words enabling “read more…” option. This reduced my homepage size to a great extent as now posts only have a feature image and all other images go on their individual page and hence are not fetched in home page.
Results
That was a lot of work on a blog you don’t even maintain. But at the end I was rewarded with amazing result. Lets see:
Pingdom test result before my changes:
Pingdom test after my changes:
As claimed before, page load time reduced by half! And obviously you can see improvements in other areas too. Yoo…hoo!! 🙂
codefiddle 