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:
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:)
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):
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:
Matt did a ‘mod rewrite’ in the htaccess file to get rid of this delay when someone types in www:
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:
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?