เลือกซื้อความเร็วบน eBay.com

การเพิ่มประสิทธิภาพการทำงานของเว็บไซต์และแอปของ eBay เพื่อประสบการณ์ของผู้ใช้ที่เร็วขึ้น

ความเร็วเป็นโครงการริเริ่มทั่วทั้งบริษัทของ eBay ในปี 2019 โดยหลายๆ ทีมตั้งใจที่จะทําให้เว็บไซต์และแอปของคุณโหลดได้อย่างรวดเร็วที่สุดสําหรับผู้ใช้ เราพบว่าการอัปเดตเวลาในการโหลดหน้าค้นหาทุกๆ 100 มิลลิวินาทีทำให้ eBay มีจำนวน "เพิ่มลงในรถเข็น" เพิ่มขึ้น 0.5%

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

...และข้อมูลรายงานประสบการณ์ของผู้ใช้ Chrome ก็ไฮไลต์การปรับปรุงเหล่านี้เช่นกัน

ซึ่งก็ยังมีงานที่ต้องทำอีกมากมายในอนาคต แต่สิ่งที่เราได้เรียนรู้จาก eBay จนถึงตอนนี้

"การตัด" ประสิทธิภาพเว็บ

eBay ที่ปรับปรุงใหม่นี้เป็นไปได้เนื่องจากมีการลดหรือ "ตัด" (ขนาดและเวลา) ของเอนทิตีต่างๆ ที่เข้าร่วมเส้นทางของผู้ใช้ โพสต์นี้ครอบคลุมหัวข้อที่เกี่ยวข้องกับชุมชนนักพัฒนาเว็บในวงกว้าง ไม่ใช่หัวข้อเฉพาะของ eBay โดยเฉพาะ

ลดเพย์โหลดในทรัพยากรข้อความทั้งหมด

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

คำสั่ง "cut" ตรงนี้คือไบต์ที่เสียเปล่าในเพย์โหลดการตอบกลับ

การเพิ่มประสิทธิภาพเส้นทางที่สำคัญสำหรับเนื้อหาครึ่งหน้าบน

แต่ละพิกเซลบนหน้าจอไม่ได้มีความสำคัญเท่ากันทั้งหมด เนื้อหาครึ่งหน้าบนสำคัญกว่าที่อยู่ครึ่งหน้าล่าง iOS/Android/เดสก์ท็อป และเว็บแอปรู้จักเรื่องนี้ แล้วในกรณีของบริการต่างๆ ล่ะ สถาปัตยกรรมบริการของ eBay มีเลเยอร์ที่เรียกว่า Experience Services ซึ่งฟรอนท์เอนด์ (แอปและเว็บเซิร์ฟเวอร์เฉพาะแพลตฟอร์ม) พูดคุยด้วย เลเยอร์นี้ออกแบบมาให้อิงตามการดูหรืออุปกรณ์โดยเฉพาะ แทนที่จะเป็นเอนทิตี เช่น สินค้า ผู้ใช้ หรือคำสั่งซื้อ จากนั้น eBay ก็ได้เปิดตัวแนวคิดของเส้นทางสำคัญสำหรับบริการประสบการณ์ เมื่อมีคำขอสำหรับบริการเหล่านี้ ผู้ให้บริการดังกล่าวจะรับข้อมูลสำหรับเนื้อหาครึ่งหน้าบนทันที โดยการเรียกใช้บริการอัปสตรีมอื่นๆ ควบคู่กันไป เมื่อข้อมูลพร้อมแล้ว ก็จะถูกล้างออกทันที ข้อมูลครึ่งหน้าล่างจะส่งเป็นกลุ่มในภายหลังหรือโหลดแบบ Lazy Loading ผลลัพธ์คือ ผู้ใช้เห็นเนื้อหาครึ่งหน้าบนได้เร็วขึ้น

"ตัด" ตรงนี้คือเวลาที่บริการต่างๆ ใช้ในการแสดงเนื้อหาที่เกี่ยวข้อง

การเพิ่มประสิทธิภาพให้รูปภาพ

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

ประการแรก eBay สร้างมาตรฐานให้ใช้รูปแบบรูปภาพ WebP สําหรับผลการค้นหาในทุกแพลตฟอร์ม ซึ่งรวมถึง iOS, Android และเบราว์เซอร์ที่รองรับ หน้าผลการค้นหาเป็นหน้าเว็บที่มีรูปภาพมากที่สุดใน eBay และผู้ใช้ใช้ WebP อยู่แล้ว แต่ไม่ได้ใช้รูปแบบที่สอดคล้องกัน

ประการที่ 2 แม้ว่ารูปภาพข้อมูลผลิตภัณฑ์ใน eBay จะได้รับการเพิ่มประสิทธิภาพอย่างมาก (ทั้งด้านขนาดและรูปแบบ) แต่หลักเกณฑ์เดียวกันจะไม่มีผลกับรูปภาพที่มีการดูแลจัดการ (เช่น โมดูลด้านบนในหน้าแรก) eBay มีรูปภาพที่ดูแลจัดการด้วยมือจำนวนมาก โดยอัปโหลดผ่านเครื่องมือที่หลากหลาย ก่อนหน้านี้ การเพิ่มประสิทธิภาพจะขึ้นอยู่กับผู้อัปโหลด แต่ตอนนี้ eBay บังคับใช้กฎในเครื่องมือเพื่อให้รูปภาพทั้งหมดที่อัปโหลดได้รับการเพิ่มประสิทธิภาพอย่างเหมาะสม

"การตัด" ตรงนี้คือไบต์ของรูปภาพขยะที่ส่งไปให้ผู้ใช้

การดึงข้อมูลล่วงหน้าของชิ้นงานแบบคงที่

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

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

"ตัด" ตรงนี้คือเวลาของเครือข่ายสำหรับเนื้อหาแบบคงที่ของ CSS และ JavaScript ในการนำทางครั้งแรก

การดึงข้อมูลผลการค้นหายอดนิยมล่วงหน้า

เมื่อผู้ใช้ค้นหา eBay ข้อมูล Analytics ของ eBay แสดงให้เห็นว่ามีแนวโน้มสูงที่ผู้ใช้จะไปยังรายการใน 10 ผลการค้นหาแรก ตอนนี้ eBay จะดึงข้อมูลรายการล่วงหน้า จากการค้นหาและเก็บไว้เมื่อผู้ใช้นำทาง การดึงข้อมูลล่วงหน้ามี 2 ระดับ

ระดับแรกจะเกิดขึ้นฝั่งเซิร์ฟเวอร์ ซึ่งบริการรายการจะแคชรายการ 10 อันดับแรกในผลการค้นหา เมื่อผู้ใช้ไปยังหนึ่งในรายการเหล่านั้น eBay ช่วยประหยัดเวลาในการประมวลผลของเซิร์ฟเวอร์แล้ว การแคชฝั่งเซิร์ฟเวอร์ใช้ประโยชน์จากแอปเฉพาะแพลตฟอร์มและเปิดตัวแล้วทั่วโลก

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

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

ตั้งใจดาวน์โหลดรูปภาพที่ใช้ค้นหา

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

"การตัด" ในที่นี้คือเวลาเริ่มต้นการดาวน์โหลดรูปภาพในผลการค้นหา

การแคช Edge สำหรับข้อมูลคำแนะนำอัตโนมัติ

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

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

"ตัด" ตรงนี้คือเวลาในการตอบสนองของเครือข่ายและเวลาประมวลผลของเซิร์ฟเวอร์สำหรับการแนะนำอัตโนมัติ

การแคช Edge สำหรับผู้ใช้หน้าแรกที่ไม่รู้จัก

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

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

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

การเพิ่มประสิทธิภาพสำหรับแพลตฟอร์มอื่นๆ

การปรับปรุงการแยกวิเคราะห์แอป iOS/Android

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

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

การปรับปรุงเวลาเริ่มต้นของแอป Android

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

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

บทสรุป

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

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

อ่านความเร็วจากการตัดพันครั้งเพื่อดูข้อมูลเพิ่มเติมและคอยติดตามบทความที่มีรายละเอียดเพิ่มเติมโดยวิศวกรของ eBay เกี่ยวกับผลงานด้านประสิทธิภาพในอนาคตอันใกล้นี้