Optimizing WordPress Loading Speed With header.php & .htaccess
Optimizing WordPress Loading Speed With header.php & .htaccess
Website loading speed matters a lot for every blog/website, especially for people with shared hosting – which is the cheapest available hosting service. Here are a few .htaccess and header.php tricks to increase your website loading speed by 50-70%
Web performance is getting more and more attention from web developers and is one of the hottest topics in web development. First and foremost, loading speed is more than a feature. Speed is the most important feature. If your website or blog is slow, people won’t use it.
What speed means to internet giants:
For Google – 500 milliseconds of extra load time caused 20% fewer searches
For Yahoo – 400 milliseconds of extra load time caused a 5-9% increase in the number of people who clicked “back” before the page even loaded
For Amazon – 100 milliseconds of extra load time resulted in a 1% drop in sales
Google, in their ongoing effort to make the web faster, blogged that “we’ve decided to take site speed into account in our search rankings.”
So a slower website will even decrease your search engine ranking too.
Thus loading speed matters a lot. CDN (Content Delivery System) are pretty good for this purpose, but up to a limited extent, and good CDN providers are a little costly.
The good news is that some of the most important speed optimizations can be easily done with simple .htaccess tricks. These can make any website load faster by compressing content and enabling browser caching, and follow the Best Practices for Speeding Up Your Web Site from Yahoo!’s Exceptional Performance team and doesn’t cost a cent.
Step 1 Gzip File Compression
Compression reduces response times by reducing the size of the HTTP response.
It’s worthwhile to gzip your HTML documents, scripts and stylesheets. In fact, it’s worthwhile to compress any text response including XML and JSON.
Image and PDF files should not be gzipped because they are already compressed. Trying to gzip them not only wastes CPU but can potentially increase file sizes.
File compression also saves some amount of your bandwidth.
With .htaccess
For Apache Servers
mod_pagespeed is an Apache module developed by Google and its command directive can be used just like other modules.
Currently only GoDaddy and DreamHost support the mod_pagespeed module, so if you host with them just copy and paste the following code to your .htaccess file:
<
IfModule
pagespeed_module>
ModPagespeed on
# using commands,filters etc </
IfModule
>
Many of you may be hosting with other hosting providers which do not support the mod_pagespeed
module.
You can use the mod_deflate
module (Apache 1.3x used mod_gzip
but since Apache 2x mod_deflate
is used)
<
ifModule
mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript </
ifModule
>
- For Nginx Server
If you host on a Nginx webserver copy the following to your .htaccess to enable gzip compression.
server {
gzip on;
gzip_types text/html text/css application/x-javascript text/plain text/xml image/x-icon; }
With header.php
If your server doesn’t support mod_deflate or mod_gzip you can use this PHP script for gzip compression which works on both Apache and Nginx
Just copy this into your theme’s header.php
<?php
if
( substr_count(
$_SERVER
[
'HTTP_ACCEPT_ENCODING'
],
'gzip'
) ) {
ob_start(
"ob_gzhandler"
); }
else
{
ob_start(); } ?>
Step2: Disable ETags
ETags (Entity Tags) are a mechanism that web servers and browsers use to determine if the component in the browser’s cache matches the original server. Etags are added to provide a mechanism for validating entities that is more flexible than the date of last modification. An ETag is a string that uniquely identifies a specific version of a component. The limitations of this format is that the string is quoted. The origin server specifies the component’s ETag using the ETag response header.
To disable ETags, paste this into your .htaccess file
Header unset ETag
FileETag None
Step3: Use Browser Caching
With browser caching, we’re explicitly instructing browsers to hang onto particular files for a specified period of time. When the file is needed again, the browser is to pull from its local cache instead of requesting it from the server again.
Running a website without caching in place makes as much sense as driving to the store for a glass of water every time you’re thirsty. Not only is it impractical and short-sighted, it takes more work!
Browser caching is really useful to get returning users; i.e. it may build loyal permanent visitors to you and also saves a lot of your bandwidth.
A first-time visitor to your page will make several HTTP requests to download all your site’s files, but by using the Expires and Cache-Control headers you make those files cacheable. This avoids unnecessary HTTP requests on subsequent page views.
Apache enables through the mod_expires
and mod_headers
modules.
The mod_expires
module controls the setting of the Expires HTTP header and the max-age directive of the Cache-Control HTTP header in server responses. To modify Cache-Control directives other than max-age, you can use the mod_headers
module.
The mod_headers
module provides directives to control and modify HTTP request and response headers. Headers can be merged, replaced or removed.
Add these rules to .htaccess for setting Expires headers:
# BEGIN Expire headers <
ifModule
mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 5 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds" </
ifModule
> # END Expire headers
.htaccess rules for setting up Cache-control header:
# 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 themod_expires
module. must-revalidate
means that once a response becomes stale it has to be revalidated; it doesn’t mean that it has to be checked every time.
- There is no need to set the
- For NGINX ServersThe corresponding .htaccess settings in Nginx would look something like this:
(The example below would tell your visitor’s browsers to hang onto HTML, CSS, Javascript, images and favicon for an hour)
location ~* \.(jpg|png|gif|jpeg|css|js)$ {
expires 1h; }
Step4: Reduce MySQL Database Size
Since WordPress 2.6, WordPress autosave posts while writing which remain even after the post is saved as revision in the MySQL Database. Bigger database also sends the site load time higher. I suggest removing revision feature.
Paste the following to wp-config.php to disable revisions:
define(
'WP_POST_REVISIONS'
, false );
# 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> <IfModule pagespeed_module> ModPagespeed on # using commands,filters etc </IfModule> Header unset ETag FileETag None # BEGIN Expire headers <ifModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 5 seconds" ExpiresByType image/x-icon "access plus 2592000 seconds" ExpiresByType image/jpeg "access plus 2592000 seconds" ExpiresByType image/png "access plus 2592000 seconds" ExpiresByType image/gif "access plus 2592000 seconds" ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds" ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 216000 seconds" ExpiresByType application/javascript "access plus 216000 seconds" ExpiresByType application/x-javascript "access plus 216000 seconds" ExpiresByType text/html "access plus 600 seconds" ExpiresByType application/xhtml+xml "access plus 600 seconds" </ifModule> # END Expire headers # 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
Thanks for your wonderful Support and Encouragement