Why Page Speed Matters
As much as I’d like to jump straight into the code snippets that can help speed up your website, it’s important to define why load times matter. In 2010, Google revealed site speed was a ranking factor the company considered when choosing which sites to show in search results. Quoting that article:
Speeding up websites is important — not just to site owners, but to all Internet users. Faster sites create happy users and we’ve seen in our internal studies that when a site responds slowly, visitors spend less time there. But faster sites don’t just improve user experience; recent data shows that improving site speed also reduces operating costs.
It’s hard to argue with happy users, better rankings, and reduced operating costs, especially when it may just take a few minutes to accomplish. Now, enough with definitions, let’s jump straight to why you’re still reading.
What You’ll Need to Speed Up Your Website
For any of these snippets to work, first you’re going to need to verify a few things. If the answer to any of these questions is “no,” then you can save yourself a lot of time and hassle by checking other resources for speeding up your website.
- Do you have FTP access to your site? It may seem like a good idea to attempt these changes without FTP access to your site, but I cannot emphasize enough how important it is to keep backups and have a good file management process in place. That said, I will also admit I’ve updated .htaccess files on the fly before without issue (but then there was that one time). Even if you can access the right file to edit, there’s still no backup in place to revert in case something goes wrong. Trust me, you don’t want to proceed if the answer to this question is “no.”
- Can you easily locate your .htaccess file? If you’re already familiar with this file then this part should be simple. If not, I recommend you learn more about the .htaccess file and how it works before proceeding. You can always bookmark this article and come back later.
- Is your website hosted on an Apache server? Most popular hosting companies offer plans with servers that use the Apache Server Application. Unless your website is a large eComm site or for an enterprise brand you are probably using an Apache server.
Speed Up Your Website
So now it’s time to begin. I’m going to show you some of the snippets we’re using on Chow-Bryant as we work to improve pageload times. You can see the results of these snippets in our GTMetrix scores.
As you can see, there’s still some room for improvement, but we’re off to a good start. These scores are the results of taking the Enfold theme and trying to improve the page speed using only mod_rewrite and mod_deflate rules and conditions in the .htaccess file. Here are the snippets of code we used. You can take these codes and add them to your site’s .htaccess file. Make sure to always keep a backup, and have an FTP client ready so you can revert if anything goes wrong. The following information is provided as opinion, and is not professional consulting advice, express nor implied. Modify your .htaccess at your own risk.
Leveraging Browser Caching
Adding Expires Headers
This is similar to browser caching. These rules and conditions tell the browser how long to store files in the cache before downloading new versions. Much like browser caching, this will only improve load times for repeat visits. To add expires headers to your site, simply add the following code to your .htaccess file:
Configuring Entity Tags
Some servers use entity tags to verify whether or not a file in a browser’s cache matches the one on the server. I don’t run into many sites that utilize entity tags, but I recommend including this snippet. If your entity tags aren’t configured properly you could see an increase in 304s responses on your site. To configure your entity tags, simply add the following code to your site’s .htaccess file:
# BEGIN Configure eTags <IfModule mod_rewrite.c> RewriteEngine On Header unset ETag FileETag None </IfModule> # END Configure eTags
You may have noticed the last 3 snippets all include some of the same lines of code. That’s because they all use the Apache mod_rewrite module. You can technically combine the previous snippets into one large snippet, but I’ll save that for a future article where I discuss how to optimize your .htaccess file so it’s as efficient as possible.
Enabling gzip Compression
Finally, there’s gzip compression. We learned how a visitor’s browser downloads and caches files to properly load your site, but what if those files are large? The larger the file, the longer it will take the page to load. Gzip compression takes your site’s files and compresses them before a visitor downloads them. It’s best to serve scaled images and compress your media assets as much as possible before publishing, but that’s in an ideal scenario.
If you’re just now thinking about speeding up your site, but your brand relies heavily on images or large media files, a project like compressing and scaling assets can be a huge undertaking. I recommend enabling gzip compression so you can see some immediate gains while you address your media assets themselves (more on this in a future article). To enable gzip compression add the following code to your .htaccess file:
Check Your Results
Now that you’re finished adding the code, and everything is working properly, it’s time to check your results. There are a lot of services that test a site’s load time, but we recommend GTMetrix and Google Page Speed Insights. These two tools have their quirks (for instance, Yslow really hates Google Fonts), but they’re great for gauging and tracking your website’s performance.
I hope you found this article helpful. If you have any questions, or want to share some of your tricks to speed up your website, please leave them in the comments section.