Since July 2018, Google has prioritized page speed as a key factor in mobile search rankings. This change will significantly impact your business, whether positively or negatively. If your eCommerce store fails to meet Google’s acceptable response times, your search engine rankings will plummet. For stores generating millions in revenue, any decline in organic search traffic could result in losses amounting to hundreds of thousands of dollars.
You have two straightforward options to address this:
1. Optimize your site’s load times (i.e., improve page speed performance).
2. Upgrade your site to a Progressive Web Application (PWA).
Both options require time and investment, but Progressive Web Applications offer substantial additional benefits.
What are Progressive Web Applications?
A Progressive Web Application (PWA) is built using web technologies but offers a user experience similar to that of a native app. Like a website, a PWA can operate on many devices and platforms from a single codebase. Like a native app, it can be installed on the device, operated offline and in the background, and integrated with the device and other installed apps.
Progressive Web Applications come with capabilities like push notifications and offline functionality. Built on and enhanced by modern APIs, they deliver improved features, reliability, and the ability to be installed on any device. PWAs leverage the vast web ecosystem, including plugins and community support, and are easier to deploy and maintain compared to native applications. This makes building a PWA quick and straightforward.
Due to their popularity and versatility, many companies have adopted Progressive Web Applications, as they run seamlessly on both Android and iOS. Examples of top companies using PWAs include Twitter, Pinterest, Uber, TikTok, Spotify, and Jumia (a leading e-commerce site in Africa).
These PWAs are installable on the home screen, work offline from where you last left off, and offer experiences and features comparable to their native apps. To know more about PWA, refer to our blog on how PWA bridges the gap between Web and native apps.
The Progressive Web Application Approach to Speed
Progressive Web Apps (PWAs) leverage advanced technology to deliver exceptional user experiences, particularly in terms of speed. They provide a native-app-like experience in a web or mobile browser. From a technological standpoint, PWAs load quickly because they:
• Follow a separate delivery protocol
• Cache onto the user’s devices
• Operate independently of network conditions (e.g., 3G or areas with limited connectivity)
Progressive Web Applications not only meet Google’s standards for acceptable response times but also offer meaningful user experiences, including:
• Push notifications
• Offline transactions
• Home screen button
• Significant improvement in page load times (PWA load 300% faster on mobile devices)
• Enhanced security
• Storage of identity information on the device
• Storage of payment information on the device
• And much more
Progressive Web Application Caching Factors That Improve Page Speed
PWAs enhance file caching, but this does not affect the first page visit of a new visitor. In fact, the PWA installs itself during the initial visit, which may take a few extra milliseconds. PWA caching becomes beneficial only when the visitor navigates to additional pages during the session or returns later.
Therefore, if many first-time visitors are leaving your business website due to slow loading, Progressive Web Applications will not improve their speed experience. Reviewing your website traffic’s new vs. returning user metrics and page depth can help determine the percentage of visitors who will benefit from PWA caching.
You cannot guarantee that every returning visitor will benefit from PWA caching. Visitors returning to your website after a substantial period (a few days or weeks) may encounter the following scenarios:
- Limited overall space on the client device (especially on low-end mobile devices) may result in your PWA cache being evicted before the visitor returns.
- You may not support older versions of your PWA, requiring visitors with outdated cached versions to perform a forced update.
Let’s look at which caching factors aid in page speed.
Programmable Caching
Progressive Web Applications offer programmable control over caching files on client devices, providing greater flexibility compared to traditional HTTP caching configured through web server rules. This control allows front-end developers to easily manage specific and unique caching requirements. For example:
• Web pages can lazy load files needed for subsequent visits during a session, enhancing speed on consecutive pages without impacting the initial page’s load time.
• Websites can cache non-static API call responses for the duration of the session, reducing server load and maintaining fast speeds throughout the session.
A key benefit of programmable caching is the ability to seamlessly update your PWA when cached files are modified due to code changes.
Reliable Caching
For decades, HTTP caching has helped visitors experience faster speeds after their initial session. However, the unpredictable size of HTTP caches on browsers can lead to cached files being evicted before visitors return to your website. Browsers do not officially publish their HTTP cache sizes, which typically depend on the available disk space on the device. Below are the cache sizes of some of the famous browsers:
Source: Web.dev
PWAs address this unpredictability by providing programmatic access to storage information. PWAs can query the current storage space used and the amount available for your website. Additionally, browsers have published storage limits and cache eviction policies for PWA caching. This information enables PWA developers to cache files more reliably, increasing the likelihood that cached files will be available when users return.
Conclusion
PWAs enable a more reliable and controlled caching strategy for your website. However, they cannot address website slowness issues beyond the scope of caching. While a PWA should be an integral part of your overall website speed strategy, it cannot solve all speed-related problems. Understanding your website’s speed behavior and traffic patterns will help you determine the benefits of PWA caching and identify other necessary optimizations for an optimal speed experience.
FAQs
How do PWAs handle limited storage on devices?
PWAs can query the storage space available and manage cached files efficiently to ensure they are available when needed. However, limited storage on low-end devices may result in some cached files being evicted over time.
Do I need to update my PWA regularly?
Yes, regular updates are necessary to ensure the PWA remains compatible with the latest web standards and device capabilities. The PWA can be designed to update seamlessly when new versions are available.
How can I determine if a PWA is right for my website?
Analyze your website’s traffic patterns and speed behavior to understand the potential benefits of PWA caching. If a significant portion of your traffic consists of returning users, a PWA could significantly enhance their experience.
