ประสิทธิภาพและประสบการณ์มือถือของ Shopify
ร้านค้าที่รวดเร็วไม่เพียงแต่ชาร์จเร็วขึ้นเท่านั้น แต่ยังตอบสนองต่อความตั้งใจของลูกค้าได้รวดเร็วยิ่งขึ้นอีกด้วย
เป้าหมายไม่ได้เพื่อให้บรรลุคะแนนที่สมบูรณ์แบบแยก, แต่เพื่อปรับปรุงการโหลด, การตอบสนองและความมั่นคงของหน้าที่ใช้จริง เริ่มต้นด้วยการวัด, ระบุบุคคลที่รับผิดชอบ, แล้วแก้ไขตามผลกระทบทางธุรกิจ
อย่าสับสน Shopify กับสิ่งที่เพิ่มลงใน Shopify
แพลตฟอร์มนี้ให้บริการโฮสติ้ง CDN และการเพิ่มประสิทธิภาพหลายอย่าง การชะลอตัวมักมาจากธีม แอพ สคริปต์การตลาด สื่อ และการปรับแต่ง
คะแนนเดียวไม่ได้บอกเล่าเรื่องราวทั้งหมด
เปรียบเทียบข้อมูลผู้ใช้จริง หลายประเภทหน้า และการทดสอบในห้องปฏิบัติการ หน้าแรกที่รวดเร็วไม่ได้ชดเชยแผ่นผลิตภัณฑ์ช้า
สามมิติที่ต้องระวัง
มาตรการเมื่อมีเนื้อหาหลักที่มองเห็นได้ ซึ่งมักจะเป็นรูปภาพหรือชื่อเรื่องขนาดใหญ่
สังเกตความเร็วของการตอบสนองหลังจากการโต้ตอบ: เมนู ตัวแปร ตัวกรอง ตะกร้า หรือปุ่ม
วัดความเคลื่อนไหวของเนื้อหาที่ไม่คาดคิดระหว่างการโหลด
Shopify รวมตัวชี้วัดเหล่านี้ไว้ในรายงานประสิทธิภาพเว็บจากข้อมูลจริงเมื่อมีปริมาณเพียงพอ
วิธีการวินิจฉัย 6 ขั้นตอน
เลือกหน้าที่สําคัญ
ทดสอบการต้อนรับ คอลเลกชันหลัก เอกสารผลิตภัณฑ์ตัวแทน ตะกร้า และหน้าบรรณาธิการเป็นอย่างน้อย
เริ่มต้นด้วยมือถือ
การเชื่อมต่อ โปรเซสเซอร์ และขนาดหน้าจอทําให้มองเห็นปัญหาได้มากขึ้น ใช้โทรศัพท์จริงเพื่อเสริมเครื่องมือ
อ่านรายงานของ Shopify
สังเกต Core Web Vitals ประเภทเพจที่ได้รับผลกระทบ และเหตุการณ์ที่เกี่ยวข้องกับการติดตั้งหรือการเปลี่ยนแปลง
เปรียบเทียบกับข้อมูลเชิงลึกของ PageSpeed
การทดสอบในห้องปฏิบัติการช่วยให้มองเห็นทรัพยากรการบล็อก รูปภาพจํานวนมาก สคริปต์ และการทํางานของเบราว์เซอร์ที่มากเกินไป
แยกสาเหตุ
ทดสอบสําเนาของธีม ปิดใช้งานบล็อกแอปพลิเคชันหรือสคริปต์ชั่วคราว จากนั้นเปรียบเทียบก่อนและหลัง
วัดหลังตีพิมพ์
ข้อมูลจริงต้องใช้เวลาในการสะท้อนการเปลี่ยนแปลง จัดทําเอกสารวันที่ และยังตรวจสอบการแปลง
การเพิ่มประสิทธิภาพที่คุ้มค่าที่สุด
แอปพลิเคชันการตรวจสอบ
ลบฟังก์ชันที่ไม่มีค่าเพียงพอ และตรวจสอบสคริปต์ที่ยังคงอยู่หลังจากการถอนการติดตั้ง
ทําให้ภาพหลักเบาลง
ให้บริการในขนาดที่เหมาะสม รักษาคุณภาพที่เป็นประโยชน์ และหลีกเลี่ยงการหน่วงเวลาภาพที่ประกอบเป็นเนื้อหาหลัก
ใช้ภาพที่ตอบสนอง
เบราว์เซอร์ควรดาวน์โหลดเวอร์ชันที่เหมาะกับหน้าจอ แทนที่จะเป็นไฟล์เดสก์ท็อปขนาดยักษ์บนมือถือ
ลดจาวาสคริปต์
ชอบ HTML และ CSS เมื่อเป็นไปได้ โหลดฟังก์ชันเฉพาะหน้าที่ต้องการเท่านั้น
เลื่อนสคริปต์ที่ไม่จําเป็นออกไป
ไม่ใช่ทุกแชท, ความคิดเห็น, แผนที่, วิดีโอและเครื่องมือทางการตลาดควรบล็อกการแสดงผลครั้งแรก
มาสเตอร์ แบบอักษร
จํากัดตระกูลและไขมัน โหลดเฉพาะไฟล์ที่จําเป็นล่วงหน้า หรือพิจารณาแบบอักษรของระบบ
ขนาดสํารอง
ตั้งค่าความกว้างและความสูงของรูปภาพ วิดีโอ และวิดเจ็ตเพื่อหลีกเลี่ยงการข้ามเนื้อหา
พายคอลเลกชันขนาดใหญ่
อย่าโหลดผลิตภัณฑ์หลายร้อยรายการพร้อมกันเมื่อการแบ่งหน้าหรือการโหลดแบบควบคุมเพียงพอแล้ว
ทําความสะอาดการติดตามการตลาด
ลบแท็กที่ไม่ได้ใช้และตรวจสอบค่าของแต่ละเครื่องมือที่โหลดผ่านทางตัวจัดการแท็ก
จัดลําดับความสําคัญตามผลกระทบ
| การกระทํา | ลําดับความสําคัญตามปกติ | ทําไม |
|---|---|---|
| ลบแอปพลิเคชันที่หนักหน่วงและไม่ช่วยเหลือ | สูง | สามารถลดการทํางานของ JavaScript, Queries และ Browser ในหลายหน้าได้ |
| เพิ่มประสิทธิภาพฮีโร่มือถือ | สูง | องค์ประกอบที่มองเห็นได้ที่ใหญ่ที่สุดมักส่งผลต่อการรับน้ําหนักที่รับรู้ |
| ชะลอวิดีโอใต้ตลิ่ง | สูง | หลีกเลี่ยงการโหลดสื่อที่มองไม่เห็นทันที |
| จํากัด แบบอักษรและไขมัน | เฉลี่ย | ลดการดาวน์โหลดและเพิ่มความเร็วในการแสดงข้อความ |
| ทําความสะอาดรหัสของเหลวซ้ํา | เฉลี่ย | สามารถปรับปรุงเวลาการแสดงผลในโมเดลที่ซับซ้อน |
| รับไม่กี่กิโลไบต์บนไอคอนขนาดเล็ก | อ่อนแอ | ผลกระทบที่จํากัดหากสคริปต์และสื่อหลักยังคงหนักอยู่ |
รูปภาพ: การตั้งค่าที่สําคัญจริงๆ
ที่จะทํา
- ใช้ฟิลเตอร์รูปภาพ Shopify ที่มีความกว้างหลายระดับ
- ใส่มิติเพื่อสํารองพื้นที่
- ขี้เกียจโหลดสื่อภายใต้หน้าจอ
- โฮสต์ทรัพยากรบน Shopify CDN
- ทดสอบการครอบตัดมือถือ
เพื่อหลีกเลี่ยง
- ส่งภาพ 3000 px เดียวกันไปยังทุกหน้าจอ
- ใส่โหลดล่าช้าบนภาพหลักโดยไม่มีเหตุผล
- ใช้แถบเลื่อนหนักหลายอัน
- โหลดวิดีโออัตโนมัติในความละเอียดสูง
- คูณภาพที่มองไม่เห็นในม้าหมุน
แอปพลิเคชันและสคริปต์ของบุคคลที่สาม: ตัดสินใจตามมูลค่า
ระบุฟังก์ชัน
จริงๆ แล้วมันผลิตอะไร: การขาย ความไว้วางใจ การสนับสนุน ข้อมูล หรือการตกแต่งที่เรียบง่าย?
วัดช่วง
สคริปต์โหลดในทุกหน้าเมื่อมีประโยชน์เฉพาะกับผลิตภัณฑ์หรือรถเข็นหรือไม่?
ค้นหาฟังก์ชันเนทิฟ
ธีมหรือ Shopify อาจเสนอโซลูชันที่เบากว่าอยู่แล้ว
ทดสอบก่อน/หลัง
เปรียบเทียบสําเนาของธีมที่มีและไม่มีบล็อก จากนั้นตรวจสอบว่าข้อมูลและยอดขายยังคงถูกต้อง
ลบออกอย่างหมดจด
หลังจากถอนการติดตั้งแล้ว ให้ตรวจสอบตัวอย่างโค้ด แท็ก และไฟล์ที่อาจยังคงทํางานอยู่
เอกสาร
เก็บเจ้าของ วัตถุประสงค์ และวันที่แก้ไขของสคริปต์ภายนอกแต่ละรายการ
การเพิ่มประสิทธิภาพทางเทคนิคของธีม
จาวาสคริปต์แบบก้าวหน้า
คุณสมบัติที่จําเป็นเช่นการค้นพบและการซื้อผลิตภัณฑ์ควรจะยังคงแข็งแกร่ง ใช้จาวาสคริปต์เพื่อปรับปรุงไม่ใช่เพื่อให้ทั้งหน้าขึ้นอยู่กับ
สคริปต์ที่ไม่ปิดกั้น
คุณลักษณะที่ปรับเปลี่ยนและการโหลดแบบมีเงื่อนไขจะป้องกันไม่ให้ไฟล์ทําให้การสร้างหน้าแรกล่าช้า
ของเหลวที่มีประสิทธิภาพ
หลีกเลี่ยงการคํานวณที่ซับซ้อนซ้ําๆ ในลูป และวิเคราะห์ส่วนที่ช้าด้วยเครื่องมือ Shopify
Css ที่กําหนดเป้าหมาย
ลดการขึ้นต่อกันโดยรวมและหลีกเลี่ยงการโหลดรูปแบบส่วนประกอบที่ขาดหายไปจากหน้า
ทรัพยากรที่สําคัญ
พรีโหลดเฉพาะทรัพยากรที่จําเป็นบนหน้าจอแรก พรีโหลดมากเกินไปทําให้เกิดการแข่งขันใหม่
เครื่องมือควบคุม
การตรวจสอบธีมสามารถมองเห็นบันเดิลขนาดใหญ่ ทรัพยากรระยะไกล การบล็อก JavaScript และการขึ้นต่อกัน CSS บางอย่าง
สิ่งที่ไม่ควรทํา
ติดตามคะแนน 100 ทุกกรณี
อย่าลบคุณลักษณะที่ทํากําไรได้สําหรับจุดสองสามจุด เปรียบเทียบต้นทุนทางเทคนิคและมูลค่าทางการค้า
เพิ่มประสิทธิภาพการรับสัญญาณเท่านั้น
ผู้เยี่ยมชมมักจะมาถึงโดยตรงบนแผ่นผลิตภัณฑ์ คอลเลกชัน หรือสินค้า
ติดตั้งแอปความเร็วโดยไม่ต้องวินิจฉัย
เลเยอร์เพิ่มเติมไม่ได้แก้ไขสาเหตุเสมอไปและอาจเพิ่ม JavaScript
ขี้เกียจโหลดเนื้อหาทั้งหมด
ภาพสําคัญแรกควรปรากฏอย่างรวดเร็ว การโหลดขี้เกียจมีประโยชน์อย่างยิ่งภายใต้บริเวณที่มองเห็นได้
ลบการติดตามที่จําเป็น
เก็บรักษาเครื่องมือที่จําเป็นสําหรับการสั่งซื้อ การมอบหมาย และการปฏิบัติตามข้อกําหนด จากนั้นเพิ่มประสิทธิภาพการโหลด
แก้ไขธีมที่ใช้งานอยู่โดยไม่ต้องคัดลอก
ทํางานซ้ํา ทดสอบหลักสูตร และเก็บเวอร์ชันที่กู้คืนได้
แผนปฏิบัติการ 7 วัน
คําถามที่พบบ่อย
คุณควรตั้งเป้าหมายคะแนน PageSpeed ใด?
ไม่มีคะแนนเดียวที่รับประกันประสบการณ์ที่ดี เหนือสิ่งอื่นใดมองหาการปรับปรุงเมตริกหน้าสําคัญและข้อมูลจริงโดยไม่ต้องลบฟังก์ชันที่มีประโยชน์
Shopify ช้าตามธรรมชาติหรือไม่?
Shopify มีโครงสร้างพื้นฐานที่ปรับให้เหมาะสมและ CDN ประสิทธิภาพขั้นสุดท้ายขึ้นอยู่กับธีม สื่อ แอปพลิเคชัน และสคริปต์ที่เพิ่มเข้ามาเป็นอย่างมาก
แอพทั้งหมดทําให้ร้านค้าช้าลงหรือไม่?
ไม่ ผลกระทบของพวกเขาแตกต่างกันไปขึ้นอยู่กับรหัสของพวกเขาโหลดหน้าและฟังก์ชั่น ประเมินแต่ละคนเป็นรายบุคคล
ฉันต้องบีบอัดภาพทั้งหมดด้วยตนเองหรือไม่?
Shopify ทําการแปลงและให้บริการรูปภาพผ่าน CDN แต่คุณควรขอขนาดที่เหมาะสมเสมอและหลีกเลี่ยงไฟล์ต้นฉบับขนาดใหญ่โดยไม่จําเป็น
นานแค่ไหนกว่าคุณจะเห็นการปรับปรุง?
การทดสอบในห้องปฏิบัติการจะตอบสนองทันที ในขณะที่รายงานที่อิงตามผู้ใช้จริงจําเป็นต้องมีการเข้าชมเพิ่มเติมและอาจแสดงความล่าช้า
การเพิ่มประสิทธิภาพที่ดีจะลบเบรกโดยไม่ต้องลบค่า
ทําให้ร้านค้า Shopify ของคุณเร็วขึ้น เสถียรยิ่งขึ้น และสนุกสนานยิ่งขึ้นบนมือถือ
ตรวจสอบธีม แอป สคริปต์ และสื่อของคุณก่อนทําการเปลี่ยนแปลงใดๆ
