Speeding up a web page
First of all: why to improve the speed of a web page? We are talking about lowering the server connection time, download time and rendering time; the main reasons for improving the page speed are:
- You will get better search engine rankings, this means more visitors.
- You will improve the user's experience, motivating him/her to navigate to other pages of your website, this means more page views.
- You will minimize your webserver load; this means more resources for your website and for other websites at the server... and also avoids violating the provider terms of use.
...and how to do that? Well, there are many actions that should be executed in order to improve the speed of a website, some of them are applicable to most websites and another group of actions are specific for each website according to its contents and structure. Below we will mention some of the most general and easy ways to improve a web page speed.
The .htaccess rules
If you are hosting your website under an Apache web server then you can add the following rules to your .htaccess file (if you don't have a .htaccess file just create a new file with that name and put it into the website root's folder):
ExpiresByType image/gif "modification plus 10 years"
ExpiresByType image/png "modification plus 10 years"
ExpiresByType image/jpeg "modification plus 10 years"
ExpiresByType application/javascript "modification plus 2 years"
ExpiresByType text/javascript "modification plus 2 years"
ExpiresByType application/x-shockwave-flash A2592000
ExpiresByType text/css "modification plus 2 years"
ExpiresByType text/html A2592000
ExpiresByType text/plain A2592000
FileETag none
<IfModule mod_deflate.c>
AddOutputFilter DEFLATE js css flv
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-nly-text/html
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(js|css|xml|gz|flv)$">
Header append Vary Accept-ncoding
</FilesMatch>
</IfModule>
AddDefaultCharset UTF-8
That may look a bit cryptic at the first view, but can be easily explained:
- The first group of rules is for enabling the "ExpiresActive" engine and then set the expiration (ExpiresByType ...) for each file type. The expiration time is related to which amount of time can be stored the files in the browser's cache. Files stored in the browser's cache aren't re-downloaded from the server each time the page is loaded but taken from the local cache, therefore improving the page load speed. Note that this is a bit risky group of rules, if your content changes very frequently you should set a lower expiration time in order to be sure that your returning visitors will get the most updated version of the page.
- The "FileETag none" rule is a complement for the Expiration rules, this rule tell the browser to rely on the expiration times set above.
- The next block that starts with "<IfModule mod_deflate.c>" is a very important one: is for gziping the files, this is a standard "zip" method that can compress a normal HTML page to about a 20% or 30% of its original size, so it's a very effective way to minimize the download time, bandwidth and improve the page seep. This rule requires the "mod_deflate" module for Apache enabled. The first line into that block is for enabling the gzip for files ".flv", ".js" and ".css". The second rule is for enabling the gzip for HTML pages, text and XML files. The latest rules are for avoiding bugs in some older browsers.
- After that block there is a new one that starts with "<IfModule mod_headers.c>" and indicates that the pages/files with extensions "js", "css", "xml", "gz" and "flv" can be cached by web proxies. This is also a bit risky rule, be sure that you aren't using cookies from those files and be care about the expiration times set before.
- The latest rule sets the default charset. This is the earliest way to tell the web browser which charset should be used to render the page so the browser can start to render the page as soon as possible.
Alternative way to g-zip a web page
If your Apache webserver doesn't have the "mod_deflate" module available and your page is a PHP webpage then you can put this line at the beginning of the file:
<?php ob_start("ob_gzhandler"); ?>
... and this line at the end:
<?php ob_end_flush(); ?>
... it works only for PHP files, but it is a good alternative if "mod_deflate" isn't enabled or if your website isn't running over an Apache Webserver.
Alternative way to set the default charset
For PHP pages put this line at the beginning of the file:
<?php header('Content-type: text/html; charset=iso-8859-1'); ?>
... be sure to replace the "iso-8859-1" with the correct charset of your page, example "utf-8".
Minify the scripts
The scripts don't need most of the blank spaces, line breaks and other code formatting. You can keep a formatted copy of the code if you plan to edit it, but for the public website you should use minified javascripts, this means smaller javascripts files with all the non-needed characters removed.
There are some free internet services for minify script files. For Dreamweaver users there is a commercial JavaScript Minify tool that allows minify javascript files without leaving Dreamweaver.
Other actions?
Yes, there are a lot more of actions that can be executed over a website to improve the speed, however most of those actions are not as easy or are not as general as the mentioned above. Anyway we plan to go back over this topic later.
If you are interested in our website speed optimization services, feel free to contact us and we will give you a quote for optimizing your website.