Optimisation des pages d'un site Web

Votre site est en ligne et vous avez tout fait pour optimiser son contenu. En êtes-vous absolument certain ? Avez-vous aussi optimisé la structure et le code de vos pages ?

Dans cet article, nous abordons l'optimisation des pages.

Les fondamentaux

L'optimisation technique d'une page Web repose sur 3 axes fondamentaux :

  • son poids, en incluant toutes les ressources externes (images, javascript, css, fichiers multimédias, etc.),
  • sa structure, en faisant référence à sa conformité aux standards du développement Web,
  • sa compatibilité, car nous le savons tous, les navigateurs adoptent parfois des comportements bien différents pour le rendu.

Gérer le poids des images

Sans aucune équivoque possible, les images représentent le poste d'optimisation majeur du poids des pages.


Ce sujet justifie pleinement une série d'articles dédiée et je ne l'évoquerai donc pas ici.
Si vous commencez votre travail d'optimisation, alors lisez avant toute chose : Optimisation des images d'un site Web.

JavaScript et CSS : généralités d'optimisation

Pour des raisons de lisibilité et de maintenance de vos pages, banissez le code JavaScript déclaré directement dans vos pages et regroupez le avantageusement dans des fichiers externes que vous pouvez lier à l'intérieur du head de vos pages.

Adoptez aussi la même démarche pour vos déclarations CSS.

                                    
                                        <html>
                                        <head>
                                            ...
                                            <link href="css/default.css" rel="stylesheet" type="text/css" />
                                            
                                            <script src="scripts/default.js" type="text/javascript"></script>
                                            ...
                                        </head>
                                        <body>
                                            ...
                                        </body>
                                        </html>
                                    
                                

Une autre justification de cette démarche est d'optimiser le référencement de votre page, comme expliqué dans Optimisation SEO d'un site Web - Partie 3 : les fichiers.

Rappel !

Nulle règle ne saurait être absolue, alors je vous recommande de n'intégrer à vos pages que le strict minimum, en équilibrant l'optimisation et la facilité de maintenance.

Bonne pratique

Durant le développement, j'identifie au plus tôt les éléments qui peuvent rejoindre les fichiers de référence du site et qui seront appelés par toutes les pages (default.js et default.css) et crée un couple de fichiers pour les éléments spécifiques de la page (maPage.js et maPage.css).

Une fois la page réalisée, je recherche une optimisation de la structure, comme décrit dans les chapitres Structure des fichiers et Optimisation des fichiers avec PHP.

Ensuite, la meilleure manière d'optimiser le poids de votre code JavaScript et CSS est de recourir à des minimiseurs.

Vous en trouverez de nombreux sur Internet, comme par exemple le Closure Compiler de Google ou JSLint pour ce qui concerne le JavaScript et Clean CSS ou CSS Compressor pour le CSS.

Il existe aussi YUI Compressor, capable de traiter à la fois le JavaScript et le CSS.


Pour une utilisation autonome sur votre poste, je vous recommande l'excellent JASC (Just Another Script Compressor) qui fera des merveilles avec vos fichiers JavaScript et CSS.

Voici ce qu'il est possible d'obtenir (source : les fichiers de www.ahounou.com) :

Non optimisé Optimisé Gain
JavaScript
default.js 8,19 Ko 3,54 Ko 43% de gain
jquery.google-analytics.js 8,27 Ko 1,79 Ko 78% de gain
 
CSS
default.css 13,3 Ko 10,5 Ko 21% de gain
Bonne pratique

La plupart du temps, maintenez 2 versions de vos fichiers, la première, non compressée (monFichier.js) pour vos développements et la seconde, compressée et mise en ligne (monFichier.min.js).

Améliorations HTML

Ma première recommandations est de ne pas inventer le fil à couper le beurre !

Chaque balise HTML est prévue pour un usage, alors pourquoi ne pas l'employer ?

L'exemple typique concerne les titres. En effet, certains développeurs de site n'utilisent pas les balises <H1>, <H2> (etc.) et définissent des classes CSS appliquées à la balise <P>.

C'est un non sens !

Cette approche augmente le poids des fichiers CSS et est en plus contraire aux règles fondamentales du référencement (cf. Optimisation SEO d'un site Web - Partie 2 : le contenu).

Autre exemple, la balise <BLOCKQUOTE> qui permet de réaliser une indentation, plutôt qu'une utilisation systématisée des attributs CSS margin et padding.

Pour une liste des balises HTML, vous pouvez consulter Le Site du Zéro ou cette liste proposée par CodesHttp.com.

Une autre optimisation possible pour réduire le poids de la page est de réduire le nombre de caractères employés.

Par exemple, pour indenter le code, pourquoi utiliser 3 espaces à la place d'une tabulation ? Dans le premier cas, ce sont 3 octets qui sont utilisés, pour 1 dans le second...
Gain potentiel : 66% à chaque indentation !

De la même manière, tous les retours à la ligne et identations sont-ils nécessaires à la lisibilité et la maintenance ?

Par exemple :

                                    
                                        ...
                                        <p>Par exemple, pour indenter le code, pourquoi utiliser 3 espaces à la place d'une tabulation ? Dans le premier cas, ce sont 3 octets qui sont utilisés, pour 1 dans le second...<br />Gain potentiel : 66% à chaque indentation !</p>
                                        ...
                                    
                                

À comparer avec :

                                    
                                        ...
                                        <p>Par exemple, pour indenter le code, pourquoi utiliser 3 espaces à la place d'une tabulation ? Dans le premier cas, ce sont 3 octets qui sont utilisés, pour 1 dans le second...
                                        <br />
                                        Gain potentiel : 66% à chaque indentation !</p>
                                        ...
                                    
                                

Un véritable bénéfice pour la maintenance est-il perceptible ? Je n'en suis pas certain.

Par contre, dans le premier cas, j'ai " gagné " au moins 2 octets (2 retours chariots) qu'il faut multiplier par le nombre de fois pour lequel ce cas de figure se présente.

Potentiellement, ce sont quelques Ko optimisés !


L'une des meilleures manière de réaliser ce travail de suppression des caractères inutiles est d'utiliser des outils ad-hoc, comme HTML Compressor ou Text Fixer.

Si vous préférez un outil local, vous ouvez utiliser Absolute HTML Compressor


Voici ce qu'il est possible d'obtenir (source : les fichiers de www.ahounou.com) :

Non optimisé Optimisé Gain
optimisation-seo-site-web-2 35,48 Ko 26,99 Ko 24% de gain
optimisation-serveur-site-web 31,67 Ko 27,25 Ko 14% de gain

Améliorations CSS

Vous l'avez compris, nous chassons l'inutile. Les recommandations concernant la suppression des caractères superflus évoquées dans Améliorations HTML sont donc tout à fait applicable aux fichiers CSS.

Parallèlement, criez haro sur les définitions de style inutiles.

Par exemple, une définition de la balise <OL> contenant les éléments ci-dessous est tout simplement inutile.

                                    
                                        OL {
                                            ...
                                            display: block;
                                            list-style-type: decimal;
                                            ...
                                        }
                                    
                                

Pourquoi ? Par ce qu'il s'agit de la définition de référence commune à tous les navigateurs !

Pour vous en convaincre, parcourez le site IE Css, maintenu par Jonathan Neal, qui recense les feuilles de style par défaut des navigateurs.


De la même manière, utilisez les propriétés étendues.

Par exemple, les syntaxes ci-dessous :

                                    
                                    #selector1 {
                                        margin-top: 50px;
                                        margin-right: 0;
                                        margin-bottom: 50px;
                                        margin-left 0;
                                    }
                                    
                                    #selector2 {
                                        font-family: Helvetica;
                                        font-size: 14px;
                                        font-weight: bold;
                                        line-height: 1.5;
                                     }
                                    
                                    #selector3 {
                                        background-image: url(background.png);
                                        background-repeat: repeat-y;
                                        background-position: center top;
                                     }
                                    
                                

Peuvent être optimisée en écrivant :

                                    
                                    #selector1 {
                                        margin: 50px 0;
                                    }
                                    
                                    #selector2 {
                                        font: bold 14px/1.5 Helvetica;
                                     }
                    
                                    #selector3 {
                                        background: url(background.png) repeat-y center top;
                                     }
                                    
                                

Vous pouvez trouver un résumé complet des syntaxes abrégées sur le blog de Dustin Diaz : CSS Shorthand/.


Vectorisez aussi vos feuilles de style.

Par exemple, la syntaxe ci-dessous :

                                    
                                    #selector-1 {
                                        margin: 50px 0;
                                        font: bold 14px/1.5 Helvetica;
                                        background: url(background.png) no-repeat;
                                    }
                                    
                                    #selector2 {
                                        margin: 50px 0;
                                        font: bold 14px/1.5 Helvetica;
                                        background: url(background.png) no-repeat;
                                     }
                    
                                    #selector3 {
                                        margin: 50px 0;
                                        font: bold 14px/1.5 Helvetica;
                                        background: url(background.png) no-repeat;
                                     }
                                    
                                

Peut-être vectorisée en :

                                    
                                    #selector-1, #selector2, #selector3 {
                                        margin: 50px 0;
                                        font: bold 14px/1.5 Helvetica;
                                        background: url(background.png) no-repeat;
                                    }
                                    
                                

Et une évidence : supprimez les styles non utilisés.

Autant cette opération peut-être facilement réalisée sur des compositions simples de page, autant elle devient bien plus ardue sur des pages complexes.

Pour ce dernier cas, recourir à des outils adpatés est la seule solution viable. Unused CSS semble une solution... pour ceux qui sont prêt à s'abonner au service. Sinon, différents plugin pour navigateurs existent : Dust-Me Selectors ou CSS Usage pour Firefox ou l'outil d'audit intégré de Chrome.


Astuce extrême, vous pouvez optimiser toutes les définitions nulles en ne précisant pas les unités.

Par exemple :

                                    
                                    #selector-1 {
                                        margin: 0px;
                                        padding: 0em;
                                        width: 0%;
                                    }
                                    
                                

Est strictement équivalent à :

                                    
                                    #selector-1 {
                                        margin: 0;
                                        padding: 0;
                                        width: 0;
                                    }
                                    
                                

Par contre, la différence des 2 syntaxes est de 5 octets... à multiplier par l'ensemble des optimisations de ce type !

Améliorations JavaScript

Nous commençons ce paragraphe par une répétition : supprimez les caractères superflus, comme évoqués dans Améliorations HTML... et Améliorations CSS.


Ensuite, évidemment, supprimez tous les codes morts qui alourdissent inutilement votre fichier.


Pour finir, toute la performance supplémentaire (factorisation de code, performance à l'exécution, etc.) dépend de vos talents et de vos techniques de programmation.
Ces aspects vont bien au-delà de cet article et ne sont donc pas commentés ici, mais vous trouverez des pistes d'amélioration simples à partir de l'article de JavaScript Optimization de Jeff Greenberg.


Il existe aussi une recommandation stipulant que les appels aux fichiers externes JavaScript sont à placer en fin de page HTML.
L'idée est de dire que la priorité de chargement est donnée au contenu de la page, les éléments de code étant chargés en dernier. Dans ce cas, il ne s'agit plus d'optimisation du poids de la page mais d'un confort que vous pouvez (éventuellement) procurer à votre visiteur.
À vous de tester et de décider.

Structure des fichiers

Maintenant que vous avez traité les éléments les plus sensibles pour réduire le poids des pages, un dernier point à prendre en considération est le nombre de fichiers qui composent votre page.
En effet, le nombre de requêtes HTTP est directement lié au nombre de fichiers externes appelés par votre page.


Pour réduire le temps de chargement, il est aussi nécessaire de réduire le nombre de requêtes, par exemple en regroupant au maximum les fichiers CSS et JavaScript.


Cette technique consiste à utiliser un fichier, default.js par exemple, pour regrouper votre code JavaScript générique, i.e. appelé par toutes vos pages (ou presque).
Ensuite, utilisez un fichier spécifique pour les pages ayant du code additionnel.



 

Bénéfices supplémentaires, vous ne chargez, pour chaque page, que ce qui est réellement utile, maximisez l'usage du cache (cf. Optimisation du serveur d'un site Web) et gagnerez en simplicité pour la maintenance !

Remarque : éventuellement, lorsque très peu de code JavaScript est spécifique à une page, il peut-être avantageux d'inclure ce code directement dans la page, plutôt que de provoquer une requête de chargement supplémentaire.

Vous l'avez certainement compris, appliquez le même raisonnement à vos fichiers CSS.

Optimisation des fichiers avec PHP

Enfin, si vous travaillez avec un lanagage comme PHP, vous pouvez aussi réfléchir à des optimisations, plutôt orientées vers la maintenance de vos pages, sans pour autant nuire à la vélocité de votre site.

En effet, les pages sont généralement constituées de 2 blocs principaux, organisés de manières récurrentes :

<html>...</html>
<head>...</head>
  • l'ensemble des balises <meta>
  • un titre et une description
  • les appels aux fichiers CSS externes
  • les appels aux fichiers JavaScript externes
  • le code d'initialisation JavaScript
<body>...</body>
  • l'en tête de la page
  • le breadcrumb (ou chemin de fer)
  • le contenu, souvent organisé par colonnes et/ou blocs d'informations
  • le pied de page

La fonction include (string) du PHP permet d'insérer, sans interprétation préalable, un fichier dans un autre.

Du coup, il est possible de transformer tous les fichier .html en fichiers .php et de mettre à profit cette possibilité pour factoriser les éléments communs de toutes les pages !

Pour le bloc <head> :

  • tout le contenu commun du bloc <head> est regroupé dans un fichier include/metaHeader.inc.php
  • les spécificités de chaque page sont décrites en complément


 

Pour le bloc <body> :

  • l'en-tête de page (pour la partie statique) est déplacé dans un fichier include/htmlHeader.inc.php
  • la colonne de gauche (souvent un menu statique) est déplacé dans un fichier include/htmlBodyLeft.inc.php
  • les éléments communs de la colonne de gauche (nuage de tag par exemple) est déplacé dans un fichier include/htmlBodyRightTag.inc.php
  • le pied de page (pour la partie statique) est déplacé dans un fichier include/htmlFooter.inc.php
  • les spécificités de chaque page sont décrites en complément


 

Et la page devient donc :

                                    
                                    <html>
                                        <head>
                                            <?php include("include/metaHeader.inc.php"); ?>
                                            
                                            <!-- les éléments spécifiques de la page -->
                                            <title>...</title>
                                            <meta name="description" content="..." />
                                            <meta name="keywords" content="..." />
                                            
                                            <link href="css/maPage.css" rel="stylesheet" type="text/css" />
                                            <style>
                                                /* Ne contient que les éléments spécifiques */
                                                ...
                                            </style>
                                            
                                            <script src="scripts/maPage.js" type="text/javascript"></script>
                                            <script type="text/javascript">
                                                /* Ne contient que les éléments spécifiques */
                                                ...
                                            </script>
                                        </head>
                                    </html>
                                    
                                    <body>
                                        <!-- en-tête -->
                                        <?php include("include/htmlHeader.inc.php"); ?>
                                            <!-- le spécifique -->
                                            ...
                                        
                                        <!-- breadcrumb -->
                                        ...
                                        
                                        <!-- colonne gauche -->
                                        <?php include("include/htmlBodyLeft.inc.php"); ?>
                                            <!-- le spécifique -->
                                            ...
                    
                                        
                                        <!-- colonne centrale -->
                                        ...
                                        
                                        <!-- colonne droite -->
                                        <?php include("include/htmlBodyRight.inc.php"); ?>
                                            <!-- le spécifique -->
                                            ...
                                    </body>
                                    
                                

Et, par exemple, pour le contenu du fichier include/metaHeader.inc.php :

                                    
                                        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                                        <meta http-equiv="Content-Language" content="fr">
                                        <meta http-equiv="Expires" content="never" />
                                        <meta http-equiv="Cache-Control" content="public" />
                                        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
                                        
                                        <meta name="distribution" content="global" />
                                        <meta name="robots" content="Index,Follow" />
                                        <meta name="country" content="France" />
                                        <meta name="language" content="french" />
                                        <meta name="copyright" content="..." />
                                        <meta name="email" content="...@monsite.fr" />
                                        <meta name="author" content="..." />
                                        <meta name="designer" content="..." />
                                        <meta name="publisher" content="..." />
                                        
                                        <link rel="shortcut icon" href="shortcut.ico" type="image/x-icon" />
                                        <link rel="icon" href="icon.png" type="image/png" />
                                        <link rel="apple-touch-icon" href="apple-touch-icon.png" />
                                        <link rel="alternate" type="application/rss+xml" title="..." href="..." />
                                        
                                        <link href="css/default.css" rel="stylesheet" type="text/css" />
                                        <link href="..." rel="stylesheet" type="text/css" />
                                        
                                        <script src="scripts/default.min.js" type="text/javascript"></script>
                                        <script src="..." type="text/javascript"></script>
                    
                                        <script language="javascript" type="text/javascript">
                                            /* code d'initialisation */
                                            ...
                                        </script>
                                    
                                

À ce stade, vous avez compris comment rationaliser votre structure de fichiers afin d'améliorer grandement la maintenance, sans qu'il soit nécessaire d'illustrer les fichiers include/html_xxx_.inc.php.

La suite du travail de rationalisation ne devrait vous demander que peu d'effort pour être adapté à votre site.

Conclusion

Dans cet article, nous avons vu comment optimiser le poids de vos pages et évoqué quelques astuces d'amélioration de la maintenance générale de votre site.

Si vous n'aviez procédé à aucun travail d'optimisation spécifique, vous pourriez être littéralement bluffé par le régime durable que vous avez fait subir à votre site, sans aucune perte de fonctionnalités.

Et pour continuer dans la lancée, vous pouvez regarder ce que j'ai synthétisé dans les autres articles pour optimiser votre site web.