CINXE.COM

<!doctype html><html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Cr茅ation & affichage d鈥檜ne page web - Nicolas Friedli</title> <meta name="description" content="脌 chaque fois qu鈥檜ne page s鈥檃ffiche dans un navigateur, des centaines d鈥檕p茅rations ont eu lieu avant pour 茅tablir la connexion au serveur, pour g茅n茅rer la page sur le serveur, pour transf茅rer des tas de fichiers, pour mettre en forme le r茅sultat final."> <style>:root{--sans:ui-sans-serif, Roboto, Inter, Arial, system-ui, sans-serif;--mono:ui-monospace, "Roboto Mono", "JetBrains Mono", Hack, Menlo, Consolas, monospace}html{font-family:var(--sans);font-variant-ligatures:none;font-variant-numeric:oldstyle-nums proportional-nums}code,pre{font-family:var(--mono)}code,pre,table{font-variant-numeric:lining-nums tabular-nums}a,h1,h2,h3,h4{font-variant-numeric:lining-nums proportional-nums}</style> <style media="screen">:root{color-scheme:light dark;--background:#F8F8F8;--text:#222;--contrast:orange}::marker{font-weight:700}::selection{background:var(--contrast);color:var(--text)}@media(prefers-color-scheme:dark){:root{--background:#000;--text:#DDD}::selection{color:var(--background)}}html{background:var(--background);color:var(--text);font-size:clamp(1rem,.8828rem + .3125vw,1.125rem);line-height:1.5;margin:0;padding:1rem;text-wrap:pretty}body{margin-block:0;margin-inline:auto;max-width:66ch}main{margin-block:4rem}footer,header,time{font-size:.8rem}nav{display:flex;flex-wrap:wrap;gap:1rem}h1,h2,h3,h4{line-height:1.1;margin-block:2rem 1rem;text-wrap:balance}h1{font-size:1.95em}h2{font-size:1.56rem}h3{font-size:1.25rem}h4{font-size:1rem;text-transform:uppercase}blockquote{font-style:italic;margin-left:0;padding-left:1rem;border-left:.2rem solid}blockquote em{font-style:normal}:not(pre)>code{border:1px dotted;font-size:.85rem;padding:.1em}pre{font-size:.9rem;margin-block:1rem 2rem;margin-inline:-1rem;overflow:auto;padding:.5rem 1rem}li pre{margin-inline:0}::marker,.articles a,dt{font-weight:700}dd+dt{margin-top:1rem}li{margin-top:.5rem}li li{font-size:95%}a{color:inherit;text-decoration-thickness:.2ex;text-underline-offset:.2ex}a:active,pre{background:var(--text);color:var(--background)}hr{border:.2ex solid;margin-inline-end:75%}</style> <style media="print">@page{margin:2cm}*{background-color:unset;color:#000}header,footer{display:none}pre{white-space:pre-wrap}a::after{content:" [" attr(href)"] "}</style> <link rel="icon" href="/favicon.ico" sizes="48x48"> <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="alternate" type="application/rss+xml" href="/index.xml" title="Nicolas Friedli"> <link rel="canonical" href="https://nicolasfriedli.ch/blog/creation-affichage-page-web/"> <script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","headline":"Cr茅ation \u0026 affichage d鈥檜ne page web","image":["/images/opengraph.jpg","/images/nicolas-friedli.jpg"],"wordCount":"1314","datePublished":"2024-03-17","author":[{"@type":"Person","name":"Nicolas Friedli","url":"https://nicolasfriedli.ch/"}],"isAccessibleForFree":true}</script> <script defer data-domain="nicolasfriedli.ch" src="https://plausible.io/js/script.outbound-links.js"></script> <link rel="webmention" href="https://webmention.io/nicolasfriedli.ch/webmention"> <link rel="pingback" href="https://webmention.io/nicolasfriedli.ch/xmlrpc"> <meta property="og:url" content="https://nicolasfriedli.ch/blog/creation-affichage-page-web/"> <meta property="og:site_name" content="Nicolas Friedli"> <meta property="og:title" content="Cr茅ation & affichage d鈥檜ne page web"> <meta property="og:description" content="脌 chaque fois qu鈥檜ne page s鈥檃ffiche dans un navigateur, des centaines d鈥檕p茅rations ont eu lieu avant pour 茅tablir la connexion au serveur, pour g茅n茅rer la page sur le serveur, pour transf茅rer des tas de fichiers, pour mettre en forme le r茅sultat final."> <meta property="og:locale" content="fr"> <meta property="og:type" content="article"> <meta property="article:section" content="blog"> <meta property="article:published_time" content="2024-03-17T00:00:00+00:00"> <meta property="og:image" content="https://nicolasfriedli.ch/images/opengraph.jpg"> </head> <body> <header> <nav> <a href="/">Nicolas Friedli</a> <a href="/blog/">Blog</a> <a href="/blogroll/">Liens</a> <a href="/contact/">Contact</a> </nav> </header> <main> <h1>Cr茅ation & affichage d鈥檜ne page web</h1> <time datetime="2024-03-17" class="entry-date dateline">17聽mars聽2024</time> <p>Dans le monde des Bisnounours: j鈥檈ntre une adresse et le site est 脿 l鈥櫭ヽran. Mais dans la vraie vie, 脿 chaque fois qu鈥檜ne page s鈥檃ffiche dans un navigateur, des centaines d鈥檕p茅rations ont eu lieu avant pour 茅tablir la connexion au serveur, pour g茅n茅rer la page sur le serveur, pour transf茅rer des tas de fichiers, pour mettre en forme le r茅sultat final.</p> <p><strong>Note.</strong> Ce billet est une vulgarisation du sujet. Je fais l鈥檌mpasse sur plusieurs 茅tapes, je simplifie le propos et je commets des erreurs dans la chronologie des choses. Ces approximations ont une vis茅e p茅dagogique; ce sont les grands principes qui comptent.</p> <h2 id="se-rendre-sur-le-serveur">Se rendre sur le serveur</h2> <p>L鈥檃dresse <code>https://nicolasfriedli.ch/blog/creation-affichage-page-web/</code> est saisie dans un navigateur ou un lien vers elle est suivi. Voici ce qui se passe:</p> <ul> <li>Le navigateur va interroger un serveur de noms (DNS) pour savoir 脿 quelle adresse IP correspond le nom de domaine <code>nicolasfriedli.ch</code>, par exemple <code>128.65.195.39</code>. Le modem, le p茅riph茅rique ou le navigateur vont garder ce r茅sultat en m茅moire un certain temps.</li> <li>Puis le navigateur va demander la cr茅ation d鈥檜ne connexion s茅curis茅e <code>https</code> et va v茅rifier la validit茅 d鈥檜n certificat, stocker des informations de chiffrement, etc. Ici aussi, des informations sont conserv茅es dans la dur茅e.</li> </ul> <p>鉁吢燚茅sormais, le navigateur est pr锚t.</p> <h2 id="creation-de-la-page-sur-le-serveur">Cr茅ation de la page sur le serveur</h2> <p>Ce que demande le navigateur au serveur, c鈥檈st une page HTML (et rien d鈥檃utre pour le moment). Voici ce qui va se passer dans 3聽cas distincts.</p> <h3 id="avec-un-cms-comme-wordpress">Avec un CMS comme WordPress</h3> <p>L鈥檕util de gestion de contenu (CMS) va effectuer les op茅ration suivantes:</p> <ul> <li>recherche dans une base de donn茅es 脿 quel num茅ro de billet correspond <code>/blog/creation-affichage-page-web</code></li> <li>recherche du contenu billet dans une autre table de base de donn茅es</li> <li>脿 partir de l脿, recherche du nom de l鈥檃uteur ou de l鈥檃utrice, recherche des diff茅rentes taxonomies utilis茅es</li> <li>recherche des informations sur le menu du site</li> <li>recherche des contenus des <em>widgets</em></li> <li>recherche de la liste des derniers billets publi茅s</li> <li>et si le blog utilise des commentaires, recherche de tous les commentaires attribu茅s au billet</li> <li>et peut 锚tre aussi les derniers commentaires sur tout le site pour les afficher en barre lat茅rale</li> <li>etc.</li> </ul> <p>Puis il va lire les gabarits de mise en page (<em>templates</em>) et assembler toutes les donn茅es re莽ues dans un seul fichier HTML. Il est enfin pr锚t 脿 r茅pondre au navigateur. <strong>Toutes ces op茅rations ont lieu pour chaque page du site et 脿 chaque visite!</strong></p> <p>鉁吢燣e HTML est envoy茅.</p> <h3 id="quand-le-cms-utilise-un-systeme-de-cache">Quand le CMS utilise un syst猫me de cache</h3> <p>Afin de minimiser le travail inutile, un syst猫me de cache peut 锚tre utilis茅. Il n鈥檈st malheureusement pas pr茅sent par d茅faut chez WordPress. Le principe est simple. Quand une page est demand茅e:</p> <ul> <li>si la page existe d茅j脿 sur le serveur et si elle n鈥檈st pas trop ancienne, elle est envoy茅e telle quelle au navigateur</li> <li>si la page n鈥檈xiste pas encore ou si elle est trop ancienne, elle est cr茅茅e (en suivant toutes les 茅tapes vues au point pr茅c茅dent) et stock茅e</li> </ul> <p><strong>Les op茅rations sur le serveur ne sont pas moins nombreuses, mais elles ne sont pas r茅alis茅es 脿 chaque visite.</strong></p> <p>Si le <em>principe</em> est simple, la mise en pratique est beaucoup plus compliqu茅e. Par exemple, lorsque la barre lat茅rale d鈥檜n site liste les derniers billets et que le titre du dernier billet est modifi茅, il faut invalider le cache de toutes les pages (alors que seuls quelques mots d鈥檜ne page ont chang茅). Pour imaginer les enjeux pratiques: <a href="https://www.geeksforgeeks.org/cache-invalidation-and-the-methods-to-invalidate-cache/">Cache Invalidation and the Methods to Invalidate Cache</a>.</p> <p>鉁吢燣e HTML est envoy茅.</p> <h3 id="avec-un-site-statique">Avec un site statique</h3> <p>Quand une page est demand茅e:</p> <ul> <li>elle existe d茅j脿 et est livr茅e telle quelle</li> <li>sauf si le navigateur demande une page qui n鈥檈xiste pas ou plus (une erreur聽404 est retourn茅e)</li> </ul> <p>鉁吢燣e HTML est envoy茅.</p> <h2 id="affichage-de-la-page-dans-le-navigateur">Affichage de la page dans le navigateur</h2> <p>Site dynamique, site statique, qu鈥檌mporte d茅sormais, le navigateur a re莽u son fichier HTML. Il pourra donc se lancer dans l鈥檃ffichage de la page.</p> <h3 id="telechargement-des-ressources">T茅l茅chargement des ressources</h3> <p>Dans un premier lieu, le code HTML est int茅gralement lu et tous les fichiers n茅cessaires 脿 la page sont demand茅s au serveur:</p> <ul> <li>feuilles de style CSS (le mod猫le de mise en page)</li> <li>images</li> <li>code JavaScript</li> </ul> <p>Le processus de cr茅ation continue.</p> <h3 id="creation-de-la-page">Cr茅ation de la page</h3> <p>D茅sormais, le navigateur utilise la structure (HTML) et la pr茅sentation (CSS) pour cr茅er visuellement la page. Selon les informations qu鈥檌l aura trouv茅es dans le fichier CSS, il va charger de nouvelles ressources (par exemple des polices d鈥櫭ヽriture particuli猫res ou des images de fond).</p> <p>Si ces polices d鈥櫭ヽriture se trouvent sur un autre nom de domaine, il va devoir refaire la requ锚te DNS et la v茅rification des certificats de s茅curit茅 si ces donn茅es ne sont pas en m茅moire.</p> <p>Le processus de cr茅ation continue.</p> <h3 id="interpretation-du-javascript">Interpr茅tation du JavaScript</h3> <p>Le code JavaScript est interpr茅t茅. Le 芦logiciel navigateur禄 ex茅cute un 芦logiciel JavaScript禄 pour avancer dans la cr茅ation de la page. Ce code peur servir 脿:</p> <ul> <li>afficher un menu dynamique</li> <li>envoyer des statistiques 脿 un service tiers</li> <li>chercher des donn茅es utiles pour affichage sur la page</li> </ul> <p>Mais aussi 脿 inclure des <em>widgets</em> des r茅seaux sociaux, qui eux-m锚mes vont rechercher plus de JavaScript, du code HTML et CSS, etc.</p> <p>鉁吢燛n principe, la page est termin茅e.</p> <h3 id="quelques-donnees-statistiques">Quelques donn茅es statistiques</h3> <p>Le <em>Web Almanac 2022</em> donne les r茅sultats de tests pour plus de 8 millions de sites. Quelques r茅sultats extraits de la rubrique <a href="https://almanac.httparchive.org/en/2022/page-weight">Page Weight</a>:</p> <ul> <li>quand 1聽page s鈥檃ffiche, ce n鈥檈st pas 1 seul fichier qui voyage sur les r茅seaux, mais 70 (mesure m茅diane)</li> <li>et ce sont plus de 2MB de donn茅es qui sont envoy茅es</li> <li>en valeur m茅diane, ce sont 22聽images pour une seule page</li> <li>et 20聽fichiers en JavaScript (qui devront tous 锚tre ex茅cut茅s dans le navigateur)</li> <li>le poids des pages web a 茅t茅 multipli茅 par 6 en 10聽ans</li> </ul> <p>Le souci que nous avons aujourd鈥檋ui, c鈥檈st que les serveurs, les r茅seaux et les p茅riph茅riques (ordinateur, tablette, t茅l茅phone, etc.) sont devenus si performants que l鈥檕n ne voit plus tout ce qui y transite et tous les calculs effectu茅s. Pour maintenir un niveau de performance correct, au vu de la lourdeur des sites, il faut changer plus souvent de mat茅riel. 脡cologiquement, c鈥檈st lamentable.</p> <h2 id="apres-la-visite">Apr猫s la visite</h2> <p>Lors de l鈥檈nvoi des diff茅rentes ressources au navigateur, le serveur devrait lui transmettre des informations de conservation. C鈥檈st un <em>cache local</em> du navigateur, diff茅rent de celui qui peut 锚tre utilis茅 dans les CMS.</p> <p>Par exemple:</p> <ul> <li>l鈥檌mage du logo de l鈥檈ntreprise, qui s鈥檃ffiche en haut 脿 gauche de la page, peut 锚tre conserv茅e durant 1聽mois</li> <li>le feuille de style CSS est valable 1聽semaines</li> <li>le polices d鈥櫭ヽriture (si elles ne sont pas charg茅es chez Google Fonts), peuvent 锚tre conserv茅es durant 6聽mois</li> </ul> <p>Ainsi, tous les fichiers ne sont pas charg茅s 脿 chaque visite, ce qui est serait un g芒chis immense. Malheureusement, beaucoup de sites g猫rent mal le cache ou ne l鈥檜tilisent pas du tout.</p> <h2 id="difference-entre-statique-et-dynamique">Diff茅rence entre statique et dynamique</h2> <p>Pour faire simple, une page web, telle que nous la voyons, ne pr茅existe jamais. <strong>Une page est toujours assembl茅e dans le <em>navigateur</em></strong> 脿 partir de HTML, de CSS, de JavaScript et des fichiers multim茅dia. Mais:</p> <ul> <li>avec un site statique, tout ce qui peut l鈥櫭猼re est d茅j脿 pr锚t et optimis茅 sur le <em>serveur</em></li> <li>avec un site dynamique, toute une machinerie se met en route sur le <em>serveur</em> pour chaque page et chaque internaute</li> </ul> <p>Le vrai probl猫me avec les sites dynamiques, quel que soit l鈥檕util (WordPress, Drupal, Typo3, etc.), c鈥檈st quand ils motorisent des <em>sites vitrines</em> qui 茅voluent peu. 脌 quoi bon calculer chaque page pour chaque internaute si rien de change d鈥檜ne personne 脿 l鈥檃utre. C鈥檈st de la bande passante et de l鈥櫭﹏ergie jet茅es par les fen锚tres.</p> <p>Mais rien n鈥檈st perdu. Il reste de nombreuses de possibilit茅s de faire un site lent et peu 茅cologique avec un g茅n茅rateur de sites statiques, car <a href="https://jamstatic.fr/2020/10/05/la-jamstack-n-est-rapide-que-si-vous-la-rendez-rapide/">La Jamstack n鈥檈st rapide que si vous y veillez</a>. Tout est envisageable pour publier des images trop grandes, saturer le site de JavaScript, le pourrir de tierces parties inutiles et mal g茅rer son cache.</p> <hr> <aside> <p>Dans la m锚me th茅matique:</p> <ul> <li><a href="/blog/optimisation-raisonnable/">Philosophie d鈥檕ptimisation raisonnable</a></li> <li><a href="/blog/polices-systeme/">Utiliser des polices syst猫me</a></li> <li><a href="/blog/police-optimisee-titres/">Police optimis茅e pour les titres</a></li> <li><a href="/blog/site-statique-generateur-hugo/">Site statique, g茅n茅rateur de site & Hugo</a></li> <li><a href="/blog/css-minification-cache/">Feuilles de style minifi茅es et gestion du cache</a></li> </ul> </aside> </main> <footer> <p>Abonnement par <a href="/index.xml">flux RSS</a>. Contenus sous licence libre <em>Creative Commons BY-SA</em>.</p> </footer> </body> </html>