How to optimize your website for better performance
Web Performance plays a major role in the online journey. High performing sites increase brand perception—giving you a competitive edge online and a reason for users to keep coming back. Faster sites get higher engagement and retain visitors for longer, increasing sales and your bottom line.
In order to ensure an excellent user experience, you need to constantly optimize your site for performance. And with the advent of Google's new performance metrics, Core Web Vitals (CWV), there’s never been a better time to get a handle on site optimization.
CWV metrics simplify performance measurement and monitoring by assessing three site factors that impact page speed. But why should this matter to you? Because Google is integrating Core Web Vitals into its search algorithm, which means these metrics can play a role in how the world's largest search engine ranks your site.
At Wix, we work to constantly update our software and improve our infrastructure to make our users' sites load and operate as quickly as possible. However, there are a lot of other factors that contribute to a site’s performance like apps, design features and media, which is where you can make an impact.
In this article we’ll walk you through various components that impact your site’s performance so you can stay ahead of the curve as Core Web Vitals become a new performance measurement standard.
Introduction
Top-of-mind priorities for optimization
In this section, we’ll walk you through some things to ask yourself and insights you can uncover to improve your site’s performance right off the bat.
What’s your site’s purpose?
When thinking about web optimization, a good rule of thumb is to consider your site’s goals. This will help you understand the kind of site experience you want your visitors to have and give you a better sense of the actions you want them to take while exploring your site.
Check your site’s speed status
Before you begin optimizing, you’ll need to check your site’s loading time and find out what might be slowing things down. Wix’s new Site Speed dashboard in the analytics dashboard makes it easier to see how your site performs based on real user measurement (also known as field data.) You can also check your PageSpeed Insight score, based on lab data, for both mobile and desktop.
By checking your performance regularly, you'll gain the insights you need to keep your site moving in the right direction.
What do you know about your site visitors (and their loading times)?
Your site analytics will tell you a lot about your site visitors. Are they in countries with slower networks? Are they using lower-end mobile devices? If so, you may consider optimizing some aspects of your site to ensure optimal loading time no matter what network or device a visitor might be using.
Getting started
Optimize your media for faster loading
Photos, illustrations and videos can make your website more engaging—but they can also slow it down. To ensure faster loading for site visitors, Wix automatically optimizes images and videos for you. By using low-quality image placeholders (LQIPs) and delayed loading of media that is outside the initial viewport or (“lazy-loading”) your site will load quickly and smoothly. And as a visitor scrolls down a page, Wix will replace LQIPs with higher-quality media to optimize loading time.
Here’s a few things you could do to optimize your media to improve your site’s performance.
Use JPGs instead of PNGs when possible
JPG images can be up to 10x smaller than PNGs, and as a result, they can load much faster, so use them when appropriate. You should use PNGs when you need transparency in your images (which JPGs don’t support), or when images must have the highest possible quality.
Use SVGs for shapes, icons and logos
PNGs and JPGs work well for photos, but SVGs work better for shapes and illustration-style elements like logos. SVGs are usually much smaller than PNGs and JPGs; they also load faster because they’re directly embedded in the HTML. Plus, SVGs keep looking sharp no matter how much someone zooms in, so try to use them when possible.
We recommend using images/PNG only when the SVG is VERY complex (e.g. an SVG depicting the coastline of Norway and close to 250k) and the element’s dimensions in the layout are rather small—especially for shapes that display below the fold.
Avoid animated GIFs
Everyone loves a good animation, but animated GIFs usually have large file sizes and long load times. If you want to display animation on your site, try using a video instead since it uses smaller file sizes and can show content to users before it's fully downloaded. We recommend using GIFs for simple animated graphics or logos, or If your content animation contains a few frames and a small dimension size (e.g 100X100).
Tip: Get better performance with the Wix VideoBox
Using VideoBox instead of animated GIFS, provides better performance than external video players such as YouTube and Vimeo.
Media optimization
More media best practices
Here are a few more tips about optimizing media to improve your site performance.
Combine images when possible
If you're using image overlays, combining your images into a single image can reduce the total download size. This can also remove the need for transparency, allowing you to use a single JPG and speed up download time.
Sit back and enjoy lazy loading
Wix utilizes “lazy loading” to ensure quicker and smoother loading times. This is when a high-resolution image is downloaded and is replaced by an LQIP. To optimize lazy loading, move lower priority images further down the page so they have time to fully load.
Break large background images into sections
Web pages can run multiple screens long, and users can experience a delay as the browser waits for large background images to load. To speed things up, split large background images into vertical sections, each about a screen long. That way, lazy loading can help your page load faster, and images will only download when a user starts to scroll down.
Improve your site performance with the Wix video player
Use Wix’s built-in Wix video player instead of external video players like YouTube and Vimeo, to ensure better site performance.
Align background and primary image colors
You can set a color for background images such as stripes and columns. This color is visible when shown behind a partially transparent image and also appears before any image loads. Selecting a background color that matches your image's primary color can also improve how users perceive your page's experience.
A website that utilizes lazy loading for optimal load times
Further media optimization
Conclusion
Many agencies aren’t upselling soon enough. And they’re risking premature customer churn because of it.
Knowing when to upsell a client can feel more art than science, but a study by Vendasta claims to have found the perfect time to expand your relationship with a client: 3 months.
Ninety days may seem like a short timeline to start upselling, but if a client is satisfied with your work in that time period then upselling can bring them more value quicker than they expected. Alternatively, if they’re not satisfied, it gives you a chance to recalibrate so you can keep their business. Both of those scenarios result in additional revenue you would have missed out on had you not initiated the conversation.
Upsells are easier to approach and able to start earlier than most agencies realize. Here are four critical steps that will help you upsell sooner successfully.
Optimize your text
In general text loads faster than images, but there are still ways to optimize your site’s text and fonts.
Include above the fold text
Having meaningful text above the fold helps visitors learn about your site before scrolling. Make it engaging and actionable, so people want to keep exploring your site. Visitors may leave a site when above the fold text is not relevant (or worse, get the impression that the page isn’t fully loaded because it’s so empty), so use that space—and your words—wisely for the greatest impact and engagement.
Limit your fonts
We know that fonts can be fun, but using too many fonts, font weights and font sizes can look messy, be hard to read and affect your page’s performance. In many cases, text only becomes visible when a font file is downloaded, so if multiple font files need to be downloaded by a user, page load times may be slower. We recommend limiting the number of font variations on a page to five or fewer.
Only upload a custom font once
If you choose to use a custom font, make sure you don’t upload the same font multiple times. This can cause the same font to be downloaded multiple times for the same page— hurting your site’s performance and potentially slowing it down. The Wix Editor offers a great solution for uploading the custom fonts you want
while prioritizing faster loading times.
Avoid text in images
Using text and images together will deliver the greatest impact to site visitors. But having text inside of images can actually harm your site performance. Search engines or screen readers cannot detect embedded text inside an image. Also, in most cases, it's pixelated and harder to read. And, in terms of performance, it's not visible until the image is fully loaded.
Use reveal animations sparingly
Reveal animations can draw attention to important content, and enrich a loading experience. But when used excessively they can be distracting. Moreover, text will be unreadable until animations complete, which will increase loading time. For these reasons, we recommend that you don't overuse reveal animations.
Ensure strong contrast
When using text over an image, make sure there is a strong contrast with the underlying image and the background color. This way, the text will be readable before the image loads.
Example of a website’s above the fold
Text optimization
What else is slowing your site down?
If you still see site performance issues, here are a few more things to consider when updating for optimization.
Examine your site’s complexity and page length
One way to think about your page loading experience is to consider its page length. Pages on your site expand to support the amount of content you want to publish, but the more stuff you have on a page, the longer that page will be—and the longer it will take to load. Consider splitting overly long pages, into several shorter ones, that contain specific content.
Optimize your site for mobile
Use the mobile Editor to make sure your site looks good on every device. Choose a layout, add different content for mobile vs desktop, hide less important content and reduce the number of items in galleries, feeds and repeaters.
Know how iFrames, Google Ads and tracking tools impact your site
Site integrations such as iFrames (which download extra HTML and other resources) and Google Ads can negatively affect site performance. Use iFrames sparingly, and if using Google Ads, make sure that all boxes are visible. Tracking and analytics (T&A) tools can also slow things down, so only include those needed to analyze how visitors interact with your site. You can also test your site performance before and after (with and without) the tracking pixels, to better assess the performance impact they have on your site’s loading experience.
Limit your use of lightboxes
A lightbox is a popup window that appears on top of the main page content. Lightboxes are a great way to display important messages and announcements. But using a lightbox that automatically pops-up when a page loads, especially one that displays primary content, creates a delay until that content is visible. It's highly recommended to use lightboxes for extra information, such as special sales, and not for the main content of the page, such as the name of the business.
Conclusion
As Google’s Core Web Vitals roll out as part of their search algorithm, performance optimization should always be top of mind. At Wix, we're always working to make the 100s of millions of sites hosted on our platform perform their best by staying ahead of the latest developments in performance.
General optimization tips
Ready to learn more?
For an overview of website performance and to get your site up to speed, read our Intro to Performance article. Or to get a detailed understanding of Core Web Vitals, read our in-depth guide.
Author: Dan Shappir
Dan focuses on optimizing all sites hosted on Wix for speed. With over 25 years of software development experience, Dan has worked on systems ranging from multi-user games to missile trajectory simulations. He is a frequent speaker at technical conferences, a panelist on the JavaScript Jabber podcast and a member of the Google Chrome Advisory Board (CAB). Dan holds an M.Sc. in Computer Science.
Ready to learn more?
For an overview of website performance and to get your site up to speed, read our Intro to Performance article. Or to get a detailed understanding of Core Web Vitals, read our in-depth guide.
Dan focuses on optimizing all sites hosted on Wix for speed. With over 25 years of software development experience, Dan has worked on systems ranging from multi-user games to missile trajectory simulations. He is a frequent speaker at technical conferences, a panelist on the JavaScript Jabber podcast, and a member of the Google Chrome Advisory Board (CAB). Dan holds an M.Sc. in Computer Science.
Author: Dan Shappir
Performance Tech Lead at Wix.com
Learn more