The technology gap between the top companies and the small following companies has never been closer. With the progressive web app, the financial ability gap has been enormously reduced. By applying the new and advanced use of web app technology that profoundly must mention service workers, companies of all sizes can tweak PWA to their own functional needs and budgets. If you’re looking for inspiration from the world’s great PWA adoptions, the case study below on Twitter PWA is something you cannot miss.
Contents
The Story Of Twitter Before PWA Integration
In April 2017, Twitter Lite, the new improvement of its site on the mobile browser, was launched after a collaboration with Google. The name came from the fact that it’s built to be lighter, swifter, and more usable.
Fast forward to this day, Twitter is the 3rd most popular social media site in the US and the 15th most popular worldwide. Although most of their user demographic is in the US, Japan, and India are the two biggest representatives of Twitter users that exceed the number of US users combined.
The story of Twitter Lite has to be dated back from 2010 to 2017, with Twitter on its way to becoming the world’s top social media site.
Twitter had a rough start compared to its biggest rival, Facebook, in the early days. However, from 2010 onwards, the bluebird witnessed a wonderful sight on the chart, a consistent growth quarter by quarter. Between 2015, 2016, and 2017, the growth rate slowed down.
Recognizing the potential outside of the US, Twitter was quickly reaching out to the international market.
As soon as Google introduced PWA, Twitter knew just how it could expand and acquire new users. Twitter Lite was their final answer, dedicated to emerging countries with unreliable network connections. The new Twitter PWA occupies less than a megabyte of storage while performing with the optimized data-saver mode. Images and videos are in a blurred preview until users click on them.
Nicolas Gallagher, the Engineering Lead at Google for Twitter Lite, stated: “Twitter Lite is now the fastest, least expensive, and most reliable way to use Twitter.” The success of Twitter Lite made headlines for many articles regarding PWA.
The Solution Of The World’s Largest PWA – Twitter PWA
To assist you with the actional knowledge of PWA development, crucial points about the framework of Twitter PWA, Twitter Lite, and innovative methods customized for on-demand requests will be delivered below.
Notice that the whole goal of Twitter Lite is to ensure users have an excellent on-site experience, regardless of poor Internet connections, leading to subsequent visits and converting visitors into frequent users. Thanks to the ability to foster speed, reliability, and security of PWA, you can experience it at mobile.twitter.com.
Architecture Idea
Twitter Lite, at its core, is a simple, humbly sized Node.js server and an app of client-side JavaScript. PWA will enable the build of API for data caching and storing. The server will first take care of the authentication process, assemble the app’s earliest state, and turn the web codes into interactive pages by initial HTML rendering in the application shell.
Once loaded in the background, data will be requested directly from the Twitter API. The simplicity in this architecture helps Twitter PWA bring forth an outstanding and reliable service in efficiency even at a magnitude scale.
Designing Performance
Easy to use is one of the top priorities for Twitter Lite. Millions, if not hundreds of millions of users, would access this social network every month. So they want to create a user journey that is highly usable under any connectivity circumstances.
The developers had utilized a series of incremental performance leverage, the PRPL pattern, combined with the latest updates from modern browsers, to build Service Worker, Web Push Notifications, IndexedDB, and Web App Install Banners. They all were a part of the impressive loading speed and independence from the connection.
Use Of Data
Relying on cached resources to serve smaller data upfront, along with the data-save mode, Twitter Lite is inherently set to minimize the use of data, resulting in a 40% deduction on the timeline page. To load the optimized image on demand, a HEAD request is carried out to display its size with a button click.
Progressive Loading
After pouring the initial HTML response into the browser, instructions are sent to preload crucial resources for the server to assemble the interactive state. Scripts are shattered into fine pieces using a web pack to load only when asked.
In other words, the initial load from Twitter Lite is exceptionally fast because only the necessity for the visible view is conducted, while a service worker will precache additional resources to enable the almost instant appearance and smooth transition in future interactions.
Offline Availablity
Just like its native app, a service worker makes temporary offline usage possible. All the previously loaded pages are re-opened instantly through the caching in the HTML app shell, static assets, and some most common emojis.
The “Retry” button is provided when there’s a failure in the data or scripts loading to ensure the issue will be taken care of. Simply enabling the offline browsing, the loading speed in the starting up and subsequent visits are much enhanced.
Rendering
Forget the expensive rendering work; Twitter Lite was optimized for component rendering. However, the bigger issue lies in the complexity of Tweets with the infinite lists of requirements for additional performance.
Then they thought of a virtualized list component that only rendered content visible for the view presented above and preserved for scrolling across screens. Another update was through deferring the non-crucial rendering to inactive mode and saving data consumption by the requestIdleCallback API.
Systems And Duplicated Speed
Twitter Lite is a responsive design system built based on component details for the app to conform to any shape requests. Working with UI components cleared space for quick iteration and the reuse of established building blocks. It’s also worth mentioning that the flexbox is heavily relied upon for the design of the layout, limited numbers fixed on colors, font sizes, and lengths.
The Outcome Of Twitter PWA
The Mobile And Desktop Site
Twitter PWA is claimed to get interactive for as soon as 5 seconds and under across most devices with a 3G network. The Lite version loads 30% faster and saves up to 70% of data usage while reducing the time-to-interactive delay by more than 25%.
Compared to the old native app, Twitter PWA only takes up a maximum of 3% of the size, a fraction of space in the device’s storage. Yet it functions profoundly and powerfully. Timelines, one of the most complex features, can be constructed from a limited 30 code configuring lines while attaching a Redux module to a React component, mixed content.
The PWA works closely resembling the native app, with standard features such as a regular feed, push notification popups, direct messaging, and search tabs. The transition is responsive across pages and elements, although touch response is noticeably reported to be slower than its native apps. The developers are still working on enhancing usability and responsibility in future releases.
Everything is quite favorable with the desktop version, working well in narrow windows, compared to the old neglected Twitter official apps in both Mac and Windows. The whole experience feels relatively lightweight and relaxed to use.
Twitter Lite currently supports up to 42 languages, and the Globalize feature was created to emerge the numbers, dates, and messages that fit with the locals.
The Results In Numbers
- 65% increase in pages per session
- 75% increase in the number of Tweets sent
- 20% decrease in bounce rate
How Did Twitter PWA Become One Of The Fastest PWA?
With the functional tweak in the existing knowledge of service workers, along with the optimization for less data consumption, PWA is hardwired to handle faster-loading speed, and near-instant show-up on subsequent visits, both starting off and during the journey.
Optimizing for speed isn’t going to be in a day or two, but a repetitive process of testing, tracking, measuring, trying to understand why it’s happening, and applying possible solutions. Work on performance is a vicious cycle of watching, measuring, and improving here and there.
With that said, Twitter Lite is an accumulation of small improvements and updates over the first-page load, the rendering of React components, preventing re-rendering, and so on. Each catering to the enhancement in performance as a whole, and all the little effort making up to what we see now, one of the world’s largest and fastest PWA adoptions.
Of course, to maintain that title, developers have to constantly work to ensure everything is in control and evolve the process to something even better if there’s a chance.
Frequently Asked Questions About Twitter PWA And PWA
Is Twitter A PWA?
Absolutely. Twitter released the new progressive web app version in collaboration with Google developers in 2017. The Twitter PWA is named Twitter Lite, and its build is focused on serving international users who may often experience unstable connections compared to the US.
Is It Expensive To Build A PWA Like Twitter PWA?
The Twitter PWA is said to be the cheapest version of all Twitter officials, yet performing wonderfully across different browsers and even resembles some of the native app’s greatest features.
Twitter PWA is a combination of excellent performance optimization and world-class application of the PWA’s modern technology. With that said, building an exceptional PWA like Twitter Lite depends a great deal on the development team you hire or outsource to.
PWA is the best possible alternative to native apps and popularly predicted the future of websites. So if online businesses are looking for a way to leverage their conversion rate by improving the on-site customer journey, ditch the heavy-weighted and pricey native apps and look out for PWA instead.
Where To Begin With The PWA Development Of Your Business?
Well, it should all begin with where your business is at, what it needs, and where will you want it to be. Make sense? Because you don’t want to lose money and precious time on something irrelevant, right?
The next crucial step is to decide whether PWA would fit into your business strategy. Almost everybody’s looking for ways to increase their site traffic, improve their conversion rates, or leverage their unit value. And a PWA development agency can help you with all that.
They can help you detect the issue in whichever low-performing areas it may be on your site. If you cannot figure out the best solution, reach out for a consultation or examination service.
And that’s when we reach the following step: choose a reliable PWA development service provider. You need a name with years of expertise, compelling a dynamic team of developers striving for the best for their clients, and of course, the excellent knowledge and skills needed to create a highly functional and feature-rich PWA.
Tigren is the world-leading outsourcing agency that thousands of global SMBs have trusted over the last decade. We are a team of young, aspiring, and dedicated individuals, chosen from the top high achievers in their industry.
We specialize in eCommerce development, especially with Magento and PWA development services. We want to bring you the best deal that you cannot find elsewhere, assist you till the end, and accomplish the goal you come to us for.
You can count on us if you need either an effective and cost-efficient solution for:
- Fully eCommerce PWA development from scratch
- Partly eCommerce PWA development
- Built-in solutions and improvements on an existing eCommerce PWA
- Premium ready-to-go eCommerce PWA themes/plugins/extensions
Key Takeaways
The new Twitter PWA brings a breath of fresh air to the dull and irresponsive mobile web world. The powerful partnership between Twitter and Google had paid its fame with a transformational adoption, breaking through all the concerns and doubts about the potential of PWA. Be a successful PWA early adopter, start pampering your online users, and nudge your increase of ROI with Tigren today before it’s too late.
Related Posts:
Alibaba PWA: Winning With Progressive Web App
