A slow and clunky website can be very frustrating, not only that but its most likely costing you money. Your website's performance is very important when it comes to converting traffic into paying customers. If the page doesn't load within a few short seconds, odds are that the visitor will abandon your site.
This goes for the mobile version of your site as well. Proper implementation of responsive design plays into visitor conversion. KISSmetrics recently released this infographic on loading time (opens in new tab) and how it affects your bottom line. It notes that a one-second delay in loading time for an e-commerce site that is making $100,000 per day could possibly have a net loss of $2.5 million per year.
There are many contributing factors on why your site may be loading slowly, from the compression of the images and files within your site to the number of files a visitor has to request from your server. Websites are generally getting bigger too, the average page weighing in at just over 1600K and climbing (opens in new tab). Here are some tips that will help contain the size issues while also enhancing performance.
01. Performance budgeting
Set a plan in place for your site that limits the speed or overall size. Capping the size allows for faster load speeds and gives you a buffer if you need to implement new elements within the site.
Optimize existing elements before implementing something new, or remove them to make room for the new feature.
02. Image compression
One of the biggest issues when it comes to a clunky website is image size. Everybody wants hi-definition images, but the higher the resolution the bigger the size and it's important to not have your site cluttered with big image files.
There are a number of ways you can manage this though, such as the services provided by Adaptive Images (opens in new tab). This detects the screen size and automatically scales down the image and can be customized to set the quality of the images displayed.
Some providers already compress images automatically, but not all of them so make sure to look into that. Also read: The designer's guide to image compression (opens in new tab).
03. CSS/JC File Sizes
Most of the time, CSS/JS files are formatted in a way that makes it easier for people to read, but this isn't needed as far as production goes. There are some great tools out there like JScompress (opens in new tab) and MinifyCSS (opens in new tab) that compress your CSS/JS files to help speed up your site. Consider hosting your assets separately as well, this can help things run smoothly if you have a spike in traffic.
04. Hosting
The quality of the server that's hosting your site also plays a major role in performance; it just depends on your budget. Hosting costs anywhere in the range of a few dollars a month for shared hosting to a hundred dollars or more if you're looking for cloud services or fully managed dedicated servers.
A good practice is to look at the performance of your competitors in certain niches to see which ones are best optimized. Whoishostingthis.com (opens in new tab) will show you the hosting provider that they are using and reviews of the provider as well. If you're on the fence about upgrading your hosting services, keep in mind that google uses page load speed as a factor for page ranking.
Conclusions
If you take anything away from this article, it's that every little thing counts in terms of website optimization. If the user can navigate through your site faster, they are more likely for a return visit. Provide users with a great experience and it will pay off in the end.
Words: Jared Whitehead
Jared Whitehead is a tech writer and HTML5 enthusiast who works with Appnovation Technologies, (opens in new tab) an open source consulting firm.
