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?

Is there a way to incorporate a visible scrollbar for an inner window in Webflow?

What is the solution for creating nested lists in rich-text fields using jQuery?

Q: Is there a way to put images into cells of a child grid in Webflow without the grid being replaced?

Is it possible to utilize a piece of code in Webflow to create a travel book slider that fetches data from an API, similar to booking platforms like Expedia?

Can I change the default H1 font size on mobile using Webflow?

Is Custom HTML/Embedd missing from the CMS Collection Fields selector in Webflow?

Is there a way to reference CMS data in Webflow using custom JS code and run dynamic queries based on user-generated data?

Is there a way to add an .mp4 background video loop to a Div Block on a page in Webflow?

Is there a solution in Webflow that allows for the creation of an overlay window that pops up on any page the user enters and only appears once per session?

How can I remove only one element from the header on a specific page using Webflow?