AppThemes Docs

Speed Up Your Site, Fast!

Ok, there are lots of plugins out there that offer caching and other speed improvements, and many of them are great and even come highly recommended. Sometimes however, they can be quite cumbersome and overinflated with features and options. I want to present a couple of quick and simple code samples that you can apply and see immediate results without any headaches.

Note, these changes apply to the .htaccess file which is exclusive to Apache, if your web server is not running Apache then these fixes are not applicable.

The .htaccess file

Now, we will open up your .htaccess file, located in the WordPress root directory.

When you open, it will look something like this:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Now, onto the next steps where we will add different updates to accomplish potential speed increases.

Compression

To enable output compression, were going to enable the Apache module called “DEFLATE”, and DEFLATE is an output filter that allows output from your server to be compressed before being sent to your user’s browser.

This is similar to compressing files on your hard drive into a “zip” file, which effectively packages them and compresses them at the same time, and thus provides a quicker and easier to handle way of moving around those files that are “zipped”.

DEFLATE works the same way, whatever WordPress generated for the page, and all other resources like images and css and javascript files, will be compressed as much as they can and then transferred over the internet from your server to the users browser. Just like a .zip file, these provides for improvements in smaller file transfer sizes and the files are sent efficiently packaged.

Here is the simple code, that will compress the many different file types that your WordPress site will return back to the user’s browser:

# START Compression
<IfModule mod_deflate.c>
# compress text, html, javascript, css, xml, (and more):
	# compress text, html, javascript, css, xml, (and more):
	AddOutputFilterByType DEFLATE text/css text/plain text/html text/richtext
	AddOutputFilterByType DEFLATE text/javascript application/x-javascript application/javascript application/json
	AddOutputFilterByType DEFLATE text/x-component image/svg+xml text/xsd text/xsl text/xml image/x-icon
</IfModule>
# END Compression

We’re going to add these few lines to the end of this file, right after the “#END WordPress”, so it will now look like this:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

# START Compression
<IfModule mod_deflate.c>
	# compress text, html, javascript, css, xml, (and more):
	AddOutputFilterByType DEFLATE text/css text/plain text/html text/richtext
	AddOutputFilterByType DEFLATE text/javascript application/x-javascript application/javascript application/json
	AddOutputFilterByType DEFLATE text/x-component image/svg+xml text/xsd text/xsl text/xml image/x-icon
</IfModule>
# END Compression

Browser Cache

Now, we will tell the browser how long to hold onto the resources like images and css and javascript files, so that it wont need to keep requesting the resources on every page load of your site.

What this means is that when your website loads, it tells the browser to go get “style.css” file for example, and include it in processing the page. If you set an expiration time, the next time it is asked to go get the “style.css”, it knows that last page load it was told that the file would not “expire” for a certain amount of time so it now does not have to go re-fetch it and will use the copy of that file that it still has stored.

This makes every page load faster because the browser is told that certain files wont change for a certain amount of time so they can be re-used and not need to be re-fetched. This saves time, and load on your server by properly communicating with your users browser about the content its serving to the browser.

Here is the code that controls the setting of the expiration date for certain files, and communicates this with the browser:

# START Expires
<IfModule mod_expires.c>
	ExpiresActive On
	ExpiresDefault "access plus 2 hours"
 
	ExpiresByType image/gif "access plus 2 hours"
	ExpiresByType image/gif "access plus 2 hours"
	ExpiresByType image/png "access plus 2 hours"
	ExpiresByType image/jpg "access plus 2 hours"
	ExpiresByType image/jpeg "access plus 2 hours"
	ExpiresByType image/ico "access plus 2 hours"
	ExpiresByType text/css "access plus 2 hours"
	ExpiresByType text/javascript "access plus 2 hours"
</IfModule>
# END Expires

You may find that the setting of 2 hours (from here: ExpiresDefault “access plus 2 hours”) may not best suit your needs, so you can change this to a value that suits your needs, like:

ExpiresDefault "access plus 1 month"
ExpiresDefault "access plus 4 weeks"
ExpiresDefault "access plus 30 days"
# Or, If your feeling rather specific:
ExpiresDefault "access plus 1 month 15 days 2 hours 11 minutes 3 seconds"

Final Outcome

Finally, Here is the completed .htaccess file with the additions explained above.

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

# START Compression
<IfModule mod_deflate.c>
# compress text, html, javascript, css, xml, (and more):
	# compress text, html, javascript, css, xml, (and more):
	AddOutputFilterByType DEFLATE text/css text/plain text/html text/richtext
	AddOutputFilterByType DEFLATE text/javascript application/x-javascript application/javascript application/json
	AddOutputFilterByType DEFLATE text/x-component image/svg+xml text/xsd text/xsl text/xml image/x-icon
</IfModule>
# END Compression

# START Expires
<IfModule mod_expires.c>
	ExpiresActive On
	ExpiresDefault "access plus 2 hours"
 
	ExpiresByType image/gif "access plus 2 hours"
	ExpiresByType image/gif "access plus 2 hours"
	ExpiresByType image/png "access plus 2 hours"
	ExpiresByType image/jpg "access plus 2 hours"
	ExpiresByType image/jpeg "access plus 2 hours"
	ExpiresByType image/ico "access plus 2 hours"
	ExpiresByType text/css "access plus 2 hours"
	ExpiresByType text/javascript "access plus 2 hours"
</IfModule>
# END Expires

Thats it! Save your .htaccess file, clear your browsers cache, and click around on your site to see your speed improvements!

Like this tutorial? Subscribe and get the latest tutorials delivered straight to your inbox or feed reader.

Your rating: none
Rating: 4.1 - 13 votes