Canvas Support

Mobile takes 15 seconds to load, desktop takes less than 2. Any ideas why?!?

17 replies · opened Apr 26, 2019

ZZeroFraksApr 26, 2019

I am pulling out my hair here to understand what the problem is on mobile.
I just quickly grabbed your corporate-3 page, modified it to my needs, then uploaded.
On my machine it is quick, real quick in loading... but on mobile with 4G or WiFi connection... the phone actually goes to sleep BEFORE it's loaded.

I cannot use the website like this, but more to the point I can't understand why.

I thought it may be because of the video I was playing on the slider, but even changing that to an image made ZERO difference... I think it's coding, rather than elements slowing it down.

the temporary webpage is https://salonesvip.cl/v2/

This should be much faster... please help

ZZeroFraksApr 26, 2019

I just created a new version on a different server with a different host... same problem.
Lightning fast on PC... deadly slow on mobile.

SSemicolon WebSTAFFApr 29, 2019

Hello,

We have checked out your Website: https://salonesvip.cl/v2/ and on Mobile Devices it loaded for us in about 4.5 Seconds while Desktop is considerably faster. There are number of factors related to this. Firstly being the Processing Speeds of both the devices causing the delay. To counter this, you can always choose to display your Website without the Page Transition on Mobile Devices which will display the Website instantly while it loads the Page's Content in the Background. Additionally, you can also choose to show smaller images on Mobile Devices which will also load faster using Srcset: https://css-tricks.com/responsive-images-css/ .

However, we noticed that the Previous Versions of your Website: https://salonesvip.cl/ loads fast on Desktops while on Mobiles it takes more than 20 Seconds. So, we assure you that this does not appear to be an issue with Canvas Template codes.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

ZZeroFraksApr 29, 2019

Hi there.

Thanks for the quick reply.
I thought that the mobile version didn't have transitions on... could you please explain how I would go about having full transitions on PC, but off on mobile.

And yes, the previous version is terribly slow, hence the fact that we are trying to find a faster alternative.
: )

If you could give me a quick step to step on how to deactivate mobile transitions and generally have a faster experience on mobile, that would be amazing.
Again, thanks for the quick reply!

Paul

SSemicolon WebSTAFFApr 29, 2019

Hello,

We absolutely understand and we are more than committed to make Canvas faster on every device. However, these are sometimes out of our control since some external services like Youtube, Vimeo or Google Analytics can sometimes be the cause of delays which causes the Loading to display for a Longer time.

Simply add the following code on the first line of the pageTransition: function() Function Block: 

if( $body.hasClass('device-sm') || $body.hasClass('device-xs') ) {
	$body.addClass('no-transition');
	return true;
}

This will disable the Page Transition on Mobile Devices and display the Page instantly. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

ZZeroFraksApr 29, 2019

Hi there, thanks for the reply.

Ok, so this would be in which file exactly? The function.js file in the js folder?

I am still playing around with everything as it was when I downloaded it... so that would be Package-HTML>HTML>js>functions.js

???

Thanks

SSemicolon WebSTAFFApr 29, 2019

Hello,

Yes Yes! Apologies about not mentioning the file. We missed it by mistake! Yes you would have to add the above lines of code in the js/functions.js File. Your codes should look something like this: 

pageTransition: function(){
	if( $body.hasClass('device-sm') || $body.hasClass('device-xs') ) {
		$body.addClass('no-transition');
		return true;
	}

	if( $body.hasClass('no-transition') ) { return true; }

	...

},

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

ZZeroFraksApr 29, 2019

Ok, thanks for clearing that up.

I tried both bits of script, and each one shows an error in Dreamweaver... is this ok?

SSemicolon WebSTAFFApr 29, 2019

Hello,

The way you have copied the Code is incorrect. Please make sure that the above code is copied inside the pageTransition: function() Function Block as demonstrated in the example above.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

ZZeroFraksApr 29, 2019

Ok, so on line 534 I have the following code:

	pageTransition: function(){
		if( $body.hasClass('no-transition') ) { return true; }

		if( !$().animsition ) {
			$body.addClass('no-transition');
			console.log('pageTransition: Animsition not Defined.');
			return true;
		}

		window.onpageshow = function(event) {
			if(event.persisted) {
				window.location.reload();
			}
		};

So I need to change that??

ZZeroFraksApr 29, 2019

Or, if you could send me the file with the code updated, and I'll just swap it out.

Thanks

SSemicolon WebSTAFFApr 30, 2019

Hello,

You will need to paste the codes we have provide you with. This one:

pageTransition: function(){
	if( $body.hasClass('device-sm') || $body.hasClass('device-xs') ) {
		$body.addClass('no-transition');
		return true;
	}

	if( $body.hasClass('no-transition') ) { return true; }

	...

},

and place it just after this line: pageTransition: function(){. Thats it.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

ZZeroFraksApr 30, 2019

Sorry, the instructions you are giving me might be simple for you, but not for me.

I THINK you are talking about line 534 of the functions.js file ...

Do I replace line 535?
Do I overwrite both lines, or none, or just the first?

and no matter what I do, the line of code you sent with the dots " ... " always shows as en error.

SSemicolon WebSTAFFApr 30, 2019

Hello,

Thanks for your Valuable Patience!

Consider replacing the exiting js/functions.js file with this File: https://www.dropbox.com/s/55sgsu0jg0n7ft4/functions.js?dl=1 .

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

ZZeroFraksMay 3, 2019

Thank you so much.

Switched the files and yes, big difference.
Also had a look at the file and the moment I opened it, it shows an error... but works perfectly.. must be Dreamweaver having a moment.

Thanks!!

SSemicolon WebSTAFFMay 4, 2019

Hello,

Really Glad that your issues were resolved. It would be great if you can list the error here so that we can check upon it.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

ZZeroFraksMay 8, 2019

I have another question... I think it's a simple fix... can I ask here, or should I create another ticket? It's simple changing color of font in a text-rotater in slider-parallax.

SSemicolon WebSTAFFMay 9, 2019

Hello,

It would be great if you can please open a New Topic for any new Issue as it would help other users in finding the solutions more efficiently.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard