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
Hello, everything is going perfectly here and ofcourse every one is sharing data, that’s really excellent, keep up writing.|
Good blog you have here.. It’s difficult to find good quality writing like yours these days. I honestly appreciate individuals like you! Take care!!|
This does interest me