How to speed up WordPress site – .htaccess optimization

How to speed up WordPress site – .htaccess optimization.

Nowadays an eye catching look of your website or a perfect content can be not enough to attract the potential users. If you are a site owner, you need to know that Google uses an algorithm which makes a site loading speed one of the factors influencing the site’s position in the search results. So when the site loading time takes a few seconds only, for internet users and google it’s often too long.

Statistics say that almost a half of Internet users expect a site to load in two seconds or less.
It’s important to take care of this, particularly that the results can be improved without much effort.
There are many techniques to improve the loading time of your site. Some of theme are a basic and relatively simple. One of the solutions is a .htaccess file, which allows to introduce the basic site optimization in minutes.

What is a .htaccess file?

.htaccess is a configuration file for use on Apache web servers located in the root directory. It gives the ability to control a specific folder or the piece of server. Using .htaccess file we may modify the configuration of the server software to stop or start running some server functionality and features, for example (taking into account the purpose of this tutorial) we may:

Optimize your site
Improve page loading speed
Create a diversion (internal and external)
Create password protected directories
Block specific IP
And many more

Where to find .htaccess file in WordPress?

The file should be located in the root folder of your WordPress installation.
.htaccess file name starts with a dot (.) at the beginning, which specifies that it is a hidden file. Remember to turn on “show hidden file feature” when you are trying to access your .htaccess file using FTP client or cPanel of your hosting.

Why You can not find .htaccess file?

It may occur that your WordPress site has not generated a.htaccess file yet. It is generated when you set up permalinks on Settings >> Permalinks settings. Simply click on “Save Changes” button to force WordPress to generate a .htaccess file in your site’s root directory.

If at this step you got a problem with file generation, at first check permissions of the directory, must be writable.

Optionally if .htaccess file does not exists, you can create it and upload.
It’s worth to mention that not all servers support using .htaccess file (for example free servers) and the service may be blocked – take it into account when something goes wrong while creating the file.

Optimization code for .htaccess file

Compression

Compression simply reduces the size of the document. Is most effective for HTML files, JavaScripts, CSS stylesheets and XML files. Generally, compression reduces 60% to 80% size of data. This also reduces server response time and bandwidth – volume of data which must be sent by the server to client browser.

The best way to enable compression is using mod_gzip or mod_deflate for Apache software (or equivalent for other web server). Both modules basically do the same thing, compress data, but mod_deflate is better supported and documented, also easier to configure. If mod_deflate doesn’t work correctly on your website or web server for some reason, of course you can use mod_gzip. Both compression methods can be enabled by adding a simple code in WordPress.htaccess file:

DEFLATE

# BEGIN DEFLATE 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
</IfModule>
# END DEFLATE COMPRESSION

GZIP

# BEGIN GZIP COMPRESSION
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# END GZIP COMPRESSION

Browser Caching

By setting browser caching you’re telling browser to keep some kind of files for a specified period of time in local memory (cache). When cached file is needed again, the browser will load from its local drive instead of requesting it from the server.
We can use for that purpose two Apache modules – mod_expires and mod_headers (or equivalent for other web server).
Both methods can be set at the same time in .htaccess file:

Expires headers

#BEGIN EXPIRES HEADERS
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default expiration: 1 hour after request
ExpiresDefault "now plus 1 hour"
# CSS and JS expiration: 1 week after request
ExpiresByType text/css "now plus 1 week"
ExpiresByType application/javascript "now plus 1 week"
ExpiresByType application/x-javascript "now plus 1 week"
# Image files expiration: 1 month after request
ExpiresByType image/bmp "now plus 1 month"
ExpiresByType image/gif "now plus 1 month"
ExpiresByType image/jpeg "now plus 1 month"
ExpiresByType image/jp2 "now plus 1 month"
ExpiresByType image/pipeg "now plus 1 month"
ExpiresByType image/png "now plus 1 month"
ExpiresByType image/svg+xml "now plus 1 month"
ExpiresByType image/tiff "now plus 1 month"
ExpiresByType image/vnd.microsoft.icon "now plus 1 month"
ExpiresByType image/x-icon "now plus 1 month"
ExpiresByType image/ico "now plus 1 month"
ExpiresByType image/icon "now plus 1 month"
ExpiresByType text/ico "now plus 1 month"
ExpiresByType application/ico "now plus 1 month"
# Webfonts
ExpiresByType font/truetype "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
</IfModule>
#END EXPIRES HEADERS

Cache-Control

# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
 <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
 Header set Cache-Control "public"
 </filesMatch>
 <filesMatch "\.(css)$">
 Header set Cache-Control "public"
 </filesMatch>
 <filesMatch "\.(js)$">
 Header set Cache-Control "private"
 </filesMatch>
 <filesMatch "\.(x?html?|php)$">
 Header set Cache-Control "private, must-revalidate"
 </filesMatch>
</ifModule>
# END Cache-Control Headers

Note: There is no need to set the max-age directive with the Cache-Control header since it is already set by the mod_expires module. In other case we should use :

# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
 <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
 Header set Cache-Control "max-age=2592000, public"
 </filesMatch>
 <filesMatch "\.(css)$">
 Header set Cache-Control "max-age=604800, public"
 </filesMatch>
 <filesMatch "\.(js)$">
 Header set Cache-Control "max-age=216000, private"
 </filesMatch>
 <filesMatch "\.(x?html?|php)$">
 Header set Cache-Control "max-age=600, private, must-revalidate"
 </filesMatch>
</ifModule>
# END Cache-Control Headers