Loading resources the standard way of registering and enqueuing will make every speed test complain. Unless you are using that resource on every single page, there is a better way to load it.
Preparing your stylesheet or JavaScript file
The first thing to do is decide where you will be calling your asset file from. Two common options are to upload it to your theme or plugin, or to call it from a CDN. The process in Nebula is the same, but there are other performance benefit considerations with these methods (Ex: WP can combine/minify local assets, but CDNs can deliver individual files faster). Those are topics for another post.
Register your script or style with WordPress
Nebula extends the registration process for assets by providing the handle and location to JavaScript so it can be lazy loaded later on. Nebula does also provide another registration function that also enables the ability to add an optimization parameter (like defer or async). Either of these options will enable the lazy loading option in JavaScript later on.
Nebula registration syntax:
nebula()->register_script(‘nebula-jquery_ui’, ‘https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js’, array(‘defer’, ‘crossorigin’), null, ‘1.12.1’, true);
Check the documentation page for register_script() to see the definitions of each parameter, but notice the third parameter where additional attributes can be added such as defer, crossorigin, and even module (to load the JS as a module). If you only need a simple registration for JavaScript, Nebula does listen for wp_register_script() as well for potential lazy loads.
Note: Nebula does not have a special function for registering styles. Use the WordPress core function wp_register_style() for that.
Don’t enqueue the script/style unless it is used on every page!
This is where the paths really divert between WordPress core and Nebula. In WordPress, you would enqueue the script or stylesheet with rules like “if it is the home page” or “only on the front-end”. If a rule like this is sufficient, go ahead an enqueue.
Remember– if the asset is not used every time on the page, then don’t enqueue it. If the functionality isn’t always used on that page, don’t slow down the load time by adding “optional” resources to it. That’s where Nebula can really help!
Lazy loading Javascript and CSS in WordPress
There are many ways to lazy load JavaScript and CSS on a website. Some examples:
- Wait until the page has become interactive and then load the extra resources (such as using
requestIdleCallback) - Wait until the user scrolls and load the necessary asset just before it is to appear within the viewport (often using
IntersectionObserver) - Wait until the user initiates the process where that resource is needed and trigger the load then
Nebula can help with all three scenarios, but I want to go in-depth on the last point from above.
Let’s say you have an autocomplete search/filter on a page– some visitors will use it and others will not. Instead of loading the autocomplete JS and CSS files for every page load, lazy load it when the user interacts with the process when it is needed. This will speed up the initial load time, and allow you to pull in the resources in the background right when they are needed.
Nebula provides a function that can be called using nebula.loadJS() which asynchronously loads the requested handle and allows you to add your functionality into a callback once the resource has finished loading. At the same time you can call nebula.loadCSS() to load the stylesheet which becomes active as soon as it has finished.
Example of lazy loading JavaScript and CSS in WordPress using Nebula
nebula.loadJS(nebula.site.resources.scripts.nebula_jquery_ui, ‘jquery-ui’).then(function(){ //Load the JS file
//Do stuff here using the loaded resource
});</p>
<p>nebula.loadCSS(nebula.site.resources.styles.nebula_jquery_ui); //Load the CSS file
Notice the nebula.site.resources.scripts.nebula_jquery_ui and nebula.site.resources.styles.nebula_jquery_ui objects. That is where registered scripts and styles locations exist (from earlier in this tutorial). You could simply manually write in your own URL into that parameter (without registering it with WordPress and Nebula first). Either way, make sure you give it a handle so Nebula does not load something more than once.