High Performance WebViews
Article Summary
John Bito from Zillow reveals how they cut home listing load times in half while making it easier to ship features across iOS, Android, and web. The secret? Rethinking how WebViews work in native apps.
Zillow's home details page was split between native UI and server-rendered WebViews, creating slow load times and making cross-platform updates painful. Their engineering team built a system to pre-package HTML resources into apps and update them asynchronously, eliminating server wait times while keeping a single codebase.
Key Takeaways
- Users now see listing info in half the time vs server-rendered approach
- First-time users get same fast performance as returning users
- Single HTML codebase deploys across iOS, Android, and web platforms
- Resource manager downloads updated HTML without requiring app store releases
- YUI-based build process inlines all JavaScript, CSS, and images into single file
By pre-packaging encapsulated HTML resources and caching WebViews, Zillow achieved 50% faster load times while enabling their web developers to control the mobile experience.
About This Article
Zillow's home details page had to wait for server-rendered HTML to arrive and load before anything could display. This caused unpredictable delays, especially for first-time users whose browsers had empty caches. The setup also made it hard to innovate across platforms because the native UI and WebView had to stay in sync.
Zillow's engineering team built a resource manager for iOS and Android that packages HTML with inlined JavaScript, CSS, and image sprites directly into the app bundle. A manifest-based system handles updates by comparing SHA256 digests and downloading changes asynchronously. This removed the need to wait for servers.
Home details pages now load 50% faster than the old server-rendered version. First-time users see the same speed as returning users. Web developers can also update the experience across all platforms without pushing new app store releases.