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

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

ดูข้อมูลเกี่ยวกับประสิทธิภาพ

เมตริก Core Web Vitals คือชุดเมตริก 3 รายการที่มุ่งเน้นประสบการณ์ของผู้ใช้ ซึ่งจะวัดประสิทธิภาพและความสามารถในการใช้งานของหน้าเว็บ รวมถึงเวลาที่ใช้ในการโหลดที่ผู้ใช้รับรู้ ความเสถียรของภาพ และการตอบสนองต่ออินพุตของผู้ใช้ หากคุณเพิ่งเคยใช้ Core Web Vitals คำแนะนำเหล่านี้จะช่วยให้คุณคุ้นเคยกับวิธีการทํางานของเมตริก และใช้เป็นจุดเริ่มต้นในการเพิ่มประสิทธิภาพ
LCP คือเมตริกที่วัดระยะเวลาที่เนื้อหาชิ้นใหญ่ที่สุดปรากฏในหน้าเว็บ หน้าเว็บที่มีสัญญาณ LCP ต่ำต่อผู้ใช้ว่าหน้าเว็บของคุณโหลดได้อย่างรวดเร็ว
ดูข้อมูลเพิ่มเติม
CLS เป็นเมตริกที่วัดความเสถียรของเลย์เอาต์โดยการสังเกตหน้าเว็บเพื่อหาการเปลี่ยนแปลงที่ไม่คาดคิดของเลย์เอาต์ หน้าเว็บที่มี CLS ต่ำจะส่งสัญญาณให้ผู้ใช้ทราบว่าเลย์เอาต์ของหน้าเว็บนั้นเสถียรและจะไม่เปลี่ยนแปลงโดยไม่คาดคิดขณะที่ผู้ใช้พยายามโต้ตอบกับหน้าเว็บ
ดูข้อมูลเพิ่มเติม
INP เป็นเมตริกที่วัดการตอบสนองของหน้าเว็บต่ออินพุตของผู้ใช้ หน้าเว็บที่มี INP ต่ำจะส่งสัญญาณให้ผู้ใช้ทราบว่าหน้าเว็บตอบสนองอย่างรวดเร็วเมื่อผู้ใช้โต้ตอบกับหน้าเว็บ ทำให้เว็บไซต์น่าเชื่อถือและใช้งานได้ง่ายขึ้น
ดูข้อมูลเพิ่มเติม
เมตริก Core Web Vitals แต่ละรายการสามารถเพิ่มประสิทธิภาพเพื่อปรับปรุงประสบการณ์ของผู้ใช้ แต่ละคู่มือจะลงรายละเอียดเพื่อแสดงให้เห็นว่าคุณสามารถใช้เทคนิคที่ผ่านการพิสูจน์แล้วในการปรับปรุงประสิทธิภาพและความน่าเชื่อถือของเว็บไซต์เพื่อให้ผู้ใช้มีส่วนร่วมมากขึ้นและมีแนวโน้มที่จะออกจากเว็บไซต์น้อยลง
ดูวิธีเพิ่มประสิทธิภาพ LCP สําหรับผู้ใช้เพื่อให้ผู้ใช้เห็นเนื้อหาที่สําคัญที่สุดในหน้าเว็บของคุณได้เร็วที่สุด
ดูข้อมูลเพิ่มเติม
ดูวิธีเพิ่มประสิทธิภาพ CLS สําหรับผู้ใช้เพื่อให้ผู้ใช้มั่นใจว่าเว็บไซต์จะยังคงเสถียรและใช้งานได้มากขึ้น
ดูข้อมูลเพิ่มเติม
ดูวิธีเพิ่มประสิทธิภาพ INP สําหรับผู้ใช้เพื่อให้ผู้ใช้คาดหวังได้ว่าเว็บไซต์จะตอบสนองต่อการโต้ตอบอย่างรวดเร็ว
ดูข้อมูลเพิ่มเติม
ตัวชี้วัด Core Web Vitals 3 รายการและวิธีเพิ่มประสิทธิภาพเป็นจุดเริ่มต้นที่ดี แต่ยังมีหัวข้ออื่นๆ อีกมากมายที่ควรทราบ คอลเล็กชันเนื้อหานี้จะช่วยให้คุณเข้าใจวิธีวัดผล แก้ไขข้อบกพร่อง รวมถึงแนวทางปฏิบัติแนะนำเพิ่มเติมสำหรับประกาศเกี่ยวกับคุกกี้ ภาพสไลด์ และข้อกังวลอื่นๆ ที่พบบ่อยเกี่ยวกับอินเทอร์เฟซผู้ใช้
ดูข้อมูลเพิ่มเติม
การปรับปรุงประสิทธิภาพไม่เพียงแต่ปรับปรุงประสบการณ์ของผู้ใช้เท่านั้น แต่ยังมีโอกาสช่วยให้ธุรกิจของคุณเติบโตอีกด้วย ดูวิธีที่บริษัทเหล่านี้ปรับปรุง Core Web Vitals และเมตริกทางธุรกิจเพิ่มขึ้น
ดูวิธีที่ Disney+ Hotstar เพิ่มยอดดูการ์ดรายสัปดาห์ในอุปกรณ์ห้องนั่งเล่นได้ 100% ด้วยการลด INP ลง 61%
ดูข้อมูลเพิ่มเติม
ดูว่าแพลตฟอร์มการจัดการความยินยอมของ PubTech ลด INP บนเว็บไซต์ของลูกค้าได้ถึง 64% และเพิ่มการมองเห็นโฆษณาได้สูงสุดถึง 1.5%
ดูข้อมูลเพิ่มเติม
ดูวิธีที่ Taboola ใช้ The Long Animation Frames API (LoAF) เพื่อปรับปรุง INP สูงสุด 36% สําหรับเว็บไซต์พาร์ทเนอร์ผู้เผยแพร่โฆษณา
ดูข้อมูลเพิ่มเติม

ข้อมูลพื้นฐานเป็นสัญญาณที่ส่งไปยังนักพัฒนาเว็บเมื่อฟีเจอร์ของแพลตฟอร์มเว็บสามารถใช้งานได้อย่างปลอดภัยในเครื่องมือเบราว์เซอร์หลักทั้งหมด ต่อไปนี้คือฟีเจอร์ที่เกี่ยวข้องกับประสิทธิภาพของเว็บที่พร้อมใช้งานใน "ข้อมูลพื้นฐานใหม่" แล้ว
พร็อพเพอร์ตี้ CSS content-visibility เปลี่ยนเป็น "Baseline ใหม่" ในเดือนกันยายน 2024
รูปแบบรูปภาพ AVIF กลายเป็น Baseline ใหม่ในเดือนมกราคม 2024
การโหลดโมดูลล่วงหน้ากลายเป็น "เกณฑ์พื้นฐาน" จะพร้อมใช้งานในเดือนกันยายน 2023
ส่วนหัวการตอบกลับ HTTP Server-Timing เปลี่ยนเป็น "พื้นฐานใหม่" ในเดือนมีนาคม 2023

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