Performances
Attention, on va parler ici de performances front-end : il ne s'agit donc pas d'optimisation côté serveur, mais plutôt d'améliorer les temps de téléchargement et rendu côté client !
Malheureusement, alors que le sujet est assez populaire dans
la communauté de concepteurs web au moins depuis 2007, les bonnes pratiques ne sont
pas encore installées ! Et pourtant, bien souvent c'est bien là que les performances
pèchent...
Voyez par exemple cette capture d'un site dynamique peu optimisé : le rendu total
dure 1.21s, dont environ 300ms de rendu serveur... soit moins du quart !
Pour optimiser son site, il faut travailler autour des 3 axes suivants... Les méthodes pour y parvenir sont détaillées ci-après.
Pour diagnostiquer, vérifier ce qui est mis en place etc il va falloir s'outiller ! Quelques exemples de logiciels importants :
Quelque soit le format de l'image (PNG, JPEG, GIF, WebP), il y a possibilité d'optimiser la taille... ne serait-ce qu'en supprimant les métadonnées, et aussi bien sûr en faisant varier la compression pour s'approcher du meilleur compromis taille/qualité !
Plusieurs sites proposent ce service en ligne, et également des outils à installer. Citons en particulier PNGCrush et le site http://compresspng.com/.
Un moyen de réduire la taille des resources transmises est de supprimer les commentaires et caractères blancs (espaces, tabulations, ...). En particulier sur les fichiers CSS et JavaScript, le gain peut être important !
Il existe aussi la compression gzip. C'est un mécanisme présent depuis longtemps
maintenant et par conséquent très largement supporté !
Voir cet article pour plus de détails : Cache et compression des pages web avec Gzip ou Deflate en HTTP - Alsacreations.
Plusieurs outils proposent de réaliser ces tâches de manière automatique, et il est bien sûr possible de le faire dynamiquement sur le serveur à chaque requête ou de l'intégrer à votre outil de build.
Sur le serveur de pages perso de Free malheureusement, il y a peu de latitudes
de configuration. Mais il reste possible d'utiliser plusieurs mécanismes !
Cet article m'a donné toutes les clés pour avancer : Activer la compression sur les Pages Perso - Les Pages Perso Chez Free
Et j'ai donc mis en place une compression sur :
<?php ob_start('ob_gzhandler'); et <?php ob_end_flush(); ?>)Les fichiers CSS et JS ont été minifiés et compressés en utilisant un site permettant d'utiliser l'excellent YUI Compressor en ligne : Online YUI Compressor.
Exemple de moyens disponibles au développeur :
Content-Encoding :"gzip" et
Content-LengthPremière chose à faire pour réduire le nombre de requêtes HTTP : regrouper le code ! En particulier en CSS et JavaScript (on verra au chapitre suivant que c'est possible pour les images également).
Aussi, on peut servir les resources depuis un domaine différent de la page : celà permet de contourner une limitation du navigateur. En particulier sur la GepapiR, plusieurs resources sont appelées sur les sites originaux :
Les CSS Sprites sont une technique permettant de réduire le nombre de resources à appeler dans une page : on regroupe en effet plusieurs images en une seule ! Cela permet aussi de mieux gérer la politique de cache, et parfois apporte des gains de taille de fichiers (un fichier regroupant plusieurs icones aura souvent une taille inférieure à la somme des petits fichiers de chaque icone).
Le principe est simple : plutôt que d'insérer avec la balise img,
on crée un élément que l'on dimensionne à la taille de l'image, et on lui applique
une image de fond. Cette image de fond regroupe les resources identiques, on
sélectionne l'image voulue grace à background-position;.
Cet article chez Alsacreations explique bien la chose : Les sprites CSS - Alsacreations.
Sur la GepapiR, ce sont les séparateurs et les icones du menu de navigation qui
utilisent cette technique (respectivement, mêmes largeurs et mêmes hauteurs).
Les images ont été regroupées grace à l'excellent Stitches !
Le code :
<!-- Séparateurs -->
<style>
hr.sep
{
clear: left;
margin: 4ex auto;
width: 630px;
border-style: none;
background-image: url("../images/separateurs/separateurs-sprites.png");
background-repeat: no-repeat;
box-shadow: 1px 1px 8px rgba(0,0,0,0.5);
}
/* Win 3.x */
hr.sep1
{
height: 23px;
background-position: 0 -59px;
}
</style>
<hr class="sep sep1">
<!-- Icone menu navigation -->
<style>
nav a>span.menu_icon
{
display: inline-block;
width: 15px;
height: 15px;
margin-right: 5px;
vertical-align: baseline;
background-image: url("../images/menu/menu-sprites.png");
background-repeat: no-repeat;
}
nav a#menu_accueil>span.menu_icon {
background-position: 0 0;
}
</style>
<a href="..." id="menu_accueil">
<span class="menu_icon"></span> Accueil</a>
C'est un moyen simple de réduire le nombre de requêtes : permettre de mettre en cache sur le navigateur des resources, qui ne seront ainsi téléchargées que une seule fois !
Malheureusement sur le site des pages perso de Free il n'est pas possible d'utiliser
les directives pour personnaliser le comportement du serveur... Aussi faut-il se
contenter de la configuration par défaut, basée sur Etag et requêtes If-Modified-Since.
En conséquent, si on gagne sur les données transférées, on a quand même toujours
des requêtes http qui partent...
Le document d'absolu référence sur le sujet, qui vous fera tout comprendre du fonctionnement du cache sur HTTP, et vous permettra de décider quelle technique adopter pour vos besoins : Un tutoriel de la mise en cache pour les auteurs Web et les webmestres.
Chapitre à venir au prochain épisode ! :)
Quelques sites pour en apprendre un peu plus :
Création le 13/08/2014
Dernière mise à jour le 29/08/2014
Un oubli, une erreur, une suggestion ? N'hésitez pas à me contacter sur pgoiffon -at- free.fr