The overall strategy for approaching speed and performance

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.

1. Set targets

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. 

2. Measure user behavior

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.

3. Group by templates

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.

4. Use both real-world performance data and synthetic tests

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.

5. Determine the reasons the site is slow

Is it a rendering issue? Back-end? Client device CPU overloaded from too much JavaScript? Layout churning as elements are loaded? Understanding the specific facets of performance degradation enables targeted solutions to address root causes of performance issues.

6. Take stock of your static vs dynamic content

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. 

Are webview apps as good as native apps?

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.

What are the benefits of webview apps?

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:

1. Building a user interface that follows Apple Design Guidelines and Google Material Design Guidelines to look and feel like an app
2. Implementing properly styled buttons rather than text links
3. Implementing native app navigation menus rather than website navigation menus

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. 

Website performance is critical for a successful webview 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. 

Website performance is pivotal in search ranking position

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.

Webview and website speed: Who should care?

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 CO₂ emissions.

What are the top recommended ways to improve webview app speed and performance?

1. If it’s not needed in your app, don’t include it

‍Remove all unnecessary content, assets, and code from your website when displaying within your webview app

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.

While CSS can be employed to hide navigation menus and other page content not needed in the app, this does still add to page load time. Finally, be judicious with external JavaScript libraries for analytics and A/B testing and remove all that are not critical within your app.

2. Optimize Initial Load Time 

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:

• Minimize the initial loading time by only downloading essential assets on the main page of your app. 
• Prioritize the first-party user experience over third-party non-critical functionality, such as analytics plugins. Blocking your page load until an analytics plugin is loaded is not aligned with prioritizing the first-party UX and yields less valuable insights (i.e. Did that user actually view your page or did they bounce as they waited for it to load?).
• Use asynchronous loading techniques for non-essential content such as non-critical JavaScript libraries to not block page rendering. Consider lazy loading content such as images and video that are “below the fold” and not immediately visible. 

3. Optimize images and video

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.

‍How to optimize images for website page speed‍

• Ensure that images are optimized for file size and at the resolution required for the on-page context. 
• Use SVG images for simple icons and other vector shapes. 
• Use modern image formats such as WebP for photos rather than PNG/JPG.

How to optimize video for website page speed

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:

• Video that is well below the fold should be lazy loaded to save the costly expense of embedding a video player (YouTube/Vimeo/etc.) - which may never be seen, or played -  during the initial load. 
• Video that does not need to play automatically can be replaced with a facade screenshot of the initial frame that is seamlessly replaced with the actual player component upon click.

4. Optimize your single page app

If your dev team is familiar with JavaScript consider using modern JavaScript frameworks like React or NextJS when building your web app. These frameworks provide developer-friendly methods without significant performance issues. Hotwire is a less JavaScript-centric approach with a focus on speed that can be considered for some use cases.

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 using a JavaScript framework, it is critical to consider implementing server-side rendering to maximize speed. In this scenario, the web server generates a rendered HTML page for an initial page request so that page of the web app is immediately displayed on load. Then, content data for subsequent page loads are requested client-side without needing to load the entire HTML payload from the server.

As the modern web marches forward, a lot of functionality that required JavaScript in the past can now be implemented in vanilla HTML and CSS. e.g. lazy loading of images, or video elements. To keep your JavaScript as lightweight as possible, keep current with the latest HTML and CSS standards and only use JavaScript to implement what can’t be done in standard HTML/CSS.

5. Optimize caching and ‘live on the edge’ with a CDN edge server

Develop an optimized caching strategy

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.

Implement a Content Delivery Network (CDN)

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.

Enable content compression

Enable content compression on the CDN to reduce the size of assets transmitted to the client, which aids in improving load times. Use GZIP or Brotli compression for text-based assets like HTML, CSS, and JavaScript. 

In addition to optimizing image assets (as discussed above), tools like Imgix and Cloudflare Image Optimization allow you to easily serve cached images optimized for the user. 

6. Review performance opportunities on an ongoing basis

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.

More about the webview apps mentioned in this article

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.

Amazon App

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.