8 Ways to Improve Your Core Web Vitals in Wix

Core Web Vital in the recent updates from Google focusing on the user experience on your Wix website, and page speed is more important than ever. Luckily, here are some of our advice you could use to check and update your site, so you don't get penalized for a sluggish website. Three key components of Core Web Vitals:

• Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
• First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of 100 milliseconds or less.
• Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less.

1. Optimize image size on your site.

I always use Tiny PNG/Tiny JPG for this. It seems like they're high-quality stock photo sites everywhere on the internet nowadays so you can download free photos for personal use or business. And it is likely to be really big JPG file sizes, to compress it for your website, you should use Tiny PNG/Tiny JPG to reduce the size and upload the smallest version. As a result, your website will be 10 times faster than the original images.

Of course, designers also prefer users for choosing image types wisely, such as using JPEG (JPG) or PNG format. There are plenty of popular websites using this format because it is very easy to compress this type of images but still keep the good quality. And most cases you can remember the following:

• JPGs should be used for photography : This kind of image type can save all of the colors in a photograph in a very small, efficient file size. A great way of using JPGs is that you won't end up with a large amount of file to save a photograph as PNGs.
• PNGs suitable with large Graphics or flat color : This include logos, images with lots of text on it. Despite providing higher quality than JPGs, PNGs come with large image size files. With that said, great quality images help you design more easily which you can zoom in and out without losing any frames. Moreover, they support transparent background images.

It is crucial to optimize image because it can make your website dramatically lighter, thus improving UX UI design point and your search engine ranks on Google. Always try to use JPG or PNG format for large landscape images and graphics.

2. Optimize image dimension.

Don't use a 4k image on a 500px thumbnail placeholder. Make your thumbnail file size as small as possible. Just remember, the impact of your large thumbnails will have a mass impact on your website load time. It usually presents main products during the shopping process. if they prevent your website from loading quickly, eventually you could lose potential customers.

With the right images, designers use to find the right dimension for your website to balance size and resolution. The larger your resolution, the higher the file size will be. In the designer world, high resolution images are great, but in the web world, large images can slow down your website speed. This affects UX design and as a result, your ranking search engine would be dragged eventually. And how do you balance between size and quality? First, it's important to talk about image "sizes" and here's an overview of two main factor :

• Optimized file sizes: This is the factor that can slow down your page's speed. For example, a 5MB image is huge and a 150KB image is much more effective. if your image file sizes are too big it is either your image dimension is too large or your image resolution is too high.
• Image sizes: You probably think that your image dimensions usually like 4x6, 5x7, 3x4 just like traditional printed photos. But for websites, the dimension for images depends on height and width pixels. For example, a typical image on a website or a blog might be 1200 x 630 pixels.

3. Optimize your content delivery time with CDN

Beside compressing, another important thing is to activate Content Delivery Network (CDN) for images. CDN is known as a network of servers around the world that have the ability to store your content such as high-quality images, JavaScript code or any popular animations to lower your website sizes significantly. Since servers are located in many different locations, images can be used faster from the server close to users.

Furthermore, because of faster loading speed and performance, a CDN also increases your search engine rankings and optimization. Google gives priority to crawl your website more often, and that is the reason your website will quickly recognize content changes and updates related to your content. This strategy will help your content get into more search results faster. If this comes in handy, content will be widely available to users with a short amount of time.

4. Page caching

Some content of your site will be saved on the user browser so it loads faster when they reopen the site. This is another method to help you improve your website loading time and optimize your site to search engines. Page loading time can significantly affect your user experience and site convert visitors into buyers.

For instance, Google research that it just needs a second difference on website loading times can cause a quick drop in web traffic. Hence, the search engine companies are considering loading time also to be the main factor for positioning your site rank in Google search results. This means you'll need to make sure that your website already reduces the size of your image files and pages to pursue your SEO strategy.

Cached Pages are created when search engines like Google want to backup another version of your website which can serve up to a user in place at the right version of your website. This is beneficial because when serving the recent version of a page requires accessing a database, which can take more time than serving an already stored version of a website (cached).

Also, page caching allows users to view the cached version of the website just in case the current website is unavailable due to the internet corruption, web page is just taking a long time to load or a recent removal of the website. Long story short, Wix always has this feature on so you do not have to worry about it, unless you are a pro you also have the option to do some manual caching too.

5. Lazy load

Boosts loading time by replacing high-resolution images with low-resolution versions. The low-resolution placeholders load instantly, even on slow networks, while your high-resolution content loads in the background. Once loaded, the high-resolution images automatically replace the placeholders. Wix automatically optimizes your images, turns them into Webp format for fast loading, places them on the CDN, and sets a lazy load feature.

6. Optimize JS and CSS

You currently do not have access to Wix CSS stylesheet, but you have the ability to limit the amount of font use which directly affects site speed. Limit your design to 2-3 typefaces. I only use 1 typeface for my site (different fonts like font weight, font size, etc). For JavaScript, do not overuse Wix animation on every individual element on the page including scroll effect and element animation.

7. Delete unnecessary plugins, third party apps

As the title says, we recommend users not to use many external applications or third party apps. For example, if you use gallery app, payment app, event app, store app, booking on homepage or any page, your website will be dramatically load slower. This simply because more apps means more scripts to generate on your site and CSS. So, the browser gets more requests to take in, it takes more time.

But if you want to use 100% of apps but also want to load your website faster, at least put it at the bottom. In theory, the top content will be loaded first and users see the top content and slowly reveal all the other apps by scrolling down. By the end of content, all the apps have loaded successfully. As a result, users don't know that the site is slow loading.

In the end, use Wix apps wisely and remove unnecessary functions.

8. Remove any unnecessary redirects.

As the page loads, users need to wait longer so they can be redirected to a different destination. (Increase amount of Requests). Check your internal links and change them to the correct path. There are tons of tools that you can use to check and get a comprehensive report so you know where to fix them.

Our favorite tool is still GTMetrix, but there are other free tools out there that you can also benefit from:

1. Web.dev
2. Chrome User Experience Report
3. Page Speed Insights
4. Web Vital Extension
5. Google Search Console‍