The html blog » html

8 practical tips to make your web pages faster

asvin — Thu, 06 Nov 2008 16:36:23 +0000

Yahoo's Exceptional Performance team has compiled a list of 34 best practices to have faster web pages. In this post I'll show you 8 tips which helped me to get a B grade in YSlow! for web pages that I develop. Currently YSlow's web page analysis is based on 13 identified basic rules that affect web page performance. In decreasing order of priority they are:

You can get more info by clicking on each item. Of course using a CDN is not affordable by everybody, including me. This didn't prevent me to have a B grade though. I will guide you through some of the items which worked for me.

Make Fewer HTTP Requests
If you're using the YUI library, the good news is that recently the team graciously offered a Combo Handler Service, served from their CDN. This helps us to eliminate HTTP requests by requesting a single file. For example, to use the Rich Text editor, it needed 6 separate HTTP requests:

 
 type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js">
 type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js">
 type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js">
 type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js">
 type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/button/button-min.js">
 type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/editor/editor-beta-min.js">

Now with the Combo Handler service, it has been stripped to only 1 file:

 
 type="text/javascript" src="http://yui.yahooapis.com/combo?2.5.2/build/yahoo-dom-event/yahoo-dom-event.js&2.5.2/build/container/container_core-min.js&2.5.2/build/menu/menu-min.js&2.5.2/build/element/element-beta-min.js&2.5.2/build/button/button-min.js&2.5.2/build/editor/editor-beta-min.js">

If you're not using the YUI library or not interested in using the Combo Handler service, you can try Minify!
Minify is a PHP5 app that can combine multiple CSS or Javascript files, compress their contents (i.e. removal of unnecessary whitespace/comments), and serve the results with HTTP encoding (gzip/deflate) and headers that allow optimal client-side caching.

Another tool which can be helpful is Dojo Shrinksafe which not only minifies your javascript code but also allows you to upload several javascript files and have them compressed in 1 single file.

Another way to make fewer HTTP requests is by using CSS sprites which are big images containing lots of smaller ones. An online tool which can make CSS sprites out of your smaller ones is the CSS Sprite Generator. You just have to upload your pics and it will generate your sprite together with the CSS code. More info about CSS sprites can be found on CSS Tricks.

Add an Expires Header
For this to work on Apache, you'll need to have mod_expires enabled. Then create an .htaccess file or edit your httpd.conf with the following content:

 
ExpiresActive On
ExpiresByType image/jpg "access plus 2 years"
ExpiresByType image/jpeg "access plus 2 years"
ExpiresByType image/gif "access plus 2 years"
ExpiresByType application/javascript "access plus 2 years"
ExpiresByTYpe text/css "access plus 2 years"

In the above listing, all images(jpg/jpeg/gif) will have an expires header 2 years in the future.

Gzip Components
You must have mod_deflate enabled and drop these lines in your httpd.conf file

 
SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary

Put CSS at the Top
All CSS must be between your head tag, like that :

 
	
		
 rel="stylesheet" href="style.css" type="text/css" media="screen" />

Move Scripts to the Bottom
While the CSS are sitting at the top of your page, javascripts must be moved towards the lower part of your page, typically in the body tag. I usually put them before the closing body tag.

 
	
		
		
		
		...
		...
		 type="text/javascript" src="myjs.js">

Reduce DNS Lookups
I don't usually have more than 2 DNS lookups in my scripts, else YSlow will be removing some points.

Minify JavaScript
As I mentioned earlier on, Dojo Shrinksafe is an online tool which minifies your code.

Another great command line tool is Julien Lecomte YUI Compressor.

In order to use it you must have Java installed (>= 1.4).

Douglas Crockford also has something similar in JSMin

Configure ETags
Just drop this line in your httpd.conf:

 
FileETag None

;-)

Show/hide containers by only adding CSS classes without writing javascript code (YUI-based)

asvin — Sat, 20 Sep 2008 07:37:49 +0000

This post will show you how to add the collapse/expand functionality in your HTML pages, perfect for FAQs by only adding two class names to your existing page and including the scripts below. Of course it's all YUI-based and also a demo of the fantastic YUI selector utility.

Demo of the toggler
Download the javascript file

What does the script do ?
OK, suppose you have a FAQ page where you have traditional anchor methods, i.e you click on the question and then you go to the bottom of the page to get the answer or you get redirected to another page. But now your users are complaining your site's not trendy enough and want to have the answer displayed immediately after clicking the question.

The solution.
After downloading the javascript file, include it at the bottom of your page with the following HTML code:

 
 type="text/javascript" src="http://yui.yahooapis.com/combo?2.5.2/build/yahoo-dom-event/yahoo-dom-event.js&2.5.2/build/selector/selector-beta-min.js">
 type="text/javascript" src="js/toggler.js">

We need to include the selector utility which will be used to retrieve a collection of elements that match a given CSS selector. For e.g if we want to retrieve all div nodes in HTML page having the class "foo", we can write :

 
var myNodes = YAHOO.util.Selector.query('div.foo');

The selector is used in the toggler.js file.

After adding the scripts, now you have to add CSS classes to your containers. For example for the FAQ, for questions (or main, call it whatever you want), you add the class "htmlblog-main" and for the answers (or sub), add the "htmlblog-sub" class.

Before :

 
1. Question
Answer1
2. Question 2
Answer 2

After :

 
 class="htmlblog-main">1. Question
 class="htmlblog-sub">Answer1
 class="htmlblog-main">2. Question 2
 class="htmlblog-sub">Answer 2

If you already had a class for that container, no problem you can add the htmlblog-main or htmlblog-sub class :

 
 class="myclass htmlblog-main">1. Question

What next ?
That's all ! All your answer containers will be hidden and questions will have a [+] besides them. Pretty easy

Am I obliged to use the htmlblog-main and html-sub classes ? And I don't want to use div tags, I want li tags.
Don't worry, if you don't like the class names you can put whatever you want but you'll have to edit the toggler.js file at the following lines :

 
YAHOO.util.Event.addListener(window, 'load', function(){
	YAHOO.htmlblog.init('div', 'htmlblog-main', 'htmlblog-sub');
});

For e.g, if you're using li tags instead of divs with the "myMainClass" as main and "mySubClass" as sub, the code goes :

 
YAHOO.util.Event.addListener(window, 'load', function(){
	YAHOO.htmlblog.init('li', 'myMainClass', 'mySubClass');
});

I'am getting an alert saying "Number of main and subs incorrect".
That means the number of main/subs are not the same. You need to have the number of the main class equals the number of the sub class.

I've commented the toggler.js file and you can easily change it to fit your needs.

Demo of the toggler
Download the javascript file

SEO friendly URL in PHP

asvin — Wed, 23 Jul 2008 18:10:51 +0000

When I started implementing mod_rewrite in websites I had a problem in PHP as how to make a SEO friendly URL. All tutorials were geared towards how to implement mod_rewrite, about modifying .htaccess files, but none treated how to make the urls friendly with dynamic content. For example I have a news section which are pulled from the database, but how can I make the URL friendly with the title.

For example, my problem was to convert titles like "Barca rejects FIFA statement on Olympics row" into "barca-rejects-fifa-statement-on-olympics-row.html". The trick has to work also with french titles (I'am sure my friends at Nexen will appreciate ;-)) like "Guantanamo: le chauffeur de Ben Laden plaide non coupable à l'ouverture de son procès" into "guantanamo-le-chauffeur-de-ben-laden-plaide-non-coupable-a-l-ouverture-de-son-proces.html", removing all french accentuated characters.

Hopefully I came across this function which I think might help you too :

 
function friendlyURL($string){
	$string = preg_replace("`\[.*\]`U","",$string);
	$string = preg_replace('`&(amp;)?#?[a-z0-9]+;`i','-',$string);
	$string = htmlentities($string, ENT_COMPAT, 'utf-8');
	$string = preg_replace( "`&([a-z])(acute|uml|circ|grave|ring|cedil|slash|tilde|caron|lig|quot|rsquo);`i","\\1", $string );
	$string = preg_replace( array("`[^a-z0-9]`i","`[-]+`") , "-", $string);
	return strtolower(trim($string, '-'));
}

Use :

 
$myFriendlyURL = friendlyURL("Barca rejects FIFA statement on Olympics row");
echo $myFriendlyURL; // will echo barca-rejects-fifa-statement-on-olympics-row

You just have to concatenate anything you want with the string afterwards. For french users, make sure your string is encoded in UTF-8 else it won't work.

If you're using the Smarty templating engine I made a little modifier which you can download. Extract the zip file in your Smarty/libs/plugins/ folder and to use it in your templates :

 
{"Barca rejects FIFA statement on Olympics row" | friendlyURL}

Or if your string is in a variable :

 
{$yourString | friendlyURL}

10 starting signs of a good web developer (php version)

asvin — Sat, 05 Jul 2008 10:03:33 +0000

Nowadays many people call themselves PHP programmers / web developers as soon as they know a bit of Frontpage or using Dreamweaver to generate the code for them. But are they really good web developers? Here's my top 10 characteristics of good web developers, feel free to comment.

1. Ability to hand code
Instead of using an IDE where it justs generate a bunch of lines which you don't understand, why you don't fire up a text editor such as VI, Emacs, Notepad or Notepad++ if you prefer and start coding right away? There are many advantages of hand coding HTML.

The code is clean
You understand what you're doing
Easy maintenance and debugging.

I currently use Eclipse PDT as IDE

2. Ability to produce valid HTML.
The W3C has an online tool which checks whether the HTML code you write is valid or not and there's a debate whether your code must valid or not. IMHO they must be and that's why :

Future proof
Cross browser compatibilities
Easier to maintain

Validate your code

3. Use Linux as operating system
Why on earth a web developer doesn't use Linux? It's free, comes with bunch of applications, you know the internals, you compile from source, you experiment things and most important, you're more productive. An example, I must edit a file on server A.
On Windows :
Launch WinSCP -> connect to server A -> retrieve file -> edit file -> save -> upload -> ask for confirmation -> wait upload finish

On Linux:
Launch console -> SSH on server A -> open file in VI for editing -> save

Enough said ;-)

I currently use Kubuntu (Hardy Heron)

4. Templating
Have you heard of spaghetti code? If not, it's mixing PHP code with HTML code. For example :

 

 
<?php echo 'hi'; ?>

This results in nightmare maintenance, a mess of code. Both designer and web developer work in the same file which is a bad mixture of logic and presentation. Fortunately there are templating engines which separate these two things.

The most popular one being Smarty which I currently use. Have the crash course if you haven't already.

5. Database abstraction layer
Your scripts must be database independent, i.e. if tomorrow your boss decides to throw all MySQL away and replace them by PostgreSQL, you don't have to write the scripts all again replacing all MySQL functions by PostgreSQL one. Also, you just have to learn a single API.

I use PEAR MDB2 as DB abstraction library.

6. JS framework
Javascript is everywhere nowadays together with the AJAX buzz word. Good web developers must have an overview of all the js frameworks available and choose the best one for his task. Popular frameworks include the YUI library, Prototype, jQuery, MooTools, Dojo Toolkit and Ext JS to name just a few.

I prefer YUI library (lots of documentation and exciting future)

7. Caching
Why retrieving the same information from the database again and again whereas you can cache the output to files or in memory. This will reduce the load on your database server. If you use the Smarty templating engine you can use cache groups . Another popular technique is by using Memcache, for high volume websites.

At work I use the Smarty caching system and a little bit of Memcache (for the taste ;-)), and my database load reduced by more than 70%.

8. Must have Firefox extensions : Firebug, web developer toolbar, YSlow

These great firefox extensions will help you greatly whether to debug some javascript, fix some CSS issues, increase your site performance. These are must-have for web developers, all three of them.

9. Keep reading
Keep reading reading and reading. Find popular programming posts on Digg, del.icio.us and read great magazines like Smashing Magazine, blogs like the YUI blog. Don't forget to participate actively in forums and ask questions.

I don't know why it's like that but I like del.icio.us popular section more interesting and everyday I find lots of interesting stuff via this page.

10. Look around you

Don't focus only on PHP. It's OK but have a look around you, there are fantastic things happening, like RoR, Python ;-)
A web developer who hasn't heard of RoR is NOT a good web developer.