A Marketer’s Guide to Speeding Up Your Website

14 Mar 2013

You know this but let me reiterate — your website (or landing page) is your most important asset. It’s the backbone of your business. Whether you run an online campaign, are setting up Facebook pages or managing a Google Adwords campaign, most likely your goal is to parachute people to your website. Once they drop on your site they are all yours. Things are now in your control.

A slow website is a marketers nightmare.

Google incorporates site speed in search rankings. Don’t believe me? Matt Cutts from Google talks about it here. It doesn’t matter if you have spent a crap load on design and it looks awesome. What really really matters is if it loads quickly.

Think about this for a second: How do you feel when you are asked to wait at a restaurant?

Got it? So, here are 10 things you can tell your web designer (or whoever is managing your website) so that you can spring clean and speed up your website and not lose customers.

1. Use responsive web design. My two favourites are Skeleton and Foundation. They are small collections of CSS & Javascript files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. Say goodbye to tables and get your site ready in a few hours. The brightpod.com site is done using Foundation.

2. Test your website’s speed using Pingdom and GTMetrix. These free tools analyse your site and also give you tips what you can improve.

3. Compress your website pages using GZip. If your web server is Apache, you can ask your network dude to get this done. What this means is: your web server will deliver compressed files over the Internet whenever someone goes to your homepage. Which is easier to throw with the hand — a tennis ball or a soccer ball.

4. Use image sprites. What this means is that instead of loading each image using an img tag, you group all images in an image file (so you only need to load one image file) and then call each image using CSS. This is a great way to reduce web server requests if you have a lot of images (banners, icons etc.) on the page. Once you have your image sprite you can use Sprite Cow to generate CSS for your image sprite.

5. Use Yahoo’s Smush.it to optimise images without causing any change to the visual quality of the image.

6. Remove unused CSS in all our CSS files. A cleanup is always good when you are done designing your site. Less code the better.

7. Make sure you define a width and a height for all images on your webpage. This helps save time since the browser doesn’t have to do the work of calculating the dimensions.

8. Minify all javascript files. This means that you are compressing your javascript files to remove any white space (which takes up some file space). Minimus is nice little minify utility for OS X. Just drag and drop your Javascript files to have them minified.

9. There are tons of services online that ask you to add a bit of Javascript to your web page so that they can do what they have to. Think Google Analytics, KISSMetrics, SnapEngage, WebEngage, CrazyEgg etc. Defer parsing of Javascript till to the end of the page. Place the Javascript in the footer of your webpage and not on the header. One exception is if you use a font library like Typekit. Typekit fonts take over the default font till the page is completely loaded. So for a while, the user’s see the headings in Times New Roman. So it is better to move the Typekit Javascript code back to the header so the user doesn’t see a change in the font family (that would be a crappy user experience).

10. Don’t clutter your homepage with social plugins (Twitter, Facebook etc.) unless you absolutely need them. These buttons come with their own baggage and we really didn’t think it was worth having them on the front page. If either of these API’s become slow (or go down) it would impact the way your page would load.

That’s it! Copy and paste this post and send it to your web designer. Thank me later :)

Stay productive and good luck with your business.

← Home