Introduction

Depuis l'arrivée du SEO, une manière de développer insoupçonnée, connue sous le nom «PageSpeed Insights» par Google, offre la possibilité d'améliorer la première impression qu'un utilisateur à d'un site, soit en gros «Sa vitesse». L'utilisateur est malheureusement parsemé de préjugé, bien que l'apparence soit souvent celui qu'on s'occupe en premier, il y a un autre, tout aussi important, c'est ça vitesse de présenté l'information. Pourquoi est-ce devenu aussi important ? Lorsqu'un utilisateur effectue une recherche avec un moteur de recherche, il a tendance a cliquer sur les premières pages du résultat de recherche, et s'il attend trop après le premier lien, il passe au deuxième et ainsi de suite ! Vous êtes donc disqualifié avant même d'avoir présenté votre contenu. Voici quelques points pouvant changer ce détail très important d'un site Web :

1. Chemin de rendu critique

On entend par pour ce concept «le code et les ressources nécessaires à l'affichage du rendu de la page Web initiale». Ainsi, le navigateur en analysant votre page HTML peut se rendre compte qu'il est nécessaire d'avoir d'abord un ou des fichiers .CSS, ainsi que des fichiers JavaScript afin d'obtenir son affichage, il faudra faire en sorte qu'il n'attendra pas inutilement après des bouts de codes inutiles pour l'affichage de base.

2. Temps de réponse du serveur

Il s'agit du temps entre la demande d'un navigateur Web effectue à un serveur avant d'obtenir tous les éléments d'une page Web. Les serveurs ont une limite de navigateur Web pouvant être répondu simultanément, il faudra faire en sorte que chacun des utilisateurs est sa réponse rapidement soit en proposant plus de serveurs dédiés ou en modifiant le code de façon à éliminer les mécanismes inutiles, dans certains cas, il pourrait être souhaitable de dédiée un serveur uniquement pour les images, d'autres pour les sessions,... A chaque appel distinct d'un fichier ou d'une page d'un serveur Web, le délai est extrêmement long, il faut donc, réduire le nombre de fichiers CSS, d'images et de JavaScript. De plus, si vous hébergement mutualisé ne fournit plus de bon rendement, vous devrez envisager de passé à l'hébergement dédié ou au VPS Hosting. Bien que des serveurs Web comme Apache soient très populaires et bien documentés, il n'est pas nécessairement la meilleure alternative pour des sites avec un gros volume de trafic, vous devrez envisager d'utiliser Nginx ou Litespeed. Si votre site Web utilise beaucoup la base de données, vous devrez surement envisager d'utiliser MariaDB plutôt que MySQL par exemple.

3. Durée du cache du navigateur Web

Votre navigateur Web lorsqu'il navigue sur un site Web, doit mémoriser dans un cache, les images, logo et CSS ainsi que d'autres ressources qu'il utilisera probablement dans la majorité des pages. Si vous indiquez un délai d'expiration plus long comme des mois pour des éléments changeant moins souvent sur votre, vous réduirez considérablement les appels au serveur Web car il ne demandera pas de recharger ceux-ci a chaque changement de page. On peut définir manuellement se genre de paramètre à l'aide du fichier .htaccess et de directive suivante :

De plus, Google recommande d'utiliser le «Cache-Control max-age» pour obtenir de meilleur résultat.

4. Renduire le blocage JavaScript

Si une partie de l'affichage nécessite l'utilisation du JavaScript pour s'afficher, cela signifie que vous perdez du temps à attendre que le fichier JavaScript associé soit chargé avant que le navigateur puisse continue d'afficher le contenu de votre page. Ainsi, il est recommandé de supprimer le JavaScript interférant avec le chargement de la page.

5. Prioriser le contenu visible

La plupart des sites Web ont beaucoup de contenu à charger et pourtant certains sont extrêmement rapides par rapport à d'autres... L'astuce réside simplement dans le faut priorisé le contenu de votre page Web avant les éléments complémentaires.

6. Activer la compression GZip

De nombreux hébergeurs offre à l'aide du cPanel la possibilité d'activer la compression GZip, en généralement, l'activation réduit le nombre de données envoyer au navigateur Web par 2, ainsi, si votre bande passante consommer est de 4 Go par mois, vous devriez constater qu'elle passera à environ 2 Go par mois suit à l'activation de cette option.

7. Traiter les CSS avec «Minify CSS tool»

L'humain a tendance à écrire son code de façon dégager et assez simple afin d'en facilité la compréhension, mais cette façon de procédé dans le cas d'un fichier CSS fait en sorte qu'on rajoute des espaces et des sauts de lignes grossissant inutilement la taille d'un fichier. De plus, il aura souvent tendance à séparer ses attributs de chacun des côtés (gauche, droite, haut et bas) plutôt que d'indiquer la bordure tout simplement. Un outil très efficace pour éliminer tout ce code inutile lorsque vos CSS sont terminés, consiste à utiliser «Minify CSS tool». Celui-ci le transformer sans aucune compression, en un code beaucoup plus compact.

Voir également

Articles - Optimisation pour des sites à haut niveau de trafic
Langage de programmation - JavaScript - Optimisation - AJAX
Langage de programmation - PHP - Bonnes pratiques (Optimisations)
Langage de programmation - MySQL - Optimisation