Tél: +33 6 65 72 79 70 

Tél: +33 6 65 72 79 70 Email: fouad@prestation-site-internet.com

Optimisations du temps d'affichage des pages web

Critère désormais devenu incontournable si l’on souhaite mettre toutes les chances de son côté pour obtenir un meilleur référencement et un meilleur confort pour les utilisateurs…. La rapidité d’un site et les Optimisations du temps d’affichage des pages web. En effet d’un point de vue utilisateur rien de pire qu’un site qui met deux plombes à charger, passe encore pour une page mais lorsqu’il s’agit de patienter plusieurs secondes à chaque affichage cela devient vite fatigant. D’un point de vue moteur de recherche, quoi de pire que d’avoir des sites mal faits, pas optimisés, avec des pages qui font plusieurs Mo, ce qui ralentit énormément le rendement des robots qui scannent les sites.

 

Les choses qui ralentissent vos pages

Je vais tenter d’expliquer les choses qui peuvent ralentir une page et décourager vos visiteurs de rester:

1 – Le nombre de requêtes effectuées par votre page

Plus votre page html contiendra d’éléments plus celle-ci lancera de connexion auprès de votre serveur, j’entends par éléments, les images, les appels aux fichiers css et aux fichier JS essentiellement. Ceci concerne les critères « onpage », à ajouter à cela les critères « offpage » occasionnés par vos script php/asp et appels aux bases de données, dans la même logique que les critères onpage plus vous en ferez plus vous solliciterez votre serveur.

La méthode qui pourrait paraître être la plus simple serait de prendre un serveur puissant pour absorber tous les chocs que vos nombreux appels pourraient occasionnés, seulement si cela était aussi facile cela se saurait, bien que cela ne soit pas totalement inutile bien évidemment.

Une bonne gestion de vos appels de fichiers onpage et un bon codage de vos scripts seraient bien évidemment la meilleure solution. Il vaut mieux corriger les problèmes à la racine plutôt que de faire du tricotage :).

Plusieurs solutions existent pour palier à ces problèmes de critères onpage et offpage, notamment le plus important la mise en cache de vos pages, il existe plusieurs types de cache, chacun avec ses avantages et ses inconvénients, d’autant que le cache serveur et le cache navigateur ne sont effectifs qu’après un premier affichage de l’utilisateur … autrement dit le visiteur verra votre première page sans aucun artifice, sans aucun cache, le temps que le cache se construise lors d’une première requête.

Le cache serveur permet de stocker les pages générées pour un délai à définir sur votre propre serveur et de les distribuer à vos visiteurs, ainsi on gagne notamment sur les requêtes de type offpage (script phps et mysql), les critères devront eux toujours êtres chargés. Le cache serveur est difficilement applicable pour vos applications nécessitant un espace membre.

Le cache navigateur permet de stocker vos pages, vos fichiers html, images, JS et CSS directement dans le navigateur de votre visiteur pour peu qu’il n’est pas configurer que son navigateur ne cache aucune page, je vous rassure ce n’est pas la configuration par défaut d’un navigateur.

Il existe un autre type de cache pour mettre en cache les requêtes PHP dans la mémoire de votre serveur, j’en parlerai plus tard.

Vous l’avez compris, dans la plupart des cas le cache ne suffit pas à lui seul, une optimisation en amont est nécessaire. Que cela soit dans le cadre de l’utilisation d’un CMS (système de gestion de contenu) ou bien sur un site « sur mesure » il existe plusieurs méthodes pour optimiser ses appels onpage, d’une manière générale il « suffit » de diminuer le nombre de requêtes effectuées. Je dis il suffit entre guillemets car il arrive que le travail soit laborieux notamment dans le cas des CMS ou il faut prendre en compte la manière dont sont faits les scripts développés par leurs auteurs respectifs, il arrive souvent qu’il y ai des conflits notamment à cause de la librairie jQuery …

 

2 – Les appels de scripts externes

Déjà qu’il est assez difficile de contrôler les choses qui se passent sur son propre serveur, alors imaginez ce que cela peut être lorsqu’il s’agit de script externe sur les lesquels vous n’avez pratiquement aucun contrôle … Parmi les scripts externes les plus communs on a tout les fichiers qui servent à afficher les différents grigris de facebook, de twitter et tout le tralala du même genre. Ces sites bien que disposants de grands moyens peuvent connaitre des surcharges et cela se traduit par un impact direct sur vos pages. Il convient donc de les utiliser avec mesure et de bien comprendre l’incidence que ces scripts peuvent avoir sur votre propre site.

Il existe de nouvelles méthodes (ou pas)  qui permettent de palier à certains lenteurs d’affichage, en effet lorsque ces script sont placés en début de page, tant que ceux-ci ne sont pas chargés alors le restant de la page ne se charge pas, c’est là que vos visiteurs poireautent la plupart du temps. Pour palier à ce problème il est possible de manière simple de déplacer ces codes vers le bas de votre page, au moins si cela bloque cela bloquera en ayant chargé la majeure partie de votre page et ne dérangera pas tant que ça votre visiteur. Vous en conviendrez cette méthode est un peu sale, surtout lorsqu’on sait qu’il existe au moins deux autres méthodes qui permettent de communiquer avec le navigateur du visiteur afin de lui dire de continuer le chargement des pages pendant le chargement des scripts, on appelle cela les chargé de manière asynchrone.

L’autre méthode similaire à la méthode asynchrone est la méthode « defer », elle permet tout comme l’autre de charger les scripts pendant le que le reste de la page se charge, à la différence que celle-ci respecte l’ordre des appels, elle appelera donc chacun des fichiers JS dans l’ordre de leur apparition dans la page html.

 

Quelques outils pour mesurer et contrôler le temps d’affichage de vos pages:

Gmetrix en mode gratuit, cet outil vous permet de bénéficier de deux analyses basées sur les célèbres plugin de moteur de recherche, le page speed de google et le yahoo slow de … Yahoo :), l’outil vous permettra d’avoir une belle vue d’ensemble d’un point de vue des deux moteurs ce recherche les plus connus, seul inconvénient, le serveur de test n’est pas configurable et du coup tous les tests se font depuis Vancouver au canada, ce qui n’est pas forcément idéal pour un site basé en Europe

webpagetest gratuit aussi vous permet aussi de connaitre les scripts qui ralentissent vos pages, sur un système de note, il vous orientera sur ce que vous pouvez corriger, l’avantage de cet outil est qu’il est possible de configurer la ville du serveur de test, de configurer le navigateur utilisé par le serveur etc, ma préférence va pour celui-ci bien que niveau design je préfère Gmetrix 🙂

Vous pouvez bien évidemment installer les outils de ces moteurs de recherches directement dans vos navigateurs grâce à des modules téléchargeables dans le google chrome center ou dans le firefox center

 

C’est trop compliqué pour vous ?

Le travail d’optimisation est un travail de longue haleine, il peut faire mal à la tête et vous donner des cheveux blancs, c’est pourquoi je me propose, dans le cadre de mes prestations de le réaliser pour vous.  Il s’agit d’un travail qui consiste à configurer, à tester et pour de meilleures résultats à modifier en profondeur et en amont les quelques scripts qui posent problème. Il est bien évidemment possible de faire un travail minimum pour des résultats … minimums. N’hésitez pas à prendre contact avec moi