Starting in Release 2020.001 new Vanilla Sites defer script execution by default. Due to potential compatibility issues with existing Pockets & custom themes existing sites have the feature disabled. See the "What else needs to be done" section before enabling this for the first time.
What is deferred script execution?
Deferring script execution speeds up page loading by loading javascript after the rest of the page.
What are the benefits this?
Blocking pages to load javascript is not considering a good practice because it negatively impacts user’s page load times. Search engines like google penalize sites that do this.
Enabling this option to defer JavaScript loading can lead to large increases in score on google’s page-speed index as well improved load times for users, especially on mobile.
How?
A site administrator may now enable this option by simply navigating to the Branding & SEO page in the dashboard and toggling on the feature.
What else needs to be done?
An audit of a sites pockets or custom themes should be done to ensure it's compatible with this new feature. If a pocket or theme contains any javascript, ensure it isn't executed until the page is ready. This can be tested on staging or test environments.
The code below was modified by adding an event listener to wait for the page to be loaded.
Before:
<script>
if (window.location.pathname.match(/vanilla/)) {
jQuery('\')
.on('mouseover', function(event) {
jQuery('div').append('<img class="image-pop-over">');
});
}
</script>
After:
// The event listener has been added to ensure the DOM content has been loaded
<script>
document.addEventListener('DOMContentLoaded', function() {
if (window.location.pathname.match(/vanilla/)) {
jQuery('\')
.on('mouseover', function(event) {
jQuery('div').append('<img class="image-pop-over">');
});
}
}, false);
</script>
