Reduce cornerstone javascript (cs-classic.js & x.js)

Beta
#1

Thought it was worth asking if anything can be done to look at putting some of this JavaScript on a diet as it can hurt mobile pagespeed which is most important for ranking. or a toggle to switch for sites that aren’t using any cornerstone legacy features.

I can see just scanning some of these javascript files cs-classic.js & x.js are sharing some code. Quite a bit according to page for a site I tested (might be different for people using legacy components) is not being used or for legacy browsers.

Anyway some stats below from pagespeed that might be useful

Thanks!

image

Forced reflow
A forced reflow occurs when JavaScript queries geometric properties (such as offsetWidth) after styles have been invalidated by a change to the DOM state. This can result in poor performance. Learn more about forced reflows and possible mitigations.

Source Total reflow time
/cs-classic.7.7.4.js?ver=7.7.4 27 ms

and maybe this

Reduce unused JavaScript

URL Transfer Size Est Savings
/cs-classic.7.7.4.js?ver=7.7.4) 34.9 KiB 21.2 KiB
3 Likes
#2

I can remove the Array.prototype on x.js as it’s only needed on cs-classic. There’s no way that code is 10kb’s though so it’s something else that is wasted. It’s probably partially due to classic elements code, but it’s a bit of undertaking to move classic elements to our ‘v2’ elements. That would be nice for Cornerstone just to remove some bloat. Thanks for sending our way.

3 Likes
#3

Not sure how related this is but recently found a problem with Breeze caching plugin Lazy loading videos. apparently it is not compatible with Pro (according to cloudways support)

it was cs-classic that seemed to be the issue
cs-classic.7.7.6.js?ver=7.7.6:1 MEJS media error. TypeError: Cannot read properties of null (reading ‘indexOf’)
at s (mediaelement-and-player.min.js?ver=4.2.17:12:13580)
at new e (mediaelement-and-player.min.js?ver=4.2.17:12:14611)
at r.value (mediaelement-and-player.min.js?ver=4.2.17:12:81110)
at MediaElementPlayer.init (mediaelement-migrate.min.js?ver=6.8.3:1:495)
at new r (mediaelement-and-player.min.js?ver=4.2.17:12:76776)
at HTMLVideoElement. (mediaelement-and-player.min.js?ver=4.2.17:12:112139)
at ce.each (jquery.min.js?ver=3.7.1:2:3129)
at e..each (jquery.min.js?ver=3.7.1:2:1594)
at o.fn.mediaelementplayer (mediaelement-and-player.min.js?ver=4.2.17:12:112089)
at cs-classic.7.7.6.js?ver=7.7.6:1:93671

#4

That’s probably not related. Some of the lazy loading plugins will usually change the attribute. So instead of <video src="video.mp4"> it is changed to <video lazy-src="video.mp4">. That’s at least what I guess is going on. Isn’t lazy load for a video unnecessary? Wouldn’t it only preload if you check the preload option? Am I missing something there? Have a great weekend.

1 Like
#5

Thanks @charlie