web performance research

การวิจัยประสิทธิภาพเว็บ

ที่เก็บนี้เป็นการรวบรวมทรัพยากรที่ฉันบริโภคเมื่อเวลาผ่านไปเพื่อรับความรู้และทำวิจัยของฉันเองเกี่ยวกับประสิทธิภาพของเว็บ

สารบัญ

• การวิจัยสมรรถภาพทางเว็บ
  • สารบัญสถิติ
  • สถาปัตยกรรม
  • แบ็กเอนด์
  • เบราว์เซอร์
    • บริการพนักงาน / คนงาน
    • ที่แสดงผลเครื่องยนต์
  • สร้างเครื่องมือ
  • แคชและการบันทึกความทรงจำ
  • กรณี
  • ศึกษากรณี
  • • ศึกษา
    • หนังสือ
    ชุมชน
    • บล็อก
    • การประชุมและ
    • การ
  • พบปะ
  • • สังสรรค์
    • หลักสูตร
    • พอ
    • ด
    • คาส
  • • ต์
  • • หลัก
  • เว็บ

ภาพโครงสร้างพื้นฐานโครงสร้างพื้นฐาน JavaScript การวัดประสิทธิภาพการทำงานของรันไทม์ประสิทธิภาพการทำงานของวิธีการวัดการวัดเกณฑ์มาตรฐานเครื่องมือการจัดการ

• หน่วย

• • • ความ
  • จำ
  • ประสิทธิภาพ
  • • งบประมาณ
    • งบประมาณ
    • เครื่องมือ
    • เครื่องมือ
    • การ
    • ดึง
  • • ข้อมูล
  • • ล่วงหน้า
  • ล่วงหน้า
  • เครื่องมือ
  • เว็บ
  • • เฟรม
    • เวิ
    • ร์
  • ก
  • ตอบ

สนอง

• รูปแบบการแสดงผลขั้นสูง
• ? การแสดงผลบนเว็บ: ผลกระทบด้านประสิทธิภาพของสถาปัตยกรรมแอปพลิเคชัน
• ? สตรีมออกไป
• ? สตรีมมิ่งใน next.js
• ? จะเกิดอะไรขึ้นก่อนที่จะให้ความชุ่มชื้น
• 2023 การทำงานของเว็บเฟรมเวิร์กรายงาน
• การ
• ตัด
• มัสตาร์ดที่ทันสมัย
• ใช้
• การ
• โหลดทันทีกับรูปแบบ PRPL
• เปรียบเทียบสปากับ
• โหมด SSG และ SSR พร้อมกันและการให้ความชุ่มชื้น
• บาง
• ส่วน ความชุ่มชื้นบางส่วนในปฏิกิริยา
• การโหลดเว็บแอพพลิเคชั่นทันทีด้วยสถาปัตยกรรมสถาปัตยกรรม Shell Architecture
• Next.js
• : แผ่นโกงที่ดีที่สุดในการแสดงผล
• การ
• แสดง
• ผล
• พื้นฐาน
• การแสดงผลบนเว็บ
• ตัว
• เลือก
• การเรนเดอร์บนเว็บ
• : เซิร์ฟเวอร์
• การแสดงผลด้านลูกค้า
• ในกรณีของการให้ความชุ่มชื้นบางส่วน (ต่อไปและ preact)
• อนาคต (และอดีต) ของเว็บคือการแสดงผลด้านเซิร์ฟเวอร์
• ในการทำความเข้าใจการเพิ่มประสิทธิภาพการเพิ่มประสิทธิภาพ
การทำความเข้าใจการแสดงผลใน
• รูปแบบการแสดงผลเว็บ
• Jamstack
• สิ่งที่เป็นความชุ่มชื้นบางส่วนและทำไมทุกคนพูดถึงมัน?
• เหตุใดความชุ่มชื้นที่มีประสิทธิภาพในกรอบ JavaScript จึงเป็นสิ่งที่ท้าทาย

แบ็คเอนด์

• ทุกสิ่งที่คุณรู้เกี่ยวกับความล่าช้าคือ

เบราว์เซอร์

ผิด

• ? บทนำเกี่ยวกับการแสดงผลของเบราว์เซอร์
• ? การควบคุมแคช
• ? แคชฟอนต์รูปภาพและหน้าเว็บของคุณ - เปิดกล่องทำงานหรือ
• ไม่? เส้นทางการเรนเดอร์ที่สำคัญ - หลักสูตรความผิดพลาดเกี่ยวกับประสิทธิภาพของเว็บ
• ? ส่งมอบ 60 fps ในเบราว์เซอร์
• ? ส่งมอบ 60 fps ในเบราว์เซอร์
• ? รับ "หัว" ของคุณตรง
• ? ออกไปจากทางของผู้ใช้: น้อยลงกับพนักงานเว็บ
• ? เราใช้ WebAssembly เพื่อเพิ่มความเร็วเว็บแอปของเราโดย 20X (กรณีศึกษา) ได้
• อย่างไร ในลูป - settimeout, งานขนาดเล็ก, คำขอแอมป์เฟรม, requestidlecallback
• ? การเพิ่มประสิทธิภาพเส้นทางการแสดงผลที่สำคัญสำหรับเว็บไซต์มือถือทันที
• ? การตั้งเวลาเปิดและปิดเธรดหลัก
• ? เธรดหลักทำงานหนักเกินไปและชำระเงินต่ำกว่า
• ? มีพร็อกซีฝั่งไคลเอ็นต์ (ผู้ให้บริการ) ในเบราว์เซอร์ของคุณ
• หรือไม่? WebAssembly เป็นสถาปัตยกรรมข้ามแพลตฟอร์ม
• 60 fps บนเว็บมือถือ
• เร่งการแสดงผลในการเร่งการใช้งานของโครเมี่
• ยม
• javaScript
• (ในเบราว์เซอร์)
• การ
ปรับตัวโดยใช้
• JavaScript
• และข้อมูลเครือข่าย API
เพิ่มการ
• เปลี่ยนแปลง
• ของ HTML
• สแกนเนอร์ Preload Scanner
• เนื้อหาแบบไดนามิกกับคนงาน CloudFlare
• Fast เป็นสิ่งที่ดีทันทีดีกว่า!
• การแก้ไขเค้าโครงฟาดฟันในโลกแห่งความเป็นจริง |
• ประสิทธิภาพเว็บ
• ของ Matt Andrews
Frontend: The Essentials 0
• Frontend Web Performance: Essentials 1
• ทำความรู้จักกับประสิทธิภาพการทำงานของเบราว์เซอร์ของคุณ
ว่า JavaScript ทำงานได้อย่างไร: การเปรียบเทียบกับ
• WebAssembly
• + ทำไมในบางกรณีจะดีกว่าที่จะใช้ JavaScript
• ว่า Javascript ทำงานอย่างไร ใช้พวกเขา
• ว่าเบราว์เซอร์แสดงหน้าเว็บหน้าอย่างไร -DOM, CSSOM และการแสดง
• วิธีกำจัดการปิดกั้นทรัพยากร
• วิธีที่เราตัด 99% ของ JavaScript ของเราด้วย QWIK + Partytown
• ปรับปรุง
• ตัวชี้วัดสีโดยการลบ preloads ที่ไม่ได้ใช้
• งาน
แนะนำ
• Partytown
• หรือไม่
• Pagespeed Insights | Google Developers
• Modern Process Browser สถาปัตยกรรม
• หมายเหตุเกี่ยวกับวิธีที่เบราว์เซอร์ทำงาน
• บันทึกย่อเกี่ยวกับหมายเหตุล่าม JavaScript
• หมายเหตุเกี่ยวกับการทำโปรไฟล์หน่วยความจำ JavaScript ใน Google Chrome
• ตอนนี้นั่นคือสิ่งที่ฉันเรียกว่าพนักงานบริการ!
• การเพิ่มประสิทธิภาพเนื้อหาเว็บใน UIWebViews และเว็บไซต์บน
• หน้า iOS PRERENDER ใน Chrome สำหรับการนำทางหน้าทันที
• เพื่อป้องกัน 'เค้าโครง thrashing' |
การทำโปรไฟล์
• หน้าวิลสัน
• และการเพิ่มประสิทธิภาพประสิทธิภาพการทำงานของรันไทม์ด้วยพร็อกซ์การร้องขอภาพบนคลาวด์ของ DEVTOOLS
• PROXIGY การร้องขอภาพคลาวด์กับคนงาน CloudFlare
• reflows & repaints: ประสิทธิภาพ CSS ทำให้ JavaScript ของคุณช้าลง?
• การเรนเดอร์: ทาสีใหม่, reflow/relayout, restyle/stoyan
• การแสดงผล: repaint, reflow/relayout, Restyle
• การเลื่อนประสิทธิภาพ
การตั้ง
• ค่าคนงาน
• CloudFlare สำหรับการเพิ่มประสิทธิภาพการทำงานของ
• เว็บ
ความเข้าใจ
• ที่ผิด
• reflow และทาสีใหม่ในเบราว์เซอร์
• ใช้ผู้ทำงานบนเว็บเพื่อเรียกใช้ JavaScript จากเธรดหลักของเบราว์เซอร์
• โดยใช้คนงาน CloudFlare ไปยัง CSS ภายนอกที่
• เราใช้เวลาหนึ่งสัปดาห์ทำให้บอร์ด Trello โหลดเร็วมาก นี่คือวิธีที่เราทำ - Fog Creek Blog
• Web Browser Engineering
• Workers
• Webkit สถาปัตยกรรม WebKit สถาปัตยกรรม
• อะไรที่บังคับให้เลย์เอาต์ / reflow
• อะไรทำให้เว็บช้าลง? คอขวดของเบราว์เซอร์
• คุณควรใช้งานเว็บเมื่อไหร่?
• WILSONPAGE / FASTDOM

SERVICE WORBERS / WORBERS

• ? เพิ่มประสิทธิภาพเว็บไซต์ของคุณด้วย Partytown
• ? เพิ่มความเร็วในเว็บไซต์ของคุณด้วย Workers
• Cloudflare Worker สูตรสำหรับการทดสอบประสิทธิภาพส่วนหน้า
• ออกจากเธรดหลักด้วยผู้ทำงานบนเว็บแบบอินไลน์: ตัวอย่าง
• ที่
• Partytown กำจัดเว็บไซต์ bloat จากสคริปต์ของบุคคลที่สามบท
• แนะนำ
• เกี่ยวกับกล่องทำงานและ
• พนักงาน
• บริการ
• แอพ
• ? Partytown

Rendering Engines

• ? JavaScript Engines: ส่วนที่ดี
• ? ชีวิตของพิกเซล
• ? ประสิทธิภาพการแสดงผลภายใน Out Out
• RenderingNG: เอ็นจิ้นการเรนเดอร์ใหม่ของโครเมี่ยม
• เว็บทั้งหมดที่ FPS สูงสุด: วิธีที่ WebRender กำจัด Jank
• ทำไมนักพัฒนาเว็บจำเป็นต้องใส่ใจเกี่ยวกับ
การ

สร้างเครื่องมือสร้าง

• เว็บแพ็
• ค
• การ
สั่น
• สะเทือน
• โดยใช้โมดูล JavaScript
• ใน
• วัน
นี้

JavaScript สร้างด้วยเคล็ดลับการเพิ่มประสิทธิภาพ WebPack Metro 13 คุณควรรู้การค้นหาและแก้ไขซ้ำใน WebPack ด้วย InspectPack วิธีการปรับปรุงประสิทธิภาพการทำงานของ WebPack Webperformance และ

การ

• บีบ
• อัด
• ทำให้
• Webpack
• เร็ว
• :
• คู่มือฟิลด์สำหรับการสร้างประสิทธิภาพที่
• ดี

• ขึ้น Love Your Cache: ปรับให้เหมาะสมสำหรับ

อาชีพการงาน

ที่สองที่สมบูรณ์

แบบ
• : บอร์ดงานสำหรับผู้ที่ชื่นชอบการแสดงเว็บ
• วิศวกรซอฟต์แวร์สแต็กเต็มรูปแบบที่ Mozilla Corp
• วิศวกรซอฟต์แวร์ประสิทธิภาพอาวุโสที่ Mozilla Corp
• Web Performance Engineer (w/m/d) - รีโมทหรือฮัมบูร์
กที่
• วิศวกรซอฟต์แวร์ Bagend (

L4

• ) การสร้างประสิทธิภาพในระยะยาว
• ? Core Web Vitals: ทฤษฎีและการปฏิบัติ
• ? บทเรียนที่เรียนรู้จากการตรวจสอบประสิทธิภาพใน Chrome
• ? การเพิ่มประสิทธิภาพตัวอย่างป๊อปอัพ
• ? การลงทะเบียนประสิทธิภาพในแอพ React & Transactional ด้วย Redux
• ? ส่วนประกอบหลายอย่างกำลังแสดงผล: ประสิทธิภาพของลูกค้าที่ Slack -Scale
• 300ms เร็วขึ้น: ลดเวลาการบล็อกทั้งหมดของ Wikipedia
• A
• Netflix Web Performance กรณีศึกษา
• Pinterest Progressive Web Performance
กรณีศึกษา
• ประสิทธิภาพ
• การทำงานของ Tinder
• PWA YouTube ที่เร็วขึ้นบนเว็บ
• กรณีศึกษากรณีศึกษากลุ่มเรโนลต์
• : การวิเคราะห์ความคิดแอพผลการปฏิบัติงาน
• กรณีศึกษา: การวิเคราะห์ประสิทธิภาพของไซต์ Walmart
การสร้างอิน
• เท
อร์
• เฟซ
• ผู้ใช้ทีวีประสิทธิภาพสูงโดยใช้ React
• Economic Times Quest สำหรับการแก้ไข
• ประสิทธิภาพการทำงาน
• ของ
• ผู้ใช้ในการพัฒนา
• การเพิ่มประสิทธิภาพ CLS เพิ่มขึ้น Yahoo! การดูหน้าเว็บของญี่ปุ่นต่อเซสชั่น 15%
• วิธีการที่ Mercado Libre ปรับให้เหมาะสมสำหรับเว็บ Vitals (TBT/FID)
• วิธี
• การจัดการแพลตฟอร์มการจัดการความยินยอมของ PubTech ช่วยลด INP บนเว็บไซต์ของลูกค้าได้มากถึง 64
• % 33.13%
• วิธีที่เรดบัสปรับปรุงการโต้ตอบของเว็บไซต์ของพวกเขาในการทาสี
• ครั้งต่อไป (INP) และยอดขายเพิ่มขึ้น 7%
• ว่าพลเมืองวันอาทิตย์ปรับปรุงการแปลงโดยมุ่งเน้นไปที่ประสิทธิภาพ
• วิธี
• การโน้มน้าวให้ลูกค้าของคุณมุ่งเน้นไปที่ประสิทธิภาพของ
• เว็บ 98 คะแนนประภาคารที่
• WIX ปรับปรุง TTFB ด้วย 103 คำแนะนำก่อนหน้า
• Hughesnet vs Tesla: กรณีศึกษาในข้อมูลภาคสนามเทียบกับข้อมูลห้องปฏิบัติการ
• ปรับปรุงประสบการณ์ผู้ใช้! วิธีที่เราจัดการ Core Web Vitals บน Yahoo! เว็บไซต์ข่าวของญี่ปุ่น
• การปรับปรุงประสิทธิภาพของชุด JavaScript พร้อมการแยกรหัส
• ปรับปรุงประสิทธิภาพการทำงานของเว็บของนิตยสาร Smashing:
• การเดินทางกรณีศึกษาของการปรับปรุงประสิทธิภาพแอพตอบสนองโดย 10x
• ทำให้
• หน้า
• แรก
• ของ GitHub
• อย่าง
• รวดเร็ว การปรับปรุง 55% ใน LCP โดยการเพิ่มประสิทธิภาพสำหรับเว็บหลัก Vitals
• Nikkei ได้รับคุณภาพและประสิทธิภาพระดับใหม่ด้วย
• การโหลดหน้าเว็บของ PWA ความคิดหลายหน้าและเวลาการนำทางเพียงแค่เพิ่ม
• ประสิทธิภาพ
• การ
• ทำงาน
• ของ
• เว็บ
• หลัก
การปรับปรุง
• รายชื่อ Airbnb
• REI: การปรับปรุง FCP และ LCP
• เรื่องความเร็ว แต่ไม่ใช่ทุกอย่างที่
• สปอตไลต์ประสิทธิภาพการทำงาน
• ผลกระทบของประสิทธิภาพของเว็บ
• บน
• ถนนสู่ประสิทธิภาพของผลิตภัณฑ์ที่ยอดเยี่ยม: ขั้นตอนแรก
• Treebo
• :
• การตอบสนองประสิทธิภาพ
• การ
• ทำงาน
• ของ
PWA
• การตรวจจับการถดถอย (ตอนที่ 3 จาก 3)
• Zillow: ใหญ่ขึ้นเร็วขึ้นและมีส่วนร่วมมากขึ้นในขณะที่

ชุมชน

งบประมาณ

• Profromance
• Community
• Performance

• การ
• ทำงาน
• ของ
• Web
• Performance
• Web
• Performance
• Work
• Work
• Work
• Work
• Web
• Performance
• WebPagetest
• เว็บเบราว์เซอร์วิศวกรรม
• ประสิทธิภาพเว็บในการดำเนินการ

บล็อก

• TK
• Harry Roberts
• Alex Russell
• Magazine - การแสดง
• Fershad Irani
• Modern Devtools
• Eugenia Zigisova
• Ivan
• Akulov
• Perf
• Perf
• Perf

• Perf
• Barry
• Pollard

Simon

Medhat

• Dawoud Performance Web I: Otimizando o front-end
• ?? Performance Web II: เส้นทางวิกฤต, HTTP/2 E คำแนะนำทรัพยากร
• ?? React: Otimizando การเพิ่มประสิทธิภาพ
• เบราว์เซอร์ประสิทธิภาพการทำงาน
• JavaScript และ Dom
• Modern Devtools
• ที่ตั้งค่า devtools สำหรับการทดสอบประสิทธิภาพการทำงานของ
• React Performance MasterClass
• Web Performance
MasterClass
• เว็บไซต์
• ประสิทธิภาพการเพิ่มประสิทธิภาพ

เว็บไซต์

• ประสิทธิภาพ
• การ
• เพิ่ม
• ประสิทธิภาพ
• พอด

คาส

• ต์ ถามอะไรฉัน - Core Web Vitals
• ? การถอดรหัส Inp และ Core Web Vitals
• ? สำรวจอนาคตของ Core Web Vitals
• ? ข้อมูลเชิงลึกเกี่ยวกับ Core Web Vitals จากทีมแพลตฟอร์ม Chrome
• ? บทเรียนที่เรียนรู้จากการตรวจสอบประสิทธิภาพใน Chrome (สไลด์)
• ? การวัด Web Vitals หลัก
• ? ปรับให้เหมาะสมสำหรับ Core Web Vitals
• ? ปรับให้เหมาะสมสำหรับ Core Web Vitals
• ? ผลกระทบทางธุรกิจของ Core Web Vitals
• ? ประสิทธิภาพของเว็บไซต์และ Web Vitals หลัก
• ? มีอะไรใหม่ใน Web Vitals
• เวิร์กโฟลว์ที่เน้นประสิทธิภาพโดยใช้เครื่องมือของ Google
• คู่มือเชิงลึกในการวัดหลักเว็บหลัก
• วิเคราะห์เว็บ Vitals ด้วย
• แนวทางปฏิบัติที่ดีที่สุดของเว็บแพคเก็ตที่ดีที่สุดสำหรับการวัด
• ความ
• สามารถ
• ใน
• การ
• ใช้
• งานของเว็บ เครื่องมือ)
• การติดตาม Web Vitals Core ผ่าน GA4, BigQuery และ Google Data Studio
• CSS สำหรับ Web Vitals
CWV จะ
• กลาย
เป็นปัจจัยการจัดอันดับ
• เดสก์ท็อป
• ในเดือนกุมภาพันธ์ 2022
• Debug Web Vitals ในสนาม
• การประเมินประสบการณ์หน้าเว็บสำหรับเว็บที่ดีกว่า
• ทุกสิ่งที่เรารู้เกี่ยวกับ Core Web Vitals และ SEO
• ทุกอย่างที่เรารู้เกี่ยวกับ Core Web Vitals และ
การโหลดหน้าเว็บที่
• เร็วขึ้น
• โดยใช้เวลาคิดเซิร์ฟเวอร์เวลา
• ที่ต้องการคำแนะนำ
• ใน
ช่วงต้น
• สถาปัตยกรรมสปามีผลต่อ
• การสร้างแผงควบคุมการแข่งขันสำหรับการแข่งขันสำหรับเว็บ Vitals หลักโดยใช้ Google Data Studio
วิธีการรับ Web Vitals หน้า
• เว็บ
• ของคุณจาก CRUX API
• วิธีการปรับปรุง
Core
• Web Vitals
• วิธีการปรับปรุง
• วิธีการวัด CRUAZ
• ของ
• CWV
• ในการอัพเดทประสบการณ์หน้าเว็บ
• มากขึ้นเครื่องมือและรายละเอียดเกี่ยวกับประสบการณ์หน้าการอัปเดต
การเพิ่มประสิทธิภาพการ
• เพิ่ม
• ประสิทธิภาพเว็บหลักบนสปา
• ที่เพิ่มประสิทธิภาพเว็บ
• Vitals โดยใช้ประภาคารคำแนะนำเว็บหลักของเราสำหรับปี 2023
• ส่งข้อเสนอแนะไปยังทีม Google Core Vitals
• ที่
• จำลอง
• ผู้
• ใช้จริงใน
• ห้อง
• ปฏิบัติการ

รูปแบบรูปแบบเว็บ Vitals สิ่งที่จะสร้างตัวชี้

วัด

• เว็บ
• สำคัญ
• ใหม่
• ทำไมข้อมูลห้องปฏิบัติการและฟิลด์อาจแตกต่าง

• กัน การทำความเข้าใจการเลย์เอาต์แบบสะสม
• CLS ที่ BuzzFeed - ตอนที่ 1: การเพิ่มพื้น
• CLS ที่ BuzzFeed - ตอนที่ 2: การได้รับความช่วยเหลือจากผู้ใช้จริง
• CLS ที่ BuzzFeed - ตอนที่ 3: การจัดการกับ
• การ
• เปลี่ยนเลย์เอา
• ต์
• Cumulatative
• Layout
• Layout Shift: วัดและหลีกเลี่ยง
• เลย์เอาต์การดีบักความไม่แน่นอนของภาพเปลี่ยน
• การดีบัก CLS
• ดำน้ำในรูปแบบสะสมใหม่การเปลี่ยนแปลง
• การพัฒนาตัวชี้วัด CLS
• วิธีที่
• ฉันลบเค้าโครงของเว็บไซต์โดยใช้สคริปต์ที่ใช้งานล่วงหน้า
• วิธีการแก้ไขการปรับเลย์
• เอา
ต์
• การปรับเล
• ย์
เอาต์
• แถบเลื่อนที่มีคุณสมบัติ CSS Scrollbar-gutter
• คู่มือเกือบจะสมบูรณ์แบบเลย์เอาต์แบบสะสมเปลี่ยน

สีที่มีขนาดใหญ่ที่สุด (LCP)

• ? วิธีแก้ไขสีที่มีเนื้อหาที่ใหญ่ที่สุด
• ? วิธีปรับปรุงสีที่มีเนื้อหาที่ใหญ่ที่สุดเพื่อประสบการณ์หน้าเว็บที่ดีขึ้น
• ? การตรวจสอบ LCP: สีที่ใหญ่ที่สุด
• ? นี่คือ LCP ของคุณเกี่ยวกับภาพ
• กรณีศึกษา Vodafone: การปรับปรุง 31% ใน LCP เพิ่มยอดขายโดย 8%
Dynamic LCP ลำดับความ
• สำคัญ
• : การเรียนรู้จากการเข้าชมที่ผ่านมา
• วิธีการเพิ่มประสิทธิภาพสีที่มีความพึงพอใจมากที่สุด (LCP) บนสีของลูกค้า
• ปรับปรุง
• สี
• ที่
• มีขนาดใหญ่
• ที่สุด
• คำแนะนำลำดับความสำคัญและการเพิ่มประสิทธิภาพ
• เคล็ดลับ LCP - ใช้ fetchPriority = สูงเพื่อโหลดภาพ LCP Hero ของคุณเร็วกว่านี้
• เข้าใจว่าเบราว์เซอร์ระบุองค์ประกอบ LCP ได้
• อย่างไร HTTP Archive สามารถบอกเราเกี่ยวกับสีที่มีเนื้อหาที่ใหญ่ที่สุดได้อย่างไร

อินพุตครั้งแรก (FID) การป้อนข้อมูล

• การป้อนข้อมูลครั้งแรก (FID)
• ไม่ได้ใช้งานจนกว่า
• จะปรับปรุงการตอบสนองอย่างเร่งด่วนใน

การโต้ตอบอินพุตข้อความกับสีถัดไป (INP)

• ? ทำลายงานที่ยาวนาน
• ? ดีบัก inp
• ? ขุดลงไปในการมีปฏิสัมพันธ์กับสีถัดไป
• ? ขุดลงไปในการมีปฏิสัมพันธ์กับสีถัดไป
• ? จะปรับปรุงการมีปฏิสัมพันธ์กับสีถัดไป (INP) ได้อย่างไร
• ? วิธีเพิ่มประสิทธิภาพการตอบสนองของเว็บด้วยการโต้ตอบกับสีถัดไป
• ? ปฏิสัมพันธ์กับสีถัดไปและเว็บ Vitals อื่น ๆ [Blinkon 16]
• ? ปฏิสัมพันธ์กับสีถัดไปเปิดเผย: 5 ความจริงที่จะเร่งความเร็วเว็บไซต์ของคุณ
• ? ปฏิสัมพันธ์กับสีถัดไป
• ? ข้อมูลเชิงลึกภาคสนามใหม่สำหรับการดีบัก INP
• ? เพิ่มประสิทธิภาพ INP: ดำน้ำลึก
• ? สถานะของการตอบสนองบนเว็บ
• ? การทำความเข้าใจและเพิ่มประสิทธิภาพการมีปฏิสัมพันธ์กับการทาสีครั้งต่อไป (INP)
• 7
วิธีเพื่อลดการ
• วิเคราะห์
• การทำงานหลัก
• ของการทำงานของ INP โดยใช้ข้อมูล Rumvision ในโลกแห่งความเป็นจริง
• หลีก
• เลี่ยง
• เลย์เอาต์ขนาดใหญ่
• ที่
• ซับซ้อน สนับสนุน Loaf + Inp
• Frameworks ที่ทันสมัยทำงานอย่างไรกับ Inp Metric ใหม่
• ว่าขนาด DOM ขนาดใหญ่ส่งผลกระทบต่อการโต้ตอบอย่างไรและสิ่งที่คุณสามารถทำได้เกี่ยวกับ
• วิธีการปรับปรุง INP: รูปแบบการให้
• วิธี
• การปรับปรุง
• การ
• ปฏิสัมพันธ์
• กับการทาสี
• ครั้งต่อ
• ไป
การมีปฏิสัมพันธ์กับ
• ประสิทธิภาพการทำงานของ Mobile Inp
• (Inp)
Mobile: ช้างในห้อง
• ปรับ
การ
• โต้ตอบ
• กับการทาสีครั้งต่อไป
• เพิ่ม
ประสิทธิภาพ
• งานยาว
• เพื่อ
• เตรียมการสำหรับการมีปฏิสัมพันธ์กับการทาสีครั้ง
• ต่อ
• ไป การต่อสู้เพื่อด้ายหลัก
• ใช้ผู้ปฏิบัติงานบนเว็บเพื่อเรียกใช้ JavaScript นอก
• ผู้เชี่ยวชาญด้านการปฏิบัติงานเว็บของเบราว์เซอร์คู่มือการทำงานร่วมกันเพื่อการปฏิสัมพันธ์กับการทาสี

รวม

เวลาการปิดกั้น

• รวมเวลาการปิดกั้นทั้งหมด: คู่มือสั้น ๆ และหวานสำหรับผู้ใช้ที่

• มี
• ความ
• สุข
• มาก
• ขึ้น
การโหลด
• CSS
• CSS-ประสิทธิภาพ
• การทำงานของ CSS-in-JS Performance CSS-in-JS Libraries
• Purgecss
• CSS ในโลกแห่งความเป็นจริงเทียบกับการเปรียบเทียบประสิทธิภาพ CSS-in-
• JS
• ลด
• ขนาด
• ชุดรวมผ่าน

ตัว

• อักษร

• CSS

classname

• ฟอนต์กระรอก
• ? Glyphhanger
• ? Google Fonts
• ? ตัวแปรฟอนต์

ทั่วไป

• ? ข้อผิดพลาดทั่วไปที่ลดประสิทธิภาพการทำงานของส่วนหน้า
• ? ดำน้ำลึกลงไปในการแสดงของบุคคลที่สาม
• ? เครื่องมือความเร็ว Demystifying
• ? เทคนิคการแสดงส่วนหน้ายอดเยี่ยม & ทำไมเราถึงทำ
• ? ตั้งแต่การโหลดอย่างรวดเร็วไปจนถึงการโหลดทันที
• ? ปรับปรุงประสิทธิภาพของหน้าในเว็บแอพที่ทันสมัย
• ? ปรับปรุงประสิทธิภาพของหน้าในเว็บแอพที่ทันสมัย
• ? การออกแบบแบบรวมนั้นเร็วโดยค่าเริ่มต้น
• ? ประสิทธิภาพเว็บระดับถัดไป
• ? Essentials Speed: เทคนิคสำคัญสำหรับเว็บไซต์ที่รวดเร็ว
• ? State of Web Performance August 2022
• ? อนาคตที่สดใสของประสิทธิภาพเว็บ
• ? เส้นทางสู่การแสดง
• ? จิตวิทยาของความเร็ว
• ? น้ำหนักที่ทนไม่ได้ของ JavaScript ขนาดใหญ่
• ? 10 อันดับความผิดพลาดในการแสดง
• ? การเพิ่มประสิทธิภาพประสิทธิภาพของเว็บสำหรับเงื่อนไขที่รุนแรง
• ? Webbundles - การจัดส่ง JS โดยไม่มีการแลกเปลี่ยน
• ? เมื่อ JavaScript Bytes
• ? เมื่อ JavaScript Bytes
• ? เหตุใดประสิทธิภาพการทำงานจึงเป็นเรื่องยากที่ Scale
• 3Perf Guides
• 5 ทีมที่มีข้อผิดพลาดทั่วไปทำเมื่อติดตามประสิทธิภาพการทำงาน
• แบบจำลองการจัดการสำหรับประสิทธิภาพ
• การทำงาน
• ที่ครบกำหนดเมทริกซ์การรวมตัวของประสิทธิภาพการทำงานของเว็บ
• เป็น
• แบบจำลองทางจิต HTML-First
• แนวทางปฏิบัติที่ดีที่สุดสำหรับแท็กและผู้จัดการแท็ก
• ที่สร้าง DOM ได้เร็วขึ้น: การแยกวิเคราะห์แบบเก็งกำไร, Async, เลื่อนและการโหลดล่วงหน้า
สร้างคำจำกัดความ
• เครื่องมือการกระพริบสีของ
• DOM ที่เร็วขึ้น
• ของ
• ประสบการณ์
คำศัพท์เว็บ
• เว็บ. เฟรมเวิร์ก อนาคต. ฉัน.
• เวลาโหลดอย่างรวดเร็ว
• เวลาโหลดอย่างรวดเร็ว
• การแก้ไขการถดถอยประสิทธิภาพก่อนที่พวกเขาจะเกิดขึ้น
• กราฟเปลวไฟ
• จาก
• การพัฒนาไปจนถึงผู้ใช้จริง: วิธีการสร้างรายการตรวจสอบประสิทธิภาพการทำงานส่วนหน้าของเว็บ
• 2021
• Gantry
• :
• Framework
• Framework การ
• เริ่มต้น
• ประสิทธิภาพการทำงาน
• ของ
• เว็บ
• แผ่นงาน
• บางทีคุณอาจไม่จำเป็นต้องมีการเกิดสนิมและ WASM เพื่อเพิ่มความเร็ว
• ในการตรวจสอบ JS ของคุณการตรวจสอบหลักเว็บสำคัญ (ประสิทธิภาพ) การวัด
• ความท้าทายของฉันต่อชุมชนประสิทธิภาพเว็บ
• เพิ่ม
• ประสิทธิภาพ
• ขนาดสปาของสปาเพื่อเพิ่มความเร็วในการโหลดแอ
• ปพลิ
• เค
• ชันการเพิ่ม
• ประสิทธิภาพสคริปต์ของ
บุคคล
• ที่
• สาม
• ประสิทธิภาพการทำงานของเว็บแอปพลิเคชันที่ทันสมัย
• คู่มือที่ดีที่สุดในการเพิ่มประสิทธิภาพ JavaScript สำหรับหน้าด่วนโหลด
• สาเหตุของการเพิ่มประสิทธิภาพเว็บไซต์: การค้นหาที่ดีขึ้นการจัด
อันดับสาเหตุของการเพิ่มประสิทธิภาพเว็บไซต์:
• ประสบการณ์ที่ดีกว่าผู้
ใช้ประสบการณ์
• การเพิ่มประสิทธิภาพเว็บไซต์:
• ช่วยให้
• ดาวเคราะห์
• การเพิ่มประสิทธิภาพ
• เว็บไซต์
• : เพิ่มการแปลงเว็บไซต์
• ทำไมการเพิ่มประสิทธิภาพเว็บไซต์
• เหตุใดจาวาสคริปต์ที่แคชของคุณยังคงช้าและมีประสิทธิภาพการทำงานค่าใช้จ่าย

ทำไมมันถึงสำคัญ

• วิธีการวัดการใช้พลังงานของแอปพลิเคชันส่วนหน้าของคุณ
• ที่เกี่ยวข้องกับความเร็วของไซต์และตัวชี้วัดทางธุรกิจ
• อะไรคือความเร็วของไซต์และทำไมฉันต้องใส่ใจ?

เหตุใด

ภาพ

ที่เก็บภาพ

• ประสิทธิภาพเว็บ

• เพื่อรวบรวมแนวทางปฏิบัติที่ดีที่สุดสำหรับภาพ
• เว็บ การอัปเดต webp
• ? เวลาในการโหลดเร็วขึ้นด้วยภาพ AVIF | เวิร์กช็อป
• ? การบีบอัดภาพดำน้ำลึก
• ? การเพิ่มประสิทธิภาพรูปภาพ Performance.now () 2018
• ? ภาพระเบิดด้วยความเร็วของ Jamstack
• ? JPEG 'ไฟล์' & color (JPEG PT1)
• ? JPEG DCT, การแปลงโคไซน์แบบไม่ต่อเนื่อง (JPEG PT2)
• ? JPEG XL: การอัปเดต
• ? ภาพสมบูรณ์แบบ
• ? ภาพตอบสนองสำหรับเว็บ
• ? รูปแบบภาพ AVIF
• ? webp, avif & more: สถิติการยอมรับภาพ
• ฉันสามารถใช้ avif ได้
• ไหม
• ฉันสามารถใช้ jpeg-xl ได้
• ไหม
ฉันสามารถใช้
• <img> ที่สมบูรณ์แบบของ
• webp ได้
• และ srcset
• คู่มือที่ดีที่สุดในการเพิ่มประสิทธิภาพรูปภาพแอตทริบิวต์
• การถอดรหัสภาพทำอะไรได้บ้าง?

เครื่องมือรูปภาพ

• ? เมฆ
• ? บีบอัดหรือตาย
• ? ImageOptim
• ? เหมาะสมที่สุด
• ? squoosh
• ? WebPonize

Infrastructure

• ? ประสิทธิภาพของมือถือจากวิทยุ UP: สถาปัตยกรรม 4G และผลกระทบของ
• คลาวด์คอมพิวติ้งโดยไม่ต้องมีเครือ
• ข่ายการส่งเนื้อหา (CDNs)

JavaScript

• ? Multicore JavaScript: อดีตปัจจุบันและอนาคต
• 13 เคล็ดลับในการเขียนเร็วขึ้น JavaScript
• 17 JavaScript Tips Tips Tips ให้รู้ในปี 2021
• วิธีการทำงานของ JavaScript: ภาพ
• รวมของเครื่องยนต์,
• รันไทม์ เคล็ดลับเกี่ยวกับวิธีการเขียนโค้ดที่ดีที่สุดว่า
• JavaScript ทำงานอย่างไร: การจัดการหน่วยความจำ + วิธีจัดการกับการรั่วไหลของหน่วยความจำทั่วไป 4 การรั่วไหลของ
• JavaScript Compiler Optimization เทคนิค - เฉพาะสำหรับผู้เชี่ยวชาญ

ที่วัดประสิทธิภาพ

• ? วิเคราะห์และปรับปรุงประสิทธิภาพของเว็บโดยใช้ Devtools & WebPagetest
• ? การสร้างเครื่องมือแจ้งเตือนประสิทธิภาพ
• ? จากมิลลิวินาทีถึงล้าน: ตัวเลขที่ขับเคลื่อนเว็บสมบูรณ์แบบ
• ? วิธีทำความเข้าใจกับตัวชี้วัดประสิทธิภาพของผู้ใช้จริง (รัม)
• ? UX บนเว็บเป็นอย่างไรบ้าง?
• - ลองเปลี่ยนการวิเคราะห์ข้อมูลผู้ใช้จริงเป็นวิทยาศาสตร์
• หรือไม่? การวัดประสิทธิภาพด้วย SpeedCurve & WPT
• ? การวัดประสิทธิภาพของผู้ใช้จริงในเบราว์เซอร์
• ? ความสามารถในการสังเกตสำหรับเว็บ Perf
• ? หมายเลขหนึ่งตัวชี้วัดหลายตัว
• ? การทำโปรไฟล์การแสดงกับ Harry Roberts
• ? การตรวจสอบประสิทธิภาพของเว็บ
• เป็นขั้นตอนทีละขั้นตอนเพื่อตรวจสอบการแข่งขันด้วยรายงาน Chrome UX รายงาน
• การแนะนำเกี่ยวกับ Rum Archive
• Analyze การเปรียบเทียบประสิทธิภาพการทำงานของรันไทม์
• การทำโปรไฟล์และการเพิ่มประสิทธิภาพของไลบรารี JavaScript
คู่มือที่สมบูรณ์เพื่อทำความ
• เข้าใจ
• และวัดประสิทธิภาพของเว็บไซต์
• หลัก
• ของ
• เว็บไซต์ของคุณ
• วิธีการอ่านแผนภูมิการเชื่อมต่อ webPagetest การเชื่อมต่อ
• วิธีการอ่านแผนภูมิมุมมองน้ำตก WebPagetest
วิธีการใช้
• Google
• CRUX เพื่อวิเคราะห์และเปรียบเทียบประสิทธิภาพของเฟรมเวิร์ก JS
• ที่ระบุการตรวจสอบและการอภิปรายบุคคลที่สาม
• ที่
• แนะนำว่า
• การวัดประสิทธิภาพการทำงานของผู้
• ใช้ เร็ว?
• การตรวจสอบประสิทธิภาพการทำงานของฉัน
• เวิร์กโฟลว์การยกเลิกเสียงรัม
• ตอบสนองประสิทธิภาพการเพิ่มประสิทธิภาพการทำโปรไฟล์การเพิ่มประสิทธิภาพ
• เวลาตอบสนอง: ข้อ จำกัด ที่สำคัญ 3
• ประการ
แสดงให้ฉันเห็น
• ว่าเงิน
• : การปรับปรุงประสิทธิภาพการทำงานโดยใช้ Google Analytics
• เริ่มต้นการทดสอบ
• ประสิทธิภาพ
• การทดสอบ
• การทดสอบที่อยู่
• ของเบ
• ราว์
เซอร์
• คะแนน Web Vitals
• แสดงภาพทรัพยากรของคุณด้วยเครื่องมือ Treemap Free
• Web Performance Performance Meets Rum
• ทำไมข้อมูล crux แตกต่างจากข้อมูล Rum ของฉัน?
• เว็บทั่วโลกของ Wikipedia:

ประสิทธิภาพการทำงานของ

CPU Benchmark

• ? การทดสอบประสิทธิภาพโดยใช้นักเขียนบทละคร
• ? คอลเลกชันเครื่องมือประสิทธิภาพ

devtools

• ? Chrome Devtools: แท็บประสิทธิภาพ
• ? สำรวจประสิทธิภาพส่วนหน้าของเว็บไซต์ National Rail กับ Chrome Devtools
• ? ปรับปรุงประสิทธิภาพของหน้าด้วย Chrome Devtools
• ? ทำให้ภาพขี้เกียจโหลดด้วย Chrome Devtools
• หรือไม่? การจัดการหน่วยความจำมาสเตอร์คลาส
• ? เรียกใช้โปรไฟล์ประสิทธิภาพในช่องค้นหา YouTube
• หรือไม่? การทำความเข้าใจประสิทธิภาพการทาสีด้วย Chrome Devtools
• คู่มือที่ครอบคลุมสำหรับการวิเคราะห์ประสิทธิภาพ JavaScript โดยใช้ Chrome Devtools
• CPU Flame กราฟ
• เครือข่ายการควบคุมปริมาณใน Chrome Devtools

วิธี

• การ
• วัดภาพข้อมูลที่เร็วขึ้น
• วิธีการวัด
• วิธีการอ่านฮิสโตแกรม
• สังเคราะห์
• เหล้ารัมอธิบาย

เกณฑ์มาตรฐาน

• ? การผจญภัยใน microbenchmarking
• ? มาตรฐาน React
• ? เครื่องวัดวามเร็ว
• ? TinyBench

Measure Tools

• สูตรประสิทธิภาพการทำงานของเว็บกับ Puppeteer
• ? บูมเมอแรง
• ? Perfsee: ชุดเครื่องมือสำหรับการวัดและการดีบักประสิทธิภาพของแอปพลิเคชันส่วนหน้า
• ? Speedscope
• ?

การจัดการหน่วยความจำ

• Treo

• หลักสูตรการชนใน
• การทดลองการจัดการหน่วยความจำด้วย

งบประมาณประสิทธิภาพการทำงาน

ของตัวเก็บขยะ JavaScript

• ? Core Web Vitals - วัดสิ่งที่สำคัญ
• ? ค่าใช้จ่ายของ
• เครื่องมือการกะพริบสีของ JavaScript Chrome
• การดำเนินงานด้านประสิทธิภาพด้วยงบประมาณประสิทธิภาพ
• การเพิ่มประสิทธิภาพการเริ่มต้นประสิทธิภาพ
• การ
ทำงาน
• งบประมาณ
• 101
• งบประมาณประสิทธิภาพ
• การออกแบบที่ตอบสนองต่อการ
• ใช้งานใน
• การกำหนด
• งบประมาณงบประมาณประสิทธิภาพเริ่มต้นประสิทธิภาพ

การใช้

• งบประมาณ เบราว์เซอร์แคลอรี่
• ? เครื่องคิดเลขงบประมาณประสิทธิภาพ
• ? เครื่องคิดเลขงบประมาณประสิทธิภาพ

การดึงข้อมูลล่วงหน้า

• ? ศิลปะของ Predictive Prefetch
• <link rel=”prefetch/preload”> ใน webpack
• ทันทีและการโหลดหน้าเว็บที่สอดคล้องกันผ่าน preload
• preload, prefetch และลำดับความสำคัญในการจัดวางโครเมี่
• ยม
• เพิ่ม
• ขึ้นหน้าเว็บ
• PRELOAD-WEBPACK-PLUGIN

เครื่องมือการดึงข้อมูลล่วงหน้า

• ? การโหลดหน้าเว็บที่ตามมาเร็วขึ้นโดยการดึงลิงก์ใน ViewPort ล่วงหน้าระหว่าง

เฟรม

เวิ

• ร์

กเว็บ

เวลาว่าง

• DOM เป็นพลเมืองชั้นสอง
• ? ตอบสนอง 18 พร้อมกันอธิบาย
• ? React Performance Debugging MasterClass
• 21 เทคนิคการเพิ่มประสิทธิภาพประสิทธิภาพสำหรับการตอบสนองแอพพลิเคชั่น
• การตายโดยพัน USECALLBACKS
• React 18 ทำงานได้อย่างไร?
• วิธีการเขียนแอพตอบสนองที่มีประสิทธิภาพด้วยบริบท
• วิธีการเขียนรหัสตอบสนองที่มีประสิทธิภาพ: กฎ, รูปแบบ, การทำและไม่ควร
• เขียน
รหัสปฏิกิริยา
• ที่
มีประสิทธิภาพ
• : กฎ
• , รูปแบบ, ทำและไม่
• ดีขึ้น
• ต่อ
• ไป Next.js
• progressive React
• React React การเกิดขึ้นพร้อมกันการอธิบาย
การตอบสนอง
• ของตะขอและเคล็ดลับเพื่อหลีกเลี่ยงการแสดงผลส่วนประกอบที่ไร้ประโยชน์ที่ใช้กับรายการ
• ประสิทธิภาพการตอบสนอง-13 วิธีในการเพิ่มประสิทธิภาพประสิทธิภาพของแอพตอบสนองของคุณ
• ให้
• ความ
มั่นใจ:
• การ
• ทดสอบประสิทธิภาพสำหรับการตอบสนอง
• SSR, สตรีมมิ่งและ CSS-in-JS
• ESLINT-PLUGIN-REACT-PERF

RENDERING RENDERING

• ? อินโทรการ์ตูนถึงไฟเบอร์
• ? การดึงข้อมูลด้วยส่วนประกอบเซิร์ฟเวอร์ React
• ? ดำน้ำลึกเกี่ยวกับปฏิกิริยาที่เกิดขึ้นพร้อมกัน
• ? Inside Fiber: ภาพรวมเชิงลึกที่คุณต้องการ
• ? ตอบโต้การดำน้ำลึกลงไป
• ในเชิงลึกของสถานะและอุปกรณ์ประกอบฉากอัปเดตในปฏิกิริยา
• ภายในเส้นใย:
• ภาพรวมเชิงลึกของอัลกอริทึมการกระทบยอดใหม่ในการตอบสนอง
การเรียนรู้อัลกอริ
• ทึมการกระทบ
• ยอดแบบตอบสนอง
• ด้วยการวัดประสิทธิภาพ
• การ
• ทำงานตอบสนอง
• Signal Boosting
• The future of rendering in React
• Why React Re-Renders

Measuring React

• ? How to use the React Profiler to find and fix Performance Problems
• ? Profiling React Apps like a Pro
• ? React Performance with React Dev Tools
• Get Fast, Stay Fast: How To Monitor React Render Performance
• Measuring JS code performance. Part I: using react-benchmark
• Measuring JS code performance. Part II: interaction speed
• Measuring React app performance
• Performance Profiling a Redux App
• Profiling & Optimizing the runtime performance with the DevTools Performance tab
• Profiling React.js Performance

Sustainability

• Core Web Vitals meets sustainability
• How Improving Website Performance Can Help Save The Planet
• Web Performance + Ecological Impact
• Website performance and the planet

Tweets

• Another reason for not declaring React components inside other components
• Blank page with an embedded tweet. How bad can it be?
• Check out the new Priority Hints
• ChromeDevTools Long Tasks
• Compile Code — Profiling
• CSS Selector Performance
• Frontend performance tips to keep top of mind
• Google Search Console warning the INP
• How can I optimize my frontend for the fastest page load times?
• How I typically test performance
• How Wix improved TTFB with 103 Early Hints
• Image performance cheatsheet
• img fetchpriority="high": LCP improvement of ~150ms
• Investigating Core Web Vital issues
• mobile performance for sites built with Next.js
• Optimize head and body separately
• Optimizing LCP
• Performance Insights by Builder.io
• React 18 Concurrency, Explained
• React 18 Concurrency
• React Perf: Causal Case Study
• React Time Slicing
• Signals — Reactivity + UI
• Spotify Performance Profiling
• The difference between "On Load" and "Document Complete" in WebPageTest
• The most important problems in Web Perf
• Things I found in a slow React website today
• Tool: quantify what will make a real difference
• Use Map over object
• useCallback and useMemo: no perf effect
• Video Compression
• Web Performance at Slack
• React & Redux performance at Slack
• Performance Budget

UX

• ? Adaptive Loading - Improving web performance on slow devices
• ? Building The Web
• ? Design Principles For The Web
• ? Measuring User Perceived Performance to Prioritize Product Work
• ? Perceived Performance: The only kind that really matters
• ? Stephanie Walter on Cheating The UX When There Is Nothing More To Optimize
• ? The Layers of the Web
• A Bone to Pick with Skeleton Screens
• A Designer's Guide to Perceived Performance
• An experimental responsiveness metric
• Designing for Performance
• Hands On with the new Responsiveness Metrics
• How Much Faster is Fast Enough? User Perception of Latency & Latency Improvements in Direct and Indirect Touch
• How to Improve Perceived Performance in Mobile Apps
• Improving Perceived Performance
• Optimistic UI Patterns for Improved Perceived Performance
• Performance Design: Designing for the illusion of speed
• Performance perception: Correlation to RUM metrics
• Performance perception: How satisfied are Wikipedia users?
• Performance perception: The effect of late-loading banners
• Resilient web design
• The Art of UI Skeletons
• Towards an animation smoothness metric
• True Lies Of Optimistic User Interfaces

Web APIs

• Every Transition is a Page Transition?
• Speed Up Resource Loading with Priority Hints and fetchpriority
• Tracking CPU with Long Tasks API
• Web Performance APIs Appreciation Post

License

MIT © TK