การเพิ่มประสิทธิภาพการทำงานของเว็บไซต์และแอปของ eBay เพื่อประสบการณ์ของผู้ใช้ที่เร็วขึ้น
ความเร็วเป็นโครงการริเริ่มทั่วทั้งบริษัทของ eBay ในปี 2019 โดยหลายๆ ทีมตั้งใจที่จะทําให้เว็บไซต์และแอปของคุณโหลดได้อย่างรวดเร็วที่สุดสําหรับผู้ใช้ เราพบว่าการอัปเดตเวลาในการโหลดหน้าค้นหาทุกๆ 100 มิลลิวินาทีทำให้ eBay มีจำนวน "เพิ่มลงในรถเข็น" เพิ่มขึ้น 0.5%
100 มิลลิวินาที
ปรับปรุงเวลาในการโหลด
0.5%
จำนวน "เพิ่มลงในรถเข็น" เพิ่มขึ้น
การใช้งบประมาณด้านประสิทธิภาพ (ได้มาหลังจากทำการศึกษาเชิงแข่งขันด้วยรายงานประสบการณ์ของผู้ใช้ Chrome) และมุ่งเน้นที่เมตริกประสิทธิภาพที่มุ่งเน้นผู้ใช้ eBay สามารถปรับปรุงความเร็วเว็บไซต์ได้อย่างมาก
![ความพยายามในการเพิ่มประสิทธิภาพทำให้หน้าแรกมีการปรับปรุง 10% หน้าการค้นหาเพิ่มขึ้น 13% และหน้าสินค้าเพิ่มขึ้น 3%](https://web.dev/static/case-studies/shopping-for-speed-on-ebay/image/the-optimization-efforst-bcf8088c06dbc.png?authuser=6&hl=th)
...และข้อมูลรายงานประสบการณ์ของผู้ใช้ Chrome ก็ไฮไลต์การปรับปรุงเหล่านี้เช่นกัน
![ภาพหน้าจอแสดงมุมมอง PageSpeed Insights ของข้อมูลรายงานประสบการณ์ของผู้ใช้ Chrome ที่ไฮไลต์ FCP สูง 70% ส่วน FID เร็ว 88% สำหรับ eBay.com](https://web.dev/static/case-studies/shopping-for-speed-on-ebay/image/screenshots-pagespeed-in-47106c845a69a.png?authuser=6&hl=th)
ซึ่งก็ยังมีงานที่ต้องทำอีกมากมายในอนาคต แต่สิ่งที่เราได้เรียนรู้จาก 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 อยู่แล้ว แต่ไม่ได้ใช้รูปแบบที่สอดคล้องกัน
![ภาพหน้าจอของแผงเครือข่ายเครื่องมือสำหรับนักพัฒนาเว็บที่กรองเพื่อแสดงคำขอรูปภาพ WebP จาก eBay.com](https://web.dev/static/case-studies/shopping-for-speed-on-ebay/image/screenshots-the-devtools-170d824298f0d.png?authuser=6&hl=th)
ประการที่ 2 แม้ว่ารูปภาพข้อมูลผลิตภัณฑ์ใน eBay จะได้รับการเพิ่มประสิทธิภาพอย่างมาก (ทั้งด้านขนาดและรูปแบบ) แต่หลักเกณฑ์เดียวกันจะไม่มีผลกับรูปภาพที่มีการดูแลจัดการ (เช่น โมดูลด้านบนในหน้าแรก) eBay มีรูปภาพที่ดูแลจัดการด้วยมือจำนวนมาก โดยอัปโหลดผ่านเครื่องมือที่หลากหลาย ก่อนหน้านี้ การเพิ่มประสิทธิภาพจะขึ้นอยู่กับผู้อัปโหลด แต่ตอนนี้ eBay บังคับใช้กฎในเครื่องมือเพื่อให้รูปภาพทั้งหมดที่อัปโหลดได้รับการเพิ่มประสิทธิภาพอย่างเหมาะสม
"การตัด" ตรงนี้คือไบต์ของรูปภาพขยะที่ส่งไปให้ผู้ใช้
การดึงข้อมูลล่วงหน้าของชิ้นงานแบบคงที่
เซสชันผู้ใช้ใน eBay ไม่ได้มีเพียงหน้าเว็บเดียว การดำเนินการเป็นไปอย่างราบรื่น เช่น โฟลว์อาจเป็นการนำทางจากหน้าแรกไปยังหน้าค้นหาไปยังหน้ารายการ แล้วเหตุใดหน้าเว็บต่างๆ ในกระแสจึงไม่ช่วยเหลือซึ่งกันและกัน นั่นก็คือแนวคิดของการดึงข้อมูลล่วงหน้าตามการคาดการณ์ ซึ่งหน้าเว็บหนึ่งจะดึงข้อมูลเนื้อหาคงที่ที่จำเป็นสำหรับหน้าเว็บถัดไปที่น่าจะเกิดขึ้นล่วงหน้า
เมื่อใช้การดึงข้อมูลล่วงหน้าแบบคาดการณ์ เมื่อผู้ใช้ไปยังหน้าที่คาดการณ์ไว้ ชิ้นงานจะอยู่ในแคชของเบราว์เซอร์อยู่แล้ว การทำเช่นนี้เหมาะสำหรับเนื้อหา CSS และ JavaScript ที่สามารถดึง URL ได้ล่วงหน้า สิ่งหนึ่งที่ควรทราบไว้คือ การเข้าชมจะช่วยในการนำทางครั้งแรกเท่านั้น ในการนำทางที่ตามมา เนื้อหาคงที่จะอยู่ในแคชอยู่แล้ว
![eBay กำลังดึงข้อมูลล่วงหน้าสำหรับชิ้นงานแบบคงที่ หน้าแรกจะดึงข้อมูลเนื้อหาล่วงหน้าสำหรับ Search ส่วน Search จะดึงข้อมูลเนื้อหาสำหรับรายการล่วงหน้า เป็นต้น การดึงข้อมูลล่วงหน้าโดยใช้แมชชีนเลิร์นนิงและข้อมูลวิเคราะห์อยู่ระหว่างการพิจารณา](https://web.dev/static/case-studies/shopping-for-speed-on-ebay/image/ebay-is-doing-predictive-03e4338462c3b.png?authuser=6&hl=th)
"ตัด" ตรงนี้คือเวลาของเครือข่ายสำหรับเนื้อหาแบบคงที่ของ CSS และ JavaScript ในการนำทางครั้งแรก
การดึงข้อมูลผลการค้นหายอดนิยมล่วงหน้า
เมื่อผู้ใช้ค้นหา eBay ข้อมูล Analytics ของ eBay แสดงให้เห็นว่ามีแนวโน้มสูงที่ผู้ใช้จะไปยังรายการใน 10 ผลการค้นหาแรก ตอนนี้ eBay จะดึงข้อมูลรายการล่วงหน้า จากการค้นหาและเก็บไว้เมื่อผู้ใช้นำทาง การดึงข้อมูลล่วงหน้ามี 2 ระดับ
ระดับแรกจะเกิดขึ้นฝั่งเซิร์ฟเวอร์ ซึ่งบริการรายการจะแคชรายการ 10 อันดับแรกในผลการค้นหา เมื่อผู้ใช้ไปยังหนึ่งในรายการเหล่านั้น eBay ช่วยประหยัดเวลาในการประมวลผลของเซิร์ฟเวอร์แล้ว การแคชฝั่งเซิร์ฟเวอร์ใช้ประโยชน์จากแอปเฉพาะแพลตฟอร์มและเปิดตัวแล้วทั่วโลก
อีกระดับจะเกิดขึ้นในแคชของเบราว์เซอร์ซึ่งใช้ได้ในออสเตรเลีย การดึงข้อมูลล่วงหน้าของรายการเป็นการเพิ่มประสิทธิภาพขั้นสูงเนื่องจากลักษณะของรายการแบบไดนามิก และยังมีความแตกต่างเล็กๆ น้อยๆ อีกมาก เช่น การแสดงผลหน้าเว็บ ความจุ สินค้าในการประมูล และอื่นๆ ดูข้อมูลเพิ่มเติมได้ในงานนำเสนอของการพบปะด้านวิศวกรรมประสิทธิภาพของ LinkedIn หรือรอติดตามบล็อกโพสต์โดยละเอียดเกี่ยวกับหัวข้อจากวิศวกรของ eBay ได้เลย
![eBay ดึงข้อมูลรายการ 5 อันดับแรกในหน้าผลการค้นหาล่วงหน้าเพื่อให้โหลดตามมาได้อย่างรวดเร็ว กรณีนี้เกิดขึ้นในช่วงที่ไม่มีการใช้งานด้วย requestIdleCallback() ทำให้ค่ามัธยฐานของครึ่งหน้าบนรวดเร็วขึ้น 759 มิลลิวินาที ซึ่งเป็นเมตริกที่กำหนดเองซึ่งคล้ายกับ First Meaningful Paint โดย eBay พบว่าส่งผลดีต่อ Conversion จากการดึงข้อมูลล่วงหน้า](https://web.dev/static/case-studies/shopping-for-speed-on-ebay/image/ebay-prefetches-top-5-it-25fc9b6706b28.png?authuser=6&hl=th)
"การตัด" ในที่นี้อาจระบุเวลาในการประมวลผลของเซิร์ฟเวอร์หรือเวลาของเครือข่าย ทั้งนี้ขึ้นอยู่กับตำแหน่งที่แคชรายการไว้
ตั้งใจดาวน์โหลดรูปภาพที่ใช้ค้นหา
ในหน้าผลการค้นหา เมื่อมีการส่งคำค้นหาในระดับสูง 2 สิ่งต่อไปนี้จะเกิดขึ้น อย่างแรกคือขั้นตอนการจำได้/จัดอันดับซึ่งจะแสดงรายการที่เกี่ยวข้องมากที่สุดที่ตรงกับคำค้นหา ขั้นที่ 2 คือการเพิ่มสินค้าที่ถูกเรียกคืนด้วยข้อมูลที่เกี่ยวข้องกับบริบทผู้ใช้เพิ่มเติม เช่น ค่าจัดส่ง ขณะนี้ eBay จะส่งรูปภาพสินค้า 10 รูปแรกไปยังเบราว์เซอร์ทันทีพร้อมกับส่วนหัวเพื่อให้ดาวน์โหลดได้ก่อนที่มาร์กอัปที่เหลือจะมาถึง ดังนั้นรูปภาพจะแสดงเร็วขึ้น การเปลี่ยนแปลงนี้เริ่มเปิดตัวแล้วทั่วโลกสำหรับแพลตฟอร์มบนเว็บ
"การตัด" ในที่นี้คือเวลาเริ่มต้นการดาวน์โหลดรูปภาพในผลการค้นหา
การแคช Edge สำหรับข้อมูลคำแนะนำอัตโนมัติ
เมื่อผู้ใช้พิมพ์ตัวอักษรในช่องค้นหา จะมีป๊อปอัปคำแนะนำปรากฏขึ้น คำแนะนำเหล่านี้จะไม่เปลี่ยนแปลงสำหรับชุดค่าผสมของตัวอักษรเป็นเวลาอย่างน้อย 1 วัน ซึ่งเหมาะสำหรับการแคชและแสดงจาก CDN (สูงสุด 24 ชั่วโมง) แทนที่จะส่งคำขอไปยังศูนย์ข้อมูล ตลาดต่างประเทศจะได้รับประโยชน์จากการแคช CDN โดยเฉพาะ
![ภาพหน้าจอช่องค้นหาของ eBay ที่แสดงคำแนะนำที่เติมข้อความอัตโนมัติสำหรับคำค้นหา](https://web.dev/static/case-studies/shopping-for-speed-on-ebay/image/a-screenshot-ebays-sear-8702f36e55c1b.png?authuser=6&hl=th)
แต่กลับมีปัญหา 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 ได้รับในปัจจุบัน
![ภาพหน้าจอของรายงาน UX ของ Chrome ที่แสดงการปรับปรุงข้อมูลภาคสนามสำหรับ eBay.com](https://web.dev/static/case-studies/shopping-for-speed-on-ebay/image/screenshots-chrome-ux-re-d1c799e2e11fa.png?authuser=6&hl=th)
ประสิทธิภาพเป็นฟีเจอร์และข้อได้เปรียบในการแข่งขัน ประสบการณ์การใช้งานที่มีการเพิ่มประสิทธิภาพจะนำไปสู่การมีส่วนร่วมของผู้ใช้, Conversion และ ROI ที่สูงขึ้น ในกรณีของ eBay การเพิ่มประสิทธิภาพเหล่านี้มีหลายสิ่งตั้งแต่ที่ใช้ความพยายามน้อยไปจนถึงการเพิ่มประสิทธิภาพเพียงไม่กี่อย่าง
อ่านความเร็วจากการตัดพันครั้งเพื่อดูข้อมูลเพิ่มเติมและคอยติดตามบทความที่มีรายละเอียดเพิ่มเติมโดยวิศวกรของ eBay เกี่ยวกับผลงานด้านประสิทธิภาพในอนาคตอันใกล้นี้