อีคอมเมิร์ซ: การรับรู้ความเร็วของเว็บไซต์ทำให้เกิดความแตกต่าง

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

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

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

มีเครื่องมือมากมายที่จะช่วยคุณปรับปรุงความเร็วของหน้าเว็บ เช่น Yslow หรือ Google Pagespeed Insights และมีแนวทางปฏิบัติที่ดีที่สุดมากมาย เช่น การลดขนาดและการรวม css และ js การใช้ css sprite และการลดคำขอเครือข่ายที่ นักพัฒนาส่วนหน้าควรปฏิบัติตามเพื่อให้แน่ใจว่าความเร็วของหน้าถูกขยายให้ใหญ่สุด

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

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

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

ปฏิเสธไม่ได้ว่าความเร็วของหน้าข้อมูลดิบมีความสำคัญมาก และนักพัฒนาทุกคนควรปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดตามมาตรฐานเป็นอย่างน้อย

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

บทความนี้จะเน้นที่การรับรู้ความเร็วของหน้า
ข้อใดสำคัญกว่า: หน้าเว็บโหลดได้เร็วเพียงใดหรือผู้ใช้รับรู้ได้ว่าโหลดเร็วเพียงใด

แน่นอนว่าการรับรู้คือสิ่งที่มีค่าที่สุดสำหรับผู้ใช้

ความเร็วเว็บไซต์: ความประทับใจแรกพบ

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

สิ่งสำคัญในที่นี้คือการจัดลำดับความสำคัญในการโหลดเนื้อหาที่สำคัญก่อนเนื้อหาอื่นๆ ให้ผู้ใช้เห็นสิ่งสำคัญโดยเร็วที่สุด

ขณะที่กำลังประมวลผลข้อมูลสำคัญนี้ คุณสามารถเริ่มโหลดเนื้อหาระดับถัดไปได้

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

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

การทดสอบนี้รันบนเครื่องจำลอง iPhone 6 บนการเชื่อมต่อ 3G ที่ดีและปิดใช้งานการแคช หลังจากที่โหลดหน้านี้ในครั้งแรก ฉันก็เริ่มฮาร์ดรีเฟรช

ในเวลาเพียง 600ms ฉันมีบางอย่างที่เริ่มโหลดด้วยชื่อของฉันในส่วนหัว นอกจากนี้ คุณจะสังเกตเห็นว่ามีการโทรในเครือข่ายเพียง 6 ครั้งและโหลดเนื้อหา 5 รายการ (ไฟล์ 3 css และ 2 ภาพ)

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

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

ในเวลาไม่ถึง 2 วินาที ตอนนี้ฉันมีเนื้อหาสำคัญส่วนใหม่แล้ว

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

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

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

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

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

ไม่นานเกือบ 22 วินาทีที่ฉันรู้สึกว่าเว็บไซต์โหลดเต็มแล้ว หน้าเว็บนี้ใช้เวลาโหลดทั้งหมด 28.4 วินาที นี่แสดงให้เห็นว่าฉันเข้าใจแล้วว่าหน้านั้นถูกโหลดโดยสมบูรณ์เมื่อโหลดจริง ๆ แล้ว 77%

จะเห็นความแตกต่างที่ชัดเจนระหว่าง 2 ประสบการณ์ได้ง่าย แม้ว่าโฮมเพจมือถือของ Amazon จะโหลดได้เร็วกว่าโฮมเพจของ Charles Tyrwitt อย่างเห็นได้ชัด แต่ก็มีความพยายามเพื่อให้แน่ใจว่าผู้ใช้จะรับรู้ได้ว่ามันเร็วยิ่งขึ้นไปอีก ผู้ใช้เริ่มเห็นบางสิ่งที่โหลดภายใน 12.5% ​​ของเวลาในการโหลดหน้าเว็บทั้งหมด ในขณะที่ผู้ใช้เว็บไซต์ Charles Tyrwhitt จะเห็นเฉพาะบางอย่างที่เกิดขึ้นภายใน 26% ของเวลาในการโหลดหน้าเว็บทั้งหมด หน้าแรกของ Amazon ได้ส่งคำขอเครือข่าย 6 รายการก่อนที่ผู้ใช้จะเห็นความคืบหน้าในขณะที่หน้าแรกของ Charles Tyrwitt ได้ส่งคำขอ 90 รายการ

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

ปรับปรุงความเร็วเว็บไซต์โดยจัดลำดับความสำคัญของ CSS

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

วิธีแก้ไขคือแบ่งไฟล์ css ของคุณและโหลดตามลำดับที่มีเนื้อหาสำคัญ หากเราดูตัวอย่างของ Amazon พวกเขาโหลดไฟล์ css ที่มีขนาดเพียง 6.5k เป็นหนึ่งใน 6 คำขอเริ่มต้นของพวกเขา ไฟล์นี้มี css ที่จำเป็นสำหรับการจัดรูปแบบเนื้อหาที่สำคัญในโฮมเพจ อันที่จริง ขนาดรวมของไฟล์ css ทั้งหมดที่ร้องขอก่อนที่ผู้ใช้จะเห็นเนื้อหาบนโฮมเพจมือถือของ Amazon นั้นต่ำกว่า 40k ในขณะที่มันมากกว่า 500k บนโฮมเพจของ Charles Tyrwhitt

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

ทำเช่นเดียวกันกับ JavaScript

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

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

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