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.

Screen Shot 2012 05 08 at 7 38 06 PM

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.

Do I Spend Too Much Time Listening To Podcasts?

I listen to a lot of podcasts. And I do it all the time. This morning I couldn’t sleep, so at 5 I started listening to some podcasts. I am sure that’s bad at all sorts of levels, but I am addicted. So I thought I would share with you my current list of absolutely required podcasts to listen to, plus the new ones I am starting to get into.

First off, if you are relying on iTunes to get your podcasts, then wake up and discover Instacast. There is an iPhone and iPad version and they are fantastic. The only caveat with the two versions is while they claim to sync, they don’t. But I still love them.

OK, so what are the required podcasts? Here we go, roughly in order of best to…well…not best.

The ones I listen to as soon as the new episode comes out

You Look Nice Today – I am so excited that “That’s Babies” is no longer the most recent show. This is Merlin Mann, Lonely Sandwich, and the other guy at their best! Razzledazzle!

NPR Foreign Dispatch – This is my #1 source of news

Javascript Jabber – The most perfect show on Javascript. I keep re-listening to the one with Paul Irish.

Whisper Cities – Only 3 episodes with 2-4 months between each, but great stories about urban architecture. Escalate makes me want to discover the metro in my own city.

99% Invisible – I wish they did this more often. Similar to RadioLab in style and 100% perfect.

Roderick on the Line – Laugh out loud conversation with Merlin Mann and someone else.

The Javascript Show – Weekly rundown of the interesting projects in the javascript world

BBC World Update – This is my #2 source of news

The Moth Podcast – Some of the most amazing stories I have ever heard. 90% excellent

WNYC RadioLab – I don’t think I have heard an episode on here that isn’t spectacular. Loop the Loop was definitely my favorite!

Spotcast – I started at the beginning with the Lonely Sandwich episodes which were fantastic and they just get better. An interview show with filmmakers.

Founders Talk – Great interviews with interesting people

Six Pixels of Separation – Amazing marketing podcast that always keeps me interested

Marketing over Coffee – Right up there with 6 Pixels for the top two marketing podcasts to keep up with

Scruffy Thinking – Hard to describe, but the host has had a pretty interesting career

Love & Radio – Think 99% Invisible and RadioLab, then cover the kids’ ears.

Iterate – More web dev along with mobile dev in there as well

Creatiplicity – Creative Development

Mac Power Users – There are some things they say that are annoying, but generally this is one of those top notch shows. The Workflows shows are my favorites and the absolute best episodes of any podcast I listen to are the Merlin Mann Workflow shows. OMG, rocked….my…..world!!!!

Triangulation – Great interviews with interesting people. The Capn Crunch episodes were some of the best, but they are all good

Foundation – Great interviews with entrepreneurs

Freakonomics Radio – Absolutely Fascinating annecdotes about the world we live in

Content, Structure, & Style – I have a few Squarespace sites and this podcasts talks about whats new in that world

The B&B Podcast – Interesting conversation between two interesting guys

Core Intuition – Life as an independent developer. I really wish Manton and Daniel would get back to it. I loved this one.

The Changelog – Weekly rundown of open source projects

Forrst Podcast – Seems to be on a hiatus, but hopefully it will come back. Great rundown of web dev & design news

The ones that are mostly good

The Critical Path – Horace Dediu usually comes up with some interesting analysis that makes me want to visit the site to learn more.

DigitalFilm.TV Digital Convergence – Great filmmakers podcast. Sometimes too much of a lovefest of Canon, but when they talk more generally it gets great.

This American Life – The NPR show. Its great, and I have nothing bad to say about it and it should be spectacular, but I find myself listening to the others at the top of this list first

Above & Beyond: Trance Around The World – Great stuff for those long Plane/Train/Automobile rides

iDeveloper Live – Mac dev focused

The ones I keep around just in case

Build & Analyze – Interesting, but I really wish they would edit it down

Back to Work – Like most 5×5 shows, this is just way too drawn out. But Merlin Mann is a godd and I will listen to anything with him (even though I get him mixed up with Ze Frank)

The VergeCast – This should be good, but I keep finding myself skipping forward searching for a good bit

The Bro Show – Like 5×5, many of the 70Decibels shows sound too similar. Pick one. I might drop this one soon.

The ones that I just heard about and have a lot of potential

512 Podcast

The Industry

Mikes on Mics – Mike Vardy’s new thing so could be good

Inhatko Almanac

Shop Talk

Non Breaking Space – Listening to this now and its about to make it into the top list.

How To Get Started With Pusher.com

Last night I was listening to one of my favorite podcasts called The ChangeLog. Its a weekly show covering new Open Source stuff. One of the sponsors is a company called Pusher, but even after the ad, I wasn’t totally sure what they did. So I checked out their website.

At first glance of the site I still had a hard time understanding what they did. It looked like they provided some sort of communications layer between the browser and a server. They have all sorts of case studies, and a few examples, but after that, it was still hard to figure out what function they really actually performed.

So I started playing around with it, getting a free account and running through a sample or two, then scouring the web for other examples. After a while I thought I got it, but I was still wrong. It wasn’t until a few too many hours invested that I got close to grokking it. And it turns out that its really simple, and its extremely cool!

What Does Pusher Do?

Basically, its a way to get data from the server back to the client asynchronously. Sure there are other ways to do that, but this is so darned simple to implement and it just works. You could use it to update a chart on your website with new usage stats, or implement a chat service, or all sorts of other things. Maybe even initiate a call to a customer using Twilio as well.

What Does It REALLY Do?

The chat was the first example I read and I think thats why I got confused. When I think of chat, I think of client to client. There might be a server somewhere in the middle, but its usually just there to initiate the conversation. And I assumed that Pusher was that server. But thats not what happens.

Your client, which is probably a web page, subscribes to a Pusher channel. You set up that channel from the server (or client). Messages are sent on the channel and any subscribers will see the messages on that channel (assuming permissions allow it, but my server assumes there are no secrets).

Now what I didn’t get till the last minute was that the client cannot submit messages, only receive them. Instead, the client has to contact the server on its own. I used a jQuery ajax post to do that. My server then parses the request and sends a message on the channel, which my client then deals with.

How Do I Set It Up?

To set up a Pusher app, you need a server. The server doesn’t have to be complicated, but you do need a server. In today’s world of cloud services, a server no longer means a big loud rack mountable monstrosity in the closet. In fact in my case its a mysterious service in the ether called Amazon Web Services. I could just have easily used Heroku, or PHPFog, or all sorts of others, all of which have free base packages. So I setup the simplest possible server application I could come up with.

For me that application is a NodeJS based chat application. Here is the complete source code listing for my server.

Really! That’s all there is! Now this is NodeJS and its written in CoffeeScript, because thats just how I roll these days. The first two lines should be obvious, but node-pusher can be found at https://github.com/crossbreeze/node-pusher. Just run npm install node-pusher to get it installed on your server.

Then comes the key, secret, and appId. You can get those when you sign up for the free account at Pusher.com. Create a new pusher object by passing it your key, secret, and appId. Then I create a few vars to store my channel, event, and some initial data. You can call your channel and event whatever you like. Its just a way for you to reference it in your client and server.

The trigger function is what actually sends the message on the channel as a specific type of event (again, you name it). The data can also be whatever your want to pass. So in my case I listen on port 8888 and anytime someone passes a query string like from=matt&content=ChatMan, then the server triggers an chat message on a channel called ChatChannel. Anyone who is subscribed will see that message.

What About The Client?

If you thought the server was easy, the client is even easier. First, lets look at the HTML. As you can see its really basic. Just a text box to enter your name, and a text box for a message to send.

My html needs three javascript files: jQuery (just because I am lazy), Pusher (hopefully that one should be obvious), and my own local pusher code. So lets take a look at that code:

Again, super simple! I have moved my server URL to localhost so that you can test it with minimal fuss. Basically what happens is that whenever the text changes in the text box with ID of InputText, I post to localhost with a special query string. The fact that its going to a page called chat means nothing. That page could have been snufalufagus and it still works. I added a From name text box so I could easily test between two different browsers and see which was which.

Below that is the Pusher object which is initialized with your key from Pusher.com. Then you subscribe to the channel. This needs to be the same as the channel name on the server. Finally I bind an event handler that tells the webpage to update whenever a new ‘chat’ message comes in.

Just 50 Lines Of Code?? Really?

Really ! Thats all there is. And I was a bit wasteful in a few spots. Now of course, hopefully you see where this could be improved. Like making it not look like it does. I could also subscribe to multiple channels, or multiple types of information. Maybe the chat window shows chat stuff, but I also get a file saved to localStorage. Maybe this is actually running in an Adobe Air app and the chat is visible, but I receive keys and passwords as a separate type of event which gets stored directly in the Encrypted Local Storage area.

Thats actually my plan. I have a site I created for work called FaxDocs.tv which hosts videos for our products. I want to add a chat window to parts of the site. I already created a management app we use internally that uses Adobe Air. The reason I did that is that I run on a Mac and my colleagues are on Windows. So now I can add the chat functionality to the Air app. When one of us has the app open, then the option for a chat is available on the website. The end user doesn’t have to use it, but they can.

As I complete more of that app, I’ll share it here. Until then, have fun with Pusher. I certainly am.

Is Mr.Reader Poised To Topple The Empire of Reeder?!?

Mr Reader Icon

I loved Reeder. I still use it on my Mac and on my iPhone, but I’ve pushed it aside on the iPad. Now my favorite RSS reader on the iPad is called Mr.Reader and oh my god, is it awesome or what. Its got all the features you need in an RSS app, but there are just a few that make it magically good and I am so happy that I found it.

Mr Reader Main Screen

Yes, I’ll admit it, the look of the main screen is terrible. Its one of the ugliest main screens out there. But thankfully I don’t stay on that screen long. I almost always just click the item at the top and get to switch to the article view which is just absolutely wonderful:

IMG 0245

One of the things that annoys me the most about Reeder is that the controls are on the left side. They are always over there and I cannot change them. So to go to the next article I either have to do the awkward push up on the screen or cross the screen with my right hand to click the down arrow. Ugh. How can they solve this? Do what Mr.Reader is doing, let me choose where that control bar goes. In this screenshot I have it on the right, but using that button on the bottom, I can move it down or to the left. Perfect.

Plus those arrows to move up and down are just rough indicators. As long as I tap the arrow or above the arrow (but below the other buttons) it goes to the previous article. As long as I tap the down arrow or below, it goes to the next one. Perfect!

IMG 0242

But even though that was one of the main features I got Mr.Reader for, I don’t use it much. The reason is that they figured out an even better way to move around. If you put your thumb on the bezel and drag inward from the left or right, some other buttons drag in with the thumb, like the screenshot to the right. Let go and you go to the next article. Drag up to the button above and it goes to the previous. Wow, that is too cool!

There is one more feature however that makes this app such an important part of my workflow. Often I want to tweet about something I read. But I want that tweet to go out on a schedule so I use Buffer for that. Well, in Reeder, I could click the little services button to send an email. I could then choose the add to buffer email address and Buffer would add it to the queue. Not too tough, but having to type in that address was a bit of a pain.

EmailToBufferFromMrReader

MrReaderServices

Mr.Reader solves this by letting me creating a shortcut for the add to Buffer. Now I click that same services button but instead of having to fill out the details, I just choose email link to Buffer. As you can see, I have a few other choices as well and they are perfect for me. Like adding to my Pinboard account, adding to OmniFocus on my iPad, or emailing the whole article to my personal email. I don’t actually use that last one much since whenever I star an item I get it emailed to me automatically. You know how to do that? Maybe in another post…

My one wish for Mr.Reader is that it did real integration with BufferApp.com. Now that Buffer has an API, it should definitely be added to the list. I also look forward to an iPhone version.

There are other great features in this app, but the thumb-pad and the email link to a specific account are probably the top two that made me switch. I think it’s definitely worth checking it out and it’s so cheap there really is no excuse not to look at it.

How To Download A Secret and Save To An Adobe Air ELS

One of the problems I had to solve with my recent management app was about how to store secret information. My app needed to have access to an API key, and a special username and password. All three of those things were items I would rather keep out of my user’s hands so storing it in the Javascript that is part of the Adobe Air app was not a solution. But I found another way.

Let me explain the plaintext part of the problem. With any Adobe Air app, you can very easily look inside and see all source Javascript in plaintext. Since all the logic in my app is in the Javascript, thats a problem. So I decided to store that secret info on a secured page on a Squarespace site. If you type in the right login, you can see the page (assuming you know where to look).

The information stored on the page is in a JSON string, which is then encoded with Base64. So I set up my app to login, download the information, decode it, parse the JSON, and finally store the info locally using the Adobe encrypted local store. Almost all of that is done in that one ajax call.

Take a look at the source code below. It’s actually written in CoffeeScript, since thats just how I roll. If you are unfamiliar with CoffeeScript, take the few minutes to learn it.

Even if you aren’t using Adobe Air, this is a valuable little snippet. Change the last three lines to do something else with your newly found secret info. Not using Squarespace? Well, that will take a bit more work to get the URL and parameters just right.

The benefit of this is that I don’t have to do much to manage who has rights to the app, I just have to manage who has rights to the page on Squarespace. Also, I stored a hash of the users password in the local store, so on the app’s startup, I just compare the hash of the password the user enters to the stored hash to verify the user is valid and has access to the info.

I am sure there is a hole in here somewhere, but I think it is good enough for my purposes.

Scratching An Itch In The (Adobe) Air

Recently I needed to solve a challenge that came up at work. Actually, it was a series of challenges. First, we needed a better way to display our/my videos. Then we needed a better way to submit and review those videos. We also needed a better way to report on how people consume them. It turned out to be quite a big challenge.

In the past, I didn’t think we needed a solution. YouTube provided the answer for everything. YouTube was the primary host for our videos. It just made sense to display our videos on YouTube as well. We also provided links and embeds of those videos on our blog, as well as on some other web properties.

But every now and then, YouTube changed the formatting for its pages. We have minimal control over the look of those pages. And organizing videos is always a challenge. Our customers have a hard time finding the right video because we don’t have a great way to categorize them on the page.

Reporting on video views is a strong point of YouTube, but we can’t easily see what parts of the videos engage viewers the most. I think I know what people enjoy, but I could be wrong. And the YouTube analytics don’t provide me with good enough tools to figure that out.

So we spent a good long time trying to find a better solution. And it’s ended up being one of my big projects at work for the last few months. The result is still in process, but I am pretty happy with where things are going.

For our customers and partners, it starts and ends with a single web property: FaxDocs.tv. FaxDocs is a list of videos that we can easily put into the right categories. And it is completely under our own control. But behind FaxDocs is a site called Wistia which actually hosts our videos.

Wistia isn’t going to be the solution for everyone as it does require payment. But as soon as you outgrow what YouTube provides for free, Wistia is a great next step. With Wistia, we control the video experience. We have access to great reports that show which parts of the videos are the most engaging. And there is another amazing benefit to using Wistia we did not expect at the beginning. Unlike YouTube, Wistia is not blocked by most corporate and international firewalls.

We already see an increase in views around the world. Administrators in companies that block YouTube are watching our videos. Potential customers in China are watching our videos even though YouTube is not accessible. Looking back, this is enough of a benefit to justify the subscription costs to Wistia.

FaxDocs itself is hosted with the massively popular web hosting company called Squarespace. Squarespace provides a great foundation with enough flexibilty for what I wanted to do.

The downside to using a custom platform as it is now is that my system is a bit brittle. I need to post things in a way that is just right. And I need to refer to a set of instructions with every post. I hate that. It was the same with YouTube and the result has been a bit of inconsistency as to how we post videos. So now I am working on the next stage of FaxDocs. I am creating a management app to make it easier to post, get statistics, and more.

I spent a bit of time thinking about the right way to deliver this management app. I cannot build the app just for me. There are others in the organization that need to work with it. I use a Mac, but everyone else is on a Windows PC. I would rather the app not run on an external webhost. Due to the resources available to me, that means it has to be a desktop app. And a desktop app that doesn’t require installing additional wierd services.

So how can I solve all of those needs? It turned out to be a really simple solution. Adobe Air. I have worked with Adobe Air for the last week now and I am really surprised at what it can do. That’s not to say that Air makes absolute sense all the time. I had a few challenges in building my app for Air that I had to overcome. And I am not developing for Adobe Air in the traditional way, so many of the online articles on the topic are not exactly written for me.

What is the traditional way to write an Adobe Air app? As far as I know, it is to use something like Flash Builder. While I do own Adobe Creative Suite 5.5, the version I have is Production Premium. This does not include Flash Builder. But it turns out that you do not need that to build an Adobe Air application.

My Adobe Air development environment involves two main tools. The first, and very important, tool is the free Adobe Air SDK. This includes the compiler and the debug utilities which I use a lot. The second main tool is a text editor. You can use any text editor you like, but at the moment I am totally loving SublimeText 2. If you are new to Sublime, also check out Jeffrey Way’s Tips & Tricks at Nettuts.

I am going to walk through the process for building an Adobe Air app here on Technovangelist. I haven’t written the articles yet, but I would expect the series to take quite a few posts. I hope you’ll stick with me as I write all the posts. If you have any comments, please share them with me below.