L’index mobile-first de Google est en cours de progression, et une fois qu’il sera en ligne, la vitesse de la page deviendra l’un des facteurs de classement les plus importants pour les requêtes de recherche mobiles.

Si vous n’avez pas encore accéléré votre site, il est temps de le faire !

La plupart d’entre nous sont déjà conscients de l’importance de vérifier le site sur Page Speed Insights, de créer des pages AMP et de mettre en œuvre un DNS, donc je ne discuterai pas des moyens de base pour accélérer votre site.

Voici quelques moyens peu connus que vous pouvez facilement mettre en œuvre pour booster la vitesse de votre site comme jamais auparavant :

1- Évitez d’imbriquer vos tables

De nombreux webmasters continuent de créer des pages web en utilisant des tables imbriqués, ce qui ajoute une charge supplémentaire sur le navigateur et retarde le temps de chargement de la page. Un exemple de tableau imbriqué est fourni ci-dessous :

<table> 

<table> 

<table>

 … 

</table> 

</table>

</table>

Au lieu des tables imbriqués, vous pouvez utiliser des tables non imbriqués comme indiqué ci-dessous :

<table>…</table>

<table>…</table>

<table>…</table>

De plus, vous pouvez utiliser des flottants et des grilles pour améliorer la vitesse de chargement du HTML. Les flottants aident à afficher une image à côté de blocs de texte de manière plus rapide. De même, les grilles vous permettent de créer des mises en page de site modernes en utilisant CSS pour créer des grilles. Vous pouvez en savoir plus sur la création de flotteurs et de grilles sur le site Web de Mozilla.

2- Ajouter la pagination à la section des commentaires

Il est nécessaire d’ajouter une section de commentaires sur le site Web afin de démarrer une discussion. Cependant, nous oublions souvent que le chargement de centaines de commentaires sur une page Web à fort trafic va certainement créer de nombreux problèmes de chargement.

Pour résoudre ce problème, je vous recommande d’ajouter une pagination à la section des commentaires de votre site Web. Si vous utilisez un blog WordPress, accédez à la section Paramètres et cochez la case indiquant « diviser les commentaires en pages… ».

3- Mettre à niveau vers PHP 7.4

Je sais qu’il n’est pas si facile de continuer à mettre à jour votre site Web à chaque fois qu’une nouvelle version est lancée, mais croyez-moi, c’est nécessaire. Les dernières versions du logiciel sont beaucoup plus rapides que les versions précédentes, il est donc logique de passer à la version la plus récente.

Jetez un œil au tableau de comparaison ci-dessous des différentes versions de PHP qui suggère qu’un script s’exécute 26 % plus rapidement sur PHP 7.1 par rapport à la version précédente (vous pouvez consulter l’étude originale ici ).

4- Installez le plugin WP Rocket

Si votre site web est sous WordPress, alors la première chose à faire est d’installer le plugin WP Rocket . Il minimise automatiquement HTML, JavaScript et CSS. Permet la mise en cache du navigateur, la mise en cache des pages, l’optimisation de la base de données et le chargement différé.

Un test effectué par CodeinWP a suggéré que WP Rocket (voir l’image ci-dessous) était capable de réduire la vitesse de chargement du site d’environ 65 % . Impressionnant, n’est-ce pas ?

5- Inclure une barre oblique finale lorsque vous pointez vers votre site Web

Jeremy Knauff a merveilleusement expliqué l’importance d’avoir une barre oblique à la fin des liens pointant vers votre site.

La raison est assez évidente, si vous omettez la barre oblique, le serveur recherche un fichier portant ce nom, créant une redirection 301 inutile, puis lorsqu’il est incapable d’en trouver un, il recherche un répertoire. Cela crée une charge inutile sur le serveur et les performances sont réduites.

https://monsite.com (URL sans barre oblique – « non recommandé »)

contre

https://example.com/ (URL avec une barre oblique à la fin – « recommandé »)

6- Réduire la taille du contenu au-dessus de la ligne de flottaison

Minimisez les allers-retours supplémentaires sur le réseau pour charger le contenu au-dessus de la ligne de flottaison de votre page Web.

La fenêtre de congestion initiale est d’environ 14,6 Ko (compressée) et si la taille de votre page dépasse cette fenêtre, le résultat est le retard du temps de chargement.

Maintenant, la question est – comment pouvez-vous y parvenir?

La réponse est – autorisez le contenu au-dessus de la ligne de flottaison à se charger en premier en modifiant l’ordre de chargement. Par exemple, si votre code HTML charge d’abord les widgets tiers, modifiez le code pour charger d’abord le contenu du corps principal. Minimisez les ressources en supprimant les espaces blancs et les commentaires inutiles. Au lieu de charger d’abord la barre latérale, autorisez le code HTML à charger le corps du contenu principal en tant que premier élément. De plus, activez la compression et envisagez d’utiliser CSS au lieu d’images .

7- Nettoyez la quantité de contenu visuel que vous avez sur une seule page

Ce n’est pas une bonne idée d’inclure beaucoup de contenu visuel comme plusieurs gifs et vidéos car cela peut potentiellement ralentir le temps de chargement du site.

Pensez à regarder la page d’accueil de Google News ; la page a des images plus petites (toutes optimisées), des liens vers des vidéos, un design épuré et une interface épurée.

Au lieu d’avoir trop d’informations sur une seule page, Google Actualités est l’un des 5 sites de médias les plus rapides au monde aujourd’hui.

8- Interdire les liens directs

Le hotlinking se produit lorsqu’un autre site utilise une image hébergée sur votre serveur. Cela gaspille littéralement beaucoup de bande passante, ce qui ralentit les temps de chargement car le serveur reste occupé à traiter trop de demandes.

Vous pouvez empêcher le hotlinking en ajoutant un petit morceau de code dans le fichier .htaccess. Voici un exemple de code :

RewriteEngine onRewriteCond %{HTTP_REFERER} !^$RewriteCond %{HTTP_REFERER} !^http://(www\.)example.com/.*$ [NC]RewriteRule \.(gif|jpg|jpeg|bmp|zip|rar |mp3|flv|swf|xml|php|png|css|pdf)$ – [F]

Vous pouvez créer votre propre code en fonction des domaines pour lesquels vous souhaitez autoriser le hotlinking. L’outil htaccess générera un code personnalisé en fonction de vos besoins exacts.

9- Faites le WebPageTest

WebpageTest est l’un des moyens les plus intelligents d’identifier les problèmes majeurs liés à la vitesse du site.

Entrez simplement le domaine à tester, et cet outil fournira une note sur chacun des éléments importants suivants qui ont un impact sur la vitesse du site :

• Time to First Byte (TTFB) qui mesure la réactivité du serveur.
• Utilisation de l’en-tête HTTP enable keep-alive (connexion persistante).
• Utilisation de la compression Gzip.
• Utilisation de la compression d’images.
• Tirer parti de la mise en cache du navigateur pour les ressources statiques.
• Utilisation efficace du CDN.

Voici une capture d’écran du WebpageTest pour Amazon.com. Remarquez les notes en vert et en jaune. Le test fournit des données complètes que vous pouvez partager avec votre équipe de développement pour optimiser davantage la vitesse de votre site à des niveaux de perfection.

10- Gardez CSS en haut et JavaScript en bas

N’ajoutez pas de CSS entre les pages car cela augmente le travail du navigateur et ralentit le site.

Ajoutez des fichiers CSS en haut de la page Web car cela interdira le rendu progressif et économisera des tonnes de ressources (voir l’exemple de code ci-dessous).

<!DOCTYPE html>

<html>

<tête>

<link rel= »stylesheet » href= »votrefeuille de style.css » />

</tête>

<corps>

Votre contenu principal

</body>

</html>

De plus, ajoutez du code Javascript au bas de la page Web juste avant la balise de fermeture du corps (voir le code ci-dessous) car cela chargera la page Web plus rapidement car le navigateur n’attendra pas l’exécution complète du code avant le chargement.

<script type= »text/javascript » src= »votresource.js »></script></body></html>

11- Supprimer les médias inutilisés

C’est l’une des tactiques les plus négligées lorsqu’il s’agit d’améliorer les temps de chargement.

Votre serveur contient peut-être de nombreuses images que vous n’utilisez plus. Vous devez supprimer ces images et libérer de l’espace.

Pour les utilisateurs de WordPress, comme le suggère Darcy Wheeler , allez simplement dans Ajouter un média -> Médiathèque -> Non attaché et supprimez les fichiers qui ne sont plus utilisés.

C’était facile ! 

Maintenant, ne perdez plus de temps à accuser vos développeurs de ralentir votre site Web. Organisez une réunion, prenez une tasse de café et partagez les astuces ci-dessus avec votre équipe. Une fois mises en œuvre, ces tactiques vont sûrement accélérer votre site comme jamais auparavant.

Une nouvelle astuce que vous avez commencé à utiliser récemment pour améliorer la vitesse de votre site ? Vous pouvez me la partager en commentaire ci-dessous 🙂