2022 Web Almanac - Báo cáo hiện trạng của web

 (almanac.httparchive.org)
11 điểm bởi xguru 2022-10-03 | 1 bình luận | Chia sẻ qua WhatsApp
  • Báo cáo đồ sộ được phát hành hằng năm
  • Các chỉ số được tạo ra bằng cách xử lý 8.36M website và 43.88TB dữ liệu
  • Năm nay gồm 22 chương trong tổng cộng 4 phần
    • 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

Những điểm thú vị do @stefanjudis tổng hợp (fun facts)

CSS

  • Tệp CSS lớn nhất của một trang desktop là 62MB, còn CSS cho trang mobile là 78MB
  • Trang tải nhiều tệp CSS nhất là một trang mobile tải 1387 tệp
  • Tên class được dùng nhiều nhất là active(47%), fa(33%), wp-*(31%), button(27%), pull-right (26%)
  • Đơn vị font được dùng nhiều nhất là px(71%), em(15%), rem(6%), pt(2%)
  • Định dạng màu được dùng nhiều nhất là #rrggbb(49%), #rgb(25%), rgba(14%), transparent(8%)
  • Tên màu ít được dùng nhất là mediumspringgreen < darksalmon < mediumorchid < darkorchid
  • Chỉ 0.3% số trang dùng accent-color
  • Tính năng media query được dùng nhiều nhất là max-width(83%), min-width(79%), -webkit-min-device-pixel-ratio(35%), prefers-reduced-motion(34%), orientation(30%)

JS

  • Trên desktop/mobile: async(76%), defer(42%), async and defer(28%/29%), module(4%)
    • Dùng async và defer cùng lúc là anti-pattern. defer luôn bị bỏ qua và async sẽ được ưu tiên
  • 77% trang mobile có chứa script chặn render bên trong <head>
  • Các thư viện được dùng nhiều nhất: jQuery 81% > core-js 41% > jQuery Migrate 34% > jQuery UI 23% > Modernizr 13% > Lodash 9%

Media

  • Định dạng ảnh: jpg 40% > png 28.2% > gif 15.9% > webp 8.9% > svg 4.7% > ico 1.6%
  • Chỉ 1/10 ảnh hero được áp dụng lazy loading
  • Chỉ 28% thẻ img có cả height và width

Bài viết liên quan