Improving web site performance with Apache .htaccess » samaxes.
Web performance is getting more and more attention from web developers and is one of the hottest topic in web development.
- Fred Wilson considered it at 10 Golden Principles of Successful Web Apps as the #1 principle for successful web apps.
First and foremost, we believe that speed is more than a feature. Speed is the most important feature. If your application is slow, people won’t 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!).
Google experiments reached similar results:
Our experiments demonstrate that slowing down the search results page by 100 to 400 milliseconds has a measurable impact on the number of searches per user of -0.2% to -0.6% (averaged over four or six weeks depending on the experiment). That’s 0.2% to 0.6% fewer searches for changes under half a second!
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 easily done with simple
These rules can make any website faster by compressing content and enabling browser cache. They also follow the Best Practices for Speeding Up Your Web Site from Yahoo!’s Exceptional Performance team.
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.
To compress your content, Apache 2 comes bundled with the mod_deflate module.
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:
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. A first-time visitor to your page will make several HTTP requests to download all your sites files, but by using the
Cache-Control headers you make those files cacheable. This avoids unnecessary HTTP requests on subsequent page views.
Apache enables those headers thanks to mod_expires and mod_headers modules.
mod_expires module controls the setting of the
Expires HTTP header and the
max-agedirective of the
Cache-Control HTTP header in server responses.
Cache-Control directives other than
max-age, you can use 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
Rule for setting
Note 1: There is no need to set
max-age directive with
Cache-Control header since it is already set by
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 provide a mechanism for validating entities that is more flexible than the last-modified date.
The problem with ETags is that they typically are constructed using attributes that make them unique to a specific server hosting a site.
ETags won’t match when a browser gets the original component from one server and later tries to validate that component on a different server.
In Apache, this is done by simply adding the
FileETag directive to your configuration file:
In a previous post I stated that:
If you remove the
ETag header, you will totally eliminate
If-None-Match requests and their
304 Not Modified responses, so a file will stay cached without checking for updates until the Expires header indicates new content is available!
Well, I was wrong and this is why: we still want
Last-Modified header for static files. If a user presses the refresh button, then browser will send a conditional request and server will respond a
304 Not Modified. If you disable both
ETag, the browser will have to download the whole content again whenever a user presses refresh.
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.
Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times.
Web performance tools
Always check your changes. Use either YSlow or Page Speed browser plugins.
They are super easy to use and the best tools currently available for the job.
Copy the following
.htaccess file into the root directory of your site and enjoy the performance improvements.