AddThis and WebPerformance: taking my page load time from 4 seconds to 1.5 seconds

Recently I have been getting more and more into web performance. I have been looking for ways to make my faxdocs.tv site faster and more responsive. On the side, I have been looking at doing the same with my personal sites. These include technovangelist.com, envl.pe, and chromagenic.com. I have also recently setup a test Drupal site using PhpFog (a great way to get a free copy of Drupal and ThinkUp going). 

So how does one get into web performance and what are the resources out there. Well, ask anyone who is in the business and they will mention one name. They might list a few others, but at the very least they will mention the name of Steve Souders. He has two books out there on the topic and even though the older one is 4+ years old, its still the go-to reference on the topic.

High Performance Web Sites describes 14 specific rules of what should be done to speed up web sites. Some of the steps are easy to achieve, others require a bit more work. Most of them seemed kinda obvious, but almost none of them had been implemented by me. Its available on Kindle where I have my copy today. His newer Even Faster Web Sites goes into even more detail about three specific categories of areas to improve on. At first I thought the second book was an update of the first, but after reading them, I can see that both are worth having. Unfortunately the newer version is not available on Kindle from Amazon, but I ended up buying the PDF and MOBI versions from O'Reilly so I could load it up on my Kindle.

Both of these books are very interesting, especially if you are just getting started, but do you need them? Well, no. It turns out I already had access to a lot of the information and to a great toolset on my laptop, but the books made for interesting reading on the 60+ hours of flights I have been on in the last 4 weeks.

You may have the right tools too. They are built in to Google's Chrome browser. Just bring up the developer tools and take a look at the Network tab. There you will see a chart often called a Waterfall chart describing how long each component takes to load up. I didn't have to know a lot of details to see that there are just a few resources taking most of the time on my sites.

For this article, I am just going to take a look at this page on technovangelist.com. I loaded it up and opened the dev tools to the Network tab. At the bottom of the page I could see that it took nearly 4 seconds to load. I repeated this 5 times and saw that the average was about 3.9 seconds. Scrolling up and down in that list I noticed that a lot of social media icons were getting loaded. Scrolling down on the page I saw that under each post I had added a widget from AddThis which offered the ability to quickly +1 with Google, and a few other things. On the lower right of the page, I had links to all my accounts on G+, Flickr, LastFM, and more. And each of those had an image next to them.

So my first step was to change the SquareSpace Social Widget to display text only instead of text and an icon for each destination. I then logged out and refreshed the page 5 times to see that the average had dropped down to 3.8 seconds. A tenth of a second was good, but I was actually hoping for more. 

I noticed that the Google Plus One widget for AddThis was loading up some javascript 10 times, once for each post that was shown on the Technovangelist home page. So I went into the Blog configuration on SquareSpace to modify the AddThis widget. I simply removed the Google part of the widget, logged off, refreshed the page 5 times to get an average load time. This was the kind of improvement I was hoping for. It dropped to 2.15 seconds (with a fastest time of 1.9 seconds).

That was a big improvement! So what happens if I get rid of AddThis altogether? How much faster can things get? I logged in, removed any mention of AddThis, logged out, refreshed 5 times. Now I was down to 1.5 seconds (with a fastest time of about 1.4 seconds). Wow! 

So I guess the question I should be asking myself is whether a Google Plus One button is worth it. Do I want my users to have to wait 2.5 times as long, just so they can click a button to rank me higher on G+? I don't think it is worth it.

So in summary, I was able to look at my SquareSpace hosted site for just a few minutes and shave a huge percentage off of the page load time for the few visitors I get. I'll do the same thing for some of my other sites and share my findings here. Although there is quite a lot I won't be able to do since SquareSpace is a bit of a black box, I can clean up what I add myself. Hopefully you found this interesting and if you have any comments, please leave them below.

How To Add Custom Fonts To Your Website

When I read a webpage, an interesting font almost helps draw me in to the page. I don't know what it is. Princeton scientists have found that harder to read fonts can boost learning, so maybe thats why I take in more at these sites. AListApart, ILoveTypography, and NewYorker use fonts in interesting ways to keep me engaged.

Does that make me weird? Or does everyone feel that way? The problem is that the standard fonts available to most browsers is a bit limited. Until recently, I thought the only way around this problem was using the services of TypeKit. After you insert a special script tag into your website's header, you have access to an enormous library of interesting fonts. And those fonts will look the same on any browser too. But that freedom and creativity comes at a cost.

If you are happy with just 2 fonts, then that cost is nothing, but to go crazy you are looking at 100 bucks per year. I tried it for a while and had fun with it too, but then I stopped. I'm not sure why, I just went back to the standard fonts. But this morning I decided I wanted to see a change in style on the technovangelist.

This time I looked into a new service offered by Google. Google WebFonts to be precise. Now you're probably wondering why Google is into typography. After all, their main website (You don't need me to link to that, do you?) is pretty bare. But they keep expanding into new and interesting areas and this seems to be inline with their free website hosting at Google Sites, free blog hosting at blogger.com, and free web application hosting with Google App Engine. And like those services, Google WebFonts is also free. The number of fonts available doesn't match the more established TypeKit, but they seem to be adding new fonts every month or so.

So how do you use Google WebFonts? Well, I guess there are a few steps. First look through the directory of fonts and choose something you like. Click on the font to get a more detailed preview of the font. Then click the Use This Font link. Here you get a simple set of instructions for including this in your site. It basically comes down to adding a link tag to your header, then adding some custom CSS.

I use Squarespace, so in the website management panel, click on Website Settings under Structure. Then go to Code Injection and find the Extra Header Code. This is where I already have codes for Woopra and Google Analytics. If you just pasted the link line from the WebFonts site into this area, Squarespace will have a problem with it, so change the > at the end to a /> and all will be good. Now edit your CSS and you have custom fonts.

It works like magic!!