Hey everyone!
I’ve been working on a website in Wix Studio, and while the design looks great, I’m noticing some slow loading times. I want to make sure my site is as fast as possible for both desktop and mobile users.
What are the best practices for improving page speed in Wix Studio? Are there specific settings, image optimizations, or third-party integrations that can help boost performance?
Would love to hear your tips and experiences!
Hi,
Optimizing page speed in Wix Studio is crucial for providing a smooth user experience and improving SEO rankings. Here are some best practices you can implement to enhance your website’s performance, both on desktop and mobile:
Compress Images: Large image files can significantly slow down your site. Use tools to compress your images without losing quality. Wix automatically optimizes some images, but manual compression can help reduce file sizes further.
Use WebP Format: WebP is a modern image format that offers excellent compression without losing quality. Try using WebP images for faster loading times.
Lazy Loading: Ensure that lazy loading is enabled for images that are not immediately visible when the page loads. This means that images below the fold are only loaded when the user scrolls down.
Reduce the Number of Elements: Each element (image, text, widget, etc.) on your page requires a separate HTTP request, so try to minimize the number of elements on your pages, especially on the homepage.
Mobile Optimization: Make sure your site is optimized for mobile. Wix Studio allows you to customize the mobile version, ensuring it loads faster and is responsive.
Reduce Custom Code: Custom code is powerful, but it can also slow down your site if it’s not optimized. If you’re using custom JavaScript, ensure it’s as efficient as possible. Minimize the use of unnecessary scripts.
Use Velo for Optimization: If you’re adding custom features through Velo (Wix’s coding platform), make sure the code is lightweight and doesn’t rely on large libraries. Optimize JavaScript and CSS files to reduce the load time.
Alternative, if you do not want to invest much time on optimizing yourself, you can try our speed optimization Wix app for Website Speedy that comes with 14 days trial. It will do the optimization automatically for you.
You can install here it:- https://www.wix.com/app-market/websitespeedy
(Disclaimer: We are the developer of this tool and are happy to answer any questions you may have.)
It helped me in my time to change the format of the image, I really agree with the advice about the optimized image, it is better to upload such images.
By converting to .avif instead of .webp, you can achieve better image quality and more efficient compression. Please use the following site.
I’ve saved all the images in .avif using Squoosh. I’ve managed to reduce the size by up to 1 kb in some cases, but when I inspect the page, I see that it loads much heavier and with much more pixels than I specified. My page is getting more and more bloated because I’ve followed the instructions to make it lighter, and I don’t get above 75 on page speed.
Hi @Cathy_Correa , First, analyze your website again using Google Page Insights and learn about other factors that might affect page speed, such as Rendering blocking resources, fonts not optimized, HTTP Requests, etc. Sometimes, image optimization is not the sole solution to fixing site performance; you need to optimize the above-mentioned factors as well.
Below are some advanced techniques to fix them -
Eliminating Render-Blocking Resources
It is crucial for improving the speed of your Wix site, especially to enhance your Core Web Vitals and page load performance. I recommend you to try the following practices, it is best for fixing the issue-
Defer Non-Essential JavaScript - You can use the defer attribute to delay loading JavaScript files until after the HTML has finished parsing.
For example -
<script src="path_to_your_script.js" defer></script>
Asynchronous CSS Loading- CSS plays an important role in a website’s overall performance. For non-critical CSS, load the styles asynchronously so that they don’t block the rendering of the page.
Use media=“print” as a method like an example-
<link href="your-non-critical-styles.css" rel="stylesheet" media="print" onload="this.media='all'">
<noscript>
<link href="your-non-critical-styles.css" rel="stylesheet">
</noscript>
Optimized Fonts
Fonts are generally seen as a non-affecting factor for website performance, but sometimes using fonts other than the default fonts can make an impact on speed. So we need to optimize as well by using system fonts, which are pre-installed on users’ devices, so they don’t require any external requests to load, which can significantly reduce page load time. Loading multiple weights and styles of a font (e.g., bold, italic, light, etc.) increases the amount of data that needs to be loaded, so try to keep it as low as possible. Additionally, you can use display :swap like the below-mentioned example -
@font-face {
font-family: 'Roboto';
src: url('Roboto-Regular.woff2') format('woff2');
font-display: swap;
}
HTTP Requests
Too many HTTP Requests increase the time for loading time of the page because each HTTP request adds to the page load time, so minimizing the number of requests and optimizing the ones that remain is essential. Reducing the number of HTTP requests can dramatically improve loading speed. You can achieve this by combining resources like JavaScript and CSS files.
Alternatively, if you are looking for the automated way of approaching these issues and do not want to invest your precious time in manually optimizing it, Try Website Speedy - an optimization app that does the optimization of images, fonts, javascript, and CSS on its own. It comes with 14-day free trial.
(Disclaimer: We are the developers of this tool and happy to assist you if you are having any doubt regarding the same )