Top 30 sites for freelancers
Every site you'll ever need! check it out →

How to speed up your website

How to speed up your website

In our fast-paced world, people have grown to dispise waiting. Think about it – you’re waiting for a bus or train, at the doctors office, waiting for your partner to decide what shirt matches, you pull out your mobile phone or tablet and use the internet. The last thing we want to do while waiting is wait more. In this article, I’ll give you a rundown of some ways to speed up your website.

Why it’s important

Reducing page load times can reduce bounce rates and increase conversion rates. According to the Yahoo Development Team, 80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. An HTTP request is a request/response protocol, which means your computer sends a request for some file, and the web server sends back a response. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

Ways to optimize to speed up your website

Properly place your CSS

Your CSS code should live at the very top of the code in your HTML document, in the <head> section. Placing the CSS there allows your page to load progressively. You want progressive loading because it tells the user that your page is loading correctly. You also want your CSS to be in an external style sheet. To learn more about CSS, check out my article on getting started with CSS (LINK)

CSS Sprites

The idea behind CSS sprites is to consolidate multiple images into one sprite and then selectively display portions of this sprite with positioning.

CSS Sprites help you make your website faster

An Example of a CSS Sprite

Avoid Redirects

The important thing to remember is that redirects slow down your user’s experience. Inserting a redirect between the user and the web page delays everything in the page since nothing in the page can be rendered and no components can start being downloaded.

Make sure you have no 404s
In my video tutorial, SEO tips using Google Webmaster Tools, I do an overview of how to setup your website to take advantage of a free service offered by Google that will crawl your site and tell you what crawl errors your website produces. Among the complex report, it tells you which pages produce 404 (or page not found) errors. There’s no better way to frustrate a user then to have them follow a broken link.

Optimize your images

Probably the most important (and easiest) step to take to make your website faster is to properly optimize your images. This includes the images you use for headers, background images, navigation, and even CSS sprites. Also, if you use affiliate ads for marketing and secondary income on your site, ask the affiliate if they can provide an optimized image for you, or if it’s okay for you to modify their image for your site. Many times we don’t have control over affiliate ads, but it doesn’t hurt to ask.

Once you’ve completed all of the steps above, the next thing you should do is run a free service offered by Google, called PageSpeed Insights. PageSpeed Insights analyzes the content of a web page, then generates suggestions to make that page faster. It will take a comprehensive look at your website and give you tips on things you can do to improve page speed even more.

One thing I would suggest to do before you begin these steps is visit a speed test website such as Pingdom Tools and record your website speed before you optimize and then again after you optimize. Especially if you’re working on websites for clients. This is a nice way to showcase that some of the time consuming work you do that usually goes unseen, such as developing, is important.

Give these tips a try. What kind of improvement were you able to make on the websites you manage?

Written by Steve

Steve is a freelance web designer, technologist, educator, Adobe Certified Expert and friend from the San Francisco bay area. He is a incessant seeker of knowledge and tirelessly thinks about how he can make things better. You can learn more about him on his website, or by following him on Twitter: @scribblesteve