Hi WIX,
I read your recent Blog " 10 Essential (& Free) SEO Tools to Boost Your Website " and found a lot of useful information on the “Uber suggest” page. They had the following recommendations to improve my site’s loading speed. Are these achievable using WIX Code? I really enjoyed creating my website using WIX editor… but if I can’t achieve these improved website speeds, then I feel like I’m paying for a product which doesn’t fully meet it’s promise of “creating a stunning website”. Can you help me please?
Here’s something that will be of interest to you: We’re Getting Faster: Learn How to Get Your Site Ready
Thanks Yisrael, but none of that makes any sense to me as I don’t know how to code
I’m willing to take the time to learn, but are those fixes actually available to be used with Wix Code? Or are they only supported in html code?
Many of the speed improvements are under the hood so that even if you aren’t using code, you should begin to see some improvement. Wix is making a major effort to improve the performance of web site rendering and you should begin seeing improvements in the near future.
Site is loading very very slow
my site is loading very slow and the specially pages which has repeater and data set on it will loads very very slow and when it loads it shows the full blank white page and because of this visitors get little bit confused about whether the site is loading or not and sometime they leave the site because they think that site is not working.
I also added the pre loader to the site and it is working but what happen is when the site loads first it shows the white page for 7 to 12 sec the it show pre loader for 1 to 3 sec and then it shows the content on the normal connection and on LTE it loads little faster.
This is the pre loader code which i had used
$w.onReady(() => {
waitForLoading();
});
export function button6_onClick() {
$w(’ #columnStrip1 ‘).show();
waitForLoading();
}
function waitForLoading() {
setTimeout(() => {
$w(’ #columnStrip1 ').hide(‘FadeOut’);
}, 1500);
}
I think wix should add some built in pre load so that visitors will get the idea that the site is loading or not
I am waiting excited on website speed improvements!! That’s my biggest wish for wix!
Rishabh - The preloader, is kinda a fake preloader… Though there is a real one! Check out this post:
You just need to copy paste the following code into “tracking and analytics” → add “Costum code” (Make sure it is checked for all pages
This is the code to copy and paste:
<div class="loading" id="preloader">
</div>
<style media="screen">
/* Absolute Center Spinner */
.loading {
position: absolute;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
/* hide "loading..." text */
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.loading:not(:required):after {
content: '';
display: block;
font-size: 10px;
width: 1em;
height: 1em;
margin-top: -0.5em;
-webkit-animation: spinner 1500ms infinite linear;
-moz-animation: spinner 1500ms infinite linear;
-ms-animation: spinner 1500ms infinite linear;
-o-animation: spinner 1500ms infinite linear;
animation: spinner 1500ms infinite linear;
border-radius: 0.5em;
-webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}
/* Animation */
@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
<script type="text/javascript">
(function(){
var preload = document.getElementById("preloader");
var loading = 0;
var id = setInterval(frame, 64);
function frame(){
if(loading == 100){
clearInterval(id);
//window.open('welcome.html', '_self');
} else {
loading = loading + 1;
if(loading == 90){
preload.style.opacity = "0";
}
}
}
})();
</script>
Hi,
I recommend checking out this post regarding server side rendering.
Best,
Tal.
Thank you mattias!! Do you think you can assist on changing the color of the loading wheel?
You’re welcome Sulay, glad it helped
Hmm… I can’t figure out how to do it, but try comment on this post, that is where i found out how to do it.
https://www.wix.com/code/home/forum/show-off-your-work/real-preloader-on-a-wix-website
i am sure someone there can tell you how to do it
Hello, I found a great article, Click here → How to speed up wix site (7 easy tasks)
Here is their website speed