Fullpage js Performance when using many slides / alternative solution?

[sharpe89]

Hi Alvarotrigo

I have almost finished a website for a client but I'm now almost at a standstill with regards to site performance on tablet / mobile devices (most notably Apple iOS Safari, although it works fantastically well on my android phone's chrome browser)

I understand, especially with the size of the DOM and canvas (safari apparently struggles/ crashes with anything over 20,000px in height or width), that you should expect a website to load and perform slowly.

Unfortunately the client wanted to have all website content available on first load so there is nothing we can do with regards to removing content. I have also tried/failed to introduce AJAX loaded content for each section slide too.

Temp link - www.navigatorfp.com.gridhosted.co.uk

I've tried the usual hardware accelerated but it doesn't seem to help much. If there are any CSS / Javascript tweaks that you would recommend to enhance performance that would be fantastic. :)

Much appreciated.
Stephen

[alvarotrigo]

First of all, make sure you are using css3:true (which is the default value). CSS transforms are way faster than jQuery ones.

Also, you can try using lazy load for images, videos, backgrounds and audio elements.

A new functionality for it has just been introduced in fullPage.js 2.6.6 as you can see here .
For the next version I'm planning to use a lazyDistance option as well.

In order to lazy load backgrounds, just follow the steps I detailed here.

And if you wan to use AJAX to load the sections or slides content, I don't see why you couldn't do it.
Just combine it with callbacks such as onLeave or onSlideLeave and you'll have a good result.

[sharpe89]

Alvarotrigo

Apologies for the delay to this response. Many thanks.

As far as AJAX and dynamic content goes, I'm in no way an expert and this is an urgent request more so. I would greatly appreciate some help on this from yourself if you have the time. Obviously I'd pay you for your dev work, even if it is to start something off for me and I can repeat the process throughout each slide. I can then possibly finish the job.

If you can email me at design@xinked.com with details you may need to work out a quote. The website is now live at www.navigatorfp.com

Your help would be much appreciated.

[alvarotrigo]

I do not see any performance problem in the site you posted. Can you explain what's your problem?

[sharpe89]

Apologies for now explaining right. I fixed the issues regarding Performance on iOS devices however it is the loading time that concerns me.

My main concern now is site loading speed as the client isn't happy with it taking more than 15 seconds to load the website each time. We are using a good host as other single pages aside from the home page (i,e. http://www.navigatorfp.com/personal-cfo) are working well. Basically we are trying to achieve a website that loads content dynamically depending on the section/slide the user is on so that it speeds up the initial first load of the website.

I have tried a method of just having each sections first slide to load and the speed of the website loading is fantastic. In this case - Home, Who We Are, What We Do, How We Think & Where to Find Us

I would hopefully like each section to load their slides once the user has reached the parent slide (1st slide) but I have no idea where to start for this to be achievable.

[intissar962]

me too i have a bad performance on my website when i use fullpage.js

[alvarotrigo]

fullPage.js has nothing to do with loading speed. The minified file is less than 40kb and it won't suppose any overhead.
Any load performance is due to your own scripts or images.