Core Web Vitals ในการออกแบบเว็บไซต์ (วิธีปรับปรุง)

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

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

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

พวกเขาคืออะไรและเหตุใดจึงสำคัญ

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

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

• สีเนื้อหาที่ใหญ่ที่สุด (LCP)
• กะเค้าโครงสะสม (CLS)
• ความล่าช้าในการป้อนข้อมูลครั้งแรก (FID)

เมตริกเหล่านี้วัดได้ง่ายด้วยความช่วยเหลือของเครื่องมือต่างๆ เช่น Google Lighthouse, PageSpeed ​​Insights, GTMetrix และ Reddico SERP Speed ​​Tool หากเว็บไซต์ของคุณจัดการเพื่อให้ได้คะแนนภายในเกณฑ์ที่กำหนด คุณอาจได้รับการเพิ่มอันดับ ถ้าไม่ คุณจะรู้ว่าต้องเพิ่มประสิทธิภาพตรงไหน ให้เราพิจารณาข้อกำหนดเหล่านี้

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

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

หากไซต์ใช้เวลาในการโหลดนานกว่า 4-5 วินาที ผู้เข้าชมมักจะออกและมองหาไซต์ที่เร็วกว่า หากเวลาในการโหลดหน้าเว็บอยู่ที่ประมาณ 10 วินาที อัตราตีกลับของหน้าเว็บจะเพิ่มขึ้นสูงสุด 123% (Google) นี่คือสิ่งที่ทำให้ LCP มีความสำคัญอย่างยิ่งต่อ Core Web Vitals LCP วัดเวลาที่ต้องใช้ในการโหลดองค์ประกอบที่ใหญ่ที่สุดบนหน้าเว็บ หรือวัดจากระยะเวลาที่หน้าเว็บโหลด จนเสร็จ หาก LCP ของคุณต่ำกว่า 2.5 วินาที คุณก็ไม่มีอะไรต้องกังวล หากเกิน 4 วินาทีขึ้นไป หน้าของคุณยังต้องปรับปรุง

ในการปรับปรุง LCP ของหน้าเว็บของคุณ คุณควรคำนึงถึงประเด็นต่อไปนี้:

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

กะเค้าโครงสะสม (CLS)

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

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

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

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

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

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

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

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

เครื่องมือและเทคนิคที่คุณสามารถใช้ได้

ต่อไปนี้คือเครื่องมือและเทคนิคบางอย่างที่จะช่วยคุณแก้ไขปัญหาส่วนใหญ่เกี่ยวกับ core web Vitals

• ตรวจสอบโฮสติ้งของคุณ ด้วยความช่วยเหลือของโฮสต์เว็บที่รวดเร็วพร้อมพลังการประมวลผลที่มากขึ้น ปัญหาส่วนใหญ่เกี่ยวกับ LCP และ FID ควรได้รับการแก้ไข ระบุประเภทการโฮสต์ไซต์ของคุณที่ต้องการ จากนั้นทำการเลือกที่ดีที่สุด
• ตั้งค่าการแคชสำหรับไซต์ของคุณ WP Rocket เป็นเครื่องมือที่ยอดเยี่ยมที่สามารถตั้งค่านี้สำหรับเว็บไซต์ WordPress ได้อย่างง่ายดาย
• ใช้การโหลดแบบขี้เกียจ วิธีนี้ทำให้แน่ใจได้ว่ามีการโหลดเฉพาะส่วนที่มองเห็นได้ของหน้าเว็บแทนที่จะโหลดทั้งหมด สิ่งนี้จะทำให้ความเร็วในการโหลดเว็บไซต์ของคุณเร็วขึ้น WP Rocket และ Autoptimize เป็นเครื่องมือที่ดีในการตั้งค่านี้
• ตั้งค่า CDN หรือ Cloud Delivery Network สิ่งนี้จะตั้งค่าเซิร์ฟเวอร์เสมือนทั่วโลกสำหรับเว็บไซต์ของคุณ ซึ่งหมายความว่าผู้คนทั่วโลกสามารถเยี่ยมชมเว็บไซต์ได้โดยไม่มีปัญหาเรื่องความเร็ว
• บีบอัดรูปภาพของคุณ หากคุณให้บริการรูปภาพคุณภาพสูงเท่านั้น ไซต์ของคุณจะใช้เวลาโหลดนานโดยไม่จำเป็น ใช้เครื่องมือเช่น ShortPixel และ io เพื่อลดขนาดรูปภาพโดยไม่ลดทอนคุณภาพ พยายามใช้รูปภาพในรูปแบบ .webp เนื่องจากรูปภาพเหล่านี้เป็นมิตรกับเว็บมากที่สุด
• ล้างสคริปต์ของคุณและลบสคริปต์ที่คุณไม่ต้องการออก หากเว็บไซต์ของคุณเก่ากว่าเล็กน้อย คุณจะต้องมีปลั๊กอินบางตัวที่คุณไม่ได้ใช้อีกต่อไป ถอนการติดตั้งและลบออก
• อัปเกรดเป็น HTTPS หากคุณยังไม่ได้ดำเนินการ มันเร็วกว่า

บทสรุป

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