featured_chapters.html

{%- set featured_chapter = ("third-parties","seo","markup","cms", "caching","resource-hints") | random %}
{#
  Below is the full set of chapters. If all are translated then replace above line with this one.
  Other than add chapters to above first line as they are translated (min of two chapters so repeat if only one chapter)
  {%- set featured_chapter = ("accessibility","caching","cdn","cms","compression","css","ecommerce","fonts","http2","javascript","markup","media","mobile-web","page-weight","performance","pwa","resource-hints","security","seo","third-parties") | random %}
#}
{%- if featured_chapter == "javascript" %}
  {%- set featured_chapter_name = "JavaScript" %}
  {%- set featured_chapter_quote = "JavaScript is the most costly resource we send to browsers; having to be downloaded, parsed, compiled, and finally executed. Although browsers have significantly decreased the time it takes to parse and compile scripts, download and execution have become the most expensive stages when JavaScript is processed by a web page." %}
  {%- set featured_chapter_stats = {"stat1":"89%","label1":"Sites with more 3P code that 1P","stat2":"83%","label2":"Sites that use jQuery","stat3":"4.6%","label3":"Home pages using React"} %}
{%- elif featured_chapter == "css" %}
  {%- set featured_chapter_name = "CSS" %}
  {%- set featured_chapter_quote = "Cascading Style Sheets (CSS) are used to paint, format, and layout web pages. Their capabilities span concepts as simple as text color to 3D perspective. It also has hooks to empower developers to handle varying screen sizes, viewing contexts, and printing. CSS helps developers wrangle content and ensure it's adapting properly to the user." %}
  {%- set featured_chapter_stats = {"stat1":"5%","label1":"Pages using custom properties","stat2":"2%","label2":"Sites that use CSS Grid","stat3":"780","label3":"Number of digits in largest Z-Index value"} %}
{%- elif featured_chapter == "markup" %}
  {%- set featured_chapter_name = "Balisage Web" %}
  {%- set featured_chapter_quote = "À partir de juillet 2019, HTTP Archive a commencé à collecter tous les noms de *éléments* utilisés dans le DOM, environ 4,4 millions de pages d’accueil pour ordinateurs de bureau et environ 5,3 millions de pages d’accueil sur mobiles que nous pouvons maintenant commencer à analyser et à disséquer. Lors de cette collecte, nous avons découvert *plus de 5 000 noms d’éléments non standard distincts* dans les pages. Nous avons donc limité le nombre total d’éléments distincts que nous comptons aux 5 048 \"premiers\"." %}
  {%- set featured_chapter_stats = {"stat1":"11","label1":"éléments sont utilisés sur plus de 90 % des pages.","stat2":"15 %","label2":"des pages contiennent des éléments dépréciés.","stat3":"65","label3":"variantes de carrousels trouvées."} %}
{%- elif featured_chapter == "media" %}
  {%- set featured_chapter_name = "Media" %}
  {%- set featured_chapter_quote = "Images, animations, and videos are an important part of the web experience. They are important for many reasons: they help tell stories, engage audiences, and provide artistic expression in ways that often cannot be easily produced with other web technologies. The importance of these media resources can be demonstrated in two ways: by the sheer volume of bytes required to download for a page, and also the volume of pixels painted with media." %}
  {%- set featured_chapter_stats = {"stat1":"1 MB","label1":"Median size of home pages","stat2":"60%","label2":"JPEG use amongst images","stat3":"2%","label3":"Use of <code>&lt;picture&gt;</code> element"} %}
{%- elif featured_chapter == "third-parties" %}
  {%- set featured_chapter_name = "Tierces Parties" %}
  {%- set featured_chapter_quote = "Le Web ouvert a été conçu pour être vaste, interconnectable et interopérable. La possibilité d’accéder à de puissantes librairies tierces et de les utiliser sur votre site avec des éléments <code>&lt;link&gt;</code> ou <code>&lt;script&gt;</code> a décuplé la productivité des développeurs et permis de nouvelles et incroyables expériences web ; par contre, l’immense popularité de quelques fournisseurs tiers (3P) pose d’importants problèmes en termes de performances et de confidentialité. Ce chapitre examine la prévalence et l’impact du code tiers sur le Web en 2019, les modèles d’utilisation du Web qui mènent à la popularité des solutions tierces et les répercussions potentielles sur l’avenir des performances Web et de la confidentialité." %}
  {%- set featured_chapter_stats = {"stat1":"93 %","label1":"pages avec 3P.","stat2":"49 %","label2":"des requêtes.","stat3":"28 %","label3":"des octets."} %}
{%- elif featured_chapter == "fonts" %}
  {%- set featured_chapter_name = "Fonts" %}
  {%- set featured_chapter_quote = "Web fonts enable beautiful and functional typography on the web. Using web fonts not only empowers design, but it democratizes a subset of design, as it allows easier access to those who might not have particularly strong design skills. However, for all the good they can do, web fonts can also do great harm to your site's performance if they are not loaded properly." %}
  {%- set featured_chapter_stats = {"stat1":"74.9%","label1":"3P Font Requests that use Google Fonts","stat2":"29%","label2":"Percent of pages that include a Google Fonts stylesheet link","stat3":"718","label3":"Most font requests on a single page"} %}
{%- elif featured_chapter == "performance" %}
  {%- set featured_chapter_name = "Performance" %}
  {%- set featured_chapter_quote = "Performance is a visceral part of the user experience. For many websites, an improvement to the user experience by speeding up the page load time aligns with an improvement to conversion rates. Conversely, when performance is poor, users don't convert as often and have even been observed to be rage clicking on the page in frustration." %}
  {%- set featured_chapter_stats = {"stat1":"13%","label1":"Sites with fast FCP","stat2":"42%","label2":"Sites with slow TTFB","stat3":"40%","label3":"Sites with fast FID"} %}
{%- elif featured_chapter == "security" %}
  {%- set featured_chapter_name = "Security" %}
  {%- set featured_chapter_quote = "As the web grows in capabilities and allows access to more and more sensitive data, it becomes increasingly important for developers to adopt web security features to protect their applications. The security features reviewed in this chapter are defenses built into the web platform itself, available to every web author." %}
  {%- set featured_chapter_stats = {"stat1":"79%","label1":"Sites using HTTPS","stat2":"41%","label2":"Sites using TLSv1.3","stat3":"4.43%","label3":"Sites using CSP"} %}
{%- elif featured_chapter == "accessibility" %}
  {%- set featured_chapter_name = "Accessibility" %}
  {%- set featured_chapter_quote = "Accessibility on the web is essential for an inclusive and equitable society. As more of our social and work lives move to the online world, it becomes even more important for people with disabilities to be able to participate in all online interactions without barriers. Just as building architects can create or omit accessibility features such as wheelchair ramps, web developers can help or hinder the assistive technology users rely on." %}
  {%- set featured_chapter_stats = {"stat1":"22%","label1":"Sites using sufficient colour contrast","stat2":"50%","label2":"Sites with missing image alt attributes","stat3":"14%","label3":"Sites using a skip link"} %}
{%- elif featured_chapter == "seo" %}
  {%- set featured_chapter_name = "SEO" %}
  {%- set featured_chapter_quote = "L'optimisation pour les moteurs de recherche (SEO) n'est pas seulement un passe-temps ou un projet parallèle pour les spécialistes du marketing digital, ce métier est crucial pour le succès d'un site web. Le but principal du référencement naturel est de s'assurer qu'un site internet est optimisé pour les robots des moteurs de recherche qui ont besoin d'explorer et d'indexer ses pages, ainsi que pour les utilisateurs qui naviguent et consomment des contenus. Le référencement a un impact sur tous ceux qui travaillent sur un site web, du développeur qui le construit au marketeur digital qui en fait la promotion auprès de nouveaux clients potentiels." %}
  {%- set featured_chapter_stats = {"stat1":"346","label1":"mots par page, en médiane.","stat2":"11 %","label2":"des pages n'ont pas de titres HTML (Hn).","stat3":"15 %","label3":"des sites sont éligibles aux résultats enrichis."} %}
{%- elif featured_chapter == "pwa" %}
  {%- set featured_chapter_name = "PWA" %}
  {%- set featured_chapter_quote = "Progressive Web Apps (PWAs) are a new class of web applications, building on top of platform primitives like the Service Worker APIs. Service workers allow apps to support network-independent loading by acting as a network proxy, intercepting your web app's outgoing requests, and replying with programmatic or cached responses." %}
  {%- set featured_chapter_stats = {"stat1":"0.44%","label1":"Sites that register a service worker","stat2":"15%","label2":"Pageviews that use a Service Worker","stat3":"57%","label3":"PWAs that use the <code>standalone</code> <code>display</code> property"} %}
{%- elif featured_chapter == "mobile-web" %}
  {%- set featured_chapter_name = "Mobile Web" %}
  {%- set featured_chapter_quote = "Since 2007, the mobile web has grown at an explosive rate. And now, 13 years later, mobile accounts for 59% of all searches and 58.7% of all web traffic, according to Akamai mPulse data in July 2019. It's no longer an afterthought, but the primary way people experience the web. So given how significant mobile is, what kind of experience are we providing our visitors? Where are we falling short? Let's find out." %}
  {%- set featured_chapter_stats = {"stat1":"65%","label1":"Sites with medium or large content shifts during load","stat2":"32%","label2":"Sites that disable zooming","stat3":"34%","label3":"Sites with sufficiently sized tap targets"} %}
{%- elif featured_chapter == "ecommerce" %}
  {%- set featured_chapter_name = "Ecommerce" %}
  {%- set featured_chapter_quote = "Nearly 10% of the home pages in this study were found to be on an ecommerce platform. An <em>ecommerce platform</em> is a set of software or services that enables you to create and operate an online store, including Paid-for services such as Shopify, software platforms such as Magento Open Source, and Hosted platforms such as Magento Commerce." %}
  {%- set featured_chapter_stats = {"stat1":"3.98%","label1":"Sites using WooCommerce the most popular ecommerce platform","stat2":"116","label2":"Number of ecommerce platforms detected","stat3":"1,517 KB","label3":"Median image bytes per mobile ecommerce page."} %}
{%- elif featured_chapter == "cms" %}
  {%- set featured_chapter_name = "CMS" %}
  {%- set featured_chapter_quote = "Le terme général Système de gestion de contenu (SGC, ou CMS pour Content Management System en anglais) désigne les systèmes permettant aux personnes et aux organisations de créer, de gérer et de publier du contenu. Un CMS pour le contenu web, plus précisément, est un système visant à créer, gérer et publier du contenu à consommer et à expérimenter via le web ouvert. Chaque CMS met en œuvre un sous-ensemble d'un large éventail de capacités de gestion de contenu et les mécanismes correspondants pour permettre aux utilisateurs de construire facilement et efficacement des sites web autour de leur contenu." %}
  {%- set featured_chapter_stats = {"stat1":"40 %","label1":"des pages web sont propulsées par un CMS","stat2":"74 %","label2":"des sites utilisant un CMS utilisent WordPress","stat3":"1 232 Ko","label3":"poids des images sur page CMS (bureau)"} %}
{%- elif featured_chapter == "compression" %}
  {%- set featured_chapter_name = "Compression" %}
  {%- set featured_chapter_quote = "JavaScript is the most costly resource we send to browsers; having to be downloaded, parsed, compiled, and finally executed. Although browsers have significantly decreased the time it takes to parse and compile scripts, download and execution have become the most expensive stages when JavaScript is processed by a web page." %}
  {%- set featured_chapter_stats = {"stat1":"38%","label1":"HTTP responses using text-based compression","stat2":"80%","label2":"Use of gzip compression","stat3":"56%","label3":"HTML responses not using compression"} %}
{%- elif featured_chapter == "caching" %}
  {%- set featured_chapter_name = "Mise en cache" %}
  {%- set featured_chapter_quote = "La mise en cache est une technique permettant de réutiliser un contenu précédemment téléchargé. Elle offre un avantage significatif en termes de performance en évitant de rejouer de coûteuses requêtes. La mise en cache facilite la montée en charge d'une application, en réduisant le trafic sur le réseau à destination du serveur d'origine. Un vieux dicton dit que \"la requête la plus rapide est celle que vous n'avez pas à faire\" et la mise en cache est l'un des principaux moyens d'éviter d'avoir à refaire des requêtes." %}
  {%- set featured_chapter_stats = {"stat1":"27 %","label1":"des réponses n'utilisent aucun en-tête de cache.","stat2":"39 %","label2":"des réponses utilisent l'en-tête <code>Vary</code>.","stat3":"82 %","label3":"des sites pourraient économiser 1 Mo en optimisant le cache."} %}
{%- elif featured_chapter == "cdn" %}
  {%- set featured_chapter_name = "CDN" %}
  {%- set featured_chapter_quote = "&quot;Use a Content Delivery Network&quot; was one of Steve Souders original recommendations for making web sites load faster. It's advice that remains valid today, and in this chapter of the Web Almanac we're going to explore how widely Steve's recommendation has been adopted, how sites are using Content Delivery Networks (CDNs), and some of the features they're using." %}
  {%- set featured_chapter_stats = {"stat1":"20%","label1":"Home pages served by CDN","stat2":"9.61%","label2":"Homepages served by most popular CDN (Cloudflare)","stat3":"30%","label3":"3P CDN requests that use Google"} %}
{%- elif featured_chapter == "page-weight" %}
  {%- set featured_chapter_name = "Page Weight" %}
  {%- set featured_chapter_quote = "The common argument as to why page size doesn't matter anymore is that, thanks to high-speed internet and our souped-up devices, we can serve massive, complex (and massively complex) pages to the general population. This assumption works fine, as long as you're okay with ignoring the vast swathe of internet users who don't have access to said high-speed internet and souped-up devices." %}
  {%- set featured_chapter_stats = {"stat1":"10%","label1":"Sites sending more than 6 MB of Data","stat2":"434 KB","label2":"Increase in median desktop size in last year","stat3":"69","label3":"Median requests per home page"} %}
{%- elif featured_chapter == "resource-hints" %}
  {%- set featured_chapter_name = "Indices de Ressources" %}
  {%- set featured_chapter_quote = "Les indices de ressources fournissent des \"suggestions\" au navigateur sur les ressources qui seront rapidement nécessaires. L'action que le navigateur entreprend à la suite de cet indice varie selon le type d'indice ; différents indices déclenchent différentes actions. Lorsqu'ils sont utilisés correctement, ils peuvent améliorer les performances de la page en donnant une longueur d'avance aux actions importantes, par anticipation." %}
  {%- set featured_chapter_stats = {"stat1":"29 %","label1":"des sites utilisent <code>dns-prefetch</code>.","stat2":"88 %","label2":"des indices de ressources utilisent l'attribut <code>as</code>.","stat3":"0,04 %","label3":"des pages utilisent des indices de priorité."} %}
{%- elif featured_chapter == "http2" %}
  {%- set featured_chapter_name = "HTTP/2" %}
  {%- set featured_chapter_quote = "HTTP/2 was the first major update to the main transport protocol of the web in nearly 20 years. It arrived with a wealth of expectations: it promised a free performance boost with no downsides. More than that, we could stop doing all the hacks and work arounds that HTTP/1.1 forced us into, due to its inefficiencies. Bundling, spriting, inlining, and even sharding domains would all become anti-patterns in an HTTP/2 world, as improved performance would be provided by default. This chapter examines how this relatively new technology has fared in the real world." %}
  {%- set featured_chapter_stats = {"stat1":"95%","label1":"Users who can use HTTP/2","stat2":"27.83%","label2":"Requests with HTTP/2 prioritisation issues","stat3":"8.38%","label3":"Sites supporting QUIC"} %}
{%- endif %}
<section class="featured-chapter">
  <div class="featured-chapter-content">
    <h2 class="title title-center">Focus sur le chapitre…</h2>
    <h3>{{ featured_chapter_name }}</h3>
    <blockquote>
      {{ featured_chapter_quote|safe }}
    </blockquote>
    <div class="featured-chapter-content-data">
      {% if featured_chapter_stats.get('stat1') %}
      <div class="featured-chapter-content-data-item">
        <div>{{ featured_chapter_stats.get('stat1')|safe }}</div>
        <div>{{ featured_chapter_stats.get('label1')|safe }}</div>
      </div>
      {% endif %}
      {% if featured_chapter_stats.get('stat2') %}
      <div class="featured-chapter-content-data-item">
        <div>{{ featured_chapter_stats.get('stat2')|safe }}</div>
        <div>{{ featured_chapter_stats.get('label2')|safe }}</div>
      </div>
      {% endif %}
      {% if featured_chapter_stats.get('stat3') %}
      <div class="featured-chapter-content-data-item">
        <div>{{ featured_chapter_stats.get('stat3')|safe }}</div>
        <div>{{ featured_chapter_stats.get('label3')|safe }}</div>
      </div>
      {% endif %}
    </div>
    <a href="{{ url_for('chapter', year=year, chapter=featured_chapter, lang=lang) }}" class="btn">
      Lire le chapitre&nbsp;: {{ featured_chapter_name }}
    </a>
  </div>
</section>