Web Almanac 2022 - rapport sur l’état actuel du Web

 (almanac.httparchive.org)
11 points par xguru 2022-10-03 | 1 commentaires | Partager sur WhatsApp
  • Un rapport volumineux publié chaque année
  • Des indicateurs élaborés à partir du traitement de 8,36 M de sites web et de 43,88 To de données
  • Cette année, il est composé de 22 chapitres répartis en 4 parties
    • Page Content : CSS, JavaScript, Markup, Structured Data, Fonts, Media, WebAssembly, Third Parties, Interoperability
    • User Experience : SEO, Accessibility, Performance, Privacy, Security, Mobile Web, Capabilities, PWA
    • Content Publishing : CMS, Jamstack, Sustainability
    • Content Distribution : Page Weight, HTTP

Quelques éléments intéressants résumés par @stefanjudis (fun facts)

CSS

  • Le plus gros fichier CSS d’une page desktop fait 62 Mo, et celui d’une page mobile 78 Mo
  • Le site qui a chargé le plus de fichiers CSS est un site mobile qui en a chargé 1387
  • Les noms de classe les plus utilisés sont active (47 %), fa (33 %), wp-* (31 %), button (27 %), pull-right (26 %)
  • Les unités de taille de police les plus utilisées sont px (71 %), em (15 %), rem (6 %), pt (2 %)
  • Les formats de couleur les plus utilisés sont #rrggbb (49 %), #rgb (25 %), rgba (14 %), transparent (8 %)
  • Les noms de couleur les moins utilisés sont mediumspringgreen < darksalmon < mediumorchid < darkorchid
  • Seules 0,3 % des pages utilisent accent-color
  • Les fonctionnalités de media query les plus utilisées sont max-width (83 %), min-width (79 %), -webkit-min-device-pixel-ratio (35 %), prefers-reduced-motion (34 %), orientation (30 %)

JS

  • Sur desktop/mobile : async (76 %), defer (42 %), async and defer (28 %/29 %), module (4 %)
    • Utiliser async et defer ensemble est un anti-pattern. defer est toujours ignoré et async est prioritaire
  • 77 % des pages mobiles incluent dans le <head> un script qui bloque le rendu
  • Les bibliothèques les plus utilisées : jQuery 81 % > core-js 41 % > jQuery Migrate 34 % > jQuery UI 23 % > Modernizr 13 % > Lodash 9 %

Media

  • Formats d’image : jpg 40 % > png 28,2 % > gif 15,9 % > webp 8,9 % > svg 4,7 % > ico 1,6 %
  • Seule une image Hero sur 10 fait l’objet d’un lazy loading
  • Seuls 28 % des balises img ont height et width

À lire aussi