2022 Web Almanac - relatório sobre o estado atual da web

 (almanac.httparchive.org)
11 pontos por xguru 2022-10-03 | 1 comentários | Compartilhar no WhatsApp
  • Relatório volumoso publicado anualmente
  • Métricas produzidas a partir do processamento de 8.36M de sites e 43.88TB de dados
  • Neste ano, é composto por 22 capítulos em 4 partes
    • 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

Coisas interessantes resumidas por @stefanjudis (fun facts)

CSS

  • O maior arquivo CSS de uma página desktop tem 62MB, e o CSS para página mobile tem 78MB
  • O site que mais carregou arquivos CSS foi um site mobile que carregou 1387 deles
  • Os nomes de classe mais usados foram active(47%), fa(33%), wp-*(31%), button(27%), pull-right (26%)
  • As unidades de fonte mais usadas por site foram px(71%), em(15%), rem(6%), pt(2%)
  • Os formatos de cor mais usados são #rrggbb(49%), #rgb(25%), rgba(14%), transparent(8%)
  • Os nomes de cor menos usados foram mediumspringgreen < darksalmon < mediumorchid < darkorchid
  • Apenas 0.3% das páginas usam accent-color
  • Os recursos de media query mais usados foram max-width(83%), min-width(79%), -webkit-min-device-pixel-ratio(35%), prefers-reduced-motion(34%), orientation(30%)

JS

  • Em desktop/mobile: async(76%), defer(42%), async and defer(28%/29%), module(4%)
    • Usar async e defer juntos é um antipadrão. defer é sempre ignorado e async tem prioridade
  • 77% das páginas mobile incluem scripts que bloqueiam a renderização dentro de <head>
  • Bibliotecas mais usadas: jQuery 81% > core-js 41% > jQuery Migrate 34% > jQuery UI 23% > Modernizr 13% > Lodash 9%

Media

  • Formatos de imagem: jpg 40% > png 28.2% > gif 15.9% > webp 8.9% > svg 4.7% > ico 1.6%
  • Apenas 1 em cada 10 imagens hero usa lazy loading
  • Apenas 28% das tags img têm height e width

Leituras relacionadas