#3176 - Experiment: Async JS and CSS loading in Composr

  • By
  • Added
  • 12 views
Identifier #3176
Issue type Trivial issue (does not break functionality)
Title Experiment: Async JS and CSS loading in Composr
Status Closed (duplicate)
Handling member Chris Graham
Addon core
Description This is mainly just a spacer tracker item for myself to keep notes and open up feedback to anyone who wishes to contribute.

My website, lovinity.org, has been slow in the past. I noticed a lot of the CSS and JS was render blocking the website (despite me using HTTP/2). I'm experimenting with a small JS library called head.load (v1.0.3) that makes loading CSS and JS async pretty easy... and it has a few functions that can be used in Composr for inline Javascript that requires an external JS to be loaded (tells the function to wait for that JS file to load before executing that inline javascript code).

Before implementing this library, my page took on average 2-4 seconds per request before it fed the first bit of content to the browser (even with output streaming enabled). After implementing head.load, it often takes 2 seconds or less now before content begins rendering. And although when content first starts rendering, not all the CSS and JS has been loaded yet because of async... the elements relying on the CSS and JS that have not loaded yet will appear once loaded. So, the actual full page load time did not improve (as expected), but the amount of time between when a request was made and when the user starts receiving content has dropped, giving the impression of a faster website. The Admin Zone especially has improved in first-byte speed since this implementation.

---

There are some caveats though to using this. First off, head.load by default strips query strings from css and js paths, meaning smart decaching will not work. This, I need to make a modified head.load to avoid that happening. Secondly, although first byte times are improved, page loading is not as smooth to the eye since elements have to be rendered as the assets are loaded. Third, this required modifications to several templates and to web_resources.php . And finally, critical components such as jquery, global.css, and global.js still need to be loaded right away instead of async, so there is still a little render blocking going on.

---

I personally feel Composr could benefit from something like this as an optional feature in terms of first byte page speeds. It will give visitors the impression of faster page loading times. A lot of things need to be fleshed out first for this to be a viable solution for Composr CMS though.
Steps to reproduce

Funded? No
The system will post a comment when this issue is modified (e.g., status changes). To be notified of this, click "Enable comment notifications".

Rating

Unrated