Web. Dev /shopping-fo…
The article seems to be simple, but the specific links are worth learning, and web.dev is really a lot of stuff
EBay put a lot of emphasis on user speed in 2019, with many teams working to deliver the fastest apps and websites to users. The results showed that for every 100-millisecond increase in eBay search page load time, the number of “add to cart” times increased by 0.5%.
With the adoption of Performance Support (based on a study of the Chrome User Experience Report) and a focus on some key Performance indicators, User-centric Performance Metrics,eBay There has been a huge increase in speed.
These improvements are also shown in chrome user data (from chrome User Experience Report, FCP,FID)
There’s still a long way to go, but that’s eBay for now.
Prune Web Performance
EBay optimizes by cutting or tailoring user-facing physical content. This article focuses on topics relevant to the Web developer community, not ebay-specific topics.
Cut all text resources
Loading less code is one way to speed things up. EBay reduces the data load passed to users by tailoring useless or unnecessary JS, CSS, HTML, and returned JSON data. Before this, each new function on eBay was superimposed on the original load data without removing useless data, which gradually became a performance bottleneck and the team delayed the action. You’re going to see eBay cut a lot of load.
Above-the-fold content of content above the fold lineCritical path optimization
Not every pixel on a screen is equally important. The content above the folding line is more critical. There is a layer called experience service in eBay’s service architecture, which is directly connected to the front end. This layer of services is based on views and devices (rather than data entities themselves), and when a request comes in, content above the fold line is loaded first, while the rest of the content is lazily loaded or in a later chunk. The result: key content loads first and shows up faster.
Image optimization
An image is the bloated bulk of a web page. Although it takes a lot of work to optimize the image, eBay mainly does these two optimizations.
First of all, eBay uses WebP images in all search results on iOS, Android and all other browsers that support WebP images. The search results page is the page with the most images used by eBay.
Secondly, although eBay’s list pictures have been optimized, many of them are manually made and uploaded, so the effect is uneven. EBay now forces the upload tool to optimize the picture when uploading.
Static asset prefetch
On eBay, a user’s session isn’t just a page, it’s a stream. For example, the flow could be an Item detail page from the home page to the search page. So why don’t pages in a flow help each other? This is called predictive prefetch, where the page preloads the page resources that the user is likely to go to.
With predictive prefetching, the asset is already in the browser cache when the user navigates to the predicted page. Retrieve urls ahead of time and cache CSS and JS. One thing to note here is that it only helps with the first navigation. In subsequent navigation, the static asset will already be in the cache.
Preload the search results
When a user searches eBay, eBay will return the 10 items of data that the user is most likely to be interested in based on the analysis data. EBay now preloads these 10 items of data in two layers.
The first layer is on the server side, where the service caches the top 10 items in the user’s search results. When a user enters an item, it saves time on server requests, local applications make use of server-side caching, and it is rolled out globally.
The other layer is browser caching, which is currently implemented in Greyscale in Australia. Items are dynamic and each item is different: page exposure, volume, auction/snap items, etc. Check out LinkedIn’s Performance Engineering Meetup Presentation, or check out articles on this topic on eBay.
Download search images first
On the search results page, when a Query comes in, it does two things. One is sorting, which returns the 10 most relevant matches. The other is to return product related information such as shipping rates based on the user’s context information. EBay now immediately sends images of the top 10 items to the browser as blocks, along with HTTP headers, so downloading can begin before the rest of the content arrives. The result: images load faster, and this is already happening globally on the Web platform.
Cue the cache of data
When the user enters the content search, the prompt box will pop up. The results of these prompts based on this input do not change throughout the day. They are ideal for CDN caching (up to 24 hours) rather than requesting the server every time. International markets in particular benefit from CDN caching.
There’s a problem, actually. EBay has some pop-up prompts based on the user’s personalized information level elements, which are not suitable for caching. However, user-level search prompts and general search prompts can be handled separately. In international markets, latency matters more than personalization, and eBay currently caches search prompts to the CDN in non-U.S. locations.
A cache of unrecognized users
For a Web platform, the home page content of an unidentified user is the same for a specific area. These users are either opening eBay for the first time or clearing sessions, so there is no personalization. Although the idea of the home page is constantly changing, there is still room for caching.
EBay uses edge PoPs to cache users’ data for a while. First-time users will get their home page data from the server closest to them, not from any other server. EBay is also experimenting with international markets, which will allow for more optimization.
Optimizations for other platforms
Native App(Android, IOS) parsing optimization
The native App(Android, IOS) and the back end generally use JSON for data transfer. JSON can be very large sometimes. EBay optimized the parsing algorithm to optimize the content that needs to be rendered immediately
Users can see content faster. On the other hand, on the Android side, eBay starts to initialize the view controller as soon as the user types in the search box. Before, you had to press the search button.
Native App
Cold start optimization is used, especially on android. When using a cold boot, much of the initialization takes place at the operating system and application level, and reducing the application level startup time allows users to see the home page more quickly. EBay did some analysis and noticed that not all initializations need to display content, and some can be done late.
EBay also found that some third-party data analysis hindered startup times, and having them load asynchronously helped speed up cold launches.
conclusion
EBay made some optimizations every once in a while, and these versions were released in stages throughout the year, shaving tens of milliseconds off each release to get to where eBay is now:
Performance is a feature and a competitive advantage. Optimizing the experience leads to higher engagement, conversion rates, and ROI. In eBay’s case, these optimizations range from simple work to some advanced work.
Check out Speed by a Thousand Cuts to learn more, and look for more detailed articles in the near future by eBay engineers documenting their performance work.