Optimise WordPress via .htaccess
Note: This will only work on Web on Speed shared hosting or any webserver running Apache with mod_gzip enabled.
For optimal WordPress site performances we need to configure cache, compression and various other settings to enhance the way data is sent to the browser.
Before editing your .htaccess file we suggest that you create a backup just in case this causes issue’s on your website
We will focus on the following htaccess modifications to increate page speed
- Gzip
- Keep Alive
- Leverage Browser Caching
Gzip
Compressing the size of your HTML, JS and CSS files not only allows faster delivery of content to the browser but also reduces bandwidth usage. Reports indicate that Gzip compression can reduce your files by up to 80%.
Add the following code outside of the WordPress rules
# START GZIP
<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
Deflate Compression
# START DEFLATE
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/shtml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>
Keep Alive
As default a browser would create a new connection to the webserver for each file that is requested which can significantly slow the website down. Keep alive allows us to download all required resources on a single connection.
# START KEEP ALIVE
<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>
#END ENABLE KEEP ALIVE
Leverage Browser Caching
Leverage Browser cache is a valuable tool for your website performances and is highly recommended by online optimisation checking services including Google PageSpeed Insights and GTMetrix. Leverage browser caching basically tells the web browsers to store static resources like images, html and css files for a specified period of time.
Why would we want browsers to store static content?
Without leverage browser caching each time a person browses your website they would constantly download the same files again and again. If the files are kept on the browser then this will open much quicker on the next site load due to the fact that these static files do not need to be downloaded again on each visit.
# START LEVERAGE CACHING
<IfModule mod_expires.c>
ExpiresActive On ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 year"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/ogg "access plus 1 year"
ExpiresByType video/webm "access plus 1 year"
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType text/x-component "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/font-woff2 "access plus 1 month"
ExpiresDefault "access 1 month"
</IfModule> # END LEVERAGE CACHING #
Let’s now add the Cache-Control headers after
# 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
If you have any questions then please a comment or contact us here