ทำไมฉันถึงเขียนสิ่งนี้

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

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

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

CLS และ LCP คืออะไรกันแน่?

ก่อนที่ฉันจะประสบปัญหา ให้ฉันอธิบายว่าจริงๆ แล้วสิ่งเหล่านี้คืออะไร เพราะเมื่อฉันเห็นคำย่อเหล่านี้ใน Google Search Console ครั้งแรก ฉันไม่รู้ว่ามันหมายถึงอะไร

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

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

ทั้งสองอย่างนี้อยู่ภายใต้ของ GoogleCore Web Vitalsซึ่งส่งผลโดยตรงต่ออันดับการค้นหาของคุณ ดังนั้นแม้ว่าเนื้อหาของคุณจะยอดเยี่ยม แต่คะแนน CLS และ LCP ที่ไม่ดีก็สามารถรั้งคุณไว้ได้

เพิ่มประสิทธิภาพเว็บไซต์ของคุณสำหรับ CLS และ LCP

🖼️

กำหนดขนาดภาพ
ระบุความกว้างและความสูงของรูปภาพ

📢

ใช้โฆษณาอย่างมีความรับผิดชอบ
หลีกเลี่ยงการปรับขนาดโฆษณาโดยไม่คาดคิด

⚡

โหลดทรัพยากรที่สำคัญล่วงหน้า
ตรวจสอบให้แน่ใจว่าเนื้อหาสำคัญโหลดได้อย่างรวดเร็ว

🔄

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

📊

ตรวจสอบประสิทธิภาพอย่างสม่ำเสมอ
ใช้เครื่องมือเพื่อติดตามคะแนน CLS และ LCP

ฝันร้าย CLS ของฉัน

CLS เป็นปัญหาแรกที่ฉันพบ หน้าของฉันดูดีสำหรับฉัน แต่คะแนนของฉันแย่มาก หลังจากขุดมาหลายครั้ง ฉันพบผู้ร้ายหลัก:

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

การแก้ไขปัญหา CLS ส่วนใหญ่ของฉันทำได้ง่ายมากอย่างน่าประหลาดใจ ฉันเริ่มกำหนดขนาดที่ชัดเจนสำหรับรูปภาพและสื่อทั้งหมด ฉันเพิ่มการสลับการแสดงผลแบบอักษรลงในการโหลดแบบอักษรของฉัน เพื่อให้ทางเลือกแสดงผลทันที และฉันจองพื้นที่ด้วย CSS สำหรับเนื้อหาใดๆ ที่โหลดแบบไดนามิก

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

แล้วปัญหา LCP ก็มาถึง

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

ปัญหาหลักที่ฉันพบคือ:

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

เช่นการศึกษาของ Backlinkoแสดงให้เห็นว่าไซต์ที่มีคะแนน LCP ดีมีการมีส่วนร่วมที่ดีขึ้นอย่างเห็นได้ชัดและมีอัตราตีกลับต่ำกว่า เมื่อฉันเริ่มแก้ไขปัญหาเหล่านี้ ฉันมองเห็นความแตกต่างในการวิเคราะห์ของตัวเอง

สิ่งที่ช่วย LCP ของฉันได้จริงๆ

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

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

ส่วนที่น่ารำคาญ - มันไม่เคย "แก้ไข" จริงๆ

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

ฉันมีเวลาหลายสัปดาห์ที่ทุกอย่างกลายเป็นสีเขียวใน Google Search Console จากนั้นฉันก็เพิ่มองค์ประกอบใหม่หนึ่งองค์ประกอบ และทันใดนั้น CLS ของฉันก็ถูกตั้งค่าสถานะอีกครั้ง มันน่ารำคาญมาก แต่ฉันได้เรียนรู้ที่จะตรวจสอบ Core Web Vitals ของฉันหลังจากการเปลี่ยนแปลงที่สำคัญทุกครั้งในตอนนี้

ผลกระทบของ CLS และ LCP ต่อประสบการณ์ผู้ใช้

0.1 วินาที

ความอดทนของผู้ใช้

32%

อัตราตีกลับเพิ่มขึ้น

อัตราการแปลงลดลง

Core Web Vitals

ความสำคัญอันดับ SEO

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

เครื่องมือที่ช่วยฉันได้มากที่สุด

หากคุณกำลังเผชิญกับปัญหาเดียวกัน นี่คือเครื่องมือที่ฉันใช้จริงและพบว่ามีประโยชน์:

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

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

คำแนะนำของฉันหากคุณกำลังประสบปัญหานี้

หากผลงานของคุณขึ้นๆ ลงๆ เหมือนของฉัน นี่คือสิ่งที่ฉันอยากจะแนะนำ:

อย่าตื่นตกใจ.ปัญหา CLS และ LCP เป็นเรื่องปกติอย่างไม่น่าเชื่อ คุณไม่ได้ทำทุกอย่างผิด - การวัดเหล่านี้เป็นเพียงความละเอียดอ่อน
ตรวจสอบการวิเคราะห์ของคุณตามประเทศเว็บไซต์ของคุณอาจเร็วสำหรับคุณ แต่ช้าสำหรับผู้เยี่ยมชมที่อื่น CDN สามารถแก้ไขปัญหานี้ได้อย่างรวดเร็ว
แก้รูปภาพก่อนจากประสบการณ์ของผม รูปภาพที่ไม่ได้เพิ่มประสิทธิภาพและขนาดที่ขาดหายไปเป็นสาเหตุของปัญหา CLS และ LCP ส่วนใหญ่
ทดสอบหลังการเปลี่ยนแปลงทุกครั้งสร้างนิสัยในการใช้งาน PageSpeed Insights ทุกครั้งที่คุณทำการอัปเดตที่สำคัญ
จงอดทนข้อมูล Google Search Console อาจใช้เวลาหลายวันหรือหลายสัปดาห์ในการอัปเดต อย่าถือว่าการแก้ไขของคุณไม่ทำงานเพียงเพราะว่าแดชบอร์ดยังไม่มีการเปลี่ยนแปลง

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

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