No matter how beautiful your site is, your website page speed is critical to success.Â Not only do faster load times help boost search engine rankings, but 40% of people will abandon a site if it takes longer than 3 seconds to load. And to make matters worse, ever delayed second it takes your website to load, will cause a 7% decrease in your conversion rate.
So how do you minimize your load times so you can maximize your revenue?
Well, I’ve used the techniques below to optimize Quick Sprout and I’ve improved my load time by 5 seconds. Results of course vary, but if you follow the techniques below you can expect anywhere from four to six seconds in time savings.
For starters, the key to faster pages is reducing the front-end load time. For the end-user, 80% of the response time is tied up in HTTP requests. This is the performance golden rule. That means you have to minimize those requests.
Here’s how to do that:
- Simplicity – Make the page design simple. One or two images, text. But you’ll probably want richer components on your site.
- Combination – Taking all the scripts and piling them into a single script, and similarly combining all CSS into a single stylesheet.
The rest of the performance techniques I’ll share with you will also render HTTP requests lower.
Combine images with CSS sprites
If you have many images on your page, then you are forcing multiple roundtrips of the server to get all the resources secured. This slows down page speed.
Sprites combine all background images on a page into one single image. The proper image segment will be displayed because of the CSS background-image and back-ground position properties.
CSS spites reduce:
- Delays caused by roundtrips made as a server is downloading other resources.
- Request overhead.
- Total number of bytes a page downloads.
You still need to optimize your content for compression. There are two things you need to do to make sure your web content compresses effectively:
- Create consistency across your HTML and CSS code. This happens when you:
- Order the CSS key-value pairs in a common sense way, like alphabetically.
- Do the same with your HTML attributes.
- Be consistent with your casing and use lowercase as often as possible.
- Make sure you are consistent with your HTML tag attribute quotes.
Spread your static content with CDNs
Because the location of the user impacts page load speed, spreading your content across servers will speed up this process. You can use a content delivery network (CDN) to make this happen.
What exactly is a CDN? It’s just a collection of servers that exist at different places in the world. CDNs do two things:
- Send files faster – Cached files are sent from locations that are closer to the specified user.
- File size shrinks – CDNs deliver content that is without cookies. No bloated files.
For example, a CDN service provider could have servers in California, New York, Sweden and Hong Kong. When a user accesses your site the server with the fastest network hops or quickest response time delivers the content. Someone in Philippines might get served from Hong Kong. Someone in Mexico might get served content from California.
Using a CDN is a pretty simple code change, but it can be expensive. And while some large Internet providers have their own CDN, it’s best to use a service provider devoted to CDNs.
Leverage browsing caching by using expires headers
Any time someone visits your website their browser will store a ton of files like stylesheets, scripts and images onto their hard drive. That will reduce the number of HTTP requests and speed things up next time they visit.
Those files have an expiration date in the header. This is known as “expires headers.” By default that expiration date could be set to 24 hours—meaning it will update every day. Very few—if any—websites need that short of an expiration date.
There are two things about this rule you have to keep in mind:
- Static components – Set a “Never expire” policy far into the future. These components become cachable, avoiding time-consuming and unnecessary HTTP requests. Expires headers should be used for images, Flash, scripts and stylesheets.
- Dynamic component – Use a cache-control header to help the browser with conditional requests.
The expires headers will tell a server how long to cache an item. Most static files should be set to 1 year in the future.
Expires: Thu, 20 September 2013 20:00:00 GMT
Apache servers should use the ExpiresDefault command to set the date out in the future compared to the relative time. Using the example above, the command would look like this:
ExpiresDefault “access plus 1 year”
You will have to change the component’s filename when you change that component in the future. From Google, you can see what cache response headers HTTP/1.1 provides.
Enable HTTP keep-alive response headers
HTTP requests are simple—they grab and send a single file and then close. That may be simple but it isn’t very fast.
Keep-alive is a trick that basically says the web browser and server agree to use the same connection to grab and send multiple files. In other words, the server holds the connection open while you are on the site instead of opening a new connection with every request. This way your processor, network and memory don’t have to work too hard.
Here are two common ways of enabling keep-alive:
Three performance testing tools
Besides the tools that I shared throughout this article to help you with each performance-improving technique, here are three basic tools that will evaluate your site and then give you recommendations for improving it.
Pingdom Website Speed Test
This free page test tool from Pingdom will test the speed of your website. The results will match what real users experience because the test is done with real web browsers, including Chrome were Pingdom tests load speed, record the performance data and so on. And the results will show you what about a particular page is fast, slow or too big.
This Yahoo tool grades a web page based on rules for high performance pages, gives you a summary of a page’s components, shows you stats on a page, offers performance analysis tools like Smush.it and JSLint, and then gives you a summary of what you need to do to improve your page’s performance.
There is also a Chrome extension, which allows you test the page speed of any website:
Page Speed Insights
This is Google’s slick tool for web developers to help improve your website performance. With a simple drop of a URL into the text box and a click of the button and you’ll get your report:
Suggestions for performance are broken down into high, medium, low and experimental priority. This is the tool that I used to come up with the recommendations above.
While websites get richer and cooler, this means that page speed also slows down. So each time you are getting ready to implement a new plug-in, code, rich-media…you have to ask yourself:
What is going to be the impact on page and site speed?
Sacrificing site speed to have the newest tool is probably not worth the money you may lose because of latency issues. So until a tool proves itself as a money maker, it’s probably best to hold off.
What other ways or tools have you used to improve your site performance?