How to make your website faster - Apache / HTML optimization ! - Linux Tutorials, Guides and Tips

First off I'd like to say welcome, here I will discuss effictive ways to speed up your website. First I will list server side hacks that will increase content delivery.

GZIP:

You can enable GZIP on a page with PHP, a quick example is placing this at the top of your static HTML page:

<?php 
    [COLOR=Blue]ob_start("ob_gzhandler");[/COLOR]
?>

Here, say your HTML page is 210 KBs, with GZIP your page will now be around 19KBs!, Your client will see the exact same page, their browser will simply uncompress it.

You can do the same thing to JS/CSS pages, an example of including them will be:

<link rel="stylesheet" type="text/css" [B][COLOR=#ff0000]href="dynamic_css.php"[/COLOR][/B]/>

Catch: It increases processor usage lightly, consider if you're pushing 80K page views a day on a non-vps.
=========================================

Expires Tags:

If you are not actively changing content on static images, files or scripts you may use .htaccess to add automatic expirey dates, which means the file will not be re-downloaded unless it is after the expirey date, this is called caching.

<IfModule mod_headers.c>
# 1 Year
<FilesMatch "\.(ico|gif|jpg|jpeg|png|flv|pdf)$">
  Header set Cache-Control "max-age=29030400"
</FilesMatch>
# 1 Week
<FilesMatch "\.(js|css|swf)$">
  Header set Cache-Control "max-age=604800"
</FilesMatch>
# 45 Minutes
<FilesMatch "\.(html|htm|txt)$">
  Header set Cache-Control "max-age=2700"
</FilesMatch>
</IfModule>

Edit entries to your need, this is a cost-efficient method to define expires headers in seconds.

=========================================
And now we move onto client side optimization
=========================================

IMG tags, a neat trick

With <img> tags always remember to add proper height/width attributes, this will tell the browser to make room before the image is actually downloaded. This will make the layout download smoothely and not jump and expand when it's not finished yet.

<img src="/logo/site.jpg" width="120" height="80"/>

Images, what can you do to make them smaller?

Images can be larger than the page itself, so we need to take caution in their sizes. Simple images, especially with a lot of the same colour should be in .png format, if you have any non-animated images in .gif format you can save 20-60% image size. JPEG images always have compression quality, you can open up your favourite image editor such as GIMP and re-save the image, fiddle with quality with preview on and pick what looks best. You most likely reduced page load by a few seconds there.

JS/CSS: Combine them!

Always keep your JS and CSS files as little as possible, remember each JS/CSS file = 1 new HTTP request can = 1 more second to lookup. A good recommendation would be to minify your CSS/JS files for your production site and keep a copy of them handy, as comments and whitespace are a good way to lag loading and functioning if you need speed to be snappy.

A good set of minifier is this:
JS: Online JavaScript Compressor (YUI and Microsoft Ajax Minifier), courtesy of Lottery Post
CSS: Online YUI Compressor

ENDING:

And that is all for now! If you have any comments, questions or think I should add something to the list feel free to comment.

Edited by Alexander, 28 May 2011 - 01:56 PM.

<IfModule mod_deflate.c> # Insert filter SetOutputFilter DEFLATE # Match Netscape 4.x BrowserMatch ^Mozilla/4 gzip-only-text/html # Netscapes 4.06-4.08 have some more problems BrowserMatch ^Mozilla/4\.0[678] no-gzip # IE masks as netscape, so allow allow it to be gzipped BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html # Don't compress images SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip </IfModule>