“The web should be fast.”
That’s been one of Google’s mantras for the last couple years, as the web has grown exponentially. What they’ve seen is that as the web grows and more and more websites are created, there are a significant number of them that aren’t optimized well enough for consumers to use.
KISSMetrics, a popular website analytics blog, released data on the effect load times have on ecommerce websites. They found that 47% of consumers expect a web page to load in 2 seconds or less, and that even just a 1 second delay in page response can result in a 7% reduction in conversions. With so much pressure being placed on having a fast load time, it’s important to make sure your websites are optimized for best performance. Here are a couple tips to quickly increase performance. Note that they require some basic knowledge of website structure/your web host.
Content Delivery Network (CDN)
A CDN, or Content Delivery Network, is a great way to quickly speed up your site. A typical connection to your website goes from a client’s browser to your server, requesting the website files, and returning to the client’s browser. This process can slow down, however, when quite a few people all try to access the same files at the same time. Think of it like going on a ride at an amusement park. If there’s nobody in the queue for the ride, you can run through, get on the ride and enjoy it. However, if lots of people get in line, your wait for that ride increases.
CDNs are used to alleviate that wait time. A CDN acts as a middleman for those requests to your server. If the file that’s being requested has been previously requested, the CDN responds with the old file. This dramatically cuts down on the amount of requests to your server, meaning your website responds faster, as well as holds up under heavier user loads.
Fewer HTTP Requests
In congruence with having a CDN handle repeated file requests, having fewer requests overall will help speed up the site. This is similar to running down the length of a basketball court and back multiple times. It’s a much more manageable task if you’re asked to run down and back three times instead of say, six or nine. The same applies to your browser. If you’re loading 20-30 files per page, that’s going to take longer than if you load 5-10 files.
That’s fairly straight forward. But how do you reduce the amount of HTTP requests if you’re only loading the things you need for that page? Minify and concatenate Javascript and CSS files. These files that you’re loading can, in most scenarios, be combined into one and compressed. This process is referred to as minifying and concatenating your CSS and Javascript files. More information, including how to minify and concatenate your website can be found here (Robert Nyman.com)
Defer Javascript
Deferring Javascript is a fancy way of saying “load Javascript last”. Javascript files have a behavior known as blocking when they load on a page. What blocking means, is that when the page loads, the browser goes line by line and looks at each line of code. If it finds a CSS file, it tells the browser to go load up that CSS file in parallel, while continuing to load the rest of the page. When it reaches a Javascript file, the browser stops loading the site until that file has finished downloading. Because of this, it’s recommended to put your Javascript near the </body> tag, so that the page appears to be completely loaded faster.
Optimize Images
The average download speed for mobile devices is ~5.0 Mbps. The average photo size taken by an iPhone 5s is around 2.0 MB. For every image that you have at that full size, you add about a third of a second onto the load time of the site under optimal conditions. And that’s just in images alone. By optimizing and compressing your images, you can reduce that 2.0 MB file size down to around 190-300 KB, which is much smaller.
Having content optimized for the device the user is on is known as responsive design. Quite a few people think of responsive design as just adjusting how your content is laid out as good enough (a la Does your website look good on mobile?). While mobile user friendliness is a large part of responsiveness, if your website takes forever to load on a phone due to the size of your images/content, your site is not responsive.
A good site for resizing and compressing your images can be found here (ImageOptimizer.net).
Enable gzip Compression
This is the most technically advanced suggestion out of the ones above, but one that can help shave off some of that load time delay. Most web servers have a compression utility installed on it, known as gzip. Gzip can reduce the file size of your files when they’re requested, meaning that your website requests less data from the server on each request. This compression can reduce the file size of stylesheets and content files by up to 70%.
To enable, you’ll have to know what type of web server you’re currently using. Instructions for both Apache and IIS based servers can be found here.
With these tips, you’ll be able to speed up your website, which can lead to more conversions.
