Quick tips to optimize WordPress site load time

Serve up speed

You know the feeling. You’ve clicked on an interesting link to visit a site, and you’re patiently waiting for it to load. And waiting. And waiting. Your patience is wearing thin, and suddenly the link-that-looked-interesting has become the site-that-will-never-load. In frustration, you slam the X to close the window and huff off to another site.

In reality, the wait time might only have been three seconds, but in Website Time, it feels like an eternity. Our fast-paced, on-demand society demands information be available in the blink of an eye. In fact, survey information indicates nearly half of Internet users (47 percent) expect a page to load in two seconds or less. Even shaving a half-second off your site’s load time can make a huge impact on your bottom line.

While there are a plethora of factors that can impact a site’s loading time, there are a few basic and relatively simple things you can do to decrease the wait.

Start at the server: htaccess is your friend

Server-side caching can make a big impact. Before your user ever even requests your site, you can have settings in place to make that request load faster. These changes involve editing your site’s .htaccess file, which should be in the root folder of your website. You’ll need FTP/SSH/cpanel access to edit this file.

Pro tip: One wrong move in the .htaccess file can make your website inaccessible — so try these changes during off-hours, and make sure you have a backup of the .htaccess file to restore if that happens.

Browser caching: Set your expiration dates

Some types of content change frequently. Others, like images, will remain the same whether they’re requested today or in a week (that picture of a cat is still going to be a cat five days from now). Setting longer expiration dates for more static content can decrease load time on your site, since the browser knows it doesn’t have to request a new copy every single time. To specify longer expiration periods for more static content, add the following to your .htaccess file:

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"

As you can tell from the code lines, we’re setting content such as images (.jpg, .gif, .png file extensions) to have the longest expiration “dates.” Other content types that probably don’t change as often (but do change more frequently than images) are set to cache for one month. The default for any type not specifically defined is set at two days.

Exceptions to the caching rule

Sometimes, however, you don’t want to serve cached content. Certain websites (Google, for instance) should always pull the newest information from your site, rather than old, potentially stale cached data. These exceptions can also be handled within your .htaccess file. Within your WordPress rewrite rules, add the following:

# BEGIN WordPress
RewriteEngine On

…your wordpress stuff here, then add…

RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
# END WordPress

This command tells the browser NOT to cache information for Google, but to have the search engine retrieve it again fresh each time. You can, of course, add additional rewrite conditions for other URLs if you have more sites you want not to receive cached content.

Utilize GZip compression

It’s common sense in the tech world: smaller files will always transfer faster than larger files. Another way to reduce your site’s load time is to serve smaller files to the browser. This is easy if you activate gzip compression. Gzip automatically compresses your stylesheets and site’s pages before serving them to the browser making the request. Compression = smaller file sizes, which = shorter transfer times. Using this one tool can drastically improve your site’s load time. To utilize gzip compression, add this code to your .htaccess file:

# BEGIN gzip file compression
# 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
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
# END gzip file compression

Go beyond the server: Optimize your content

Beyond adding commands to the .htaccess file to deal with your content as it’s delivered, you can also do things to optimize the content itself. Let’s face it, if your content is sloppy or ill-conceived, no amount of caching or compression is going to save your load speeds. Fortunately, there are a few easy techniques for optimizing your content that can make a big difference.

Say goodbye to oversized images

One of the biggest culprits of slow loading time in WordPress is image size. When you upload an image via the standard WordPress Media Library, you upload the full-sized image. WordPress will simply scale down that image to smaller sizes; the overall file size of that particular image remains the same.

The most obvious way to avoid this problem is to resize images before upload. If you don’t want to take the time to resize every image by hand, though, you can spice up the vanilla WordPress media uploader with the use of a plugin like Imsanity. Install, activate, and all images uploaded are automatically resized into smaller, more manageable files before they’re ever added to your server.

Compress images even more

Another handy tool to reduce image size is an image optimizer, which takes the image file and removes any unnecessary data bytes stored within. This is a lossless technique, meaning you end up with a smaller image without any loss of image quality. And again, there are plugins to handle this for you. Check out the EWWW Image Optimizer or WP Smush.it.

Tell ‘em what to expect

Remember when I told you to specify image dimensions in your posts? Search engines prefer images with specified sizes. Well, here’s another good reason to make that standard practice: it can also help improve your load times. If the height and width of an image already is specified in the code, the browser doesn’t have to take the time to interpolate every image.

Check your work

There are, of course, many other ways to tweak your website and deliver the fastest possible site to your users. If you want to check the overall load time of your site or see other ideas of how to improve, here are a few of my go-to tools:

Do you have other must-know tips or tricks to reduce site load times or improve speed? Please share your brilliance in the comments!

Image by: Nathan E Photography via Compfight cc