🛠 This article explains how PageWorkers works on Single-page Applications.
Overview
Single-page applications (SPAs) provide a smooth, app-like transition between website pages by rendering the entire page content without a page reload for every user interaction. JavaScript changes the page’s content when users go to another page instead of loading new HTML from the server as a Multi-page application (MPA) does.
👉 PageWorkers optimizations work on SPA websites and deliver the same value to users and bots.
PageWorkers delivers the same experience to users and bots when they land on an SPA page. Optimizations are deployed through the PageWorkers tag to the page where a user or bot arrived on the site. When navigating to another page from the landing page (Page B in the first example below), the PageWorkers tag will not load on an SPA, so optimizations will not be deployed. This won't impact your SEO optimizations since bots never click links when crawling the web: they add every URL they find to a queue for later processing and crawl each URL from a new browser window in "direct access."
The PageWorkers tag is designed to optimize website pages on direct access. As with websites built on any framework, testing all optimizations before pushing them to production is essential to providing a consistent, predictable experience.
Best Practices for Optimizing SPA Pages
If your site is an SPA, use the following checks when optimizing with PageWorkers. If you are unsure if your site is an SPA, work with your Customer Success Manager (CSM). You can often identify SPAs by observing the site’s favicon on click navigation. If the favicon refreshes, it is likely a SPA, as with this example:
Identify which website sections remain the same as you navigate. These sections are probably not re-rendered at navigation, so use caution when adding elements with PageWorkers since they will persist when a user navigates to another page.
Only add content to the page’s main section (i.e., what’s between the header menu and the footer). Confirm the content is removed from the page as you navigate away.
Ensure navigation works after removing an element from the page’s main section.
Always preview optimizations before deploying them.
FAQs
Is this cloaking?
No. Optimizing SPA pages with PageWorkers provides the same experience to bots and users. Optimizations are deployed to the pages where bots and users land on your website. The only difference between an SPA and an MPA (multi-page application) is that the PageWorkers tag will load when users navigate from one page to another on an MPA because the framework requires the entire page content to be loaded.
Why is my optimization not loading?
If you navigate from one page to another on an SPA site, optimizations on the page you navigate to will not display since the PageWorkers tag only loads when you arrive at the page directly.
Why is an optimization from one page still showing when navigating to another?
Optimizations can persist when users navigate to another page if the optimizations are applied to a static page element. This is because the PageWorkers tag is only triggered when users directly land on the page, not with click navigation. Avoid this by identifying the elements in the pages that do not change at navigation before adding an optimization, and ensure the optimization of these elements is universal enough to be displayed on all pages.