Web Almanac 2022 - informe sobre el estado actual de la web

 (almanac.httparchive.org)
11 puntos por xguru 2022-10-03 | 1 comentarios | Compartir por WhatsApp
  • Un informe enorme que se publica cada año
  • Métricas creadas procesando 8.36M sitios web y 43.88TB de datos
  • Este año está compuesto por 22 capítulos en 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

Cosas interesantes resumidas por @stefanjudis (fun facts)

CSS

  • El archivo CSS más grande de una página de escritorio es de 62MB, y el CSS para una página móvil es de 78MB
  • El sitio que más archivos CSS cargó fue un sitio móvil que cargó 1387
  • Los nombres de clase más usados fueron active(47%), fa(33%), wp-*(31%), button(27%), pull-right (26%)
  • Las unidades de fuente más usadas a nivel de sitio fueron px(71%), em(15%), rem(6%), pt(2%)
  • Los formatos de color más usados fueron #rrggbb(49%), #rgb(25%), rgba(14%), transparent(8%)
  • Los nombres de color menos usados fueron mediumspringgreen < darksalmon < mediumorchid < darkorchid
  • Solo el 0.3% de las páginas usa accent-color
  • Las funciones de media query más usadas fueron max-width(83%), min-width(79%), -webkit-min-device-pixel-ratio(35%), prefers-reduced-motion(34%), orientation(30%)

JS

  • En escritorio/móvil: async(76%), defer(42%), async and defer(28%/29%), module(4%)
    • Usar async y defer al mismo tiempo es un antipatrón. defer siempre se ignora y async tiene prioridad
  • El 77% de las páginas móviles incluye scripts que bloquean el renderizado dentro de <head>
  • Las bibliotecas más usadas: jQuery 81% > core-js 41% > jQuery Migrate 34% > jQuery UI 23% > Modernizr 13% > Lodash 9%

Media

  • Formatos de imagen: jpg 40% > png 28.2% > gif 15.9% > webp 8.9% > svg 4.7% > ico 1.6%
  • Solo 1 de cada 10 imágenes hero usa Lazy Loading
  • Solo el 28% de las etiquetas img tiene height y width

Lecturas relacionadas