Comment fonctionne un site internet et son architecture web

C’est bien beau d’avoir un site internet, mais c’est encore mieux quand on comprend comment la bête fonctionne à l’intérieur ;-).

Les composants essentiels d’un site internet

Hébergement web et noms de domaine

Un site internet, pour pouvoir être en ligne, doit être « hébergé » et avoir son nom de domaine.

C’est du chinois pour vous ? Je vais être plus claire :

Un site web est stocké (« hébergé ») dans des gros centres de données (« data center »), qui ressemblent à de très très grosses unités centrales, qui peuvent se trouver n’importe où dans le monde (mais le plus proche possible de chez nous si on veut limiter l’impact environnemental).

Quand vous allez sur un site, mettons (presque au pif 😉 ) « https://eclosionwebdesign.fr », on appelle « nom de domaine » la partie suivante de l’url : « eclosionwebdesign.fr ».

« .fr » est ce qu’on appelle l’extension du nom de domaine : c’est cette partie qui est payante ; si vous ne souhaitez pas payer, vous serez obligé de passer par une plateforme gratuite et vous aurez une extension du type « eclosionwebdesign.wix.com » (si la plateforme est WIX).

Le site Who.is vous permet de récupérer les informations de n’importe quel nom de domaine.

Une fois que vous avez choisi votre nom de domaine, il faut permettre aux utilisateurs d’accéder au contenu de votre site via ce nom de domaine : il vous faut un hébergeur.

Il va permettre de mettre en place toutes les connexions et configurations nécessaires pour relier le contenu, stocké sur le serveur distant, à l’adresse de votre site.

J’évoque les principaux hébergeurs existants dans l’article du mois de mai.

Langages de programmation web

Un site internet est codé, c’est-à-dire qu’il est créé et géré grâce à des lignes de code, comme des lignes de texte, sauf qu’on utilise des langages bien particuliers, les langages informatiques ou langages de programmation.

Le principe est le même que n’importe quelle langue : il y a un orthographe à respecter, une logique de rédaction propre à chaque langage.

Par exemple dans mon ancien poste je travaillais principalement en langage TypeScript, et JAVA.

Aujourd’hui j’utilise principalement WordPress, qui est codé en PHP.

On retrouve aussi systématiquement le langage HTML, CSS et javascript (JS – à ne pas confondre avec JAVA) pour le style d’un site : j’utilise encore aujourd’hui le CSS (ou SCSS) pour modifier vos sites lorsque c’est nécessaire.

En développement web, on parle de « front-end » et « back-end » :

Le front-end concerne la « vitrine », ce qui est visible, c’est la partie jolie du site.

Le back-end concerne toute la logique métier, et qui est invisible pour un utilisateur lambda.

L’un ne va pas sans l’autre.

Par exemple une calculatrice en ligne : vous verrez une page de site web avec des champs à renseigner et un bouton de validation, ça c’est la partie front-end. Et au clic sur le bouton, ça vous calcul le résultat – ça c’est le job du back-end, et ça vous l’affiche – hop, de nouveau le front-end.

Le sujet vous intéresse ? Vous pouvez facilement retrouver des tuto en ligne, ou aller sur OpenClassroom pour des instructions complètes et approfondies.

Le rôle des serveurs dans le fonctionnement des sites internet

Communication entre serveur et navigateur

Un navigateur est l’endroit où l’utilisateur fait une recherche internet. Les plus connus et les plus utilisés sont Google Chrome et Mozilla Firefox.

Le navigateur va être la partie émergée de l’iceberg, c’est là où s’affiche le front-end.

Le serveur est la partie immergée, et c’est là où tourne le back-end.

Il faut que les deux communiquent pour que les sites web fonctionnent.

Et pour cela on a besoin de protocoles : les protocoles HTTP et HTTPS.

Protocoles HTTP et HTTPS

Le protocole HTTPS est le protocole HTTP amélioré d’une couche de sécurité : aujourd’hui il serait aberrant et pas du tout professionnel d’utiliser le protocole HTTP pour créer son site.

HTTP signifie « HyperText Transfer Protocol » – protocole de transfert hypertexte, et HTTPS « HyperText Transfer Protocol Secure » donc protocole de transfert hypertexte sécurisé.

HTTPS rajoute une couche de sécurité qui va permettre le chiffrement des données afin qu’elles ne soient pas lues ou récupérées par des tiers lors de leurs transferts vers ou en provenance du serveur.

Cette couche de sécurité utilise le certificat TLS (Transport Layer Security) qui est une évolution du certificat SSL (Secure Sockets Layer). Si vous souhaitez en savoir plus, vous pouvez lire cet article de chez IONOS.

L’importance de l’optimisation et du SEO dans le fonctionnement d’un site internet

L’impact de la vitesse de chargement sur l’expérience utilisateur

Votre site c’est comme un magasin : s’il y a une queue monstre à l’entrée du magasin et que vous pouvez à peine faire un pied devant l’autre une fois à l’intérieur, vous allez rebrousser chemin plutôt que de perdre votre temps.

Sur votre site internet, c’est la même chose : si l’utilisateur attends quelques secondes à chaque chargement de page, il va finir par laisser tomber et quitter votre site web. Et ce n’est pas ce que vous voulez !

Il est donc primordiale d’avoir un site le plus rapide possible pour optimiser au mieux l’expérience utilisateurs.

Comment le SEO influence le fonctionnement et la visibilité d’un site

SEO, ça veut dire « Search Engine Optimization » : « Optimisation des moteurs de recherche ». En d’autres termes, c’est les stratégies qui vont vous vous permettre de bien référencer votre site web pour qu’il apparaisse dans les premiers résultats Google.

Il va conditionner comment votre site est construit :

– il faut que sur chaque page vous n’ayez un seul titre de niveau 1 (« H1 »)

– vous devez avoir un chainage optimal de vos pages : chaque page doit avoir des liens vers d’autres pages de votre site, via par-exemple les « CTA » – « Call-To-Action » ces bandeaux qui attirent le regard et incitent à cliquer sur un bouton pour découvrir d’autres services / informations / ressources que vous proposez.

– avoir des articles de blog est un plus : plus vous avez des articles pertinents, réguliers et diversifiés, plus Google fera remonter votre site dans les résultats de recherche car chaque article va répondre à une recherche ciblée des internautes.

– Chaque page doit répondre à une intention de recherche avec un mot-clé principal. Les mots-clés secondaires doivent apparaître en gras.

Tous ces éléments sont analysés par les robots Google pour classer votre site dans les premiers résultats (ou non) des recherches internet.

Plus vous suivez les recommandations SEO de Google, plus vous gagnerez en visibilité dans les moteurs de recherche.

Pour savoir si vous répondez plutôt bien (ou non) à ces bonnes pratiques, Google met à disposition un outils très pratique : PageSpeed Insight.

Vous n’avez qu’à renseigner l’adresse de votre site internet, et PageSpeed vous indique alors vos scores de performances, accessibilité, bonnes pratiques et SEO. Il vous indique même en détails les points à améliorer lorsque votre score n’est pas bon.

Cet article vous a plus ? Vous avez appris des choses ? N’hésitez pas à me donner votre avis en commentaires !