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 :
5,97 Ko (taille 14,65 Ko).
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 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">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 16/08/2024
Un oubli, une erreur, une suggestion ? Rendez-vous sur le dépÎt GitHub !