การพัฒนาความเร็วร้านค้าออนไลน์ของคุณ

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

หากคุณไม่ทราบว่าร้านค้าออนไลน์ของคุณใช้งานได้รวดเร็วเพียงใด ตอนนี้คุณสามารถดูรายงานความเร็วร้านค้าออนไลน์ของคุณได้แล้ว

ปัจจัยที่คุณควบคุมไม่ได้

อุปกรณ์ เครือข่าย และตำแหน่งที่ตั้งของลูกค้าของคุณ

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

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

โครงสร้างพื้นฐานของ Shopify

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

Shopify จะทำการปรับปรุงรหัสและโครงสร้างพื้นฐานอย่างต่อเนื่อง การปรับปรุงเหล่านี้บางส่วนอาจมีผลต่อคะแนนความเร็วของคุณ

ด้านล่างนี้คือฟีเจอร์บางประการที่มีผลต่อความเร็วของร้านค้าออนไลน์ของคุณ

เครือข่ายการจัดส่งเนื้อหา (CDN)

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

แคชเบราว์เซอร์ท้องถิ่น

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

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

แคชในหน้าฝั่งเซิร์ฟเวอร์

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

องก์ประกอบภายในcontent_for_headerอ็อบเจกต์ Liquid

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

ปัจจัยที่คุณสามารถควบคุมได้

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

แอป

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

หากคุณคิดว่าแอปทำให้ร้านค้าของคุณช้าลง ให้ทำตามขั้นตอนต่อไปนี้:

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

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

• ปรึกษาผู้พัฒนาแอปของคุณ
• จ้างผู้เชี่ยวชาญของ Shopify เพื่อขอรับความช่วยเหลือเพิ่มเติม ดูข้อมูลเพิ่มเติมเกี่ยวกับการจ้างผู้เชี่ยวชาญของ Shopify

ธีม

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

หากคุณคิดว่ามีบางอย่างในธีมทำให้ร้านค้าของคุณช้าลง ให้ทำตามขั้นตอนต่อไปนี้:

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

ธีมหรือฟีเจอร์แอป

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

หากคุณคิดว่าฟีเจอร์ส่งผลให้ร้านค้าทำงานได้ช้าลง คุณก็สามารถปฏิบัติตามขั้นตอนดังต่อไปนี้ได้:

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

รหัส Liquid ที่ซับซ้อนหรือไม่จำเป็น

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

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

หากคุณกังวลว่ารหัสของคุณไม่ได้รับการปรับให้เหมาะสม คุณสามารถดำเนินการตามขั้นตอนต่อไปนี้ได้:

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

รูปภาพและวิดีโอ

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

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

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

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

หากคุณคิดว่าภาพส่งผลให้ร้านค้าทำงานได้ช้าลง ก็ให้ปฏิบัติตามขั้นตอนดังต่อไปนี้:

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

แบบอักษร

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

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

คุณสามารถเลือกได้ว่าจะใช้ตระกูลแบบอักษรแบบ mono, serif หรือ san-serif โดยที่ยังใช้รูปแบบตัวอักษรอย่างตัวหนาหรือตัวเอียงได้ขณะที่ใช้ตระกูลแบบอักษรเหล่านี้

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

• Mono: Menlo, Consolas, Monaco, Liberation Mono หรือ Lucida Console
• 衬线: BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu หรือ Helvetica Neue
• Serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times หรือ Source Serif Pro

เครื่องมือการแก้ไขปัญหา

คุณสามารถใช้เครื่องมือต่อไปนี้เพื่อตรวจสอบความเร็วของร้านค้าออนไลน์ของคุณ

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

Lighthouse

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

ตัวตรวจสอบธีมของ Shopify สำหรับ Chrome

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

รับความช่วยเหลือเกี่ยวกับความเร็วของร้านค้าออนไลน์

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

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

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