What javascript needs to be in the header?

[Craig]

I’m trying to get my main calendar pages optimized for better pagespeed. When I use a plugin like Autoptimize, which puts TEC javascript into the footer, the month view for mobile breaks. (When I click on days of the month, nothing loads.)

I’m wondering which scripts that are loaded into the header are necessary there for things to work – especially for the month view.

I have disabled all plugins that are not TEC related and switched to the 2014 theme. I have included all the scripts that are loading in the header below.

Are all these necessary or can I move some to the footer?

Additionally, I’d give huge bonus points if you have any prepared files for Critical CSS in the header, as this would improve the appearance of the page loading faster.

Thanks,
Craig

<script type=’text/javascript’>
/* <![CDATA[ */
var tribe_bootstrap_datepicker_strings = {“dates”:{“days”:[“Sunday”,”Monday”,”Tuesday”,”Wednesday”,”Thursday”,”Friday”,”Saturday”,”Sunday”],”daysShort”:[“Sun”,”Mon”,”Tue”,”Wed”,”Thu”,”Fri”,”Sat”,”Sun”],”daysMin”:[“S”,”M”,”T”,”W”,”T”,”F”,”S”,”S”],”months”:[“January”,”February”,”March”,”April”,”May”,”June”,”July”,”August”,”September”,”October”,”November”,”December”],”monthsShort”:[“Jan”,”Feb”,”Mar”,”Apr”,”May”,”Jun”,”Jul”,”Aug”,”Sep”,”Oct”,”Nov”,”Dec”],”clear”:”Clear”,”today”:”Today”}};
/* ]]> */
</script>
<script type=’text/javascript’ src=’http://1de.e4c.myftpupload.com/wp-content/plugins/the-events-calendar/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js?ver=3.2′></script&gt;
<script type=’text/javascript’ src=’http://1de.e4c.myftpupload.com/wp-content/plugins/the-events-calendar/vendor/jquery-placeholder/jquery.placeholder.min.js?ver=2.0.7′></script&gt;
<script type=’text/javascript’ src=’http://1de.e4c.myftpupload.com/wp-content/plugins/the-events-calendar/vendor/jquery-resize/jquery.ba-resize.min.js?ver=1.1′></script&gt;
<script type=’text/javascript’>
/* <![CDATA[ */
var tribe_js_config = {“permalink_settings”:”\/%postname%\/”,”events_post_type”:”tribe_events”,”events_base”:”http:\/\/1de.e4c.myftpupload.com\/sewing-classes\/”};
var tribe_js_config = {“permalink_settings”:”\/%postname%\/”,”events_post_type”:”tribe_events”,”events_base”:”http:\/\/1de.e4c.myftpupload.com\/sewing-classes\/”};
/* ]]> */
</script>
<script type=’text/javascript’ src=’http://1de.e4c.myftpupload.com/wp-content/plugins/the-events-calendar/src/resources/js/tribe-events.min.js?ver=4.2.6′></script&gt;
<script type=’text/javascript’>
/* <![CDATA[ */
var TribeEventsPro = {“geocenter”:{“max_lat”:38.911538,”max_lng”:-104.787463,”min_lat”:38.911538,”min_lng”:-104.787463},”map_tooltip_event”:”Event: “,”map_tooltip_address”:”Address: “};
/* ]]> */
</script>
<script type=’text/javascript’ src=’http://1de.e4c.myftpupload.com/wp-content/plugins/events-calendar-pro/src/resources/js/tribe-events-pro.min.js?ver=4.2.5′></script&gt;
<script type=’text/javascript’ src=’http://1de.e4c.myftpupload.com/wp-content/plugins/the-events-calendar/src/resources/js/tribe-events-bar.min.js?ver=4.2.6′></script&gt;
<script type=’text/javascript’ src=’http://1de.e4c.myftpupload.com/wp-content/plugins/event-tickets-plus/vendor/jquery.deparam/jquery.deparam.js?ver=4.2.6′></script&gt;
<script type=’text/javascript’ src=’http://maps.google.com/maps/api/js?key=AIzaSyBB_kCZS6xhGU3KaFITZjN1S8ZA5YUTRuU&ver=4.6′></script&gt;
<script type=’text/javascript’>
/* <![CDATA[ */
var GeoLoc = {“ajaxurl”:”http:\/\/1de.e4c.myftpupload.com\/wp-admin\/admin-ajax.php”,”nonce”:”241f7ca89d”,”map_view”:””};
/* ]]> */
</script>
<script type=’text/javascript’ src=’http://1de.e4c.myftpupload.com/wp-content/plugins/events-calendar-pro/src/resources/js/tribe-events-ajax-maps.min.js?ver=4.2.5′></script&gt;
<script type=’text/javascript’ src=’http://1de.e4c.myftpupload.com/wp-content/plugins/the-events-calendar/vendor/chosen/public/chosen.jquery.min.js?ver=0.9.5′></script&gt;
<script type=’text/javascript’ src=’http://1de.e4c.myftpupload.com/wp-content/plugins/the-events-calendar-filterbar/src/resources/js/filter-scripts.min.js?ver=4.2.2′></script&gt;
<script type=’text/javascript’>
/* <![CDATA[ */
var tribe_this_week = {“ajaxurl”:”http:\/\/1de.e4c.myftpupload.com\/wp-admin\/admin-ajax.php”};
/* ]]> */
</script>
<script type=’text/javascript’ src=’http://1de.e4c.myftpupload.com/wp-content/plugins/events-calendar-pro/src/resources/js/widget-this-week.min.js?

[Nico]

Hi there Craig,

Thanks for getting in touch with us!

Regarding the JavaScript in our plugin, I’d say start moving the scripts and check at what point it fails. We have heard in the past about issues with minification of our scripts (which are already minified) but I haven’t heard of issues with re-locating the JS to the footer.

On the Critical CSS feature can you elaborate a bit more about what you’d expect our plugins to do on that front?

Please let me know about it,
Best,
Nico

[Craig]

Hi Nico,

Thanks for your response. It seems you could dig a little deeper for me on the javascript location. I’m sure the developers didn’t just drop them in random spots for no reason. Could you get a firm answer from them on whether these are all required?

In other words, having your customers do the testing on this seems unreasonable to me…

Let’s leave aside the Critical CSS issue for now, as it sounds like your team hasn’t thought that through yet.

Thanks,
Craig

[Nico]

Hey Craig,

Thanks for following up and sorry for the delay in my reply, I was out yesterday.

I touched base with one of our devs on this and he told me that assuming you only have activated The Events Calendar, then if you move move the following scripts to the footer (but maintaining the same load order) then month view and mobile month view appear to continue working as expected:

– tribe-events-bootstrap-datepicker (vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js)
– jquery-placeholder (vendor/jquery-placeholder/jquery.placeholder.min.js)
– tribe-events-jquery-resize (vendor/jquery-resize/jquery.ba-resize.min.js)
– tribe-events-calendar-script (src/resources/js/tribe-events.min.js)
– the-events-calendar (src/resources/js/tribe-events-ajax-calendar.min.js)
– tribe-events-bar (src/resources/js/tribe-events-bar.min.js)

So it seems that they are all safe to move into the footer (and doing so would leave none of our own scripts in the header).

Also, on the Critical CSS front he told me it’s something recently flagged for discussion on the dev team, but nothing they have decided on yet.

Please let me know if that helps,
Best,
Nico

[Craig]

Hi Nico,

Thanks for digging deeper for me on this. I have TEC, TEC Pro, Events Tickets, Event Tickets Plus, Filter Bar, and Organizer/Venue Shortcodes installed. So that accounts for all the other scripts you see above.

I’ll try pushing all the ones you mentioned above to the footer and let you know how it goes. If your engineer knows of any problems with the others, please let me know in the meantime.

Thanks,
Craig

[Nico]

Hey Craig,

Thanks for following up! Touched base once again with the dev team and the answer is the same: as long as you don’t alter the load order of the scripts, they should work well in the header or footer. So give it a try!

Best,
Nico

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts