load time

Tech Thursday: Why Don’t You Want My Website to Have Fun?

Some weeks, we end up doing more design than marketing. This was one of those weeks. After some of our meetings, we felt kind of like parents who were telling their kids they couldn’t go to a party, but that they’d thank us later. We aren’t trying to shoot anyone’s design dreams down, but to better explain our rationale, we thought we’d use this week’s Tech Thursday.

We walk the line between artists and technicians in the web design process. It’s not that we don’t want your website to be fun and pretty- because we absolutely do. It’s just that we’re also thinking about things like mobile users and load time-the customer’s overall experience. As Kassie says, when your website’s animated header won’t load on a Kindle, it fills her with nerd rage. We want your site to look great, but also work well!

Tools such as Pingdom (tools.pingdom.com) are a great way to test a website’s load time, and it will show you the elements of the site that are taking longest to load. Most of the time, it’s an image that is slowing your roll. There are also ways to customize your site that aren’t going to impair your site’s load time- think of sprucing up photos by adding drop shadows, rotating pictures in your slideshow- and all that jazz.

To summarize, we aren’t being lazy or lame when we try to steer you away from an idea. We’re just trying to make your site the best it can be!

Tech Thursday: Why is My Website So Slow?

Wonder why your website is loading slower than Nicole runs? (That’s slow by the way.) Here are a few ideas. Bonus is Kassie has come out from behind the camera for this video!

Remember, don’t settle for anything longer than 3 seconds. If it’s taking longer than that, you may want to check out what’s going on behind the scenes.

Three Free Tools To Test Page Load Time

47% of people will not wait more than two seconds for a website to load. And if you still don’t care about this yet, please look at this infographic: http://blog.kissmetrics.com/loading-time/

I bet you’re wondering now, how long does it take my website to load? (And if you don’t, you are in serious denial my friend.)

Here are some free tools you can use to see if your website’s load time:

http://www.webpagetest.org/
Great for: Testing specific browser versions and locations

webpagetest

So let’s say looking at Google Analytics you know most of your customers are using Google Chrome and located in Argentina. You can test the page load time specifically for this case. Now it’s a free tool so don’t go expecting it’ll have every possibility you’d want but at least it can give you an idea of things.

http://developers.google.com/speed/pagespeed/insights/
Great for: Getting technical ideas on how to fix issues.

googlepagespeedinsights

If you aren’t looking for a specific load time but want a more technical analysis with some fixes, this tool in the Google Developers section is nice. Specific files are mentioned and the benefit of each fix is also outlined.

http://tools.pingdom.com/fpt/
Great for: Overview

toolspingdom

If part of you is wanting that ‘grade’ (and comparison with how your website is doing compared to others) as well as a detailed breakdown of what is slowing your site down, this is a nice tool.

Now if you want something more, like constant monitoring of your website or analyzing more than one page of your site at a time, there are paid services that take this whole analyzing your site load time to that next level. But if you want a drive by view and are ready to do something about the results, these tools can take you far.

How We Improved Our Site Load Time By Almost 100%

After Wordcamp Boston, it was clear. We have to get our (and our clients’) websites loading in 3 seconds or less.

It is natural to think about our website for a few reasons:

1) If we messed anything up, we could easily restore a backup (and have no one really mad at us for temporarily taking it offline).
2) This website has 50 pages, 950 blog posts, and at least 1,000 images. Being able to load a website with a lot of content like ours fast is a bit more impressive than doing it with a small website.
3) This project is one thing we can spend time on that’ll actually (eventually) make us money, since we have probably invariably scared off high value customers with our slow as molasses website.

What we say below can work for any website no matter what software is running it. Our site happens to be Wordpress in case that is a helpful form of reference.

The first thing to do of course was to get a baseline reading. A nice tool that does this is tools.pingdom.com, which not only works well but happens to be free:

websiteloadtimebefore

The first logical step was to uninstall any themes and plugins we weren’t using. Let’s face it, we all do this: we download something to try it out, it doesn’t work the way we hoped, and we forget about it, leaving it to take up electronic space we don’t need. It could be you do this on your phone or computer… we happen to do this on our website. Guilty! (Note: it seems like it takes longer to load but really this is simulating load time in the Netherlands versus Texas. If you look at the grade and number of requests, you’ll see an actual improvement:)
updatedsoftwareanddeletedunusedstuff

The next thing we did was resize images. Compressing images is not something many on the web will even notice (yes your pictures might be a tad less sharp than they were before) but they will notice when they are waiting ten seconds for your beautiful pictures to load and they will get annoyed. (Grade is similar but look at that page size decrease):

resizedimages
After these logical steps, I noticed that the www redirect (what we in the biz call a 301 redirect) was taking almost a second to happen. (Background: This redirect is done so whether someone types in www.domain.com or domain.com, they get to the same place.) This is why it’s not only important to look at the speed but what things are slowing down the speed:

whyistheredirecttakinglong

Matt did a ‘mod rewrite’ in the htaccess file to get rid of this delay when someone types in www:

afterredirect

Looking further, I noticed there were three slides in our slideshow that were much bigger than the other files. Alice fixed those so they not only loaded fast but were crisp. We also made some things that weren’t necessary disappear from our homepage:

websiteloadtimeafter

So with a few hours of our time we:

  • Changed the page size from 2.2 MB to 0.91 MB  (41% decrease)
  • Decreased requests from the server from 145 to 78 (54% decrease)
  • Increased our load time from 3.38 seconds to 2.94 seconds (here in the US anyway- an 87% increase)

We changed nothing noticeable to our visitors on our website; we just made things work better.

Remember when someone goes to the homepage of your site, everything that loads on the homepage of your site needs time to load. Every plugin, widget, picture, etc. you have on your homepage needs to load. So you really have three options when you think about making your site fast:

1) Load less stuff (ie do you really need 20 slideshow slides? Cutting it down to ten means there are ten less images that now have to load).
2) Resize what is loaded (this is to say reduce file sizes for images, css files, etc).
3) Get ready to get your hands dirty with customizing how your website works by changing parts of your content management system (caching commands, changing default php files with your Wordpress theme, etc.)

Options 1 and 2 are relatively straightforward. Option 3 takes longer but when Option 1 and 2 have been exhausted, it can be necessary to dive in deep. Fortunately, our website with options 1 and 2 was able to get where we needed it to get.

 How long does it take your site to load? And more importantly what have you done (or are you going to do) about it?