2022 Web Almanac – Bericht zum aktuellen Stand des Webs

 (almanac.httparchive.org)
11 Punkte von xguru 2022-10-03 | 1 Kommentare | Auf WhatsApp teilen
  • Ein umfangreicher Bericht, der jedes Jahr veröffentlicht wird
  • Kennzahlen, erstellt durch die Auswertung von 8,36 Mio. Websites und 43,88 TB Daten
  • Dieses Jahr besteht er aus 22 Kapiteln in insgesamt 4 Teilen
    • 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

Interessante Punkte (fun facts), zusammengestellt von @stefanjudis

CSS

  • Die größte CSS-Datei einer Desktop-Seite ist 62 MB groß, bei mobilen Seiten liegt die größte CSS-Datei bei 78 MB
  • Die Website mit den meisten geladenen CSS-Dateien war eine mobile Seite mit 1387 geladenen Dateien
  • Die am häufigsten verwendeten Klassennamen sind active (47 %), fa (33 %), wp-* (31 %), button (27 %), pull-right (26 %)
  • Die am häufigsten verwendeten Einheiten für Schriftgrößen sind px (71 %), em (15 %), rem (6 %), pt (2 %)
  • Die am häufigsten verwendeten Farbformate sind #rrggbb (49 %), #rgb (25 %), rgba (14 %), transparent (8 %)
  • Die am seltensten verwendeten Farbnamen sind mediumspringgreen < darksalmon < mediumorchid < darkorchid
  • Nur 0,3 % der Seiten verwenden accent-color
  • Die am häufigsten verwendeten Media-Query-Features sind max-width (83 %), min-width (79 %), -webkit-min-device-pixel-ratio (35 %), prefers-reduced-motion (34 %), orientation (30 %)

JS

  • Auf Desktop/Mobil: async (76 %), defer (42 %), async and defer (28 %/29 %), module (4 %)
    • async und defer zusammen zu verwenden ist ein Anti-Pattern. defer wird immer ignoriert und async erhält Priorität
  • 77 % der mobilen Seiten enthalten render-blockierende Skripte innerhalb von <head>
  • Die am häufigsten verwendeten Bibliotheken: jQuery 81 % > core-js 41 % > jQuery Migrate 34 % > jQuery UI 23 % > Modernizr 13 % > Lodash 9 %

Media

  • Bildformate: jpg 40 % > png 28,2 % > gif 15,9 % > webp 8,9 % > svg 4,7 % > ico 1,6 %
  • Nur jedes zehnte Hero-Bild wird per Lazy Loading geladen
  • Nur 28 % der img-Tags haben sowohl height als auch width

Verwandte Beiträge