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?

Can anyone help me troubleshoot z-depth issues in Safari on mobile for my Webflow site?

Can I disable the custom CSS code on mobile devices in Webflow?

What could be causing the fixed position elements to not stay fixed on the Services and A propos pages in Webflow?

Is there an easy way to add a pop up dialog box or a page with a button for users to agree to a message before accessing a website on Webflow?

In Webflow, how can I position a <marquee> element like a normal div or HTML component?

What is a Finsweet work-around for multiple nested CMS lists in Webflow?

How can I create a rating scale with emoji in Webflow? Are there any external widgets or custom code resources that I can use for this?

How can I add custom code in Webflow to create a popup when a user exits the site?

Is there a way to fix the issue of needing to click the hamburger nav trigger twice to reopen the dropdown menu on Webflow?

What can I do to fix the issue with the map not loading properly on my Webflow site?