Delay until interaction

[yoshieralf]

Describe the bug

Hi. I use version 1.8.1 of Pressidium Cookie Consent and also the FlyingPress cache plugin. On the website, the cookie banner only appears once a key has been pressed or the mouse has been moved.

From what I can see in the Perfmatters documentation (recommended by Flyngpress for JavaScript exclusions) https://perfmatters.io/docs/delay-javascript/#exclusions, there are a number of patterns and JavaScript files that can be excluded by default. Perfmatters indicates the identifiers and elements that can be excluded from other cookie plugins (CookieYes, Complianz, etc.).

For example, for CookieYes, they indicate the following patterns, identifiers, and files to exclude

/wp-content/plugins/cookie-law-info/legacy/public/js/cookie-law-info-public.js
cookie-law-info-js-extra
jquery.min.js

I was wondering, what patterns or identifiers can be excluded in Pressidium so that it loads without the user having to interact?

Thank you

Steps to reproduce
Detailed steps to reproduce the behavior:

1. Go to the web
2. Not move
3. The Banner does not appear
4. I move the mouse or press a key, and the banner appears.

Expected behavior
Display the cookie banner without requiring user interaction.

Environment (please complete the following information):

• Browser: Brave, Chrome, Firefox...
• Plugin version: 1.8.1
• WordPress version: 6.8.2
• PHP version: 8.3.23

Checklist

• I have searched the GitHub issues to ensure this is not a duplicate
• I have provided sufficient information to reproduce and understand the issue
• I have tested the issue using the latest version of the plugin
• I have reviewed the wiki to ensure this issue is not related to a misconfiguration

[over-engineer]

Hey, @yoshieralf!

I’m not entirely sure how FlyingPress handles caching and/or script delaying, so I can’t give you a definite answer.

That said, I’d suggest excluding the following JavaScript files used by Pressidium Cookie Consent:

• /wp-content/plugins/pressidium-cookie-consent/public/consent-mode.js
• /wp-content/plugins/pressidium-cookie-consent/public/bundle.client.js

If that doesn’t fully solve it, sharing your website’s URL would help us pinpoint what else may need excluding.

[over-engineer]

@yoshieralf Could you give it a shot by excluding the cookie-consent-client-style-css identifier as well?

[over-engineer]

If that doesn’t work, you might also want to add the cookie-consent-client-script-js-extra identifier

[yoshieralf]

I have been testing the Flyingpress options one by one, and I have discovered that when I disable the option “Remove Unused CSS: Loads only the CSS used on the initial view. Defers the rest until user interaction,” the cookie banner appears without the user interaction.

When I enable that option and add the exclusions of CSS files that I believe refer to Pressidium in the Flyingpress option "Include CSS Selectors: Add keywords to forcefully include matching CSS selectors in the generated CSS"

pressidium-cc-styles 
cookie-consent-client-style-css
pressidium-cookies-style-inline-css

The cookie banner is only displayed with user interaction, returning to the initial error.

I also check that when the “Remove unused css” option is activated, the following code is added to the page

<style id="flying-press-css">:where(.wp-block-button__link){box-shadow:none;border-radius:9999px;padding:calc(.667em + 2px) calc(1.333em + 2px);text-decoration:none}:root :where(.wp-block-button .wp-block-button__link.is-style-outline),:root :where(.wp-block-button.is-style-outline>.wp-block-button__link){border:2px solid;padding:.667em 1.333em}:root :where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color)),:root :where(.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-text-color)){color:currentColor}:root :where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-background)),:root :where(.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background)){background-color:initial;background-image:none}:where(.wp-block-calendar table:not(.has-background) th){background:#ddd}:where(.wp-block-columns){margin-bottom:1.75em}:where(.wp-block-columns.has-background){padding:1.25em 2.375em}:where(.wp-block-post-comments input[type=submit]){border:none}:where(.wp-block-cover-image:not(.has-text-color)),:where(.wp-block-cover:not(.has-text-color)){color:#fff}:where(.wp-block-cover-image.is-light:not(.has-text-color)),:where(.wp-block-cover.is-light:not(.has-text-color)){color:#000}:root :where(.wp-block-cover h1:not(.has-text-color)),:root :where(.wp-block-cover h2:not(.has-text-color)),:root :where(.wp-block-cover h3:not(.has-text-color)),:root :where(.wp-block-cover h4:not(.has-text-color)),:root :where(.wp-block-cover h5:not(.has-text-color)),:root :where(.wp-block-cover h6:not(.has-text-color)),:root :where(.wp-block-cover p:not(.has-text-color)){color:inherit}:where(.wp-block-file){margin-bottom:1.5em}:where(.wp-block-file__button){border-radius:2em;padding:.5em 1em;display:inline-block}:where(.wp-block-file__button):is(a):active,:where(.wp-block-file__button):is(a):focus,:where(.wp-block-file__button):is(a):hover,:where(.wp-block-file__button):is(a):visited{box-shadow:none;color:#fff;opacity:.85;text-decoration:none}:where(.wp-block-group.wp-block-group-is-layout-constrained){position:relative}:root :where(.wp-block-image.is-style-rounded img,.wp-block-image .is-style-rounded img){border-radius:9999px}@keyframes show-content-image{0%{visibility:hidden}99%{visibility:hidden}to{visibility:visible}}@keyframes turn-on-visibility{0%{opacity:0}to{opacity:1}}@keyframes turn-off-visibility{0%{opacity:1;visibility:visible}99%{opacity:0;visibility:visible}to{opacity:0;visibility:hidden}}@keyframes lightbox-zoom-in{0%{transform:translate(calc((-100vw + var(--wp--lightbox-scrollbar-width))/2 + var(--wp--lightbox-initial-left-position)),calc(-50vh + var(--wp--lightbox-initial-top-position)))scale(var(--wp--lightbox-scale))}to{transform:translate(-50%,-50%)scale(1)}}@keyframes lightbox-zoom-out{0%{visibility:visible;transform:translate(-50%,-50%)scale(1)}99%{visibility:visible}to{transform:translate(calc((-100vw + var(--wp--lightbox-scrollbar-width))/2 + var(--wp--lightbox-initial-left-position)),calc(-50vh + var(--wp--lightbox-initial-top-position)))scale(var(--wp--lightbox-scale));visibility:hidden}}:where(.wp-block-latest-comments:not([style*=line-height] .wp-block-latest-comments__comment)){line-height:1.1}:where(.wp-block-latest-comments:not([style*=line-height] .wp-block-latest-comments__comment-excerpt p)){line-height:1.8}:root :where(.wp-block-latest-posts.is-grid){padding:0}:root :where(.wp-block-latest-posts.wp-block-latest-posts__list){padding-left:0}ol,ul{box-sizing:border-box}:root :where(.wp-block-list.has-background){padding:1.25em 2.375em}:where(.wp-block-navigation.has-background .wp-block-navigation-item a:not(.wp-element-button)),:where(.wp-block-navigation.has-background .wp-block-navigation-submenu a:not(.wp-element-button)),:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:not(.wp-element-button)),:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a:not(.wp-element-button)),:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu button.wp-block-navigation-item__content),:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-pages-list__item button.wp-block-navigation-item__content){padding:.5em 1em}@keyframes overlay-menu__fade-in-animation{0%{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:translateY(0)}}:root :where(p.has-background){padding:1.25em 2.375em}:where(p.has-text-color:not(.has-link-color)) a{color:inherit}:where(.wp-block-post-excerpt){box-sizing:border-box;margin-bottom:var(--wp--style--block-gap);margin-top:var(--wp--style--block-gap)}:where(.wp-block-preformatted.has-background){padding:1.25em 2.375em}:where(.wp-block-search__button){border:1px solid #ccc;padding:6px 10px}:where(.wp-block-search__input){font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit}:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper){box-sizing:border-box;border:1px solid #949494;padding:4px}:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) :where(.wp-block-search__button){padding:4px 8px}:root :where(.wp-block-separator.is-style-dots){text-align:center;height:auto;line-height:1}:root :where(.wp-block-separator.is-style-dots):before{color:currentColor;content:"···";letter-spacing:2em;padding-left:2em;font-family:serif;font-size:1.5em}:root :where(.wp-block-site-logo.is-style-rounded){border-radius:9999px}:root :where(.wp-block-social-links .wp-social-link a){padding:.25em}:root :where(.wp-block-social-links.is-style-logos-only .wp-social-link a){padding:0}:root :where(.wp-block-social-links.is-style-pill-shape .wp-social-link a){padding-left:.666667em;padding-right:.666667em}:root :where(.wp-block-tag-cloud.is-style-outline){flex-wrap:wrap;gap:1ch;display:flex}:root :where(.wp-block-tag-cloud.is-style-outline a){border:1px solid;margin-right:0;padding:1ch 2ch;font-size:unset!important;text-decoration:none!important}:root :where(.wp-block-table-of-contents){box-sizing:border-box}:where(.wp-block-term-description){box-sizing:border-box;margin-bottom:var(--wp--style--block-gap);margin-top:var(--wp--style--block-gap)}:where(pre.wp-block-verse){font-family:inherit}.editor-styles-wrapper,.entry-content{counter-reset:footnotes 0}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}.screen-reader-text{clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden;overflow-wrap:normal!important}.screen-reader-text:focus{clip-path:none;color:#444;z-index:100000;background-color:#ddd;width:auto;height:auto;padding:15px 23px 14px;font-size:1em;line-height:normal;text-decoration:none;display:block;top:5px;left:5px}html :where(.has-border-color){border-style:solid}html :where([style*=border-top-color]){border-top-style:solid}html :where([style*=border-right-color]){border-right-style:solid}html :where([style*=border-bottom-color]){border-bottom-style:solid}html :where([style*=border-left-color]){border-left-style:solid}html :where([style*=border-width]){border-style:solid}html :where([style*=border-top-width]){border-top-style:solid}html :where([style*=border-right-width]){border-right-style:solid}html :where([style*=border-bottom-width]){border-bottom-style:solid}html :where([style*=border-left-width]){border-left-style:solid}html :where(img[class*=wp-image-]){max-width:100%;height:auto}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (width<=600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}}:root{--cc-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--cc-font-size:16px;--cc-bg:#fff;--cc-z-index:2147480000;--cc-text:#2d4156;--cc-border-radius:.45rem;--cc-btn-primary-bg:#2d4156;--cc-btn-primary-text:var(--cc-bg);--cc-btn-primary-hover-bg:#1d2e38;--cc-btn-primary-hover-text:var(--cc-btn-primary-text);--cc-btn-secondary-bg:#eaeff2;--cc-btn-secondary-text:var(--cc-text);--cc-btn-secondary-hover-bg:#d8e0e6;--cc-btn-secondary-hover-text:var(--cc-btn-secondary-text);--cc-btn-border-radius:.375rem;--cc-toggle-bg-off:#919ea6;--cc-toggle-bg-on:var(--cc-btn-primary-bg);--cc-toggle-bg-readonly:#d5dee2;--cc-toggle-knob-bg:#fff;--cc-toggle-knob-icon-color:#ecf2fa;--cc-block-text:var(--cc-text);--cc-cookie-category-block-bg:#f0f4f7;--cc-cookie-category-block-bg-hover:#e9eff4;--cc-section-border:#f1f3f5;--cc-cookie-table-border:#e9edf2;--cc-overlay-bg:#040608;--cc-overlay-opacity:.85;--cc-consent-modal-box-shadow:0 .625rem 1.875rem #02020347;--cc-webkit-scrollbar-bg:#cfd5db;--cc-webkit-scrollbar-bg-hover:#9199a0;--cc-btn-floating-bg:#2d4156;--cc-btn-floating-icon:var(--cc-bg);--cc-btn-floating-hover-bg:#1d2e38;--cc-btn-floating-hover-icon:var(--cc-btn-floating-icon)}.footer-bar-active .footer-bar .widget{padding:0}.footer-bar .widget_nav_menu>div>ul{flex-wrap:wrap;align-items:center;display:flex}.footer-bar .widget_nav_menu li{margin:0 10px;padding:0}.footer-bar .widget_nav_menu li:first-child{margin-left:0}.footer-bar .widget_nav_menu li:last-child{margin-right:0}.footer-bar .widget_nav_menu li ul{display:none}.footer-bar .textwidget p:last-child{margin:0}.footer-bar .widget-title{display:none}.footer-bar-align-right .copyright-bar{order:-20;margin-right:auto}.site-footer:not(.footer-bar-active) .copyright-bar{margin:0 auto}@media (width<=768px){.footer-bar-active .inside-site-info{flex-direction:column}.footer-bar-active .footer-bar{margin-bottom:10px}.footer-bar .widget_nav_menu>div>ul{justify-content:center}.footer-bar .widget_nav_menu li{padding:5px 0}.footer-bar .widget_nav_menu li:first-child{margin-left:10px}.footer-bar .widget_nav_menu li:last-child{margin-right:10px}.footer-bar-align-right .copyright-bar{order:unset;margin-right:0}}blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{border:0;margin:0;padding:0}html{text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-family:sans-serif}main{display:block}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}body,button,input,select,textarea{text-transform:none;font-family:-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:17px;font-weight:400;line-height:1.5}p{margin-bottom:1.5em}h1,h2,h3,h4,h5,h6{font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit}h1{text-transform:none;margin-bottom:20px;font-size:42px;font-weight:400;line-height:1.2em}h2{text-transform:none;margin-bottom:20px;font-size:35px;font-weight:400;line-height:1.2em}h3{text-transform:none;margin-bottom:20px;font-size:29px;font-weight:400;line-height:1.2em}ol,ul{margin:0 0 1.5em 3em}ul{list-style:outside}li>ol,li>ul{margin-bottom:0;margin-left:1.5em}b,strong{font-weight:700}img{max-width:100%;height:auto}button,input[type=button],input[type=reset],input[type=submit]{color:#fff;cursor:pointer;appearance:button;background:#55555e;border:1px solid #fff0;padding:10px 20px}a,button,input{transition:color .1s ease-in-out,background-color .1s ease-in-out}a{text-decoration:none}.button,.wp-block-button .wp-block-button__link{padding:10px 20px;display:inline-block}.alignleft{float:left;margin-right:1.5em}.alignright{float:right;margin-left:1.5em}.size-auto,.size-full,.size-large,.size-medium,.size-thumbnail{max-width:100%;height:auto}.screen-reader-text{clip:rect(1px,1px,1px,1px);clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;overflow-wrap:normal!important;position:absolute!important}.screen-reader-text:focus{clip-path:none;color:#21759b;z-index:100000;background-color:#f1f1f1;border-radius:3px;width:auto;height:auto;padding:15px 23px 14px;font-size:.875rem;font-weight:700;line-height:normal;text-decoration:none;display:block;top:5px;left:5px;box-shadow:0 0 2px 2px #0009;clip:auto!important}.main-navigation{z-index:100;clear:both;padding:0;display:block}.main-navigation a{text-transform:none;font-size:15px;font-weight:400;text-decoration:none;display:block}.main-navigation ul{margin:0;padding-left:0;list-style:none}.main-navigation .main-nav ul li a{padding-left:20px;padding-right:20px;line-height:60px}.inside-navigation{position:relative}.main-navigation .inside-navigation{flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.main-navigation .main-nav>ul{flex-wrap:wrap;align-items:center;display:flex}.main-navigation li{position:relative}.sidebar .main-navigation .main-nav{flex-basis:100%}.sidebar .main-navigation .main-nav>ul{flex-direction:column}.main-navigation ul ul{float:left;opacity:0;z-index:99999;text-align:left;pointer-events:none;width:200px;height:0;transition:opacity 80ms linear;display:block;position:absolute;top:auto;left:-99999px;overflow:hidden;box-shadow:1px 1px #0000001a}.main-navigation ul ul a{display:block}.main-navigation ul ul li{width:100%}.main-navigation .main-nav ul ul li a{padding:10px 20px;font-size:14px;line-height:normal}.main-navigation:not(.toggled) ul li.sfHover>ul,.main-navigation:not(.toggled) ul li:hover>ul{opacity:1;pointer-events:auto;height:auto;transition-delay:.15s;left:auto;overflow:visible}.main-navigation:not(.toggled) ul ul li.sfHover>ul,.main-navigation:not(.toggled) ul ul li:hover>ul{top:0;left:100%}.widget-area .main-navigation li{float:none;width:100%;margin:0;padding:0;display:block}.sidebar .main-navigation.sub-menu-right ul li.sfHover ul,.sidebar .main-navigation.sub-menu-right ul li:hover ul{top:0;left:100%}.site-header{position:relative}.inside-header{padding:20px 40px}.site-logo{max-width:100%;display:inline-block}.site-header .header-image{vertical-align:middle}.inside-header{align-items:center;display:flex}.entry-content:not(:first-child),.entry-summary:not(:first-child),.page-content:not(:first-child){margin-top:2em}.entry-header,.site-content{overflow-wrap:break-word}.entry-content>p:last-child,.entry-summary>p:last-child,.page-content>p:last-child,.read-more-container,.taxonomy-description p:last-child{margin-bottom:0}embed,iframe,object{max-width:100%}.widget-area .widget{padding:40px}.footer-widgets .widget :last-child,.sidebar .widget :last-child{margin-bottom:0}.widget-title{text-transform:none;margin-bottom:30px;font-size:20px;font-weight:400;line-height:1.5}.widget ol,.widget ul{margin:0}.footer-widgets .widget:last-child,.sidebar .widget:last-child{margin-bottom:0}.widget ul li{margin-bottom:.5em;list-style-type:none;position:relative}.widget ul li ul{margin-top:.5em;margin-left:1em}.site-content{display:flex}.grid-container{max-width:1200px;margin-left:auto;margin-right:auto}.page-header,.sidebar .widget,.site-main>*{margin-bottom:20px}.separate-containers .comments-area,.separate-containers .inside-article,.separate-containers .page-header,.separate-containers .paging-navigation{padding:40px}.separate-containers .site-main{margin:20px}.separate-containers.both-right .site-main,.separate-containers.right-sidebar .site-main{margin-left:0}.separate-containers .inside-left-sidebar,.separate-containers .inside-right-sidebar{margin-top:20px;margin-bottom:20px}.widget-area .main-navigation{margin-bottom:20px}.one-container .site-main>:last-child,.separate-containers .site-main>:last-child{margin-bottom:0}.sidebar .grid-container{width:100%;max-width:100%}.inside-site-info{justify-content:center;align-items:center;padding:20px 40px;display:flex}.site-info{text-align:center;font-size:15px}.gp-icon{align-self:center;display:inline-flex}.gp-icon svg{fill:currentColor;width:1em;height:1em;position:relative;top:.125em}.close-search .icon-search svg:first-child,.icon-menu-bars svg:nth-child(2),.icon-search svg:nth-child(2),.toggled .icon-menu-bars svg:first-child{display:none}.container.grid-container{width:auto}.menu-toggle,.mobile-bar-items,.sidebar-nav-mobile{display:none}.menu-toggle{text-transform:none;cursor:pointer;margin:0;padding:0 20px;font-size:15px;font-weight:400;line-height:60px}.menu-toggle .mobile-menu{padding-left:3px}.menu-toggle .gp-icon+.mobile-menu{padding-left:9px}.menu-toggle .mobile-menu:empty{display:none}button.menu-toggle{text-align:center;background-color:#fff0;border:0;flex-grow:1}button.menu-toggle:active,button.menu-toggle:focus,button.menu-toggle:hover{background-color:#fff0}@media (width<=768px){a,body,button,input,select,textarea{transition:all ease-in-out}.inside-header{text-align:center;flex-direction:column}.site-content{flex-direction:column}.container .site-content .content-area{width:auto}.is-left-sidebar.sidebar,.is-right-sidebar.sidebar{order:initial;width:auto}#main{margin-left:0;margin-right:0}body:not(.no-sidebar) #main{margin-bottom:0}.alignleft,.alignright{float:none;margin-left:auto;margin-right:auto;display:block}}@media (width>=769px) and (width<=1024px){.hide-on-tablet{display:none!important}}@media (width>=1025px){.hide-on-desktop{display:none!important}}</style>

Which CSS selectors can I add as exclusions? Thanks for your work!

[yoshieralf]

Hi.

I added some selectors from the file (/wp-content/cache/flying-press/c81c50b80822. bundle.client.css) and it seems to work, but I see it as a temporary solution, since the cookie plugin may change the styles and I will have to redo all the work with each update.

In case it helps anyone, this is the list of CSS selectors:

pressidium-cc-styles
cookie-consent-client-style-css
pressidium-cookies-style-inline-css
/wp-content/cache/flying-press/c81c50b80822.bundle.client.css
#cc--main
.force--consent
.cc_div
.show--consent
.c--anim
#cm
#cm.cloud.middle
#cm.box.middle
.cloud
.middle
#s-cnt
.c-bn
#c-bns
#s-c-b
#cm
.c_link
.c-bn
.b-tl
#s-ttl
#s-bl
#c-ttl
#s-inr
.act
.b-acc
#cs-ov
#cm.bar
.slide
.bar
#cm-ov
.show--settings
#c-txt
#s-c-bn
#s-rall-bn
.title
.b-bn

Adding only the /wp-content/cache/flying-press/c81c50b80822.bundle.client.css file and the cookie-consent-client-style-css identifier to "Edit includes" in "Remove Unused CSS" does not seem to work. It is necessary to add all selectors.

Thanks