Improving your site's performance is an important part of the creation process, as well as ongoing maintenance. The guidelines in this article can help to enhance your visitors' experience, improving ...

Site Performance: Best Practices

Enhance your site's performance by optimizing loading times and improving visitor experience. This article provides essential guidelines on how to manage elements like images, videos, and third-party apps to ensure faster loading and better responsiveness. Learn to prioritize content above the fold, use optimized image formats, and streamline your mobile site for improved performance. Follow these best practices to create a smoother, more engaging experience for your visitors.

Optimize text on your site to improve the visitor experience. Font types, effects, and formatting can impact your site's performance, so we recommend following our guidelines to ensure you can display...

Site Performance: Optimizing Your Text

Optimize your site's text to enhance visitor experience and performance. Discover the impact of different font types—system, custom, and Wix fonts—on loading speed. Learn to limit font usage to three or fewer for better performance and consistency. Understand the importance of avoiding image text and using fallback fonts in the Studio Editor to improve loading times and SEO. By following these guidelines, you can create a smoother browsing experience for your visitors.

<div data-component-type="text"><div>Optimize text on your site to improve the visitor experience. Font types, effects, and formatting can impact your site's performance, so we recommend following our guidelines to ensure you can display important information without compromising on function.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tip:</div><div class="info-content"><div>Having meaningful text above the fold also ensures that visitors have content to read while the rest of the site loads.  </div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="different-types-of-fonts" level="3">Different types of fonts</h2></div><div data-component-type="text"><div>There are a few font types that you can use across your site. Depending on the type and download requirements, they vary in how they affect your site's loading speed and performance. The three font types are:</div></div><div data-component-type="text"><ul>
  <li><strong>System fonts:</strong> These are common fonts that most likely already exist on your and your visitors' device systems. As they are included in most systems, they do not need to be downloaded to appear on your visitors' devices, and therefore do not impact your site's performance.</li>  <li><strong>Custom fonts:</strong> Custom fonts are fonts that you can upload from any third party to use on your Wix site. These fonts are a personal way to enrich your site experience, but they require download from the server to appear in your visitor's browser. Therefore, these fonts can impact your site's performance.</li>  <li><strong>Fonts available from Wix:</strong> When you build and edit your site with Wix, you may notice that we offer a variety of text fonts. Some of these are system fonts while others act as custom fonts, and they affect your site's loading speed accordingly.</li></ul></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">To sum it up:</div><div class="info-content"><ul>
  <li>System fonts ultimately load faster than custom fonts, as they already exist in the system. This therefore saves bandwidth by reducing the number of requests needed to load your site. </li>  <li>Since system fonts have less of an impact on your site's speed, we recommend using them in place of custom fonts where possible.</li></ul></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="number-of-fonts" level="3">Number of fonts</h2></div><div data-component-type="text"><div>When using fonts across your site, it's important to keep in mind that having multiple different fonts and font types can impact the loading time and overall performance. </div></div><div data-component-type="text"><div>While system fonts do not require download, custom fonts need to be downloaded from the server in order to be displayed on your page. Different custom fonts may also have different download speeds, which can further affect your site's loading time.</div></div><div data-component-type="text"><div>We recommend keeping the number of fonts (both system and custom) on your page at 3 and below, as this helps to keep your site running smoothly. Consistency in fonts (and colors) also helps to reinforce your brand, and keep your site's look consistent.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="font-formatting-and-animation" level="3">Font formatting and animation</h2></div><div data-component-type="text"><div>Different font weights, such as bold, underline, or italics, may also impact your site's loading time. Try to keep the number of font weights on a page at 3 or below by using them for specific purposes (i.e., highlighting an area of text on your page).</div></div><div data-component-type="text"><div>Additionally, animated text can have an impact on your text's readability and SEO. This is because animated text cannot be read by search engines. We recommend using regular text for meaningful content on your site, and avoiding overuse of reveal animations above the fold. </div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="images-of-text" level="3">Images of text</h2></div><div data-component-type="text"><div>Avoid images that contain text where possible. Image text may appear blurry while the image is loading, and cannot be translated or crawled by search engines. Ensure that you're using standard text where possible across your site to maintain your site performance and SEO ranking.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tip:</div><div class="info-content"><div>As an alternative, we recommend <a data-composite="true" href="https://support.wix.com/en/article/optimizing-your-images-and-galleries-for-seo-alt-text" target="">adding alt text to your images</a>. This allows search engines and screen readers to &quot;read&quot; the description of the image. </div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="fallback-fonts-in-the-studio-editor" level="3">Fallback fonts in the Studio Editor</h2></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Note:</div><div class="info-content"><div>This feature is only available in the Studio Editor.</div></div></div></div><div data-component-type="text"><div>If you're using heavy custom fonts on a <a data-composite="true" href="https://support.wix.com/en/article/wix-studio-about-the-studio-editor" target="">Studio Editor</a> site, you can enable default fallback fonts. Fallback fonts load faster, and are temporarily displayed on the live site while the custom fonts download in the background. </div></div><div data-component-type="text"><div>Fallback fonts can optimize page performance by reducing the site's LCP (Largest Contentful Paint), which may improve the <a data-composite="true" href="https://support.wix.com/en/article/site-performance-about-core-web-vitals" target="">Core Web Vitals and Google Search ranking</a>. Additionally, displaying text content faster can enhance the experience for visitors while they browse the site. <a data-composite="true" href="https://support.wix.com/en/article/studio-editor-working-with-site-typography#enabling-fallback-fonts" target="">Learn how to enable fallback fonts</a></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Good to know:</div><div class="info-content"><ul>
  <li>Fallback fonts improve the loading time if the largest element above-the-fold is a<strong> </strong>text element.</li>  <li>When you enable fallback fonts, it adds a &quot;swap&quot; value to the font-display CSS descriptor. This descriptor determines how a font is displayed based on when it is downloaded and ready to use.</li></ul></div></div></div>

Images and videos are key elements for engaging site visitors, making your content visually appealing and memorable. However, optimizing your media is crucial to ensure faster loading times and a smoo...

Site Performance: Optimizing Site Media

Discover how to optimize images and videos on your Wix site to enhance performance and user experience. This article provides essential tips for selecting the right formats, uploading high-quality visuals, and organizing galleries effectively. Learn to improve loading times while maintaining visual appeal, ensuring your site engages visitors without compromising speed. By following these guidelines, you can create a visually stunning and efficient website.

<div data-component-type="text"><div>Images and videos are key elements for engaging site visitors, making your content visually appealing and memorable. However, optimizing your media is crucial to ensure faster loading times and a smooth user experience. Follow these tips and guidelines to enhance your site’s performance while maintaining the quality of your visuals.</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/50f70a50-058e-44ed-a4da-8b9312f94060/2025/05/27/e756fa40-c292-4425-91e4-e16787960aca/99749c26-db8a-4954-9efa-a2f59202ebdb.png" alt="A live Wix site showing images above the fold." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="optimizing-images-on-your-site" level="3">Optimizing images on your site</h2></div><div data-component-type="text"><div>Images are an excellent way to showcase your content, such as photography, products, or blog visuals. By optimizing images, you can improve loading speed and overall performance.</div></div><div data-component-type="text"><div>Select an option to learn more about our guidelines for optimizing images.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Choose the right format</h4><div class="collapsible-content"><div>Wix allows you to upload <a data-composite="true" href="https://support.wix.com/en/article/wix-media-supported-media-file-types-and-file-sizes" target="">a wide range of media file types</a> directly to your site, like images, video, audio, icons, vector art (SVG) and more. When you upload an image to your site, it is automatically converted to AVIF format, as it's better optimized for site performance.</div><div><br /></div><ul>
  <li><strong>Images: </strong>AVIF is a new type of image file that's better than JPEG and is approximately 50% smaller than WebP. This makes AVIF images load faster on your live site. AVIF can also handle a wide range of colors, making images look even more realistic. Wix automatically compresses your images using AVIF on your live site. </li></ul><div><br /></div><ul>
  <li><strong>SVG images: </strong>SVG graphics (also known as vector art) use mathematical equations for drawing graphics, as opposed to pixel grids used in other raster image formats. This makes them lighter, which means they generally load at a higher speed. It also means that the image's quality and sharpness is not affected by resizing. We recommend using vector art for decorative shapes and business logos. </li></ul><div><br /></div><ul>
  <li><strong>GIFs: </strong>While GIFs are a popular format for showcasing animated content, modern video encoding formats have both a smaller size and better quality. We therefore recommend using video files for animated or moving content instead of GIFs.</li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Upload the best image quality</h4><div class="collapsible-content"><ul>
  <li>Use high-resolution images (minimum 2560x1440 pixels) for quality and clarity.</li>  <li>Compress files larger than 25MB before uploading using external tools.</li>  <li>Replace background images with static elements like shapes or colored sections to reduce load times.</li>  <li>Use the <a data-composite="true" href="https://www.wix.com/wixel/photo-editor/image-resizer" target="_blank">Wix image resizer</a> to adjust images to recommended sizes before uploading.</li></ul></div></div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/50f70a50-058e-44ed-a4da-8b9312f94060/2025/05/27/4332201f-6ee5-4d39-a82d-b8636baa42fe/3c2154f2-eaa8-4b58-b458-726a86a2defe.png" alt="A live Wix site showing images above the fold." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="organizing-galleries-on-a-site" level="3">Organizing galleries on a site</h2></div><div data-component-type="text"><div>Wix offers various gallery options to showcase multiple media files. Proper organization and placement of galleries can significantly impact your site’s speed and effectiveness. Opt for a single gallery with multiple media items rather than using multiple galleries on one page to avoid overloading. </div><div><br /></div><div>Allow your gallery to load incrementally with a <a data-composite="true" href="https://support.wix.com/en/article/wix-pro-gallery-enabling-and-customizing-a-load-more-button" target="">&quot;Load More&quot; button</a>, which improves interaction while managing performance. Place galleries <strong>below the fold</strong> (content visitors see after scrolling). This lets text and CTAs above the fold load quickly, keeping visitors engaged while your gallery content is still loading.</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/50f70a50-058e-44ed-a4da-8b9312f94060/2025/05/27/599f366f-3a58-49b3-84be-eafad6349a4e/ec6266b8-30fe-4a66-8f0e-20c3cb2616cd.png" alt="A live Wix site showing images above the fold." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="optimizing-videos-on-a-site" level="3">Optimizing videos on a site</h2></div><div data-component-type="text"><div>Videos are great for delivering valuable content, such as tutorials, promotional materials, or product features. Optimizing video playback is essential to prevent performance issues. </div><div><br /></div><div>Host videos with <a data-composite="true" href="https://support.wix.com/en/article/wix-video-about-wix-video" target="">Wix Video</a> for built-in optimization and playback performance. Embedded videos (YouTube, Vimeo, etc.) are delivered via iFrames and cannot be optimized by Wix. Limit their use and place them below the fold.</div><div><br /></div><div>Avoid using videos as backgrounds, as they can slow the initial page load. Switch to static placeholders like images or text instead. </div><div><br /></div><div>Limit the number of videos displayed on a single page. For multiple videos, create a dedicated page and link to it using buttons like &quot;See More Videos&quot; to keep your homepage lightweight.</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/50f70a50-058e-44ed-a4da-8b9312f94060/2025/05/27/45644fc2-4cff-4fce-99fa-4a29a2f5ad72/5e2c039f-d695-4c8a-92d4-3282640ea0c6.png" alt="A live Wix site showing images above the fold." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="common-issues-and-solutions" level="3">Common issues and solutions</h2></div><div data-component-type="heading"><h2 id="" level="4">Blurry images</h2></div><div data-component-type="text"><div>If images appear blurry:</div><ul>
  <li>Ensure they are high resolution (2560x1440 pixels or higher).</li>  <li>Use appropriate formats (AVIF, WebP, or JPEG).</li>  <li>Refrain from uploading screenshots, as they often have lower resolution.</li>  <li>Check the <a data-composite="true" href="https://support.wix.com/en/article/wix-pro-gallery-setting-the-image-quality-for-gallery-images" target="">Image Sharpening</a> feature in the Wix Editor to enhance clarity.</li></ul></div><div data-component-type="heading"><h2 id="" level="4">Slow homepage loading</h2></div><div data-component-type="text"><div>Common causes of slow homepage loading include excessive images or videos above the fold and overloaded widgets. To resolve:</div><ul>
  <li>Simplify design by reducing elements on the homepage.</li>  <li>Add text or static images above the fold.</li>  <li>Use <a data-composite="true" href="https://support.wix.com/en/article/site-performance-how-wix-improves-a-sites-loading-time#lazy-loading-images" target="">lazy loading</a> for galleries.</li></ul></div><div data-component-type="heading"><h2 id="" level="4">Videos loading slowly</h2></div><div data-component-type="text"><div>To enhance video load times:</div><ul>
  <li>Compress videos before uploading.</li>  <li>Use Wix Video for optimized hosting.</li>  <li>Replace videos above the fold with static elements or lightweight placeholder content.</li></ul></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tips:</div><div class="info-content"><ul>
  <li><strong>Test your site speed:</strong> Use <a data-composite="true" href="https://support.wix.com/en/article/understanding-your-site-speed-dashboard" target="">Wix Site Speed dashboard</a> to identify performance issues and improve overall speed.</li>  <li><strong>Plan for navigation efficiency:</strong> Keep critical elements above the fold lightweight for fast loading.</li>  <li><strong>Use galleries wisely:</strong> Limit each page to one gallery, and enable loading buttons for extensive media files.</li>  <li><strong>Monitor mobile optimization:</strong> Regularly adjust your site’s mobile design using the dedicated Wix Mobile Editor for smaller screens.</li></ul></div></div></div>

Cache your site pages to speed up their loading time. When a page is cached, its content and elements are not rendered from scratch for each visitor. Instead, most visitors see a saved (cached) versio...

Site Performance: Caching Pages to Optimize Loading Speed

Discover how to cache your site pages to enhance loading speeds and improve user experience. This article explains the automatic caching process, how it works through a content delivery network (CDN), and the benefits for site performance metrics. You’ll also learn how to manually adjust caching settings for individual pages, enabling you to optimize content delivery based on your needs.

<div data-component-type="text"><div>Cache your site pages to speed up their loading time. When a page is cached, its content and elements are not rendered from scratch for each visitor. Instead, most visitors see a saved (cached) version of the page that loads much faster. </div></div><div data-component-type="text"><div>Caching is automatically enabled for almost all site pages. If needed, you can manually adjust caching settings for individual pages.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="how-caching-works" level="3">How caching works</h2></div><div data-component-type="text"><div>A cache is a temporary storage area where versions of your pages are saved to a content delivery network (CDN). Wix uses server-side rendering (SSR) to create these cached versions. </div></div><div data-component-type="text"><div>When a visitor requests a page for the first time, Wix caches it automatically. Subsequent visitors receive the saved version from the CDN. This prevents the page's elements and assets from having to load from scratch.</div></div><div data-component-type="text"><div>Cached versions are typically stored for up to a week. After a week, the cache is cleared and the page is removed from the CDN. The next time a visitor loads the page, it is cached again. Page caches are also cleared every time you publish your site.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="multiple-cached-versions-for-different-visitors" level="3">Multiple cached versions for different visitors</h2></div><div data-component-type="text"><div>Distinct cached copies of the same page may be created based on your visitors' geographic locations, device types, and other parameters.</div></div><div data-component-type="text"><div>When a visitor loads a page, a cached version is created for their specific parameters. Future visitors with the same parameters see that cached version and experience faster loading times. Visitors with different parameters trigger a new cached version, optimized for future visitors with those specific parameters.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="caching-and-site-performance-metrics" level="3">Caching and site performance metrics</h2></div><div data-component-type="text"><div>Cached pages may help improve your overall site performance, including metrics like LCP (largest contentful paint) and FCP (first contentful paint). This can improve your site's Core Web Vitals score and overall search results ranking.</div></div><div data-component-type="text"><div>Because most of the site is already loaded on the Wix servers, your visitors' devices don't need to do as much processing. The site is also rendered from the nearest geographical CDN to the device, which can encourage faster loading.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="enabling-and-disabling-caching-on-site-pages" level="3">Enabling and disabling caching on site pages</h2></div><div data-component-type="text"><div>While caching is enabled automatically for most pages, you can control caching settings for individual pages when needed. For example, you may want to disable caching for pages that retrieve data from external sources, or pages that display frequently changing information.</div></div><div data-component-type="tabs"><div class="tabs-wrapper"><div class="headings-wrapper"><div data-slug="Wix-Editor" class="tab-heading heading-0">Wix Editor</div><div data-slug="Studio-Editor" class="tab-heading heading-1">Studio Editor</div></div><div class="tab-contents-wrapper"><div class="tab-content"><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click <strong>Pages &amp; Menu </strong><img data-composite="true" src="https://lh6.googleusercontent.com/AtygSo0t8UbmzaDyGuuGCwKMawrU9neH9iCg6Bpzdl1yByfa0mTWjo15cCeAP3Zo5D9NtmaTo8f6go6RArSwE_JTOl8p5Sl5CvyfZDZgfsLRMHS6989bjlBOpisK0sRVGtWsqxEhXfxoz6_2esqcISTQdRmI0FqAZFgw0iVycBHbdZH1vAZDjRWv" /> on the left side of the editor. </li>  <li>Hover over the relevant page and click the <strong>More Actions</strong> icon <img data-composite="true" src="https://lh6.googleusercontent.com/bcuV7dDFTNXvUY41EfsgNuXftk1_07pIQgnFt6GuTN6-vCP_WN3bY1r_8REkqH6Ltc-Qd4D5PH83GNQVRmxAELHNLe0R34P8ugeFi7Ew4u3vugfEgzAMcFIFujrHnchBFY5o1-ii165TnqyIBpuNvgu9HrwnArPE6PoHTVUzR7r8au_dYWXlc7KT" />.</li>  <li>Click <strong>Settings</strong>.</li>  <li>Click <strong>Advanced Settings</strong>. </li>  <li>Click the <strong>Manually control caching for this page</strong> toggle and choose what you want to do:
    <ul>
      <li><strong>Enabled:</strong> You manually control the caching for this page. Under <strong>How often do you want to reset this page's cache?</strong>, choose how frequently your page cache resets from the dropdown menu, or select <strong>Never (disable caching)</strong> to prevent the page from being cached altogether.</li>      <li><strong>Disabled:</strong> The page will be cached automatically.</li>    </ul>  </li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/50f70a50-058e-44ed-a4da-8b9312f94060/2025/04/01/63ca9d70-cf6c-4cbc-9082-e87f8346683b/fafc8eda-2ffc-4043-938a-36c1e5dc3f38.png" alt="The advanced settings of a page in the Wix Editor." /></div></div></div><div class="tab-content"><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click <strong>Pages</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2021/11/02/ca6bf070-4d00-41dc-beea-c88b350df02d/abd8a7a8-abb8-4099-a8b1-3f9966dcdde0.png" /> on the left side of the editor.</li>  <li>Hover over the relevant page and click the <strong>More Actions</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/12/30/173b5a92-644e-43c5-8eb1-f74fa4050309/cafce6d8-4081-4d5a-8ec4-6cffcb297c4a.png" />.</li>  <li>Click <strong>Settings</strong>.</li>  <li>Click <strong>Advanced Settings</strong>. </li>  <li>Click the <strong>Manually control caching for this page</strong> toggle and choose what you want to do:
    <ul>
      <li><strong>Enabled:</strong> You manually control the caching for this page. Under <strong>How often do you want to reset this page's cache?</strong>, choose how frequently your page cache resets from the dropdown menu, or select <strong>Never (disable caching)</strong> to prevent the page from being cached altogether.</li>      <li><strong>Disabled:</strong> The page will be cached automatically.</li>    </ul>  </li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/7f40210b-c6c2-4c15-bbcf-5bb78a69d10e/2025/01/08/0c73bdad-25c9-40da-b94e-fec812e7738f/670b708e-d947-4491-a6c3-351ddcebee98.png" alt="The advanced settings of a page in the Wix Editor." /></div></div></div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="adjusting-site-wide-performance-settings" level="3">Adjusting site-wide performance settings</h2></div><div data-component-type="text"><div>Improve loading time and create the best experience for your site visitors by adjusting your site's performance settings. By default, SWR (stale while revalidate) is enabled so site visitors see cached content while fresh data is fetched in the background and saved to the cache for future use. </div></div><div data-component-type="text"><div>If you have upgraded your site, you can disable SWR to have your site load fresh content instead of cached data.</div></div><div data-component-type="text"><div>You can also clear all pages from the CDN cache to ensure that your next site visitors receive fresh content instead of cached data.</div></div><div data-component-type="heading"><h2 id="" level="4">To adjust site-wide performance settings:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://www.wix.com/my-account/site-selector/?buttonText=Manage%20Settings&amp;title=Select%20a%20Site&amp;autoSelectOnSingleSite=true&amp;actionUrl=https://www.wix.com/dashboard/%7b%7bmetaSiteId%7d%7d/settings" target="_blank">Go to Settings</a> in your site's dashboard.</li>  <li>Type <strong>Website Performance Settings </strong>in the search bar and select it from the results. </li>  <li>Choose what to do next:
    <ul>
      <li><strong>Enable or disable SWR: </strong>Click the toggle next to <strong>Enable SWR to show cached content while updating</strong> toggle:
        <ul>
          <li><strong>Enabled: </strong>Visitors see cached content while fresh data is fetched in the background. This means visitors will see your content faster, while updates are retrieved for future requests.</li>          <li><strong>Disabled: </strong>Visitors won't see cached content, which means they might have to wait for fresh data to load.</li>        </ul>      </li>      <li><strong>Clear all pages from the CDN cache: </strong>Ensure the next visitor only sees fresh (not cached) content by clicking <strong>Clear Site Cache</strong>. This deletes cached pages from the CDN.<br />
<strong>Note:</strong> The first visitor after clearing the cache may experience slightly slower loading times.</li>    </ul>  </li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/50f70a50-058e-44ed-a4da-8b9312f94060/2025/04/01/8d255d30-8106-4150-8af8-05dd7664f4db/90c9abbf-fabe-479a-9781-9abde933a7b4.png" alt="A screenshot of website performance settings in your Wix site dashboard." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="faqs" level="3">FAQs</h2></div><div data-component-type="text"><div>Click below to read answers to common questions about page caching.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Are there any pages that cannot be cached?</h4><div class="collapsible-content"><div>The following pages are always rendered fresh for each visitor and cannot be cached:</div><ul>
  <li>Pages accessed by logged-in site members</li>  <li>Wix Site Search result pages</li>  <li>Pages you have set to private (i.e. with a password)</li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">How does caching affect pages with code?</h4><div class="collapsible-content"><div>Pages with code are cached automatically. If your code retrieves data from external sources or needs to fetch fresh information on each visit, you can <a data-composite="true" href="https://dev.wix.com/docs/develop-websites/articles/best-practices/caching/control-page-caching-manually" target="">manually disable caching</a> for that page.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">When is the site's cache cleared?</h4><div class="collapsible-content"><div>The cache is cleared automatically every week, or at the custom interval you specify for individual pages. It is also cleared every time you publish your site.</div></div></div></div>

When you check your site on Google PageSpeed Insights, you may be prompted to remove unused JavaScript files. Some of these files may come from third-party code that you have added, whereas others are...

Site Performance: Removing Unused JavaScript

Discover how to manage unused JavaScript files on your Wix site as you analyze your performance with Google PageSpeed Insights. While some files are essential for your site's structure and cannot be removed, you can identify and optimize third-party JavaScript that may be affecting your loading speed. Learn to enhance your site's performance by reviewing and managing these files effectively.

<div data-component-type="text"><div>When you check your site on Google PageSpeed Insights, you may be prompted to remove unused JavaScript files. Some of these files may come from third-party code that you have added, whereas others are a vital part of your Wix site. </div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="javascript-files-on-wix-sites" level="3">JavaScript files on Wix sites</h2></div><div data-component-type="text"><div>The PageSpeed Insights results page may display opportunities to remove files and unused JavaScript. However, some files are part of the structure of your Wix site. Any code delivered through <a data-composite="true" href="http://static.parastorage.com/" target="_blank">static.parastorage.com</a> is packaged by Wix, and therefore crucial to the site's structure.</div></div><div data-component-type="text"><div>We are consistently optimizing these files, and using methods such as code splitting to ensure ideal chunk sizes. While Google may advise you to remove these files, they are a vital part of the site and you therefore cannot modify, manipulate, or delete them. <a data-composite="true" href="https://web.dev/unused-javascript/" target="_blank">Learn more about unused JavaScript and PageSpeed Insights</a></div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/08/05/d79536b3-e955-4e79-a918-f5e76ef222c9/84aa453f-0479-4397-82bf-c330e8305fd5.png" alt="The PageSpeed insights. Google has flagged some unused JS, which has been packaged by Wix." /></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Note:</div><div class="info-content"><div>When you add apps and components to a page, JavaScript files are automatically added for them. As this can affect the loading speed, we recommend spacing apps and components between different site pages where possible. <a data-composite="true" href="https://support.wix.com/en/article/site-performance-designing-a-performance-focused-website" target="">Learn about other ways to create a performance-focused site</a></div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="javascript-files-from-third-parties" level="3">JavaScript files from third-parties</h2></div><div data-component-type="text"><div>As well as essential files from your Wix site, Google may also flag other unused JavaScript, which can come from third-party code that is not optimized. We recommend identifying these files, and reviewing them to check whether they are necessary to your site.  </div></div><div data-component-type="text"><div>If you find that the files are no longer necessary, you can remove them, or replace them with an optimized alternative. <a data-composite="true" href="https://web.dev/unused-javascript/" target="_blank">Learn more about removing unused JS files</a></div></div>

When applying media background (image or video) to a page, section or element, site visitors might see a quick flash of color while the background is loading. Usually, the background media loads fast ...

Site Performance: Seeing a Flash of Color As Elements Load

Learn how to minimize the flash of color that may appear while loading media backgrounds on your Wix site. By changing the background color of pages, sections, or slides to match your images or videos, you can enhance the user experience. This article guides you through the steps to customize background colors in the Wix Editor, ensuring a seamless transition for your visitors.

<div data-component-type="text"><div>When applying media background (image or video) to a page, section or element, site visitors might see a quick flash of color while the background is loading. </div></div><div data-component-type="text"><div>Usually, the background media loads fast enough that site visitors don't notice the background color. To make this flash of color less visible, you can change the background color of the affected elements.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="causes-of-color-flashes" level="3">Causes of color flashes</h2></div><div data-component-type="text"><div>It can take longer for image and video backgrounds to load on the live site. If a site visitor is using a slower internet connection, or if the background media is large, a flash of color may appear before the image or video loads.</div></div><div data-component-type="text"><div>Changing the background color of pages and elements can make this flash less noticeable. We recommend choosing a color as similar as possible to the video or image to improve the experience for site visitors. </div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="changing-the-background-color-of-site-pages" level="3">Changing the background color of site pages</h2></div><div data-component-type="text"><div>If you have added a background image or video to a page in your Wix Editor site, you can change the background color from the Site Design panel.</div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Using the Studio or Harmony Editor?</div><div class="info-content"><div>It is not possible to add media to a page background in these editors, so you don't need to worry about this step.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To change the page background color:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to the page in your editor</a>.</li>  <li>Click <strong>Site Design </strong><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2022/02/01/91b3914b-14b7-40de-88e5-3a5dd4f8f0e1/ceebff03-aa14-45d9-9681-645cfbb8caf4.jpg" /> on the left side of the editor.</li>  <li>Click<strong> Page background</strong>.</li>  <li>Click the flap at the top left of the background image preview.</li>  <li>Select the shade you want from your <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-using-and-customizing-your-color-theme" target="">site's theme colors</a>, or apply / create a custom color under<strong> My colors</strong>.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/12/10/e04ace47-6626-4669-ba99-047f7d58a62e/7f1b4012-c636-4360-bac8-d92786b50892.jpg" alt="The pahe background is open in site styles. The cursor is clicking the color flap." /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Good to know:</div><div class="info-content"><div>You can apply this color to all pages with the same the image / video background by clicking <strong>Apply to Other Pages </strong>at the bottom of the panel.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="changing-the-background-color-of-sections-strips-and-cells" level="3">Changing the background color of sections, strips, and cells</h2></div><div data-component-type="text"><div>If you have added an image or video background to a section, you change the color from your editor to match the media's color scheme. Depending on your site builder, you can also change the color of strips or grid cells.</div></div><div data-component-type="tabs"><div class="tabs-wrapper"><div class="headings-wrapper"><div data-slug="Wix-Editor" class="tab-heading heading-0">Wix Editor</div><div data-slug="Studio-Editor" class="tab-heading heading-1">Studio Editor</div><div data-slug="Wix-Harmony-Editor" class="tab-heading heading-2">Wix Harmony Editor</div></div><div class="tab-contents-wrapper"><div class="tab-content"><div data-component-type="text"><div>When building a site with the Wix Editor, you can change the background color of sections and strips on a page.</div></div><div data-component-type="heading"><h2 id="" level="4">To change a section's background color:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Right-click the relevant section. </li>  <li>Select <strong>Change Background</strong>.</li>  <li>Click the flap at the top left of the background image preview.</li>  <li>Select the shade you want from your <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-using-and-customizing-your-color-theme" target="">site's theme colors</a>, or apply / create a custom color under<strong> My colors</strong>.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/12/10/f3bf211c-4ad9-4fd0-877e-55a6947fd6ab/d6704910-2630-4977-90ae-b2d87fde7116.jpg" alt="The color picker is open for the background settings of a section in the Wix Editor." /></div></div><div data-component-type="heading"><h2 id="" level="4">To change a strip's background color:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click the strip.</li>  <li>Click <strong>Change Background</strong>.</li>  <li>Click the flap at the top left of the background image preview.</li>  <li>Select the shade you want from your <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-using-and-customizing-your-color-theme" target="">site's theme colors</a>, or apply / create a custom color under<strong> My colors</strong>.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/12/10/05dc2fd1-d522-4d76-8fdf-e39a05a532ed/3aed3151-754f-4b4f-9208-8ee8afb44447.jpg" alt="The color picker is open for the background settings of a strip in the Wix Editor." /></div></div></div><div class="tab-content"><div data-component-type="text"><div>With the Studio Editor, you can change the background color of sections from the Inspector panel. If you have a grid section, you can also change the background color of each cell. </div></div><div data-component-type="heading"><h2 id="" level="4">To change a section's background color:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Select the relevant section on the page.</li>  <li>Click the <strong>Open Inspector</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/06/14/2dd40586-1f79-4376-aee0-387212a246bb/dfed4075-2e24-4ad8-a7c4-8857038d5f16.png" /> at the top right of the editor.</li>  <li>Click the color box under <strong>Color</strong>.</li>  <li>Select the shade you want from the theme colors, or add / apply a custom color.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/12/10/6c3a6772-7a99-4427-88c2-0df2b0090ece/ededb826-6815-488b-afa1-9a9ba5edc1da.jpg" alt="The inspector panel is open on a section. The cursor is selecting a color from the picker." /></div></div><div data-component-type="heading"><h2 id="" level="4">To change a cell's background color:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Select the relevant cell in the section.</li>  <li>Click the <strong>Open Inspector</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/06/14/2dd40586-1f79-4376-aee0-387212a246bb/dfed4075-2e24-4ad8-a7c4-8857038d5f16.png" /> at the top right of the editor.</li>  <li>Click the color box under <strong>Background</strong>.</li>  <li>Select the shade you want from the theme colors, or add / apply a custom color.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/12/10/e4ad420f-7337-4105-ad39-f46a994b777b/7b1f25bc-b3c7-4899-9fb0-75c6f689c265.jpg" alt="The inspector panel is open on a cell. The cursor is selecting a color from the picker." /></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Note:</div><div class="info-content"><div>It is not possible to add an image or video to a cell background. However, you can change the color to match media you attach to the cell.</div></div></div></div></div><div class="tab-content"><div data-component-type="text"><div>When building a site with the Wix Harmony Editor, you can change the background color of sections on your page. If your section is divided into a grid, you can also change the background color of specific cells.  </div></div><div data-component-type="heading"><h2 id="" level="4">To change a section's background color:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click the relevant section.</li>  <li>Click <strong>Replace Background</strong> on the action bar. </li>  <li>Click the <strong>Color</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/50f70a50-058e-44ed-a4da-8b9312f94060/2025/11/05/5813e8c9-5654-4379-8112-b0428ef1dbe3/07a89eb2-565a-428c-becb-26137249e556.png" />.</li>  <li>Click the color circle.</li>  <li>(In the Color Picker) Choose one of your brand colors or a custom color.<br />
<strong>Tip: </strong>Click the <strong>Eyedropper</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/11/04/301b32b2-1d60-4582-9915-2f8ac253763e/9d1c12b3-0fae-4d99-83ba-fb9a0f865558.png" /> to get a specific color from your page.</li></ol></div><div data-component-type="heading"><h2 id="" level="4">To change a cell's background color:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Click the relevant section.</li>  <li>Click the relevant cell. </li>  <li>Click <strong>Replace Background</strong> on the action bar. </li>  <li>Click the <strong>Color</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/50f70a50-058e-44ed-a4da-8b9312f94060/2025/11/05/5813e8c9-5654-4379-8112-b0428ef1dbe3/07a89eb2-565a-428c-becb-26137249e556.png" />.</li>  <li>Click the color circle.</li>  <li>(In the Color Picker) Choose one of your brand colors or a custom color. <br />
<strong>Tip: </strong>Click the <strong>Eyedropper</strong> icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2025/11/04/301b32b2-1d60-4582-9915-2f8ac253763e/9d1c12b3-0fae-4d99-83ba-fb9a0f865558.png" /> to get a specific color from your page.</li></ol></div></div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="changing-background-color-of-slides" level="3">Changing background color of slides</h2></div><div data-component-type="text"><div>Slideshows are an eye-catching, interactive way to showcase media and content on a site. <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-customizing-the-design-of-your-slideshow" target="">Align the background color of slides</a> with their media to keep a professional, cohesive look. </div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Using the Studio Editor?</div><div class="info-content"><div>It is not possible to add media to a slideshow item background or <a data-composite="true" href="https://support.wix.com/en/article/studio-editor-request-designing-individual-slideshow-items" target="">customize slideshow items individually</a>.</div></div></div></div><div data-component-type="heading"><h2 id="" level="4">To change a slide's background color:</h2></div><div data-component-type="text"><ol>
  <li><a data-composite="true" href="https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26" target="_blank">Go to your editor</a>.</li>  <li>Select the slideshow on the page.</li>  <li>Click the blue arrows to navigate to the relevant slide.</li>  <li>Click <strong>Change Slide Background</strong>.</li>  <li>Click the flap at the top left of the background image preview.</li>  <li>Select the shade you want from your <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-using-and-customizing-your-color-theme" target="">site's theme colors</a>, or apply / create a custom color under<strong> My colors</strong>.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/12/10/fefc5619-2754-4725-8cb6-197898cf2341/fa27dd04-5d91-4035-9695-703e228ccf86.jpg" alt="The color picker is open for the background settings of a slide in the Wix Editor." /></div></div>

Improving your site's performance is essential for providing a smooth user experience. By optimizing how your CMS (Content Management System) datasets load and display content, you can enhance page sp...

Site Performance: CMS

Enhance your site's performance and user experience by optimizing your CMS datasets. Discover how to adjust the 'Items per load' setting to control content display, add 'Load More' buttons or pagination for better navigation, and implement deferred loading to speed up initial page rendering. Learn to fetch only connected fields to improve loading times and manage content visibility effectively. Follow these strategies to create a smoother, faster site.

<div data-component-type="text"><div>Improving your site's performance is essential for providing a smooth user experience. By optimizing how your <a data-composite="true" href="https://support.wix.com/en/article/cms-content-management-system-an-overview" target="">CMS (Content Management System)</a> datasets load and display content, you can enhance page speed and usability.</div><div><br /></div><div>Click below for more info on improving your site's performance when using the CMS: </div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Adjust the 'Items per load' dataset setting</h4><div class="collapsible-content"><div>You can change the <strong>Items per load </strong>field in your dataset settings to control the number of items that load at a time in repeaters and galleries. This helps you:</div><ul>
  <li>Load your page faster with fewer items on the initial load.</li>  <li>Reduce the number of larger items.</li>  <li>Enhance your page's design.</li></ul><div><br /></div><div>Learn more about <a data-composite="true" href="https://support.wix.com/en/article/cms-changing-the-maximum-items-displayed-in-your-dataset-settings" target="">limiting the maximum items displayed per load</a>. </div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Add a 'Load More' button or pagination bar to repeaters and galleries</h4><div class="collapsible-content"><div>When displaying a lot of content on data-bound elements, you can limit the number of items loaded at once. Consider adding a <a data-composite="true" href="https://support.wix.com/en/article/cms-about-dataset-click-actions-for-buttons-and-images#load-more" target="">'Load more' button</a> or a <a data-composite="true" href="https://support.wix.com/en/article/cms-adding-and-setting-up-a-pagination-bar" target="">pagination bar</a> to load one batch of items at a time. A good practice is to show up to 10 items with each new load.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Select the 'Fetch after the page loads' dataset setting</h4><div class="collapsible-content"><div>If your connected repeaters or galleries contain a lot of content or connect to a large collection, consider <a data-composite="true" href="https://support.wix.com/en/article/cms-setting-up-a-deferred-dataset" target="">using a deferred dataset</a>. </div><div><br /></div><div>The dataset's data is fetched only after the rest of the page has finished loading. This means the initial rendering of the page will not be blocked by this dataset, making the page load faster. This option is recommended when elements displaying the data are not initially visible, such as when they require scrolling into view or opening a section.</div><div><br /></div><div>Go to the dataset settings and select the <strong>Fetch after the page loads</strong> checkbox to make it a deferred dataset. </div><div><br /></div><div><strong>Notes: </strong></div><ul>
  <li>This option is available for regular datasets, but not for dynamic page datasets. </li>  <li>Make sure to <a data-composite="true" href="https://dev.wix.com/docs/develop-websites/articles/getting-started/getting-started-with-code" target="_blank">enable coding</a> to use this feature.</li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Select the 'Fetch only connected fields' dataset setting</h4><div class="collapsible-content"><div>To enhance site performance, you can now use the <strong>Fetch only connected fields</strong> dataset setting. This allows you to load only the fields that are actively connected to the components on your page, excluding any disconnected fields and data accessed by code. This setting is beneficial for improving loading times, especially on complex pages.</div><div><br /></div><div><strong>Notes: </strong></div><ul>
  <li>This option is available for regular datasets, but not for dynamic page datasets.</li>  <li>Make sure to <a data-composite="true" href="https://dev.wix.com/docs/develop-websites/articles/getting-started/getting-started-with-code" target="_blank">enable coding</a> to use this feature.</li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Displaying content linked to your dataset</h4><div class="collapsible-content"><div>If you have content in your collection that isn’t needed on your page, you can prevent it from displaying. <a data-composite="true" href="https://support.wix.com/en/article/cms-displaying-content-from-multiple-collections-using-datasets" target="">Add a filter to the dataset</a> to include or exclude items that from displaying on the connected elements. You can also <a data-composite="true" href="https://support.wix.com/en/article/cms-controlling-live-site-item-visibility-from-your-collection" target="">control live site visibility</a> from within your CMS collections by setting items to 'Visible' or 'Hidden' statuses. </div></div></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Using coding on your site?</div><div class="info-content"><div>Follow our best practices for <a data-composite="true" href="https://dev.wix.com/docs/develop-websites/articles/best-practices/best-practices-for-improving-performance-in-wix-sites-with-data" target="_blank">improving site performance when using coding and the CMS</a>.</div></div></div></div>

Currently, when high resolution images load on your site, a low resolution image is displayed first. This is the behavior across all Wix sites, and a lot of sites on the web. This technology has no ef...

Site Performance Request: Disable the Loading of Low-Resolution Images Before the High-Resolution Ones

Discover how your Wix site enhances user experience by displaying low-resolution images first while high-resolution images load. This feature allows your visitors to access meaningful content quickly without impacting your site's performance. While you cannot disable this behavior, it ensures a smoother browsing experience for your audience. Your feedback is valuable as we continue to improve our products.

<div data-component-type="text"><div>Currently, when high resolution images load on your site, a low resolution image is displayed first. This is the behavior across all Wix sites, and a lot of sites on the web. This technology has no effect on the rest of your site's content, including the high-resolution images themselves. It lets your site visitors see more meaningful content faster at no performance cost to you.</div></div><div data-component-type="text"><div>It is not possible to disable this behavior. </div></div><div data-component-type="text"><div>We are always working to update and improve our products, and your feedback is hugely appreciated.</div></div>

We are excited to announce that visitors now see a loading indicator on your site's browser tab when they move between pages. The indicator appears while the next page loads, so visitors know the site...

Site Performance Request: Loading Indicators When Navigating Between Pages

Discover the new loading indicator feature that enhances user experience on your site. When visitors navigate between pages, they will see a loading indicator in the browser tab, reassuring them that the site is actively responding, even if the next page takes a moment to load. This improvement helps keep your audience engaged and informed.

<div data-component-type="text"><div>We are excited to announce that visitors now see a loading indicator on your site's browser tab when they move between pages. The indicator appears while the next page loads, so visitors know the site is responding even if the page takes a little longer to appear.</div></div>

Core Web Vitals are a set of three metrics that assess the experience visitors have when browsing your site. These metrics measure the loading time, interactivity, and visual stability of your site. S...

Site Performance: About Core Web Vitals

Discover how to enhance your site's performance by understanding Core Web Vitals, which measure loading time, interactivity, and visual stability. This article explains the three key metrics—Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS)—and provides actionable tips to improve each one. By optimizing these metrics, you can boost your site's visibility in search results and create a better browsing experience for your visitors.

Google PageSpeed Insights is a tool that tests your site page's performance for both desktop and mobile. This tool uses the Chrome User Experience (CrUX) report to analyze real visitor performance and...

Site Performance: Understanding PageSpeed Insights

Discover how to use Google PageSpeed Insights to analyze your site's performance for both desktop and mobile. This tool provides valuable insights into real user experiences and performance scores, helping you identify areas for improvement. Learn about key metrics like Core Web Vitals, which assess loading times and responsiveness, and find actionable tips to enhance your site's speed and user experience. By optimizing your site based on these insights, you can improve your SEO ranking and overall performance.

Having a fast loading time ensures a smooth and pleasant experience for site visitors. We're always striving to optimize the performance of Wix sites, and have implemented ways to improve loading time...

Site Performance: How Wix Improves a Site's Loading Time

Discover how to enhance your site's loading speed with Wix's built-in optimizations. Learn about automatic image compression, the use of a content delivery network (CDN) for faster content delivery, and lazy loading techniques that improve user experience without sacrificing image quality. This article also addresses common issues affecting site performance and provides tips to ensure your visitors enjoy a seamless browsing experience.

<div data-component-type="text"><div>Having a fast loading time ensures a smooth and pleasant experience for site visitors. We're always striving to optimize the performance of Wix sites, and have implemented ways to improve loading time.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="automatic-image-optimization" level="3">Automatic image optimization</h2></div><div data-component-type="text"><div>Images can add life and context to a site. Whether you're using them to display photography, information, or for decoration, it's important that their quality isn't compromised. </div></div><div data-component-type="text"><div>When you upload an image to a Wix site, we resize the image for optimal quality and site loading time. Images less than 25MB are automatically compressed, so you don't need to change anything before you upload. </div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="content-delivery-network-cdn" level="3">Content delivery network (CDN)</h2></div><div data-component-type="text"><div>To ensure optimal loading speed, Wix uses CDN - a system of global cache services and proxy servers. CDN works by delivering site content to visitors from the server geographically closest to them.</div></div><div data-component-type="text"><div>CDN acts as the middleman between Wix servers and site visitors, reducing latency and site loading time.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="defense-against-distributed-denial-of-service-ddos-attacks" level="3">Defense against distributed denial-of-service (DDoS) attacks</h2></div><div data-component-type="text"><div>Whether your site <a data-composite="true" href="https://support.wix.com/en/article/purchasing-a-domain-from-wix-3133977" target="">has a Wix domain</a> or is <a data-composite="true" href="https://support.wix.com/en/article/connecting-a-domain-to-the-wix-name-servers" target="">connected to the name servers</a>, we minimize the effect of DDoS attacks against the site.</div></div><div data-component-type="text"><div>DDoS attacks overload the servers, and cause them to react slowly or not at all. Wix has a set infrastructure that can lessen the results of these attacks, and may prevent a site's loading time from being severely impacted. </div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="lazy-loading-images" level="3">Lazy loading images</h2></div><div data-component-type="text"><div>High resolution images can significantly impact a site's loading time. To ensure a better visitor experience without compromising content, Wix uses a technique called lazy loading. </div></div><div data-component-type="text"><div>This technique boosts loading time by replacing high-resolution images with low-resolution versions. The low-resolution placeholders load instantly (even on slower networks), while the high-resolution content loads in the background. Once loaded, the high-resolution images automatically replace the placeholders.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="faqs" level="3">FAQs</h2></div><div data-component-type="text"><div>Click a question below to learn more.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">What should I do if my Wix site is inaccessible in certain countries?</h4><div class="collapsible-content"><div>If your site is inaccessible in specific regions, it may be due to local ISP restrictions. Advise users to contact their ISP and provide any relevant information about the block.<br />
<strong>Tip:</strong> Ensure your site's domain and hosting comply with international regulations.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">How can I identify which elements are slowing down my website?</h4><div class="collapsible-content"><div>Use Wix's Site Speed dashboard or Google PageSpeed Insights to analyze performance metrics. Focus on:</div><ul>
  <li>Large images or videos.</li>  <li>Excessive animations or third-party apps.</li>  <li>Inefficient custom code.</li></ul><div><br /></div><div><strong>Tip: </strong>Regularly review your site for unused media or elements and remove them.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Why are my customers experiencing issues with my online store checkout process?</h4><div class="collapsible-content"><div>Checkout issues may arise from:</div><ul>
  <li>Session timeouts or browser caching.</li>  <li>Overlapping elements in the design.</li>  <li>Third-party app conflicts.</li></ul><div><br /></div><div>To resolve this:</div><ul>
  <li>Test the checkout process on different devices and browsers.</li>  <li>Clear the browser's cache and cookies.</li>  <li>Ensure that all payment methods are connected correctly.</li></ul><div><br /></div><div><strong>Tip: </strong>Use Wix Analytics to monitor customer behavior during checkout and identify potential issues.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Why does my Wix site show a blank screen before loading content?</h4><div class="collapsible-content"><div>A blank screen may occur due to:</div><ul>
  <li>Slow loading of large elements, like images or videos.</li>  <li>Browser caching issues.</li>  <li>Network connection problems.</li></ul><div><br /></div><div>To address this:</div><ul>
  <li>Optimize images and videos for faster loading.</li>  <li>Enable caching to improve repeat visits.</li>  <li>Test your site on different devices and internet connections.</li></ul><div><br /></div><div><strong>Tip:</strong> Use Wix's Performance Dashboard to identify bottlenecks.</div></div></div></div>

Create a fast, engaging website by making design choices that prioritize performance. When you choose what to show first, where to place images and videos, and how to organize your content, you help y...

Site Performance: Designing a Performance-Focused Website

Discover how to create a fast and engaging website by making design choices that enhance performance. Learn to prioritize the loading order of elements, optimize your above-the-fold content, and manage images and videos effectively to improve site speed. By following these performance-focused tips, you can deliver a smooth, professional experience for your visitors on any device, ensuring they find what they need quickly and easily.

<div data-component-type="text"><div>Create a fast, engaging website by making design choices that prioritize performance. When you choose what to show first, where to place images and videos, and how to organize your content, you help your pages load quickly and make it easier for people to find what they need. Use these performance-focused tips to improve your site’s speed, keep visitors interested, and deliver a smooth, professional experience on any device.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="optimizing-element-loading-order" level="3">Optimizing element loading order</h2></div><div data-component-type="text"><div>Elements on your site load in a specific order based on their type and size. Understanding this order helps you prioritize what appears first and ensures a seamless experience.</div></div><div data-component-type="text"><ul>
  <li><strong>Static elements:</strong> These include text and basic shapes that load the fastest. Add these above the fold to ensure quick visibility.</li>  <li><strong>Fluid elements:</strong> Images and videos fall under this category. While they add life to your site, they can slow performance. Place these below the fold when possible.</li>  <li><strong>Interactive elements:</strong> Elements like iFrames, animations, and third-party apps load last. Use them sparingly and strategically to avoid long load times.</li></ul></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tip:</div><div class="info-content"><div>We recommend paying particular attention to the homepage, as this is usually the first page that your visitors encounter.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="designing-a-high-performing-above-the-fold-section" level="3">Designing a high-performing above the fold section</h2></div><div data-component-type="text"><div>The above the fold section refers to the area of your webpage visible before the user starts scrolling. As it loads first, keeping it lightweight and purposeful is critical.</div></div><div data-component-type="text"><div><strong>Recommended elements:</strong></div><ul>
  <li><strong>Text:</strong> Use succinct, impactful text that clearly conveys your page’s purpose. Stick to system fonts and avoid excessive use of font families and weights.</li>  <li><strong>Calls to Action (CTAs):</strong> Include clear buttons or links to guide user actions, such as “Shop Now” or “Learn More.” Avoid placing distracting elements near CTAs.</li></ul><div><br /></div><div><strong>Elements to minimize:</strong></div><ul>
  <li>Large images or videos</li>  <li>Animations</li>  <li>Overuse of high-resolution images</li></ul></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tip:</div><div class="info-content"><div>Use tools like Google PageSpeed Insights or <a data-composite="true" href="https://support.wix.com/en/article/understanding-your-site-speed-dashboard" target="">Wix’s Site Speed dashboard</a> to ensure content above the fold is optimized for fast loading.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="using-dedicated-pages" level="3">Using dedicated pages</h2></div><div data-component-type="text"><div>Overloading pages with too many elements affects performance, particularly the homepage. Instead, create <strong>dedicated pages</strong> for specific site features or apps.</div></div><div data-component-type="text"><div>Add pages for features like Stores, Blogs, or Videos, and link to them from the homepage with buttons or menu items. Keep page length under approximately <strong>eight screens</strong> by distributing content across your site pages and limiting unnecessary elements.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="optimizing-images-and-videos" level="3">Optimizing images and videos</h2></div><div data-component-type="text"><div>Media files often slow websites due to large sizes and resolutions. Here’s how to manage them effectively:</div></div><div data-component-type="text"><div><strong>Images:</strong></div><ul>
  <li>Use lightweight formats like WebP or JPEG.</li>  <li>Compress files before uploading to Wix.</li>  <li>Showcase images in a pro gallery for built-in optimization.</li></ul><div><br /></div><div><strong>Videos:</strong></div><ul>
  <li>Host videos on Wix Video, YouTube, or Vimeo to optimize performance.</li>  <li>Avoid placing videos above the fold for faster initial page loads.</li></ul></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="lazy-loading" level="3">Lazy loading</h2></div><div data-component-type="text"><div>Lazy loading delays the loading of images and videos until they appear in the user’s viewport, improving initial page load times. This feature is automatically enabled in Wix but works best when images and videos are placed within supported elements, like galleries or strips, and above the fold content is kept minimal for faster visibility.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="managing-additional-elements" level="3">Managing additional elements</h2></div><div data-component-type="text"><div>Other design decisions can also impact your site’s speed and performance:</div><ul>
  <li><strong>Buttons:</strong> Create clear and concise buttons linking to relevant content elsewhere on your site. For example, you can use “Explore the Catalog” or “View More Projects.”</li>  <li><strong>Custom Code:</strong> Ensure any custom code is optimized and uses attributes like &quot;defer&quot; or &quot;async&quot; to reduce lag.</li>  <li><strong>Pagination or load more buttons:</strong> Especially for product-heavy sites, avoid showing all products at once on a single page. Implement <a data-composite="true" href="https://support.wix.com/en/article/cms-adding-and-setting-up-a-pagination-bar" target="">pagination</a> or load-on-demand features to keep loading efficient.</li></ul></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tips:</div><div class="info-content"><ul>
  <li><strong>Test regularly:</strong> Use Google PageSpeed Insights and <a data-composite="true" href="https://support.wix.com/en/article/understanding-your-site-speed-dashboard" target="">Wix Site Speed dashboard</a> to monitor and improve performance.</li>  <li><strong>Prioritize above the fold content:</strong> Make sure key content loads quickly by adding lightweight and static elements.</li>  <li><strong>Minimize third-party apps:</strong> Only use essential apps or widgets to avoid unnecessary slowdowns.</li></ul></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="faqs-1" level="3">FAQs</h2></div><div data-component-type="text"><div>Click a question below to learn more.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Why is my Wix website slow to load, and how can I improve its speed?</h4><div class="collapsible-content"><div>Large image files, excessive animations, and heavy elements can slow your site. Optimize images to formats like JPEG or WebP, reduce homepage content, limit custom fonts, and enable caching from your site’s settings. Use the Wix Site Speed dashboard for insights.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Why is my mobile site slower than my desktop site?</h4><div class="collapsible-content"><div>Mobile sites can struggle with load times due to slower internet and smaller device processing power. Improve performance by simplifying mobile design, using lazy loading for media, and avoiding heavy elements like videos above the fold.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">How can I improve my Largest Contentful Paint (LCP) score?</h4><div class="collapsible-content"><div>To boost LCP, use static elements (e.g., text or buttons) above the fold rather than animations or videos. Optimize the largest image or video on the page and reduce custom or excessive fonts.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">What is the best way to display a large number of products without slowing down my store?</h4><div class="collapsible-content"><div>Use pagination or a “Load More” button to divide products into smaller groups, reducing the data loaded at once. Avoid listing all products on a single page to maintain site speed.</div></div></div></div>

Currently, it is not possible to change the order in which elements load on your site, or enable specific elements to be pre-loaded.Site elements automatically load based on their weight and resolutio...

Site Performance Request: Pre-Loading Specific Elements

Discover how site elements load automatically based on their weight and resolution, with static or low-resolution elements loading faster than high-resolution or interactive ones. While you can't change the loading order or pre-load specific elements, understanding this process can help you optimize your site's performance. Your feedback is valuable as we continue to enhance our products.

<div data-component-type="text"><div>Currently, it is not possible to change the order in which elements load on your site, or enable specific elements to be pre-loaded.</div></div><div data-component-type="text"><div>Site elements automatically load based on their weight and resolution. For example, static or low-resolution elements load faster than high-resolution or interactive elements. <a data-composite="true" href="https://support.wix.com/en/article/site-performance-designing-a-performance-focused-website#element-loading-order" target="">Learn more about loading order.</a> </div></div><div data-component-type="text"><div>We are always working to update and improve our products, and your feedback is greatly appreciated.</div></div>

You can use third-party code across your site to enrich your visitors' experience and add more capabilities. However, third-party code can impact your site's performance and loading time if not optimi...

Site Performance: Using Third Party Code on Your Site

Discover how to optimize third-party code on your site to enhance performance and loading speed. Learn effective strategies such as adding the defer attribute to scripts, placing them at the end of your code body, and minimizing unnecessary code. While third-party tools like Facebook Ads and Google Analytics can be beneficial, consider using Wix's integrated options for better performance. This article guides you in ensuring a smoother experience for your visitors.

<div data-component-type="text"><div>You can use third-party code across your site to enrich your visitors' experience and add more capabilities. However, third-party code can impact your site's performance and loading time if not optimized. </div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="optimizing-code-on-your-site" level="3">Optimizing code on your site</h2></div><div data-component-type="text"><div>As third-party code can impact your site performance and speed, it's important to optimize it where possible. Optimizing code can lessen its impact on your site, and provide a smoother, faster experience for visitors. </div></div><div data-component-type="text"><div><strong>There are a few ways in which you can optimize your code:</strong></div></div><div data-component-type="text"><ul>
  <li>Add the <strong>defer</strong> attribute to your third-party script. This attribute tells your visitors' browser to not wait for the script, so your site content can load uninterrupted. The third-party embed loads in the background, and runs when the site's DOM is complete.</li></ul></div><div data-component-type="text"><ul>
  <li>Place third-party scripts at the end of the code body. This ensures that your regular site content doesn't get delayed or prevented from rendering. </li></ul></div><div data-component-type="text"><ul>
  <li>Reduce the amount of third-party code on your site where you can. Only use code that is necessary for your business and site needs, and remove any that are no longer required.</li></ul></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="using-marketing-code-on-your-site" level="3">Using marketing code on your site</h2></div><div data-component-type="text"><div>You may use third-party tools such as Facebook Ads and Google Analytics for marketing purposes on your site. This code, though useful, can affect your site's loading time and performance. As an alternative, we recommend using <a data-composite="true" href="https://support.wix.com/en/article/about-marketing-integrations" target="">Wix's integrations to embed marketing tools</a> on your site. </div></div><div data-component-type="text"><div>As these options are integrated with Wix, they have less of an impact on your site's performance, and you don't need to worry about attributes or script placement. However, as they are third-party code, we still recommend only implementing them where necessary.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="issues-with-third-party-code" level="3">Issues with third-party code</h2></div><div data-component-type="text"><div>Third-party code has not been tested by Wix and we are therefore unable to provide support for it. If you are experiencing issues with your code snippet, you should check that you've copied the code from the provider and pasted it correctly.</div></div><div data-component-type="text"><div>If the code is correct and re-entering it doesn't resolve the issue, contact the code provider directly for support in resolving the issue. </div></div>

Your site's DOM order refers to the reading order of elements on your pages. This order is important for visitors using assistive technologies such as the Tab key or screen readers, as it determines t...

Site Performance: Your Site's DOM Order

Learn how to optimize your site's DOM order to enhance accessibility and improve performance. This article explains the importance of aligning the DOM order with the visual layout, ensuring a smoother navigation experience for all visitors. Discover how Wix automatically manages DOM order in the Wix Editor, Studio Editor, and Harmony Editor, and find out how to make manual adjustments if needed. By following these guidelines, you can create a more user-friendly site.

<div data-component-type="text"><div>Your site's DOM order refers to the reading order of elements on your pages. This order is important for visitors using assistive technologies such as the Tab key or screen readers, as it determines the order in which they can view or interact with these elements.</div></div><div data-component-type="text"><div>We recommend ensuring that the DOM order matches the visual order of elements on your pages, so every visitor can navigate through your site with ease. As well as improved accessibility, matching the loading order also prevents layout issues on your site.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="dom-order-and-site-performance" level="3">DOM order and site performance</h2></div><div data-component-type="text"><div>The DOM determines the sequence in which elements load on your site. If the DOM order does not match the visual order of elements, it can impact your site's loading.</div></div><div data-component-type="text"><div>For example, if a button appears at the bottom of a page but is first in the DOM order, it loads before the elements above it. As additional content loads, the page's layout may shift and move around to accommodate the other elements.</div></div><div data-component-type="text"><div>Furthermore, if a visitor attempts to click that button while the rest of the content loads, they may accidentally select another element and be taken to another page or section.</div></div><div data-component-type="text"><div>Your site's DOM order should match the visual order of the page and the reading sequence of the language (left-to-right or right-to-left script) to ensure that it loads correctly, and is a smoother experience for visitors.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="dom-order-on-wix-editor-sites" level="3">DOM order on Wix Editor sites</h2></div><div data-component-type="text"><div>Automatic DOM order is automatically enabled on your desktop editor site. This means that any changes you make to the visual order of elements are automatically applied to the DOM order, so you don't need to do anything. </div></div><div data-component-type="text"><div>When you build a site with the desktop editor, a mobile version of your site is created. The DOM order of your mobile site is also automatically arranged, and doesn't require any manual changes. </div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Note:</div><div class="info-content"><div>Automatic DOM order is only applied to changes on desktop when you save your site.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="dom-order-on-studio-editor-sites" level="3">DOM order on Studio Editor sites</h2></div><div data-component-type="text"><div>Auto DOM order is automatically enabled on sites you build in the Studio Editor. The order is automatically rearranged when you add, align, and resize elements - so it should stay optimized as you go.</div></div><div data-component-type="text"><div>You can disable auto DOM on a Studio Editor site and make manual changes if needed. <a data-composite="true" href="https://support.wix.com/en/article/studio-editor-reorganizing-elements-by-dom-order" target="">Learn more about DOM order on Studio Editor</a>.</div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Note:</div><div class="info-content"><div>Auto DOM is automatically enabled on sites created in the Studio Editor after the beginning of November 2024. If you created a site before this date, it is not enabled.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="dom-order-on-wix-harmony-editor-sites" level="3">DOM order on Wix Harmony Editor sites</h2></div><div data-component-type="text"><div>Wix organizes the DOM order of your Harmony Editor site. This order is automatically adjusted as you add, resize, and move elements; so you don't need to worry about making any manual changes. </div></div><div data-component-type="text"><div>However, you can <a data-composite="true" href="https://support.wix.com/en/article/wix-harmony-editor-working-with-dom-order#manually-adjusting-the-dom-order" target="">manually adjust the DOM order of individual sections and containers</a> as needed.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Changed a site's language?</div><div class="info-content"><div>Changing a site's language to one with a different reading direction may cause the DOM order to be unaligned with the visual order of elements. If you change the site's language to one with a different reading direction, we recommend <a data-composite="true" href="https://support.wix.com/en/article/accessibility-checking-and-adjusting-a-sites-dom-order#site-language-and-dom" target="">using the Accessibility Wizard to reorganize page elements and content</a>.</div></div></div></div>

How to begin

Choosing a template

Hiring a professional to build your site

Build your website and business with Wix. Try using our AI tools to create your website, customize templates, or hire professionals to build or enhance your online presence.

Getting started with Wix

Learn how to build your website and business using Wix.

Wix Editor basics

Using the Editor tools

Your site's layout

Strips and columns

Your site's structure

Designing your site

Pages

Menus

Managing pages and menus

Text

Buttons

Containers and boxes

Slideshows

Shapes and lines

Adding and customizing elements

Images

Galleries

Videos

Documents and files

Adding files and media

Working with elements

Using effects and animations

Sharing and promoting your site

Adding advanced elements

Getting started

Mobile tools

Pages on mobile

Background on mobile

Mobile site layout

Site menu on mobile

Text on mobile

Media on mobile

Other elements on mobile

Troubleshooting your mobile site

Building a mobile site

Troubleshooting Editor sites

Using the Wix Editor

Using your dashboard

Managing your site

Managing Roles & Permissions

Getting started with AI

Using AI to create & manage your website

Using AI to set up your business

AI tools

Getting started with the editor

Using the editor tools

Structuring your site

Adding animations and effects

Branding your site

Troubleshooting your site

Using the Wix Harmony Editor

Media Manager basics

Uploading media

Purchasing media

Managing media

Troubleshooting media

Adding & managing media

Using the Pro Gallery

Editing images (Wix Photo Studio)

Getting started with Wixel

Creating and managing projects

Designing with Wixel

Upgrading and account management

Wixel

Managing your media

Wix Multilingual basics

Translating your website

Managing languages

SEO in Wix Multilingual

Creating a multilingual website

Privacy and GDPR

About accessibility

Making your site accessible

Advanced accessibility features

Building an accessible site

About the CMS (Content Management System)

Managing CMS collections

Connecting CMS collection content to your site

Working with dynamic pages and the CMS

Connecting user input elements to CMS

Using CMS with other Wix products

Advanced CMS features

Wix for Developers

Test Site

SSO Login

Wix Blocks

Advanced features

Getting started with  Wix Vibe

Managing your Wix Vibe site

Customizing your Wix Vibe site

Publishing your Wix Vibe site

Using Wix Vibe

Read how to use the Wix Editor and manage content on your site. Discover how to protect your visitors' privacy and make your site accessible.

Creating a website

Design and manage your site with smart functionalities.


Changing your account settings

Sign in issues

Managing your account

Upgrading to a Premium plan

Billing for Premium Plans

Billing for Domains

Billing for Google Workspace Business Emails

Managing your subscriptions

Charges, payments and tax

Invoices for Wix services

Using vouchers and promotions

Billing & premium subscriptions

Review your account settings, manage your subscriptions and plans and understand your invoices.

Account & billing

Manage subscriptions, plans and invoices.

Managing your site with the Wix app

Mobile apps basics

Customizing your own mobile app

Managing your own mobile app

Submitting your mobile app for approval

Building your own mobile app

Customizing your site on the Wix member apps

Managing your site on the Wix member apps

Using mobile apps as a member

Using the Wix member apps

Mobile apps for your customers

Use our mobile apps to run your business efficiently on the go and set up a dedicated app for your site members to stay in touch. 

Using the Wix mobile apps

Run your business and connect with members.

Domain basics

Wix domains

Domains purchased elsewhere

Transferring domains

Managing domains

Troubleshooting domains

Follow our step-by step guides to learn how to purchase, connect or transfer a domain for your site, and find out how to keep your site’s data secure.

Connecting a domain

Learn to purchase, connect or transfer a domain to your site.

Setting up your store

Wix Stores

Business solutions & apps

Get tools to grow your business and web presence. Find the right tools for your specific needs, set up online payments and keep track of your site's analytics.

Managing your business

Get tools to grow your business and web presence.

Site performance