วิธีรับคะแนน Web Vitals หลักมากกว่า 90 คะแนนสำหรับร้านค้าอีคอมเมิร์ซ (กรณีศึกษา)

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

เมื่อ Google เปิดตัว การประเมิน Web Vitals หลัก เป็นครั้งแรก เจ้าของร้านค้าอีคอมเมิร์ซจำนวนมากเริ่มตื่นตระหนก

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

ตัวอย่างเช่น แชทสดอาจใช้เวลา 6-10 วินาทีในการโหลดด้วยตัวเอง การโหลดการติดตามอีเมลพื้นฐานด้วย Klaviyo อาจใช้เวลา 1-2 วินาที การเพิ่มพิกเซลของ Facebook อาจใช้เวลาโหลดเป็นร้อยมิลลิวินาที

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

จากรายงานของ Searchmetrics ระบุว่า 96% ของไซต์ที่ทดสอบในสหรัฐอเมริกาไม่ผ่าน Core Web Vitals Assessment ของ Google สำหรับเดสก์ท็อป มือถือ หรือทั้งสองอย่าง

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

ในโพสต์นี้ ฉันจะแสดงขั้นตอนที่แน่นอนที่ฉันทำเพื่อ ให้ได้คะแนน Google Core Vitals 90+ สำหรับเว็บไซต์ร้านค้าอีคอมเมิร์ซ 7 รูปของฉัน

รับหลักสูตรมินิฟรีของฉันเกี่ยวกับวิธีเริ่มต้นร้านค้าอีคอมเมิร์ซที่ประสบความสำเร็จ

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

คลิกที่นี่เพื่อดาวน์โหลด

Google Core Vitals คืออะไร?

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

Google Core Vitals ประกอบด้วย 3 องค์ประกอบ

• Largest Contentful Paint (Google ต้องใช้เวลา 2.5 วินาทีหรือน้อยกว่า) – นี่คือการวัดระยะเวลาที่ใช้ในการดูเนื้อหาที่ใหญ่ที่สุดที่แสดงบนหน้าจอของคุณ โดยพื้นฐานแล้ว เว็บไซต์ของคุณโหลดได้เร็วเพียงใด
• First Input Delay (Google ต้องการ 100 มิลลิวินาทีหรือน้อยกว่า) – นี่คือการวัดการตอบสนองและการใช้งานของเพจของคุณ โดยเฉพาะอย่างยิ่ง Google กำลังวัดความล่าช้าระหว่างผู้เข้าชมที่คลิกคุณลักษณะแบบโต้ตอบและความเร็วที่หน้าเว็บตอบสนองต่อการคลิกนั้น
• Cumulative Layout Shift (Google ต้องการคะแนน .1 หรือน้อยกว่า) – นี่คือการวัดความเสถียรของหน้าเว็บขณะโหลด เนื้อหาของคุณเลื่อนขึ้นและลงในขณะที่แสดงหน้าหรือไม่ นี่เป็นเมตริกเดียวของ Google Core Web Vital ที่ไม่เกี่ยวข้องกับความเร็วของหน้า นอกจากนี้ยังเป็นการดีบักที่ยากที่สุดหากคุณไม่รู้ว่ากำลังทำอะไรอยู่

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

ร้านค้าอีคอมเมิร์ซที่ใช้สำหรับกรณีศึกษานี้

เจ้าของร้านค้าอีคอมเมิร์ซส่วนใหญ่อยู่ใน Shopify, WooCommerce, BigCommerce หรือ Shift4Shop และ กลยุทธ์ทั้งหมดเหล่านี้ใช้ไม่ว่าคุณจะอยู่บนแพลตฟอร์มใด

ร้านค้าฟิกเกอร์ 7 ของฉันตั้งอยู่ที่ BumblebeeLinens.com อย่าลังเลที่จะ เรียกใช้การทดสอบความเร็วของหน้า Google บนร้านค้าของฉัน เมื่อคุณอ่านโพสต์นี้เพื่อดูผลลัพธ์ของฉันโดยตรง

ก่อนอื่น ร้านค้าของฉันใช้ ระฆังและนกหวีดอีคอมเมิร์ซล่าสุด มากมายเพราะฉันสอนหลักสูตรอีคอมเมิร์ซที่ Profitable Online Store

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

ต่อไปนี้คือ ปลั๊กอินและบริการ ที่ฉันใช้ในร้านของฉันสำหรับกรณีศึกษานี้

• Klaviyo – แพลตฟอร์มการตลาดผ่านอีเมลของฉัน
• Postscript – แพลตฟอร์มการตลาด SMS ของฉัน
• Vizury – ผู้ให้บริการการแจ้งเตือนแบบพุชของฉัน
• ManyChat – ผู้ให้บริการการตลาด Facebook Messenger ของฉันซึ่งใช้งานการแชทสดของฉัน
• Gorgias – ซอฟต์แวร์บริการลูกค้าของฉันที่จัดการการติดต่อกับลูกค้าทั้งหมด
• Spin To Win Popup – แม่เหล็กนำหลักของฉันสำหรับร้านค้าของฉัน
• Facebook Pixel – ติดตามยอดขายทั้งหมดของฉันจาก Facebook
• Google Analytics – ติดตามยอดขายเว็บไซต์ของฉัน
• แจ้งเลื่อนขึ้น - ให้หลักฐานทางสังคมโดยแสดงยอดขายเมื่อเข้ามา

เพื่อความสนุก นี่คือความเร็วที่ไซต์ของฉันโหลด โดยไม่มีการเพิ่มประสิทธิภาพใดๆ

นี่คือความเร็วที่มันทำงาน ด้วยการเพิ่มประสิทธิภาพที่ ฉันกำลังจะสอนวิธีนำไปใช้

วิธีแก้ไขปัญหาการระบายสีเนื้อหาขนาดใหญ่ (LCP) และปัญหาความล่าช้าในการป้อนข้อมูลครั้งแรก (FID)

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

สำหรับร้านค้าอีคอมเมิร์ซ 99% นั้น ปัญหา LCP และ FID เกิดจาก...

• กำลังโหลด JavaScript และ CSS ที่บล็อกการแสดงผล – หากไม่มีการเพิ่มประสิทธิภาพ ไฟล์จาวาสคริปต์และ css จะถูกโหลดตามลำดับซึ่งสามารถบล็อกการแสดงภาพหน้าเว็บของคุณได้ วิธีที่ดีที่สุดในการเร่งความเร็วจาวาสคริปต์ของคุณคือ ขี้เกียจโหลดโค้ดของคุณหรือเลื่อนการเรนเดอร์เพื่อไม่ให้บล็อกอะไร
• กำลังโหลดรูปภาพขนาดใหญ่และ/หรือวิดีโอ – ยิ่งรูปภาพของคุณมีขนาดใหญ่และความละเอียดสูงเท่าใด ก็ยิ่งใช้เวลาในการโหลดนานขึ้นเท่านั้น คุณไม่ควรโหลดภาพที่ใหญ่กว่าที่แสดงบนเว็บไซต์ของคุณ นอกจากนี้ คุณไม่ควรโหลดรูปภาพที่ไม่ปรากฏบนหน้าจอ
• เซิร์ฟเวอร์ที่ช้า – เซิร์ฟเวอร์ที่ช้าไม่ควรมีปัญหากับแพลตฟอร์มที่โฮสต์อย่างสมบูรณ์เช่น Shopify, BigCommerce หรือ Shift4Shop แต่ถ้าคุณใช้ WooCommerce การใช้โฮสต์ที่เร็วกว่าเช่น WPEngine อาจทำให้ไซต์ของคุณเร็วขึ้นอย่างมาก

ในระดับสูง หากคุณแก้ไขปัญหา 3 ประการที่กล่าวถึงข้างต้น คุณจะมีเว็บไซต์ที่รวดเร็วทันใจ

วิธีการบรรลุความเร็วในการโหลดหน้า 1 วินาที

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

โดยทั่วไป คุณควร มุ่งเน้นไปที่ 5 และนำ 1 และ 2 มาใช้ก็ต่อเมื่อคุณมีเวลาหรือถ้าคุณเป็นสุดยอด :)

หากคุณต้องการทราบ ว่าฉันบรรลุความเร็วในการโหลดหน้าเว็บ 1 วินาที ได้ อย่างไร คุณสามารถกระโดดตรงไปยังปืนใหญ่ด้วยคะแนน 5:)!

เปิดใช้งานการแคชเบราว์เซอร์ (คะแนน 1 จาก 5)

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

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

ลดขนาดไฟล์ CSS/JS (ให้คะแนน 1 จาก 5 คะแนน)

การลดขนาด CSS/JS ของคุณ จะเป็นการลบพื้นที่ว่างทั้งหมด ออกจากไฟล์ CSS และ javascript เพื่อประหยัดไบต์ที่นี่และที่นั่น

โดยทั่วไป การลดขนาดไฟล์ CSS/JS ของคุณจะ ไม่ช่วยเพิ่มความเร็วของหน้าเว็บได้อย่างมาก

ดำเนินการเพิ่มประสิทธิภาพนี้หากคุณพยายามหา ความเร็วทุกๆ มิลลิวินาทีสุดท้าย จากไซต์ของคุณ

รวมไฟล์ HTML, CSS และ JS (คะแนน 2 จาก 5)

การรวมไฟล์ HTML, CSS และ JS ของคุณเป็นไฟล์จำนวนน้อยลงอาจส่งผลต่อความเร็วหน้าเว็บ ของคุณ เนื่องจาก เซิร์ฟเวอร์ของคุณต้องดึงไฟล์น้อยลง

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

ล้างการเปลี่ยนเส้นทางของคุณ (คะแนน 2 จาก 5)

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

ตัวอย่างเช่น เมื่อฉันย้ายหน้าทั้งหมดของฉันจาก http:// เป็น https:// เมื่อหลายปีก่อน ฉันได้ออก 301 เปลี่ยนเส้นทางจากหน้าและรูปภาพบางหน้าไปยังหน้าคู่ที่ปลอดภัยเพื่อแก้ไขอย่างรวดเร็ว

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

ใช้โฮสต์เว็บที่เร็วกว่า (ให้คะแนน 3 จาก 5)

หากคุณใช้ แพลตฟอร์มโอเพ่นซอร์ส เช่น WooCommerce หรือ Magento สัญชาตญาณแรกของคุณอาจเป็นการทุ่มเงินไปที่เซิร์ฟเวอร์ใหม่เพื่อแก้ไขปัญหาความเร็วหน้าเว็บของคุณ

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

ใช้ A CDN (คะแนน 2-3 จาก 5)

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

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

แต่สำหรับไซต์ขนาดเล็กเช่นของฉันซึ่งให้บริการในสหรัฐอเมริกาเป็นหลัก การใช้ CDN มี ผลกระทบเพียงเล็กน้อยต่อความเร็วของหน้าเว็บ

โหลดรูปภาพและสคริปต์ที่ใหญ่ขึ้นล่วงหน้า (คะแนน 3 จาก 5)

เมตริกอย่าง "การลงสีที่มีเนื้อหามากที่สุด" จะ วัดความเร็วขององค์ประกอบที่ใหญ่ที่สุด ในหน้าเว็บของคุณ ด้วยเหตุนี้ จึงควร "โหลดล่วงหน้า" องค์ประกอบที่ใหญ่ที่สุดในหน้าเว็บของคุณโดย การให้คำแนะนำในโค้ด HTML ของคุณ

คำแนะนำในการโหลดล่วงหน้าคือคำแนะนำในโค้ด HTML ของคุณ ซึ่งจะบอกเบราว์เซอร์ ว่าทรัพยากรใดที่สำคัญที่สุดสำหรับหน้าเว็บ

ตัวอย่างเช่น หากคุณมีรูปภาพสแปลชขนาดใหญ่ คุณ ควรเริ่มโหลดรูปภาพนี้ก่อนเพื่อปรับปรุง LCP ของคุณ

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

ลดขนาดรูปภาพของคุณ (คะแนน 4 จาก 5)

เจ้าของร้านค้าอีคอมเมิร์ซรายใหม่ส่วนใหญ่ใช้ขนาดภาพที่ ใหญ่กว่าที่กำหนด มาก หากธีมร้านค้าออนไลน์ของคุณใช้รูปภาพขนาด 1,000×1000 คุณไม่ควรอัปโหลดรูปภาพที่มีขนาดใหญ่กว่า 1,000 x 1,000

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

ตัวอย่างเช่น รูปภาพสินค้าในร้านค้าของฉันจะแสดงในขนาดเต็ม, ขนาด 50%, ขนาด 33% และขนาด 25% ขึ้นอยู่กับหน้า

ด้วยเหตุนี้ ฉันมีไฟล์รูปภาพ 4 ไฟล์ (1 สำหรับแต่ละขนาด) บนไซต์ของฉัน และ ฉันจะแสดงเฉพาะรูปภาพที่เล็กที่สุดที่จำเป็น โดยไม่สูญเสียคุณภาพ

นอกจากนี้ คุณควรบีบอัดไฟล์ JPG ทั้งหมดของคุณให้เหลือ คุณภาพสูงสุด 50 ใน Photoshop (หรือโปรแกรมรูปภาพใดก็ตามที่คุณใช้)

บีบอัดและแคชหน้าของคุณ (คะแนน 4 จาก 5)

หากคุณอยู่บนแพลตฟอร์มที่โฮสต์โดยสมบูรณ์ เช่น Shopify, BigCommerce หรือ Shift4Shop หน้าของคุณน่าจะถูกบีบอัดและแคชอย่างสมบูรณ์ ก่อนที่จะแสดงผล

แต่ถ้าคุณอยู่บนแพลตฟอร์มโอเพ่นซอร์สเช่น WooCommerce ตรวจสอบให้แน่ใจว่าคุณใช้ปลั๊กอินเช่น WP Rocket

WP Rocket จะ แสดงหน้าเว็บทั้งหมดของคุณล่วงหน้า เพื่อให้ร้านค้าของคุณแสดงหน้าสแตติกที่ต้องใช้ CPU เพียงเล็กน้อยหรือไม่มีเลย

WP Rocket จะ บีบอัดหน้าเว็บของคุณ เป็น 90% ของขนาด

ใช้ปลั๊กอินน้อยกว่าที่โหลดโค้ดภายนอก (คะแนน 4 จาก 5)

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

คุณลักษณะที่ดูเหมือนไม่มีอันตรายใน บางครั้งอาจทำให้ไซต์ของคุณช้าลงอย่างมาก!

ตัวอย่างเช่น การเพิ่มปุ่มแชร์บน Facebook หรือปุ่มพินของ Pinterest อาจทำให้มีการดาวน์โหลดโค้ดจาวาสคริปต์ชิ้นใหม่จากแหล่งภายนอก

สำหรับปุ่มต่างๆ เช่น Twitter, Facebook หรือ Pinterest ฉันมักใช้เวอร์ชัน "ไม่ใช่จาวาสคริปต์" ที่ไม่ต้องใช้โค้ดที่โหลดจากภายนอก

หากคุณต้องการเพิ่มปุ่มแชร์บน Facebook ลงในไซต์ของคุณ คุณควร ใช้เวอร์ชันไฮเปอร์ลิงก์ ดังที่แสดงด้านล่าง

https://www.facebook.com/sharer/sharer.php?m2w&u=https://mywifequitherjob.com/the-best-way-to-find-vendors-for-your-online-store/

ขี้เกียจโหลดรูปภาพและโค้ดจาวาสคริปต์ของคุณ (คะแนน 5 จาก 5 คะแนน) – สำคัญที่สุด!

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

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

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

วิธีขี้เกียจโหลด Javascript และโค้ด CSS ของคุณ

ขี้เกียจโหลดภาพของคุณค่อนข้างตรงไปตรงมา และธีมส่วนใหญ่มีภาพโหลดแบบขี้เกียจในตัวอยู่แล้ว

แต่คุณจะ ขี้เกียจโหลดโค้ดจาวาสคริปต์ บนไซต์ของคุณอย่างปลอดภัยได้อย่างไร

นี่คือความลับที่ฉันทำ

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

ตัวอย่างเช่น หากคุณไปที่ Bumblebee Linens ตอนนี้ คุณจะสังเกตเห็นว่าเว็บไซต์ของฉันโหลดเร็วมาก (บางครั้งภายในไม่กี่วินาที)

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

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

ด้วยเหตุนี้ หน้าของฉันจึงโหลดเร็วมากเพราะ ฉันโหลดเฉพาะองค์ประกอบ HTML/CSS แบบกราฟิก ของไซต์ของฉันเท่านั้น

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

วิธีใช้งาน Javascript Lazy Loading

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

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

ดังนั้น คุณต้องโหลดโค้ดทุกชิ้นที่ มีผลต่อการแสดงผลองค์ประกอบกราฟิก ของไซต์ของคุณ

ต่อไปนี้คือวิธีค้นหาว่าอะไรสำคัญ

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

ตามแผนภูมิด้านบน klaviyo_subscribe.js ใช้ เวลาโหลด 450 ms นอกจากนี้ klaviyo_subscribe.css ยังใช้เวลาอีก 420ms

Klaviyo เป็นเครื่องมือทางการตลาดผ่านอีเมลของฉัน และฉันรู้ดีว่า Klaviyo ไม่มีผลกับการแสดงผลไซต์ของฉันเลย

เป็นผลให้ฉันสามารถ โหลด Klaviyo ได้อย่างง่ายดายโดยไม่ส่งผลกระทบต่อองค์ประกอบภาพของหน้า

อันที่จริง การลบโค้ด Klaviyo จะทำให้ความเร็วเพจของฉันหายไป เกือบหนึ่งวินาที !

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

• การเคลื่อนไหวของเมาส์
• เลื่อนหน้า
• สัมผัสหน้าจอ

นี่เป็นข้อมูลโค้ดเล็กๆ น้อยๆ ที่แสดงให้เห็นการใช้งานจาวาสคริปต์ของฉัน


function activity(){
defer(//Add all of your slow javascript stuff here);
activityEvents.forEach(function(eventName) {
document.removeEventListener(eventName, activity, true);
});
}

//อาร์เรย์ของเหตุการณ์ DOM ที่ควรตีความว่าเป็น
// กิจกรรมของผู้ใช้
var กิจกรรมกิจกรรม = [
'mousedown', 'mousemove', 'keydown', 'scroll', 'เมาส์ดาวน์', 'mousemove', 'keydown', 'scroll'
'เริ่มสัมผัส'
];

window.onload = ฟังก์ชั่น (){
//เพิ่มเหตุการณ์เหล่านี้ในเอกสาร
// ลงทะเบียนฟังก์ชันกิจกรรมเป็นพารามิเตอร์ฟัง
activityEvents.forEach (ฟังก์ชัน (ชื่อเหตุการณ์) {
document.addEventListener(ชื่อเหตุการณ์, กิจกรรม, จริง);
});
}

เมื่อคุณใช้ขั้นตอนเดียวนี้แล้ว คุณควรจะสามารถ บรรลุความเร็ว ในการ โหลดหน้าเว็บที่สั้นกว่า 1 วินาที บนมือถือและเดสก์ท็อปได้!

วิธีแก้ไขปัญหาการเปลี่ยนเค้าโครงสะสมของคุณ

90% ของปัญหา Cumulative Layout Shift ของคุณ เกิดจาก 2 สาเหตุต่อไปนี้

กำลังโหลดองค์ประกอบที่ไม่มีมิติ

พารามิเตอร์ขนาดรูปภาพเป็นสิ่งที่ช่วยให้เว็บเบราว์เซอร์ ทราบขนาดของเนื้อหาขณะโหลด

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

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

วิธีแก้ปัญหาง่ายๆ นี้คือการ ระบุขนาดของทุกองค์ประกอบในเว็บไซต์ของคุณ ดังที่แสดงด้านล่าง

<img width="400" height="300" class="" src="images/Hankie_HLW-009.jpg" border="0" alt="Wedding Handkerchiefs" title=" Wedding Handkerchiefs ">

การเพิ่มเนื้อหาแบบไดนามิกด้วย Javascript

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

ตัวอย่างเช่น หากคุณแสดงโฆษณาบนไซต์ของคุณ ไซต์ของคุณอาจกระโดดขึ้นและลงขณะที่โฆษณาโหลด

วิธีที่ดีที่สุดในการป้องกันไม่ให้สิ่งนี้เกิดขึ้นคือการ จัดสรรพื้นที่บนหน้าของคุณล่วงหน้า เพื่อให้แสดงเนื้อหาที่เพิ่มเข้ามา

การเพิ่มพื้นที่สีขาวที่แสดงผลล่วงหน้าอาจเป็นปัญหาสำหรับปลั๊กอินบางตัว ดังนั้นอย่าลืม ติดต่อผู้สร้างปลั๊กอิน หากนี่เป็นปัญหากับร้านค้าของคุณ

วิธีแก้ไขปัญหา CLS ที่ซับซ้อนมากขึ้น

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

สำหรับไซต์ของฉัน ฉัน ต้องใช้เวลา 3 สัปดาห์ในการแก้ไขปัญหา CLS เนื่องจากการทดสอบ Google Page Speed ​​ไม่ได้สะท้อนถึงคะแนน CLS ที่วัดในภาคสนาม

ตัวอย่างเช่น บล็อกของฉันที่ MyWifeQuitHerJob.com มีคะแนน CLS ที่สมบูรณ์แบบในการทดสอบแล็บความเร็วของหน้า แต่ไม่ผ่านการทดสอบ CLS ในภาคสนาม

หากคุณไม่รู้ว่าฉันกำลังพูดถึงอะไร นี่คือรายละเอียดโดยย่อของการทดสอบความเร็วหน้าเว็บของ Google

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

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

นี่คือสิ่งที่ Google ไม่ได้บอกคุณเกี่ยวกับ CLS

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

เพื่อแก้ปัญหา CLS ของ คุณ คุณต้องจำลองการเชื่อมต่อที่ช้าและทำตัวเหมือนผู้ใช้จริง!

วิธีจำลองผู้ใช้จริงเพื่อแก้ไข CLS

วิธีที่ดีที่สุดในการทำเช่นนี้คือการใช้ ดีบักเกอร์ Chrome ในตัว

ต่อไปนี้คือวิธีการดีบักปัญหา CLS ของคุณ ทีละขั้นตอน

ขั้นตอนที่ 1: เปิด Chrome Debugger

ขั้นตอนที่ 2: ลดความเร็วเครือข่ายของคุณ

บนแท็บ "เครือข่าย" ให้ ลด ความเร็วของหน้า เป็น "3G ช้า" การทำเช่นนี้จะทำให้การโหลดหน้าเว็บช้าลงอย่างมาก คุณจึงสามารถตรวจจับการเปลี่ยนแปลงของเลย์เอาต์ได้อย่างง่ายดาย

ขั้นตอนที่ 3: เรนเดอร์ Layout Shift Regions

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

ขั้นตอนที่ 4: รีเฟรชหน้า

เมื่อคุณตั้งค่าโปรแกรมแก้ไขข้อบกพร่อง Chrome แล้ว ให้ รีเฟรชหน้าและเลื่อนหน้าขึ้นและลงในหน้าเว็บของคุณ เหมือนผู้ใช้จริง

ตรวจสอบให้แน่ใจว่าคุณ มองหาพื้นที่ที่ไฮไลต์เป็นสีน้ำเงิน ซึ่งบ่งบอกถึงการเปลี่ยนเลย์เอาต์

ขั้นตอนที่ 5: วิเคราะห์ไทม์ไลน์ประสิทธิภาพ

หากคุณเห็นการเลื่อนเลย์เอาต์ในไซต์ของคุณขณะโหลด ให้มองใกล้ขึ้นโดย การซูมเข้าในไทม์ไลน์การโหลดหน้าเว็บของคุณ

ในตัวอย่างด้านล่าง เลย์เอาต์กำลังขยับเนื่องจาก ฉันกำลังโหลดฟอนต์อื่น ที่เลื่อนหน้าลงเล็กน้อยเนื่องจากฟอนต์ใหม่มีขนาดใหญ่ขึ้น

ด้วยการทดสอบเหล่านี้ในพื้นที่ต่างๆ ของเพจหลายๆ ครั้ง คุณสามารถ ระบุและแก้ไขปัญหา Cumulative Layout Shift ได้อย่างง่ายดาย

ส่วนที่ยากที่สุดคือ การวินิจฉัยว่าปัญหา CLS ของคุณอยู่ที่ใด เนื่องจากการทดสอบ Google Page Speed ​​จะพิจารณาเฉพาะส่วนครึ่งบนของหน้าเว็บเท่านั้น

คุณสามารถบรรลุ 90 คะแนน Core Web Vital สำหรับร้านค้าอีคอมเมิร์ซ

หากคุณปฏิบัติตามคำแนะนำทั้งหมดข้างต้น คุณจะสามารถ โหลดหน้าเว็บได้เร็วเพียง 1 วินาที และได้รับคะแนน 90+ ใน Core Web Vitals สำหรับทั้งมือถือและเดสก์ท็อป

โดยทั่วไป คุณควร ทำให้เว็บไซต์ของคุณเรียบง่ายที่สุด และหลีกเลี่ยงการใช้ปลั๊กอินในทุกกรณี!

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

เนื่องจากฉันเป็นสุดยอดทางทวารหนัก ฉันจึงตรวจสอบซอร์สโค้ดสำหรับปลั๊กอินทุกตัวที่ฉันติดตั้ง นอกเหนือจากการโทรผ่านเครือข่าย ที่เกิดขึ้น

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

ปัญหาความเร็วหน้าเว็บส่วนใหญ่ไม่ได้เกิดจากธีมของคุณ แต่เกิด จากปลั๊กอินที่คุณติดตั้ง ระวังและมีความสุขในการขาย!