What does the removal of the data-wf-page and data-wf-site attributes values cause when working with an exported / self-hosted Webflow site?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

When working with an exported or self-hosted Webflow site, the removal of the data-wf-page and data-wf-site attributes values can cause several issues. These attributes are added by Webflow's JavaScript code and play a crucial role in the functionality and optimization of the site. Here's what happens when these attributes are removed:

Breaks site interactions: The data-wf-page attribute is used by Webflow's JavaScript to identify the different pages on your site. This information is essential for site interactions such as navigating between pages, triggering animations, and executing custom code. If this attribute is removed, these interactions may break, resulting in a non-functional website.
Disables dynamic content: Webflow's dynamic content features, such as CMS collections and dynamic lists, rely on the data-wf-page attribute to dynamically load content from the CMS and render it on the page. Removing this attribute will prevent the dynamic content from being displayed correctly, rendering the CMS-powered sections of your site useless.
Affects style inheritance: The data-wf-site attribute is responsible for managing the global styles and settings applied to your site. It ensures that styles defined in the Webflow Designer are properly inherited by the exported code. Removing this attribute can lead to inconsistencies in the appearance and layout of your site since the inherited styles won't be applied correctly.
Breaks Webflow's optimization features: Webflow provides various optimization features like lazy loading, asset caching, and preloading to enhance the performance of your website. These features heavily rely on the data-wf-page and data-wf-site attributes to function properly. Removing these attributes can cause the loss of these optimization benefits, resulting in slower site load times and reduced overall performance.

To ensure the proper functioning and optimization of your exported or self-hosted Webflow site, it is crucial to avoid removing or modifying the data-wf-page and data-wf-site attributes values. These attributes are integral to the functioning of Webflow's JavaScript code and enable the full potential of the platform's powerful features.

Additional Questions:

What are the benefits of using Webflow's dynamic content features?
How can I optimize the performance of my Webflow site?
What are some alternative ways to build websites without using Webflow?

Why aren't the in-page links working when I'm on other pages of the website in Webflow?

Can anyone help me customize the 'submit' button on my form on Webflow?

Does anyone have any custom code for creating a local clock and clock with UTC timezone in Webflow that displays the time in both 24 and 12 hour format?

Is there a way to fix the issue of the header overlapping certain elements in a section and the footer in Webflow?

What is an issue with Webflow where users are unable to remove the Bold/Text span from a formatted link block, resulting in a messy canvas?

Can Webflow's folder protection be customized to use a different authentication process for user access?

How can I create unique embed codes for each page in Webflow and have a different figma prototype preview on each page?

How can I add a script after the body tag on my Webflow site?

Can Webflow create a database to automatically generate pages with the same images from a gallery when clicked on?

Can you help me upload and implement a JavaScript audio player in Webflow that requires three files (JavaScript, flash, and GIF) to be in the same folder?