การปรับปรุงประสิทธิภาพร้านค้าออนไลน์ของคุณ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

แอป

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

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

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

ธีม

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

แบบอักษร

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

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

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

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

  • Mono: Menlo, Consolas, Monaco, Liberation Mono หรือ Lucida Console
  • San-serif: 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

ข้อมูลเชิงลึกของ PageSpeed

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

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

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

รับความช่วยเหลือเกี่ยวกับประสิทธิภาพของร้านค้าออนไลน์

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

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

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

พร้อมเริ่มต้นการขายด้วย Shopify แล้วหรือยัง

ทดลองใช้งานฟรี