Contexte
L'optimisation des moteurs de recherche (SEO) semble être de retour. Au cours des derniers mois, j'ai remarqué que les gens se réjouissent dès que je mentionne que mon équipe et moi sommes experts en la matière. Pour beaucoup, cela signifie qu'ils apparaîtront dans les résultats lorsque les gens les « google ».
Alors que le public n’a qu’une seule idée de ce qu’est le SEO et qu’il s’intéresse à la manière dont le référencement peut améliorer leur présence en ligne, chaque fois que je mentionne le terme à d'autres spécialistes du marketing ou des programmeurs, ils grincent un peu des dents. La question habituelle qu’ils me posent aussitôt est « que veux-tu dire par SEO ? ».
Cela est justifié compte tenu de l'histoire fragile du SEO dans la communauté techno. C'est toujours le souci numéro un du client et c'est presque impossible à promettre puisque c'est comme jurer que le soleil se pointera le bout du nez le jour de votre mariage. Il y a trop de facteurs à considérer. Ce n’est pas une question qui se tranche par oui ou non – c’est ce que les clients veulent entendre. C’est plutôt une conversation nuancée sur la stratégie à adopter et le marketing.
Le type de « SEO » auquel je me réfère est une liste de contrôle technique. Google a les meilleures pratiques et outils lorsqu’ils testent des sites internet. Plus vous cochez de cases, plus vous obtenez de « points » de la part de Google et plus votre classement est élevé. Chez Drive, nous essayons de cocher le plus de cases possibles. (Ceci est généralement limité par le temps et le budget).
J’ai donc créé une liste de 3 éléments qui sont souvent négligés. Ils ont été choisis, car ce sont des points rapides ayant un impact important (étant donné le peu de travail impliqué dans leur mise en place).
Trois Astuces
Alors, quelles sont ces trois éléments magiques qui vont améliorer le classement de votre site? C’est simple :
1. Installez un certificat SSL
2. Activer la mise en cache du navigateur
3. Activer la compression
Et voilà ! 3 astuces, comme je l'avais promis :)
Trois Astuces: Explications
Alors, comment implémentez ces éléments ? Eh bien, si vous êtes complètement novice en développement web ou n'avez pas d'expérience en programmation, ces tâches vont sembler décourageantes. Si vous êtes un développeur Web expérimenté, vous avez probablement défiler la page vers le bas, vu la liste et vous êtes dit « pfft, je l'ai déjà fait, qu'est-ce que je suis, un idiot ? ».
Si vous vous situé quelque part entre les deux, ces éléments ne sont pas difficiles à mettre en place et sont souvent négligés lors du lancement d'un nouveau projet, car ce sont de petits détails qui sont moins importants que de « faire fonctionner le site ». À proprement parler, ne pas mettre en place ces détails ne chamboulera pas tout votre travail, mais vous manquerez une chance de marquer des points faciles auprès de Google.
Soyons un peu plus Technique
Conditions préalables
- Serveur Linux Apache
- Accès au serveur web (idéalement cPanel)
- Accès pour éditer .htaccess
- Adresse IP unique pour votre serveur
Si vous avez les éléments ci-dessus, vous devriez être prêt. Abordons un élément à la fois.
1. Certificat SSL:
C'est de loin le plus facile. La plupart des entreprises d'hébergement Web ont un centre de support technique (par téléphone ou par chat). Si vous leur demandez d'installer un certificat SSL sur votre serveur, ils vous donneront un prix et le feront pour vous.
SI vous voulez acheter le certificat vous-même, vous pouvez faire votre choix parmi une liste de fournisseurs (Personnellement, j'aime namecheap.com), mais vous devrez utiliser cPanel pour installer le certificat vous-même. C'est un peu plus compliqué, car vous devez générer une requête depuis votre serveur, puis effectuer un copier-coller entre cPanel et le fournisseur SSL. Je recommande cette option seulement si vous savez déjà comment gérer votre serveur et que vous êtes à l'aise avec des instructions techniques.
Pour un certificat gratuit, vous pouvez toujours utiliser Let's Encrypt (https://letsencrypt.org/). Ce certificat est offert par un organisme sans but lucratif reconnu qui a pour mission d'améliorer l'infrastructure Web. Au cours des dernières années, leurs services ont dominé le web et l’organisme dessert aujourd’hui (en janvier 2018) près de 50 millions de certificats actifs.
Le hic, c'est qu'il faut beaucoup d'expertise technique pour bien configurer Let's Encrypt. Si vous voulez plus de détails, consultez mon article sur « Comment installer un certificat SSL gratuit sans accès Shell »
2. Activer la mise en cache du navigateur :
Cela semble compliqué, mais c'est très facile à expliquer. Lorsque vous chargez une page Web, vous téléchargez des fichiers qui indiquent au navigateur comment colorer la page. Certains de ces fichiers sont utilisés à plusieurs reprises sur le site. Lorsque vous « activez la mise en cache », vous indiquez au navigateur de votre visiteur qu'il lui suffit de télécharger certains fichiers une seule fois, et non pour chaque page visitée.
Vous accélérez donc le temps de chargement de votre page. Ceci aidera à augmenter votre classement général avec Google.
C'est assez simple à mettre en place. Tout ce que vous avez à faire est d'ajouter du code à votre fichier .htaccess (généralement trouvé dans le répertoire racine de votre site Web) pour indiquer au serveur d'envoyer ces instructions aux navigateurs de vos visiteurs. Ajoutez à la liste tout type de fichier qui devrait être mis en cache. Les extensions standard à inclure sont : .css, .js, .jpg, .jpeg, .gif, .png, .svg.
Selon la version d'Apache que vous utilisez, essayez l'une des deux variantes ci-dessous :
Version 1:
## CACHING ##
ExpiresActive On
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType image/gif "access 1 month"
ExpiresByType image/png "access 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
## CACHING ##
Version 2:
## CACHING ##
Header add "Cache-Control" "max-age=604800"
Header add "Cache-Control" "max-age=604800"
Header add "Cache-Control" "max-age=604800"
Header add "Cache-Control" "max-age=604800"
Header add "Cache-Control" "max-age=604800"
Je vous recommande de commencer par la première version. Si cela ne fonctionne pas, supprimez le code et essayez la seconde. Comment savoir si cela fonctionne ? Utilisez https://tools.pingdom.com/ pour lancer un test rapide.
3. Activer la compression
Encore une fois, lors du chargement d'un site Web, vous téléchargez des fichiers à partir du serveur. Vous voulez que vos visiteurs aient le moins de téléchargement possible afin que le site se charge plus rapidement.
Il est possible de supprimer les informations inutiles de vos fichiers. Supprimer des espaces et des tabulations et renommer des variables en lettres courtes et sans signification rend le code pratiquement impossible à lire pour un programmeur, mais réduit la taille du fichier envoyé au navigateur. Ceci est la compression.
Pour les images, il existe d'autres algorithmes mathématiques qui réduisent la taille du fichier (pour être honnête, je ne connais pas vraiment les détails de leur fonctionnement). Le point à retenir est que les images aussi peuvent être réduites en taille.
Le serveur peut être programmé pour qu’il compresse les fichiers avant de les envoyer. Cette option n'est généralement pas activée par défaut, car elle peut consommer d'autres ressources si elle n'est pas cochée. Donc vous devez dire au serveur d'implémenter cette option. Comment ?
Encore une fois, nous revenons à l'édition du fichier .htaccess pour y parvenir. Les fichiers que nous voulons compresser sont des scripts, des polices, des images, etc. Bref, à peu près tout ce qui est possible.
Selon la version d'Apache que vous utilisez, essayez l'une des deux variantes ci-dessous :
Version 1:
## COMPRESSION ##
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
Version 2:
## COMPRESSION ##
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
## COMPRESSION ##
Tout comme avec la mise en cache, je recommande de commencer par la première version. Si cela ne fonctionne pas, supprimez le code et essayez la seconde. Comment savoir si cela fonctionne ? Utilisez https://tools.pingdom.com/ pour lancer un test rapide.
Conclusion
Même si vous ne le faites pas vous-même, vous devriez demander à votre équipe de développement de jeter un coup d'œil à ces éléments. Bien que cela semble intimidant, la plupart des développeurs web ayant un minimum d’expérience seront en mesure de mettre en place ces changements simples.
Ces 3 éléments seuls ne permettront pas de changer de manière significative votre classement, mais rappelez-vous que c'est un système de points. Ce sont des fruits à portée de main comparé à d'autres méthodes pour optimiser un site internet.
À tous mes amis techniciens ... désolé d'utiliser le « SEO » dans un article de blog :P
