5 วิธีในการเริ่มเพิ่มประสิทธิภาพเว็บไซต์ธุรกิจของคุณสำหรับ Core Web Vitals

เผยแพร่แล้ว: 2022-05-04

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

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

Core Web Vitals คืออะไร?

Core Web Vitals ถูกตั้งค่าให้เปลี่ยนวิธีที่ Google จัดอันดับเว็บไซต์ ครอบคลุมสามตัวชี้วัดหลัก ได้แก่ :

Largest Contentful Paint (LCP) มันวัดความเร็วในการโหลดหน้า
ความล่าช้าในการป้อนข้อมูลครั้งแรก (FID) FID นั้นเกี่ยวกับการโต้ตอบหรือการมีส่วนร่วมของเพจของคุณ
การเปลี่ยนแปลงเค้าโครงสะสม (CLS) เมตริกนี้จะวัดว่าองค์ประกอบในหน้าเว็บของคุณมีความเสถียรเพียงใดเมื่อผู้ใช้โต้ตอบกับองค์ประกอบ

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

และนี่คือห้าวิธีที่มีประสิทธิภาพในการทำเช่นนั้น:

เพิ่มประสิทธิภาพรูปภาพและวิดีโอของคุณ

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

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

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

รูปภาพที่ขี้เกียจและสคริปต์ของบุคคลที่สาม

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

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

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

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

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

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

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

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

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

แก้ไขรูปแบบ UX ของคุณสำหรับเดสก์ท็อปและมือถือ

การเปลี่ยนเลย์เอาต์หลายครั้งเป็นผลมาจากรูปแบบ UX ที่ไม่ดี ตัวอย่างหนึ่งคือป๊อปอัปในเว็บไซต์หรือแบนเนอร์ที่ปรากฏขึ้นที่ด้านบนของหน้าเพื่อประกาศ เมื่อองค์ประกอบเหล่านี้ทำอย่างนั้น พวกเขามักจะกดสิ่งอื่น ๆ ลงบนหน้า

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

ปรับปรุงการตั้งค่าการตรวจสอบผู้ใช้จริง (RUM) ของคุณ

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

Google Search Console (GSC) เป็นเครื่องมือที่มีประโยชน์ที่จะบอกคุณถึงประสิทธิภาพของหน้าเว็บตามกลุ่ม URL หรือการจัดกลุ่มของ URL ที่มีโครงสร้าง HTML ที่คล้ายกัน

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

เคล็ดลับโบนัส:

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

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

คุณจะทราบได้อย่างไรว่าเซิร์ฟเวอร์ตอบสนองช้าหรือไม่ ใช้เครื่องมือต่างๆ เช่น การทดสอบหน้าเว็บและ Lighthouse

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

ประสิทธิภาพของเว็บไซต์ดีขึ้น ประสบการณ์ผู้ใช้ดีขึ้น — อันดับดีขึ้น

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

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