2022 Web Almanac - รายงานสถานะปัจจุบันของเว็บ

 (almanac.httparchive.org)
11 คะแนน โดย xguru 2022-10-03 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • รายงานขนาดใหญ่ที่เผยแพร่ทุกปี
  • ตัวชี้วัดที่สร้างจากการประมวลผลเว็บไซต์ 8.36M แห่งและข้อมูล 43.88TB
  • ปีนี้ประกอบด้วย 22 บท แบ่งเป็น 4 ส่วน
    • 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

สิ่งน่าสนใจที่ @stefanjudis รวบรวมไว้ (fun facts)

CSS

  • ไฟล์ CSS ของหน้าเดสก์ท็อปที่ใหญ่ที่สุดมีขนาด 62MB และ CSS สำหรับหน้ามือถือใหญ่ที่สุดมีขนาด 78MB
  • เว็บไซต์ที่โหลดไฟล์ CSS มากที่สุดคือเว็บไซต์มือถือที่โหลดถึง 1387 ไฟล์
  • ชื่อคลาสที่ใช้มากที่สุดคือ active(47%), fa(33%), wp-*(31%), button(27%), pull-right (26%)
  • หน่วยฟอนต์ที่ใช้มากที่สุดคือ px(71%) em(15%) rem(6%) pt(2%)
  • ฟอร์แมตสีที่ใช้มากที่สุดคือ #rrggbb(49%) , #rgb(25%), rgba(14%), transparent(8%)
  • ชื่อสีที่ถูกใช้น้อยที่สุดคือ mediumspringgreen < darksalmon < mediumorchid < darkorchid
  • มีเพียง 0.3% ของหน้าเว็บที่ใช้ accent-color
  • ฟีเจอร์ media query ที่ใช้มากที่สุดคือ max-width(83%) min-width(79%) -webkit-min-device-pixel-ratio(35%) prefers-reduced-motion(34%) orientation(30%)

JS

  • บนเดสก์ท็อป/มือถือมีการใช้ async(76%) defer(42%) async and defer(28%/29%) module(4%)
    • การใช้ async และ defer ร่วมกันเป็น anti-pattern โดย defer จะถูกมองข้ามเสมอและ async จะมีลำดับความสำคัญกว่า
  • 77% ของหน้ามือถือมีสคริปต์ที่บล็อกการเรนเดอร์อยู่ภายใน <head>
  • ไลบรารีที่ใช้มากที่สุดคือ jQuery 81% > core-js 41% > jQuery Migrate 34% > jQuery UI 23% > Modernizr 13% > Lodash 9%

Media

  • ฟอร์แมตภาพ: jpg 40% > png 28.2% > gif 15.9% > webp 8.9% > svg 4.7% > ico 1.6%
  • มีเพียง 1 ใน 10 ของภาพ Hero เท่านั้นที่ถูกทำ Lazy Loading
  • มีเพียง 28% ของแท็ก img ที่มีทั้ง height และ width

บทความที่เกี่ยวข้อง