2022 Web Almanac - web'in mevcut durum raporu

 (almanac.httparchive.org)
11 puan yazan xguru 2022-10-03 | 1 yorum | WhatsApp'ta paylaş
  • Her yıl yayımlanan kapsamlı bir rapor
  • 8.36M web sitesi ve 43.88TB verinin işlenmesiyle oluşturulan metrikler
  • Bu yıl 4 bölümde toplam 22 chapter'dan oluşuyor
    • 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'in derlediği eğlenceli noktalar (fun facts)

CSS

  • En büyük masaüstü sayfası CSS dosyası 62MB, mobil sayfa için CSS ise 78MB
  • En fazla CSS dosyası yükleyen site, 1387 adet yükleyen bir mobil siteydi
  • En çok kullanılan class adları active(%47), fa(%33), wp-*(%31), button(%27), pull-right (%26)
  • Fontlarda en çok kullanılan site düzeyindeki birimler px(%71), em(%15), rem(%6), pt(%2)
  • En çok kullanılan renk formatları #rrggbb(%49), #rgb(%25), rgba(%14), transparent(%8)
  • En az kullanılan renk adları mediumspringgreen < darksalmon < mediumorchid < darkorchid
  • Sayfaların yalnızca %0.3'ü accent-color kullanıyor
  • En çok kullanılan media query özellikleri max-width(%83), min-width(%79), -webkit-min-device-pixel-ratio(%35), prefers-reduced-motion(%34), orientation(%30)

JS

  • Masaüstü/mobilde async(%76), defer(%42), async and defer(%28/%29), module(%4)
    • async ve defer'i birlikte kullanmak bir anti-pattern. defer her zaman yok sayılıyor ve öncelik async'e geçiyor
  • Mobil sayfaların %77'si, <head> içinde render'ı engelleyen script'ler içeriyor
  • En çok kullanılan kütüphaneler jQuery %81 > core-js %41 > jQuery Migrate %34 > jQuery UI %23 > Modernizr %13 > Lodash %9

Media

  • Görsel formatları: jpg %40 > png %28.2 > gif %15.9 > webp %8.9 > svg %4.7 > ico %1.6
  • Hero görsellerin yalnızca 1/10'u lazy loading kullanıyor
  • img etiketlerinin sadece %28'inde height ve width bulunuyor

İlgili okumalar