How to easily monitor your web server using PHP

Prerequisites

Maybe I’m stating the obvious, but the PHP script has to be on a different server than the one used for the website you’d like to monitor. If the script is hosted on the same server than your site, it becomes pretty useless: In fact, if your server is down the script will not be able to run and will not let you know.
The best solution is of course a dedicated server, but a home server can be ok as well. Shared web hosting like those provided by Hostgator or WpWebHost have a low price, but most don’t allow you to set up cron jobs, so be careful if you plan to buy.

The last part of this tutorial will show you how to get sms alerts using Gmail. Please note that depending on your location and cellular phone provider, this part of the tutorial may not work.

1. Creating the monitoring script

The first part of this tutorial is to create the monitor script. Pick up your favorite text editor and create a file named monitor.php. The script is very simple: we only need two functions, one to test if a specific site is available, and the other to alert you by sending an email.

Paste the following in your monitor.php file:

function check($host, $find) {
    $fp = fsockopen($host, 80, $errno, $errstr, 10);
    if (!$fp) {
        echo "$errstr ($errno)\n";
    } else {
       $header = "GET / HTTP/1.1\r\n";
       $header .= "Host: $host\r\n";
       $header .= "Connection: close\r\n\r\n";
       fputs($fp, $header);
       while (!feof($fp)) {
           $str .= fgets($fp, 1024);
       }
       fclose($fp);
       return (strpos($str, $find) !== false);
    }
}

function alert($host) {
    mail('youremail@gmail.com', 'Monitoring', $host.' down');
}

$host = 'www.catswhoblog.com';
$find = 'Cats Who Code';
if (!check($host, $find)) alert($host);

The first function we created here, check(), takes two parameters: The first is the server you’d like to check availability (for example, www.catswhocode.com) and the second parameter is to find some text on the webpage. This second parameter is an additional security: In fact, by checking if a specific word is contained on the site homepage, we ensure that the site content hasn’t been modified, for example, after a hacking.

If the server isn’t available or if the text to find hasn’t been found, the alert() function is executed, and will send an email to the account of your choice.

Save the monitor.php file and upload it to your monitoring server.

2. Defining a cron job

At this point of the tutorial, we have a working monitoring script, but we have to type http://mymonitoringserver.com/monitor.php in a web browser to check our website, which makes our script almost useless.
The solution to that problem is to create a cron task to make the server execute monitor.php every hour. Open a SSH console to your monitor server and type the following:

0 * * * * /usr/local/bin/php -q /htdocs/www/monitor.php

If your PHP scripts do not have executable permissions, 644 or -rw-r–r– for example, then as part of the command portion of the cron line, you must specify the php interpreter and pass it the filename of the PHP script (including full path to the script from your home directory) that you want executed.

3. Setting up SMS alerts

Right now, we have a working monitoring PHP script, as well as a cron job that will execute the script every hour. If a problem happens, you’ll receive an email.
Due to the popularity of iPhones, Blackberries and other SmartPhones, a lot of people are able to receive emails everywhere they are. Though, some are still using cell phones with no email capability. In this optional step of the tutorial, let’s see how we can easily receive alerts by sms.

Doing so is quite easy. First you have to use Gmail. As it is a free service, you can create a dedicated account for your monitoring alerts. Once finished, login to your account and click on the “Settings” link located on the top right side of the browser window.
Then, select “Forwarding and POP/IMAP”:

As shown in the previous screenshot, the only thing you have to do is to check “Forward a copy of incomming mail” and fill the field with your phone number @ your provider service.
For example, If your phone provider is AT&T, you’ll have to type 0000000000@mobile.att.net.

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

How to easily monitor your web server using PHP

10 ways to make Internet Explorer act like a modern browser

Enable HTML5 on IE

Ever heard about HTML5? If you’re interested in web development, there’s no doubt about it. For those who doesn’t know, HTML5 is the next major revision of HTM; the core markup language of the World Wide Web.
Most modern browser can already handle, at least partially, the new HTML5 recommendations. But as Internet Explorer isn’t well known for its sense of innovation, it will simply ignore the markup.

The html5.js is a very interesting project which aim to make Internet Explorer HTML5 compatible. The only thing you have to do is to embed the html5.js script in your html document header. You can hotlink the script, as shown in the example below:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

» Source : http://remysharp.com/2009/01/07/html5-enabling-script/

Use the text-shadow CSS property on IE

Due to the recent implementation of the text-shadow CSS property in Firefox 3.5, designers started to use it quite intensively. Today, most modern browsers can render this property pretty well, but once again, IE ignores it.
Happilly, the proprietary, IE-only filter property can imitate text-shadow quite well. The example above shows how to apply the text-shadow property to modern browsers and filter to IE. Note that due to the fact filter isn’t a standard CSS property, it should be isolated using conditional comments.

If you’d like to learn more about the text-shadow property, don’t forget to check out our list of resources to get the most out of the text-shadow property.

p.shadowed {
  text-shadow: #0000ff 0px 0px 3px; /* Modern browsers */
  filter: glow(color=#0000ff,strength=3); /* IE */
}

» Source : http://www.howtocreate.co.uk/textshadow.html

CSS box-shadow on IE

In my opinion, box-shadow is one of coolest new CSS3 properties, because it allows you to easily create beautiful shadows on any kind of html element, without using any images. A real achievement for designers and front-end web developers!

.shadowed{
    box-shadow: 10px 10px 5px #888;
}

But, don’t ask if Internet Explorer can handle box-shadow. It can’t.
Once again, to imitate the box-shadow CSS property, we’ll have to use the filter proprietary property, as shown in the following example:

.shadowed {
    filter:
        progid:DXImageTransform.Microsoft.DropShadow(color=#969696, offx=1, offy=1)
        progid:DXImageTransform.Microsoft.DropShadow(color=#C2C2C2, offx=1, offy=1)
        progid:DXImageTransform.Microsoft.DropShadow(color=#EFEFEF, offx=1, offy=1);
}

» Source : http://ole-laursen.blogspot.com/2009/08/using-css3-box-shadow-with-ie.html

Rounded corners!

Ah, rounded corners. They are so popular with their “Web 2.0″ look and feel. The CSS3 specification understood it, and created a property, named border-radius, which is designed to easily create rounded corners without using a single image.
For those who doesn’t know, here’s how to use border-radius:

.round{
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

Fortunately, there’s several ways to create IE-compliant rounded corners without using images. My favorite is DD roundies, a small piece of javascript that can round any kind of HTML element.
The following example will create rounded corners on any HTML element with the roundify class.

<script type="text/javascript" src="DD_roundies.js"></script>
<script type="text/javascript">
  DD_roundies.addRule('.roundify', '10px');
</script>

» Source : http://www.dillerdesign.com/experiment/DD_roundies/

Multi column layouts

CSS3 allows you to automatically display some content in columns. This is a great thing as it give designers a lot more possibilities to create awesome layouts.
The following CSS will work on Firefox and Safari. It will automatically add columns to a div element.

.column {
    -moz-column-width: 13em;
    -webkit-column-width: 13em;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
}

Unfortunately, there’s no way to do something similar on Internet Explorer. But jQuery and its columnize plugin are here to help! The following example shows how easy it is to create columns using jQuery and columnize:

$('#mydiv').columnize();
$('#myotherdiv').columnize({ width: 200 });
$('#mythirddiv').columnize({ columns: 2 });

» Source : http://welcome.totheinter.net/2008/07/22/multi-column-layout-with-css-and-jquery/

CSS3 pseudo-selector emulation

CSS3 introduces lots of extremely useful selectors. Among others, the :nth-child() pseudo-class targets an element that has a certain number of siblings before itself in the document tree, as shown below:

p:nth-child(3) {
    color:#069;
}

As you can guess, these kind of things are way too advanced for IE. To overcome this problem, Keith Clark created a very useful script named ie-css3.js.
Using it is easy: Download Robert Nyman’s DOMAssistant, Keith’sie-css3.js and link them in your HTML document header.

<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
<script type="text/javascript" src="ie-css3.js"></script>

» Source : http://www.keithclark.co.uk/labs/ie-css3/

Opacity

Opacity is another CSS3 that IE can’t render. It’s such a pity because being allowed to interact on the opacity of a particular element is very interesting in terms of web design.
Again, the crappy filter property can help us to achieve a satisfying result on IE. The example below shows how to use filter to make an element transparent.

.element{
    opacity:.7; /* Standard CSS */
    filter:alpha(opacity=70); /* IE patch */
}

Rotating HTML elements

Rotating elements is possible with CSS3, using the transform property.

transform: rotate(240deg);
-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);

Internet Explorer will simply ignore all of the 3 declarations above. But hey, IE users got filter, don’t they? Sure, this property isn’t W3C valid, but since it’s Internet Explorer, you shouldn’t ask too much. The following code will imitate transform on all versions of IE:

filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540);

» Source : http://msdn.microsoft.com/en-us/library/ms533014%28VS.85%29.aspx

RGBa support

The “a” in RGBa stands for alpha. This new feature allows developers to specify an opacity value for a color, which is extremely useful when coding a website.

 .color-block {
    width: 50%;
    background-color: rgba(0, 0, 255, 0.2); /* Modern browsers */
}

As usual, Internet Explorer shows its lack of innovation and its inferiority to other browsers with no RGBa support at all. Fortunately, filter can achieve a quite similar effect to RGBa:

<!--[if IE]>
<style type="text/css">
.color-block {
    background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#99000050,endColorstr=#99000050);
    zoom: 1;
}
</style>
<![endif]-->

» Source : http://css-tricks.com/rgba-browser-support/

IE compliant font embedding

For the past 15 years, the web has been dominated by a few fonts such as Arial, Verdana, Courier and most notably Times New Roman. Those fonts are labeled “web safe”, which means that almost any computer has them installed. (By the way, they aren’t installed on GNU/Linux because they’re not free)
But for a year or two, font embedding has become a very interesting and loved technique: It allows you to embed a particular font in your design so your users will see it, nevermind if they have the font installed or not.

Among other techniques, the @font-face method is probably the most clean. Believe it or not, IE has been supporting font embedding since version…4! This is a good thing, but since Microsoft can’t do anything like the others, your font has to be on the proprietary eot format and you have to use a different declaration to embed it on your web pages, as shown below.

Note that if you need to convert a font in Microsoft’s eot format, you can use this free online tool.

@font-face {
    font-family: " your FontName ";
        src: url( /location/of/font/FontFileName.eot ); /* IE */
        src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */
    }  

/* THEN use like you would any other font */
.element {
    font-family:" your FontName ", verdana, helvetica, sans-serif;
}

» Source : http://randsco.com/index.php/2009/07/04/p680

Any similar techniques you’d like to share? Feel free to leave a comment!

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

10 ways to make Internet Explorer act like a modern browser

WordPress: How to easily create a Thematic child theme

What is a Theme framework? And why use it?

Basically, a Theme framework is a WordPress theme that you can extend using functions, styles and child themes.
Child themes are most of the times two files: function.php and style.css. An optional directory containing images can be used as well. Child themes can’t work without a parent theme, which is a synonym for “Theme framework”.

So, why use a Theme framework instead of a “classic” theme? The answer is quite simple: When you need to modify one of WordPress’ functionalities, you don’t edit the core file. Instead, you use a plugin of a hook to modify what you need without editing the core files. That way, you can customize WordPress to fit your needs while at the same time being able to upgrade it without loosing your mods.

Theme frameworks use the same logic: Modify as you need, but don’t edit core file so you’ll be able to upgrade.

In this tutorial, I’m using the Thematic theme framework, a GPL licenced theme brought to you by Ian Stewart. Thematic is in my opinion very powerful and optimized. Therefore, you may be interested in taking a look at other WordPress frameworks as well, such as Hybrid, Headway, Thesis or WP Framework.

Creating the child theme

Right now, you should know what a Theme Framework is and why you should use them. But enough theory for now, let’s get ready to create our own child theme for Thematic.

Download Thematic

Of course, the first thing to do is to download the Thematic Theme Framework. Once finished, unzip the file on your hard drive.

If you want, you can activate Thematic and take a look at your blog. Thematic can be used as a parent theme, or in standalone mode. Without a child theme, Thematic is ready to use and features a really gorgeous typography. There’s no images or even colors, so that you can create your child theme and make Thematic fit your needs, either in its look or functionality.

Create your child theme directory

After you unzipped the Thematic zip file, open the directory. You’ll find a sub directory called thematicsamplechildtheme. Copy it and paste it on the wp-content/themes directory. Rename it with your desired theme name. In this tutorial, I’ll use the name catmatic.

Modify the stylesheet info

Navigate to your new catmatic (or whatever you named it) directory. you’ll find two files: The first is functions.php and the other one is style.css. Open style.css in your favorite text editor. You’ll find the following lines:

/*
Theme Name: A Thematic Child Theme
Theme URI:
Description: Use this theme to start your Thematic Child Theme development.
Author: Ian Stewart
Author URI: http://themeshaper.com/
Template: thematic
Version: 1.0
Tags: Thematic
.
Thematic is © Ian Stewart http://themeshaper.com/
.
*/

What you have to do is simply to name your child theme and give more info about it, as in the following example :

/*
Theme Name: Catmatic
Theme URI: http://www.catswhocode.com
Description: A Thematic child theme.
Author: Jean-Baptiste Jung
Author URI: http://www.catswhocode.com
Template: thematic
Version: 1.0
Tags: Thematic
.
Thematic is © Ian Stewart http://themeshaper.com/
.
*/

Once finished, save the style.css file.

Styling the theme

At this point of the tutorial, we have prepared our child theme but we haven’t started to code yet. So what are we waiting for? The first stage of child theme development is to give the desired look to the Thematic framework, using CSS and images.

Add CSS Styles

Defining CSS styles on your theme child is definitely easy. All you have to do is to add styles to the style.css file from the catmatic directory.

Add images

Adding images to your child theme isn’t hard either. To do so, navigate to wp-content/themes/catmatic and create a new directory named images. (You can name it the way you want, but images is pretty much self-explanatory)

Then, simply put image files in the images directory. If you want to link to those images using CSS, you’ll do the following:

body{
    background: #fff url(images/bg.gif) repeat-x top left;
}

Supercharging Thematic

Well, after having some CSS fun, your Thematic child theme should look as you want it to. Though, what if you want to modify the theme? Should you edit Thematic theme files?
No, you shouldn’t. Of course, it is possible to do it but it is not a good practice at all. If you’re familiar with WordPress development, you probably know about hooks, which allow you to “hook” a custom function to another. In addition to WordPress hooks, Thematic also adds lots of hooks that allow you to do many things to customize your child theme.

Add functions/hooks

Add your custom functions to your child theme is easier than it seems: Open the functions.php file from your child theme directory and paste your functions there.

To help you get started, here is a bunch of ready-to-use functions:

Modify theme link:

function my_footer($thm_footertext) {
	$thm_footertext = 'Powered by WordPress, theThematic Theme framework and the Catmatic child theme.';
	return $thm_footertext;
}
add_filter('thematic_footertext', 'my_footer');

Define where to use excerpt/full posts

$full_content = false;
function childtheme_content($content) {
	if ($full_content) {
		$content= 'full';
	} elseif (is_home() || is_front_page()) {
		$content= 'excerpt';
	} elseif (is_single()) {
		$content = 'full';
	} elseif (is_tag()) {
		$content = 'excerpt';
	} elseif (is_search()) {
		$content = 'excerpt';
	} elseif (is_category()) {
		$content = 'excerpt';
	} elseif (is_author()) {
		$content = 'excerpt';
	} elseif (is_archive()) {
		$content = 'excerpt';
	}
	return $content;
}
add_filter('thematic_content', 'childtheme_content');

Display Thematic menu above header

function remove_thematic_actions() {
    remove_action('thematic_header','thematic_access',9);
}
add_action('wp','remove_thematic_actions');
add_action('thematic_aboveheader','thematic_access');

Add a favicon

function childtheme_favicon() { ?>
	<link rel="shortcut icon" href="<?php echo bloginfo('stylesheet_directory') ?>/images/favicon.png"/>
<?php }
add_action('wp_head', 'childtheme_favicon');

Activate your theme

Right now, you should have a child theme that fit your needs in both the look and functionality. The last thing we have to do is to upload the theme to your wp-content/themes directory and activate it. Make sure that Thematic is available on your wp-content/themes directory as well.

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

WordPress: How to easily create a Thematic child theme

10 interesting projects from Google Code

ZeroClipboard


Do you remember the old days of web development, when IE6 was the king? (ok, it sounds soooo bad now but if you were already building sites in 2002 you know what I’m talking about!) It was extremely easy to force copy to clipboard.
But, for obvious security concerns, Firefox doesn’t allow clipboard access by default. This is a good thing, but for some sites, being able to copy into clipboard is a must.

Using powerful Javascript and a .swf file, ZeroClipboard allow you copy information into the user clipboard. For a live demo, just have a look to my Coupons For Bloggers site.
» Visit ZeroClipboard

yourls


As a blogger, I know how important Twitter is to stay tuned with my readers and share my favorite links with them. But as you know, Twitter allows only 140 characters in messages. In order to create shorter urls, you can use a service like bit.ly or Tinyurl.com, or you can get yourls, and create your own service.

Yourls is built in PHP and is very easy to configure. If you’re using WordPress, you’ll probably be happy to know that yourls has its own WordPress plugin.
» Visit Yourls

Minify


I know I already talked about Minify in a previous article, but I simply cannot resist to spread the word about this very cool piece of code.
Minify is extremely simple to install and will combine, minify, and cache JavaScript and CSS files on demand to speed up page loading.

Installing minify is extremely easy: you just have to upload a directory to your site document root and Minify will start to speed up your blog. Wonderful, isn’t it?
» Visit Minify

Thematic


Being a WordPress fan, I really love the concept of Theme frameworks. For those who doesn’t know what it is, Theme frameworks are WordPress themes which contain lots of functions and styles. You can extend both in looks and functionality by adding a child theme.
For example, my other blog Cats Who Blog is using the Thesis theme framework that I extended using my own styles and functions.

Many commercial frameworks are availables, but Thematic is 100% free. A definitive must download if you’re into WordPress!
» Visit Thematic

Flexlib


As you may guess, Flexlib is an open source Adobe Flex library. It provides lots of components that you can freely use in your Flex or Air projects.
The currently available components include: AdvancedForm, Base64Image, EnhancedButtonSkin, CanvasButton, ConvertibleTreeList, Draggable Slider, Fire, Highlighter, HorizontalAxisDataSelector IconLoader, ImageMap, PromptingTextArea, PromptingTextInput, Scrollable Menu Controls, SuperTabNavigator, Alternative Scrolling Canvases, Horizontal Accordion, TreeGrid, FlowBox, Docking ToolBar, and Flex Scheduling Framework.
» Visit Flexlib

Zen Coding


As a web developer, I often find it frustrating having to type lots of tags and attributes to reach the desired result. HTML tags are necessary of course, but that doesn’t mean it should consume so much typing.
This may be the idea Sergey Chikuyonok before he started to develop Zen Coding. What is Zen Coding? It is a handy set of tools for high-speed HTML and CSS coding. It integrate in your favorite text editor and then provide functions and shortcuts to speed up your development.

As an example, if you type this:

div#content>h1+p

You’ll get the following output:

<div id="content">
<h1></h1>
<p></p>
</div>

If you want to know more about Zen Coding, Smashing Magazine has a nice article about it.
» Visit Zen Coding

Sexybuttons


On the internet, design matters. Some people are good for designing, some, like me, aren’t. Happilly, those who aren’t designers (or who are bad designers!!) should take advantage of projects like this one.
Sexybuttons is a small CSS framework that allow you to instantanely create gorgeous buttons for your blog, websites and web apps. If you like CSS buttons, don’t forget to have a look to my Top 10 CSS buttons tutorial list.
» Visit Sexybuttons

jQuery transmit


Who doesn’t like jQuery? This very handy Javascript framework allows developers to enhance both the design and usability of your website. Thanks to plugins, jQuery can be easily enhanced with the functionalities you need. There’s a bunch of very cool jQuery plugins available from Google code so it was very hard to choose one. However, file upload has always been a major problem in web development and this jQuery plugin will be extremely helpful.

Using jQuery transmit is incredibely easy :

$(document).ready(function() {
    var options = {
        allowedFileTypes: [{
            description: "Images",
            extensions: "*.jpg; *.gif; *.png"
        }]
    };

    $("#transmit").transmit("http://mysite.com/upload/", options);
})

» Visit jQuery Transmit

dompdf : Convert HTML to PDF using PHP


The PDF format is useful for many thing such as invoices, and is largely used in business. dompdf is an advanced HTML to PDF converted which can download and read external stylesheets, inline style tags, and the style attributes of individual HTML elements. It also supports most presentational HTML attributes.
» Visit dompdf

stop-spam


Spam is definitely a big problem for blogs and websites. Although it is still impossible to completely prevent spam, some tools can help you a lot to fight it.
Stop-spam is one of those tools. It is lightweight, compatible with all blogs and forums (WordPress, PhpBB, Movable Type, etc) and easy to install. It automatically blacklists well known domains and IPs used by spammers. Of course, you can edit lists to blacklist/whitelist to add more domains and IPs.
» Visit stop-spam

Any other you’d like to mention? Don’t hesitate to let me know in a comment!

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

10 interesting projects from Google Code

How to speed up your blog loading time

Use a quality host

Maybe I’m stating the obvious, but don’t expect to get the speed of a Ferrari on a crappy shared host. When your blog is young, new, and receives only a few visits per hour, most web hosts are good. But the day your site becomes more popular, you’ll see it takes a while to load.

I remember when Cats Who Code were hosted at one.com, all was fine until I started to get more than 5000 unique visitors per day. Then, my blog loading time started to degrade. Most websites have to switch from a hosting plan to another, and some have to switch to a new host. I switched to WpWebHost and I’m happy with them. I’ve heard a lot of good things about HostGator as well so you might want to check them out.

Be careful with external requests

When your blog loads slowly, a definite question to ask yourself is, “Do I really need that stupid widget?” or “Is Google Adsense a good thing for my blog?” and so on. In fact, it is funny to see how many people are struggling with loading time when not thinking that maybe, the super widget you placed in your sidebar was a piece of crap.

Each widget like “Facebook fans”, “Latest Twitter entries”, advertisements such as Google Adsense and buttons like the well-known Digg button have to load content from other sites. By using these, you are making your site dependent on other sites. If you’re using a Digg button in your blog, and the whole Digg site is down, your blog will not load correctly.

Make use of caching

The first two tips I gave you should have already helped you a lot to get a quicker loading website; but, especially in case of high traffic websites, this may be not enough.

Caching is a popular technique that has proven great results. The following example features a very simple caching implementation:

<?php
// start the output buffer
ob_start(); ?>

//Your usual PHP script and HTML here ...

<?php
$cachefile = "cache/home.html";
// open the cache file "cache/home.html" for writing
$fp = fopen($cachefile, 'w');
// save the contents of output buffer to the file
fwrite($fp, ob_get_contents());
// close the file
fclose($fp);
// Send the output to the browser
ob_end_flush();
?>

Don’t hesitate to check out this interesting post if you want to learn more about caching.

If you’re running a WordPress blog, a very handy plugin is Wp Super Cache. Easy to install and configure, Wp Super Cache will create static versions of your WordPress blog pages so it can load quicker.
It’s a must have for all blogs with lots of traffic.

Minify is your friend

Minify is a PHP5 app that combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers. Take a look at the following screenshot to see how helpful Minify is:

The stats above are from a brief walkthrough which shows how easy it is to set up Minify on an existing site. It eliminated 5 HTTP requests and reduced JS/CSS bandwidth by 70%.

To install minify on your website or blog, Download it and unzip the files to a new directory.
Copy the min directory directly into your document root, and you’re done!

Free, easy to install, and extremely powerful, Minify is a real life saver for me and I recommend it to any traffic website owner.

Store media elsewhere

When a site is popular, it tends to use lots of bandwidth. For exemple, a basic blog post with images can eat up to 2GB of bandwidth after making Digg front page, as my highly controversial anti-IE post did a while ago.

To reduce bandwidth usage and consequently make your website load a lot faster, the solution chosen by many highly popular sites is to store media on other servers.

Many services are allowing you to upload your media on their servers. The following list are the most popular sites for storing you website media:
Amazon S3 : Premium service, cost of 15 cents per GB of storage, and 20 cents per GB transfer.
Flickr : Provides both free/limited account and pro account, for $25/year.
Photobucket : provides a free account which let you store up to 10 GB. Paid account cost $25/year.
ImageShack : Storage unlimited, but bandwidth transfer is limited to 100 Mo/hour.

Additional good practices

Above, I have listed my favorite tips to reduce loading time. Those tips are efficient and if you apply them, there’s no doubt that you’ll see a strong loading speed improvement. But there’s many additional tips that you can use to significantly improve your site performance.

For example, I recently heard that you shouldn’t use the @import CSS directive in order to limit extra loading time.
Another thing you should be interested in is how to compress CSS files with PHP, a very nice way to save bandwidth.

Any other tip you’d like to share? Feel free to let me know in a comment.

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

How to speed up your blog loading time

Page 1 of 2412345678910»...Last »