How to Speed Up Your Website in 10 Minutes or Less

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

Every time a visitor loads a page on your site, their browser downloads a handful of files so the page can render properly. This includes HTML, CSS, images, Javascript, etc.. One way to speed up your site is by leveraging browser caching. These rewrite rules and conditions tell the visitors browsers which files to save, and how long to save them. Try to set an expire date that’s far into the future. Most people start with 1 year. Unfortunately, this won’t improve page load times for a first time visit, but it’s a start. To take care of this, simply add the following code to your site’s .htaccess file:

# BEGIN Expires Caching
<IfModule mod_expires.c>
ExpiresActive On
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 text/x-javascript "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"
</IfModule>
# END Expires 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:

# BEGIN Expires Headers
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>
# END Expires Headers

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:

# BEGIN Enable gzip compression
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>
#END Enable gzip compression

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.