When it comes to the Search Ranking and user experience of a website, one of the primary factors to consider is the performance of the website. A fast-loading website ranks better in search ranking and gives a smooth experience to website visitors.
This guide will help Wix Studio users in increasing their website performance. I will share some tips and tricks that you can apply right away to make your website lightning-fast.
What is Website Lighthouse Performance and How to Check it?
Website performance is one of the four core web vitals of a website. The performance score of a website determines how fast or slow a website is during the loading time. How much time a webpage takes to completely load is determined using the website performance.
Although many different metrics are considered while calculating the lighthouse performance, there are 5 main elements you should consider the most -
First Contentful Page - The time taken in painting/showing the very first element(text or image).
Largest Contentful Page - The time taken in painting/showing the largest element(text or image).
Total Blocking Time - This is the addition of time taken in the First contentful page and time of interaction. This metric calculates the response time after user interaction(click, keypress, touch, etc).
Cumulative Layout Shift - It calculates the movement of elements across the page from one frame to another.
Speed Index - The speed appearance of the content on the page visibly.
These five parameters are important in determining the performance of a web page's performance.
How to check the Wix Website Performance?
To check the performance of your Wix Studio website, follow these simple steps -
1. Go to Page Speed Insight.
Place the link of the webpage you want to test into the text area and press analyze. The Page Speed Insight will run the analysis of various core web vitals.
After a few moments, Page Speed Insight will analyze and give all the matrics including the performance score.
What score is good for website performance?
Although you must try to get a maximum performance score for your website pages, a moderate score is good as well. Remember, the higher the score smaller be loading time of your webpage.
A performance score of 90-100 is considered excellent, a score between 50-89 is a good score, and a score less than 49 is a bad score. If you have it, your website/pages need improvement.
How to Increase the Performance of Wix Studio Websites
Now that you understand the meaning and importance of website performance, let us take a look at some steps you can take to increase the performance of your Wix website.
For illustration purposes, I will use the following website I made using Wix Studio. It has a performance score of 98 on the desktop. I will share how I achieved it.
Start with the light element on top of the page
Your website visitors will see the top of the page right after your page loads. We have to make sure that the first section loads instantly. This will help us get a better score for the First Contentful Page.
To achieve it, use light elements like text, vector art, icons, etc in the top section. Because these elements are relatively small in size, they will load fast. For example, in my design(see image below) I have used all vector art and illustrations along with text. Thanks to it, my first contentful page becomes visible within 0.7 seconds(See report here).
Use fewer fonts on the page
Using more fonts on the page will result in a longer loading time. The best practice is to use fewer fonts that not only look good but also are lightweight. Airel, Poppins, Monsterrat, etc are some fonts that are very good for performance. You can find lots of amazing lightweight fonts on Google Fonts.
Furthermore, unless specifically required, use 2-3 fonts in a page. In your Wix Studio, you can use one Font for all headings and another for all paragraphs.
Avoid large layout Shifts
While designing the webpage, avoid large layout shifts. Because Wix Studio has a drag-and-drop editor, it is very easy to place elements out of alignment. Block Editors have more consistency in layout.
Thankfully, Wix Studio has the margin and padding controls for all layout tools and elements. You should use these parameters whenever possible. Keep the margin and padding the same for similar types of elements and layout tools. The same goes for alignment and item spacing as well. Keep everything consistant.
To miniize layout shift, use same margin(for example 20px) for all text elements and images. Similarly, if you are using padding for container, cells, or sections, keep them consistant.
The image below shows a margin of 10 % from the left side. Once set, keep this consistent across the page.
Use fewer Java Scripts on the page
One of the biggest factors that decrease the performance of the website are java script. The more javascript you have on your page, the slower will be its loading time. You need to use more HTML and CSS while keeping the JS as minimal as possible.
Compared to the classic editor, Wix Studio has a more optimized code and also minifies the code by default. Hence, most users won't need to specifically work on optimizing the JS. The only element you need to worry about is the app widget which we will cover in the next section.
Use App Widget in Later Sections
One of the reasons why Wix is popular is thanks to its easy to set up and use Apps. Wix Store, Blog, and Bookings are some examples of apps used in the Wix websites. Although these apps make the setup easier, it comes at a cost of website performance.
Because the Wix widgets use JavaScript, it results in a decrease of the website performance. To make sure that these widgets do not have a heavy impact on the website performance, make sure to use the widget after 2nd section of the web page.
This will give your page widgets time to load while users go through the first sections. In my example, I am using the Wix Program widgets in the 5th section, giving it time to fully load while visitors read the other content of the page.
Use Fetch After the Page Loads
If you are using the CMS collection and dynamic pages in your Wix Studio website using lazy fetch can immensely enhance the performance of your website. In your dataset setting, you can find the option to either fetch pages using the cursor, fetch items after page loads or both.
Using these options will load the static element of the page first. Only after these elements loads will the dynamic element populate the connected items.
This method will enhance the performance of your Wix Studio website.
Use Website Speedy
For years Wix App Market didn't have any dedicated app to increase the core web vitals of the Wix Website. That is until now. In 2024, the website speedy launched its services for Wix and has become an instant favorite of SEO experts and Wix users alike. This app will enhance your website speed by many folds and help you achieve a fast loading time.
This app is especially good for dynamic app pages like Store and Blog pages.
Conclusion
Thanks for reading! I hope that this guide will help you increase your Wix Studio website speed. You should be able to achieve upto 95 speed score for your pages easily using these tips and tricks.
Wix Studio has come a long way and now has an excellent performance for its static and dynamic pages. By using the simple tips and tricks shared in this article, you can further enhance the performance.
Comments