ปรับปรุงอีคอมเมิร์ซบนมือถือ: ทำให้เว็บไซต์ของคุณเร็วขึ้น

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

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

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

การปรับปรุงอัตราการแปลงโดย 0.1% จะให้ผลตอบแทนจากการลงทุนมากขึ้นสำหรับผู้ค้าปลีกรายใหญ่มากกว่าสำหรับผู้ค้าปลีกรายย่อย

ปรับรูปภาพให้เหมาะสมเพื่อประสบการณ์อีคอมเมิร์ซบนมือถือระดับชั้นนำ

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

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

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

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

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

ที่ Envoy เราเพิ่งทดลองใช้โปรแกรมจัดการรูปภาพ Akamai บนเว็บไซต์ของลูกค้า และพบว่าขนาดไฟล์ของรูปภาพ PLP ลดลงโดยเฉลี่ย 80% โดยไม่มีการเสื่อมราคาอย่างเห็นได้ชัดในคุณภาพของภาพ ส่งผลให้น้ำหนักโดยรวมของหน้า PLP (หน้ารายการผลิตภัณฑ์) ลดลงอย่างมาก และคะแนน Google Pagespeed ของพวกเขาเพิ่มขึ้นอย่างรวดเร็ว หากคุณไม่ต้องการใช้บริการของบุคคลที่สามสำหรับสิ่งนี้ คุณสามารถใช้เครื่องมือโอเพนซอร์ส เช่น Thumbor ซึ่งเป็นบริการที่คุณติดตั้งในเครื่องบนเว็บเซิร์ฟเวอร์ของคุณ เครื่องมือเช่นนี้จะปรับรูปภาพของคุณให้เหมาะสมโดยอัตโนมัติในทันที จากนั้นแคชในที่เก็บ

ใช้ CDN

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

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

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

ใช้เครื่องมือวิเคราะห์ความเร็วเพื่อเพิ่มประสิทธิภาพประสบการณ์อีคอมเมิร์ซบนมือถือ

มีเครื่องมือออนไลน์ทั้งแบบฟรีและมีค่าใช้จ่ายจำนวนมากที่สามารถวิเคราะห์หน้าเว็บและให้คำแนะนำเกี่ยวกับวิธีทำให้เว็บไซต์ของคุณทำงานได้เร็วขึ้น เครื่องมือฟรีสามอย่างที่ใช้กันมากที่สุดน่าจะเป็น Google PageSpeed ​​Insights, Yslow และ Webpagetest เครื่องมือเหล่านี้แต่ละอย่างแตกต่างกันเล็กน้อย แต่ทั้งหมดจะวิเคราะห์ URL ของคุณและส่งรายงานที่มีคำแนะนำพร้อมกับคะแนน

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

ลดการใช้สคริปต์บุคคลที่สามให้น้อยที่สุด

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

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

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

Google AMP

โปรเจ็กต์ Google Accelerated Mobile Pages เป็นเทคโนโลยีการเผยแพร่เว็บแบบโอเพนซอร์สที่มุ่งปรับปรุงความเร็วและประสิทธิภาพของเนื้อหา โดยส่งไปยังอุปกรณ์มือถือโดยเฉพาะ นำโดย Google และเริ่มดำเนินการในปี 2558 เทคโนโลยี AMP ได้รับการออกแบบมาเพื่อส่งเนื้อหาข่าว หน้า AMP นั้นมีน้ำหนักเบามากและมักจะใช้ข้อมูลน้อยกว่าคู่หน้าที่ไม่ใช่ AMP ที่เทียบเท่ากันประมาณ 10 เท่า และมักจะโหลดได้ในเวลาน้อยกว่า 1 วินาที มีการจับขนาดใหญ่แม้ว่า หน้า AMP รองรับชุดฟังก์ชันที่จำกัด ดังนั้นจึงไม่เหมาะสำหรับแอปพลิเคชันจำนวนมาก โดยเฉพาะอย่างยิ่งเว็บไซต์อีคอมเมิร์ซที่สมบูรณ์และใช้งานได้จริง

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

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

ปรับตัวเข้าหากัน

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

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

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

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

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

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