Performances SEO, chargement rapide des pages?

La mauvaise habitude est de s’inquiéter des performances SEO une fois le site mis en production. C’est déjà bien mais un peu tard. Comment rattraper le coup? Les explications pour que votre site internet se charge rapidement.

Pour des pages rapides, voici quelques conseils de performances à prendre en considération :

  1. Mes images sont-elles optimisées ?
  2. La main lourde sur les CSS et Scripts ?
  3. Serveur : configurez les directives de cache, compression, expirations
  4. Votre site est évidemment en HTTPS : activez HTTP/2

Optimisations poids des images

Les images jouent un rôle déterminant et représentent sans doute le plus grand rôle dans le temps de chargement des pages. Aujourd’hui, la jeune génération a toujours connu le haut débit, le wifi et la 3G/4G. Certains designers/intégrateurs n’ont pas cette problématique des performances SEO en tête lors des exports de découpes et photos. Le poids des images a toujours été le fer de lance de l’Optimisation. Il est donc primordial d’optimiser chaque élément graphique en utilisant les bons formats (JPG, GIF, PNG, SVG) et les tailles adéquates (une image carrée de 800px  ne peut se retrouver réduite avec un width=”400px”. Pourtant, c’est souvent le cas. Cette image sort du studio avec un poids de près 1Mo et se retrouve sur le serveur de production. Déjà-vu n’est-ce pas ?

Un contrôle simple est rapide consiste à utiliser la console de votre navigateur à l’onglet Réseau. Cochez la case désactivation du cache, vue liste, sélection des img. Triez la colonne Poids, vous avez ainsi toutes les images lourdes du site.

Optimisation poids des images pour seo, navigateur
Optimisation du poids des images pour le SEO, console navigateur > réseau > liste par Poids des images

Les options d’optimisations des images

  1. En amont, sensibilisez les designers et intégrateurs au travail d’optimisation des découpes exportées.
  2. Il existe des optimiseurs d’image en ligne pour vérifier et optimiser le poids des images tout en gardant le ratio poids/qualité. Optimizilla ou Compressor (entre autres) sont deux solutions en ligne intéressantes avec des traitements fins d’optimisations et par lot.
  3. Configurez Pagespeed de Google (mod_pagespeed) sur votre serveur Apache ou Nginx. Il permet d’optimiser automatiquement les images (compression et taille), d’activer le lazy-loading sur les images, et bien d’autre points que nous verrons plus loin.
  4. Votre site internet à des contraintes fortes à l’international? Le CDN devient obligatoire et permettra une distribution de proximité à vos visiteurs. Aujourd’hui des solutions payantes plus ou moins chères permettent d’héberger vos média mais aussi de les optimiser à la volée). Le CDN Cloudflare est intéressant et moins onéreux que le CDN CloudFront d’Amazon.

Des CSS & JS plus rapide à charger

La plupart des sites internet (et e-commerce) sont réalisés avec un CMS, vous bénéficiez donc des fonctionnalités de performances natives (ou par plugin) de la compression, concaténation et minification des CSS / JS.

Un site moyen a environ une dizaine de fichiers JS et CSS (sur le serveur et en appels externes). La première étape consiste à activer la concaténation afin que les fichiers internes se regroupent en un seul fichier JS + un fichier CSS. Au lieu d’avoir 10 appels vous en avez maintenant plus que deux ! Autorisez la minifcation des CSS et Javascript (ils deviennent maintenant franchement illisibles).

/* CSS concaténés et minifiés */
<link type="text/css" media="all" href="http://www.kiwii.ch/wp-content/cache/autoptimize/css/autoptimize_8b558e263e21e7299c923571ce3fabd2.css" rel="stylesheet"/><title>

Maintenant, certains fichiers JS peuvent être exécutés de manière asynchrone ou différée avec les attributs async ou defer de la balise JavaScript. Le but de ces deux attributs est de charger et lancer l’interprétation de code JS sans bloquer le rendu HTML de la page. Le temps chargement de la page n’est donc plus gêné par l’attente d’un script lent (chargement en cascade).  On évitera cependant de mettre l’attribut async au script Jquery 🙂

/* Fin de page, attribut defer. JS concaténés et minifiés */
<script type="text/javascript" defer src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js?ver=0.6.2"></script>
<script type="text/javascript" defer src="http://www.kiwii.ch/wp-content/cache/autoptimize/js/autoptimize_79a59faa4178ff4266f97b047d80b410.js.pagespeed.jm.nekyb5rveb.js"></script>

Configuration des performances serveur

Vous devez avoir un serveur dédié ou accéder aux configurations de performances  (.htaccess pour Apache et certains modules activés ci-dessous) ou directives pour Nginx. Liste non-exhaustive mais correspondant à mes attentes dans l’ordre des priorités :

Compression gzip via Nginx

Le serveur va compresser les données (code HTML, CSS, JS, …) parfois jusqu’à environ 80% de leurs poids! Les données transitent ensuite compressées sur le réseau et sont enfin décompressées à la volée dans le navigateur. Directives Nginx:

gzip            on;
gzip_min_length 1000;
gzip_proxied    any;
gzip_types      gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;
gzip_vary       on;

Mise en cache

La mise en cache est utilisée afin de réduire la consommation de bande passante, la charge du serveur web (les tâches qu’il effectue) et in fine améliorer drastiquement la rapidité d’affichage sur votre navigateur. Les plus importants:

  • Cache-control
  • Expires
  • Etag

Exemples d’une entête pour un fichier CSS :

cache-control:max-age=30672000, public, immutable, s-maxage=10
content-encoding:gzip
content-length:41542
content-type:text/css
date:Tue, 25 Jul 2017 17:59:32 GMT
etag:"26c28-55516c4cde35e"
expires:Sun, 15 Jul 2018 17:22:44 GMT
last-modified:Mon, 24 Jul 2017 21:19:23 GMT

Pour Nginx voici là configuration avec 1 an de validité :

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    expires 1y;
    add_header Cache-Control "public, no-transform";
    etag on;
}

Enfin la réduction du TTFB est aussi très importante, elle devrait se situer <200ms. Veillez à activer KeepAlive (dans Apache) ou à travers les directives Nginx :

keepalive_timeout 30;
keepalive_requests 100000;

HTTPS : activez HTTP/2

C’est la version majeur du protocole HTTP (transmission d’hypertexte) dans sa version 2 ! Vous pouvez vérifier si votre site le supporte.

Réduction de la latence améliorant les temps de chargement sur navigateurs grace à (entre autres) : la compression de données des en-têtes HTT, mécanisme de push de HTTP/2 permettant au serveur d’envoyer au client des données nécessaires mais qu’il n’a pourtant pas encore sollicitées, pipelining des requêtes, multiplexage de plusieurs requêtes au travers d’une seule connexion TCP !

Source photo: SpaceX

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *