การเรียนรู้ Core Web Vitals ให้เชี่ยวชาญ: คำแนะนำในการยกระดับประสบการณ์ผู้ใช้

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

โพสต์ที่เกี่ยวข้อง: 7 สิ่งที่เจ้าของธุรกิจจำเป็นต้องรู้เกี่ยวกับ Core Web Vitals

เหตุใด Core Web Vitals จึงมีความสำคัญมาก

1. Core Web Vitals ส่งผลต่ออันดับการค้นหาของ Google ในไซต์ของคุณ

2. สิ่งเหล่านี้มีความสำคัญต่อการมอบประสบการณ์ผู้ใช้ที่ยอดเยี่ยม

3. การเพิ่มประสิทธิภาพ Core Web Vitals สามารถเพิ่มการเข้าชมและรายได้ของไซต์ของคุณได้

การเพิ่มประสิทธิภาพ Core Web Vitals เป็นสิ่งจำเป็นสำหรับเจ้าของร้านค้าออนไลน์และนักพัฒนาในการมอบประสบการณ์การใช้งานที่ดีที่สุด อันดับที่สูงขึ้นในผลการค้นหาของ Google และเพิ่มรายได้ในท้ายที่สุด เมตริกหลักทั้งสามนี้ – Largest Contentful Paint (LCP), First Input Delay (FID) และ Cumulative Layout Shift (CLS) – ขึ้นอยู่กับความเร็วในการโหลด การโต้ตอบ และการนำเสนอภาพของเว็บไซต์ของคุณ

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

สีเนื้อหาที่ใหญ่ที่สุด (LCP) คืออะไร

Largest Contentful Paint (LCP) เป็นเมตริกสำคัญที่วัดเวลาในการโหลดองค์ประกอบเนื้อหาที่สำคัญที่สุดของหน้าเว็บ เช่น รูปภาพหรือกล่องข้อความ เป็นหนึ่งในองค์ประกอบที่สำคัญของ Core Web Vitals ซึ่งเป็นชุดเมตริกที่จำเป็นสำหรับการมอบประสบการณ์ผู้ใช้ที่ราบรื่น การเพิ่มประสิทธิภาพ LCP ของเว็บไซต์ของคุณสามารถลดเวลาในการโหลดหน้าเว็บและปรับปรุงประสบการณ์ของผู้ใช้โดยรวม ซึ่งจะนำไปสู่การรักษาและการหาลูกค้าที่เพิ่มขึ้น

พวกเราที่ Perspective ได้รับคำขอบ่อยครั้งในการปรับปรุง LCP ของ Core Web Vitals คุณสามารถดูตัวอย่างด้านล่างของการเพิ่มประสิทธิภาพของ Largest Contentful Paint (LCP) ซึ่งเราทำเพื่อลูกค้าของเรา:

1. ระบายสีเนื้อหาที่ใหญ่ที่สุดก่อนการเพิ่มประสิทธิภาพ

2. ระบายสีเนื้อหาที่ใหญ่ที่สุดหลังจากการเพิ่มประสิทธิภาพ

อ่านเพิ่มเติม: Acer vs Lenovo Chromebooks: อันไหนที่เหมาะกับคุณ?

อะไรคือสาเหตุส่วนใหญ่ของสีที่มีเนื้อหาน้อยและใหญ่ที่สุด:

1. เวลาตอบสนองของเซิร์ฟเวอร์ช้า

2. JS และ CSS ที่ไม่ได้ปรับให้เหมาะสม

3. โหลดทรัพยากรช้า

4. การแสดงผลช้าในฝั่งไคลเอนต์

วิธีเพิ่มสีเนื้อหาที่ใหญ่ที่สุด

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

1. ลบรหัส JS ที่ไม่ได้ใช้งานและย่อขนาดไฟล์ในโหมดการผลิต

2. เป็นการดีกว่าที่จะเขียนกฎ CSS ในโมดูล (บล็อก) เพื่อให้สไตล์ของตัวเลือกบางตัวไม่ได้หยุดตัวเลือกอื่น นอกจากนี้ เราขอแนะนำให้หลีกเลี่ยงการสร้างซีเลคเตอร์สายยาว ไฟล์ CSS หรือไลบรารีทั้งหมดที่จะทดสอบ ควรจัดเก็บไว้ในเครื่อง ไม่ใช่ดาวน์โหลดผ่าน CDN

3. บีบอัดรูปภาพเพื่อให้โหลดเร็วขึ้นและใช้รูปแบบใหม่ ตัวอย่างเช่น แปลง JPEG เป็น WebP ซึ่งมีขนาด 1/3 โดยไม่สูญเสียคุณภาพ

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

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

2. srcset – ให้คุณระบุเวอร์ชันต่างๆ ของรูปภาพ จากรูปภาพในแอตทริบิวต์ srcset เบราว์เซอร์จะเลือกรูปภาพที่จะโหลดและแสดงโดยขึ้นอยู่กับขนาดหน้าจอของอุปกรณ์เดสก์ท็อปหรืออุปกรณ์เคลื่อนที่ที่ใช้งาน

5. เราไม่แนะนำให้เพิ่ม loading=”lazy” ในแอตทริบิวต์แท็ก <img>

ลบแอตทริบิวต์สันหลังยาวเพื่อเพิ่มสีเนื้อหาที่ใหญ่ที่สุด

Cumulative Layout Shift (CLS) คืออะไร

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

อ่านเพิ่มเติม: การเติบโตของคาสิโนสดในปี 2023

อะไรคือสาเหตุที่พบบ่อยที่สุดของ Cumulative Layout Shift (CLS) ที่ไม่ดี

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

ขนาดไฟล์ภาพและมัลติมีเดียไม่ถูกต้อง

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

แบบสอบถาม GRAPHQL ที่ไม่ได้เพิ่มประสิทธิภาพ

เมื่อโหลดรูปภาพหรือบล็อก GraphQL บน Progressive Web App (PWA) การไม่จองพื้นที่อาจทำให้หน้า "กระโดด" หลังจากโหลด ซึ่งอาจนำไปสู่การเปลี่ยนเลย์เอาต์ที่ไม่ดีและส่งผลเสียต่อเมตริกประสิทธิภาพ

ม้าหมุนที่ไม่ได้ปรับแต่ง

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

วิธีปรับปรุงตัวบ่งชี้ความเสถียรของภาพและ Cumulative Layout Shift

การใช้ตัวยึดตำแหน่ง

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

การใช้ตัวยึดตำแหน่งเพื่อปรับปรุงคะแนนประสิทธิภาพที่ Core Web Vitals

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

<img data-src=”image.webp” width=”380″ height=”120″ alt=”image”>

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

FRONT-DASPLAY: สลับ

เพื่อให้ได้คะแนน Cumulative Layout Shift (CLS) ที่เหมาะสมที่สุด นักพัฒนาสามารถใช้คุณสมบัติ font-display: swap เพื่อแสดงข้อความในฟอนต์ระบบก่อนที่ไฟล์ฟอนต์แบบกำหนดเองจะโหลดเสร็จ กฎแบบอักษรในไฟล์แบบอักษร CSS ที่จำเป็นควรระบุเส้นทางไฟล์แบบอักษรและรวมถึงคุณสมบัติ font-display: swap

นี่คือตัวอย่างวิธีกำหนดกฎแบบอักษรด้วยคุณสมบัติ font-display: swap:

@font-face {ตระกูลแบบอักษร: “Proxima Nova”;src: url(“../fonts/proximanova-regular.woff2”) รูปแบบ(“woff2”);font-display: swap;}

เมื่อใช้คุณสมบัติ font-display: swap เบราว์เซอร์จะแสดงข้อความในแบบอักษรของระบบทันทีจนกว่าไฟล์แบบอักษรที่กำหนดเองจะโหลดเสร็จ เทคนิคนี้สามารถป้องกันการเปลี่ยนแปลงเลย์เอาต์ที่ไม่คาดคิดและปรับปรุงความเสถียรของหน้า ซึ่งส่งผลให้ผู้ใช้ได้รับประสบการณ์ที่ดีขึ้น

อ่านเพิ่มเติม: ผลกระทบของภาวะเศรษฐกิจโลกต่อมูลค่าของสกุลเงินดิจิทัล

CSS แปลง

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

เมื่อเพิ่มประสิทธิภาพการโหลดบล็อก CMS (โดยเฉพาะในโครงการ PWA) ผ่านองค์ประกอบ GraphQL HTML ขอแนะนำให้ตั้งค่าคุณสมบัติ CSS ด้วยความสูงคงที่ วิธีการนี้สามารถช่วยป้องกันการเปลี่ยนแปลงเลย์เอาต์ที่ไม่คาดคิด และทำให้เพจมีความเสถียรทางสายตาหลังจากโหลดแล้ว

การนำเทคนิคเหล่านี้ไปใช้ ธุรกิจต่างๆ สามารถปรับปรุงคะแนน Core Web Vitals และมอบประสบการณ์การใช้งานที่ราบรื่นและสนุกสนานยิ่งขึ้น หนึ่งในกรณีล่าสุดของเรา เราได้ปรับปรุงคะแนน CLS อย่างมีนัยสำคัญโดยการเพิ่มคุณสมบัติ font-display: swap ในไฟล์ CSS ตั้งค่าความสูงขั้นต่ำ และปรับการโหลดแบบอักษรให้เหมาะสม (@font-face)

1. ร้านค้าออนไลน์ก่อนการเพิ่มประสิทธิภาพ Core Web Vitals

2. ร้านค้าออนไลน์หลังจากการเพิ่มประสิทธิภาพ Core Web Vitals

ความล่าช้าในการป้อนข้อมูลครั้งแรก (FID) คืออะไร?

First Input Delay (FID) เป็นเมตริกสำคัญที่วัดการโต้ตอบของเว็บไซต์ First Input Delay วัดระยะเวลาที่ไซต์ใช้ในการตอบสนองต่อการโต้ตอบครั้งแรกของผู้ใช้กับเพจ เช่น การคลิกปุ่มหรือพิมพ์ในช่องแบบฟอร์ม

การใช้ FID ใน Magento 2

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

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

วิธีเพิ่มประสิทธิภาพ First Input Delay

การสลายตัวของงาน

แนวทางที่แนะนำเพื่อปรับปรุง First Input Delay (FID) คือการแบ่งพาร์ติชันงานที่ยาวขึ้นเป็นงานย่อยที่เล็กลงและสามารถจัดการได้มากขึ้น งานที่กินเวลานานอาจทำให้เธรดหลักมีภาระมากเกินไป ขัดขวางการประมวลผลและดำเนินการอินพุตของผู้ใช้ ส่วนรหัสใด ๆ ที่ขัดขวางโฟลว์นานกว่า 50 มิลลิวินาทีถือเป็นงานที่มีความยาว

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

ทดสอบในสภาพชีวิตจริง

หากต้องการวัดค่า First Input Delay (FID) อย่างแม่นยำ ขอแนะนำให้ใช้เครื่องมือพิเศษที่จะวัดประสิทธิภาพภายใต้สภาวะจริง เครื่องมือดังกล่าวประกอบด้วย:

1. การทดสอบ PageSpeed ​​Insights;

2. Search Console (รายงาน Core Web Vitals);

3. รายงานประสบการณ์ผู้ใช้ Chrome;

เนื่องจาก FID จำเป็นต้องมีการโต้ตอบกับผู้ใช้ การดำเนินการทดสอบในห้องปฏิบัติการจึงไม่สามารถทำได้ ในทางตรงกันข้าม เมตริกภาคสนามจะบันทึกประสิทธิภาพการทำงานในโลกแห่งความเป็นจริงโดยการวิเคราะห์พฤติกรรมของผู้ใช้ อย่างไรก็ตาม Total Blocking Time (TBT) ซึ่งเป็นเมตริกที่ประเมินระยะเวลาระหว่าง First Contentful Paint (FCP) และ Time to Interactive (TTI) สามารถวัดได้ในห้องปฏิบัติการและมีความสัมพันธ์ที่ดีกับ FID ในสภาพภาคสนาม TBT ยังเชี่ยวชาญในการระบุปัญหาที่เกี่ยวข้องกับการโต้ตอบ ดังนั้น การเพิ่มประสิทธิภาพใด ๆ ที่ปรับปรุง TBT ในสภาพแวดล้อมของห้องปฏิบัติการจะปรับปรุง FID สำหรับผู้ใช้ด้วย Lighthouse เป็นเครื่องมือที่สามารถวัด TBT ได้อย่างมีประสิทธิภาพ

อ่านเพิ่มเติม: คำแนะนำทีละขั้นตอนในการสร้างหน้าร้าน Custom Shopify

เปิดใช้งานการดาวน์โหลดตามความต้องการ

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

เพิ่มประสิทธิภาพ JAVASCRIPT

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

ตัวบ่งชี้เพิ่มเติมเพื่อปรับปรุง Core Web Vitals

นอกจาก Core Web Vitals หลักสามรายการข้างต้นแล้ว ยังมีเมตริกเสริมอีกหลายรายการ

First Contentful Paint (FCP)

First Contentful Paint (FCP) เป็นเมตริกที่มีค่าซึ่งช่วยวัดเวลาที่เพจจะแสดงรูปภาพหรือบล็อกข้อความเริ่มต้น เมตริกนี้รวมถึงเวลาในการประมวลผลสำหรับคำขอ DNS, คำขอเซิร์ฟเวอร์, การดำเนินการฝั่งเซิร์ฟเวอร์ และการแสดงผลหลักของ DOM แม้ว่าปัจจัยต่างๆ เช่น DNS และความเร็วเครือข่ายจะอยู่เหนือการควบคุมของเรา การลดเวลาการประมวลผลสำหรับงานฝั่งเซิร์ฟเวอร์และเพิ่มประสิทธิภาพการโหลดสไตล์และสคริปต์อาจส่งผลต่อประสิทธิภาพอย่างมาก โดยเฉพาะอย่างยิ่ง Google แนะนำให้จัดลำดับความสำคัญของการรวมเฉพาะสไตล์ที่สำคัญในส่วนหัวของหน้าเว็บ และถ้าเป็นไปได้ ให้ใช้แท็กสไตล์แทนแท็กลิงก์เพื่อลดคำขอเซิร์ฟเวอร์ที่ไม่จำเป็น

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

เมตริกดัชนีความเร็ว

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

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

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

การโต้ตอบกับ Next Paint

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

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

ในการปรับปรุง INP นักพัฒนาเว็บสามารถใช้เทคนิคการเพิ่มประสิทธิภาพต่างๆ เช่น การลดการใช้ JavaScript และลดขนาดของภาพและวิดีโอ นอกจากนี้ การใช้เทคโนโลยีเว็บที่ทันสมัย ​​เช่น Intersection Observer API และ Web Workers สามารถช่วยปรับปรุงประสิทธิภาพโดยการลดภาระงานที่ใช้ทรัพยากรมาก และลดภาระงานในเธรดหลัก

อ่านเพิ่มเติม: การแปลภาษาฝรั่งเศสจะส่งผลดีต่อธุรกิจของคุณอย่างไร?

เวลากัดครั้งแรก (TTFB)

Time to First Byte (TTFB) เป็นเมตริกที่สำคัญสำหรับประสิทธิภาพของเพจ หมายถึงเวลาที่เซิร์ฟเวอร์ใช้ในการรับข้อมูลไบต์แรกหลังจากส่งคำขอแล้ว ค่า TTFB ได้รับอิทธิพลจากปัจจัยต่างๆ เช่น เวลาแฝงของเครือข่าย เวลาในการประมวลผลของเซิร์ฟเวอร์ และความซับซ้อนของโค้ดของเว็บไซต์ แนะนำให้ใช้ค่า TTFB ที่ต่ำกว่า เนื่องจากบ่งชี้ว่าโหลดเร็วขึ้นและประสบการณ์ผู้ใช้ดีขึ้น เวลาตอบสนองที่เหมาะสมที่สุดสำหรับเว็บไซต์อยู่ระหว่าง 250 ถึง 350 มิลลิวินาที ในขณะที่เวลาตอบสนองที่มากกว่า 500 นั้นถือเป็นเวลาตอบสนองที่นาน และอาจส่งผลเสียต่อประสิทธิภาพของเว็บไซต์

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

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

ดังนั้นคุณไม่ควรสร้างเพจและบล็อกให้มาก แต่ลดจำนวนลงให้ได้มากที่สุด

เครื่องมือที่แนะนำสำหรับการตรวจสอบ Core Web Vitals

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

รายงาน Lighthouse มีหลายส่วน:

1. ประสิทธิภาพของไซต์: การวิเคราะห์ความเร็วในการดาวน์โหลดไซต์

2. คุณสมบัติ: อธิบายวิธีเพิ่มความเร็วไซต์ของคุณและปรับปรุงประสิทธิภาพ

3. การวินิจฉัย: ระบุสิ่งที่ต้องให้ความสนใจและแก้ไข

4. โปรแกรมเว็บก้าวหน้า: การตรวจสอบโดยละเอียด

5. ความพร้อมใช้งาน: ส่วนเกี่ยวกับวิธีปรับปรุงการออกแบบ UX

6. แนวทางปฏิบัติที่ดีที่สุด: วิธีที่ดีที่สุดในการเพิ่มประสิทธิภาพที่เชื่อถือได้ของไซต์ส่วนใหญ่

ก่อนดำเนินการตรวจสอบ คุณสามารถใช้ปุ่มวิเคราะห์การโหลดหน้าเว็บเพื่อปรับระดับการตรวจสอบให้เหมาะกับความสนใจของคุณ (ประสิทธิภาพ, SEO, การเข้าถึง ฯลฯ)

รายงานการตรวจสอบของคุณจะแสดงในหน้าต่างใหม่เมื่อเริ่มการตรวจสอบ นอกจากนี้ยังมีการวัดบนเว็บไซต์ PageSpeed ​​Insights

อย่าลืมว่าเมตริกของ Core Web Vitals จะถูกนำมาใช้ในช่วง 28 วันที่ผ่านมา

อ่านเพิ่มเติม: แล็ปท็อป Apple MacBook Air และ MacBook Pro ที่ดีที่สุดคืออะไร

ข้อสรุป

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

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