We’re excited to introduce you to Twitter Lite, a Progressive Web App that is available at mobile.twitter.com. Twitter Lite is fast and responsive, uses less data, takes up less storage space, and supports push notifications and offline use in modern browsers. The web is becoming a platform for lightweight apps that can be accessed on-demand, installed without friction, and incrementally updated. Over the last year we’ve adopted new, open web APIs and significantly improved the performance and user experience.
Designing for performance
Hundreds of millions of people visit mobile.twitter.com every month. We want Twitter Lite to be the best way to use Twitter when your connectivity is slow, unreliable, limited, or expensive. We have been able to achieve speed and reliability through a series of incremental performance improvements known as the PRPL pattern and by using the new capabilities of modern browsers on Android (e.g., Google Chrome) which include Service Worker, IndexedDB, Web App Install Banners, and Web Push Notifications.
Twitter Lite is network resilient. To reach every person on the planet, we need to reach people on slow and unreliable networks. When available, we use a Service Worker to enable temporary offline browsing and near-instant loading on repeat visits, regardless of the network conditions. The Service Worker caches the HTML application shell and static assets, along with a few popular emoji. And when scripts or data fail to load we provide “Retry” buttons to help users recover from the failure. All together, these changes improve reliability and contribute to significantly faster loading and startup times on repeat visits.
Twitter Lite is interactive in under 5 seconds over 3G on most devices. Most of the world is using 2G or 3G networks; a fast initial experience is essential. Over the last 3 months we’ve reduced average load times by over 30% and 99th percentile time-to-interactive latency by over 25%. To achieve this, the app streams the initial HTML response to the browser, sending instructions to preload critical resources while the server constructs the initial app state. Using webpack, the app’s scripts are broken up into granular pieces and loaded on demand. This means that the initial load only requires resources needed for the visible screen. (When available, a Service Worker will precache additional resources and allow instant future navigations to other screens.) These changes allow us to progressive load the app so people can sooner consume and create Tweets.
Twitter Lite breaks up expensive rendering work. Although we’ve taken care to optimize the rendering of our components, the Tweet is a complex composite component, and rendering infinite lists of Tweets requires additional performance considerations. We implemented our own virtualized list component; it only renders the content visible within the viewport, incrementally renders items over multiple frames using the requestAnimationFrame API, and preserves scroll position across screens. Further improvements to perceived performance were possible by deferring non-critical rendering to idle periods using the requestIdleCallback API.
Twitter Lite reduces data use by default, serving smaller media resources and relying on cached data. We’ve optimized images to reduce their impact on data usage by as much as 40% as you scroll through a timeline. “Data saver” mode further reduces data usage by replacing images in Tweets and Direct Messages with a small, blurred preview. A HEAD request for the image helps us to display its size alongside a button to load it on demand. And at 1-3% the size of our native apps, Twitter Lite requires only a fraction of the device storage space.
Design systems and iteration speed
Increasing our capability to iterate quickly helps us to maintain a high quality user experience. We rely heavily on flexbox for layout and a small, fixed number of colors, font sizes, and lengths. Twitter Lite is built from a component-based responsive design system that allows the app to fit any form factor. Working with UI components has helped us established a shared vocabulary between design and engineering that encourages rapid iteration and reuse of existing building blocks. Some of our most complex features, such as mixed-content Timelines, can be created from as little as 30 lines of code configuring and connecting a Redux module to a React component.
Building a fast web app at this scale, and keeping it fast, is a significant challenge involving design, product, and engineering from multiple teams at Twitter. We’re excited about our progress and experimenting with HTTP/2, GraphQL, and alternative compression formats to further reduce load times and data consumption. In the coming months, we’ll be shipping more improvements to the accessibility, safety, design, functionality, and performance of Twitter Lite.