SOLVED Helium/Gantry5- Help, why do pages load backwards/ how to fix?
-
-
- Eden
- Rocketeer
- Posts: 89
- Thanks: 1
- Web & Graphic Designer Programmer Search Engine Optimization Specialist Business Owner Operator
-
Hi,
I have noticed recently most the Rocket theme templates are loading bottom content first, then the top last... this is compeltely counter intuitive to how a page usually loads... eg, you load the top content first... the menu, showcase area then below content etc.
It seems for some reason, that rocket theme templates (helium is my example in this instance), now seem to load bottom or middle content then the menu then the showcase area last... this is crazy. it makes the page look totally wierd on load, making content skip all over.
This never used to be an issue i assume its something to do with the page load process running in gantry is now more async in gantry 5 so some fast text based stuff loads first, but it makes the page look so stupid on load, not to mention compeltely unusable... i just cant get past it as it is a terrible user experience.
Any help would be appreciated. it seems the owl carousel is likely the cause, its like the thing has the lowest load priority or something even tho it needs to load almost first (should be menu header first, then carousel) - Last Edit: 7 years 3 weeks ago by Eden.
- --
Eden Brownlee
Accentuate IT
Creative Web and IT Solutions
Web: http://www.accentuateit.com.au
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
Re: SOLVED Helium/Gantry5- Help, why do pages load backwards/ how to fix?
Posted 7 years 3 weeks ago-
Until all the JS and CSS has loaded the page can look a little off (that's true of any CMS). What you need to do is to ensure that the size of the page is at a minimum. For example, if you are loading huge images then these take time to download and this can slow down other resources from loading.
Other things that can help are the use of a compressor (e.g. our rokbooster or jch_optmize), global config gzip compression, global config "conservative" cache.
Finally, you can actually, hide the page page content until it's all downloaded and fade the page in... http://www.rockettheme.com/forum/gantry5-for-joomla/274668-how-to-make-pages-fade-in-on-load-in-gantry-5 .
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Eden
- Rocketeer
- Posts: 89
- Thanks: 1
- Web & Graphic Designer Programmer Search Engine Optimization Specialist Business Owner Operator
Re: SOLVED Helium/Gantry5- Help, why do pages load backwards/ how to fix?
Posted 7 years 3 weeks ago-
Thanks for that however I do understand what your saying but this does not resolve the issue... which regardless of optimisation is infact an issue .
The page us not loading content in an even fashion. Googles best practice pagespeed recommendations advise that pages load content most needed first so that the first viewed content (content at top of page) is first loaded so it can be viewed first... this simply makes logical sense.
So... the first content one will see is the first to render. From a usability point of view this is the most practical tjib to do. Otherwise one must wait for the entire 0age to load before anything is visible properly or viewable... which otherwise would be absurd.
Rt templates used to do this fine, other templates and cmses do this fine (sure some don't but again, this is because it is a problem not because we should accept it)
So. Again. The owl carousel in particular loads last... this is a problem meaning the entire page must be rendered before the first content a user sees can be read... is there a way to fix this or make it biggest priority ? - --
Eden Brownlee
Accentuate IT
Creative Web and IT Solutions
Web: http://www.accentuateit.com.au
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
Re: SOLVED Helium/Gantry5- Help, why do pages load backwards/ how to fix?
Posted 7 years 3 weeks ago-
Perhaps you could provide a link to your site and admin details so I can see what you are referring to.
Please would you post your URL, superuser id and pswd in the secure tab of your post and I'll have a look for you.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Eden
- Rocketeer
- Posts: 89
- Thanks: 1
- Web & Graphic Designer Programmer Search Engine Optimization Specialist Business Owner Operator
Re: SOLVED Helium/Gantry5- Help, why do pages load backwards/ how to fix?
Posted 7 years 3 weeks ago-
This message contains only secure information that is visible to MrT, moderators and administrators
- --
Eden Brownlee
Accentuate IT
Creative Web and IT Solutions
Web: http://www.accentuateit.com.au
-
-
-
- Eden
- Rocketeer
- Posts: 89
- Thanks: 1
- Web & Graphic Designer Programmer Search Engine Optimization Specialist Business Owner Operator
Re: SOLVED Helium/Gantry5- Help, why do pages load backwards/ how to fix?
Posted 7 years 3 weeks ago- As you will see on the site I have linked (please note it is basically a completely fresh helium installation) the owl carousel loads last and takes a long time. Upon load a big snapping motion takes place pushing all the already loaded center content down. This is a confusing and strange situation yo have from a user experience perspective. This seems to be the case on at least a few of the gantry 5 templates we have used in he past with the owl carousel. Even when optimised to the best possible page speed using jchor other means along with the best image compression possible.
- --
Eden Brownlee
Accentuate IT
Creative Web and IT Solutions
Web: http://www.accentuateit.com.au
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
Re: SOLVED Helium/Gantry5- Help, why do pages load backwards/ how to fix?
Posted 7 years 3 weeks ago-
Ok, so first understand that we are not the developers of the owlcarousel.js - we just use it.
The jump occurs because it takes time for the page to load, and then the owlcarousel.js to excute and retrieve your images (all of them in the slideshow). During that time at initial load the owlcarousel has no items within it and therefore occupies no space. When it does finishing loading the owlcarousel then takes space and pushed the rest of the page content (already loaded) down.
I added one line of custom.scss to give the carousel some height at the initial load point. So at least the page doesn't jump so much. This may need further refinement using media queries too.
But I honestly recommend that you consider using the page fade in solution that I gave you because I think that look better anyway. You pages is loading in less than 2.4seconds anyway so I don't think that's a big issue.
The alternative would be to not use owlcarousel at all and instead just just an image in that position.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Eden
- Rocketeer
- Posts: 89
- Thanks: 1
- Web & Graphic Designer Programmer Search Engine Optimization Specialist Business Owner Operator
Re: SOLVED Helium/Gantry5- Help, why do pages load backwards/ how to fix?
Posted 7 years 2 weeks ago-
Thanks for your input Mark, it is greatly appreciated.
Unfortunately, I would firstly stipulate that this is in fact a big issue for rocket theme as a whole, this is not an acceptable method of loading and is against all recommended load practices by Google and defies basic logic.
The loading fade in method is not a viable solution for what i feel are fairly obvious reasons... as such i will not go into them here, needless to say the page should load procedure-ally as one would view it, this is the way it should be done from an optimised method... this is how gantry 4 worked and all your old templates.
The fact you dont create the owl carousel code is all well and good, but you do use it in ALL your templates, as ushc, it seems all modern gantry 5 templates do not load in the correct and recommended method anymore, basically, they defy basic page load principals for fast and efficient web.
Basically, as far as i can see, your templates in stock form, are not able to be properly load optimised without changing things.
I have resolved the issue by removing the owl carousel entirely, then adding a simple slider module from monster templates, your competitor, i feel it is likely we will switch in the future to a competitor.
Your team should urgently look to address this, as this is a big issue for your templates as we have been forced to use your competitors modules to get your template to work correctly.
thanks for all your help, you may close this off as resolved however i would request you advise the team of this massive ovewsight
- Last Edit: 7 years 2 weeks ago by Eden.
- --
Eden Brownlee
Accentuate IT
Creative Web and IT Solutions
Web: http://www.accentuateit.com.au
-
Time to create page: 0.069 seconds