Back to HTML4

Hier, je suis tombé sur cet article de Google qui suggère d'utiliser un DOCTYPE HTML4 pour pouvoir omettre certaines balises dans le but de réduire la taille de ses pages. D'après les grosses têtes de Google (si, regardez le mec à droite dans la vidéo, il a vraiment une tête ENORME) on peut gagner de 5 à 20% sur la taille des pages.

Bon c'est pas une optimisation qui va bouleverser votre "expérience utilisateur", mais elle a le mérite d'être simple et de pouvoir s'appliquer à toutes vos pages, même les statiques.

Pour la mettre en place sur un site basé sur le Zend Framework, il faut commencer par choisir le bon DOCTYPE :

<?php
// Dans le bootstrap
$view Zend_Layout::getMvcInstance()->getView();
$view->doctype(Zend_View_Helper_Doctype::HTML4_FRAMESET);
?>

HTML4_FRAMESET autorise l'usage de l'attribut target qui est bien pratique pour forcer l'ouverture d'un lien dans une nouvelle fenêtre.

Ensuite, on définit une chaine vide comme séparateur pour les aides de vue head*. Ça permet d'économiser des retours à la ligne.

<?php
$view
->headMeta()->setSeparator('');
$view->headLink()->setSeparator('');
$view->headScript()->setSeparator('');
?>

Dans le layout, on supprime les balises HTML et HEAD. J'ai conservé la balise ouvrante BODY, car Tidy se plaint si il n'y en pas.

Passons maintenant aux listes (balises UL et OL). On peut supprimer la balise LI de fermeture. Pour cela, on va créer une nouvelle aide de vue htmlList qui va utiliser la méthode isXhtml de l'aide de vue Doctype :

<?php
class Wiip_View_Helper_HtmlList extends Zend_View_Helper_FormElement
{
    public function 
htmlList(array $items$ordered false
        
$attribs false$escape true)
    {
        if (!
is_array($items)) {
            require_once 
'Zend/View/Exception.php';
            throw new 
Zend_View_Exception('First param must be an array'$this);
        }

        
$list '';
        
        
$isXhtml $this->view->doctype()->isXhtml();

        foreach (
$items as $item) {
            if (!
is_array($item)) {
                if (
$escape$item $this->view->escape($item);
                
$list .= '<li>' $item ;
            } else {
                if (empty(
$list)) $list '<li>';
                
$list .= $this->htmlList($item$ordered$attribs$escape) . '</li>';
            }
            if (
$isXhtml$list .= '</li>';
        }

        if (
$attribs) {
            
$attribs $this->_htmlAttribs($attribs);
        } else {
            
$attribs '';
        }

        
$tag = ($ordered) ? 'ol' 'ul';

        return 
'<' $tag $attribs '>' $list '</' $tag '>';
    }
}
?>

J'en ai profité pour supprimer également les retours à la ligne, mais attention, d'après ce rapport de bogue, ça pourrait créer des problèmes avec certains navigateurs lorsqu'on affiche les éléments inline avec une règle CSS.

Ce qui a de bien avec les aides de vue, c'est qu'elles sont traitées suivant l'ordre LIFO (Dernier entré, premier sorti). Donc si on ajoute dans notre bootstrap un préfixe avec le code suivant par exemple : <?php$view->addHelperPath('Wiip/View/Helper''Wiip_View_Helper_');?>, nos aides de vue vont prendre le pas sur celles fournis avec le Zend Framework.

On pourrait faire de même avec les balises OPTION des SELECT en surchargeant la méthode _build de Zend_View_Helper_FormSelect. Sur une longue liste, comme pour sélectionner un pays, j'ai gagné 11% sur le poids d'une page.

On doit pouvoir aussi gagner quelques octets sur les tableaux en supprimant les balises de fermetures TD, TH et TR. On peut également supprimer tous les retours à la ligne (sauf si ça nuit à la lisibilité du code coté serveur bien entendu). Si on a besoin d'examiner le code HTML produit, on pourra utiliser l'inspecteur de Firebug ou utiliser les commandes de formatage automatique proposées par les IDE.

Avec le standard HTML5, on pourra produire du code HTML encore plus efficace, car il propose un certain nombre de raccourcis (<meta charset="utf-8"> par exemple) et autorisera la suppression des attributs TYPE.

Voir aussi