FCP, CLS, LCP, TTI & TBT improvements

[wpsumo]

Describe the feature you'd like to see included in Oxygen. Public discussion here: https://www.facebook.com/groups/1626639680763454/permalink/3805619089532158

CLS

• Remove all jQuery dependencies and go for vanilla JS. Meaning we can easier and better defer all JS files on a site. Most plugins are going for vanilla JS. Right now I only have oxygen which is dependent on jQuery.

• CLS issues with tabs block and accordion (original blocks) could be used with removing JavaScript from tabs and only use CSS and specify with and height better. Might be good to define grid proprieties to make it very universal and have 0 impact of CLS. 

• CLS issues that ID styled stylesheets is initiated later than universal stylesheet and classes causing CLS. Maybe general ID issue but it's strange.

• CLS issues with Pro menu where the navigation icons is injected with jquery causing layout shift due to the resizing of the font-size. Just inline the svg ion into the DOM and HTML code and resize the icon with svg width and height.

• Replace css instead of overriding in the stylesheets. Font size and other this is defined in oxygen default and fallback stylesheets. Once font size and line height is changing CLS can appear.

• Inherit display styling for other breakpoints https://github.com/soflyy/oxygen-bugs-and-features/issues/2495

FCP

• All classes is loaded in universal stylesheet everywhere and casing unnecessary unused CSS which once we develop we know isn't needed outside the template.  But we have no option to not load it. As even if we add it in a custom stylesheet and add the class to an element it will add the selector. We would have to only do everything in a code block and what's the idea of the UI then. So please consider allowing us to define which template or where they should load. Load globally vs load in the templates available. Select more if it should be available in more than one. See this old ticket: https://github.com/soflyy/oxygen-bugs-and-features/issues/18

• Consider remove the :not once nothing is added to it https://github.com/soflyy/oxygen-bugs-and-features/issues/978 and create duplicate selectors.

• Remove jQuery dependencies here as well

TTI & TBT

• Remove all jQuery dependencies and go for vanilla JS. Meaning, we can easier and better defer all JS files on a site. Most plugins are going for vanilla JS. Right now I only have oxygen which is dependent on jQuery. This would reduce TTI and TBT significantly for users who don't need jQuery lib for anything in oxygen builder. If they require it for other plugins it's not your fault. But you should be on top of this game.

• We don't need aos.js for the pro menu to unfold menu or drop down we can use transform and CSS just as you did here? https://www.youtube.com/watch?v=r2QgPvhGkBk which would reduce use of JS files. Most users only use it for the menu and if they do, they could just unload it if we use CSS instead natively in the menu.

LCP

• Please consider outputting SRCSET for all image elements, if dynamic or not. Right now we can not SRCSET from the image element if PNG or JPG with the dynamic data and ACF image or gallery element. We can neither fetch the alt text properly.

Would be great if we could define the SRCSET sizes we want and oxygen would regenerate them for us. Without having and creating new plugins.

What are the use cases for this feature? Improvements!

[wpsumo]

@Spellhammer some contirbution to the discussion here https://www.facebook.com/groups/1626639680763454/permalink/3805619089532158

Will add more as I come across or remember what issues I've faced. I've most probably missed a few but this is what I remember right now.

[greggdev]

+1

[xolabsro]

+1

[stafi]

+1

[wpsumo]

@KittenCodes @louisreingold @Spellhammer https://make.wordpress.org/themes/2021/10/04/the-performance-impact-of-using-jquery-in-wordpress-themes/

[wpsumo]

@KittenCodes Why Pro menu is injected with jquery.

Remove jquery dependencies and use vanilla js. Make the menu a part of the DOM element instead of manipulating DOM on runtime and inject the menu. Reduce use of Divs and spans not needed in the menu element. This applies to a lot of elements such as repeater as well having an unnecessary DIV not needed and increase div-ception for no reason else than "this is how it's built".

[adrien-robert]

+1

[Larotu]

+1

[MattHag]

In order to improve the speed, I'd also suggest adding a lazy-load button to the gallery element.

I don't know why it's only available for single images.