Frontend CSS file improvements

Resolved

(@rinart73)

Right now you’re using the same CSS file for editor and frontend. This results in the following classes always being unused CSS because they’re only needed for editor:


.o-animations-control__popover:not(.is-mobile).is-bottom{z-index:9999999}.o-animations-control__popover .components-popover__content{overflow-y:hidden}.o-animations-control__popover .components-menu-group{padding:7px}.o-animations-control__popover .components-popover__items{max-height:300px;overflow-y:auto}.o-animations-control__popover .components-popover__items button.is-selected{background:#f8f9f9}.o-animations-control__popover .components-popover__items button i{margin-right:5px}.o-animations-control__popover .components-popover__items .o-animations-control__category{font-weight:700}.o-animations-control .components-dropdown{display:flex}.o-animations-control .o-animations-control__button{background:transparent;border:1px solid #8d96a0;border-radius:4px;box-shadow:0 0 0 transparent;height:auto;line-height:28px;padding:0 12px 2px;position:relative;transition:box-shadow .1s linear;width:100%}.o-animations-control .o-animations-control__button.is-button{background:transparent}.o-animations-control .o-animations-control__button:hover{background:#fafafa;border-color:#999;box-shadow:inset 0 -1px 0 #999;color:#23282d;text-decoration:none}.o-animations-control .o-animations-control__button:focus{border:1px solid #000}.o-animations-control .o-animations-control__button:after{border-left:3px solid transparent;border-right:3px solid transparent;border-top:5px solid;content:"";display:block;height:0;margin-left:4px;margin-right:2px;pointer-events:none;position:absolute;right:8px;top:12px;width:0}.otter-animations-count-image{width:100%}@media screen{.hidden-animated{visibility:hidden}}@media(max-width:782px){.o-animations-control .o-animations-control__button{padding:5px 24px 5px 8px}.o-animations-control .o-animations-control__button:after{top:16px}}.o-anim-typing-caret:after{-webkit-animation:blink 1s step-end infinite;animation:blink 1s step-end infinite;color:#2e3d48;content:"|";font-weight:100}@-webkit-keyframes blink{0%,to{color:transparent}50%{color:#000}}@keyframes blink{0%,to{color:transparent}50%{color:#000}}.o-control-panel-control{padding:10px 0}.o-control-panel-control .components-base-control__title{align-items:center;display:flex;justify-content:space-between}.o-control-panel-control .components-base-control__title label{padding:5px 0}.o-control-panel-control .components-base-control__title .floating-controls .components-dropdown{display:flex}.o-control-panel-control .components-base-control__title .floating-controls .components-dropdown button.is-tertiary{border:none;box-shadow:none;color:#1e1e1e}.o-control-panel-control .components-base-control__title .floating-controls .components-dropdown button.is-active,.o-control-panel-control .components-base-control__title .floating-controls .components-dropdown button.is-tertiary:hover{color:var(--wp-admin-theme-color)}.o-control-panel-control .components-base-control__title .floating-controls .components-dropdown button .dashicon{margin:2px}.otter-popover-settings{min-width:300px;overflow:hidden;padding:10px}.otter-popover-settings .components-button-group{padding-bottom:10px}

Could you please separate editor styles from animation styles and don’t load them on frontend?

Additionally there is a matter of loading 73KB CSS file even though most users won’t need every animation available. I saw your comment in another thread where you said that having CSS file for every animation could negatively impact PageSpeed Score.
This is a difficult situation. From one point of view, HTTP2 allows to load multiple files at the same time, but then again, having 5 animations on a landing page would result in 6 files (core + 5 animations) and HTTP2 has limits.
Which is why I propose a compromise. Create plugin settings page where users will be able to toggle separate animations on and off. After they press “Save settings” the plugin generates CSS file that only contains core + enabled animations. This file is then enqueued whenever animations are used. That way we reduce overall CSS size without enqueueing tons of small files.

And the third part is directive -webkit-keyframes. Can we have an option to turn it off? It’s only used with old browsers Chrome <= 42, Safari <= 8.4, Opera <= 29. It basically doubles CSS size.

This topic was modified 3 years, 11 months ago by rinart73.
This topic was modified 3 years, 11 months ago by rinart73.
This topic was modified 3 years, 11 months ago by rinart73.
This topic was modified 3 years, 11 months ago by rinart73.

Viewing 2 replies - 1 through 2 (of 2 total)

Plugin Author Hardeep Asrani
(@hardeepasrani)

3 years, 11 months ago

Hey @rinart73,

The first point we’re aware of and we are going to change that but we like your other points on how we can just load the animations which are actually used on the page. It’s not the easiest thing to do to extract and only load the ones which are needed but I see it can reduce page size a lot.

And I suppose we can say goodbye to backward compatibility as those old browsers are from 2015/16 so the amount of optimization is worth dropping support from people using browsers from half a decade back.

We want to do it in a way where we don’t have to give options in the Dashboard so people need to toggle things in the Dashboard and it can work out of the box.

I’ll make an issue about this and we can try to accomplish it in the coming weeks. Thank you for a lot of great ideas!

Plugin Author Hardeep Asrani
(@hardeepasrani)

3 years, 11 months ago

Hey @rinart73,

Here’s where you can track the discussion: https://github.com/Codeinwp/otter-blocks/issues/1033

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Frontend CSS file improvements’ is closed to new replies.

Tags