Jan 09, 2024 By Shawn O’Neill 5 min
TL;DR: Do you have (or are you considering) a webview app, but have issues or concerns about the experience for your users? With the right approach, and some expertise, you can dramatically increase the speed of your webview app, and importantly, improve the user experience. We're fortunate to have guest expert Shawn O'Neill of SpeedSense provide practical advice on the smart ways to improve the speed and performance of your website, and in turn, create a superior user experience for your webview app users.
Before diving into code, it’s important to define the scope and boundaries of any digital project. A site speed improvement program is no different. Taking some time to clearly define success and survey the current state will keep team members and stakeholders aligned.
Set desired targets for your webview app and website speed and performance that will achieve the needed results. This can be based on your competitors' websites and apps, with consideration for Google's thresholds for SEO ranking via Core Web Vitals.
For a website with substantial content, don't optimize blindly and instead leverage analytics for strategic optimization. Analyze page views, bounce rates, and common navigation paths, ensuring a data-driven approach for maximum impact.
Thousands of pages can be rendered from the same template. By identifying and prioritizing the most popular templates, you can efficiently streamline improvements across a significant portion of your website, maximizing the impact of your optimization strategies.
Real traffic will show you how your site is performing in the wild, but you need to inspect the client side CPU performance and network requests as the page loads to identify the specific bottlenecks to improve.
Prioritize static content over dynamic elements, and implement effective caching for static content. By minimizing the generation of dynamic content for each user request, you can significantly reduce server load and improve response times. We’ll discuss this in more detail below.
Webview apps can be incredibly flexible and offer developers streamlined development and seamless ongoing updates. They are employed by anyone from fast-growing startups to Fortune 100 enterprises, including apps you use every day like the New York Times, Bank of America, Amazon.com, and United Airlines.
Webview apps are often chosen over native apps because they lessen time, energy, and duplicate effort for developers. By implementing UI and functionality once in responsive web technologies, developers reduce the development effort to build for all platforms, minimize duplicative effort, and accelerate time to market.
Even better: Hybrid web+native apps — including those built using Median.co — add native functionality to webview apps and achieve the best of both worlds. An easy to build and maintain UI, they're packed with all the native features needed to deliver a fully immersive experience to app users.
Implemented well, webview apps are transparent to users who will be unable to distinguish them from a native app counterpart.
When designing your webview app you should consider:
As long as your UI is designed to be “app-like," your users will find it hard to differentiate your webview app from a native app.
Despite their advantages, the single biggest challenge with webview apps vs. fully native apps is the speed of the website that powers the app. A slow website will create a poor user experience which can affect user engagement, e-commerce conversion rate, and overall, the success of the app - and therefore your business.
How fast is fast enough for your app? As you evaluate your own webview app, you’ll need to establish your own requirements for speed. Does it look fast? Does it feel fast? Is it visually stable? Typically, when a user taps a button they’re expecting quick feedback after taking that action: being met with some visual feedback within 100 milliseconds.
In addition to the performance of your webview app, website speed and performance are pivotal in determining search ranking position, a correlation emphasized by Google's Core Web Vitals.
These metrics measure loading performance, interactivity, and visual stability - crucial for providing a positive user experience. A fast-loading and efficient website enhances user experience, aligning with Google's goal of prioritizing user-centric content.
Positive user signals, such as lower bounce rates from engaging experiences, are recognized by Google's algorithms and contribute to higher search ranking positions.
Therefore, ensure your speed and performance improvement initiatives consider Core Web Vitals. In doing so you will benefit from improvements in your search ranking, and the corresponding business impacts.
App and web speed should be a priority for senior leadership from the CEO throughout your organization, especially those who have brand perception, conversion, and growth top of mind.
For instance, a CEO and team members interfacing externally will know that a fast website and app are an extension of their company’s brand. These stakeholders should be prioritizing the question: What is top of mind as customers and users think of their last interaction with your digital presence?
Or, a CMO and growth team members responsible for driving traffic, especialy paid traffic, will see a lower bounce rate, and higher ROAS for an app or website that loads quickly in 1-2 seconds versus a site that takes 10 seconds to load. They’ll be interested to know that improvements in site speed can have a higher ROI than a new marketing campaign.
Or, a CRO and UX/conversion focused team members will see that a fast and responsive experience drives metrics across the board – retention, engagement, conversion. Users who are waiting on an app to load content — even slightly — will drop off at each step through the funnel.
One SpeedSense client improved their homepage speed by 40%, and saw a corresponding 35% increase in organic traffic. Read the Case Study here.
The good news is that making performance improvements are within your reach. And all efforts to improve the speed and performance of your website will not only improve the UX for your app users, but will also benefit all users who are accessing the same content using a standard browser. Each facet of performance improvement affects UX: Backend, Rendering, Interactivity, and Visual Stability.
And: website speed improvement initiatives will lead to measurable reductions in power consumption – from your servers to public internet infrastructure to user devices – and a corresponding quantifiable reduction in CO2 emissions.
While it may sound simple, fewer bytes, fewer requests, and fewer files result in a more performant webview app. Always aim to ship less code. And when designing web content that will be displayed in both a standard browser and a webview app, consider creating a CMS template or a React layout that does not include unnecessary elements.
App speed is in the eye of the user, and begins with tapping your app icon. Ideally, your page loads and the main content is displayed within 2.5 seconds of app launch. But how do you get there? Here are a few quick tactics:
Fact: Webview apps built using Median will display an app splash screen until the underlying page is loaded, at which point the splash screen will transition to the web content. This ensures a smooth loading experience. (Other webview apps may flicker between the splash screen and displaying a blank white screen that is populated with content as it loads.)
Reducing the size of image and video content can be a huge driver behind reducing page load time and an overall opportunity for improvement. Below are some quick optimization considerations to get you started.
Video is a powerful medium and well suited for mobile consumption. However, due to the large amount of data inherent in video, there is opportunity to improve page speed and UX:
Tip: DYK: To GIF, or not to GIF? Well, GIF files are often used on websites but they are in fact a terrible format to display animations on the modern web. A 40MB GIF can be instead replaced with a 200-400kB WebM file. A video that can be streamed or lazy loaded is an additional consideration for larger animations.
Building a single page app using one of these approaches allows you to preload content for frequently accessed pages — including content behind buttons that are likely to be accessed next. This avoids needing to reload the entire page, and helps eliminate lag when users navigate between different sections of your app.
When designing your caching strategy, be deliberate about how long you intend to cache content.
Typically, the more generic the content between visitors, the more cacheable the delivered content will be. The initial page of your app may be the same for all users, while a shopping cart with unique items will be different for all users.
A/B testing and personalization should be configured to be compatible with your caching strategy. When configuring caching, verify that your web server headers are configured for optimized caching and consider cache-busting techniques for assets such as filename versioning.
Tip: Consider all of the places in which content could be cached: On your servers, in the CDN, or on your visitors' devices.
Inclusive of your caching strategy, you should use a reliable CDN to serve your web assets.
CDN edge servers are strategically located around the world, reducing latency and accelerating content delivery. This ensures that users from different geographic locations can access your app with minimal delay.
Your CDN implementation should be aligned with your caching strategy, so that all cacheable assets are hosted on the edge and requests to the origin server are only made when necessary.
Fact: Different device sizes and pixel densities require different image files. By using a suitable solution you can upload one large asset that is dynamically resized for your users, and automatically placed in the CDN for subsequent requests.
In addition to these tips, it's essential to continuously monitor performance using tools like Google PageSpeed Insights, Sensai from SpeedSense, or similar services. Regularly optimize your web content and delivery by fine-tuning the user experience and addressing performance bottlenecks.
By following these strategies and staying up-to-date with the evolving best practices in web development, you too can create a webview app that not only matches but can exceed the performance of fully native apps.
Remember: website performance is a crucial aspect of user satisfaction and brand perception, and investing in these optimizations will pay off in the long run — for the success of your app, and business.
Need help with any of the recommendations listed above or have other questions regarding improving the speed of your webview app? Get in touch with the team at SpeedSense and book a free consultation.
About the author: Shawn O’Neill is the Founder and CEO of SpeedSense Web Performance. The company’s mission is to help agencies and brands build a faster web, one website at a time. They help their clients deliver exceptional customer experiences that reduce abandonment and nurture growth and revenue.
The New York Times App
Web Content Integration: The New York Times app employs webview components to display articles, multimedia content, and live updates. By doing so, they maintain the consistency of their online content within the app, allowing for real-time updates and a familiar reading experience.
Bank of America App
Secure Transactions: Bank of America ensures secure and reliable access to your financial data by utilizing webview technology to securely render web-based transactional forms and data, all while maintaining the native look and feel of the app. This is achieved through secure communication channels and encryption protocols.
Dynamic Product Listings: Amazon's mobile app features dynamic product listings using webview components. This allows them to instantly update product information, pricing, and reviews without the need for frequent app updates. They use efficient data synchronization mechanisms and optimized rendering for smooth shopping experiences.
United Airlines App
Real-time Flight Information: United Airlines' app employs webviews to seamlessly integrate real-time flight information and booking services. This ensures that users can access up-to-the-minute data on flights, availability, and travel updates without leaving the native app environment.
Enabling social login on your mobile app eliminates unnecessary friction for users looking to sign in to, or sign up for, your app.
QR code scanning is a cost-effective solution that promotes app conversions. Here's how to incorporate native QR scanning functionality into your mobile app.
Programmatic push notifications provide timely, personalized messages that improve user engagement and customer satisfaction.
Biometric authentication like Face ID is *key* to a seamless and secure sign-in experience — and it’s very easy to add to your existing iOS or Android app. But does adding biometric technology make sense for your app, and your business?