Tout savoir sur le SEO

Introduction

Le présent article est dédié au référencement naturel et plus particulièrement aux optimisations pour les moteurs de recherche. Rappelons que le référencement naturel porte sur :

• Les techniques d'optimisation pour les moteurs de recherche, lesquelles consistent en un ensemble de règles techniques à respecter afin de produire un contenu référençable de qualité.
• Les techniques d'optimisation, les moyens et les conditions permettant d'acquérir et développer sa popularité sur internet.

De fait, les deux critères généraux permettant d'acquérir de la visibilité sur internet sont :


• La qualité des contenus et de la navigation d'un site internet d'une part.
• La popularité du site internet et de son nom de domaine d'autre part.

Pour ceux qui souhaiteraient en savoir plus sur le référencement de manière générale, je vous invite à consulter l'article généraliste et tout public suivant :

Tout savoir sur le référencement : pour découvrir le référencement et les clefs du référencement de site internet.
En ce qui concerne les techniques pour développer la popularité d'un site internet, je rédigerai un article sur le sujet prochainement.


On rappelle que les bonnes pratiques (best practices) du référencement naturel consistent en un ensemble de règles techniques dont le respect est qualifié de SEO (Search Engine Optimization), soit en français optimisation pour les moteurs de recherche.

On présente ici les différentes règles de SEO qu'un site doit respecter afin d'être parfaitement référençable. Cette présentation n'est toutefois pas exhaustive. On se cantonne ici aux règles les plus importantes.

Prérequis

Si vous n'êtes pas encore très familier avec le référencement, je vous propose de lire l'article « Tout savoir sur le référencement » dont un lien figure ci-avant. Cette article devrait vous permettre de vous approprier les principaux concepts du référencement.

Au travers du présent article, on suppose que le lecteur dispose de connaissances techniques élémentaires en matière de web :

• Une connaissance de base des langages HTML et CSS.
• Une bonne compréhension des concepts fondamentaux du référencement.
• Eventuellement, une connaissance de base du langage JavaScript.
• Eventuellement, être familier avec l'usage des CMS (WordPress par exemple).

Par ailleurs, si vous souhaitez en savoir plus quant aux langages HTML et/ou CSS, dans l'attente de vous proposer un article complet d'introduction à la rédaction en langages HTML et CSS, je vous invite à consulter le cours suivant, en format PDF :

Cours de HTML et CSS: cours complet sur les bases du HTML et du CSS à destination des terminales STMG SIG.
Vous pouvez retrouver ce contenu dans : Etudiants > Cours d'informatique Terminale STMG > Synthèse de cours html et css.

Les outils

Avant toute chose, il semble judicieux d'utiliser quelques outils :

• Google Search Console : relier votre site web à Google Search Console, anciennement Google Webmaster Tools). Cet outil est essentiellement destiné aux développeurs web. Il permet en outre de repérer diverses erreurs sur le ou les sites auxquels il est relié. Il permet encore de soumettre un sitemap, suivre l'avancement de l'indexation de pages d'un site, etc.
• Google Analytics : relier votre site web à Google Analytics si cela n'est pas déjà fait. Pour ce faire, vous devrez préalblement interconnecter votre site à Google Search Console. Ceci fait, il suffit de copier/coller un petit bout de code (un script JavaScript) dans vos pages web. Cet outil analyse le trafic sur votre site internet. Il permet autrement dit de suivre l'évolution du nombre de visites sur votre site ainsi que d'obtenir des informations générales sur vos visiteurs.
• Analyseur de site : ce n'est pas essentiel mais, au besoin, pour analyser le contenu de votre site internet, de nombreux outils en ligne, assez vite payants, sont disponibles. On peut citer par exemple les sites internet www.woorank.com ou encore www.ranking-metrics.fr. Les analyseurs de site vous permettent d'analyser le contenu de chacune de vos pages web en fournissant l'adresse URL de chacune d'entre elles. Ils passent au crible le contenu de la page web (crawling) afin de vous fournir un rapport décrivant les règles SEO respectées et non respectées.

Par ailleurs, quelques "outils" ou "astuces" habituelles :

Le positionnement

Ce point a déjà été évoqué au travers de l'article « Tout savoir sur le référencement » dont un lien figure ci-avant. Toutefois, rappelons quand même :

Les métadonnées de page

Tout d'abord, occupons-nous des trois éléments ayant le plus d'incidence en matière de SEO : les métadonnées. On ne voit pas ces informations lorsqu'une page web s'affiche. Pourtant, rien de plus important !

Ces données figurent entre les balises <head> et </head> des pages web.


Exemple :

<link rel="icon" href="/images/favicon.png" type="image/png" /> <link rel="shortcut icon" href="/images/favicon.png" type="image/png" />

Exemple :

https://www.orleans-informatique.com/professionnels/articles/web
Contre-exemple :

https://www.orleans-informatique.com/professionnels?cat=web&article=4

Exemple :

<title>Orléans informatique : tout savoir sur le SEO</title>

Exemple :

<meta name="description" content="Tout savoir sur les techniques de référencement naturel liées au SEO. Des techniques d'optimisation pour les moteurs de recherche à celles pour les réseaux sociaux, découvrez les astuces, techniques et bonnes pratiques du web qui permettent d'améliorer sa visibilité et sa popularité avec un site internet optimisé." />

De surcroît, ce sont ces métadonnées qui vont conditionner l'allure de l'encart correspondant à votre page web dans les résultats de recherche de Google et des autres moteurs de recherche :


Par ailleurs, petite remarque :


Dans le cas où vous utiliseriez un CMS, formulons une remarque complémentaire :

Les métadonnées pour les réseaux sociaux

Si vous comptez partager des pages web quelles qu'elles soient sur les réseaux sociaux (pages, articles, fiches produit, événements, etc.), il convient de compléter les métadonnées propres aux réseaux sociaux. Celles-ci vous permettent en outre de partager de jolis encarts sur les réseaux sociaux en vous contentant de copier/coller le lien dans votre "post" ou encore votre "tweet".

Une fois encore, ces métadonnées sont placées ou à placer entre les balises <head> et </head> des pages web.

• Les métadonnées OpenGraph
  
  Les métadonnées OpenGraph sont utiliser par tous les principaux réseaux sociaux : Facebook, Twitter, Linkedin ou encore Google+. Elles permettent de définir l'encart (le "post", le "tweet" ou autre) associé à la page web sur laquelle elles sont placées.
• Les métadonnées Twitter
  
  Twitter dispose de quelques métadonnées particulières qui permettent de déterminer le type de "tweet" utilisé (l'allure du "tweet") ou encore le "hashtag" du site web auquel la page web est associée.

Sans plus tarder, un exemple répondant à la majorité des besoins :

<!-- Pour Twitter --> <meta name="twitter:card" content="" /> <meta name="twitter:site" content="" /> <!-- Pour Twitter, Facebook, Linkedin, etc. --> <meta property="og:locale" content="" /> <meta property="og:type" content="" /> <meta property="og:url" content="" /> <meta property="og:title" content="" /> <meta property="og:description" content="" /> <meta property="og:image" content="" />

twitter:card	Permet de choisir le type de "tweet" (l'allure) qui sera utilisé lors du partage de la page web. Vous avez le choix entre les valeurs suivantes : summary, summary_large_image, app et player.
twitter:site	Permet de préciser le nom d'utilisateur Twitter associé au site internet.
og:locale	Permet de préciser le code correspondant à la langue utilisée au travers de la page web.
og:type	Permet de préciser le type du contenu principal proposé par la page web. Plusieurs types sont disponibles : website, article, book, profile, video, music.
og:url	Permet de préciser l'adresse URL standard (canonique) du contenu à partager.
og:title	Permet de définir le titre du contenu à partager. Le titre est typiquement le même que celui de la page web (métadonnée "title").
og:description	Permet de décrire le contenu à partager. La description fournie est typiquement la même que celle de la page web (métadonnée "title").
og:image	Permet de définir l'adresse URL d'une image illustrant le contenu de la page partagée, normalement une bannière.

Une fois ces métadonnées définies sur votre page web, éventuellement d'un plugin (exemple : Yoast SEO Premium sous WordPress), il vous suffit de partager la page web sur les réseaux sociaux :

• Soit en copiant/collant son adresse URL dans un "post", "tweet" ou autre.
• Soit en cliquant sur le ou les boutons de partage de votre page web si vous en utilisez.

Les métadonnées complémentaires pour Google

En plus des métadonnées de page web et des métadonnées pour les réseaux sociaux, Google utilisent des métadonnées complémentaires afin de déterminer si vos pages web sont elligibles à certains positionnement particuliers tels que :

• Affichage sur Google Maps
• Affichage d'un encart d'entreprise ou autre organisation lorsqu'on saisit son nom dans les recherches
• Affichage dans les actualités, produits, livres ou autres contenus proposés par Google en sus des recherches traditionnelles.

De nos jours, le format privilégié pour définir ces métadonnées supplémentaires attendues par Google est très certainement le JSON+LD. Il s'agit d'un format JSON (une alternative à l'ancestral XML) très normalisé, un petit "script" JSON venant aux "contenus invisibles" de votre page web (dans l'en-tête de la page web ou à la fin de celle-ci) et fournissant diverses informations structurée sur le site internet et/ou lage page web.

Google fournit une documentation complète (en anglais) explicitant le format JSON+LD, son utilité, etc. Au reste, tous les formats disponibles sont détaillés sur le site schema.org.

Voici néanmoins un exemple classique de JSON+LD dans le cas d'une organisation qui souhaite afficher un encart Google précisant ses coordonnées :

<script type="application/ld+json"> { "@context": "http:\/\/schema.org", "@type": "Organization", "name": "Orl\u00e9ans informatique", "logo": "http:\/\/www.orleans-informatique.com\/img\/logo.png", "url": "http:\/\/www.orleans-informatique.com", "description": "Orl\u00e9ans informatique, conseil, formation et information autour du web, du d\u00e9veloppement informatique, de l'ing\u00e9nierie informatique et logicielle.\"}", "telephone": "0238704025", "email": "contact@orleans-informatique.com", "address": { "@type": "PostalAddress", "streetAddress": "34 Rue de Bagneaux" "postalCode": "45140", "addressLocality": "ORLEANS", "addressCountry": "France" } } </script>

Les contenus

Avec des métadonnées parfaitement bien rédigées, l'on a fait qu'effleurer le SEO. Il va falloir des contenus de pages web propres...



Place aux règles de rédaction de contenus :

• Une version HTML indiquée
  
  De nos jours, on rédige en HTML5. Toutes vos pages web devraient donc commencer par l'en-tête suivante, indiquant qu'il s'agit d'une page HTML5 :
  
  <!DOCTYPE html>
• Un contenu HTML 5 bien formé
  
  Si votre site internet est en HTML5 (c'est la norme !), votre contenu HTML devrait respecter les normes du HTML 5, à savoir qu'il devrait respecter au maximum le format et la sémantique qui lui est associée.
  
  D'une part, cela signifie que votre HTML devrait être "bien formé", c'est-à-dire qu'il devrait respecter déjà ces quelques règles :
  
  
  • Le n° de version HTML doit être précisé.
  • Toutes les balises ouvrantes doivent être fermées.
  • Tous les attributs des balises utilisés doivent exister, c'est-à-dire faire partie du format HTML.
  • Les éventuels attributs personnalisés doivent soit faire l'objet d'une inclusion de schéma XML ou de DTD définissant ces attributs, soit être préfixés par "data-".
  
  Si ces quelques modestes règles sont respectées, votre site peut normalement être "certifié W3C", ce qu'on peut tester sur le site https://validator.w3.org/.
  
  D'autre part et surtout, le HTML 5 impose de nombreuses règles sémantiques. Cela signifique les balises employées doivent être utilisées à bon escient, à savoir en tenant compte de la signification associée à chacune d'entre elle. On doit en conséquence utiliser les balises de la manière prévue.
• Un titre à chaque lien
  
  Tous les liens internes de votre site internet doivent préférablement avoir un titre (attribut "title"). Les liens pointant vers une même ressource doivent de préférence avoir le même titre, du moins des titres similaires. Google utilise l'attribut "title" des liens comme source de mots-clefs, afin de classer la cible du lien.
  
  En fait, les liens qui devraient toujours avoir un titre sont exactement ceux dont le texte n'a pas de rapport avec la page visée. Exemple : un lien "cliquer ici".
  
  Egalement, Google cherche à déterminer si le maillage de votre site internet est cohérent, c'est-à-dire si la navigation de page en page, formant ce qu'on appelle un graphe, est logique. Par exemple, vous êtes en train de lire un article sur le référencement. De ce fait, cela n'aurait aucun sens (sémantique) que je vous propose un lien vers un site de fruits et légumes...
• Un contenu alternatif sur vos médias
  
  Les images de votre site internet doivent posséder un contenu textuel alternatif (attribut "alt") et préférablement un titre. De même, vos vidéos et vos sons doivent posséder un contenu textuel ou html alternatif.
  
  Sur les médias, l'attribut "title" n'a pas grand interêt en termes de référencement. Il peut en revanche en présent un pour l'utilisateur, si "l'infobulle" qui s'affiche permet de l'aider dans sa navigation.
  
  Quant à l'attribut "alt", il constitue une représentation textuelle de l'image. L'attribut "alt" est utilisé pour référencer l'image dans Google Images. A cet égard, on notera que sont également utilisés : l'URL de la ressource (image, vidéo ou autre) et les mots situés avant et après cette ressource. Finalement, le contenu alternatif est celui qui s'affichera dans le cas où le navigateur ne parvient pas à afficher la ressource.
• Des contenus structurés
  
  Vos pages web doivent être structurées et faire usage de titres et sous-titres à plusieurs niveau (balises "h1", "h2" et suivantes). Comprenez que les moteurs de recherche utilisent de multiples mécanismes de pondération lors de l'indexation des contenus. Il est ainsi toujours intéressant pour vos mots-clefs de faire les gros titres.
  
  Il ne devrait y avoir qu'un titre de niveau 1 (h1) par page web ! Un titre de niveau n devrait se situer en-dessous un titre de niveau n-1.
• Mettre en relief les mots-clefs dans vos paragraphes
  
  Lorsque vous rédigez vos textes, il convient non seulement de trouver les bonnes formules mais encore d'utiliser les balises de mise en relief (balises "strong" et "em") pour valoriser le vocable important, c'est-à-dire les mots-clefs.
  
  S'il s'agit uniquement d'attirer l'attention du lecteur sur un mot, une expression ou une phrase ne contenant pas de mots-clefs, vous devriez utiliser soit du CSS ou soit les balises de mise en forme, c'est-à-dire les balises "u" (souligné), "i" (italique) et "b" (gras).
  
  Certes, par défaut, la balise "strong" met en gras et "em" en italique, toutefois leur signification est toute différente !
• Séparer mises en forme et contenus
  
  Rappel d'une règle élémentaire... La mise en forme (CSS) doit être définie au sein de feuilles de style séparées. L'emploi de balises "style" ou d'attributs "style" est à proscrire. On peut classer cette règle dans la top liste des règles à respecter. De plus, de telles mises en forme détériorent de manière catastrophique le ratio texte/code. Une grossière pénalité pour votre référencement et une erreur de débutant en quelque sorte !
• Séparer javascript et contenus
  
  Autre rappel élémentaire... Pas de JavaScript dans vos liens. Pas de JavaScript au sein de vos pages web. Il faut utiliser scripts rédigés dans des fichiers séparés. D'une part, le JavaScript "inline" est une solution très "laide", d'autre part cela déteriore à vite grand V votre ratio texte/code. Une grossière pénalité pour votre référencement et une erreur de débutant.
• Multiplier les liens internes
  
  En principe, toutes les ressources de votre site internet doivent être accessibles via un lien sur votre site, et vraiment un lien (balise "a"). Typiquement, toutes les pages du site internet doivent pouvoir être visitées en parcourant votre site, ce sans quoi, des pages web risquent de ne jamais être indexées ou d’être difficilement indexées.
  
  A minima, l'URL de toutes vos pages web et autres ressources à indexer doivent figurer dans votre ou vos sitemap(s).
  
  De fait, l'intérêt de multiplier les liens internes réside dans le fait que cela permette de maintenir les internautes sur votre site. Le temps que passe vos lecteurs sur votre merveilleux outil de communication est un critère de popularité. Et votre mesure de popularité influe sur votre visibilité.
  
  On notera que lorsque les internautes viennent sur votre site internet et zappent immédiatement, on parle de rebond. Le taux de rebond, à savoir le pourcentage d’internautes « zappant », est un critère de popularité. Plus il est bas, mieux c'est !
  
  Remarque : depuis quelque temps, Google semble compter comme liens les redirections JavaScript. Peut-être y a-t-il un lien avec la technologie AngularJS développée par Google... ?
• Un bon ratio text/code
  
  Vos contenus textuels doivent être importants au regard du contenu HTML de la page web. De fait, visez un objectif de 20% (de texte). Il y a de nombreuses petites astuces qui nécessiteront l'intervention d'un développeur web compétent.
  
  Exemple d'économie : Eviter les noms de classes de style à rallonge et/ou éviter de surcharger l'attribut "class" des balises. Très malheureusement, c'est la spécialité des CMS... Il est évident que, pour le développeur informatique, des noms clairs sont très avantageux. En vue d'un bon référencement, on choisira dont des noms de classes de style clairs mais concis.
• Privilégier le référencement local
  
  Cela signifie que vos pages web doivent s'adresser aux localités que vous ciblez : des villes, des départements, des régions. Essayez autant que faire se peut d'intégrer ces localités à vos positionnements et donc dans vos mots-clefs.
• Multiplier les contenus
  
  Non, vous ne serez pas premier de par la création d'un site internet de 5 pages ! A la limite, c'est un début. Il en faut bien un... Un travail de rédaction s'impose alors. Il faut ensuite multiplier les contenus de façon non seulement à vous positionner sur de nouvelles recherches mais encore de manière à proposer des contenus répondant précisément à des positionnement souhaités.
• Bonne orthographe
  
  Oui, les moteurs de recherche vont jusque-là. Soignez bien votre orthographe !
• Citer vos sources
  
  Si vous citez un auteur quelconque et/ou utilisez des extraits de documents tiers, le plagia n'est pas très apprécié. Précisez l'auteur ! Citez un texte avec la balise "blockquote", présentez un extrait avec la balise "figcaption", précisez l'auteur au sein d'une balise "cite" accompagnée d'une balise "a" ou plus simplement au moyen d'un lien "a" ayant l'attribut rel="author".

Le fonctionnement du site

• Eviter les doublons de contenus
  
  On parle de duplicate contents, à proscrire ! Les copier/coller et autres mauvaises gestion de navigation conduisant à la présences de plusieurs URL pour un même contenu sont à éviter absolument !
  
  Remarque : si deux URL pointent inévitablement vers le même contenu, ces deux contenus devrait avoir la même URL canonique.
• Eviter le chargement dynamique de contenus référencés
  
  Les chargements "asynchrones" de contenus sont à proscrire. La plupart voire la totalité des contenus référencés d’une page web ne seront pas indexés. Autrement dit, si votre page est chargée entièrement dynamiquement (en AJAX), Google l'assimilera potentiellement à une page vide.
  
  Remarque : lorsqu'un site est totalement dynamique (exemple : site AngularJS), le seul paliatif consiste à créer des captures statiques des pages web dynamiques (des screenshots) et à les renvoyer aux crawlers en lieu et place des pages dynamiques. Ce n'est pas génial mais a priori le mieux qu'on puisse faire...
• Rédiger ou générer un sitemap
  
  Le sitemap d'un site internet est destiné à contenir l'ensemble des URL (chemin vers vos pages web et autres ressources) relatives aux contenus web qui sont à référencer. Afin de faciliter l'indexation des nouveaux contenus du site, il doit être soumis à Google régulièrement.
  
  Exemple de sitemap :
  
  <?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>https://www.exemple.fr/actualites</loc> <lastmod>2025-01-22</lastmod> <changefreq>daily</changefreq> <priority>0.5</priority> </url> ... </urlset>
  Lorsque votre site comporte de nombreuses pages web, il devient pertinent de ne plus utiliser un unique sitemap mais un ensemble de sitemaps thématiques.
  
  Exemple d'index de sitemaps :
  
  <?xml version="1.0" encoding="UTF-8"?> <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <sitemap> <loc>https://www.exemple.fr/sitemap.articles.xml</loc> <lastmod>2025-01-22</lastmod> </sitemap> <sitemap> <loc>https://www.exemple.fr/sitemap.produits.xml</loc> <lastmod>2025-01-22</lastmod> </sitemap> ... </sitemapindex>
• Rédiger ou générer un fichier robots
  
  Le fichier "robots.txt", à placer à la racine d'un site internet (exemple : http://www.exemple.fr/robots.txt), permet en outre de :
  
  
  • Spécifier l'URL du sitemap ou de l'index de sitemaps de votre site web afin que les crawlers, c'est-à-dire les "robots d'indexation" en l'occurent (exemple : Googlebot) puisse le trouver.
  • Spécifier les URL qu'un ou tout crawler ne doit pas indexer. Cette méthode peut être entre autres une solution afin d'éviter des problème de "duplicate contents".
  
  Exemple de fichier "robots.txt" :
  
  Sitemap: https://www.exemple.fr/sitemap.xml
User-agent: *
Disallow: /page/nepasindexer

• Ne pas casser la navigation
  
  Une page web ne devrait jamais être isolée. Le maillage de votre site internet, c'est-à-dire le réseau de liens (on parle de "graphe") qui permet de circuler de page en page, ne devrait jamais être interrompu. L'on devrait toujours avoir accès au menu, toujours pouvoir revenir en arrière, etc.
  
  Remarque : notez que cet point a bien plus d'importance qu'un sitemap ! Premièrement, même en l'absence de sitemap, les robots d'indexations (crawlers) indexeront vos pages web en simulant une navigation de page en page. Le sitemap a dès lors un caractère un peu secondaire. Deuxièmement, et pour faire à peu près simple, une page web est d'autant plus pertinente qu'elle s'inscrit dans un maillage sémantiquement cohérent.
• Concevoir des pages d'erreur personnalisées
  
  Lorsqu'un lien est mort (URL pointant vers une page qui n'existe pas), on parle d'erreur 404. Tout site devrait avoir une page d'erreur 404 personnalisée. Celle-ci ne devrait pas être isolée et donc ne pas casser la navigation. A savoir, l'internaute devrait pouvoir utiliser le menu du site afin d'accéder à un autre contenu ou, au minimum, devrait pouvoir rejoindre le site internet.
  
  Pareillement, un site devrait avoir une page d'erreur personnalisée pour les erreurs HTTP les plus courantes, l'erreur 500 par exemple (erreur serveur). L'objectif est une fois encore de na pas casser la navigation et d'améliorer l'expérience utilisateur.
• Eviter les liens morts
  
  Au cours de la vie d'un site web, il arrive qu'on :
  
  
  • Supprime une page web ayant une certaine URL.
  • Qu'on modifie l'URL d'une page existante.
  • Qu'on verrouille temporairement l'accès à une pages web ou à une quelconque ressource web (fichier).
  • Qu'on refonde un site internet et qu'on utilise de nouvelles URL en lieu et place des anciennes.
  • Etc.
  
  Du contenu web ne peut alors plus être trouvé... Et l'on risque de tomber sur la célèbre "Erreur 404, page non trouvée". Cela ne devrait jamais arriver ! Selon le cas, il convient de mettre en place des redirections définitives (code 301 ou, désormais, 308) ou temporaires (code 302 ou, désormais, 307).
  
  L'absence de redirection peut aller jusqu'à faire perdre toute la popularité associée à un site internet. En effet, dans le cas d'une refonte de site avec changement de nom de domaine, l'absence de redirection définitive se traduit tout bonnement par la perte intégrale de la popularité associée à l'ancien site. Il s'agit presque là d'une erreur professionnelle !

Les performances

Les performances d'un site internet font également partie des critères de référencement.



Afin de se faire une idée approximative du temps de chargement, on pourra utiliser l'inspecteur de Google Chrome : Clic droit > Inspecter > Network > CTRL+F5.

Dès lors, il importe d'optimisez les temps de chargement. Pour ce faire, pas de secret, essentiellement des solutions techniques...

Tout d'abord, on peut chercher à minimiser la quantité de données à télécharger en vue du chargement complet d'une page web.

A cet égard, quelques bonnes pratiques :

• Ajuster la qualité de vos médias
  
  Inutiles que vos petites icônes fassent 256x256 pixels... Inutiles que les vidéos soient toujours en HD, inutiles que de nombreux arrières-plan soient de grande qualité. Bref, pour chaque média, choisissez une qualité proportionnée à l'utilisation qui en est faite.
  
  Au besoin, conseillez vos usagers. Si vous travaillez sur un CMS, retravaillez vos médias avant de les mettre en ligne. Pour les non informaticiens, Photofiltre n'est quand même pas un outils incroyablement compliqué et devrait permet à quiconque de redimensionner convenablement une image ou d'en ajuster les DPI.
  
  Si vous utilisez un CMS, il existe de plus des plugins. Pensez-y !
• Compresser vos médias
  
  Vérifiez bien que vous utilisez des fichiers compressés. On évite clairement les formats tels que BMP pour les images ou encore WMA pour les musiques...
• Minifier vos feuilles de style CSS et les scripts JavaScript
  
  Les fichiers CSS sont truffés de caractères d'échappement (espace, retours chariots, etc.) voire, pour les développeurs éclairés, de commentaires. Il convient de minifier ces fichiers, c'est-à-dire de les compresser de par la suppression de tous les caractères inutiles.
  
  Comme les fichiers CSS, les scripts JavaScript sont truffés de caractères inutiles à l'affichage d'une page web. Retournez des fichiers compressés (minifiés) afin de diminuer la taille des fichiers et ainsi les temps de chargement.
  
  Pour ceux qui utiliserait un CMS, il existe des plugins (exemple : BWP Minify). Le résultat n'est en général pas fantastique mais c'est toujours ça...
• Mettre en cache les médias
  
  Une fois qu'un média (image, son, etc.) a été téléchargé une première fois pas le navigateur, il est régulièrement dommage de le télécharger une seconde fois. Tel est le cas par exemple des icônes récurrente d'un site internet.
  
  Or, les navigateurs et les serveurs proxy sont capables de conserver des médias en cache si on leur propose de le faire. Dès lors, le navigateur par exemple chargera immédiatement le contenu dont il dispose en cache plutôt que d'émettre à nouveau une requête HTTP. Magique et efficace !
  
  Pour ce faire, il convient de bien utiliser l'en-tête HTTP "Cache-Control". En PHP natif, et en simplifié, cela pourrait donner quelque chose comme cela :
  
  // Chemin vers l'image à télécharger $fichier = 'chemin/vers/image.png'; // Propose aux navigateurs et/ou aux serveurs proxy de conserveur la réponse HTTP en cache header('Cache-Control: public'); // Si la ressource n'a pas été modifiée, on se contente juste de l'indiquer au navigateur ou au serveur proxy if($fichierNonModifie){ header('HTTP/1.1 304 Not Modified'); exit; // Dans le cas contraire, on est bien obligé de retourner toute l'image au navigateur ou au serveur proxy }else{ header('Content-type: image/png'); readfile($fichier); }

Ensuite, on peut chercher à minimiser le nombre de requêtes nécessaires au chargement complet d'une page. En effet, moins le chargement d'une page web requiert de requêtes HTTP connexes (fichiers CSS, Javascript, Images, etc.), plus on peut espérer qu'elle se charge rapidement.

Un maximum d'environ 50 requêtes devrait être très largement suffisant. Pourtant, nombreuses sont les pages du web peu optimisées qui requierent plus de 100 requêtes HTTP. Wouaaa !

Voici quelques pistes de réflexion :

• Regrouper les feuilles de style CSS et les scripts JavaScript
  
  En plus de minifier les fichiers CSS et JavaScript, il est bon de les regrouper en un seul fichier, surtout s'il s'agit de fichiers qu'on retrouve sur toutes les pages. En effet, au lieu d'une requête HTTP par script, on n'aura alors besoin que d'une unique requête HTTP pour l'ensemble des scripts regroupés au sein d'un même fichier.
• Bien utiliser les chargements asynchrones
  
  A l'aide des gestionnaires de dépendances JavaScript actuels (exemple : RequireJS), il devient très commun qu'un script JavaScript charge des ressources supplémentaires de manière asynchrone, c'est-à-dire de façon non bloquante. De fait, cela fait que le navigateur effectue une requête pour récupérer le script JavaScript initial, puis autant de requête que le script en demande, et ainsi de suite.
  
  Ce procédé, bien utilisé, est très intéressant et très efficace. Mal utilisé, il est pénalisant. En premier lieu, il faut éviter les exagérations. En second lieu, il convient de bien veiller à ce que cette méthode n'ait pas pas pour effet de bloquer la navigation.
  
  En somme, dans la mesure où les connexions internet haut débit actuelles sont performantes, l'envoi de requêtes HTTP non bloquantes pour récupérer des contenus connexes ou non référençables est une solution qui fait merveille.
• Favoriser les chargements de scripts JavaScript asynchrones
  
  Si certains scripts JavaScript ne sont pas en soi nécessaires au chargement de la page web, il est bon d'éviter de bloquer le chargement de cette dernière. Si de plus ces scripts sont indépendants, ils peuvent être chargés de manière asynchrone, c'est-à-dire en différé sans bloquer le chargement de la page.
  
  Quant à ces scripts, pensez à utiliser l'attribut "async" de la balise "script" :
  
  <script src="/js/script-asynchrone.js" async></script>
• Créer des planches d'icônes
  
  C'est tout bête mais très pertinent. Le réflexe : une icône = un fichier image. Et c'est un mauvais réflexe parce que, pour récupérer N images, il faut alors N requêtes HTTP.
  
  Au contraire, si l'on réalise une planche d'icône, c'est-à-dire un fichier image contenant tout un jeu d'icône, pour récupérer l'image correspondant à toutes les icônes, il suffit d'une unique requête HTTP.
  
  Bien entendu, il faudra faire un peu plus d'effort en CSS...

Au-delà de cela, rappelons que les pages web sont initialement générées côté serveur web, c'est-à-dire au moyen d'un programme, le site web à proprement parler, lequel peut par exemple être développé en langage PHP. Pour que le site web soit performant, reste encore à ce que les programmes côté serveur et la solution de développement utilisée soient efficaces.