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

<div data-component-type="text"><div>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 aspects such as responsiveness, fluidity, and loading time. </div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="understanding-loading-time" level="3">Understanding loading time</h2></div><div data-component-type="text"><div>Site loading time measures how quickly your site fully loads after a visitor requests access, by either clicking a link or entering the page URL. Many factors can affect the loading time of a page. Some are site-specific, and others are related to your visitor's device and internet connection.</div></div><div data-component-type="text"><div>Sites that have been optimized and adjusted load faster than those that are content-heavy. <a data-composite="true" href="https://support.wix.com/en/article/site-performance-designing-a-performance-focused-website" target="">Optimizing your site</a> can ensure an improved loading time, as well as a better score on performance tools like Google PageSpeed Insights.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="how-wix-measures-loading-time" level="3">How Wix measures loading time</h2></div><div data-component-type="text"><div>Wix monitors and collects data for several metrics. These include Google's Core Web Vitals, and additional vitals such as FCP, TTFB, and TTI. You can view <a data-composite="true" href="https://support.wix.com/en/article/understanding-your-site-speed-dashboard" target="">your site's speed metrics</a> from your dashboard. </div></div><div data-component-type="text"><div>Wix automatically collects this performance data in real time across our platform in order to monitor and improve your site's speed. We recommend following the best practices below to ensure an enhanced loading time for your site.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="loading-order-of-elements" level="3">Loading order of elements</h2></div><div data-component-type="text"><div>When building or updating your site, we recommend that you keep <a data-composite="true" href="https://support.wix.com/en/article/site-performance-designing-a-performance-focused-website#element-loading-order" target="">the loading order of elements</a> in mind, as they can effect your site's performance.</div></div><div data-component-type="text"><div>For example, elements that are interactive or content-heavy (e.g. videos and third party apps) tend to load slower than static or lighter elements, such as text and buttons. </div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="optimizing-elements-on-your-site" level="3">Optimizing elements on your site</h2></div><div data-component-type="text"><div>Optimize the homepage and elements like text, animation, and images for better site performance. Click an option below for more information:</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Homepage design</h4><div class="collapsible-content"><div>Content that is above the fold of your site is loaded before the rest of your page. Adding meaningful, relevant, and light content to this section of your page ensures that site visitors have useful information to discover while the rest of the page loads. </div><div><br /></div><div>We advise using static elements such as text, shapes, and buttons on your above the fold. As these elements load first, it'll enhance your site's loading time and performance. </div><div><br /></div><div><strong>What is 'above the fold'?</strong></div><div>This is the section of your site that visitors see first, before starting to scroll down. </div><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/02/24/c3f222b2-9a16-4401-a18a-5f1ee21d0650/24b10e96-2173-4b34-a2e0-c1bdc3d6fa5f.png" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Images</h4><div class="collapsible-content"><div>Images uploaded to Wix sites are automatically resized for optimization. We recommend using AVIF images rather than PNG images unless you require a transparent background. AVIF images are better optimized for site loading time and performance. <a data-composite="true" href="https://support.wix.com/en/article/site-performance-optimizing-your-media" target="_blank">Learn more about images and your site performance</a>.</div><div><br /></div><div><strong>Notes:</strong> </div><ul>
  <li>Wherever possible, Wix automatically converts images to modern formats such as AVIF. This format reduces download size while maintaining image quality.</li>  <li>It is not possible to upload images over 25mb to your Wix site.</li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Videos</h4><div class="collapsible-content"><div>Videos are a great way to encourage visitor interaction and interest. We advise keeping loading time in mind when adding videos, as they generally have high resolutions and take longer to load than static elements. </div><div><br /></div><div>Avoid overuse of videos, and keep them below the fold where possible. <a data-composite="true" href="https://support.wix.com/en/article/site-performance-optimizing-your-media" target="">Learn more about optimizing your videos</a></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Third-party apps and iFrames</h4><div class="collapsible-content"><div>The content shown in third-party apps and iFrames (e.g. embedded videos or social channels feeds) is delivered from external servers, rather than the Wix servers. </div><div><br /></div><div>This means Wix cannot optimize them and therefore they may create an overhead on your site’s loading time. <br />
</div><div>We recommend putting them on secondary pages, with a button on the homepage that will direct your site visitors to them.</div><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/02/24/4a6a902f-a58d-4a89-a844-3fbd43531d7f/000fd0c9-e091-498c-a6f3-a2c367d5a8a4.png" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Fonts</h4><div class="collapsible-content"><div>We recommend using no more than 3 or 4 fonts on your site, as this can enhance your site's aesthetic and give it a professional feel. Keeping the font styles within this number range can also improve site performance, as it reduces the loading time. </div><div><br /></div><div>Furthermore, we also recommend avoiding the use of custom fonts where possible. System fonts load faster, which can improve your site's performance. <a data-composite="true" href="https://support.wix.com/en/article/site-performance-optimizing-your-text" target="_blank">Learn more about fonts and your site</a></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Special effects</h4><div class="collapsible-content"><div>Special effects such as animations and slideshows can bring your site to life.</div><div>However, they tend to load slower than static elements, and we recommend keeping them below the fold of your site where possible.</div><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/02/24/15e115f5-a5b7-4ee3-882c-f7f51c425219/a20d9967-e23e-4f15-ba1c-c25d53b6a229.gif" /></div><div><br />
<strong>Note:</strong> Animated GIFs must be downloaded in full before they begin to play. We recommend converting any animated GIFs that you want to use into a video.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Lightboxes</h4><div class="collapsible-content"><div>Lightboxes load later than other elements of your site by design. We therefore recommend limiting the use of lightboxes across your site, and avoid using lightboxes as your page's main content.</div><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/10/27/60247286-d16f-44d2-9354-ee1bdcdb4e10/374a23bc-4f4d-402e-ab54-bd931db830b0.gif" /></div><div><br /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">DOM order</h4><div class="collapsible-content"><div>Your site's DOM order is the order in which visitors using assistive technologies (such as screen readers) navigate through your elements. </div><div><br /></div><div>In order to provide a smooth experience for these visitors and ensure the correct order of elements, we recommend manually adjusting the visual order of elements to match the order displayed in the Layers panel. </div><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/09/07/5a560ab4-0363-4218-a2f2-f942689ae743/6237cf56-6c62-4a46-9947-8dd36bee8a7b.png" /></div><div><br /></div><div><a data-composite="true" href="https://support.wix.com/en/article/site-performance-your-sites-dom-order" target="">Learn more about your site's loading order</a></div></div></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Using data on your site?</div><div class="info-content"><div><a data-composite="true" href="https://support.wix.com/en/article/velo-best-practices-for-improving-performance-in-wix-sites-with-data" target="">Read more about loading times on sites with data collections</a>.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="optimizing-your-mobile-site-content" level="3">Optimizing your mobile site content</h2></div><div data-component-type="text"><div>In general, mobile devices are not as strong or fast as desktop computers, and have a slower internet connection. Therefore your site might take longer to load when viewing it on a mobile device.</div></div><div data-component-type="text"><div>If your mobile site is loading slowly, we recommend following the below guidelines to optimize its performance.</div></div><div data-component-type="text"><div>Click an option below to learn how to:</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Use the mobile editor</h4><div class="collapsible-content"><div>Use the mobile editor to optimize your mobile-friendly site. You can hide and adjust elements, and even add a welcome screen.</div><div><br /></div><div>Mobile-friendly sites will look different to the desktop version, so we recommend adjusting it to fit your needs.</div><div><br /></div><div><strong>To access the mobile editor:</strong></div><ol>
  <li>Open the Wix Editor.</li>  <li>Click the <strong>Mobile Editor </strong>icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/11/08/08ae9873-b079-40cf-8525-effbed362dcb/d465470c-a375-4c36-8344-f9c878b58375.png" /> from the top toolbar.</li></ol><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/08/13/363e4fd5-5e2e-4db6-8de0-9f544c7f87da/954250c2-5925-4fc5-a2d2-ae417c82d69e.png" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Hide unnecessary elements</h4><div class="collapsible-content"><div>Some elements may not be relevant to your mobile site, and will significantly impact loading time. </div><div><br /></div><div>We recommend being mindful of these elements. Avoid overuse of elements such as lightboxes and third-party apps, and keep only relevant and necessary content on your mobile site.</div><div><br /></div><div><strong>To hide elements from your mobile site:</strong></div><ol>
  <li>Click the element you want to hide.</li>  <li>Click the Hide Element icon <img data-composite="true" src="https://lh5.googleusercontent.com/L4iRWXmqsUGoTo3P2kGkvn4s7FsSQO6TKxvcSJRiLfXPdTUxvQluka9qGjkTrbJkQi9mmQ0A5O-1Lt76Gn4VLL3RKsYh8FsbxTSwRewt4CZb0uAqVEWAFCZ-u_EHaeMSug7SkbS9" />.</li></ol><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/08/13/ae8a4939-8c0e-4fc9-af97-574b9bc2ac8b/e6846628-a1c3-4c49-a608-75d30febe706.png" /></div><div><br /></div><div><strong>Tip:</strong> Hidden elements can be viewed and re-added to your mobile site by clicking <strong>Hidden on Mobile</strong> <img data-composite="true" src="https://lh5.googleusercontent.com/L4iRWXmqsUGoTo3P2kGkvn4s7FsSQO6TKxvcSJRiLfXPdTUxvQluka9qGjkTrbJkQi9mmQ0A5O-1Lt76Gn4VLL3RKsYh8FsbxTSwRewt4CZb0uAqVEWAFCZ-u_EHaeMSug7SkbS9" /><strong> </strong>on the left side of the mobile editor.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Crop or resize images</h4><div class="collapsible-content"><div>Large images may take a while to load on your mobile-friendly site. We recommend cropping or making your image smaller to prevent your mobile site's loading time being impacted. </div><div><br /></div><div><strong>To crop an image:</strong></div><ol>
  <li>Click the image in the editor.</li>  <li>Click the Crop icon <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/11/08/1e9dce3e-99a3-482f-b69e-3539eeada0d4/4ff9fe5e-fa1e-4ef3-855d-cd85b5791c66.png" />.</li>  <li>Drag the handles to crop the image.</li>  <li>Click <strong>Apply</strong>. </li></ol><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/08/13/5de900b9-7f24-40b2-aad9-4fc55c6b8123/00b5e3f4-f460-4368-85e6-9adafbe42669.png" /></div><div><br /></div><div><strong>Tip:</strong> Images can be resized by clicking the image, then dragging the handles to make it larger or smaller.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Reduce items in galleries and repeaters</h4><div class="collapsible-content"><div>Galleries and repeaters are a great way to display images and information on your site, however they tend to load slower than other elements like text or basic shapes.</div><div><br /></div><div>As a best practice, we recommend reducing the amount of items in a gallery or set of repeaters on mobile. Only display relevant and important items and media, and spread them evenly across your site.</div><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/02/23/55f9d49c-2ace-46c9-8755-96658ef2272d/8177fd06-c1c2-4474-83b1-a19316d44957.png" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Add a welcome screen</h4><div class="collapsible-content"><div>Welcome screens are a great way to introduce your mobile site's brand. This is the first thing site visitors see, while your site can fully load in the background.</div><div><br /></div><div>You can <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-adding-and-managing-a-welcome-screen-on-your-mobile-site" target="">add a welcome screen from the panel on the left of the editor</a>, and also customize it to suit your style. </div><div><br /></div><div><strong>To add a welcome screen:</strong></div><ol>
  <li>Click <strong>Mobile Tools</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/11/08/42c8f198-fddd-4e5c-a89b-fbefd0825c40/ec82f58d-027b-4745-b5db-14a682a35109.png" /> on the left side of the mobile editor.</li>  <li>Click <strong>Welcome screen</strong>.</li>  <li>Customize your Welcome screen using the options available. </li>  <li>Click <strong>Done</strong>.</li></ol><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/02/23/e5ab5354-4956-4956-9f23-1c68717de710/b253c944-b07a-4afd-bea4-32a04508c13d.gif" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Use a supported system and browser</h4><div class="collapsible-content"><div>Wix sites are supported on different mobile operating systems and browsers. If visitors are having issues viewing your mobile-friendly site, they may need to update their system or browser.</div><div><br /></div><div>View the <a data-composite="true" href="https://support.wix.com/en/article/supported-devices-browsers-and-operating-systems" target="">supported operating systems and browsers</a>.</div></div></div></div><div data-component-type="informative"><div class="info-container" info-color="blue"><div class="info-title">Keep in mind:</div><div class="info-content"><div>Tablet devices, such as iPads and Android tablets, display the desktop version of your site. <a data-composite="true" href="https://support.wix.com/en/article/troubleshooting-ipad-and-tablet-live-site-issues" target="">View our troubleshooting article if you are experiencing issues with tablets.</a></div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="third-party-code" level="3">Third party code</h2></div><div data-component-type="text"><div>Third party code can provide important insight, tools, and features on your site. However, it can also impact your site's loading time and performance if not optimized. </div></div><div data-component-type="text"><div>We recommend only <a data-composite="true" href="https://support.wix.com/en/article/site-performance-using-third-party-code-on-your-site#optimizing-code-on-your-site" target="">adding third-party code where necessary</a>, and using <a data-composite="true" href="https://support.wix.com/en/article/site-performance-using-third-party-code-on-your-site#using-marketing-code-on-your-site" target="">Wix's marketing integrations</a> for analytic and advertising tools. </div></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...

Site Performance: Optimizing Your Text

<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="default-fonts-in-the-studio-editor" level="3">Default 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 fonts. Default 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>Default 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-about-site-styles#editing-the-typography-styles" target="">Learn how to enable default 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>Default fonts improve the loading time if the largest element above-the-fold is a<strong> </strong>text element.</li>  <li>When you enable default 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 a great way to engage site visitors. However, they can impact loading time if not optimized. Optimizing media can enhance the pages' performance, and ensure a smoother experience...

Site Performance: Optimizing Site Media

<div data-component-type="text"><div>Images and videos are a great way to engage site visitors. However, they can impact loading time if not optimized. Optimizing media can enhance the pages' performance, and ensure a smoother experience for visitors.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="displaying-images-on-a-site" level="3">Displaying images on a site</h2></div><div data-component-type="text"><div>Images are an eye-catching way to showcase content on a site, such as photography and products. We recommend keeping the quality, size, and format of images in mind to ensure the best loading time for site pages. </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 correct media 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. </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"><div>We recommend uploading the best possible quality images, as Wix optimizes them to the exact dimensions displayed on the screen without loss of quality. For best results, upload images of at least 2560 X 1440 pixels in resolution. </div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Compress large images</h4><div class="collapsible-content"><div>Wix automatically optimizes images for best online quality and fast download, so you don't need to resize or compress images under 25MB before uploading. For images that are lager than 25MB, we advise resizing or compressing them as needed.</div></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/651c25b0-2d60-43c8-addf-1df2fd575568/2021/04/06/e0e07a75-c180-47f7-973c-daf547c39143/c790c2a0-6f7e-45c7-80ad-1d621f245396.png" alt="A live Wix site showing two images above the fold." /></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 upload an image to your site, it is automatically converted to AVIF format, as it's better optimized for site performance.</div></div></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 a variety of galleries in different layouts to showcase media.  We recommend keeping the number of galleries, items, and placement in mind when using galleries on a site.</div></div><div data-component-type="text"><div>Click an option below to learn more about optimizing galleries:</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Number of galleries</h4><div class="collapsible-content"><div>Galleries are optimized to showcase multiple media files at once. We recommend having one gallery with several media items per page, as opposed to multiple galleries with less items. This is because having too many elements on a single page (even if the elements are identical) can affect site performance.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Number of items</h4><div class="collapsible-content"><div>While galleries can handle a large amount of content inside them, showcasing a lot of media at once can affect page performance. We recommend <a data-composite="true" href="https://support.wix.com/en/article/wix-pro-gallery-enabling-and-customizing-a-load-more-button" target="">enabling a 'Load more' button</a>, as it gives your images time to load while encouraging interaction from site visitors. </div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Gallery placement</h4><div class="collapsible-content"><div>We recommend that your gallery is placed below the fold of the page (the section visitors can't see without scrolling). This improves page performance, while drawing your visitors' attention to your site or page's main message. As the content above the fold is loaded first, moving your gallery down ensures that visitors have valuable content to read while the rest of the content loads.</div></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/651c25b0-2d60-43c8-addf-1df2fd575568/2021/04/06/166228e3-88ee-4707-baf2-6f9868498b8f/ec9cb44d-21b6-4e53-876a-d230eee9debe.png" alt="A pro gallery showcasing floral arrangements on a live Wix site." /></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>Wix offers several media players for videos, so you can display valuable content such as music videos, vlogs, or promotional films. You can optimize videos for performance by being mindful of the number of videos, and the types of players displayed on your pages.  </div></div><div data-component-type="text"><div>Click an option below to learn more about optimizing videos on a Wix site:</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Single Video Players</h4><div class="collapsible-content"><div>Videos that are embedded in a Single Video Player (Youtube, Vimeo, Dailymotion, Facebook), are iFrames. As the content delivered is not coming from the Wix servers, we cannot optimize it. This doesn’t mean that you shouldn't use them - but we recommend limiting their use on the site, and placing them under the fold.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Number of videos</h4><div class="collapsible-content"><div>It's best not to have more than one video on a page. If you do want to display more than one video, we recommend the following:</div><div><br /></div><ul>
  <li>Display multiple videos using Wix Video. This element is designed for showcasing multiple media files at once.</li>  <li>Display only one video on your homepage, and add a button such as “See All Videos” or “See More” that links to multiple videos located on a separate page of your site. This can encourage visitors to explore the site’s content, while keeping the site's homepage organized.</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/651c25b0-2d60-43c8-addf-1df2fd575568/2021/04/06/414beec8-4d29-4cbd-b7fa-640a9e1f58ed/5dce295a-f334-47a8-a967-ceba3c5a4b27.png" alt="A live Wix site. The page contains a promotional video." /></div></div>

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

Site Performance: Caching Pages to Optimize Loading Speed

<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 aren't 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 most of your pages, but you may need to manually enable it in some cases (e.g. pages that contain Velo code).</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 so they take less time to load. Wix uses SSR (server-side rendering) to cache or &quot;save&quot; pages to a content delivery network (CDN).</div></div><div data-component-type="text"><div>Most site pages are cached automatically after receiving their first visitor. The next time a visitor requests the page, the saved version is displayed. This prevents all of the page's elements and assets from having to load from scratch. </div></div><div data-component-type="text"><div>The cached version is usually stored for up to a week on our servers. When this duration elapses, the page is cleared and removed from the CDN. However, the page will be cached again after the next visitor loads it.</div></div><div data-component-type="heading"><h2 id="multiple-cached-versions-for-different-visitors" level="4">Multiple cached versions for different visitors</h2></div><div data-component-type="text"><div>Distinct cached copies of the same page may be created according to your visitors' geographic locations, device types, and other parameters. </div></div><div data-component-type="text"><div>When a page is cached, it loads quicker for future visitors who share the same parameters as the <strong>first visitor</strong>. If the next visitor doesn't share these parameters, they see the regular version of the page so it doesn't load as quickly.</div></div><div data-component-type="text"><div>However, their visit creates another cached version based on their specific parameters. Any subsequent visitors with the same parameters see the additional cached version that was created.</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 to improve your overall site performance, including metrics like LCP (largest contentful paint), and FCP (first contentful paint). This can improve your site's <a data-composite="true" href="https://support.wix.com/en/article/site-performance-about-core-web-vitals" target="">core web vitals score</a> and overall search results ranking.</div></div><div data-component-type="text"><div>As 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>For most pages, caching is enabled automatically. However, if you have custom code on a page that doesn't have any issues with page caching (e.g. it doesn’t access external data sources), you can manage it manually.</div></div><div data-component-type="text"><div>Alternatively, if the page contains custom code and information that needs to be externally retrieved each time a visitor loads the page, you can also prevent the page from being cached completely.</div></div><div data-component-type="heading"><h2 id="" level="4">To enable or disable caching:</h2></div><div data-component-type="text"><ol>
  <li>Go to the relevant page in your editor:
    <ul>
      <li><strong>Wix Editor:</strong> 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><strong>Wix Studio:</strong> 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>    </ul>  </li>  <li>Hover over the page and click the More Actions 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 can manually control the caching for this page.
        <ul>
          <li><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>        </ul>      </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 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 our most frequently asked questions on 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>If a visitor is logged into your site, any page they open is not cached, and it is not possible to enable this option. </div><div><br /></div><div>Caching also can not be enabled for the following pages:</div><ul>
  <li>Wix Site Search result pages</li>  <li>Pages you have set to private</li></ul></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">How does caching affect Velo?</h4><div class="collapsible-content"><div>By default, caching is disabled for any page that contains Velo code. If there is Velo code that works site-wide, caching is disabled for all site pages. However, you can manually enable caching on the pages that contain the Velo code. <a data-composite="true" href="https://support.wix.com/en/article/velo-improving-page-performance-with-manual-caching" target="">Learn more about caching with Velo</a></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">When is cache cleared?</h4><div class="collapsible-content"><div>Cache is cleared up to every week (automatically) or up to every time period you specify manually. It’s also cleared every time you click <strong>Publish </strong>in the Editor. </div><div><br /></div><div><strong>Note: </strong>If you enable cache rendering for a page, make changes, and revert your site back to that version, it is still enabled. </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

<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>

Depending on your site builder (Wix Editor or Studio Editor), you can apply background images or videos to pages, sections, and other elements. The live site loads the background color first, then the...

Site Performance: Seeing a Flash of Color As Elements Load

<div data-component-type="text"><div>Depending on your site builder (Wix Editor or Studio Editor), you can apply background images or videos to pages, sections, and other elements. The live site loads the background color first, then the background media.</div></div><div data-component-type="text"><div>The background media usually loads fast enough that site visitors do not see the background color. However, it may flash briefly in certain cases. Changing the background color of the affected elements can reduce the visibility of this flash.</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 Editor?</div><div class="info-content"><div><a data-composite="true" href="https://support.wix.com/en/article/studio-editor-request-adding-an-image-or-a-video-to-the-page-background" target="">It is not possible to add media to a page background in the Studio Editor</a>, 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><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></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>

Displaying a large number of items at once in your repeater, table, or gallery can impact your page’s performance. You can adjust the Items per load field in your dataset settings to control the numbe...

Site Performance: CMS

<div data-component-type="text"><div>Displaying a large number of items at once in your repeater, table, or gallery can impact your page’s performance. You can adjust the <strong>Items per load</strong> field in your dataset settings to control the number of items that load at a time. </div><div><br /></div><div>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>Click an option below to learn more about improving your site's performance when using the <a data-composite="true" href="https://support.wix.com/en/article/cms-content-management-system-an-overview" target="">CMS (Content Management System)</a>.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Showing large amounts of content in elements that connect to your CMS collections</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">Using deferred datasets</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>. These datasets load connected content only after the rest of the page, which can enhance your site's performance.</div></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

<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>

When your visitors move from one page to another on your site, there is no visual indication that the new page is loading until it actually appears. The time it takes for the new page to load depends ...

Site Performance Request: Loading Indicators When Navigating Between Pages

<div data-component-type="text"><div>When your visitors move from one page to another on your site, there is no visual indication that the new page is loading until it actually appears. The time it takes for the new page to load depends on its content. </div></div><div data-component-type="text"><div>Currently, it is not possible to add a loading indicator to signify that the page is still loading. </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>

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

<div data-component-type="text"><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. </div><div><br /></div><div>Search engines like Google consider Core Web Vitals when determining the ranking of your site. Enhancing these metrics boosts your site's visibility in search results and also improves your visitors' browsing experience. </div><div><br /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="what-are-the-core-web-vitals-1" level="3">What are the Core Web Vitals?</h2></div><div data-component-type="text"><div>Core Web Vitals are important as they measure your site's performance with data from real world usage and visitor experience, as well as lab data from simulated sessions. They display how your site is currently performing, and can provide insights on areas that may need improvement. </div></div><div data-component-type="text"><div>The three Core Web Vitals currently in use by Google are as follows:</div></div><div data-component-type="text"><ul>
  <li><strong>Largest Contentful Paint (LCP):</strong> An indication of a site's loading time - more specifically, how long it takes for the largest content element in the site's viewport to load.</li>  <li><strong>Interaction to Next Paint (INP): </strong>An assessment of your site's responsiveness to all click, tap, and keyboard interactions that occur throughout each visit on every page. The final INP value is the longest interaction observed. </li>  <li><strong>Cumulative Layout Shift (CLS):</strong> A measurement of unexpected movements of elements that change the layout of the page.</li></ul></div><div data-component-type="text"><div>These vitals, along with other measurements, accumulate to provide an overall score for your site's pages.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="improving-the-largest-contentful-paint-lcp-metric" level="3">Improving the Largest Contentful Paint (LCP) metric</h2></div><div data-component-type="text"><div>The Largest Contentful Paint (LCP) measures the time it takes for the browser to load and display the largest element, excluding background images. </div><div><br /></div><div>Consider the following information when working to improve your LCP metric:</div><ul>
  <li><strong>Text-based LCP elements: </strong>For text-based LCP elements, prioritizing quick loading is key. Opting for system fonts can significantly improve performance. However, if a custom font is necessary, we recommend utilizing the WOFF2 format for optimal results.<br />
<strong>Tip: </strong>In the Studio Editor, <a data-composite="true" href="https://support.wix.com/en/article/site-performance-optimizing-your-text#default-fonts-in-the-studio-editor" target="">enable Default Fonts</a> if your LCP relies on text and includes a custom font.</li>  <li><strong>Image-based LCP elements: </strong>For image-based LCP elements, it's best to upload images in either JPG or WebP formats. JPGs, in particular, can offer substantial file size reductions, up to 10 times lighter than PNGs.</li>  <li><strong>Other tips: </strong>To streamline the loading process and enhance the experience of your visitors, keep your webpage design simple and minimize unnecessary content. Consider placing heavy elements such as galleries, videos, and store widgets below the fold to prioritize faster loading for critical content. Avoid animating your LCP elements, as animations like fade-in effects only initiate once your site has fully loaded. </li></ul></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="improving-the-interaction-to-next-paint-inp-metric" level="3">Improving the Interaction to Next Paint (INP) metric</h2></div><div data-component-type="text"><div>Enhancing the Interaction to Next Paint (INP) metric involves simple steps to streamline your site's performance.</div></div><div data-component-type="heading"><h2 id="" level="4">To improve your site's INP metric:</h2></div><div data-component-type="text"><ol>
  <li>Review any third-party code snippets added to your site. You can easily review and manage these snippets within the <a data-composite="true" href="https://support.wix.com/en/article/wix-editor-embedding-custom-code-on-your-site" target="">Custom Code Settings</a>, <a data-composite="true" href="https://support.wix.com/en/article/about-marketing-integrations" target="">Marketing Integrations</a>, and scripts associated with <a data-composite="true" href="https://support.wix.com/en/article/third-party-apps-accessing-your-apps" target="">third-party apps</a>. Consider removing any code that doesn't provide clear value to your site's functionality.</li>  <li>Limit the number of apps and widgets on each page. Pages overloaded with applications and widgets tend to be more complex and prone to issues. Simplify your pages whenever possible, and refrain from excessive use of applications and widgets that aren't essential to your site's purpose.</li></ol></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="improving-the-cumulative-layout-shift-cls-metric" level="3">Improving the Cumulative Layout Shift (CLS) metric</h2></div><div data-component-type="text"><div>Improving the Cumulative Layout Shift (CLS) metric involves making simple changes to keep your site's layout stable.</div></div><div data-component-type="heading"><h2 id="" level="4">To improve your site's CLS metric:</h2></div><div data-component-type="text"><ol>
  <li>Consider reorganizing your site's <a data-composite="true" href="https://support.wix.com/en/article/site-performance-your-sites-dom-order" target="">DOM order</a>:
    <ul>
      <li><strong>Wix Editor: </strong>The DOM order is automatically structured for left-to-right scripts. However, if your site uses a right-to-left script such as Arabic or Hebrew, you'll need to manually adjust the DOM order in the Layers panel. </li>      <li><strong>Studio Editor:</strong> Wix Studio sites have an automatic DOM order, with the option to review and adjust the order of the components via the <a data-composite="true" href="https://support.wix.com/en/article/studio-editor-working-with-layers" target="">Layers panel</a>.</li>    </ul>  </li>  <li>Update ad placements to minimize their impact on CLS. Placing banner ads at the top of the page can disrupt layout stability. Instead, consider positioning ad components below the fold, such as with <a data-composite="true" href="https://support.wix.com/en/article/apps-made-by-wix-adding-and-setting-up-the-wix-monetize-with-adsense-app" target="">Google AdSense ads</a>, to reduce CLS issues.</li></ol></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="performance-measuring-tools" level="3">Performance measuring tools</h2></div><div data-component-type="text"><div>You can use various tools to gain insights into your site's performance. These tools typically include real visitor data and estimated lab data. </div></div><div data-component-type="informative"><div class="info-container" info-color="orange"><div class="info-title">Important:</div><div class="info-content"><div>We highly recommend focusing on real visitor data. You can view this data in two places: the Wix Site Speed dashboard's &quot;Real Visitor Experience&quot; section and Google PageSpeed Insights' &quot;Core Web Vitals Assessment&quot; section. Use these metrics to best understand what your site visitors experience when they load and navigate your site. </div></div></div></div><div data-component-type="heading"><h2 id="" level="4">Click below for more info about performance measurement tools:</h2></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Wix Site Speed dashboard</h4><div class="collapsible-content"><div>The <a data-composite="true" href="https://www.wix.com/my-account/site-selector/?title=Select%20a%20Site&amp;buttonText=Site%20Speed%20dashboard&amp;actionUrl=https%3A%2F%2Fmanage.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Fanalytics/performance/site-speed" target="_blank">Site Speed dashboard</a> reveals your site's current loading speed and offers actionable tips to enhance page loading.</div><div><br /></div><div>The dashboard consists of two main sections:</div><ul>
  <li><strong>Real visitor experience:</strong> This section presents data based on the actual experiences of your site visitors during loading. You can view the average speed of your entire site and a breakdown of each page's average speed. Average scores are derived from data collected over the past 30 days. It can take at least two weeks to see substantial metric improvements.<br />
<img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/13/eb495bcb-6ba5-4a6d-8b62-9814c8d49091/fe9d7a21-725c-43ad-8e2c-bce35a555699.png" alt="A Screenshot of the Site Speed dashboard showing the real visitor experience." /><br />
<strong>Note: </strong>Unlike Google PageSpeed Insights, which only includes Chrome browser visits, this data comes from Wix Analytics and includes visits from all browsers. </li>  <li><strong>Google PageSpeed simulation:</strong> This estimates how well your site performs using Google Lighthouse. It pretends to load your site on a slow mobile connection. This can help if your site doesn't get enough visitors for the Real Visitor Experience section to show data.</li></ul><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/13/687ccafc-71de-4f01-9193-8839fba62e44/b770cb46-3c3f-4702-b435-dfcdab635325.png" alt="Screenshot showing the Google PageSpeed simulation that can be used if a site doesn't have enough traffic yet." /></div><div><br /></div><div>Learn more about <a data-composite="true" href="https://support.wix.com/en/article/understanding-your-site-speed-dashboard" target="">using the Site Speed dashboard</a> for tips on improving performance. </div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Google PageSpeed Insights</h4><div class="collapsible-content"><div><a data-composite="true" href="https://pagespeed.web.dev/" target="_blank">Google PageSpeed Insights</a> checks how well your site's pages perform on desktop and mobile. It uses the Chrome User Experience (CrUX) report to study real visitor performance. To give your page a Performance Score, this tool uses Google Lighthouse. You can also get constructive suggestions for areas of improvement. </div><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/13/c5de6c44-80d6-4760-ba06-dd2c23f412a7/6c7aad0e-50ef-48e7-90b8-29a7fccff604.png" alt="A Screenshot showing Google PageSpeed Insights." /></div><div><br /></div><div>Learn more about <a data-composite="true" href="https://support.wix.com/en/article/site-performance-understanding-pagespeed-insights" target="">improving your site's performance with Google PageSpeed Insights</a>.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Core Web Vitals Report</h4><div class="collapsible-content"><div>Core Web Vitals are included as a displayed metric in both Google PageSpeed Insights and Lighthouse reports. To view Core Web Vitals as a separate report, you can open them in your Google Search Console. </div><div><br /></div><div><strong>To view a Core Web Vitals report in your Google Search Console: </strong></div><ol>
  <li><a data-composite="true" href="https://support.google.com/webmasters/answer/10267942?hl=en" target="_blank">Open your Google Search Console</a>.</li>  <li>Select a property (domain).</li>  <li>Click <strong>Core Web Vitals </strong>under <strong>Experience</strong>.</li>  <li>Select either the mobile or desktop report.</li></ol><div><br /></div><div><strong>Note: </strong>Google only generates Core Web Vitals reports for sites with sufficient traffic.</div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/13/40b29463-e9c6-418e-9705-be072a163646/19346ee6-529b-4e82-a053-91c0ee81dceb.png" alt="A Screenshot showing both the Mobile and Desktop Core Web Vitals report." /> </div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Other third-party testing tools</h4><div class="collapsible-content"><div>Wix sites are built differently compared to traditional HTML sites. When using external performance tools, keep these factors in mind:</div><div><br /></div><ul>
  <li>Wix cannot guarantee the accuracy of third-party tests. External speed tests use a &quot;black box&quot; approach that only analyzes external features, so results can vary depending on the tool used.</li>  <li>The amount of content on your site determines the number of certain files (.js, .woff, etc.). Changes you make to your site's content also impacts the number of files.</li>  <li>Some fixes suggested by third parties may be beyond your control. While certain changes may not be possible on your end, Wix is constantly working to improve performance.</li></ul><div><br /></div><div>To optimize your site's performance and loading time, we recommend following <a data-composite="true" href="https://support.wix.com/en/article/site-performance-best-practices" target="">our best practices guidelines</a>. </div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="the-difference-between-mobile-and-desktop-scores" level="3">The difference between mobile and desktop scores</h2></div><div data-component-type="text"><div>When reviewing your site's Core Web Vitals, you'll receive two distinct reports: one for mobile and another for desktop. It is likely that the two overall scores will be different.</div><div><br /></div><div>A few factors contribute to this normal difference in scores between mobile and desktop, including: </div><ul>
  <li>Mobile devices usually have slower processors than desktops.</li>  <li>Mobile networks (like 3G, 4G, LTE, and 5G) can be slower than WiFi or ethernet connections used by desktop devices.</li></ul></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="core-web-vitals-and-seo" level="3">Core Web Vitals and SEO</h2></div><div data-component-type="text"><div>Core Web Vitals are crucial indicators of your site's performance and are among the various factors considered for your site's SEO ranking.</div><div><br /></div><div>The performance SEO boost is applied to mobile and desktop pages separately. Each page, whether mobile or desktop, can receive up to three boosts, one for each Core Web Vital:</div><ul>
  <li><strong>Good:</strong> Indicates the metric scores earn a<strong> Full SEO boost</strong> (green).</li>  <li><strong>Needs Improvement: </strong>Indicates the metric scores earn a <strong>Partial SEO boost</strong> (yellow).</li>  <li><strong>Poor: </strong>Indicates the metric scores receive <strong>No SEO boost</strong> (red).</li></ul><div><br /></div><div>For instance, a mobile page might get a partial SEO boost for LCP and INP, but a full boost for CLS.</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/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/14/c9f21788-4965-4ad9-979b-9ff644e8b8d1/77cff643-f139-43c2-a9ff-30fe4002c635.png" alt="A screenshot showing a partial SEO boost for LCP and INP, but a full boost for CLS." /></div></div><div data-component-type="text"><div>Meanwhile, the desktop version of the same page might receive a full SEO boost for each metric.</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/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/14/6b618f06-faa7-4cb2-bec2-84879967326c/3220e3d3-2770-4b1b-adf9-91de2f0bf742.png" alt="A screenshot showing how the desktop version of the same page might receive a full SEO boost for each metric." /></div></div><div data-component-type="text"><div>Your Core Web Vitals Assessment will show as ‘Failed’ unless you receive a ‘Good’ score for <strong>all three Core Web Vital metrics</strong>. This does not mean the page hasn't received a boost, as each metric contributes a boost independently.</div><div><br /></div><div>Google Search always aims to display the most relevant content, even if the page experience isn't perfect. For most queries, there is a lot of helpful content available. So having a great page experience can contribute to success in search ranking.</div><div><br /></div><div>Content remains the most important factor in maintaining your SEO score. We recommend optimizing your site's content, as well as updating your page's meta tags. Learn more <a data-composite="true" href="https://support.wix.com/en/article/getting-your-site-found-on-google-seo-best-practices" target="">SEO best practices</a>.</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 for answers to the most common questions about Core Web Vitals.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Why haven't my site's metrics improved after I made changes?</h4><div class="collapsible-content"><div>After making changes to your site, we recommend waiting at least 3 weeks to see meaningful metric improvements. Although, the full effect will not be seen until the collection period has passed and all your page views are on the updated site. </div><div><br /></div><div><strong>Collection periods: </strong></div><ul>
  <li><strong>Wix Site Speed dashboard: </strong>30 days </li>  <li><strong>Google PageSpeed Insights:</strong> 28 days</li></ul><div><br /></div><div>If you’re following our <a data-composite="true" href="https://support.wix.com/en/article/site-performance-best-practices" target="">performance best practices</a>, but your metrics aren’t improving, please <a data-composite="true" href="https://www.wix.com/contact" target="_blank">contact us</a> for assistance.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">How could my site's performance have gotten worse since INP replaced FID?</h4><div class="collapsible-content"><div>Since INP replaced FID, the experience your visitors have while interacting with your site has not changed. The only difference is which metric Google uses to determine your site’s performance. </div><div><br /></div><div>With the INP metric’s increased visibility, Wix is striving to optimize your site's performance and develop new ways to improve loading time.</div></div></div></div>

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

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

<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>

Site pages that contain relevant and neat content generally have an improved loading time, and are a smoother experience for site visitors.Enhance your pages' performance by following the below design...

Site Performance: Designing a Performance-Focused Website

<div data-component-type="text"><div>Site pages that contain relevant and neat content generally have an improved loading time, and are a smoother experience for site visitors.</div></div><div data-component-type="text"><div>Enhance your pages' performance by following the below design tips, such as optimizing your above the fold section, and creating dedicated pages.</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>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="element-loading-order" level="3">Element loading order</h2></div><div data-component-type="text"><div>Elements on your site load in a specific order. Elements that are static, or low-resolution load faster than heavy or interactive elements. </div></div><div data-component-type="text"><div>The order that elements load on your site are:</div></div><div data-component-type="text"><ol>
  <li><strong>Static:</strong> Elements that are low-resolution and generally not animated, such as text and shapes.</li>  <li><strong>Fluid:</strong> Elements that are content-heavy and may have a higher resolution, such as images or videos.</li>  <li><strong>Interactive:</strong> Content that is interactive and may include external code, such as iFrames and third-party apps.</li></ol></div><div data-component-type="text"><div>Keep the loading order in mind when structuring your site and adding content. We recommend adding elements that load quickest to the <a data-composite="true" href="https://support.wix.com/en/article/site-performance-designing-a-performance-focused-website#above-the-fold" target="">above the fold section</a>, as this is the first content displayed when a visitor opens your site.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="above-the-fold" level="3">Above the fold</h2></div><div data-component-type="text"><div>The section above the fold is the section of your site that visitors can see without scrolling, and is usually the first part of your site to load. </div></div><div data-component-type="text"><div>We recommend only adding necessary static elements where possible, and keeping the design of this section simple and relevant.</div></div><div data-component-type="text"><div>The elements we recommend adding the above the fold section of your site are:</div></div><div data-component-type="text"><ul>
  <li><strong>Text:</strong> Text gives your visitors a clear idea of what your site page or brand is about. Furthermore, it can be indexed by search engines and may improve your site's SEO. We recommend sticking to system fonts, and avoiding overuse of different font families or weights. <a data-composite="true" href="https://support.wix.com/en/article/site-performance-optimizing-your-text" target="">Learn more about optimizing text on your site</a></li>  <li><strong>Calls to Action: </strong>CTAs are buttons and links that help visitors take a desired action on your site, such as making a purchase or contacting your company. CTAs should be clearly defined, and we recommend avoiding adding elements near them that may distract your site visitors.</li></ul></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/03/18/583dc6c7-ad65-4aef-bbc5-ffda8fe89923/fe0027db-1a18-4bab-8ac1-6c985912fe58.png" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="galleries-videos-and-animation" level="3">Galleries, videos, and animation</h2></div><div data-component-type="text"><div>Fluid and high resolution elements can add movement and life to your site. However, they can increase site loading time and therefore impact performance.</div></div><div data-component-type="text"><div>We recommend being mindful of these elements. Use them only when necessary, and try to avoid adding them above the fold of your site.</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/02/16/5cbae38b-83a3-4a12-9d56-4c94d6789117/37405547-1c26-43d8-8b8b-2b125ba8723f.gif" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="dedicated-pages-page-length" level="3">Dedicated pages &amp; page length</h2></div><div data-component-type="text"><div>Wix offers a variety of apps that you can add to your site, some of which include Stores, Blog, and Video. </div></div><div data-component-type="text"><div>We recommend having dedicated pages for these apps that are not the site's homepage. This will prevent your homepage from being overloaded, which can impact your loading time. You can then link to these dedicated pages from your homepage using elements such as buttons, menu items, and links.</div></div><div data-component-type="text"><div>Adding dedicated pages can also decrease the page length. This is the number of screens a visitor has to scroll through in order to view an entire site page. We recommend keeping your page length at eight screens and below by only adding necessary components, and optimizing the use of CTAs. </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/02/16/64f8fc37-ca1c-47e8-8f1a-545eb8ea5459/cef1bfe3-15f8-4157-86eb-b20d60906b6c.png" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="buttons" level="3">Buttons</h2></div><div data-component-type="text"><div>Buttons are a great way to preview content on your without compromising site performance.</div></div><div data-component-type="text"><div>Add static elements to your homepage (such as text) that give visitors a sample of site content, then add a button that links to their respective pages. Some examples include &quot;Check Out My Blog&quot;, &quot;See More&quot;, or &quot;Start Shopping&quot;.</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/02/16/9d3f111a-0b65-43f5-874e-6bb159ff08ec/f0da2c91-d6ec-4ac0-89d6-36fb5b5a7cff.png" /></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

<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

<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

<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, regardless of 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="orange"><div class="info-title">Important:</div><div class="info-content"><div>The automatic DOM order on desktop editor sites has been built for left-to-right scripts (e.g. English, Spanish, etc.). If your site uses a right-to-left script such as Arabic or Hebrew, you need to manually re-arrange the DOM order in the Layers panel.</div></div></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="orange"><div class="info-title">Important:</div><div class="info-content"><ul>
  <li>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.</li>  <li>The automatic DOM order on desktop sites has been built for left-to-right scripts (e.g. English, Spanish, etc.). If your site uses a right-to-left script such as Arabic or Hebrew, you need to manually re-arrange the DOM order in the Layers panel.</li></ul></div></div></div>

How to begin

Choosing a template 

Hiring a professional to build your site

Use Wix to build your site and business. Try our AI tools to create a site, customize our templates or hire a professional to create or enhance your web presence.

Getting started

Learn how to use Wix to build your site and business.

Wix Editor basics

Using the Editor tools

Your site's layout

Strips and columns

Structuring your site

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 animation

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

Building a mobile site

Troubleshooting your Editor site

Using the Wix Editor

Using your site dashboard

Site management

Managing roles and permissions

Managing your site

Getting started with AI

Using AI to create & manage your site

Using AI to set up your business

AI tools

Media Manager basics

Uploading media

Purchasing media

Managing media

Media issues

Adding and managing your media

Using the Pro Gallery

Editing images (Wix Photo Studio)

Managing your media

Setting up your multilingual site

Translating your site

Managing your languages

SEO in Wix Multilingual

Creating a multilingual site

Privacy & GDPR

About Accessibility

Making your site accessible

Advanced accessibility features

Creating 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 the CMS

Using CMS with other Wix products

Advanced CMS features

Wix for developers

Test Sites

SSO Logins

Wix Blocks

Advanced features

Learn how to create a site and manage its content with our intuitive editors. Know how to protect visitors' privacy and make sites compliant with accessibility laws.

Creating your site

Design and manage your site using intuitive Wix features.

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

Managing products and categories

Setting up shipping & fulfillment

Setting up payment and checkout

Designing your store

Managing your orders

Managing store inventory

Managing the Members Area

Managing store emails

Promoting stores sales

Dropshipping with Wix Stores

Setting up sales channels

Using the Wix app for Wix Stores

Wix Stores

Setting up Wix Bookings

Creating your services

Managing your staff

Managing your calendar & bookings

Memberships, packages & payments

Customizing Wix Bookings pages

Emails, SMS, and promotions

Using the Wix app to manage your bookings

Video conferencing with Wix Bookings

Fit by Wix

Wix Bookings

Setting up Wix Events

Creating your event

Designing Wix Events

Managing your events

Managing your guests

Selling event tickets

Wix Events

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