Improve Website Performance & Loading Speed using .htaccess

Web performance is attracting more and more attention from web developers and is one of the hottest topics in web development. First and foremost, we believe that speed is more than a feature. Speed is the most important feature. If your application is slow, people will not use it.

Faster website means more revenue and traffic:

• Amazon: 100 ms of extra load time caused a 1% drop in sales (source: Greg Linden, Amazon).
• Google: 500 ms of extra load time caused 20% fewer searches (source: Marrissa Mayer, Google).
• Yahoo!: 400 ms of extra load time caused a 5–9% increase in the number of people who clicked “back” before the page even loaded (source: Nicole Sullivan, Yahoo!).

And speed is now a factor contributing to Google Page Rank:

Google, in their ongoing effort to make the Web faster, blogged last month that “we’ve decided to take site speed into account in our search rankings.” This is yet another way in which improving web performance will have a positive impact on the bottom line.

The good news is that some of the most important speed optimizations can be done easily with simple .htaccess rules. These rules can make any website faster by compressing content and enabling browser cache.

Compress content

HTTP reduces compression response time by reducing the size of the response.

It is worthwhile to get your HTML documents, scripts and stylesheets. In fact, it is worthwhile to compress any text response, including XML and JSON.

Image and PDF files should not be zipped because they are already compressed. Trying to gzip them not only wastes CPU, but can potentially increase file size.

To compress your content, Apache 2 comes bundled with the mod_deflate module:

The mod_deflate module provides the DEFLATE output filter that allows output from your server to be compressed before being sent to the client over the network.

Enable gzip compression for text responses:

<ifModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
  AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
  AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
  AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json
  AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
  AddOutputFilterByType DEFLATE font/truetype font/opentype
</ifModule>

In previous versions of Apache, you can use mod_gzip.

Enable browser cache

Web page designs are getting richer and richer over time, which means more scripts, stylesheets and images in the page. The first visitor to your page will make several HTTP requests to download files from all your sites, but you can make those files unacceptable by using expired and cache-control headers. This avoids unnecessary HTTP requests on subsequent page views.

Apache enables those headers thanks to 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.

Rule 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

Rule for setting Cache-Control 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

Note 1: There is no need to set max-age directive with Cache-Control header since it is already set by mod_expires module.

Note 2: 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.

Disable HTTP ETag header

ETags were added to validate entities that are more flexible than the last-modified date.

The problem with eTags is that they are typically built using features that make them unique to the specific server hosting a site.

When a browser receives the original component from one server, the etags do not match and later try to validate that component on a different server.

In Apache, this is done by simply adding the FileETag directive to your configuration file:

# BEGIN Turn ETags Off
FileETag None
# END Turn ETags Off

Merge and minify your static files

Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

It is the practice to remove unnecessary characters from the code to reduce the minimum size, thereby improving load time.

Web performance tools

Always check your changes. Use the YSlow or Page Speed Browser Plugin.

They are super easy to use and the best tools that are currently available for the job.

Final file

Copy the following .htaccess file into the root directory of your site and enjoy the performance improvements.

# BEGIN Compress text files
<ifModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
  AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
  AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
  AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json
  AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
  AddOutputFilterByType DEFLATE font/truetype font/opentype
</ifModule>
# END Compress text files

# 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

# BEGIN Turn ETags Off
FileETag None
# END Turn ETags Off

thanks for reading this articles