Why a Fast Website is Important to Your Business
A slow website can be the result of a number of things, but most importantly, a slow website means your users are waiting for multiple seconds, seconds that may seem like hours, all because your site’s performance is not at the level it should be. In an industry where fractions of seconds really are the benchmark, it’s so important to have an optimized site. In a recent report by Amazon, every 100ms in latency cost them 1% in sales. Now, regardless of whether you’re a global giant like Amazon, or a small local business, speeding up your website is going to help improve your bottom line.
As an advocate for website performance, approaching the idea of optimizing a website can sometimes be a daunting task, but remember, website optimization is about the journey, not the destination, so break it up in to manageable pieces. First thing is to get a benchmark for yourself. I typically start off by running a report on the site using a few different tools, such as Web Page Test, Google’s PageSpeed Insights, or GTmetrix. Once you have a report, you now have a place to start. Here’s a list of optimization tips you can do to help improve your grade, and get your site to an optimized state.
Compressing images is one of the biggest areas that is often overlooked and more often than not, this is the largest culprit for slow load times. When users have to download large uncompressed images, all of that plays a role in increased load times. In addition to slowing the load time, you’re eating up your mobile users data by having them download large images.
There are many tools you can use to compress images, but depending on the format, you can select what works best for you. Some compiler applications can do it directly for you like CodeKit if you’re a Mac user, or more notable software like Photoshop. For quickly compressing PNGs, I like to use TinyPng, which makes it simple with drag and drop ability, allowing you to quickly drop your image image into the app, and having the app do the dirty work for you, spitting out a compressed image for you to then download and work with.
In addition to compressing the image, you also want to make sure it’s properly scaled for where it’s going. Even though you can scale large images with CSS, it’s something you don’t want to do, as users will still have to load the large image, as shown in the screenshot of what not to do.
Enable GZIP Compression
Moving onto server optimizations; first on the list is GZIP Compression. GZIP Compression can typically save around 50-70% in file size reduction, which means less bandwidth usage and downloading from your users. In this article by Google about speeding up your site, they talk about the technical details of how GZIP compression actually works with the server, and what it does to increase site optimization. GZIP Compression can be enabled in a couple ways, the most common being through the .htaccess file. Feedthebot.com has a great resource on GZIP compression where they discuss more on how to enable GZIP Compression through the server config files for Apache or Linux, or simply through the .htaccess file. To check if your site is currently using GZIP Compression, you can use this Feed the Bot tool.
Enable Browser Caching
When users return to your site, there are always going to be elements that don’t change, for example, your logo. Without caching, every time a user visits your site, they need to download your logo. This may not seem like a big deal, especially after you’ve optimized the image, but to take your site to the next level, making it smart on what the site keeps downloaded locally on the user’s computer can really help improve the overall load time. This way, every time a user comes back to visit your site, they don’t need to download a majority of the content, resulting in a much faster load time, and thus, a happier user.
To enable browser caching, simply add the following to your .htaccess file. If after adding this to your .htaccess file it does not work, you may need to check that mod_expires is enabled on your server.
## EXPIRES CACHING ##
ExpiresByType image/jpg “access plus 1 year”
ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType text/css “access plus 1 month”
ExpiresByType application/pdf “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access plus 1 month”
ExpiresByType image/x-icon “access plus 1 year”
ExpiresDefault “access plus 2 days”
## EXPIRES CACHING ##
Minimize HTTP Request
Optimizing a website can be a daunting task, but breaking it up into smaller, more manageable pieces will help you slowly see the size go from low grades to high. An important philosophy to remember about optimizing a website is that it’s not about the destination, it’s about the journey you take. Each step that helps improve the site, even if it is a minor improvement, will ultimately lead to a faster website with much shorter load times. It’s not something that will happen overnight, but through continuous effort and testing, your load times should go down, and your conversions should go up.