Speed Up Wix Websites: Top Tips for Images + More
As an expert Wix Designer, I recently watched Wix's "How to Optimize Your Site for Core Web Vitals" from Dan Shappir, Performance Tech Lead at Wix, and I wanted to summarize some of the top tips of what I learned and post it here for future reference:
Biggest Takeaways:
No, you don't need to shrink down your images for Wix websites! Optimizing images on Wix – That's right, you don't need to shrink down your images! One myth that Dan Shappir wanted to address is about the need to optimize the images before you upload them onto Wix. You do not need to resize the images' width and height to be as small as possible. In fact it's essentially the opposite – Wix automatically optimizes images and we do a really good job of it. Wix delivers the minimal amount of information to provide the best possible experience to each of your visitors based on their viewing device. Wix automatically transforms images' format into Webp files (.webp file extension is a file format developed by Google to reduce the size of images without having to sacrifice quality.) This format is supported by almost all browsers now, and Wix verifies that the browser actually supports it and if it does then Wix delivers the image using the .webp format instead which reduces images' overall download size by approximately twenty percent.You do not need to resize your images, as Wix servers automatically resize them and clip it exactly to the needed size of that particular session, resulting in the optimal usage of data. When uploading images to Wix, it is ok to use large images, but keep in mind that it is good to keep image file sizes under 8MB (which is way larger than any website image would need to be anyway!)
Animations:
Watch out for excessive use of reveal animations, which can slow the site down (such as a header flying in from the right). Strip animation effects such as Parallax animations do not impact load time. But if you have animation of text to fly in from the the right, this will slow down the overall page load time as until the the movement of that text ends then effectively you could say that the page hasn't finished loading because the visitor can't actually read the content of that header text until the animation finishes.
More General Top Tips to Improve your Wix website's Speed Performance:
Text: Use it! Text tells the user what the site is about. Meaningful text content above the fold (before a visitor scrolls) is important to help with user experience and load time. Text loads faster than images, and it is important to tell your user who you are before the user has to scroll.
Limit the number of fonts use on your Wix website: Keep it simple, the more fonts you have on a site, the more fonts have to be downloaded. So we recommend using just 1-3 fonts
Don't upload duplicate fonts to the Wix editor, make sure you only have one version of the fonts used on the site.
Ensure good contrast with text: If you have white text over a dark image, but the site has a white background, the text may load first which will not be legible until the image is loaded to provide the contrast.
Avoid putting text IN images, text over-layed on top of the image is fine, but don't put the text in the image itself, such as with Photoshop or the Wix Image editor as this will mean that until the image is loaded, the text would not be loaded. It is also bad for SEO and accessibility as search engines and screen readers cannot read text that is in an image.
Avoid large download files. Your images and files shouldn't be larger than 8MB.
Use JPGs over PNGs where applicable, as using jpgs results in smaller download sizes for the same sized image, and have almost the same quality. PNGs really are only needed for transparency needs.
Use SVG for shapes/logos: SVG files are actually better than JPG and PNGs so if you can use a SVG, it's smaller, sharper, and remains sharp when zoomed in on and is usually much smaller than any other image format.
Generally avoid animated GIFs - tiny animated gifs like a small moving arrow are ok, but avoid larger animated GIFs. Use a looping video instead, which load more quickly.
Set Image Strip background colors to match the background image's primary color, which helps ease the transition for viewers, and without this it can have a negative impact on performance measuring tools.
Wix Mobile Speed Tips:
Make sure your pages look good on mobile (in Wix use the mobile editor), as more and more people are using their phones to visit websites, so it is very important. You can use the Wix mobile editor to add or hide certain elements to simplify the mobile user-experience, making it easier for mobile viewers to navigate the website. Hide less important content, and magnify the more important content. You can also reduce the number of items in galleries, repeaters or feeds to help reduce the length of the mobile page.
This was a great webinar and explained a lot of questions that I've had over the years with the Wix platform. So stop resizing your images, use text, and make sure your mobile website is optimized for your users and your WIx website will soar in speed.
Happy Wixing!
