Velo: Improving Page Performance with Manual Caching
5 min read
Caching helps to significantly speed up a page’s loading time. Most pages on Wix Sites are cached automatically. However, pages with Velo code or dynamic content may be excluded from automatic caching. In these cases, you can enable caching manually to get the benefits of faster loading times.
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. Enabling caching for this type of page may result in the wrong data being displayed to site visitors. Because of this, caching is disabled by default for all pages with added code, though you can enable it manually.
Wix analyzes the code on every page to determine if it can be cached without affecting user experience. If the code passes this test, caching on that page is enabled automatically. However, code affects how a page is displayed in complex ways. Because of this, in many cases Wix cannot tell if a page is safe to cache even if it is. For this reason, we recommend that you review all pages on your site with added code, and enable manual caching whenever possible.
When should I enable manual caching?
The main factor to consider when deciding about manual caching is whether a page is displayed in significantly different ways to different site visitors. If it is, caching may interfere with your site visitors’ experience.
Here are some examples of when you should not enable manual caching:
- Pages displaying data that changes frequently, such as exchange rates, stock market details, or weather.
See an example
- 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
- Pages that include dynamic content such as member areas, Wix Router pages, or Wix Site Search pages.
If your page doesn’t fit any of these descriptions, you should enable manual caching.
Note
If you add code to your site’s masterPage.js file, caching may be disabled for every page on your site. This is because the code in this file runs on every page and can affect how each page is displayed. 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.
Making your code cache-friendly
Here are things you can do to make caching work better on your site:
- Use the Rendering API
If your page code only needs to run in the browser, use the wix-window Rendering API to prevent server-side rendering. Formatting your code this way allows Wix to cache the page automatically.
See an example
- Invalidate the cache manually
If your page’s data only updates occasionally, you can still enable manual caching and invalidate the cache in your code whenever the data is updated.
Enable manual caching for a page
- Go to your Editor.
- Click Pages
. - Hover over the relevant page and click Show More
. - Select Settings from the menu.
- Click Advanced Settings.
- Click the Manually control caching for this page toggle. Once you have enabled manual caching, you can choose how often the page’s cache is reset.
Did this help?
|