[Bo JParticipant]

Hi,

I am working on a new website, which uses X and has a slider just like your own intro site. That works great, except one thing. When the page (re)loads, it loads parts of my main site page first before the slider takes control. This looks foolish and I want to get rid of it. I have played with different settings without luck.

I can provide a link to the running site privately.

Could you please advise me on what I can do to make it load faster or prevent the rest of the site to load ?

Thank you !

/Bo

[ChristianModerator]

Hey Bo,

Please read through this thread http://theme.co/x/member/forums/topic/slider-loading-last/

Hope that helps. 🙂

[Bo JParticipant]

Thanks for the swift reply. I can confirm that it’s likely the loading of the javascript and height calculation that takes time. The only time I can make it go away, is when I set fixed sizes.

I am trying to find a solution, because loading parts of the page before the slider is not going to make it useful. So here’s my newbie ideas :

a) Is it possible someway to hack it to display only white while it loads ?

b) Can I anyway ease it by using the wordpress plugin which allows you to put javascripts in a global load ?

/Bo

[Bo JParticipant]

To add further. I am wondering why the same doesn’t happen on your own demo site ? I mean there one would also need to calculate the height. Also on your demo site it does lag a bit loading, but background is all white as it should be.

[SupportMember]

Hey!

Thank you for using the theme as always!

I checked the website again and maybe optimizing the page loading speed will improve how the slider and header behaves.

There are lot of things that you can do to optimize the website speed and page load. You can do the following:

1. Optimize all images with AI/Photoshop before uploading to server ‘save as web safe’ jpg
2. Once all images are on the website optimize with ewww optimizer plugin twice 1hr 10mins apart.
3. Install wp-smushit run once to remove jpeg extra data, then uninstall.
4. Use BWP minify plugin.
5. Install WP-Super cache, select all recommended settings, use memcache option, update .htaccess rules, increase cache to 840000, Save then delete cache.
6. Logout your website, visit every page at least once to create super cache files.
7. Join Cloudflare setup your website on their CDN, Choose options: Full CDN Optimisation save then activate purge files. once done log out.
8. Have a cup of coffee.
9. Visit your site after 20 minutes or so.
10. Dont forget to smile.

You can also utilize page preload like this: http://codecanyon.net/item/wordpress-site-preloader/6421981

Anyway, you can observe the same thing is happening for Slider Revolution demos. The way they calculate the height for these elements is with JS, so it has to wait until the document is loaded to process the height of these things, which can cause the brief appearance of the header and then the video. Improving the page speed should minimize the appearance duration of the header close to zero.

Cheers!

[Bo JParticipant]

Hi,

I did some optimizing on the site and cut down a second last night, I would say I need at least one sec more and all profiling says it’s the javascripts that’s the problem.

3. Install wp-smushit run once to remove jpeg extra data, then uninstall.

I already did.

4. Use BWP minify plugin.

This I already tried, I especially want to use defer javascripts, but every plugin who offers this makes the site fail (including minify). The site doesn’t load the slider and the page is all messed up.

5. Install WP-Super cache, select all recommended settings, use memcache option, update .htaccess rules, increase cache to 840000, Save then delete cache.

I have that installed, but my hosting requires an upgrade to use memcahce, I am thinking about purchasing it.

7. Join Cloudflare setup your website on their CDN, Choose options: Full CDN Optimisation save then activate purge files. once done log out.

I am using this.

8. Have a cup of coffee.

Took a pepsi max.

So all in all , I agree loading of the site is where I need to work a bit.

Do you have suggestions to make defer javascripts work with X ?

[Bo JParticipant]

I have investigated further. Turned out that some of the long loading time could be reduced by removing other plugins, so the load time is now faster and I don’t see the the page load before. But I am still not able to make defer loading of java script work with the X theme, the slider doesn’t load. I can’t use the Super Cache minify JS, simply because it requires java and the hosted machine I have has no root access. I tried with other php based solutions but no luck.

Can anyone tell me how to make defer loading work ?

/Bo

[ChristianModerator]

Hey Bo,

You can try the methods discussed in this thread http://theme.co/x/member/forums/topic/optimisation-guide-for-x-themers-definitive-guide/

Please make sure you backup your site first so that you can revert to the previous version if the new setup doesn’t work.

hth

[ChristianModerator]

Hey Bo,

You can try the methods discussed in this thread http://theme.co/x/member/forums/topic/optimisation-guide-for-x-themers-definitive-guide/

Please make sure you backup your site first so that you can revert to the previous version if the new setup doesn’t work.

Hope that helps. 🙂

[Bo JParticipant]

OK, I have now the site down in 2.5 load time, which is more then 2X better than your own demo. It still loads body content and I am starting to get frustrated.. I now look into the source of your own demo, which has been my proof as it was possible to make it work, which I also mentioned in this thread. But I see your front page doesn’t even use the slider plugin ! Seriously, I have spend *much* time on improving speed on my site and I see this is the same advice you give other with similar load problem. I feel mislead.

I might be wrong, but I seriously doubt it’s possible to make it work with the current plugin.

Sorry for the hick up, but I am at a dead end on this one.

[Bo JParticipant]

I have now found a hack to make it work. I warn you, it’s not very nice, but it sure does work 🙂

1) Install plugin “Per page head”, which gives you an extra field on the bottom of the edit page, where you can insert code to go directly into the header of the front page or any other page.

2) Make sure your main components have an id setting attached. This for me involved editing in the integrity theme directly.

In the files wp-header.php i modified :

<header class=”masthead” id=”integrity-masthead” role=”banner”>

In the file wp-footer.php I modified :

<footer class=”x-colophon bottom” id=”integrity-footer” role=”contentinfo”>

So now we have an id to reference

3) Adding to the header of the front page :

<script type=”text/javascript”>
function show() {
AA = document.getElementById(‘post-3034’);
AA.style.display = ‘inline’;
AB = document.getElementById(‘integrity-masthead’);
AB.style.display = ‘inline’;
AC = document.getElementById(‘integrity-footer’);
AC.style.display = ‘inline’;
}
setTimeout(“show()”, 3000);
</script>
<style>
#post-3034 {display:none;}
#integrity-masthead {display:none;}
#integrity-footer {display:none;}
</style>`

You should look into the page source and find what you need to replace with ‘post-3034’ in your case.

What this does is it waits with loading everything else than the slider. My load time didn’t increase other than a very very minimal load (maybe). Also people will look at the slider first, so delaying a split second is not a problem, once they scroll down it will be load for sure.

[SupportMember]

Hey!

Wow! Nice work. This is some god-like work around. Glad you figured it out. 🙂

[Author]

Posts