Monat: April 2014

Speed Optimierung für WordPress – Part 6: JavaScript und CSS optimierungen

VonWP-Loft 18. April 201428. April 2021

Heute möchte ich über meine persönlichen Erfahrungen mit meinen Versuchen bezüglich Javascript und CSS Optimierungen. Dieser Beitrag wird sehr viel kürzer werden, als die fünf vorherigen.Der Grund ist ganz einfach: Optimierung 😉 Im Ernst: ich habe diverseste Worpress Minifi Plugins ausprobiert. Alle diese Plugins haben mir entweder das Design meines Themes wirklich gründlich zerschossen, oder…

WordPress | WordPress Optimierung

Speed Optimierung für WordPress – Part 5: Implementierung eines CDN

VonWP-Loft 4. April 201428. April 2021

Heute möchte ich über meine persönlichen Erfahrungen mit dem Einsatz eines Content Delivery Netzwerkes (CDN) berichten. Grundlegend technisches, warum ein CDN einsetzen ? 1. Parallele Abarbeitung von Dateizugriffen Wenn man eine Webseite mit dem Browser öffnet, dann muss dieser eine Menge Daten und Files von dem Webserver laden, auf dem die Zielwebseite abgelegt sind.Schaut man…

Cookie Consent mit Real Cookie Banner

.site-branding{max-height:inherit}.site-branding a.brand{display:flex;gap:1em;flex-direction:row;align-items:center;text-decoration:none;color:inherit;max-height:inherit}.site-branding a.brand img{display:block}@media screen and (max-width:1024px){.site-branding.branding-tablet-layout-standard-reverse a.brand{flex-direction:row-reverse}}@media screen and (max-width:719px){.site-branding.branding-mobile-layout-standard:not(.site-brand-logo-only) a.brand{flex-direction:row}}.header-navigation ul ul.sub-menu,.header-navigation ul ul.submenu{display:none;position:absolute;top:100%;flex-direction:column;background:#fff;margin-left:0;box-shadow:0 2px 13px rgb(0 0 0 / .1);z-index:1000}body:not(.hide-focus-outline) .header-navigation li.menu-item--has-toggle>a:focus .dropdown-nav-toggle{opacity:.2}.header-navigation ul ul.sub-menu>li:last-child,.header-navigation ul ul.submenu>li:last-child{border-bottom:0}.header-navigation ul ul.sub-menu.sub-menu-edge{left:auto;right:0}.header-navigation ul ul ul.sub-menu.sub-menu-edge{left:auto;right:100%}.header-navigation[class*="header-navigation-dropdown-animation-fade"] ul ul.sub-menu,.header-navigation[class*="header-navigation-dropdown-animation-fade"] ul ul.submenu{opacity:0;visibility:hidden;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);transition:all 0.2s ease;display:block;clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden}.header-navigation[class*="header-navigation-dropdown-animation-fade"] ul li:hover>ul,.header-navigation[class*="header-navigation-dropdown-animation-fade"] ul li.menu-item--toggled-on>ul,.header-navigation[class*="header-navigation-dropdown-animation-fade"] ul li:not(.menu-item--has-toggle):focus>ul{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);clip:auto;height:auto;overflow:visible}.wp-site-blocks .nav--toggle-sub .dropdown-nav-special-toggle{position:absolute!important;overflow:hidden;padding:0!important;margin:0!important;margin-right:-0.1em!important;border:0!important;width:.9em;top:0;bottom:0;height:auto;border-radius:0;box-shadow:none!important;background:transparent!important;display:block;left:auto;right:calc(1.4em / 2);pointer-events:none}.wp-site-blocks .nav--toggle-sub .sub-menu .dropdown-nav-special-toggle{width:2.6em;margin:0!important;right:0}.nav--toggle-sub .dropdown-nav-special-toggle:focus{z-index:10}.nav--toggle-sub .dropdown-nav-toggle{display:block;background:#fff0;position:absolute;right:0;top:50%;width:.7em;height:.7em;font-size:inherit;width:.9em;height:.9em;font-size:.9em;display:inline-flex;line-height:inherit;margin:0;padding:0;border:none;border-radius:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);overflow:visible;transition:opacity 0.2s ease}.nav--toggle-sub ul ul .dropdown-nav-toggle{right:.2em}.nav--toggle-sub ul ul .dropdown-nav-toggle .kadence-svg-iconset{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.nav--toggle-sub li.menu-item-has-children{position:relative}.nav-drop-title-wrap{position:relative;padding-right:1em;display:block}.nav--toggle-sub li:hover>ul,.nav--toggle-sub li.menu-item--toggled-on>ul,.nav--toggle-sub li:not(.menu-item--has-toggle):focus>ul{display:block}.nav--toggle-sub li:not(.menu-item--has-toggle):focus-within>ul{display:block}@media (hover:none){.wp-site-blocks .nav--toggle-sub .menu-item--has-toggle:not(.menu-item--toggled-on) .dropdown-nav-special-toggle{left:0;right:0!important;margin-right:0!important;width:100%;pointer-events:all}.wp-site-blocks .nav--toggle-sub .menu-item--has-toggle:not(.menu-item--toggled-on)>a{pointer-events:none}}.rtl .primary-menu-container>ul>li.menu-item .dropdown-nav-special-toggle{right:auto;left:calc(1.4em / 2)}.rtl .wp-site-blocks .nav--toggle-sub .sub-menu .dropdown-nav-special-toggle{left:0;right:auto}.wp-site-blocks .nav--toggle-sub .kadence-menu-mega-enabled .sub-menu .dropdown-nav-special-toggle{display:none}.header-navigation[class*="header-navigation-style-underline"] .header-menu-container>ul>li>a{position:relative}.header-navigation[class*="header-navigation-style-underline"] .header-menu-container>ul>li>a:after{content:'';width:100%;position:absolute;bottom:0;height:2px;right:50%;background:currentColor;-webkit-transform:scale(0,0) translate(-50%,0);transform:scale(0,0) translate(-50%,0);transition:color .0s ease-in-out,-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out,color .0s ease-in-out;transition:transform .2s ease-in-out,color .0s ease-in-out,-webkit-transform .2s ease-in-out}.header-navigation[class*="header-navigation-style-underline"] .header-menu-container>ul>li>a:hover:after{-webkit-transform:scale(1,1) translate(50%,0);transform:scale(1,1) translate(50%,0)}.header-navigation,.header-menu-container{display:flex}.header-navigation li.menu-item>a{display:block;width:100%;text-decoration:none;color:var(--global-palette4);transition:all .2s ease-in-out;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.header-navigation li.menu-item>a:hover,.header-navigation li.menu-item>a:focus{color:var(--global-palette-highlight)}.header-navigation ul.sub-menu,.header-navigation ul.submenu{display:block;list-style:none;margin:0;padding:0}.header-navigation ul li.menu-item>a{padding:.6em .5em}.header-navigation ul ul li.menu-item>a{padding:1em}.header-navigation ul ul li.menu-item>a{width:200px}.header-navigation ul ul ul.sub-menu,.header-navigation ul ul ul.submenu{top:0;left:100%;right:auto;min-height:100%}.header-navigation .menu{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;list-style:none;margin:0;padding:0}.menu-toggle-open{display:flex;background:#fff0;align-items:center;box-shadow:none}.menu-toggle-open .menu-toggle-icon{display:flex}.menu-toggle-open:hover,.menu-toggle-open:focus{border-color:currentColor;background:#fff0;box-shadow:none}.menu-toggle-open.menu-toggle-style-default{border:0}.wp-site-blocks .menu-toggle-open{box-shadow:none}.mobile-navigation{width:100%}.mobile-navigation a{display:block;width:100%;text-decoration:none;padding:.6em .5em}.mobile-navigation ul{display:block;list-style:none;margin:0;padding:0}.drawer-nav-drop-wrap{display:flex;position:relative}.drawer-nav-drop-wrap a{color:inherit}.drawer-nav-drop-wrap .drawer-sub-toggle{background:#fff0;color:inherit;padding:.5em .7em;display:flex;border:0;border-radius:0;box-shadow:none;line-height:normal}.drawer-nav-drop-wrap .drawer-sub-toggle[aria-expanded="true"] svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mobile-navigation ul ul{padding-left:1em;transition:all 0.2s ease-in-out}.mobile-navigation ul.has-collapse-sub-nav ul.sub-menu{display:none}body[class*='amp-mode-'] .mobile-navigation ul ul{display:block}.mobile-navigation ul ul ul ul ul ul{padding-left:0}.mobile-navigation ul.has-collapse-sub-nav .sub-menu.show-drawer{display:block}.popup-drawer{position:fixed;display:none;top:0;bottom:0;left:-99999rem;right:99999rem;transition:opacity 0.25s ease-in,left 0s 0.25s,right 0s 0.25s;z-index:100000}.popup-drawer .drawer-overlay{background-color:rgb(0 0 0 / .4);position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity 0.2s ease-in-out}.popup-drawer .drawer-inner{width:100%;-webkit-transform:translateX(100%);transform:translateX(100%);max-width:90%;right:0;top:0;overflow:auto;background:#090c10;color:#fff;bottom:0;opacity:0;position:fixed;box-shadow:0 0 2rem 0 rgb(0 0 0 / .1);display:flex;flex-direction:column;transition:opacity 0.25s cubic-bezier(.77,.2,.05,1),-webkit-transform 0.3s cubic-bezier(.77,.2,.05,1);transition:transform 0.3s cubic-bezier(.77,.2,.05,1),opacity 0.25s cubic-bezier(.77,.2,.05,1);transition:transform 0.3s cubic-bezier(.77,.2,.05,1),opacity 0.25s cubic-bezier(.77,.2,.05,1),-webkit-transform 0.3s cubic-bezier(.77,.2,.05,1)}.popup-drawer .drawer-header{padding:0 1.5em;display:flex;justify-content:flex-end;min-height:calc(1.2em + 24px)}.popup-drawer .drawer-header .drawer-toggle{background:#fff0;border:0;font-size:24px;line-height:1;padding:.6em .15em;color:inherit;display:flex;box-shadow:none;border-radius:0}.popup-drawer .drawer-header .drawer-toggle:hover{box-shadow:none}.popup-drawer .drawer-content{padding:0 1.5em 1.5em}@media screen and (max-width:1024px){.showing-popup-drawer-from-right.animate-body-popup #inner-wrap,.showing-popup-drawer-from-right.animate-body-popup #colophon,.showing-popup-drawer-from-right.animate-body-popup .site-header-row{-webkit-transform:translateX(-200px);transform:translateX(-200px)}}.popup-drawer-animation-scale.popup-drawer-layout-fullwidth.active .drawer-inner{-webkit-transform:scale(1);transform:scale(1)}.popup-drawer .drawer-header .drawer-toggle{width:1em;position:relative;height:1em;box-sizing:content-box;font-size:24px}.drawer-toggle .toggle-close-bar{width:.75em;height:.08em;background:currentColor;-webkit-transform-origin:center center;transform-origin:center center;position:absolute;margin-top:-.04em;opacity:0;border-radius:.08em;left:50%;margin-left:-.375em;top:50%;-webkit-transform:rotate(45deg) translateX(-50%);transform:rotate(45deg) translateX(-50%);transition:opacity 0.3s cubic-bezier(.77,.2,.05,1),-webkit-transform 0.3s cubic-bezier(.77,.2,.05,1);transition:transform 0.3s cubic-bezier(.77,.2,.05,1),opacity 0.3s cubic-bezier(.77,.2,.05,1);transition:transform 0.3s cubic-bezier(.77,.2,.05,1),opacity 0.3s cubic-bezier(.77,.2,.05,1),-webkit-transform 0.3s cubic-bezier(.77,.2,.05,1);transition-delay:0.2s}.drawer-toggle .toggle-close-bar:last-child{-webkit-transform:rotate(-45deg) translateX(50%);transform:rotate(-45deg) translateX(50%)}.popup-drawer.active .drawer-toggle .toggle-close-bar{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:1}.popup-drawer.active .drawer-toggle .toggle-close-bar:last-child{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:1}.popup-drawer .drawer-content.content-align-right{text-align:right}.popup-drawer .drawer-content.content-align-right .site-header-item{justify-content:flex-end}.popup-drawer-layout-fullwidth.popup-drawer-animation-slice.active .pop-portion-bg{-webkit-transform:translateX(0);transform:translateX(0)}.popup-drawer-layout-fullwidth.popup-drawer-animation-slice.active .drawer-content{-webkit-transform:translateY(0);transform:translateY(0);opacity:1;transition:all 0.4s ease;transition-delay:0.2s}@media screen and (max-width:1024px){.popup-drawer-layout-sidepanel.popup-mobile-drawer-side-right .drawer-inner{-webkit-transform:translateX(100%);transform:translateX(100%);right:0;left:auto}}@media screen and (min-width:783px){body.admin-bar .popup-drawer{top:32px}}.popup-drawer.show-drawer{display:block}.popup-drawer.active{left:0;opacity:1;right:0;transition:opacity 0.25s ease-out}.popup-drawer.active .drawer-inner{opacity:1;-webkit-transform:translateX(0%);transform:translateX(0%)}.popup-drawer.active .drawer-overlay{opacity:1;cursor:pointer}body[class*="showing-popup-drawer-"]{overflow:hidden}#main-header{display:none}#masthead{position:relative;z-index:11}@media screen and (min-width:1025px){#main-header{display:block}#mobile-header{display:none}}.site-header-row{display:grid;grid-template-columns:auto auto}.site-header-upper-inner-wrap.child-is-fixed{display:flex;align-items:flex-end}.site-header-upper-inner-wrap.child-is-fixed .site-main-header-wrap{width:100%}@media screen and (max-width:719px){.site-header-focus-item.site-header-row-mobile-layout-contained{padding:0 1.5rem}}.site-header-section{display:flex;max-height:inherit}.site-header-item{display:flex;align-items:center;margin-right:10px;max-height:inherit}.site-header-section>.site-header-item:last-child{margin-right:0}.drawer-content .site-header-item{margin-right:0;margin-bottom:10px}.drawer-content .site-header-item:last-child{margin-bottom:0}.site-header-section-right{justify-content:flex-end}.search-toggle-open{display:flex;background:#fff0;align-items:center;padding:.5em;box-shadow:none}.search-toggle-open .search-toggle-icon{display:flex}.search-toggle-open .search-toggle-icon svg.kadence-svg-icon{top:-.05em;position:relative}.search-toggle-open:hover,.search-toggle-open:focus{border-color:currentColor;background:#fff0;box-shadow:none}.search-toggle-open.search-toggle-style-default{border:0}.popup-drawer-layout-fullwidth .drawer-inner{max-width:none;background:rgb(9 12 16 / .97);transition:opacity 0.2s ease-in,-webkit-transform 0s ease-in;transition:transform 0s ease-in,opacity 0.2s ease-in;transition:transform 0s ease-in,opacity 0.2s ease-in,-webkit-transform 0s ease-in}.popup-drawer-layout-fullwidth .drawer-inner .drawer-overlay{background-color:#fff0}#mobile-drawer.popup-drawer-layout-fullwidth.popup-drawer-animation-slice.pop-animated .drawer-inner{background:rgb(9 12 16 / .97)}#search-drawer .drawer-inner .drawer-header{position:relative;z-index:100}#search-drawer .drawer-inner .drawer-content{display:flex;justify-content:center;align-items:center;position:absolute;top:0;bottom:0;left:0;right:0;padding:2em}#search-drawer .drawer-inner form{max-width:800px;width:100%;margin:0 auto;display:flex}#search-drawer .drawer-inner form label{flex-grow:2}#search-drawer .drawer-inner form ::-webkit-input-placeholder{color:currentColor;opacity:.5}#search-drawer .drawer-inner form ::-moz-placeholder{color:currentColor;opacity:.5}#search-drawer .drawer-inner form :-ms-input-placeholder{color:currentColor;opacity:.5}#search-drawer .drawer-inner form :-moz-placeholder{color:currentColor;opacity:.5}#search-drawer .drawer-inner input.search-field{width:100%;background:#fff0;color:var(--global-palette6);padding:.8em 80px .8em .8em;font-size:20px;border:1px solid currentColor}#search-drawer .drawer-inner input.search-field:focus{color:#fff;box-shadow:5px 5px 0 0 currentColor}#search-drawer .drawer-inner .search-submit[type="submit"]{width:70px}#search-drawer .drawer-inner .kadence-search-icon-wrap{color:var(--global-palette6);width:70px}#search-drawer .drawer-inner .search-submit[type="submit"]:hover~.kadence-search-icon-wrap{color:#fff}#search-drawer .drawer-inner button[type="submit"]:hover~.kadence-search-icon-wrap{color:#fff}.site-header-upper-inner-wrap.child-is-fixed .site-top-header-wrap:not(.item-is-fixed){align-self:flex-start;flex-grow:1}.item-is-fixed{position:fixed;left:0;right:0;z-index:1200}.kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-branding a.brand.has-sticky-logo img.kadence-sticky-logo{display:block}.kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-branding a.brand.has-sticky-logo img{display:none}.kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-branding a.brand img:not(.svg-logo-image){width:auto}.kadence-sticky-header.item-is-fixed:not(.item-at-start)[data-shrink="true"] .site-branding a.brand picture img{max-height:inherit}#mobile-drawer{z-index:99999}#mobile-header .mobile-navigation>.mobile-menu-container.drawer-menu-container>ul.menu{display:flex;flex-wrap:wrap}#mobile-header .mobile-navigation:not(.drawer-navigation-parent-toggle-true) ul li.menu-item-has-children .drawer-nav-drop-wrap button{border:0}#mobile-header .mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap,#mobile-header .mobile-navigation ul li:not(.menu-item-has-children) a{border:0}