Optimisation Web en Continu
Optimiser son site web ou son appli en continu
Avant toute chose, je vous invite à remplir ce texte afin de dresser un bilan de vos connaissances actuelles, avant de suivre ce cours.
Table of Contents
Les outils indispensables
FN + F12 : L'Inspecteur de page.
Les outils de développement
Tous les navigateurs modernes disposent d’un ensembe d’outils de développement accessibles en un clic afin de consulter le code (les codes!) d’une page.
On peut non seulement les consulter mais aussi les modifier en live.
Attention cependant, on les modifie dans nôtre navigateur, pas pour le reste des visiteurs. Au prochain rafraichissement de page, ces modifications disparaîtront.
Ces outils permettent de consulter le code html, le CSS, voir les scripts Javascripts ou PHP qui s’exécutent mais aussi les fichiers téléchargés.
Les afficher
- Au clavier :
Ctrl + Shift + I, sauf pour :
Edge : F12
macOS : ⌘ + ⌥ + I - Via les menus
Firefox : Menu ➤ Outils supplémentaires ➤ Outils de développement web
Chrome : Plus d’outils ➤ Outils de développement
Safari : Développement ➤ Afficher l’inspecteur web. Si vous ne pouvez pas voir le menu Développement, aller sous Safari ➤ Préférences ➤ Avancé et vérifiez que l’option Afficher le menu de développement est bien coché.
Opera. Développement ➤ Inspecteur web - Via un menu contextuel :
Cliquez-droit sur un élément de la page web (ou Ctrl+clic sur macOS) et sélectionnez Examiner l’élément dans le menu qui apparait (Bonus : cette méthode ouvrira l’inspecteur et sélectionnera directement l’élément en question !).
Cela est très utile lorsque l’on code.
On peut sélectionner l’élément que l’on veut restyler, voir le résultat en live, copier le code et aller le mettre dans notre feuille de style .CSS afin d’écraser l’ancien avant de tout mettre en ligne.
La Pipette
Live Color Picker / ColorZilla
Ce sont des extensions Chrome et Mozilla Firefox qui permettent d’utiliser une pipette sur une page internet afin d’obtenir immédiatement le code couleur (hexcode) d’un élément de la page.
Il suffit de télécharger l’extension gratuitement sur le chrome store : Live Color Picker
Activez la et plus qu’à cliquer sur les éléments dont la couleur vous plait afin de pouvoir afficher son code HexColor et la copier.
Voir les sites en responsive
Emmet Re:View est une extension Chrome permettant de voir comment se comporte le site en responsive.Cliquez sur l’extension, la page se recharge. Vous pouvez alors, au choix, soit voir vôtre sitre sous différents formats prédéfinits de tablette et smartphone, soit moduler par vous même la taille de l’écran afin de voir comment se comportent les différents éléments de vôtre site.
Lien de l’extension : Emmet Re:view
Tester les performances d'un site :
Il existe des outils destinés à mesurer les performances d’un site.
Il s’agit de calculer la vitesse de chargement des pages puis, ce type d’outils viendra vous suggérer des pistes d’amélioration.
On entre alors l’URL de sa page puis on peut voir le score que l’on obtient sur mobile ou ordinateur de bureau et on peut prendre connaissance des recommandations.
Il existe des extensions mais aussi des sites gratuits permettant de faire ces tests.
Quels sont les paramètres mesurés ?
- First Contentful Paint (FCP) : C’est le temps que le navigateur va mettre pour afficher le premier bit de contenu de la page.
Le navigateur accède au serveur qui charge tout le code, tous les fichiers, les scripts, les infos en bases de données.
Une fois la page générée, il l’envoie au navigateur qui va alors vouloir l’afficher. Il va d’abord devoir charger toutes les dépendances (scripts, métadonnées, liens vers les feuilles de styles et BDD) du Head. Une fois cela fait, il va pouvoir commencer à afficher le contenu de la page : le Body.
Le First Contentful Paint est le temps que met le navigateur pour traiter tout cela et commencer à afficher le premier bit du Body. - Time To Interactive (TTI) : C’est le temps que met le navigateur à afficher la page jusqu’au moment où l’utilisateur peut interagir intégralement avec les divers éléments durant au moins 5 secondes.
- Speed Index : C’est le temps de chargement des éléments situés au dessus de la ligne de flottaison (tout ce qui apparaît à l’écran sans scroller).
- Total Blocking Time (TBT) : C’est la mesure le temps pendant lequel une page demeure bloquée le temps de répondre aux entrées (pression des touches du clavier, clic de la souris) de l’utilisateur. Passé 50ms, ce temps est considéré comme long.
- Largest Contentful Paint (LCP) : Mesure le temps nécessaire pour afficher l’élément le plus grand (et donc logiquement, le plus important) d’une page. C’est donc le délais entre l’accès au serveur et le moment où l’élément le plus important devient lisible pour le visiteur.
- Cumulative Layout Shift (CLS) : Mesure la stabilité visuelle de vôtre page au chargement. Effectivement, si une page charge mal, des éléments risquent de bouger lors du chargement. Une typo qui change, une image qui se déplace etc…
Lighthouse est une extension qui a pour but de tester la vitesse de chargement d’un site à la manière de GTMetrix ou encore PageSpeed Insights en un clic.
Cliquez sur l’extension, demandez lui de générer un rapport et au bout de quelques secondes, vous verrez apparaître une page de résultat concernant vôtre site et les axes d’améliorations de celui-ci.
Lien de l’extension : Lighthouse
Depuis leserveur canadien…
GTMetrix est un site réputé pour sa qualité et la fiabilité de son analyse.
Il analyse vôtre page ou celle d’un site concurrent et vous délivre ensuite les différentes données de métriques et les axes d’amélioration.
Le site est gratuit mais, par défaut, il mesure les donnnées depuis un serveur situé au Canada. Il vous faudra un compte afin de mesurer les performances de vôtre site en pouvant choisir 8 serveurs tests différents (USA, UK, Japon etc.).
Il est possible de souscrire à un compte payant pour trouver plus de 80 serveurs dans 22 pays différents, dont certains situés en France.
Lien du site: GTMetrix
PageSpeed Insight est un site similaire à GTMetrix.
Il est développé par Google et est gratuitement disponible depuis l’interface administrateur de WordPress via l’extension Google Site Kit.
Presque aussi réputé que GT Matrix, n’hésitez pas à vous reposer sur ses analyses car il est réalisé par Google… et c’est bel et bien Google qui notera vos pages pour leur définir un score SEO.
Lien du site: PageSpeed Insight
Connaître les technologies utilisées sur un site.
Wappalyzer est une extension qui existe aussi bien pour Google Chrome que Firefox, et qui va scanner, sur vôtre demande, un site internet pour vous révéler comment il a été réalisé.
Il vous donnera s’il a été réalisé avec un CMS, lequel, la version du PHP, s’il y a un logiciel de cache, les extensions installées, les libraires javascript utilisées etc?
Lien de l’extension : Wappalyzer – Technology Profiler
Cette extension est une alternative à Wappalyzer ou un complément à celle-ci.
Elle permet de détecter le thème d’un site de manière fiable et d’analyser les extension utilisées sur chaque page.
Lien de l’extension : WordPress Theme Detector and Plugin Detector
Télécharger des vidéos
Bien sûr il existe des sites pour télécharger des vidéos libres de droits comme Pexels.
Mais comment faire lorsque l’on a besoin de télécharger des vidéos d’autres sites ?
Alors sachez que les vidéos ne sont souvent pas libres de droit. Vous pouvez cependant les télécharger pour en diffuser des extraits grâce au droit à la critique.
Attention !
Le lien est ici pour la version Mozilla Firefox!
Pourquoi me demanderez-vous ?
Parce que s’il vous prenez l’envie de télécharger une vidéo Youtube, en sachant que Youtube appartient à Google, vous vous doutez bien qu’ils ne laisseraient pas,sur le store de Google Chrome, une extension capable de télécharger une vidéo Youtube n’est-ce pas ?
Par contre, cela sera possible avec la version Firefox via l’ajout d’un petit logiciel « compagnon ».
Lien de l’extension : Video Download Helper
Capture d'écran
A moins que vous n’ayez découvert l’informatique hier, vous savez déjà certainement faire une capture d’écran. Très utile pour prendre des notes, enregistrer des pages internet etc.
Sur PC, une touche y est même dédiée. Il vous suffira d’appuyer sur les touches « windows+Impr Ecran » pour capturer vos écrans. Ou bien encore « Alt+Impr Ecran » afin de capturer seulement une fenêtre.
Il existe, d’origine, sur Windows 10, une extension appelée « Outil Capture Ecran » grace à laquelle on peut prendre la capture d’un écran, d’une fenêtre ou d’un cadre que l’on dessinera nous-même.
Sur Mac : Shift+Command+3 pour capturer l’écran et shift+command+4 pour ne capturer qu’une portion.
Pourquoi alors utiliser une extension ?
Parce que Page Capture d’Ecran – Fireshot vous permettra de repérer les différents éléments d’une page Web pour ne capturer qu’eux.
Mais aussi de capturer une page que fous feriez défiler.
Lien de l’extension : Page Capture d’Ecran – Fireshot
Outils d'analyses de référencement.
Answer the Public est un site qui analyse (une fois par jour gratuitement), pour un mot clef choisi, les mots clefs à longue traine les plus recherchés sur les moteurs de recherche.
Trouvez les questions que les gens se posent, les comparaisons qu’ils recherchent etc.
Idéal pour trouver des titres d’articles de blog.
Google Site Kit est une extension WordPress qui compile divers outils Google comme le Page Speed insight mais aussi et surtout la Search Console ainsi que Google Analytics.
La Search Console vous décrira exactement comment les gens arrivent sur vôtre site depuis les SERP (Search Engine Response Page).
Qu’ont-ils recherchés sur le net pour vous trouver ? Sur quelles pages arrivent-ils ? Avec quel navigateur et sur quel support ?
Analytics vous donnera des infos sur ce que les gens font sur vôtre site.
Combien de temps restent-ils, combien de pages voient-ils en moyenne, vôtre taux de rebond, viennent-ils par des liens directs, les réseaux sociaux etc.
Neil Patel est un expert SEO qui écrit pour le New York Times et le Wall Street Journal. Il est le fondateur de Quicksprout et est connu pour avoir réalisé le 100 000$ a mounth challenge en partant de 0.
D’après le magazine Forbes il est une des 10 personnes les plus influentes du numérique.
Il a aussi créé Ubersuggest.
Un site qui vous permet d’avoir des infos sur vos pages mais aussi celles de vos concurrents.
Nombre de visites, Domain Authority, nombre de backlinks, les mots clefs et leurs difficultées en SEO et SEA.
3 Extensions gratuites pour Google Chrome avec des profils similaires mais ayant chacune leurs spécificités.
Ubersuggest est l’extension gratuite du site du même nom et créé par Neil Patel, un des plus grands experts SEO au monde.
Ainsi, il bénéficie de toute la puissance des outils du site dont il est une déclinaison.
A chaque recherche sur Chrome, l’extension vous montrera combien de personne font la même requête que vous à google, la difficulté d’utiliser cette requête pour vôtre SEO, la difficulté SEA et le CPC moyen pour cette requête si vous décidiez de l’utiliser pou un google Ads.
A chaque nouvelle recherche sur Google Chrome, vous découvrirez, grâce à l’extension, des mots clefs suggérés, des termes connexes à utiliser, leurs volumes de rechers, des données sur les recherches au cours des mois précédents.
Avantage de l’extension, après une requête tapée dans le moteur de recherche, elle peut vous générer le plan d’un article de blog avec les titres de chaque sections et parties dans lesquelles on retrouve les mots clefs les plus recherchés sur ce thème.
Lorsque vous tapez une recherche dans le moteur, vous verrez apparaître dans la SERP toutes les informations sur le ou les mots clefs que vous avez tapé.
Keyword Everywhere vous présente l’historique des volumes recherche, les sites les mieux classés pour cette requête, le CPC pour le SEA, les recherches liées, ce que les gens ont recherché ensuite lorsqu’ils n’étaient pas pleinement satisfaits ainsi que des idées de mots clefs à longues traine.