วิธีเพิ่มประสิทธิภาพ Core Web Vitals บน Shopify

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

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

เราจะแจกแจงเมตริกที่สำคัญของเว็บหลักแต่ละรายการตามลำดับ อธิบายว่าปัจจัยใดที่ส่งผลต่อประสิทธิภาพ จากนั้นแสดงวิธีปรับปรุงเมตริก CWV แต่ละรายการในร้านค้า Shopify

คลิกที่หัวข้อด้านล่างเพื่อข้ามไปยังส่วนนั้นโดยตรง:

• วิธีคำนวณ Core Web Vitals บน Shopify
• วิธีปรับปรุง LCP บน Shopify
• วิธีปรับปรุง CLS บน Shopify
• วิธีปรับปรุง FID บน Shopify
• แอป Shopify Core Web Vitals

Core Web Vitals คืออะไร

มาสรุปสั้นๆ ว่า Core Web Vitals คืออะไร

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

คะแนน Core Web Vitals มีผลโดยตรงต่อการจัดอันดับของเครื่องมือค้นหา

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

องค์ประกอบที่ใหญ่ที่สุดในเพจของคุณใช้เวลานานเท่าใดในการแสดงผลบนหน้าจอ

CLS - การเปลี่ยนแปลงเค้าโครงสะสม

เลย์เอาต์ของเพจเปลี่ยนไปมากน้อยเพียงใดเมื่อโหลดเพจ

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

เพจใช้เวลานานเท่าใดในการตอบสนองต่อการโต้ตอบ

วิธีคำนวณ Core Web Vitals บน Shopify

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

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

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

Shopify เคล็ดลับการเพิ่มประสิทธิภาพ Core Web Vital Metric

Core Web Vitals คือการนำเสนอเนื้อหาและทรัพยากรที่สำคัญที่สุดของคุณโดยเร็วที่สุด

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

วิธีปรับปรุง LCP บน Shopify

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

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

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

• ความล่าช้าในการโหลดทรัพยากร เบราว์เซอร์ใช้เวลานานเกินไปในการเริ่มดาวน์โหลดองค์ประกอบ
• ความล่าช้าในการแสดงองค์ประกอบ หลังจากที่เบราว์เซอร์ดาวน์โหลดองค์ประกอบ LCP แล้ว จะใช้เวลานานเกินไปในการแสดงองค์ประกอบบนเพจ

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

วิธีค้นหาองค์ประกอบ LCP ในหน้า Shopify ใดๆ

ในการปรับปรุง LCP คุณต้องรู้ว่าองค์ประกอบใดในหน้าคือ LCP นี่เป็นเรื่องง่ายใน Shopify เพียงไปที่ PageSpeed ​​Insights และวิเคราะห์ URL ที่คุณต้องการค้นหา LCP เมื่อรายงานเสร็จสิ้น ให้เลื่อนลงไปด้านล่างและดูในส่วน 'การวินิจฉัย' จะมีแถวชื่อ 'องค์ประกอบสีเนื้อหาที่ใหญ่ที่สุด' ขยายส่วนนี้เพื่อดูรายละเอียดเกี่ยวกับองค์ประกอบที่เป็น LCP ในหน้านี้

อย่า Lazyload องค์ประกอบ LCP

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

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

กำลังโหลด = "ขี้เกียจ"

โหลดองค์ประกอบ LCP ล่วงหน้า

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

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

ใช้รูปภาพ Nextgen

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

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

ตรวจสอบให้แน่ใจว่าองค์ประกอบ LCP รวมอยู่ในการตอบสนอง HTML เริ่มต้น

ลด 'ความล่าช้าในการโหลดทรัพยากร' โดยตรวจสอบให้แน่ใจว่าองค์ประกอบ LCP ของคุณถูกส่งภายในการตอบสนอง HTML เริ่มต้น ถ้าองค์ประกอบ LCP ถูกโหลดลงในเพจโดยทรัพยากรภายนอก (เช่น สคริปต์ JS) เบราว์เซอร์จะใช้เวลานานกว่าจะเริ่มดาวน์โหลดองค์ประกอบ LCP

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

กำจัด Render-Blocking Resources

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

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

กำจัด Render Blocking JS

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

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

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

กำจัด Render Blocking CSS Stylesheets

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

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

 <link rel="alternate stylesheet" href="slow.css" title="styles" as="style" onload="this.title='';this.rel='stylesheet'">

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

วิธีปรับปรุง CLS บน Shopify

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

เพิ่มแอตทริบิวต์ความกว้างและความสูงให้กับรูปภาพของคุณ

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

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

 height="{{img.height}}" width="{{img.width}}

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

เพิ่มประสิทธิภาพแบบอักษรของคุณ

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

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

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

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

วิธีปรับปรุง FID บน Shopify

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

FID คล้ายกับเมตริกอื่นที่เรียกว่า Total Blocking Time (TBT) TBT วัดเวลาระหว่างเวลาที่เพจเริ่มแสดงผล (First Contentful Paint หรือ FCP) และเวลาที่เพจตอบสนอง (Time to Interactive หรือ TTI)

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

ความแตกต่างระหว่าง FID และ TBT คืออะไร

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

เนื่องจากคุณไม่สามารถวัดค่า FID เมื่อทดสอบหน้าเว็บของคุณเอง คุณควรวัดค่า TBT แทน

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

ลดผลกระทบของรหัสบุคคลที่สาม

เช่นเดียวกับเมตริกหลักของเว็บ Vitals JavaScript ของบุคคลที่สามมักเป็นสาเหตุของปัญหา บุคคลที่สามที่บล็อกเธรดหลักนานกว่า 250 มิลลิวินาทีจะถูกตั้งค่าสถานะในรายงาน Lighthouse เรียกใช้หน้าเว็บของคุณผ่าน Lighthouse เพื่อระบุสคริปต์ของบุคคลที่สามที่ทำให้เกิดปัญหา จากนั้นตัดสินใจว่ารายการใดสามารถตั้งค่าเป็น async หรือ defer

ลดเวลาการดำเนินการของ JavaScript

เวลาที่ใช้ในการดำเนินการ JavaScript ของคุณก็มีความสำคัญเช่นกัน ก่อนอื่น เรียกใช้หน้าเว็บของคุณผ่าน Lighthouse และระบุว่าสคริปต์ใดใช้เวลาในการดำเนินการนานที่สุด Lighthouse จะตั้งค่าสถานะสคริปต์ใดๆ ที่ใช้เวลามากกว่า 2 วินาที

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

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

เช่นเดียวกับการย่อขนาด การบีบอัด js ของคุณจะลดขนาดไฟล์และเร่งความเร็วในการเรียกใช้โค้ดของเว็บเบราว์เซอร์

ลดการทำงานของเธรด

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

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

วิธีวัดประสิทธิภาพของ Core Web Vitals

ตอนนี้คุณเข้าใจวิธีปรับปรุง Core Web Vitals ในร้านค้า Shopify ของคุณแล้ว ต่อไปคุณต้องรู้วิธีวัดความคืบหน้าของ Core Web Vitals

คอนโซลการค้นหา

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

Pagespeed Insights/Lighthouse

ข้อมูลเชิงลึกของ Pagespeed เป็นเครื่องมือฟรีของ Google ที่ให้คุณวัดความเร็วของหน้าเพจใดๆ เรียกใช้ Shopify URL ของคุณผ่านเครื่องมือเพื่อดูรายละเอียดประสิทธิภาพของคุณพร้อมกับการดำเนินการที่แนะนำเพื่อให้ได้คะแนนที่สูงขึ้น

รายงาน CRUX

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

ข้อกำหนด CWV ทั้งหมดหมายความว่าอย่างไร

เมื่อคุณเริ่มดู Core Web Vitals คุณจะพบกับคำศัพท์ที่ซับซ้อนมากมาย นี่คือความหมายทั้งหมด:

แอป Core Web Vitals Shopify

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

หากคุณต้องการใช้แอป เราขอแนะนำให้ทดลองใช้แอปและสังเกตผลที่แอปมีต่อประสิทธิภาพ นี่คือแอพที่แนะนำให้ทดลองใช้:

• https://apps.shopify.com/core-web-vitals-booster
• https://apps.shopify.com/page-speed-optimizer
• https://apps.shopify.com/swift

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