ดูข้อมูลเกี่ยวกับแดชบอร์ดแพลตฟอร์มเว็บและวิธีค้นหา HTTP API ของแดชบอร์ดเพื่อรับข้อมูลเกี่ยวกับฟีเจอร์ที่ถึงเกณฑ์พื้นฐานเพื่อสร้างเครื่องมือสำหรับเวิร์กโฟลว์การพัฒนา

Core Web Vitals มีความสำคัญมากขึ้นเรื่อยๆ เจ้าของเว็บไซต์และนักพัฒนาซอฟต์แวร์จึงให้ความสำคัญกับประสิทธิภาพและประสบการณ์ของผู้ใช้หลักมากขึ้น Google มีเครื่องมือมากมายที่จะช่วยประเมิน เพิ่มประสิทธิภาพ และตรวจสอบหน้าเว็บ แต่ผู้ใช้มักสับสนกับแหล่งข้อมูลที่แตกต่างกันและวิธีใช้แหล่งข้อมูลเหล่านั้นอย่างมีประสิทธิภาพ คู่มือนี้จะนำเสนอเวิร์กโฟลว์ที่รวมเครื่องมือหลายอย่าง รวมถึงอธิบายตำแหน่งและวิธีการที่เครื่องมือเหล่านั้นใช้ในกระบวนการพัฒนา

อ่านข้อมูลเกี่ยวกับเหตุการณ์ต่างๆ ที่เกิดขึ้นกับ Baseline ในช่วงเดือนกุมภาพันธ์ 2025

ตอนนี้ ruby-align เป็นส่วนหนึ่งของ Baseline แล้ว

เผยแพร่: 20 กุมภาพันธ์ 2025 การดาวน์โหลดโมเดล AI ขนาดใหญ่อย่างน่าเชื่อถือเป็นงานที่ท้าทาย หากผู้ใช้ขาดการเชื่อมต่ออินเทอร์เน็ตหรือปิดเว็บไซต์หรือเว็บแอปพลิเคชัน

ดูข้อมูลเกี่ยวกับคำแนะนำทรัพยากร rel=prefetch และวิธีการใช้งาน

ดูวิธีระบุและแก้ไขการเปลี่ยนเลย์เอาต์

Cumulative Layout Shift (CLS) คือเมตริกที่วัดความถี่ที่ผู้ใช้พบว่าเนื้อหาของหน้ามีการเปลี่ยนแปลงอย่างกะทันหัน ในคู่มือนี้เราจะพูดถึงการเพิ่มประสิทธิภาพสาเหตุที่พบบ่อยของ CLS เช่น รูปภาพและ iframe ที่ไม่มีขนาดหรือเนื้อหาแบบไดนามิก

scrollbar-color และ scrollbar-gutter ของ CSS พร้อมใช้งานในเครื่องมือเบราว์เซอร์หลักทั้งหมดแล้ว จึงถือเป็น Baseline ใหม่

ฉบับแรกนี้ของสรุปรายเดือนของ Baseline จะครอบคลุมเหตุการณ์ที่เกิดขึ้นใน Baseline ทั้งของ Google และชุมชนนักพัฒนาเว็บในเดือนมกราคม 2025

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

โพสต์นี้จะแนะนำเมตริก Largest Contentful Paint (LCP) และอธิบายวิธีวัดผล

ตอนนี้ Promise.try พร้อมใช้งานในเครื่องมือเบราว์เซอร์หลักทั้งหมดแล้ว จึงถือเป็น Baseline ใหม่

คำอธิบายอย่างย่อ

เผยแพร่เมื่อวันที่ 13 มกราคม 2024 บทความนี้เป็นบทความแรกในชุดบทความ 3 บทความเกี่ยวกับ LLM และแชทบ็อต ส่วนที่ 2 เกี่ยวกับ การสร้างแชทบ็อตด้วย WebLLM และส่วนที่ 3 เกี่ยวกับ การใช้ Prompt API มีให้รับชมแล้ว โมเดลภาษาขนาดใหญ่ (LLM)

เผยแพร่เมื่อวันที่ 13 มกราคม 2024 คุณสามารถสร้างโปรเจ็กต์ที่น่าทึ่งได้มากมายด้วย AI ซึ่งมีทั้งโมเดลแมชชีนเลิร์นนิงแบบคลาสสิกและโมเดลภาษาขนาดใหญ่ (LLM) รุ่นใหม่ LLM ช่วยให้คอมพิวเตอร์สร้างเนื้อหาใหม่ เขียนสรุป วิเคราะห์ข้อความเพื่อหาความรู้สึก

คุณได้รับการแจ้งเตือนว่า "ไม่'บล็อกชุดข้อความหลัก" และ"แยกงานที่ใช้เวลานาน" แล้วการทำสิ่งเหล่านั้นหมายความว่าอย่างไร

การมาสก์ CSS ให้ตัวเลือกในการใช้รูปภาพเป็นเลเยอร์มาสก์ ซึ่งหมายความว่าคุณจะใช้รูปภาพ, SVG หรือการไล่ระดับสีเป็นมาสก์เพื่อสร้างเอฟเฟกต์ที่น่าสนใจได้โดยไม่ต้องใช้โปรแกรมตกแต่งรูปภาพ

ชุดข้อมูล Web-Features, แดชบอร์ดสถานะแพลตฟอร์มเว็บ, วิดเจ็ตสถานะพื้นฐาน และอื่นๆ ย้อนดูเกณฑ์พื้นฐานในปี 2024

โพสต์นี้จะอธิบายการโหลดแบบ Lazy Loading และตัวเลือกในการโหลดวิดีโอแบบ Lazy Loading

การโหลดโมดูลล่วงหน้าเป็นวิธีการโหลดโมดูล JavaScript แบบประกาศล่วงหน้า

คุณต้องเข้าใจวิธีที่ผู้ใช้โต้ตอบกับแบบฟอร์มเพื่อเพิ่มประสิทธิภาพประสบการณ์ของผู้ใช้ ฟีเจอร์ป้อนข้อความอัตโนมัติของเบราว์เซอร์มีบทบาทสำคัญในกระบวนการนี้ ดูวิธีรวบรวมและวิเคราะห์ข้อมูลเกี่ยวกับวิธีที่ผู้ใช้ใช้การป้อนข้อความอัตโนมัติในแบบฟอร์ม

การตรวจหาเนื้อหาที่เป็นพิษจะช่วยปกป้องผู้ใช้และสร้างสภาพแวดล้อมออนไลน์ที่ปลอดภัยยิ่งขึ้น ส่วนเนื้อหาส่วนที่ 2 เราจะได้เรียนรู้วิธีสร้างเครื่องมือ AI ฝั่งไคลเอ็นต์เพื่อตรวจหาและลดความรุนแรงที่แหล่งที่มา

โพสต์นี้อธิบายเมตริกเวลาทั้งหมดในการบล็อก (TBT) และอธิบายวิธีวัด

ชุดแนวทางปฏิบัติแนะนำที่ Chrome ระบุว่าเป็นโอกาสที่ดีที่สุดในการเพิ่มประสิทธิภาพเว็บและปรับปรุง Core Web Vitals

คำแนะนำทีละขั้นตอนเกี่ยวกับวิธีแจกแจง LCP และระบุส่วนสำคัญที่ต้องปรับปรุง

เมตริกที่จำเป็นสำหรับเว็บไซต์ที่มีประสิทธิภาพ

ดูวิธีวัด Web Vitals ของเว็บไซต์ทั้งในสภาพแวดล้อมจริงและสภาพแวดล้อมห้องทดลอง

พร็อพเพอร์ตี้ content-visibility ของ CSS พร้อมใช้งานใน Baseline เวอร์ชันใหม่แล้ว

การวิจัยและระเบียบวิธีซึ่งอยู่เบื้องหลังเกณฑ์ Core Web Vitals

คุณได้ตรวจสอบข้อมูลในช่องแล้ว และพบว่าคุณมีการโต้ตอบที่ช้า ขั้นตอนถัดไปคือการดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีทดสอบการโต้ตอบเหล่านั้นด้วยตนเอง และระบุสาเหตุ

บทความนี้อธิบายที่มาของ Baseline, การมีส่วนร่วมของ Google และการเป็นเจ้าของกลุ่มชุมชน WebDX

เรียนรู้วิธีเพิ่มประสิทธิภาพหน้าเว็บสำหรับการโหลดทันทีเมื่อใช้ปุ่มย้อนกลับและไปข้างหน้าของเบราว์เซอร์

การฝัง CSS ดีขึ้นมาก

โพสต์นี้แนะนำเมตริก First Input Delay (FID) และอธิบายวิธีวัด

ดูวิธีระบุแหล่งที่มาของข้อมูลประสิทธิภาพด้วยข้อมูลการแก้ไขข้อบกพร่อง ซึ่งจะช่วยให้คุณระบุและแก้ไขปัญหาของผู้ใช้จริงด้วย Analytics ได้

ดูวิธีใช้เครื่องมือของ Google เพื่อช่วยเชื่อมโยง Core Web Vitals กับรายได้จากโฆษณา

@property ส่งผลต่อประสิทธิภาพของ CSS อย่างไร

โพสต์นี้กล่าวถึงแอตทริบิวต์การโหลดและวิธีใช้เพื่อควบคุมการโหลด iframe

มีตัวเลือกมากมายสำหรับการจัดเก็บข้อมูลในเบราว์เซอร์ ตัวเลือกใดเหมาะกับความต้องการของคุณที่สุด

บทแนะนำแบบอินเทอร์แอกทีฟแบบทีละขั้นตอนแสดงวิธีสร้างเซิร์ฟเวอร์ที่จัดการการสมัครรับข้อความ Push และส่งคำขอโปรโตคอลพุชจากเว็บไปยังบริการพุช

สํารวจวิธีที่แนะนําและไม่แนะนําในการสร้าง PWA หลายรายการโดยใช้โดเมนเดิมซ้ำพร้อมข้อดีและข้อเสีย

เกณฑ์ความสามารถในการติดตั้งของ Progressive Web App

Progressive Web App ที่ดีหรือดีเป็นอย่างไร

สิ่งที่ต้องใช้ในการเปลี่ยนไอคอน ทางลัด สี และข้อมูลเมตาอื่นๆ ในไฟล์ Manifest ของเว็บแอปสำหรับ PWA

ไฟล์ Manifest ของเว็บแอปเป็นไฟล์ JSON แบบง่ายที่บอกเบราว์เซอร์ว่าเว็บแอปควรทำงานอย่างไร

ดูวิธีติดตั้งใช้งาน CSP โดยอิงจาก Nonce ของสคริปต์หรือแฮชเพื่อป้องกันเชิงลึกจาก Cross-site Scripting

บทความนี้จะช่วยให้นักพัฒนาเว็บเลือก API ฮาร์ดแวร์ที่เหมาะสมตามอุปกรณ์ที่กำหนด

ดูวิธีใช้คำขอต้นทางที่เกี่ยวข้องเพื่ออนุญาตให้ใช้พาสคีย์ซ้ำในเว็บไซต์ต่างๆ

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

โพสต์นี้กล่าวถึงแอตทริบิวต์การโหลดและวิธีนำไปใช้ควบคุมการโหลดรูปภาพ

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

ดูวิธีส่งข้อมูล Web Vitals ไปยังพร็อพเพอร์ตี้ Google Analytics 4 แล้วส่งออกข้อมูลสำหรับการวิเคราะห์ใน BigQuery และ Looker Studio

คู่มือนี้สรุปแนวทางปฏิบัติแนะนำสําหรับเว็บไซต์ที่ควรปฏิบัติตามเมื่อขอสิทธิ์เข้าถึงความสามารถที่มีความละเอียดอ่อน (เช่น กล้อง ไมโครโฟน และตำแหน่ง) เพื่อลดข้อความแจ้งที่ไม่จำเป็นและบล็อกการเข้าถึง

ดูว่าประกาศคุกกี้ส่งผลต่อประสิทธิภาพการทำงาน การวัดประสิทธิภาพ และ UX อย่างไร

นักพัฒนาเว็บปรับแต่งการแจ้งเตือนสื่อและตอบสนองต่อเหตุการณ์ที่เกี่ยวข้องกับสื่อได้ เช่น การกรอวิดีโอหรือติดตามการเปลี่ยนแปลงด้วย Media Session API

ใช้แอตทริบิวต์ Tabindex เพื่อตั้งค่าตำแหน่งแท็บขององค์ประกอบอย่างชัดเจน

ก่อนจะจำลองการโต้ตอบที่ช้าในห้องทดลองเพื่อเพิ่มประสิทธิภาพการโต้ตอบกับ Next Paint ของเว็บไซต์ คุณจะต้องอาศัยข้อมูลภาคสนามเพื่อค้นหาข้อมูล เรียนรู้วิธีการได้ในคู่มือนี้

โพสต์นี้จะแนะนำเมตริก Time to First Byte (TTFB) และอธิบายวิธีวัดผล

ดูวิธีปรับพรอมต์เพื่อให้บรรลุผลลัพธ์ที่ต้องการใน LLM, โมเดล และขนาดโมเดลต่างๆ

โพสต์นี้จะแนะนำเมตริก การโต้ตอบกับ Next Paint (INP) และอธิบายวิธีการทำงาน วิธีวัดผล และให้คำแนะนำเกี่ยวกับวิธีปรับปรุง

คำอธิบาย: กำหนดสีที่ตอบสนองต่อรูปแบบสีที่ใช้ด้วยฟังก์ชัน light-dark()

ในคู่มือนี้จะมุ่งเป้าไปที่นักพัฒนาเว็บที่ต้องการใช้ประโยชน์จาก WebAssembly คุณจะได้เรียนรู้วิธีใช้ประโยชน์จาก Wasm ในการจัดจ้างงานที่ใช้ CPU มาก โดยใช้ตัวอย่างที่ทำงานอยู่

ในตารางกริด CSS คุณสมบัติ "grid-template-columns" และ "grid-template-rows" จะช่วยให้คุณกำหนดชื่อบรรทัดและการปรับขนาดแทร็กของคอลัมน์และแถวในตารางกริดได้ตามลำดับ การรองรับการประมาณค่าสำหรับคุณสมบัติเหล่านี้ช่วยให้เลย์เอาต์แบบตารางกริดเปลี่ยนไปมาระหว่างสถานะต่างๆ ได้อย่างราบรื่น แทนที่จะสแนปที่จุดกึ่งกลางของภาพเคลื่อนไหวหรือการเปลี่ยน

ดูวิธีควบคุมเกมในเว็บด้วย Gamepad API

พร็อพเพอร์ตี้ Inert คือแอตทริบิวต์ HTML ส่วนกลางที่ลดความซับซ้อนของวิธีนำออกและกู้คืนเหตุการณ์อินพุตของผู้ใช้สำหรับองค์ประกอบหนึ่งๆ ซึ่งรวมถึงเหตุการณ์โฟกัสและเหตุการณ์จากเทคโนโลยีความช่วยเหลือพิเศษ

ฝ่ายที่เกี่ยวข้องสามารถระบุที่มาของพาสคีย์โดยการตรวจสอบ AAGUID ดูวิธีการทำงาน

ใช้ตัวอย่างภาษาสังเคราะห์ที่เรียกว่า ExampleScript เพื่อเรียนรู้วิธีเขียนและเพิ่มประสิทธิภาพโมดูล WebAssembly ใน JavaScript โดยใช้ API ของ Binaryen.js

คอมโพเนนต์เว็บ <model-viewer> จะช่วยให้คุณใช้โมเดล 3 มิติในหน้าเว็บได้อย่างชัดแจ้ง

การบันทึกเสียง/วิดีโอเป็น "คัมภีร์ไบเบิล" ในการพัฒนาเว็บมาอย่างยาวนาน เป็นเวลาหลายปีที่เราต้องใช้ปลั๊กอินเบราว์เซอร์ ( Flash หรือ Silverlight ) เพื่อทำงาน ไปกันเถอะ HTML5 จะช่วยแก้ปัญหานี้ได้ เรื่องนี้อาจไม่ชัดเจน แต่การเพิ่มขึ้นของ HTML5

ดูวิธีใช้ "user Verification" ใน WebAuthn

ดูเหตุผลที่ข้อมูล RUM แสดงตัวเลข Core Web Vitals ที่แตกต่างจาก CrUX

การสร้างเว็บไซต์ที่ไม่แบ่งแยกและเข้าถึงได้สำหรับทุกคนเป็นสิ่งสำคัญ เราสามารถเพิ่มประสิทธิภาพความพิการในด้านต่างๆ ได้อย่างน้อย 6 ด้านหลักๆ ได้แก่ ด้านการมองเห็น การได้ยิน การเคลื่อนไหว การรับรู้ คำพูด และระบบประสาท

สคริปต์ของบุคคลที่สามมีฟีเจอร์ที่มีประโยชน์มากมาย ซึ่งทำให้เว็บมีความลื่นไหลมากขึ้น ดูวิธีเพิ่มประสิทธิภาพการโหลดสคริปต์ของบุคคลที่สามเพื่อลดผลกระทบต่อประสิทธิภาพ

ดูวิธีป้องกันการสร้างพาสคีย์ใหม่หากมีอยู่แล้วในเครื่องมือจัดการรหัสผ่านของผู้ใช้

คำแนะนำเกี่ยวกับพื้นฐานของ IndexedDB

Toolbelt คุ้มค่า ทรงพลัง และเสถียรแบบที่คุณใช้ได้ในปัจจุบัน

ดูวิธีเพิ่มประสิทธิภาพเมตริก "เวลาที่ใช้ไบต์แรก"

โฮสต์ เว็บไซต์ และต้นทางแตกต่างกันอย่างไร eTLD+1 คืออะไร บทความนี้จะอธิบาย

ดูข้อมูลเข้าสู่ระบบที่ค้นพบได้และวิธีสร้างประสบการณ์ของผู้ใช้ที่เหมาะกับกรณีการใช้งานของคุณ

ผู้ใช้จะสังเกตเห็นหากเว็บไซต์และแอปทำงานได้ไม่ดี ดังนั้นการเพิ่มประสิทธิภาพการแสดงผลจึงเป็นสิ่งสำคัญ

"ปรับขนาดObserver" จะแจ้งเตือนเมื่อสี่เหลี่ยมผืนผ้าสำหรับเนื้อหาขององค์ประกอบเปลี่ยนขนาดเพื่อให้คุณตอบสนองได้ตามความเหมาะสม

นอกจากการกำจัดการดาวน์โหลดทรัพยากรที่ไม่จำเป็นแล้ว สิ่งที่ดีที่สุดที่คุณสามารถทำได้เพื่อปรับปรุงความเร็วในการโหลดหน้าเว็บคือการลดขนาดการดาวน์โหลดโดยรวมโดยการเพิ่มประสิทธิภาพและบีบอัดทรัพยากรที่เหลืออยู่

เอกสารนี้จะอธิบายวิธีใช้ OffscreenCanvas API เพื่อปรับปรุงประสิทธิภาพเมื่อแสดงผลกราฟิกในเว็บแอป

โพสต์นี้จะแนะนำเมตริก First Contentful Paint (FCP) และอธิบายวิธีวัดผล

บทความนี้จะแสดงภาพรวมที่ครอบคลุมเกี่ยวกับเครือข่ายนำส่งข้อมูล (CDN) นอกจากนี้ยังอธิบายวิธีเลือก กำหนดค่า และเพิ่มประสิทธิภาพการตั้งค่า CDN ด้วย

คำแนะนำในทางปฏิบัติสำหรับนักพัฒนาซอฟต์แวร์เกี่ยวกับสิ่งที่ต้องทำเมื่อผู้ใช้ออกจากระบบเว็บไซต์

โพสต์นี้แนะนำเมตริกเวลาในการตอบสนอง (TTI) และอธิบายวิธีวัดผล

API ลำดับความสำคัญของการดึงข้อมูลจะระบุลำดับความสำคัญของทรัพยากรที่สัมพันธ์กับเบราว์เซอร์ ช่วยให้มีการโหลดที่เหมาะสมที่สุดและปรับปรุง Core Web Vitals

เกี่ยวกับคลาสจำลอง :user-valid และ :user- invalid และวิธีการใช้งานคลาสเหล่านี้เพื่อปรับปรุงประสบการณ์ของผู้ใช้ในการตรวจสอบความถูกต้องของอินพุต

ดูว่าผู้มีอำนาจตัดสินใจทางธุรกิจและผู้ที่ไม่ใช่นักพัฒนาซอฟต์แวร์ช่วยปรับปรุง Core Web Vitals ได้อย่างไร

ทำความเข้าใจและหลีกเลี่ยงปัญหาทั่วไปเมื่อใช้การเข้ารหัส base64 และการถอดรหัสสตริง

ตารางกริดย่อยทำให้สามารถใช้ตารางกริดร่วมกันได้ ซึ่งจะช่วยให้ตารางกริดที่ซ้อนกันอยู่ในแนวเดียวกับระดับบนและระดับข้างเคียง

ในโลกดิจิทัลปัจจุบัน การโฆษณาออนไลน์เป็นส่วนสําคัญของเว็บแบบไม่มีค่าใช้จ่ายที่เราทุกคนได้ใช้งาน อย่างไรก็ตาม โฆษณาที่ติดตั้งใช้งานไม่ดีอาจทําให้ประสบการณ์การท่องเว็บช้าลง ผู้ใช้ไม่พอใจ และทําให้การมีส่วนร่วมลดลง ดูวิธีโหลดโฆษณาอย่างมีประสิทธิภาพโดยไม่กระทบกับความเร็วของหน้าเว็บ เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ราบรื่นและเพิ่มโอกาสในการสร้างรายได้ให้เจ้าของเว็บไซต์สูงสุด

ดูว่าการครอบคลุมของโค้ดคืออะไรและดูวิธีทั่วไปในการวัด 4 วิธี

กำหนดสิ่งที่คุณต้องการทดสอบและสิ่งที่คุณสามารถยกเว้นได้

พิจารณาสิ่งที่จะทดสอบ กำหนดกรณีการทดสอบ และจัดลำดับความสำคัญ

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

เรียนรู้เกี่ยวกับความเป็นไปได้ใหม่ๆ ที่น่าตื่นเต้นสำหรับการโหลดรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ล่วงหน้าเพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ยอดเยี่ยม

วิธีปรับแบบอักษรให้เหมาะกับความต้องการของผู้ใช้เพื่อให้อ่านเนื้อหาได้อย่างสะดวกสบายที่สุด

สำรวจวิธีรวมการทดสอบประเภทต่างๆ ให้เป็นกลยุทธ์ที่สมเหตุสมผลซึ่งตรงกับโปรเจ็กต์ของคุณ

มาเริ่มที่เรื่องพื้นฐานกัน สำรวจโหมดการทดสอบทั่วไป 2 โหมดและการทดสอบอัตโนมัติที่ใช้กันทั่วไป 3 ประเภท

คุณควรตรวจสอบทรัพยากรเป็นระยะๆ เพื่อให้มั่นใจว่าทรัพยากรแต่ละรายการช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดีขึ้น

ความรู้เบื้องต้นเกี่ยวกับ WebAssembly (บางครั้งเรียกสั้นๆ ว่า Wasm) รูปแบบโค้ดไบนารีแบบพกพา และรูปแบบข้อความที่สอดคล้องกันสำหรับโปรแกรมปฏิบัติการ ตลอดจนอินเทอร์เฟซของซอฟต์แวร์สำหรับอำนวยความสะดวกในการโต้ตอบระหว่างโปรแกรมดังกล่าวและสภาพแวดล้อมของโฮสต์

โปรแกรม mkbitmap C จะอ่านอิมเมจและนำการดำเนินการต่อไปนี้ไปใช้กับรูปภาพอย่างน้อย 1 รายการ โดยเรียงลำดับดังนี้ การกลับรายการ การกรอง Highpass การปรับขนาด และเกณฑ์ ควบคุมและเปิดหรือปิดการดำเนินการแต่ละรายการได้ บทความนี้แสดงวิธีคอมไพล์ mkbitmap ไปยัง WebAssembly

ระบบไฟล์มาตรฐานจะเปิดตัวระบบไฟล์ส่วนตัวของต้นทาง (OPFS) เป็นปลายทางพื้นที่เก็บข้อมูลส่วนตัวของต้นทางหน้าเว็บ ซึ่งผู้ใช้จะไม่เห็นและสามารถเข้าถึงไฟล์ประเภทพิเศษที่เพิ่มประสิทธิภาพเพื่อประสิทธิภาพสูงสุดได้ เบราว์เซอร์สมัยใหม่รองรับระบบไฟล์ส่วนตัวต้นทาง

วิธีแสดงเนื้อหาที่ผู้ใช้ควบคุมบนเว็บแอปพลิเคชันอย่างปลอดภัย

ภาพรวมเกี่ยวกับวิธีใช้ AVIF ในระบบนิเวศ รวมถึงประโยชน์ด้านประสิทธิภาพและคุณภาพที่นักพัฒนาซอฟต์แวร์จะได้รับจาก AVIF สำหรับภาพนิ่งและภาพเคลื่อนไหว

เรียนรู้วิธีเพิ่มประสิทธิภาพการโต้ตอบกับเว็บไซต์ Next Paint

ดูข้อมูลเกี่ยวกับฟีเจอร์บางอย่างที่เป็นส่วนหนึ่งของเกณฑ์พื้นฐาน

DOM ขนาดใหญ่อาจเป็นปัจจัยที่กำหนดว่าการโต้ตอบเป็นไปอย่างรวดเร็วหรือไม่ ดูข้อมูลเพิ่มเติมเกี่ยวกับความสัมพันธ์ระหว่างขนาด DOM และ INP รวมถึงสิ่งที่คุณทําได้เพื่อลดขนาด DOM และวิธีอื่นๆ ในการจำกัดการแสดงผลเมื่อหน้าเว็บมีองค์ประกอบ DOM จำนวนมาก

เมื่อโหลดสคริปต์ เบราว์เซอร์ต้องใช้เวลาในการประเมินสคริปต์ก่อนดำเนินการ ซึ่งอาจทำให้เกิดงานที่ใช้เวลานาน ดูวิธีการประเมินสคริปต์และสิ่งที่ทำได้เพื่อป้องกันไม่ให้ระบบทำงานที่ใช้เวลานานในระหว่างการโหลดหน้าเว็บ

การแสดงผล HTML ด้วย JavaScript แตกต่างจากการแสดงผล HTML ที่เซิร์ฟเวอร์ส่ง และอาจส่งผลต่อประสิทธิภาพการทำงาน เรียนรู้ความแตกต่างของคู่มือนี้และสิ่งที่คุณทําได้เพื่อรักษาประสิทธิภาพการแสดงผลของเว็บไซต์ โดยเฉพาะในเรื่องที่เกี่ยวข้องกับการโต้ตอบ

ความล่าช้าของอินพุตมีผลอย่างมากต่อเวลาในการตอบสนองของการโต้ตอบโดยรวมและส่งผลเสียต่อ INP ของหน้าเว็บ ในคู่มือนี้ คุณจะได้เรียนรู้ว่าความล่าช้าของอินพุตคืออะไร และวิธีลดความล่าช้าดังกล่าวเพื่อให้การโต้ตอบที่เร็วขึ้น

โพสต์นี้แนะนําเมตริก Cumulative Layout Shift (CLS) และอธิบายวิธีวัดผล

WordPress ตัวเต็มที่ขับเคลื่อนโดย PHP ในเบราว์เซอร์ที่มี WebAssembly

ตัวอย่างผลงานเครื่องมือที่พร้อมใช้งานบนเว็บแล้วด้วย WebAssembly

ปรับปรุงประสบการณ์การแก้ไขข้อบกพร่องของเว็บด้วยการแมปแหล่งที่มา

คุณสามารถส่ง Progressive Web App ไปยัง App Store เช่น Android Play Store หรือ Microsoft Store และอื่นๆ ได้

Toolbelt คุ้มค่า ทรงพลัง และเสถียรแบบที่คุณใช้ได้ในปัจจุบัน

คำนวณไซน์ โคไซน์ แทนเจนต์ และอื่นๆ ใน CSS

เมธอด requestVideoFrameCallback() ทำให้ผู้เขียนเว็บสามารถลงทะเบียนโค้ดเรียกกลับที่ทำงานในขั้นตอนการแสดงผลเมื่อมีการส่งเฟรมวิดีโอใหม่ไปยังตัวทำคอมโพเนนต์

หนึ่งในซีรีส์บทสัมภาษณ์สมาชิกโปรแกรม Google Developers Experts (GDE)

บล็อกโพสต์นี้ประกาศคอลเล็กชันรูปแบบใหม่สำหรับแอปสื่อ

มาสร้างเอฟเฟกต์ข้อความไล่ระดับสีแบบเคลื่อนไหวด้วยพร็อพเพอร์ตี้ที่กำหนดเองระดับขอบเขตและ background-clip ไปที่ CodePen แล้วสร้าง Pen ใหม่ สร้างมาร์กอัปสำหรับข้อความ มาลองใช้ส่วนหัวที่มีคำว่า "รวดเร็ว" กัน จากนั้นมาทำให้ body ของเรามี background-color

การที่หนังสือแบบเลื่อนมีชีวิตขึ้นมาได้อย่างไรจากการแชร์กลเม็ดเคล็ดลับที่สนุกและน่ากลัวสำหรับ Chrometober นี้

ภาพรวมพื้นฐานของวิธีสร้างองค์ประกอบที่กำหนดเองของเคล็ดลับเครื่องมือซึ่งสามารถปรับสีได้และเข้าถึงได้ง่าย

พาสคีย์ช่วยให้บัญชีผู้ใช้ของเว็บไซต์ปลอดภัย ใช้งานง่าย ใช้งานง่ายขึ้น และไม่ต้องใช้รหัสผ่าน บทความนี้จะกล่าวถึงวิธีออกแบบการลงชื่อเข้าใช้แบบไม่ต้องใช้รหัสผ่านด้วยพาสคีย์ไปพร้อมๆ กับการช่วยเหลือผู้ที่ใช้รหัสผ่านเดิม

พาสคีย์ช่วยให้บัญชีผู้ใช้ของเว็บไซต์ปลอดภัย ใช้งานง่าย ใช้งานง่ายขึ้น และไม่ต้องใช้รหัสผ่าน บทความนี้อธิบายวิธีอนุญาตให้ผู้ใช้สร้างพาสคีย์สําหรับเว็บไซต์ของคุณ

ภาพรวมพื้นฐานของวิธีสร้างคอมโพเนนต์ FAB ที่ปรับสีได้ ตอบสนองตามอุปกรณ์ และเข้าถึงง่าย

ดูวิธีเพิ่มประสิทธิภาพแบบอักษรเว็บสําหรับ Core Web Vitals

ภาพรวมของเครื่องมือและเทคนิค 3 อย่างสำหรับการทดสอบและยืนยันคอนทราสต์สีที่เข้าถึงได้ของการออกแบบ

หนึ่งในซีรีส์บทสัมภาษณ์สมาชิกโปรแกรม Google Developers Experts (GDE)

มาสร้างโปรแกรมโหลด CSS แบบเคลื่อนไหวด้วยพร็อพเพอร์ตี้ที่กําหนดเองระดับขอบเขตและ animation-timing-function ไปที่ CodePen แล้วสร้าง Pen ใหม่ สร้างมาร์กอัปสําหรับโปรแกรมโหลด โปรดสังเกตการใช้พร็อพเพอร์ตี้ที่กำหนดเองในบรรทัด นอกจากนี้

บทแนะนํานี้จะอธิบายวิธีสร้างการนําทางหลักที่เข้าถึงได้ของเว็บไซต์ คุณจะได้ดูข้อมูลเกี่ยวกับ HTML เชิงความหมาย การช่วยเหลือพิเศษ และการใช้แอตทริบิวต์ ARIA ในบางครั้งอาจส่งผลเสียมากกว่าผลดี

ตัวเลือก Pseudo-select ใน CSS ที่มีประโยชน์นี้มอบวิธีเลือกองค์ประกอบที่อยู่ในโมดัล

ดูวิธีที่มีประโยชน์และสร้างสรรค์ในการจัดรูปแบบรายการ

การสำรวจสนุกๆ เกี่ยวกับวิธีสร้างภาพลวงตาขึ้นมาใหม่ด้วย CSS

เพิ่มประสิทธิภาพแท็กและ Tag Manager สำหรับ Core Web Vitals

ประโยชน์ของการใช้พร็อพเพอร์ตี้ที่กำหนดเองในระบบการออกแบบและไลบรารีคอมโพเนนต์

ดูวิธีใช้คุณสมบัติ CSS แปลภาษา หมุน และปรับขนาดแต่ละรายการเพื่อเปลี่ยนรูปแบบในลักษณะที่เข้าใจได้ง่าย

ดูวิธีต่างๆ ในการสร้างภาพเคลื่อนไหวเส้นขอบใน CSS

BBC กำลังเปิดตัว HSTS สำหรับเว็บไซต์เพื่อปรับปรุงความปลอดภัยและประสิทธิภาพ ดูความหมายและความช่วยเหลือจาก HSTS

ดูสาเหตุที่เครื่องมือที่ตรวจสอบเมตริก Core Web Vitals อาจรายงานตัวเลขที่แตกต่างกัน และวิธีตีความความแตกต่างเหล่านั้น

GDE Enrique Fernandez Guerra เกี่ยวกับการแนะนำองค์กร NGO HelpDev ของเขาอย่างเปิดกว้าง

จุดสิ้นสุดการสนับสนุนสำหรับ Internet Explorer มีความหมายอย่างไรต่อลูกค้าและนักพัฒนาซอฟต์แวร์ที่ Maersk.com

ยินดีที่ได้รู้จักคุณนะ HTML5Rocks

เรียนรู้วิธีตั้งค่าคุกกี้ของบุคคลที่หนึ่งเพื่อรักษาความปลอดภัย ความเข้ากันได้กับหลายเบราว์เซอร์ และลดโอกาสการเกิดความเสียหายเมื่อคุกกี้ของบุคคลที่สามเลิกใช้งานไปแล้ว

Web Audio API ทำให้สามารถซิงค์ AV ได้อย่างเหมาะสม

คุณสามารถใช้การไล่ระดับสีรูปกรวยเพื่อสร้างเอฟเฟกต์ที่น่าสนใจได้ เช่น ตัวอย่างขอบที่สวยงามนี้ CodePen นี้สร้างโดย Adam Argyle ซึ่งแชร์ผ่าน ทวีต นี้ใน Twitter เดิมแล้ว แสดงวิธีใช้ การไล่สีแบบกรวย เพื่อสร้างเส้นขอบ Terry Mun เป็นผู้ แยกโค้ด จาก CodePen

ทำความเข้าใจความแตกต่างระหว่างเฟรมเวิร์กและไลบรารีในบริบทของสภาพแวดล้อม JavaScript ฝั่งไคลเอ็นต์

ทําความเข้าใจการตัดสินใจเกี่ยวกับการใช้ไลบรารีหรือเฟรมเวิร์ก JavaScript

ตรวจจับข้อผิดพลาดเมื่อทํางานกับ Fetch API

อัปเดตเกี่ยวกับ Google Fonts CSS API ไม่ว่าจะเป็นวิธีการทำงาน วิธีการใช้งาน และวิธีแสดงแบบอักษรบนเว็บอย่างมีประสิทธิภาพ

แหล่งข้อมูลนี้จะช่วยให้คุณค้นหาเส้นทางบริเวณเครื่องชำระเงินได้อย่างรวดเร็ว

GOV.UK ยกเลิกการพึ่งพา jQuery จากส่วนหน้า คุณเดาไม่ถูกแน่ๆ ว่าเกิดอะไรขึ้น (ใช่ค่ะ)

ภาพรวมพื้นฐานของวิธีสร้างคอมโพเนนต์ที่ปรับสี ปรับเปลี่ยนตามอุปกรณ์ และเข้าถึงง่าย

มาดูว่าเครื่องมือสแกนการโหลดล่วงหน้าของเบราว์เซอร์คืออะไร ช่วยเพิ่มประสิทธิภาพการทำงานได้อย่างไร และวิธีป้องกันปัญหานี้

วิธีวัด Web Vitals ด้วยเครื่องมือวิเคราะห์ปัจจุบัน

ทำให้การสร้างเว็บเป็นเรื่องง่าย

ผู้เชี่ยวชาญของ Google Developers บนเว็บเกี่ยวกับวิธีที่โปรแกรมให้คำปรึกษาทำให้โปรแกรมเหล่านั้นกลายเป็นผู้นำ

แชร์คู่มือที่ใช้ได้จริงเกี่ยวกับแบบอักษรตัวแปร พร้อมตัวอย่างมากมาย

เครื่องมือของ Josh W Comeau ทำให้การสร้างการไล่ระดับสีที่ดูดีเป็นเรื่องง่าย

คอลเล็กชันข้อมูลเชิงลึกเกี่ยวกับประเด็นปัญหาที่สำคัญ ซึ่งรวบรวมจากการสนทนากับนักพัฒนาเว็บหลายครั้ง

ดูสถานะของเครื่องมือรูปภาพ

ดูข้อมูลเกี่ยวกับขอบเขตและวิธีการทำงานของขอบเขตใน JavaScript

ภาพรวมพื้นฐานเกี่ยวกับวิธีสร้างโมดัลมินิและเมกะที่ปรับสีตามอุปกรณ์ ตอบสนอง และเข้าถึงได้โดยใช้องค์ประกอบ

ดูวิธีแก้ไขข้อผิดพลาดในการเล่นสื่อบนเว็บ

หนึ่งในซีรีส์บทสัมภาษณ์สมาชิกโปรแกรม Google Developers Experts (GDE)

การโหลดรูปภาพในวิวพอร์ตเริ่มต้นอย่างเต็มรูปแบบขณะที่โหลดส่วนที่เหลือแบบ Lazy Loading จะช่วยปรับปรุง Web Vitals ขณะโหลดไบต์ได้น้อยลง

ภาพรวมพื้นฐานของวิธีสร้างแถบการโหลดแบบปรับอัตโนมัติและเข้าถึงได้ด้วยองค์ประกอบ ""

ทำให้แบบฟอร์มการลงทะเบียนและลงชื่อเข้าใช้มีความเรียบง่ายที่สุด บันทึกข้อมูลเข้าสู่ระบบจากแบบฟอร์มการลงชื่อเข้าใช้เพื่อให้ผู้ใช้ไม่ต้องลงชื่อเข้าใช้อีกครั้งเมื่อกลับมา วิธีจัดเก็บข้อมูลเข้าสู่ระบบของผู้ใช้จากแบบฟอร์ม ก่อนดำเนินการต่อ

สตริง User Agent มีการเปลี่ยนแปลง กลยุทธ์ที่ Chrome และ Firefox ใช้เพื่อลดผลกระทบ และวิธีที่คุณจะช่วยเหลือได้

ภาพรวมพื้นฐานของวิธีสร้างไอคอน Fav แบบปรับอัตโนมัติ

ดูวิธีแสดงผลกราฟิก 2 มิติไปยัง Canvas บนเว็บจาก WebAssembly ด้วย Emscripten

การลืมหรือใช้ส่วนหัว Cache-Control ในทางที่ผิดอาจส่งผลเสียต่อความปลอดภัยของเว็บไซต์และความเป็นส่วนตัวของผู้ใช้ รับคำแนะนำสำหรับเว็บไซต์ที่มีมูลค่าสูง

เมตริกที่จำเป็นสำหรับเว็บไซต์ที่มีประสิทธิภาพ

ดูวิธีพอร์ต gPhoto2 ไปยัง WebAssembly เพื่อควบคุมกล้องภายนอกผ่าน USB จากเว็บแอป

ใช้การบันทึกข้อผิดพลาดเกี่ยวกับเครือข่าย (NEL) เพื่อรวบรวมข้อผิดพลาดเกี่ยวกับเครือข่ายฝั่งไคลเอ็นต์

เรียนรู้วิธีใช้ฟีเจอร์ WebAssembly ใหม่ล่าสุดไปพร้อมๆ กับสนับสนุนผู้ใช้ในทุกเบราว์เซอร์

เรียนรู้วิธีการย้ายโค้ดที่มีการโต้ตอบกับอุปกรณ์ภายนอกไปยังเว็บด้วย WebAssembly และ Fugu API

ภาพรวมพื้นฐานของวิธีสร้างคอมโพเนนต์การเปลี่ยนธีมแบบปรับเปลี่ยนได้และเข้าถึงง่าย

เรียนรู้วิธีฝังโค้ด JavaScript ในไลบรารี WebAssembly ของคุณเพื่อสื่อสารกับโลกภายนอก

Oculus Quest 2 เป็นชุดหูฟัง Virtual Reality (VR) ที่ Oculus ซึ่งเป็นแผนกหนึ่งของ Meta สร้างขึ้น ตอนนี้นักพัฒนาซอฟต์แวร์สามารถสร้างและเผยแพร่ Progressive Web App (PWA) แบบ 2 มิติและ 3 มิติที่ใช้ประโยชน์จากฟีเจอร์การทำงานหลายอย่างพร้อมกันของ Oculus Quest 2 ได้แล้ว บทความนี้อธิบายถึงประสบการณ์และวิธีสร้าง ไซด์โหลด และทดสอบ PWA ใน Oculus Quest 2

ดูกระบวนการและเครื่องมือต่างๆ ในการสร้างประสบการณ์การใช้งานในรูปแบบปฏิทินวันหยุดของ Designcember

ความพยายามเชิงนิเวศที่สร้างขึ้นในการสร้างเครื่องคำนวณพลังงานแสงอาทิตย์บนเว็บขึ้นใหม่โดยใช้เซ็นเซอร์แสงแวดล้อมและฟีเจอร์วางซ้อนการควบคุมหน้าต่าง

เป็นเวลานานที่สุด คุณต้องหาวิธีแก้ปัญหาชั่วคราวและไลบรารีเพื่อสร้างสำเนาค่า JavaScript แบบเชิงลึก ตอนนี้แพลตฟอร์มจะมาพร้อมกับ `structuredClone()` ซึ่งเป็นฟังก์ชันในตัวสำหรับการคัดลอกอย่างละเอียด

ภาพรวมพื้นฐานของวิธีการสร้างส่วนประกอบของขนมปังโทสต์ที่ปรับเปลี่ยนได้และเข้าถึงได้ง่าย

ประกาศเกี่ยวกับเงินสนับสนุน UI จาก Chrome ที่ออกแบบมาเพื่อมอบเงินสนับสนุนสำหรับผู้ที่ทำงานเกี่ยวกับเครื่องมือออกแบบ, CSS และ HTML

ภาพรวมพื้นฐานของวิธีสร้างเมนูเกม 3 มิติที่ปรับเปลี่ยนตามอุปกรณ์ ปรับเปลี่ยนตามอุปกรณ์ และเข้าถึงง่าย

เรียนรู้เกี่ยวกับการวัดภาพเคลื่อนไหว วิธีพิจารณาเฟรมภาพเคลื่อนไหว และความลื่นไหลของหน้าโดยรวม

เรียนรู้เกี่ยวกับ PageSpeed Insights ล่าสุดเพื่อช่วยให้คุณวัดและเพิ่มประสิทธิภาพหน้าเว็บและคุณภาพของเว็บไซต์ได้ดีขึ้น

ลองใช้ Lighthouse API ใหม่เพื่อวัดประสิทธิภาพและแนวทางปฏิบัติแนะนำตลอดการใช้งานของผู้ใช้

สรุปประกาศสำคัญทั้งหมดจากงาน Chrome Dev Summit ปี 2021 พร้อมลิงก์สำหรับดูข้อมูลเพิ่มเติม

ตลอด 3 ปีที่ผ่านมา Chrome ได้ทำงานเพื่อสนับสนุนเว็บแอปพลิเคชันต่างๆ ที่ต้องการก้าวข้ามขอบเขตของสิ่งที่เป็นไปได้ในเบราว์เซอร์ เว็บแอปพลิเคชันหนึ่งก็คือ Photoshop แนวคิดในการเรียกใช้ซอฟต์แวร์ที่ซับซ้อนพอๆ กับ Photoshop ในเบราว์เซอร์โดยตรงคงเป็นความคิดยากที่จะจินตนาการเมื่อไม่กี่ปีที่ผ่านมา อย่างไรก็ตาม ด้วยการใช้เทคโนโลยีเว็บใหม่ๆ ที่หลากหลาย ทำให้ตอนนี้ Adobe ได้นำ Photoshop รุ่นเบต้ารุ่นสาธารณะมาใช้บนเว็บ

ภาพรวมพื้นฐานของวิธีสร้างคอมโพเนนต์แบบเลือกหลายรายการที่ปรับเปลี่ยนตามอุปกรณ์และปรับเปลี่ยนตามอุปกรณ์ได้ เพื่อการจัดเรียงและกรองประสบการณ์ของผู้ใช้

เรียนรู้พื้นฐานของการใช้ Navigation และ Resource Timing API เพื่อประเมินประสิทธิภาพการโหลดในภาคสนาม

Sanitizer API ใหม่มีเป้าหมายที่จะสร้างตัวประมวลผลที่มีประสิทธิภาพสำหรับการแทรกสตริงที่กำหนดเองในหน้าเว็บอย่างปลอดภัย บทความนี้จะแนะนำ API และอธิบายการใช้งาน

เอกสารนี้จะกล่าวถึงแนวทางปฏิบัติที่ดีที่สุดด้านประสิทธิภาพที่คุณสามารถใช้เมื่อโหลดเนื้อหาที่ฝังของบุคคลที่สาม เทคนิคการโหลดที่มีประสิทธิภาพ และเครื่องมือเทอร์มินัลการเปลี่ยนเลย์เอาต์ที่ช่วยลดการเปลี่ยนเลย์เอาต์สำหรับการฝังวิดีโอยอดนิยม

คำตอบสำหรับคำถามที่พบบ่อยเกี่ยวกับ SPA, Core Web Vitals และแผนของ Google ในการรับมือกับข้อจํากัดในการวัดผลในปัจจุบัน