Velo: About Page Caching

Caching helps to significantly speed up a page’s loading time. Most pages on Wix Sites are cached automatically. This includes most pages with Velo code. However, in some cases caching may cause site visitors to see outdated or incorrect content. In these cases, you can manually control or disable caching for a specific page.

What is page caching?

When a site visitor requests a page on your site, Wix caches the rendered page to a content delivery network (CDN). The next time someone requests this page, Wix displays the cached version instead of rendering the page’s elements and assets from scratch. There are distinct caches of pages generated for mobile and desktop views of the site. Wix saves page caches for as long as possible. Whenever a Wix app updates data on your site, such as updating the product catalog in Stores, the cache is cleared automatically. The page is cached again the next time a site visitor requests it.

Once a page is cached, it loads much faster than when rendering it from scratch. Therefore, the more pages on your site are cached, the faster your site is for visitors overall.

Caching limitations for pages with code

Velo code can change a page dynamically by changing site elements, fetching information from external services, or in other ways. These changes need to be rendered by Wix’s servers every time the page is requested, so they aren’t represented in cached versions. Because of this, leaving automatic caching enabled on this type of page may result in the wrong data being displayed to site visitors. If you notice this kind of problem, you should manually control or disable caching.

When should I manually control caching?

The main factor to consider when deciding about disabling automatic caching is whether a page is displayed in significantly different ways to different site visitors. If it is, automatic caching may interfere with your site visitors’ experience.

Here are some examples of pages where you should consider controlling caching manually:

  • Pages displaying data that changes frequently, such as exchange rates, stock market details, or weather.
See an example

In this example, frontend code on a page fetches exchange rates from an API and displays them in a TextBox element. A cache of this page includes exchange rate data that becomes outdated. Site visitors accessing the cached page see a flicker. This means they first see the exchange rates from the cached page, which then update to the current rates after the code runs.

Copy
  • Pages that customize the display of elements such as currency or time zone based on a site visitor’s geolocation.
  • Pages that automatically update date or time.
See an example

The code below creates a new JavaScript Date object and stores it in a variable. The code then uses the variable to update the date and time in the page’s footer text.

Copy

The value of Date changes constantly, so cached versions of the page don't display the correct date and time.

If your page doesn’t fit any of these descriptions, you should leave automatic caching enabled.

Note: Code added to your site's masterPage.js file runs on every page of your site. This code can affect how each page is displayed and may cause incorrect content to be displayed if a page is cached. We recommend checking your masterPage.js file and only including code that must run on every page. Move other code to the appropriate page files.

Control caching manually

There are a few ways to control caching manually. The option you choose depends on how frequently the data on the page is updated.

1. Disable caching for a page

If a page on your site needs to load data that changes frequently, you can disable caching for that page completely. To do this, take the following steps:

  1. Go to your editor.

  2. Click the Pages icon on the left.

  3. Hover over the relevant page and click Show More .

  4. Select Settings from the menu.

  5. Click Advanced Settings.

  6. Click the Manually control caching for this page toggle.

  7. From the drop-down menu, select Never (disable caching).

2. Limit caching to a specific time period

If the data on your page updates at regular intervals, you can set your page's cache to refresh at an interval that matches your needs. This way, you can keep the page cached as much as possible and benefit from the improved performance.

3. Invalidate the cache using code

If your page’s data only updates occasionally, you can keep automatic caching enabled and invalidate the cache in your code whenever the data is updated. Doing this invalidates the cache for the whole site, not only the page where you run the code.

Did this help?