Ladezeit von WordPress optimieren: Die komplette Anleitung

<!DOCTYPE html> <html class="html post-template-default single single-post postid-10213 single-format-standard wp-embed-responsive" lang="de_DE"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="alternate" type="application/rss+xml" title="Bleech Feed" href="https://bleech.de/feed/"> <meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' /> <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style> <link rel="alternate" hreflang="en" href="https://bleech.de/en/blog/optimize-wordpress-load-time/" /> <link rel="alternate" hreflang="de" href="https://bleech.de/blog/ladezeit-optimieren-wordpress/" /> <link rel="alternate" hreflang="x-default" href="https://bleech.de/blog/ladezeit-optimieren-wordpress/" />  <title>Ladezeit von WordPress optimieren: Die komplette Anleitung</title> <meta name="description" content="Eure Besucher und Google wollen Geschwindigkeit. Die Ladezeit von WordPress lässt sich mit dieser Anleitung nachhaltig verbessern." /> <link rel="canonical" href="https://bleech.de/blog/ladezeit-optimieren-wordpress/" /> <meta property="og:locale" content="de_DE" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Ladezeit von WordPress optimieren: Die komplette Anleitung" /> <meta property="og:description" content="Eure Besucher und Google wollen Geschwindigkeit. Die Ladezeit von WordPress lässt sich mit dieser Anleitung nachhaltig verbessern." /> <meta property="og:url" content="https://bleech.de/blog/ladezeit-optimieren-wordpress/" /> <meta property="og:site_name" content="Bleech" /> <meta property="article:published_time" content="2023-03-30T08:00:00+00:00" /> <meta property="article:modified_time" content="2023-03-30T13:08:13+00:00" /> <meta property="og:image" content="https://bleech.de/wp-content/uploads/2023/03/wordpress-ladezeit-verbessern-anleitung.png" /> <meta property="og:image:width" content="1366" /> <meta property="og:image:height" content="768" /> <meta property="og:image:type" content="image/png" /> <meta name="author" content="Adam Vradenburg" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:label1" content="Verfasst von" /> <meta name="twitter:data1" content="Adam Vradenburg" /> <meta name="twitter:label2" content="Geschätzte Lesezeit" /> <meta name="twitter:data2" content="19 Minuten" /> <script type="application/ld+json" class="yoast-schema-graph">{"@context":"https://schema.org","@graph":[{"@type":"Article","@id":"https://bleech.de/blog/ladezeit-optimieren-wordpress/#article","isPartOf":{"@id":"https://bleech.de/blog/ladezeit-optimieren-wordpress/"},"author":{"name":"Adam Vradenburg","@id":"https://bleech.de/#/schema/person/e50bdecefb64442eb7a7b1d50ad4beaa"},"headline":"Ladezeit von WordPress dauerhaft und nachhaltig verbessern: Die Anleitung","datePublished":"2023-03-30T08:00:00+00:00","dateModified":"2023-03-30T13:08:13+00:00","mainEntityOfPage":{"@id":"https://bleech.de/blog/ladezeit-optimieren-wordpress/"},"wordCount":3503,"publisher":{"@id":"https://bleech.de/#organization"},"image":{"@id":"https://bleech.de/blog/ladezeit-optimieren-wordpress/#primaryimage"},"thumbnailUrl":"https://bleech.de/wp-content/uploads/2023/03/wordpress-ladezeit-verbessern-anleitung.png","articleSection":["Pagespeed"],"inLanguage":"de"},{"@type":"WebPage","@id":"https://bleech.de/blog/ladezeit-optimieren-wordpress/","url":"https://bleech.de/blog/ladezeit-optimieren-wordpress/","name":"Ladezeit von WordPress optimieren: Die komplette Anleitung","isPartOf":{"@id":"https://bleech.de/#website"},"primaryImageOfPage":{"@id":"https://bleech.de/blog/ladezeit-optimieren-wordpress/#primaryimage"},"image":{"@id":"https://bleech.de/blog/ladezeit-optimieren-wordpress/#primaryimage"},"thumbnailUrl":"https://bleech.de/wp-content/uploads/2023/03/wordpress-ladezeit-verbessern-anleitung.png","datePublished":"2023-03-30T08:00:00+00:00","dateModified":"2023-03-30T13:08:13+00:00","description":"Eure Besucher und Google wollen Geschwindigkeit. Die Ladezeit von WordPress lässt sich mit dieser Anleitung nachhaltig verbessern.","breadcrumb":{"@id":"https://bleech.de/blog/ladezeit-optimieren-wordpress/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https://bleech.de/blog/ladezeit-optimieren-wordpress/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https://bleech.de/blog/ladezeit-optimieren-wordpress/#primaryimage","url":"https://bleech.de/wp-content/uploads/2023/03/wordpress-ladezeit-verbessern-anleitung.png","contentUrl":"https://bleech.de/wp-content/uploads/2023/03/wordpress-ladezeit-verbessern-anleitung.png","width":1366,"height":768,"caption":"Header mit graphischer Überschrift und einer Stoppuhr"},{"@type":"BreadcrumbList","@id":"https://bleech.de/blog/ladezeit-optimieren-wordpress/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://bleech.de/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https://bleech.de/blog/"},{"@type":"ListItem","position":3,"name":"Ladezeit von WordPress dauerhaft und nachhaltig verbessern: Die Anleitung"}]},{"@type":"WebSite","@id":"https://bleech.de/#website","url":"https://bleech.de/","name":"Bleech","description":"WordPress Agentur","publisher":{"@id":"https://bleech.de/#organization"},"alternateName":"Bleech","inLanguage":"de"},{"@type":"Organization","@id":"https://bleech.de/#organization","name":"Bleech","url":"https://bleech.de/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https://bleech.de/#/schema/logo/image/","url":"https://bleech.de/wp-content/uploads/2022/01/favicon-2.png","contentUrl":"https://bleech.de/wp-content/uploads/2022/01/favicon-2.png","width":512,"height":512,"caption":"Bleech"},"image":{"@id":"https://bleech.de/#/schema/logo/image/"},"sameAs":["https://www.youtube.com/@siegfried-deploy","https://www.linkedin.com/company/bleech/"]},{"@type":"Person","@id":"https://bleech.de/#/schema/person/e50bdecefb64442eb7a7b1d50ad4beaa","name":"Adam Vradenburg","image":{"@type":"ImageObject","inLanguage":"de","@id":"https://bleech.de/#/schema/person/image/","url":"https://bleech.de/wp-content/uploads/external/62e60833251f19edef10991961d8d551.jpg","contentUrl":"https://bleech.de/wp-content/uploads/external/62e60833251f19edef10991961d8d551.jpg","caption":"Adam Vradenburg"},"description":"Content / SEO Consultant"}]}</script>  <link rel='dns-prefetch' href='//plausible.io' /> <style id='filebird-block-filebird-gallery-style-inline-css'> ul.filebird-block-filebird-gallery{margin:auto!important;padding:0!important;width:100%}ul.filebird-block-filebird-gallery.layout-grid{display:grid;grid-gap:20px;align-items:stretch;grid-template-columns:repeat(var(--columns),1fr);justify-items:stretch}ul.filebird-block-filebird-gallery.layout-grid li img{border:1px solid #ccc;box-shadow:2px 2px 6px 0 rgba(0,0,0,.3);height:100%;max-width:100%;-o-object-fit:cover;object-fit:cover;width:100%}ul.filebird-block-filebird-gallery.layout-masonry{-moz-column-count:var(--columns);-moz-column-gap:var(--space);column-gap:var(--space);-moz-column-width:var(--min-width);columns:var(--min-width) var(--columns);display:block;overflow:auto}ul.filebird-block-filebird-gallery.layout-masonry li{margin-bottom:var(--space)}ul.filebird-block-filebird-gallery li{list-style:none}ul.filebird-block-filebird-gallery li figure{height:100%;margin:0;padding:0;position:relative;width:100%}ul.filebird-block-filebird-gallery li figure figcaption{background:linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.3) 70%,transparent);bottom:0;box-sizing:border-box;color:#fff;font-size:.8em;margin:0;max-height:100%;overflow:auto;padding:3em .77em .7em;position:absolute;text-align:center;width:100%;z-index:2}ul.filebird-block-filebird-gallery li figure figcaption a{color:inherit} </style> <style id='classic-theme-styles-inline-css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link rel='stylesheet' id='wpml-blocks-css' href='https://bleech.de/wp-content/plugins/sitepress-multilingual-cms/dist/css/blocks/styles.css?ver=4.6.15' media='all' /> <link rel='stylesheet' id='flynt-assets-css' href='https://bleech.de/wp-content/themes/bleech-website-2021/dist/assets/main.d7965196d3f0b0c7ddfe.css?ver=6.7.2' media='all' /> <link rel='stylesheet' id='borlabs-cookie-css' href='https://bleech.de/wp-content/cache/borlabs-cookie/borlabs-cookie_1_de.css?ver=2.3-45' media='all' /> <script defer data-domain='bleech.de' data-api='https://plausible.io/api/event' data-cfasync='false' event-author='Adam Vradenburg' event-category="Pagespeed" event-translation_priority="Optional" src="https://plausible.io/js/plausible.outbound-links.file-downloads.pageview-props.js?ver=2.1.4" id="plausible"></script> <script id="plausible-analytics-js-after"> window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) } </script> <script src="https://bleech.de/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script> <meta name="generator" content="WPML ver:4.6.15 stt:1,3;" /> <meta name='plausible-analytics-version' content='2.1.4' /> <link rel="apple-touch-icon" sizes="180x180" href="/wp-content/uploads/fbrfg/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/wp-content/uploads/fbrfg/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/wp-content/uploads/fbrfg/favicon-16x16.png"> <link rel="manifest" href="/wp-content/uploads/fbrfg/site.webmanifest"> <link rel="mask-icon" href="/wp-content/uploads/fbrfg/safari-pinned-tab.svg" color="#5bbad5"> <link rel="shortcut icon" href="/wp-content/uploads/fbrfg/favicon.ico"> <meta name="msapplication-TileColor" content="#dce5fd"> <meta name="msapplication-config" content="/wp-content/uploads/fbrfg/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> <link rel='preload' href='https://bleech.de/wp-content/themes/bleech-website-2021/dist/assets/fonts/titillium-web-v14-latin-regular.55b29b135a9838d9e0f7.woff2' as='font' crossorigin='anonymous'> <link rel='preload' href='https://bleech.de/wp-content/themes/bleech-website-2021/dist/assets/fonts/titillium-web-v14-latin-600.37816aa7534e645dfad1.woff2' as='font' crossorigin='anonymous'> <script>!function(){let e=new URLSearchParams(window.location.search);["utm_source","utm_medium","utm_campaign","utm_term"].forEach(r=>{let t=e.get(r);t&&sessionStorage.setItem(r,t)}),document.referrer&&!document.referrer.includes(window.location.hostname)&&sessionStorage.setItem("referrer",document.referrer)}();</script> </head> <body> <a href="#mainContent" class="skipLink"> Skip to main content </a> <div class="pageWrapper"> <header class="mainHeader"> <nav is="flynt-navigation-main" class="flyntComponent" aria-label="Main"> <div class="wrapper"> <div class="container centerMaxWidthContainer"> <a class="logo" href="https://bleech.de" aria-label="Bleech"> <svg width="127" height="35" viewBox="0 0 127 35" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.772 0H1.021L.99 33.605h13.15c7.133.006 10.699-3.163 10.699-9.506.005-3.957-1.594-6.55-4.798-7.78a7.356 7.356 0 0 0 3.016-2.846c.64-1.143.959-2.711.959-4.705 0-3.017-.849-5.233-2.545-6.647C19.775.707 17.208 0 13.772 0ZM6.463 4.717h7.012c3.335.003 5.005 1.557 5.01 4.662-.005 3.3-1.609 4.95-4.81 4.95H6.463V4.717Zm-.008 14.224h7.305a6.643 6.643 0 0 1 3.915 1.107c1.043.738 1.565 2.02 1.565 3.847.006 1.835-.44 3.128-1.34 3.877-.9.75-2.248 1.125-4.047 1.125H6.455V18.94ZM57.304 29.075l-1.375.144c-2.449.195-4.83.292-7.143.292-2.32-.002-3.904-.477-4.755-1.425-.852-.947-1.291-2.435-1.32-4.462h15.204l.343-3.818c.006-7.494-3.425-11.242-10.29-11.242-7.102-.002-10.653 4.344-10.653 13.04-.002 4.38.79 7.57 2.376 9.566 1.587 1.997 4.192 2.995 7.818 2.995a50.521 50.521 0 0 0 9.91-1.12l-.115-3.97Zm-5.46-14.652c.767.975 1.15 2.672 1.15 5.09H42.648c.034-2.336.468-4.01 1.302-5.023.834-1.012 2.168-1.518 4-1.518 1.83-.009 3.128.475 3.894 1.45ZM79.668 29.236l1.374-.148.094 3.975a50.44 50.44 0 0 1-9.905 1.12c-3.631 0-6.239-.999-7.823-2.995-1.583-1.997-2.374-5.181-2.37-9.553 0-8.697 3.55-13.043 10.65-13.04 6.87 0 10.3 3.745 10.292 11.237l-.344 3.818H66.43c.034 2.027.475 3.515 1.323 4.462.849.948 2.434 1.423 4.755 1.426a96.236 96.236 0 0 0 7.161-.302Zm-2.936-9.722c0-2.418-.383-4.115-1.15-5.09-.765-.976-2.065-1.459-3.897-1.447-1.829 0-3.16.505-3.996 1.514-.836 1.01-1.273 2.681-1.303 5.006l10.347.017Z" fill="currentColor"/><path d="M101.259 9.29a32.688 32.688 0 0 0-6.13-.691c-3.628-.009-6.245.958-7.851 2.901-1.607 1.943-2.41 5.204-2.41 9.782 0 4.576.758 7.87 2.274 9.884 1.516 2.014 4.139 3.02 7.869 3.02 2.505-.093 4.999-.386 7.457-.878l-.144-4.267-5.74.39c-2.579-.008-4.275-.598-5.09-1.769-.814-1.17-1.222-3.292-1.222-6.363-.002-3.077.422-5.17 1.273-6.278.851-1.109 2.52-1.663 5.006-1.663 1.244 0 3.156.132 5.735.395l.199-4.217-1.226-.246ZM118.525 8.616c-2.062 0-4.301.602-6.719 1.807V.11h-5.345l-.022 33.563h5.345V14.448l.785-.297a14.847 14.847 0 0 1 4.709-.78c1.798 0 2.975.557 3.529 1.671.554 1.114.837 2.994.848 5.638v12.997h5.333v-13.15c0-4.242-.594-7.292-1.782-9.15-1.188-1.858-3.415-2.778-6.681-2.761ZM28.526.056h5.345v33.562h-5.345V.056Z" fill="currentColor"/></svg> </a> <ul class="menu"> <li class="menu-item menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link" href="https://bleech.de/team/" > <span class="menu-link-text">Team</span> </a> </li> <li class="menu-item menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link" href="https://bleech.de/services/" > <span class="menu-link-text">Services</span> </a> </li> <li class="menu-item menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link" href="https://bleech.de/produkte/" > <span class="menu-link-text">Produkte</span> </a> </li> <li class="menu-item menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link" href="https://bleech.de/siegfried-deploy-podcast/" > <span class="menu-link-text">Podcast</span> </a> </li> <li class="menu-item menu-item menu-item-type-post_type menu-item-object-page current_page_parent"> <a class="menu-link" href="https://bleech.de/blog/" > <span class="menu-link-text">Blog</span> </a> </li> <li class="menu-item menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link menu-link--button" href="https://bleech.de/kontakt/" > <span class="menu-link-text">Kontakt</span> </a> </li> <li class="menu-item menu-item--lang"> <ul> <li class="wpml-ls-item wpml-ls-item-de wpml-ls-current-language wpml-ls-item-legacy-list-horizontal"> <a href="https://bleech.de/blog/ladezeit-optimieren-wordpress/" class="wpml-ls-link">DE</a> </li> <li class="wpml-ls-item wpml-ls-item-en wpml-ls-item-legacy-list-horizontal"> <a href="https://bleech.de/en/blog/optimize-wordpress-load-time/" class="wpml-ls-link">EN</a> </li> </ul> </li> </ul> </div> </div> </nav> <nav is="flynt-navigation-burger" class="flyntComponent" aria-label="Main"> <div class="wrapper"> <div class="container centerMaxWidthContainer"> <a class="logo" href="https://bleech.de" aria-label="Bleech"> <svg width="127" height="35" viewBox="0 0 127 35" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.772 0H1.021L.99 33.605h13.15c7.133.006 10.699-3.163 10.699-9.506.005-3.957-1.594-6.55-4.798-7.78a7.356 7.356 0 0 0 3.016-2.846c.64-1.143.959-2.711.959-4.705 0-3.017-.849-5.233-2.545-6.647C19.775.707 17.208 0 13.772 0ZM6.463 4.717h7.012c3.335.003 5.005 1.557 5.01 4.662-.005 3.3-1.609 4.95-4.81 4.95H6.463V4.717Zm-.008 14.224h7.305a6.643 6.643 0 0 1 3.915 1.107c1.043.738 1.565 2.02 1.565 3.847.006 1.835-.44 3.128-1.34 3.877-.9.75-2.248 1.125-4.047 1.125H6.455V18.94ZM57.304 29.075l-1.375.144c-2.449.195-4.83.292-7.143.292-2.32-.002-3.904-.477-4.755-1.425-.852-.947-1.291-2.435-1.32-4.462h15.204l.343-3.818c.006-7.494-3.425-11.242-10.29-11.242-7.102-.002-10.653 4.344-10.653 13.04-.002 4.38.79 7.57 2.376 9.566 1.587 1.997 4.192 2.995 7.818 2.995a50.521 50.521 0 0 0 9.91-1.12l-.115-3.97Zm-5.46-14.652c.767.975 1.15 2.672 1.15 5.09H42.648c.034-2.336.468-4.01 1.302-5.023.834-1.012 2.168-1.518 4-1.518 1.83-.009 3.128.475 3.894 1.45ZM79.668 29.236l1.374-.148.094 3.975a50.44 50.44 0 0 1-9.905 1.12c-3.631 0-6.239-.999-7.823-2.995-1.583-1.997-2.374-5.181-2.37-9.553 0-8.697 3.55-13.043 10.65-13.04 6.87 0 10.3 3.745 10.292 11.237l-.344 3.818H66.43c.034 2.027.475 3.515 1.323 4.462.849.948 2.434 1.423 4.755 1.426a96.236 96.236 0 0 0 7.161-.302Zm-2.936-9.722c0-2.418-.383-4.115-1.15-5.09-.765-.976-2.065-1.459-3.897-1.447-1.829 0-3.16.505-3.996 1.514-.836 1.01-1.273 2.681-1.303 5.006l10.347.017Z" fill="currentColor"/><path d="M101.259 9.29a32.688 32.688 0 0 0-6.13-.691c-3.628-.009-6.245.958-7.851 2.901-1.607 1.943-2.41 5.204-2.41 9.782 0 4.576.758 7.87 2.274 9.884 1.516 2.014 4.139 3.02 7.869 3.02 2.505-.093 4.999-.386 7.457-.878l-.144-4.267-5.74.39c-2.579-.008-4.275-.598-5.09-1.769-.814-1.17-1.222-3.292-1.222-6.363-.002-3.077.422-5.17 1.273-6.278.851-1.109 2.52-1.663 5.006-1.663 1.244 0 3.156.132 5.735.395l.199-4.217-1.226-.246ZM118.525 8.616c-2.062 0-4.301.602-6.719 1.807V.11h-5.345l-.022 33.563h5.345V14.448l.785-.297a14.847 14.847 0 0 1 4.709-.78c1.798 0 2.975.557 3.529 1.671.554 1.114.837 2.994.848 5.638v12.997h5.333v-13.15c0-4.242-.594-7.292-1.782-9.15-1.188-1.858-3.415-2.778-6.681-2.761ZM28.526.056h5.345v33.562h-5.345V.056Z" fill="currentColor"/></svg> </a> <button class="hamburger" type="button" data-toggle-menu aria-expanded="false" aria-controls="navigationBurger-menu"> <span class="hamburger-lines"> <span class="visuallyHidden">Toggle Menu</span> <span class="hamburger-lines--primary"></span> <span class="hamburger-lines--secondary"></span> </span> </button> </div> <div class="menu themeHero" id="navigationBurger-menu"> <span class="menu-background-stripe stripe-1"></span> <span class="menu-background-stripe stripe-2"></span> <span class="menu-background-stripe stripe-3"></span> <span class="menu-background-stripe stripe-4"></span> <span class="menu-background-stripe stripe-5"></span> <div class="menu-scroll"> <ul class="menu-list"> <li class="menu-item menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link" href="https://bleech.de/team/" > <span class="menu-link-text">Team</span> </a> </li> <li class="menu-item menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link" href="https://bleech.de/services/" > <span class="menu-link-text">Services</span> </a> </li> <li class="menu-item menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link" href="https://bleech.de/produkte/" > <span class="menu-link-text">Produkte</span> </a> </li> <li class="menu-item menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link" href="https://bleech.de/siegfried-deploy-podcast/" > <span class="menu-link-text">Podcast</span> </a> </li> <li class="menu-item menu-item menu-item-type-post_type menu-item-object-page current_page_parent"> <a class="menu-link" href="https://bleech.de/blog/" > <span class="menu-link-text">Blog</span> </a> </li> <li class="menu-item menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link menu-link--button" href="https://bleech.de/kontakt/" > <span class="menu-link-text">Kontakt</span> </a> </li> <li class="menu-item menu-item--lang"> <ul> <li class="wpml-ls-item wpml-ls-item-de wpml-ls-current-language wpml-ls-item-legacy-list-horizontal"> <a href="https://bleech.de/blog/ladezeit-optimieren-wordpress/" class="wpml-ls-link">DE</a> </li> <li class="wpml-ls-item wpml-ls-item-en wpml-ls-item-legacy-list-horizontal"> <a href="https://bleech.de/en/blog/optimize-wordpress-load-time/" class="wpml-ls-link">EN</a> </li> </ul> </li> </ul> </div> </div> </div> </nav> </header> <main id="mainContent" class="mainContent" aria-label="Content"> <article class="post"> <header class="post-header"> <div class="flyntComponent" is="flynt-block-post-header"> <div class="header themeLight header--hasFeaturedImage "> <div class="container centerMaxWidthContainer"> <div class="content centerContentMaxWidthLarge"> <p class="subline textBrand"> <span class="post-category"> <span class="visuallyHidden">in</span> Pagespeed </span> </p> <h1 class="textAccent">Ladezeit von WordPress dauerhaft und nachhaltig verbessern: Die Anleitung</h1> <div class="meta"> <div class="meta-container"> <div class="meta-avatar"> <img class="meta-avatarImage lazyload" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNjQnIGhlaWdodD0nNjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-src="https://bleech.de/wp-content/uploads/external/62e60833251f19edef10991961d8d551.jpg" width="64" height="64" alt="Adam Vradenburg"> </div> <div class="meta-info"> <div class="meta-author"> <span class="meta-authorLink"> <span class="visuallyHidden">Erstellt von</span> Adam Vradenburg </span> <span class="meta-date"><time datetime="2023-03-30 10:00:00">30. März 2023</time></span> </div> <p class="meta-readingtime">19 Minuten</p> </div> </div> </div> </div> <div class="excerpt centerContentMaxWidth"> <p class="p-large">Es ist meistens nur eine Frage der Zeit, bis eine Website durch neue Features, Erweiterungen und Tracking-Schnipsel unerträglich langsam wird. Wir packen das Thema an der Wurzel an und leiten dich an, die Website Ladezeit zu optimieren! </p> </div> </div> </div> <div class="featuredImage centerMaxWidthContainer"> <figure class="figure"> <img class="post-image figure-image lazyload" src="https://bleech.de/wp-content/uploads/resized/2023/03/wordpress-ladezeit-verbessern-anleitung-1440x810-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTQ0MCcgaGVpZ2h0PSc4MTAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/03/wordpress-ladezeit-verbessern-anleitung-2390x1344-c-default.png 2390w, https://bleech.de/wp-content/uploads/resized/2023/03/wordpress-ladezeit-verbessern-anleitung-1440x810-c-default.png 1440w, https://bleech.de/wp-content/uploads/resized/2023/03/wordpress-ladezeit-verbessern-anleitung-1080x608-c-default.png 1080w, https://bleech.de/wp-content/uploads/resized/2023/03/wordpress-ladezeit-verbessern-anleitung-720x405-c-default.png 720w" data-sizes="auto" alt="Header mit graphischer Überschrift und einer Stoppuhr"> </figure> </div> </div> </header> <section class="post-main is-layout-constrained"> <p>Eine schnelle Website ist für eine positive Besuchererfahrung (UX) und somit für ein hohes Ranking in den Suchergebnissen unumgänglich. Die häufigste Lösung dafür: Plugin installieren, einen Schluck Kaffee trinken, weiter geht’s? Es kann sein, dass sich das Ergebnis des PageSpeed Tests danach im grünen Bereich befindet, aber um nachhaltig die Ladezeit in WordPress zu optimieren, ist ein stärkeres Fundament erforderlich. Dafür schauen wir uns die folgenden 3 Bereiche genauer an:</p> <ol class="wp-block-list"> <li><strong><a href="#datenlast">Datenlast</a></strong></li> <li><strong><a href="#ladestrategie">Ladestrategie</a></strong></li> <li><strong><a href="#infrastruktur">Infrastruktur</a></strong></li> </ol> <p>Beachtet bitte auch unbedingt die Reihenfolge! Eine bessere Infrastruktur ist zwar schön, kann aber eine zu hohe Datenlast nur bedingt ausbügeln. Wir gehen also Schritt für Schritt vor.</p> <h2 class="wp-block-heading">Blackhat-PageSpeed-Techniken</h2> <p>Wir kriegen sehr viele Anfragen von Partnern zum Thema Ladezeit. Unsere Gründer Steffen und Dominik haben in ihrem <a href="https://bleech.de/siegfried-deploy-podcast/">Podcast</a> ausführlich über das Thema gesprochen und sogar ein paar Blackhat-PageSpeed-Techniken verraten.</p> <div class="flyntComponent componentSpacing " is="flynt-block-video-oembed"> <div class="container container-small container-noBlock centerMaxWidthContainer"> <div class="video video-green video-small video-noBlock"> <figure class="figure"> <img fetchpriority="high" decoding="async" class="figure-image lazyload" width="1120" height="630" src="https://bleech.de/wp-content/uploads/resized/2023/03/siegfried-deploy-yt-header_1-1120x630-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTEyMCcgaGVpZ2h0PSc2MzAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/03/siegfried-deploy-yt-header_1-2240x1260-c-default.png 2240w, https://bleech.de/wp-content/uploads/resized/2023/03/siegfried-deploy-yt-header_1-1120x630-c-default.png 1120w, https://bleech.de/wp-content/uploads/resized/2023/03/siegfried-deploy-yt-header_1-1856x1044-c-default.png 1856w, https://bleech.de/wp-content/uploads/resized/2023/03/siegfried-deploy-yt-header_1-928x522-c-default.png 928w, https://bleech.de/wp-content/uploads/resized/2023/03/siegfried-deploy-yt-header_1-1568x882-c-default.png 1568w, https://bleech.de/wp-content/uploads/resized/2023/03/siegfried-deploy-yt-header_1-784x441-c-default.png 784w, https://bleech.de/wp-content/uploads/resized/2023/03/siegfried-deploy-yt-header_1-1400x788-c-default.png 1400w, https://bleech.de/wp-content/uploads/resized/2023/03/siegfried-deploy-yt-header_1-1122x633-c-default.png 1122w, https://bleech.de/wp-content/uploads/resized/2023/03/siegfried-deploy-yt-header_1-1005x567-c-default.png 1005w, https://bleech.de/wp-content/uploads/resized/2023/03/siegfried-deploy-yt-header_1-960x540-c-default.png 960w, https://bleech.de/wp-content/uploads/resized/2023/03/siegfried-deploy-yt-header_1-840x472-c-default.png 840w, https://bleech.de/wp-content/uploads/resized/2023/03/siegfried-deploy-yt-header_1-480x270-c-default.png 480w, https://bleech.de/wp-content/uploads/resized/2023/03/siegfried-deploy-yt-header_1-420x236-c-default.png 420w" data-sizes="auto" alt=""> </figure> <div class="video-player"> <div class="BorlabsCookie _brlbs-cb-youtube"><div class="_brlbs-content-blocker"> <div class="_brlbs-embed _brlbs-video-youtube"> <div class="_brlbs-caption themeDark"> <p>Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.<br><a href="https://policies.google.com/privacy?hl=en&gl=en" target="_blank" rel="nofollow noopener noreferrer">Mehr erfahren</a></p> <p><button class="button button--ghost" data-borlabs-cookie-unblock role="button">Video laden</button></p> <p> <label> <input type="checkbox" name="unblockAll" value="0"> <span>YouTube immer entsperren</span> </label> </p> </div> </div> </div><div class="borlabs-hide" data-borlabs-cookie-type="content-blocker" data-borlabs-cookie-id="youtube">PGlmcmFtZSB0aXRsZT0iUmV2ZWFsaW5nIEJsYWNraGF0IFBhZ2VTcGVlZCBPcHRpbWl6YXRpb24gVGVjaG5pcXVlcyIgd2lkdGg9IjExMjAiIGhlaWdodD0iNjMwIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmU7IHdlYi1zaGFyZSIgcmVmZXJyZXJwb2xpY3k9InN0cmljdC1vcmlnaW4td2hlbi1jcm9zcy1vcmlnaW4iIGFsbG93ZnVsbHNjcmVlbiBkYXRhLXNyYz0iaHR0cHM6Ly93d3cueW91dHViZS1ub2Nvb2tpZS5jb20vZW1iZWQvNFhsQlFmclNOeDg/ZmVhdHVyZT1vZW1iZWQmYW1wO21vZGVzdGJyYW5kaW5nPTEmYW1wO2F1dG9wbGF5PTEmYW1wO3JlbD0wIj48L2lmcmFtZT4=</div></div> <div class="video-loader"></div> <button class="video-playButton" type="button" aria-label="Play Video"></button> </div> </div> </div> </div> <p style="font-size:0.94rem"><em>Wer vor dem Deepdive keine Angst hat, und wissen will, wie sich ein Cookie-Banner auf den PageSpeed-Score auswirkt, hört am besten rein.</em></p> <h2 class="wp-block-heading">Bevor es losgeht: Vorher-Nachher-Vergleich!</h2> <p>Eure Besucher:innen wollen Geschwindigkeit, am besten sofort. Es ist trotzdem empfehlenswert, die Beschleunigung der Ladezeit langsam anzugehen. Das <strong>Ziel</strong> ist es, die Website schneller zu machen, ohne auf die tollen Funktionalitäten zu verzichten. Die Bilder sollen schnell laden und zudem gestochen scharf sein.</p> <p>Damit wir auch nicht aus Versehen etwas kaputt machen, gehen wir sehr bedacht vor. Schritt für Schritt testen wir jede Optimierung und messen die Einsparungen. Das Vorher-Nachher-Bild muss unbedingt her, um den Erfolg einer Maßnahme nachvollziehen zu können. Eines der bekanntesten Tools für die Messung und Optimierung ist <a href="https://pagespeed.web.dev/" target="_blank" rel="noreferrer noopener">PageSpeed Insights</a> von Google. Es gibt auch andere Anbieter wie GTmetrix. Aber egal welches Tool zur Messung ihr verwendet, am Ende ist es wichtig, mit einem Tool konsistent zu bleiben und dieses möglichst langfristig für zuverlässige Ergebnisse zu nutzen.</p> <h3 class="wp-block-heading">Core Web Vitals und PageSpeed Insights</h3> <p>Weil viele auf das Google Ranking schauen, gibt es neben dem Score aus dem PageSpeed Insights Tool auch die sogenannten Core Web Vitals als Maßstäbe. PageSpeed Insights zeigt die Core Web Vitals für eine abgefragte Seite an, wenn genug Daten vorhanden sind. Das sind die tatsächlichen Erfahrungswerte von echten Besuchern. In der Search Console können wir sehen, welche Seiten als gut, verbesserungswürdig oder schlecht eingestuft werden, und welche Vital-Metriken verbessert werden müssen.</p> <div class="flyntBlockImage flyntComponent componentSpacing flyntComponent--sizeMedium "> <div class="container"> <figure class="figure figure--alignCenter"> <img decoding="async" class="figure-image lazyload" src="https://bleech.de/wp-content/uploads/resized/2023/03/core-web-vitals-1080x0-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTA4MCcgaGVpZ2h0PSc1NTcnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/03/core-web-vitals-1972x0-c-default.png 1972w, https://bleech.de/wp-content/uploads/resized/2023/03/core-web-vitals-1416x0-c-default.png 1416w, https://bleech.de/wp-content/uploads/resized/2023/03/core-web-vitals-1356x0-c-default.png 1356w, https://bleech.de/wp-content/uploads/resized/2023/03/core-web-vitals-1080x0-c-default.png 1080w, https://bleech.de/wp-content/uploads/resized/2023/03/core-web-vitals-750x0-c-default.png 750w, https://bleech.de/wp-content/uploads/resized/2023/03/core-web-vitals-375x0-c-default.png 375w" data-sizes="auto" alt=""> <figcaption class="figure-caption"> <p>Beispiel für bestandene Core Web Vitals-Bewertung</p> </figcaption> </figure> </div> </div> <p>Es kann sein, dass die Core Web Vitals als bestanden gelten, aber das PageSpeed Insights Tool noch Verbesserungspotenzial aufzeigt. Beim PageSpeed-Test wird die Seite komplett neu geladen. Ein Besucher lädt aber beispielsweise nicht bei jedem Seitenaufruf das Cookie-Banner. Aktuell wird das Element aber immer im Score miteingerechnet.</p> <p>Zudem <strong>simuliert</strong> das PageSpeed Insights Tool ein verhältnismäßig<strong> langsames mobiles Gerät</strong> und eine verhältnismäßig <strong>langsame Internetverbindung</strong>. Häufig haben tatsächliche Nutzer schnellere Geräte und schnellere Internetverbindungen, sodass in den erfassten Felddaten der Core Web Vitals bessere Ergebnisse erzielt werden können.</p> <p>Trotzdem ist das PageSpeed Tool sehr hilfreich. Google hat dafür wichtige Eckpfeiler für eine positive Nutzererfahrung aufgestellt. Nerviger als eine Seite, die langsam lädt, ist eine, die sich dabei so stark verschiebt, dass man sich verklickt. Hier einmal die Core Web Vitals einzeln als Frage erklärt:</p> <ul class="wp-block-list"> <li><strong>Largest Contentful Paint (LCP)</strong>: Wie lange dauert es, bis das größte visuelle Element im sichtbaren Bereich geladen ist?</li> <li><strong>First Input Delay (FID)</strong>: Wie lange dauert es, bis der Browser auf die erste Interaktion eines Besuchers reagiert?</li> <li><strong>Cumulative Layout Shift (CLS)</strong>: Wie stark verschieben sich Elemente im Ladeprozess?</li> </ul> <p>Mit diesen Metriken will Google jeweils Ladezeit, Interaktivität und visuelle Stabilität messen. Wir werden uns hier Schritt für Schritt vorarbeiten, um am Ende alle Werte zu verbessern.</p> <h2 class="wp-block-heading" id="datenlast">1. Datenlast</h2> <p>Es gibt unzählige Arten und Weisen, wie man die Programmierung und Infrastruktur einer Website optimieren kann. Bei all den technischen Spielereien ist die Reduzierung der Datenlast der sicherste Weg. Wenn wir an Ladestrategie und Infrastruktur tüfteln, kann die Datenlast zwar durch Komprimierung und Caching verringert werden, wir neigen aber dazu, die gewonnene Effizienz durch noch mehr Videos, Bilder, Fonts, Funktionalitäten, usw. wieder aufzubrauchen.</p> <h3 class="wp-block-heading">Auto-Resizing von Bildern ausbauen</h3> <div class="flyntBlockImage flyntComponent componentSpacing flyntComponent--sizeMedium "> <div class="container"> <figure class="figure figure--alignCenter"> <img decoding="async" class="figure-image lazyload" src="https://bleech.de/wp-content/uploads/resized/2023/03/auto-resizing-1-1080x0-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTA4MCcgaGVpZ2h0PSc2MDcnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/03/auto-resizing-1-1972x0-c-default.png 1972w, https://bleech.de/wp-content/uploads/resized/2023/03/auto-resizing-1-1416x0-c-default.png 1416w, https://bleech.de/wp-content/uploads/resized/2023/03/auto-resizing-1-1356x0-c-default.png 1356w, https://bleech.de/wp-content/uploads/resized/2023/03/auto-resizing-1-1080x0-c-default.png 1080w, https://bleech.de/wp-content/uploads/resized/2023/03/auto-resizing-1-750x0-c-default.png 750w, https://bleech.de/wp-content/uploads/resized/2023/03/auto-resizing-1-375x0-c-default.png 375w" data-sizes="auto" alt=""> <figcaption class="figure-caption"> <p>Smartphone mit Bild in unpassender (x) und passender (✓) Größe.</p> </figcaption> </figure> </div> </div> <p>Mit <a href="https://www.youtube.com/watch?v=CCWPYvpUPYY" target="_blank" rel="noreferrer noopener">modernen Bildformaten</a> und <a href="#lazy-loading">Lazy Loading</a> können wir die Ladezeit kürzen. WordPress hat allerdings eine Funktion integriert, die zwar noch ausbaufähig ist, aber vor allem für kleinere Geräte wie Handys eine Menge Potenzial bietet. <strong>Die goldene Regel heißt: Bildbreite möglichst passend zur Bildschirmbreite.</strong> Wenn ein geladenes Bild größer ist, als es aufgrund der Bildschirmgröße dargestellt werden kann, wird Potential verschenkt.</p> <p>WordPress bietet bereits die Funktion an, Bilder automatisch in verschiedenen Größen abzuspeichern. Wenn man in einer Standard-WordPress-Installation ein Bild hochlädt, wird das Bild automatisch als Thumbnail abgespeichert. Dieses Feature kann man für das eigene Design weiter ausbauen. Wenn man weiß, dass die maximale Bildbreite im Design 2000px beträgt, können automatisch alle Bilder in dieser Größe abgespeichert werden. Je nach Anforderung des Projekts haben wir bei Bleech sogar bis zu 20 Versionen eines Bildes abgespeichert!</p> <p>Dieser Umgang mit Bildern macht den Job von Content-Manager:innen einfacher. Sie können getrost hochauflösende Bilder hochladen, ohne diese vorher mit Photoshop bearbeiten zu müssen. Je nach Gerät und Auflösung werden Größen für Smartphones, Tablets, Laptops und zusätzliche Retina-Größen für hochauflösende Displays vom System dynamisch erstellt und dargestellt.</p> <div class="flyntComponent componentSpacing " is="flynt-block-video-oembed"> <div class="container container-small container-noBlock centerMaxWidthContainer"> <div class="video video-blue video-small video-noBlock"> <figure class="figure"> <img decoding="async" class="figure-image lazyload" width="1120" height="630" src="https://bleech.de/wp-content/uploads/resized/2023/03/perfect-responsive-images-1120x630-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTEyMCcgaGVpZ2h0PSc2MzAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/03/perfect-responsive-images-2240x1260-c-default.png 2240w, https://bleech.de/wp-content/uploads/resized/2023/03/perfect-responsive-images-1120x630-c-default.png 1120w, https://bleech.de/wp-content/uploads/resized/2023/03/perfect-responsive-images-1856x1044-c-default.png 1856w, https://bleech.de/wp-content/uploads/resized/2023/03/perfect-responsive-images-928x522-c-default.png 928w, https://bleech.de/wp-content/uploads/resized/2023/03/perfect-responsive-images-1568x882-c-default.png 1568w, https://bleech.de/wp-content/uploads/resized/2023/03/perfect-responsive-images-784x441-c-default.png 784w, https://bleech.de/wp-content/uploads/resized/2023/03/perfect-responsive-images-1400x788-c-default.png 1400w, https://bleech.de/wp-content/uploads/resized/2023/03/perfect-responsive-images-1122x633-c-default.png 1122w, https://bleech.de/wp-content/uploads/resized/2023/03/perfect-responsive-images-1005x567-c-default.png 1005w, https://bleech.de/wp-content/uploads/resized/2023/03/perfect-responsive-images-960x540-c-default.png 960w, https://bleech.de/wp-content/uploads/resized/2023/03/perfect-responsive-images-840x472-c-default.png 840w, https://bleech.de/wp-content/uploads/resized/2023/03/perfect-responsive-images-480x270-c-default.png 480w, https://bleech.de/wp-content/uploads/resized/2023/03/perfect-responsive-images-420x236-c-default.png 420w" data-sizes="auto" alt=""> </figure> <div class="video-player"> <div class="BorlabsCookie _brlbs-cb-youtube"><div class="_brlbs-content-blocker"> <div class="_brlbs-embed _brlbs-video-youtube"> <div class="_brlbs-caption themeDark"> <p>Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.<br><a href="https://policies.google.com/privacy?hl=en&gl=en" target="_blank" rel="nofollow noopener noreferrer">Mehr erfahren</a></p> <p><button class="button button--ghost" data-borlabs-cookie-unblock role="button">Video laden</button></p> <p> <label> <input type="checkbox" name="unblockAll" value="0"> <span>YouTube immer entsperren</span> </label> </p> </div> </div> </div><div class="borlabs-hide" data-borlabs-cookie-type="content-blocker" data-borlabs-cookie-id="youtube">PGlmcmFtZSB0aXRsZT0iVGVjaG5pcXVlcyBmb3IgcGVyZmVjdCByZXNwb25zaXZlIGltYWdlcyIgd2lkdGg9IjExMjAiIGhlaWdodD0iNjMwIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmU7IHdlYi1zaGFyZSIgcmVmZXJyZXJwb2xpY3k9InN0cmljdC1vcmlnaW4td2hlbi1jcm9zcy1vcmlnaW4iIGFsbG93ZnVsbHNjcmVlbiBkYXRhLXNyYz0iaHR0cHM6Ly93d3cueW91dHViZS1ub2Nvb2tpZS5jb20vZW1iZWQvanpSTFdZaFpyQUE/ZmVhdHVyZT1vZW1iZWQmYW1wO21vZGVzdGJyYW5kaW5nPTEmYW1wO2F1dG9wbGF5PTEmYW1wO3JlbD0wIj48L2lmcmFtZT4=</div></div> <div class="video-loader"></div> <button class="video-playButton" type="button" aria-label="Play Video"></button> </div> </div> </div> </div> <h3 class="wp-block-heading">Moderne Bildformate verwenden</h3> <p>Ähnlich wie die passende Bildbreite verringert das <a href="https://web.dev/uses-webp-images/" target="_blank" rel="noreferrer noopener">passende Bildformat</a> die Datenlast. Das altbewährte Bildformat JPEG wird noch gut und gerne genutzt. Inzwischen gibt es aber neue und schnellere Bildkompressionen. <a href="https://youtu.be/CCWPYvpUPYY" target="_blank" rel="noreferrer noopener">WebP</a> wird in der aktuellen Version von nahezu allen Browsern auf Smartphones und Desktops unterstützt, unter anderem Chrome, Firefox, Safari, Edge und Opera. Schon bald könnte dies durch das noch effizientere AVIF-Format abgelöst werden.</p> <p>Ein Plugin wie WebP Express konvertiert automatisch die Bilder eurer Website und stellt sie in einer präferierten Art und Weise zur Verfügung.</p> <h3 class="wp-block-heading">Requests reduzieren</h3> <p>Seit der Einführung von <a href="#http2">HTTP/2</a> hat die Anzahl von Requests einen geringeren Einfluss. Dennoch lohnt es sich, beim Aufruf einer Seite alle angefragten Ressourcen anzuschauen und sie kritisch zu hinterfragen. Jedes Bild, jeder Font, jede CSS- und JavaScript-Datei wird einzeln vom Browser angefragt. Das Hin und Her zwischen Browser und Server kostet Zeit und Aufwand.</p> <ul class="wp-block-list"> <li>Wenn eine Schriftart einmal an einer unauffälligen Stelle vorkommt, sollten wir überlegen, ob wir sie besser gegen einen bereits verwendeten Font austauschen.</li> <li>Wir brauchen nicht zwangsläufig im Footer auf jeder Unterseite eine interaktive Karte mit unserem Standort – stattdessen kann man sie gegen ein Bild oder einen Link zur “Über Uns”-Seite austauschen.</li> </ul> <h3 class="wp-block-heading">Plugins hinterfragen und reduzieren</h3> <p>Einige Plugins können Requests verursachen. Gerade wenn viele Funktionen im Frontend über Plugins bereitgestellt werden, greifen sie auf eigene JavaScript- und CSS-Dateien zurück – beispielsweise für Kontaktformulare, Overlays, und Cookie-Banner. Diese Plugins verbrauchen Ressourcen auf dem Server, laden eigene Skripte, und verlangsamen die Ladezeit einzelner Seiten. Unnötige Plugins sollten daher lieber deaktiviert werden und wichtige Plugin-Funktionen möglichst über die Programmierung der Website gelöst werden.</p> <h3 class="wp-block-heading">Komprimierung aktivieren</h3> <p>Moderne Browser sind in der Lage, komprimierte Daten zu entpacken. So kann ein Datenpaket mit HTML, CSS und JavaScript als Zip-Datei schneller übertragen werden. GZIP-Kompression ist die häufigste Methode im Netz, weil sie verlustfrei ist und mit textbasierten Dateien gut funktioniert. Wenn die Komprimierung auf einer Website nicht vorhanden ist, würde uns das ein Ladezeit-Tool wie <a href="https://pagespeed.web.dev/" target="_blank" rel="noreferrer noopener">PageSpeed Insights</a> melden. Ansonsten gibt es auch spezielle <a href="https://www.giftofspeed.com/gzip-test/" target="_blank" rel="noreferrer noopener">GZIP Compressions Tests</a>. Wer sich mit Developer Tools wohl fühlt, kann natürlich auch im HTTP Response Header schauen. Wie die Komprimierung aktiviert wird, hängt von eurem Server ab.</p> <h2 class="wp-block-heading" id="ladestrategie">2. Ladestrategie</h2> <p>Wir verschicken jetzt kleine, komprimierte Datenpakete. Bei diesem Schritt geht es darum, eine kluge Logik für die Ladestrategie einzubauen, damit Daten erst geliefert werden, wenn sie gebraucht werden. Anders als im ersten Schritt müssen wir bei diesem Schritt die Ladezeit und Funktionalität im Auge behalten.</p> <h3 class="wp-block-heading">Autoplay von Videos ausschalten</h3> <p>Das automatische Abspielen eines Videos aka Autoplay ist bei Streaming-Diensten wie Netflix ein beliebtes „Feature“. Solange unsere Website kein Portal für Videos ist, sollten wir auf Autoplay allerdings verzichten. Als Besucher wollen wir uns ein Bild von einer Landingpage machen und uns orientieren. Startet dann aber irgendwo ein Bewegtbild und Ton (oft auch Werbung), wo wir den Aus-Knopf suchen müssen, drücken wir oft einfach nur auf “Zurück” und probieren das nächste Suchergebnis aus. Dieses Abspringen birgt Gefahr für unsere Performance-Ziele.</p> <p>Autoplay verlangsamt außerdem die Ladezeit. Videos sind selbstverständlich viel größer als Bilder und haben so eine höhere Datenlast. Deshalb sollte man hier besser ein Bild mit Play-Button vorschalten. Verwendet man einen externen Player wie YouTube, muss man ohnehin die Zustimmung des Besuchers einholen, um weiterhin datenschutzkonform zu bleiben.</p> <h3 class="wp-block-heading" id="lazy-loading">Lazy Loading von Bildern kontrollieren</h3> <div class="flyntBlockImage flyntComponent componentSpacing flyntComponent--sizeMedium "> <div class="container"> <figure class="figure figure--alignCenter"> <img decoding="async" class="figure-image lazyload" src="https://bleech.de/wp-content/uploads/resized/2023/03/lazy-loading-2-1-1080x0-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTA4MCcgaGVpZ2h0PSc2MDcnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/03/lazy-loading-2-1-1972x0-c-default.png 1972w, https://bleech.de/wp-content/uploads/resized/2023/03/lazy-loading-2-1-1416x0-c-default.png 1416w, https://bleech.de/wp-content/uploads/resized/2023/03/lazy-loading-2-1-1356x0-c-default.png 1356w, https://bleech.de/wp-content/uploads/resized/2023/03/lazy-loading-2-1-1080x0-c-default.png 1080w, https://bleech.de/wp-content/uploads/resized/2023/03/lazy-loading-2-1-750x0-c-default.png 750w, https://bleech.de/wp-content/uploads/resized/2023/03/lazy-loading-2-1-375x0-c-default.png 375w" data-sizes="auto" alt="two mobile screens. On the left screen the image is not visible, on the right one it is visible."> <figcaption class="figure-caption"> <p>Von Schnell und Langsam: Noch nicht sichtbare Bilder werden noch geladen und dann nach und nach angezeigt.</p> </figcaption> </figure> </div> </div> <p>Ähnlich wie bei einem Platzhalter-Bild für ein Video bedeutet das asynchrone Laden von Bildern, dass Bilder erst geladen werden, wenn man sie benötigt. Bilder außerhalb des sichtbaren Bereiches befinden sich zwar im Quellcode, werden aber erst vom Browser heruntergeladen, wenn der Besucher sie sieht. Der Auslöser für das Laden ist in der Regel das Scrollen. WordPress bietet diese Funktionalität ab Version 5.4 Out-of-the-Box. Es kommt aber vor, dass manchmal bestimmte Bilder im Template davon ausgenommen sind – es lohnt sich also, die Ergebnisse zu kontrollieren. Frühere Versionen von WordPress Themes greifen ebenfalls auf Plugins zurück.</p> <h3 class="wp-block-heading">Lazy Loading von JavaScript kontrollieren</h3> <p>JavaScript macht Webseiten häufig interaktiver, z.B. durch Animationen, dynamisches Nachladen von Inhalten oder zusätzliche Funktionen. Das Laden, Interpretieren und Ausführen von JavaScript Dateien kann eine Webseite jedoch erheblich verlangsamen. Es ist daher ratsam, JavaScript mit geringerer Priorität zu laden. Dies lässt sich über das defer-Attribut von Script-Tags umsetzen.</p> <p>Noch effizienter ist es jedoch, wenn JavaScript-Dateien nur dann geladen werden, wenn sie auf einer Seite tatsächlich benötigt werden. Im einfachen Fall lässt sich das über Script-Splitting erzielen. Die bestmögliche Performance lässt sich aber über <a href="https://youtu.be/lHFGmkD_rjU" target="_blank" rel="noreferrer noopener">JavaScript Hydration</a> und eine Island Architektur umsetzen. Bei dieser werden Skripte erst geladen, wenn sie unmittelbar zur Darstellung und Interaktivität benötigt werden.</p> <div class="flyntComponent componentSpacing " is="flynt-block-video-oembed"> <div class="container container-small container-noBlock centerMaxWidthContainer"> <div class="video video-blue video-small video-noBlock"> <figure class="figure"> <img decoding="async" class="figure-image lazyload" width="1120" height="630" src="https://bleech.de/wp-content/uploads/resized/2023/03/javascript-hydrataion-teaser-1120x630-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTEyMCcgaGVpZ2h0PSc2MzAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/03/javascript-hydrataion-teaser-2240x1260-c-default.png 2240w, https://bleech.de/wp-content/uploads/resized/2023/03/javascript-hydrataion-teaser-1120x630-c-default.png 1120w, https://bleech.de/wp-content/uploads/resized/2023/03/javascript-hydrataion-teaser-1856x1044-c-default.png 1856w, https://bleech.de/wp-content/uploads/resized/2023/03/javascript-hydrataion-teaser-928x522-c-default.png 928w, https://bleech.de/wp-content/uploads/resized/2023/03/javascript-hydrataion-teaser-1568x882-c-default.png 1568w, https://bleech.de/wp-content/uploads/resized/2023/03/javascript-hydrataion-teaser-784x441-c-default.png 784w, https://bleech.de/wp-content/uploads/resized/2023/03/javascript-hydrataion-teaser-1400x788-c-default.png 1400w, https://bleech.de/wp-content/uploads/resized/2023/03/javascript-hydrataion-teaser-1122x633-c-default.png 1122w, https://bleech.de/wp-content/uploads/resized/2023/03/javascript-hydrataion-teaser-1005x567-c-default.png 1005w, https://bleech.de/wp-content/uploads/resized/2023/03/javascript-hydrataion-teaser-960x540-c-default.png 960w, https://bleech.de/wp-content/uploads/resized/2023/03/javascript-hydrataion-teaser-840x472-c-default.png 840w, https://bleech.de/wp-content/uploads/resized/2023/03/javascript-hydrataion-teaser-480x270-c-default.png 480w, https://bleech.de/wp-content/uploads/resized/2023/03/javascript-hydrataion-teaser-420x236-c-default.png 420w" data-sizes="auto" alt=""> </figure> <div class="video-player"> <div class="BorlabsCookie _brlbs-cb-youtube"><div class="_brlbs-content-blocker"> <div class="_brlbs-embed _brlbs-video-youtube"> <div class="_brlbs-caption themeDark"> <p>Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.<br><a href="https://policies.google.com/privacy?hl=en&gl=en" target="_blank" rel="nofollow noopener noreferrer">Mehr erfahren</a></p> <p><button class="button button--ghost" data-borlabs-cookie-unblock role="button">Video laden</button></p> <p> <label> <input type="checkbox" name="unblockAll" value="0"> <span>YouTube immer entsperren</span> </label> </p> </div> </div> </div><div class="borlabs-hide" data-borlabs-cookie-type="content-blocker" data-borlabs-cookie-id="youtube">PGlmcmFtZSB0aXRsZT0iUGFnZVNwZWVkIDEwMCB3aXRoIEphdmFTY3JpcHQgSHlkcmF0aW9uIGFuZCBJc2xhbmRzIiB3aWR0aD0iMTEyMCIgaGVpZ2h0PSI2MzAiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYWNjZWxlcm9tZXRlcjsgYXV0b3BsYXk7IGNsaXBib2FyZC13cml0ZTsgZW5jcnlwdGVkLW1lZGlhOyBneXJvc2NvcGU7IHBpY3R1cmUtaW4tcGljdHVyZTsgd2ViLXNoYXJlIiByZWZlcnJlcnBvbGljeT0ic3RyaWN0LW9yaWdpbi13aGVuLWNyb3NzLW9yaWdpbiIgYWxsb3dmdWxsc2NyZWVuIGRhdGEtc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9sSEZHbWtEX3JqVT9mZWF0dXJlPW9lbWJlZCZhbXA7bW9kZXN0YnJhbmRpbmc9MSZhbXA7YXV0b3BsYXk9MSZhbXA7cmVsPTAiPjwvaWZyYW1lPg==</div></div> <div class="video-loader"></div> <button class="video-playButton" type="button" aria-label="Play Video"></button> </div> </div> </div> </div> <h3 class="wp-block-heading">Fonts selbst hosten</h3> <p>Moderne Schriftarten wie Google Fonts sind sehr beliebt unter Webmastern. Nicht nur weil sie schön sind – sie genießen auch über viele Browser und Geräte hinweg große Unterstützung. Mit dem Google CDN (Content Delivery Network) und mit lokalem Caching sind sie in der Regel sehr schnell geladen. Allerdings ist die <a href="https://youtu.be/4-dDok7NpZc" target="_blank" rel="noreferrer noopener">Einbindung einer Ressource von einem Google Server</a> in der EU nicht mehr datenschutzkonform. Eine Lösung wäre, die Fonts lokal vom eigenen Server zu laden.</p> <p>Alternativ gibt es auch sogenannte web-safe Fonts wie Helvetica, Arial, Verdana und Tahoma. Die meisten sind auf dem Endgerät des Besuchers installiert und müssen nicht heruntergeladen werden.</p> <h3 class="wp-block-heading">Datenbank bereinigen</h3> <p>Wenn eine Website etwas länger online ist, sammeln sich einige Entwürfe und Revisionen in der Datenbank an. Alte Plugins oder gelöschte Kommentare sorgen auch für überflüssige Tabellen und nutzlose Einträge. Je größer die Datenbank, desto länger die Ladezeiten. Eine regelmäßige Bereinigung ist also empfehlenswert, wir sollten aber sehr bedacht vorgehen und regelmäßig ein Backup erstellen. Natürlich gibt es auch hier, wie für viele andere Ladezeit-Maßnahmen, Plugins, die man verwenden kann. Da wir uns bei Bleech mit Datenbanken sehr gut auskennen, gehen wir jedoch manuell vor.</p> <h3 class="wp-block-heading">Caching nutzen</h3> <p>Wenn eine Seite aufgerufen wird, wird sie vom System aus verschiedenen Elementen zusammengebaut, Inhalte wie Texte und Bilder sind in einer Datenbank gespeichert und müssen geholt werden. Dieser Prozess ist ressourcenintensiv – sprich langsam.</p> <h4 class="wp-block-heading">Full Page Caching implementieren</h4> <p>Um die Datenbank zu entlasten, gibt es Full Page Caching, also eine Zwischenspeicherung. Eine Kopie dieser Seite wird abgelegt und kann so beim nächsten Aufruf schneller ausgespielt werden. Bei Aktualisierung einer Seite oder auch in regelmäßigen Abständen wird der Cache geleert, sodass die Inhalte aktuell bleiben. Wir nutzen dafür gerne das Plugin <a href="https://de.wordpress.org/plugins/cache-enabler/" target="_blank" rel="noreferrer noopener">Cache Enabler</a>, da es besonders einfach einzurichten ist und sehr zuverlässig funktioniert.</p> <h4 class="wp-block-heading">Browser-Caching implementieren</h4> <p>Caching kann auf verschiedenen Ebenen stattfinden. Der kürzeste Weg, eine gecachte Seite wieder anzeigen zu lassen, ist über den Browser des Clients bzw. des Besuchers. Hierfür muss eine Einstellung per .htaccess vorgenommen werden oder über ein Caching-Plugin wie WP Rocket, je nach eurer Konfiguration. WP Rocket ist ein umfangreiches Plugin und bietet weitere Funktionen an, wie Komprimierung, ein CDN, usw.</p> <div class="flyntComponent componentSpacing " is="flynt-block-video-oembed"> <div class="container container-small container-noBlock centerMaxWidthContainer"> <div class="video video-green video-small video-noBlock"> <figure class="figure"> <img loading="lazy" decoding="async" class="figure-image lazyload" width="1120" height="630" src="https://bleech.de/wp-content/uploads/resized/2023/03/Siegfrieddeploy-YT_9-1120x630-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTEyMCcgaGVpZ2h0PSc2MzAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/03/Siegfrieddeploy-YT_9-2240x1260-c-default.png 2240w, https://bleech.de/wp-content/uploads/resized/2023/03/Siegfrieddeploy-YT_9-1120x630-c-default.png 1120w, https://bleech.de/wp-content/uploads/resized/2023/03/Siegfrieddeploy-YT_9-1856x1044-c-default.png 1856w, https://bleech.de/wp-content/uploads/resized/2023/03/Siegfrieddeploy-YT_9-928x522-c-default.png 928w, https://bleech.de/wp-content/uploads/resized/2023/03/Siegfrieddeploy-YT_9-1568x882-c-default.png 1568w, https://bleech.de/wp-content/uploads/resized/2023/03/Siegfrieddeploy-YT_9-784x441-c-default.png 784w, https://bleech.de/wp-content/uploads/resized/2023/03/Siegfrieddeploy-YT_9-1400x788-c-default.png 1400w, https://bleech.de/wp-content/uploads/resized/2023/03/Siegfrieddeploy-YT_9-1122x633-c-default.png 1122w, https://bleech.de/wp-content/uploads/resized/2023/03/Siegfrieddeploy-YT_9-1005x567-c-default.png 1005w, https://bleech.de/wp-content/uploads/resized/2023/03/Siegfrieddeploy-YT_9-960x540-c-default.png 960w, https://bleech.de/wp-content/uploads/resized/2023/03/Siegfrieddeploy-YT_9-840x472-c-default.png 840w, https://bleech.de/wp-content/uploads/resized/2023/03/Siegfrieddeploy-YT_9-480x270-c-default.png 480w, https://bleech.de/wp-content/uploads/resized/2023/03/Siegfrieddeploy-YT_9-420x236-c-default.png 420w" data-sizes="auto" alt=""> </figure> <div class="video-player"> <div class="BorlabsCookie _brlbs-cb-youtube"><div class="_brlbs-content-blocker"> <div class="_brlbs-embed _brlbs-video-youtube"> <div class="_brlbs-caption themeDark"> <p>Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.<br><a href="https://policies.google.com/privacy?hl=en&gl=en" target="_blank" rel="nofollow noopener noreferrer">Mehr erfahren</a></p> <p><button class="button button--ghost" data-borlabs-cookie-unblock role="button">Video laden</button></p> <p> <label> <input type="checkbox" name="unblockAll" value="0"> <span>YouTube immer entsperren</span> </label> </p> </div> </div> </div><div class="borlabs-hide" data-borlabs-cookie-type="content-blocker" data-borlabs-cookie-id="youtube">PGlmcmFtZSB0aXRsZT0iRG9uJ3QgdHJ1c3QgeW91ciBXb3JkUHJlc3Mgb3B0aW1pemF0aW9uIHBsdWdpbiIgd2lkdGg9IjExMjAiIGhlaWdodD0iNjMwIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmU7IHdlYi1zaGFyZSIgcmVmZXJyZXJwb2xpY3k9InN0cmljdC1vcmlnaW4td2hlbi1jcm9zcy1vcmlnaW4iIGFsbG93ZnVsbHNjcmVlbiBkYXRhLXNyYz0iaHR0cHM6Ly93d3cueW91dHViZS1ub2Nvb2tpZS5jb20vZW1iZWQvM0RyUmhlOUF5S28/ZmVhdHVyZT1vZW1iZWQmYW1wO21vZGVzdGJyYW5kaW5nPTEmYW1wO2F1dG9wbGF5PTEmYW1wO3JlbD0wIj48L2lmcmFtZT4=</div></div> <div class="video-loader"></div> <button class="video-playButton" type="button" aria-label="Play Video"></button> </div> </div> </div> </div> <p style="font-size:0.94rem"><em>Im Podcast diskutieren Steffen und Dominik Caching und erklären, warum komplexe Caching WordPress Plugins nicht die richtige Wahl sind.</em></p> <p>In einem Browser-Cache werden HTML-, CSS- und JavaScript-Dateien sowie Bilder lokal auf dem Rechner des Besuchers gespeichert und können somit schneller wieder angezeigt werden. Die gecachten Dateien werden vom Browser verwaltet und gelöscht bzw. aktualisiert. WordPress schickt dem Browser Hinweise bzgl. der Lebensdauer der Inhalte (Expiry), also wie lange sie gespeichert werden sollen. Caching wird auch auf dem Server integriert, um Ressourcen zu schonen und die Performance zu verbessern.</p> <h4 class="wp-block-heading">Server-Caching via Object Cache implementieren</h4> <p>Bei dynamischen Websites, wie zum Beispiel in einem Forum, ist es aufgrund der vielen Aktualisierungen durch Kommentare und neuen Beiträge nicht ratsam, auf Full PageCaching zu setzen. Besucher sehen die Seite zwar schnell, aber veraltet. Dafür gibt es einen anderen Cache, den Server-Side Cache. Sogenanntes Object Caching bedeutet, dass die Ergebnisse von Datenbankabfragen zwischengespeichert werden, um die Antwortzeit des Servers zu reduzieren und die Datenbank zu entlasten.</p> <h3 class="wp-block-heading">Redis: Persistent Object Cache</h3> <p>Als persistenten Object-Cache empfehlen wir Redis. Es gibt auch Memcached als Option, die etwas simpler ist, aber dafür weniger Funktionen hat. Um die In-Memory-Datenbank zu verwenden, müsst ihr sie zuerst auf dem Server installieren und als Cache konfigurieren. Die wp-config.php muss dafür angepasst werden. Außerdem ist die Installation einer PHP Extension und eines WordPress-Plugins Voraussetzung. Das erfordert natürlich Aufwand und Expertise, aber macht sich dafür positiv in den Ladezeiten bemerkbar.</p> <h3 class="wp-block-heading">Minify CSS und JavaScript</h3> <p>Für die Verständlichkeit schreiben Entwickler:innen Kommentare sowie detaillierte Variablennamen in Dateien und verwenden Leerzeichen und Zeilenabstände für die Lesbarkeit. Diese Punkte machen Dateien größer – Minification hingegen verkleinert sie wiederum, indem die Dateien auf das Wesentliche reduziert werden. Das wird meistens über ein Plugin automatisiert. Autoptimize und das bereits erwähnte WP Rocket-Plugin sind hierfür populäre Optionen.</p> <h2 class="wp-block-heading" id="infrastruktur">3. Infrastruktur</h2> <p>Wenn ihr bis hierhin gelesen habt, kennt ihr euch bestimmt gut mit WordPress aus, aber für die angehenden WordPress-Nerds hier ein paar Erklärungen für Begriffe und Grundfunktionen.</p> <ul class="wp-block-list"> <li>Der <strong>Server</strong> ist ein Rechner, auf dem eure Website gehostet wird.</li> <li>Ein Besucher greift darauf zu, indem er in seinem Browser die Domain eingibt. Sie ist mit einer <strong>IP-Adresse </strong>verknüpft, also der Adresse von dem Server.</li> <li>Weil eure Website auf dem Server von einem Betreiber untergebracht ist, heißen diese Dienstleister auch <strong>Hoster</strong> und die Dienstleistung Webhosting.</li> </ul> <h3 class="wp-block-heading">Zum Premium DNS Provider wechseln</h3> <p>Bevor ein:e Nutzer:in unsere Website aufrufen kann, muss der Browser wissen, von wo er die Inhalte hernimmt. Der Domainname ist leichter zu merken als eine Aneinanderreihung von Ziffern, wie im Fall der IP-Adresse. Sie ist eine Kombination aus Zahlen und Punkten. Die Verknüpfung wird von einem DNS-Server in Millisekunden geliefert. Hier, bei diesem ersten Schritt gibt es aber schon Qualitätsunterschiede zwischen den Anbietern, und die erste Hürde “Time to First Byte” oder “TTFB” wird dadurch beeinflusst.</p> <h3 class="wp-block-heading">Eigenen Server oder Managed Hosting einsetzen</h3> <p>Es ist möglich, einen eigenen Server zu betreiben oder einen zu mieten und sich um die Serververwaltung zu kümmern. Jedoch, durch die Popularität von WordPress und der Komplexität von Hosting, greifen die meisten auf eine von zwei Optionen zurück: Entweder “Shared Hosting” oder “Managed Hosting”.</p> <h4 class="wp-block-heading">Shared Hosting</h4> <p>Der große Nachteil des Shared Hostings bzw. eines geteilten Servers sind die “Nachbarn.” Sie können sich ihren Bereich nicht aussuchen. Im schlimmsten Fall haben die anderen Websites gleichzeitig mit eurer Website die Peak-Phase. Oder sie haben eine lockere Einstellung zur Sicherheit und werden regelmäßig angegriffen. Wir haben mit Shared Hosting die Sache oft nicht selbst in der Hand, sondern sind auf unbekannte Dritte angewiesen.</p> <div class="flyntBlockImage flyntComponent componentSpacing flyntComponent--sizeMedium "> <div class="container"> <figure class="figure figure--alignCenter"> <img decoding="async" class="figure-image lazyload" src="https://bleech.de/wp-content/uploads/resized/2023/03/shared-hosting-1-1080x0-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTA4MCcgaGVpZ2h0PSc1MDYnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/03/shared-hosting-1-1972x0-c-default.png 1972w, https://bleech.de/wp-content/uploads/resized/2023/03/shared-hosting-1-1416x0-c-default.png 1416w, https://bleech.de/wp-content/uploads/resized/2023/03/shared-hosting-1-1356x0-c-default.png 1356w, https://bleech.de/wp-content/uploads/resized/2023/03/shared-hosting-1-1080x0-c-default.png 1080w, https://bleech.de/wp-content/uploads/resized/2023/03/shared-hosting-1-750x0-c-default.png 750w, https://bleech.de/wp-content/uploads/resized/2023/03/shared-hosting-1-375x0-c-default.png 375w" data-sizes="auto" alt=""> <figcaption class="figure-caption"> <p>Mehrere Websites teilen sich einen Server.</p> </figcaption> </figure> </div> </div> <h4 class="wp-block-heading">Managed Hosting mittels dediziertem Server</h4> <p>Für höchste Ansprüche an Performance, Sicherheit und Datenschutz empfehlen wir einen dedizierten Managed Server. Hierbei wird der Server technisch von einem Webhoster betreut, ähnlich wie beim Shared Hosting. </p> <p>Allerdings steht der gesamte Server exklusiv für die eigene Website zur Verfügung, so dass die Kapazität und Performance nicht mit anderen Webseiten geteilt werden muss. Dies gewährleistet auch eine klare Trennung von Daten. </p> <p>Der Webhoster übernimmt zudem die Verantwortung für regelmäßige Sicherheitsupdates der Systemkomponenten und ergreift zusätzliche Maßnahmen, die <a href="https://bleech.de/blog/schutz-vor-hackern-masnahmen-website-sicherheit/">Schutz vor Hackerangriffen</a> bieten. Wenn individuelle Erweiterungen auf dem Server benötigt werden, können diese durch den Managed Hosting Support installiert und administriert werden.</p> <div class="flyntBlockImage flyntComponent componentSpacing flyntComponent--sizeMedium "> <div class="container"> <figure class="figure figure--alignCenter"> <img decoding="async" class="figure-image lazyload" src="https://bleech.de/wp-content/uploads/resized/2023/03/managed-hosting-1-1080x0-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTA4MCcgaGVpZ2h0PSczMDEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/03/managed-hosting-1-1972x0-c-default.png 1972w, https://bleech.de/wp-content/uploads/resized/2023/03/managed-hosting-1-1416x0-c-default.png 1416w, https://bleech.de/wp-content/uploads/resized/2023/03/managed-hosting-1-1356x0-c-default.png 1356w, https://bleech.de/wp-content/uploads/resized/2023/03/managed-hosting-1-1080x0-c-default.png 1080w, https://bleech.de/wp-content/uploads/resized/2023/03/managed-hosting-1-750x0-c-default.png 750w, https://bleech.de/wp-content/uploads/resized/2023/03/managed-hosting-1-375x0-c-default.png 375w" data-sizes="auto" alt=""> <figcaption class="figure-caption"> <p>Eine Website liegt auf einem Server.</p> </figcaption> </figure> </div> </div> <p>Für euch muss das aber im Zweifel nicht das Wichtigste sein oder ist sogar hinderlich – in diesem Fall empfehlen wir, auf Support-Themen wie automatische Backups und Reaktionszeit des Support-Teams zu achten.</p> <h3 class="wp-block-heading">PHP aktualisieren</h3> <p>Jede neue Version von PHP bringt auch mehr Geschwindigkeit. In der Regel lässt sich die aktuelle Version über das Panel des Hosters einsehen und aktualisieren. Je nach Host kann das Vorgehen unterschiedlich sein, allerdings sollte es nicht kompliziert sein. Achtet vor einem PHP-Update aber darauf, dass die neue PHP-Version auch mit der aktuellen WordPress-Version, Plugins und dem Theme kompatibel ist. Das sollte immer zunächst auf einer Testinstanz getestet werden.</p> <h3 class="wp-block-heading">Content Delivery Network (CDN)</h3> <p>Betreiber von Websites in einem anderen Land oder einer anderen Region mit Zugriffszahlen im 4-stelligen Bereich oder weniger pro Monat brauchen nicht zwangsläufig ein CDN. Ein großer Vorteil von einem Content Delivery Network ist die physische Nähe des Servers zu den Besuchern. Beispielsweise bekommt ein Besucher aus Neuseeland die Inhalte von der angefragten Seite schneller, wenn sich der Server, bzw. CDN-Endpunkt ebenfalls in Neuseeland befindet, anstatt dass die Antwort den ganzen Weg von Deutschland aus geschickt werden muss.</p> <h3 class="wp-block-heading" id="http2">HTTP/2 oder HTTP/3</h3> <p>HTTP/2 ist eine signifikante Weiterentwicklung, ist stabiler und sicherer als die vorherige Version des Hypertext Transfer Protocols. Ein großer Vorteil ist das parallele und asynchrone Herunterladen von Dateien. Im vorangegangenen <a href="#datenlast">Abschnitt “Datenlast”</a> haben wir über die Anzahl von Requests gesprochen – mit HTTP/1 können maximal 6 Dateien parallel heruntergeladen werden, also im Vergleich deutlich langsamer. Mit HTTP/2 können hunderte von Datenpaketen mit einer Priorisierung über eine Verbindung geschickt werden.</p> <p>HTTP/3 wird standardmäßig noch nicht eingesetzt, da es noch in der Entwicklung ist und nicht von allen Browsern und Webservern unterstützt wird. Es verspricht jedoch eine noch bessere Performance, Stabilität und einfachere Implementierung.</p> <h2 class="wp-block-heading">Fazit: Monitoring und weitere Optimierung</h2> <p>Wir sind uns sicher, dass die Umsetzung der oben aufgeführten Maßnahmen zu einer Verbesserung der Core Web Vitals führt. Selbst wenn aufgrund der Komplexität nicht alle Punkte so schnell umgesetzt werden können, sollte sich der PageSpeed Score um einige Punkte verbessern und es werden wertvolle Sekunden in der Ladezeit gespart.</p> <h3 class="wp-block-heading">User Experience > PageSpeed Score</h3> <p>SEO ist oft der Initiator für die Optimierung der Ladegeschwindigkeit. Der Weg zum perfekten PageSpeed Score ist oft holprig und führt manchmal sogar am Ziel vorbei. Durch die Optimierung kann es passieren, dass manchmal <a href="https://bleech.de/blog/pagespeed-optimierung/">die Ladezeit oder der Score besser ist, aber die UX darunter leidet</a>. Wir optimieren zwar die Performance von Websites bestmöglich, aber nicht um jeden Preis und nicht auf Kosten der Nutzer.</p> <p><strong>Tipp!</strong> Bei dem PageSpeed-Tool solltet ihr auch mal eine Unterseite eingeben – viele geben ohne nachzudenken nur die Startseite ein, obwohl die Seite oft überladen ist.</p> <h3 class="wp-block-heading">Monitoring: Ladezeit-Dashboard</h3> <p><strong>Ganz wichtig</strong>, als letzter Tipp, ist das <strong>regelmäßige Reporting </strong>der Core Web Vitals bzw. Ladezeit. Es wäre schade, wenn sich nach einer großen Aufräumaktion durch die Weiterentwicklung der Website, der Integration von Werbekampagnen, und weiteren Maßnahmen die Ladezeit schleichend verlangsamen würde – und wir das erst durch eine Beschwerde erfahren. Es gibt dafür tolle Möglichkeiten, unter anderem findet ihr die Daten in der Search Console, für Google Data Studio gibt es auch das <a href="https://web.dev/chrome-ux-report-data-studio-dashboard/" target="_blank" rel="noreferrer noopener">CrUX Dashboard</a> mit Felddaten aus Chrome.</p> <h3 class="wp-block-heading">Ladezeit von WordPress kontinuierlich weiter optimieren</h3> <p>Die Entwicklung im Web ist schnell und so zielt auch diese Maßnahmen-Liste auf Effektivität, und nicht auf Vollständigkeit. Die Empfehlungen hängen selbstverständlich stark vom Anwendungsfall ab. Unsere Entwickler:innen schauen sich natürlich gerne <a href="https://bleech.de/services/website-optimierung/">euren Code</a> an.</p> <p>Wie gehst du bei der Optimierung von Pagespeed für deine Website vor? Hast du andere Erfahrungen? Teile diesen Artikel in den sozialen Netzwerken und komm mit uns in Diskussion!</p> <div class="flyntComponent componentSpacing " is="flynt-accordion-default"> <div class="container centerMaxWidthContainer"> <div class="content centerContentMaxWidth"> <details> <summary aria-expanded="false" id="summary-ff47f5a1-a04d-4976-91fe-16dea40760b3-1"> <h4 class="panel-title h6">Wie mache ich meine WordPress Website schneller?</h4> <i></i> </summary> <div class="detailContent" aria-labelledby="summary-ff47f5a1-a04d-4976-91fe-16dea40760b3-1"> <div class="detailContent-inner"> <p>Die Maßnahmen, um eine WordPress-Website schneller zu machen, lassen sich in drei Hauptkategorien aufteilen:<br /> 1. Datenlast reduzieren,<br /> 2. Ladestrategie weiterentwickeln,<br /> 3. Infrastruktur verbessern.</p> </div> </div> </details> <details> <summary aria-expanded="false" id="summary-ff47f5a1-a04d-4976-91fe-16dea40760b3-2"> <h4 class="panel-title h6">Wie messe ich die Ladezeit meiner WordPress Website? </h4> <i></i> </summary> <div class="detailContent" aria-labelledby="summary-ff47f5a1-a04d-4976-91fe-16dea40760b3-2"> <div class="detailContent-inner"> <p>Es gibt Plugins innerhalb von WordPress, Browser-Plugins sowie Websites, die stichprobenartig die Ladezeit messen und Empfehlungen geben. Am wertvollsten sind Tools, die eine Historie aufbauen und nicht nur eine Überwachung, sondern auch einen Vergleich über verschiedene Zeiträume ermöglichen.</p> </div> </div> </details> <details> <summary aria-expanded="false" id="summary-ff47f5a1-a04d-4976-91fe-16dea40760b3-3"> <h4 class="panel-title h6">Warum ist meine WordPress Seite so langsam?</h4> <i></i> </summary> <div class="detailContent" aria-labelledby="summary-ff47f5a1-a04d-4976-91fe-16dea40760b3-3"> <div class="detailContent-inner"> <p>Die häufigsten Gründe für langsame WordPress-Websites sind: veraltete Bildformate; überdimensionale Bilder; ein geteilter und nicht-optimierter Server; ein flexibles, aber langsames WordPress-Theme; und bestimmte (oder zu viele) Plugins.</p> </div> </div> </details> </div> </div> </div> </section> </article> <div class="flyntComponent componentSpacing " is="flynt-slider-posts"> <script type="application/json">{"options":{"a11y":{"nextSlideMessage":"N\u00e4chstes Element","prevSlideMessage":"Vorheriges Element","firstSlideMessage":"Das ist das erste Element","lastSlideMessage":"Das ist das letzte Element","paginationBulletMessage":"Gehe zum Element Nummer {{index}}"},"theme":"","postsHeading":"h3","autoplay":false,"autoplaySpeed":4000}}</script> <div class="centerMaxWidthContainer"> <div class="preContent preContent-small"> <div class="preContent-column preContent-column--full"><h2>Mehr Posts</h2> </div> </div> </div> <div class="container-rightEdge centerMaxWidthContainer"> <div class="slider swiper" data-slider> <div class="slider-wrapper swiper-wrapper"> <div class="slider-item swiper-slide"> <a class="slider-link" href="https://bleech.de/blog/if-there-was-astro-for-wordpress/" aria-label="If there was Astro for WordPress"> <figure class="figure"> <img decoding="async" class="slider-image figure-image lazyload" src="https://bleech.de/wp-content/uploads/resized/2023/10/if-there-was-astro-for-wordpress-1234x802-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTIzNCcgaGVpZ2h0PSc4MDInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/10/if-there-was-astro-for-wordpress-1888x1227-c-default.png 1888w, https://bleech.de/wp-content/uploads/resized/2023/10/if-there-was-astro-for-wordpress-1376x894-c-default.png 1376w, https://bleech.de/wp-content/uploads/resized/2023/10/if-there-was-astro-for-wordpress-1234x802-c-default.png 1234w, https://bleech.de/wp-content/uploads/resized/2023/10/if-there-was-astro-for-wordpress-960x624-c-default.png 960w, https://bleech.de/wp-content/uploads/resized/2023/10/if-there-was-astro-for-wordpress-640x416-c-default.png 640w" data-sizes="auto" alt="If there was Astro for WordPress"> </figure> <div class="slider-inner"> <h3 class="slider-title h3">If there was Astro for WordPress</h3> <span class="button button--link slider-readMore">Mehr lesen</span> </div> </a> </div> <div class="slider-item swiper-slide"> <a class="slider-link" href="https://bleech.de/blog/custom-chatbots-made-easy-how-to-build-your-own-chatgpt-agents/" aria-label="Custom chatbots made easy: How to build your own ChatGPT agents"> <figure class="figure"> <img decoding="async" class="slider-image figure-image lazyload" src="https://bleech.de/wp-content/uploads/resized/2023/10/how-to-build-your-own-gpt-4-agents-using-siegfried-ai-1234x802-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTIzNCcgaGVpZ2h0PSc4MDInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/10/how-to-build-your-own-gpt-4-agents-using-siegfried-ai-1888x1227-c-default.png 1888w, https://bleech.de/wp-content/uploads/resized/2023/10/how-to-build-your-own-gpt-4-agents-using-siegfried-ai-1376x894-c-default.png 1376w, https://bleech.de/wp-content/uploads/resized/2023/10/how-to-build-your-own-gpt-4-agents-using-siegfried-ai-1234x802-c-default.png 1234w, https://bleech.de/wp-content/uploads/resized/2023/10/how-to-build-your-own-gpt-4-agents-using-siegfried-ai-960x624-c-default.png 960w, https://bleech.de/wp-content/uploads/resized/2023/10/how-to-build-your-own-gpt-4-agents-using-siegfried-ai-640x416-c-default.png 640w" data-sizes="auto" alt="Custom chatbots made easy: How to build your own ChatGPT agents"> </figure> <div class="slider-inner"> <h3 class="slider-title h3">Custom chatbots made easy: How to build your own ChatGPT agents</h3> <span class="button button--link slider-readMore">Mehr lesen</span> </div> </a> </div> <div class="slider-item swiper-slide"> <a class="slider-link" href="https://bleech.de/blog/enhancing-wordpress-archives-with-htmx-and-view-transitions/" aria-label="Enhancing WordPress Archives with HTMX and View Transitions"> <figure class="figure"> <img decoding="async" class="slider-image figure-image lazyload" src="https://bleech.de/wp-content/uploads/resized/2023/10/htmx-post-thumbnail-1234x802-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTIzNCcgaGVpZ2h0PSc4MDInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/10/htmx-post-thumbnail-1888x1227-c-default.png 1888w, https://bleech.de/wp-content/uploads/resized/2023/10/htmx-post-thumbnail-1376x894-c-default.png 1376w, https://bleech.de/wp-content/uploads/resized/2023/10/htmx-post-thumbnail-1234x802-c-default.png 1234w, https://bleech.de/wp-content/uploads/resized/2023/10/htmx-post-thumbnail-960x624-c-default.png 960w, https://bleech.de/wp-content/uploads/resized/2023/10/htmx-post-thumbnail-640x416-c-default.png 640w" data-sizes="auto" alt="Enhancing WordPress Archives with HTMX and View Transitions"> </figure> <div class="slider-inner"> <h3 class="slider-title h3">Enhancing WordPress Archives with HTMX and View Transitions</h3> <span class="button button--link slider-readMore">Mehr lesen</span> </div> </a> </div> <div class="slider-item swiper-slide"> <a class="slider-link" href="https://bleech.de/blog/the-ups-and-downs-of-text-wrap-balance-and-a-polyfill/" aria-label="The ups and downs of text-wrap: balance and a polyfill"> <figure class="figure"> <img decoding="async" class="slider-image figure-image lazyload" src="https://bleech.de/wp-content/uploads/resized/2023/09/auto-aligning-with-text-wrap-balance-1234x802-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTIzNCcgaGVpZ2h0PSc4MDInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/09/auto-aligning-with-text-wrap-balance-1888x1227-c-default.png 1888w, https://bleech.de/wp-content/uploads/resized/2023/09/auto-aligning-with-text-wrap-balance-1376x894-c-default.png 1376w, https://bleech.de/wp-content/uploads/resized/2023/09/auto-aligning-with-text-wrap-balance-1234x802-c-default.png 1234w, https://bleech.de/wp-content/uploads/resized/2023/09/auto-aligning-with-text-wrap-balance-960x624-c-default.png 960w, https://bleech.de/wp-content/uploads/resized/2023/09/auto-aligning-with-text-wrap-balance-640x416-c-default.png 640w" data-sizes="auto" alt="The ups and downs of text-wrap: balance and a polyfill"> </figure> <div class="slider-inner"> <h3 class="slider-title h3">The ups and downs of text-wrap: balance and a polyfill</h3> <span class="button button--link slider-readMore">Mehr lesen</span> </div> </a> </div> <div class="slider-item swiper-slide"> <a class="slider-link" href="https://bleech.de/blog/creating-a-modal-using-the-dialog-html-element/" aria-label="Creating a modal using the dialog HTML element"> <figure class="figure"> <img decoding="async" class="slider-image figure-image lazyload" src="https://bleech.de/wp-content/uploads/resized/2023/09/dialog-element-ft-image-1234x802-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTIzNCcgaGVpZ2h0PSc4MDInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/09/dialog-element-ft-image-1888x1227-c-default.png 1888w, https://bleech.de/wp-content/uploads/resized/2023/09/dialog-element-ft-image-1376x894-c-default.png 1376w, https://bleech.de/wp-content/uploads/resized/2023/09/dialog-element-ft-image-1234x802-c-default.png 1234w, https://bleech.de/wp-content/uploads/resized/2023/09/dialog-element-ft-image-960x624-c-default.png 960w, https://bleech.de/wp-content/uploads/resized/2023/09/dialog-element-ft-image-640x416-c-default.png 640w" data-sizes="auto" alt="Creating a modal using the dialog HTML element"> </figure> <div class="slider-inner"> <h3 class="slider-title h3">Creating a modal using the dialog HTML element</h3> <span class="button button--link slider-readMore">Mehr lesen</span> </div> </a> </div> <div class="slider-item swiper-slide"> <a class="slider-link" href="https://bleech.de/blog/introducing-our-figma-design-kit-for-flynt/" aria-label="Introducing our Figma Design Kit for Flynt"> <figure class="figure"> <img decoding="async" class="slider-image figure-image lazyload" src="https://bleech.de/wp-content/uploads/resized/2023/06/FlyntDesignKitFigma-BlogPostHeader-1234x802-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTIzNCcgaGVpZ2h0PSc4MDInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/06/FlyntDesignKitFigma-BlogPostHeader-1888x1227-c-default.png 1888w, https://bleech.de/wp-content/uploads/resized/2023/06/FlyntDesignKitFigma-BlogPostHeader-1376x894-c-default.png 1376w, https://bleech.de/wp-content/uploads/resized/2023/06/FlyntDesignKitFigma-BlogPostHeader-1234x802-c-default.png 1234w, https://bleech.de/wp-content/uploads/resized/2023/06/FlyntDesignKitFigma-BlogPostHeader-960x624-c-default.png 960w, https://bleech.de/wp-content/uploads/resized/2023/06/FlyntDesignKitFigma-BlogPostHeader-640x416-c-default.png 640w" data-sizes="auto" alt="Introducing our Figma Design Kit for Flynt"> </figure> <div class="slider-inner"> <h3 class="slider-title h3">Introducing our Figma Design Kit for Flynt</h3> <span class="button button--link slider-readMore">Mehr lesen</span> </div> </a> </div> <div class="slider-item swiper-slide"> <a class="slider-link" href="https://bleech.de/blog/flynt-2-0-redefining-performance-and-experience/" aria-label="Flynt 2.0 – Redefining Performance and Experience"> <figure class="figure"> <img decoding="async" class="slider-image figure-image lazyload" src="https://bleech.de/wp-content/uploads/resized/2023/07/flynt-2-0-fall-in-love-with-wordpress-again-1234x802-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTIzNCcgaGVpZ2h0PSc4MDInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/07/flynt-2-0-fall-in-love-with-wordpress-again-1888x1227-c-default.png 1888w, https://bleech.de/wp-content/uploads/resized/2023/07/flynt-2-0-fall-in-love-with-wordpress-again-1376x894-c-default.png 1376w, https://bleech.de/wp-content/uploads/resized/2023/07/flynt-2-0-fall-in-love-with-wordpress-again-1234x802-c-default.png 1234w, https://bleech.de/wp-content/uploads/resized/2023/07/flynt-2-0-fall-in-love-with-wordpress-again-960x624-c-default.png 960w, https://bleech.de/wp-content/uploads/resized/2023/07/flynt-2-0-fall-in-love-with-wordpress-again-640x416-c-default.png 640w" data-sizes="auto" alt="Flynt 2.0 – Redefining Performance and Experience"> </figure> <div class="slider-inner"> <h3 class="slider-title h3">Flynt 2.0 – Redefining Performance and Experience</h3> <span class="button button--link slider-readMore">Mehr lesen</span> </div> </a> </div> <div class="slider-item swiper-slide"> <a class="slider-link" href="https://bleech.de/blog/website-gehackt-was-tun/" aria-label="Website gehackt – was tun?"> <figure class="figure"> <img decoding="async" class="slider-image figure-image lazyload" src="https://bleech.de/wp-content/uploads/resized/2023/05/header-website-gehackt-1-1234x802-c-default.png" srcset="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTIzNCcgaGVpZ2h0PSc4MDInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PC9zdmc+" data-srcset=" https://bleech.de/wp-content/uploads/resized/2023/05/header-website-gehackt-1-1888x1227-c-default.png 1888w, https://bleech.de/wp-content/uploads/resized/2023/05/header-website-gehackt-1-1376x894-c-default.png 1376w, https://bleech.de/wp-content/uploads/resized/2023/05/header-website-gehackt-1-1234x802-c-default.png 1234w, https://bleech.de/wp-content/uploads/resized/2023/05/header-website-gehackt-1-960x624-c-default.png 960w, https://bleech.de/wp-content/uploads/resized/2023/05/header-website-gehackt-1-640x416-c-default.png 640w" data-sizes="auto" alt="Website gehackt – was tun?"> </figure> <div class="slider-inner"> <h3 class="slider-title h3">Website gehackt – was tun?</h3> <span class="button button--link slider-readMore">Mehr lesen</span> </div> </a> </div> </div> </div> </div> <div class="centerMaxWidthContainer"> <div class="slider-footer slider-footer--mobileNavigationHidden "> <div class="slider-pagination" data-slider-pagination></div> <div class="slider-navigation"> <button type="button" data-slider-button="prev" class="slider-button slider-button--prev" aria-label="Previous Slide"></button> <button type="button" data-slider-button="next" class="slider-button slider-button--next" aria-label="Next Slide"></button> </div> </div> </div> </div> <div class="flyntComponent componentSpacing themeDark flyntComponent--hasBorder" is="flynt-hero-image-text"> <div class="container centerMaxWidthContainer"> <div class="box box--imageRight box--alignCenter box--hasImage-small"> <div class="box-inner box-inner--image"> <div class="media media--lottie"> <div class="lottie figure figure--small" style="--animation-scale: 2" data-lottie-path="https://bleech.de/wp-content/uploads/2022/01/data.json" data-lottie-loop="false" data-lottie-speed="1"></div> </div> </div> <div class="box-inner box-inner--content"> <h2>Wir helfen Unternehmen, den entscheidenden Schritt voraus zu sein – mit WordPress.</h2> <p><a class="button button--ghost" href="https://bleech.de/kontakt/">Kontakt</a></p> </div> </div> </div> <hr class="divider"></div> </main> <footer class="mainFooter"> <div class="flyntComponent themeDark" is="flynt-navigation-footer"> <script type="application/json">{"total":0}</script> <div class="container centerMaxWidthContainer"> <div class="footer-container footer-container--1"> <div class="footer-columns"> <div class="footer-col"> <div class="content"><p><strong>Bleech GmbH</strong><br /> Köpenicker Str. 10a<br /> 10997 Berlin</p> <p><a href="tel:+493044017947">+49 (0)30 4401 7947</a><br /> <a href="mailto:hello@bleech.de">hello@bleech.de</a></p> </div> </div> </div> <div class="navigation-wrapper"> <ul class="socials"> <li class="socials-item"> <a class="socials-link" href="https://www.youtube.com/@siegfried-deploy" target="_blank" rel="noopener noreferrer" aria-label="youtube"><svg width="35" height="25" viewBox="0 0 35 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M34.279 4.014A4.419 4.419 0 0031.194.882C28.455.122 17.5.122 17.5.122S6.544.121 3.805.852c-1.47.41-2.68 1.639-3.084 3.161C0 6.794 0 12.561 0 12.561s0 5.795.72 8.546a4.42 4.42 0 003.086 3.132C6.573 25 17.5 25 17.5 25s10.955 0 13.694-.732a4.419 4.419 0 003.085-3.131c.72-2.781.72-8.547.72-8.547s.03-5.796-.72-8.576zM14.012 17.888V7.234l9.11 5.327-9.11 5.327z" fill="currentColor"/></svg> </a> </li> <li class="socials-item"> <a class="socials-link" href="https://twitter.com/bleechberlin" target="_blank" rel="noopener noreferrer" aria-label="twitter"><svg width="448" height="512" viewBox="0 0 448 512" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M261.293 225.373L407.224 56H372.643L245.931 203.064L144.727 56H28L181.041 278.387L28 456H62.5829L196.394 300.696L303.273 456H420L261.285 225.373H261.293ZM213.927 280.346L198.421 258.201L75.0436 81.9936H128.161L227.728 224.199L243.234 246.344L372.659 431.189H319.542L213.927 280.354V280.346Z" fill="currentColor"/></svg> </a> </li> <li class="socials-item"> <a class="socials-link" href="https://www.linkedin.com/company/bleech" target="_blank" rel="noopener noreferrer" aria-label="linkedin"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" fill="currentColor"/></svg> </a> </li> </ul> <nav class="navigation" aria-label="Footer"> <ul class="menu"> <li class="menu-show-jobs menu-item menu-item-type-custom menu-item-object-custom"> <a class="menu-link" href="https://bleech.de/team/#jobs" target="_self">Jobs</a> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link" href="https://bleech.de/datenschutz/" target="_self">Datenschutz</a> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link" href="https://bleech.de/agb/" target="_self">AGB</a> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page"> <a class="menu-link" href="https://bleech.de/impressum/" target="_self">Impressum</a> </li> </ul> </nav> </div> </div> </div> </div> </footer> </div> <div class="wpFooter"> <div data-nosnippet><div id="BorlabsCookieBoxWrap"><div id="BorlabsCookieBox" class="BorlabsCookie" role="dialog" aria-labelledby="CookieBoxTextHeadline" aria-describedby="CookieBoxTextDescription" aria-modal="true" > <div class="bottom-center" style="display: none;"> <div class="_brlbs-bar-wrap"> <div class="_brlbs-bar _brlbs-bar-advanced"> <div class="cookie-box"> <div class="container"> <div class="row align-items-center"> <div class="col-12 col-sm-9"> <div class="row"> <div class="col-12"> <div class="_brlbs-flex-left"> <span role="heading" aria-level="3" class="_brlbs-h3" id="CookieBoxTextHeadline"> Datenschutzeinstellungen </span> </div> <p id="CookieBoxTextDescription"> <span class="_brlbs-paragraph _brlbs-text-description">Wir benötigen Ihre Zustimmung, bevor Sie unsere Website weiter besuchen können.</span> <span class="_brlbs-paragraph _brlbs-text-confirm-age">Wenn Sie unter 16 Jahre alt sind und Ihre Zustimmung zu freiwilligen Diensten geben möchten, müssen Sie Ihre Erziehungsberechtigten um Erlaubnis bitten.</span> <span class="_brlbs-paragraph _brlbs-text-technology">Wir verwenden Cookies und andere Technologien auf unserer Webseite. Einige von ihnen sind essenziell, während andere uns helfen, diese Webseite und Ihre Erfahrung zu verbessern.</span> <span class="_brlbs-paragraph _brlbs-text-personal-data">Personenbezogene Daten können verarbeitet werden (z. B. IP-Adressen), z. B. für personalisierte Anzeigen und Inhalte oder Anzeigen- und Inhaltsmessung.</span> <span class="_brlbs-paragraph _brlbs-text-more-information">Weitere Informationen über die Verwendung Ihrer Daten finden Sie in unserer <a class="_brlbs-cursor" href="https://bleech.de/datenschutz/">Datenschutzerklärung</a>.</span> <span class="_brlbs-paragraph _brlbs-text-revoke">Sie können Ihre Auswahl jederzeit unter <a class="_brlbs-cursor" href="#" data-cookie-individual>Einstellungen</a> widerrufen oder anpassen.</span> </p> </div> </div> <fieldset> <legend class="sr-only">Datenschutzeinstellungen</legend> <ul > <li> <label class="_brlbs-checkbox"> Essenziell <input id="checkbox-essential" tabindex="0" type="checkbox" name="cookieGroup[]" value="essential" checked disabled data-borlabs-cookie-checkbox > <span class="_brlbs-checkbox-indicator"></span> </label> </li> <li> <label class="_brlbs-checkbox"> Externe Medien <input id="checkbox-external-media" tabindex="0" type="checkbox" name="cookieGroup[]" value="external-media" checked data-borlabs-cookie-checkbox > <span class="_brlbs-checkbox-indicator"></span> </label> </li> </ul> </fieldset> </div> <div class="col-12 col-sm-3"> <p class="_brlbs-accept"> <a href="#" tabindex="0" role="button" class="_brlbs-btn _brlbs-btn-accept-all _brlbs-cursor" data-cookie-accept-all > Alle akzeptieren </a> </p> <p class="_brlbs-accept"> <a href="#" tabindex="0" role="button" id="CookieBoxSaveButton" class="_brlbs-btn _brlbs-cursor" data-cookie-accept > Speichern </a> </p> <p class="_brlbs-manage-btn "> <a href="#" tabindex="0" role="button" class="_brlbs-cursor _brlbs-btn " data-cookie-individual > Individuelle Datenschutzeinstellungen </a> </p> <p class="_brlbs-legal"> <a href="#" tabindex="0" role="button" class="_brlbs-cursor" data-cookie-individual > Cookie-Details </a> <span class="_brlbs-separator"></span> <a tabindex="0" href="https://bleech.de/datenschutz/" > Datenschutzerklärung </a> <span class="_brlbs-separator"></span> <a tabindex="0" href="https://bleech.de/impressum/" > Impressum </a> </p> </div> </div> </div> </div> <div class="cookie-preference" aria-hidden="true" role="dialog" aria-describedby="CookiePrefDescription" aria-modal="true" > <div class="container not-visible"> <div class="row no-gutters"> <div class="col-12"> <div class="row no-gutters align-items-top"> <div class="col-12"> <div class="_brlbs-flex-center"> <span role="heading" aria-level="3" class="_brlbs-h3">Datenschutzeinstellungen</span> </div> <p id="CookiePrefDescription"> <span class="_brlbs-paragraph _brlbs-text-confirm-age">Wenn Sie unter 16 Jahre alt sind und Ihre Zustimmung zu freiwilligen Diensten geben möchten, müssen Sie Ihre Erziehungsberechtigten um Erlaubnis bitten.</span> <span class="_brlbs-paragraph _brlbs-text-technology">Wir verwenden Cookies und andere Technologien auf unserer Webseite. Einige von ihnen sind essenziell, während andere uns helfen, diese Webseite und Ihre Erfahrung zu verbessern.</span> <span class="_brlbs-paragraph _brlbs-text-personal-data">Personenbezogene Daten können verarbeitet werden (z. B. IP-Adressen), z. B. für personalisierte Anzeigen und Inhalte oder Anzeigen- und Inhaltsmessung.</span> <span class="_brlbs-paragraph _brlbs-text-more-information">Weitere Informationen über die Verwendung Ihrer Daten finden Sie in unserer <a class="_brlbs-cursor" href="https://bleech.de/datenschutz/">Datenschutzerklärung</a>.</span> <span class="_brlbs-paragraph _brlbs-text-description">Hier finden Sie eine Übersicht über alle verwendeten Cookies. Sie können Ihre Einwilligung zu ganzen Kategorien geben oder sich weitere Informationen anzeigen lassen und so nur bestimmte Cookies auswählen.</span> </p> <div class="row no-gutters align-items-center"> <div class="col-12 col-sm-7"> <p class="_brlbs-accept"> <a href="#" class="_brlbs-btn _brlbs-btn-accept-all _brlbs-cursor" tabindex="0" role="button" data-cookie-accept-all > Alle akzeptieren </a> <a href="#" id="CookiePrefSave" tabindex="0" role="button" class="_brlbs-btn _brlbs-cursor" data-cookie-accept > Speichern </a> </p> </div> <div class="col-12 col-sm-5"> <p class="_brlbs-refuse"> <a href="#" class="_brlbs-cursor" tabindex="0" role="button" data-cookie-back > Zurück </a> </p> </div> </div> </div> </div> <div data-cookie-accordion> <fieldset> <legend class="sr-only">Datenschutzeinstellungen</legend> <div class="bcac-item"> <div class="d-flex flex-row"> <label class="w-75"> <span role="heading" aria-level="4" class="_brlbs-h4">Essenziell (1)</span> </label> <div class="w-25 text-right"> </div> </div> <div class="d-block"> <p>Essenzielle Cookies ermöglichen grundlegende Funktionen und sind für die einwandfreie Funktion der Website erforderlich.</p> <p class="text-center"> <a href="#" class="_brlbs-cursor d-block" tabindex="0" role="button" data-cookie-accordion-target="essential" > <span data-cookie-accordion-status="show"> Cookie-Informationen anzeigen </span> <span data-cookie-accordion-status="hide" class="borlabs-hide"> Cookie-Informationen ausblenden </span> </a> </p> </div> <div class="borlabs-hide" data-cookie-accordion-parent="essential" > <table> <tr> <th scope="row">Name</th> <td> <label> Borlabs Cookie </label> </td> </tr> <tr> <th scope="row">Anbieter</th> <td>Eigentümer dieser Website<span>, </span><a href="https://bleech.de/impressum/">Impressum</a></td> </tr> <tr> <th scope="row">Zweck</th> <td>Speichert die Einstellungen der Besucher, die in der Cookie Box von Borlabs Cookie ausgewählt wurden.</td> </tr> <tr> <th scope="row">Cookie Name</th> <td>borlabs-cookie</td> </tr> <tr> <th scope="row">Cookie Laufzeit</th> <td>1 Jahr</td> </tr> </table> </div> </div> <div class="bcac-item"> <div class="d-flex flex-row"> <label class="w-75"> <span role="heading" aria-level="4" class="_brlbs-h4">Externe Medien (1)</span> </label> <div class="w-25 text-right"> <label class="_brlbs-btn-switch"> <span class="sr-only">Externe Medien</span> <input tabindex="0" id="borlabs-cookie-group-external-media" type="checkbox" name="cookieGroup[]" value="external-media" checked data-borlabs-cookie-switch /> <span class="_brlbs-slider"></span> <span class="_brlbs-btn-switch-status" data-active="An" data-inactive="Aus"> </span> </label> </div> </div> <div class="d-block"> <p>Inhalte von Videoplattformen und Social-Media-Plattformen werden standardmäßig blockiert. Wenn Cookies von externen Medien akzeptiert werden, bedarf der Zugriff auf diese Inhalte keiner manuellen Einwilligung mehr.</p> <p class="text-center"> <a href="#" class="_brlbs-cursor d-block" tabindex="0" role="button" data-cookie-accordion-target="external-media" > <span data-cookie-accordion-status="show"> Cookie-Informationen anzeigen </span> <span data-cookie-accordion-status="hide" class="borlabs-hide"> Cookie-Informationen ausblenden </span> </a> </p> </div> <div class="borlabs-hide" data-cookie-accordion-parent="external-media" > <table> <tr> <th scope="row">Akzeptieren</th> <td> <label class="_brlbs-btn-switch _brlbs-btn-switch--textRight"> <span class="sr-only">YouTube</span> <input id="borlabs-cookie-youtube" tabindex="0" type="checkbox" data-cookie-group="external-media" name="cookies[external-media][]" value="youtube" checked data-borlabs-cookie-switch /> <span class="_brlbs-slider"></span> <span class="_brlbs-btn-switch-status" data-active="An" data-inactive="Aus" aria-hidden="true"> </span> </label> </td> </tr> <tr> <th scope="row">Name</th> <td> <label> YouTube </label> </td> </tr> <tr> <th scope="row">Anbieter</th> <td>Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Ireland</td> </tr> <tr> <th scope="row">Zweck</th> <td>Wird verwendet, um YouTube-Inhalte zu entsperren.</td> </tr> <tr> <th scope="row">Datenschutzerklärung</th> <td class="_brlbs-pp-url"> <a href="https://policies.google.com/privacy" target="_blank" rel="nofollow noopener noreferrer" > https://policies.google.com/privacy </a> </td> </tr> <tr> <th scope="row">Host(s)</th> <td>google.com</td> </tr> <tr> <th scope="row">Cookie Name</th> <td>NID</td> </tr> <tr> <th scope="row">Cookie Laufzeit</th> <td>6 Monate</td> </tr> </table> </div> </div> </fieldset> </div> <div class="d-flex justify-content-between"> <p class="_brlbs-branding flex-fill"> <a href="https://de.borlabs.io/borlabs-cookie/" target="_blank" rel="nofollow noopener noreferrer" > <img src="https://bleech.de/wp-content/plugins/borlabs-cookie/assets/images/borlabs-cookie-icon-black.svg" alt="Borlabs Cookie" width="16" height="16"> powered by Borlabs Cookie </a> </p> <p class="_brlbs-legal flex-fill"> <a href="https://bleech.de/datenschutz/"> Datenschutzerklärung </a> <span class="_brlbs-separator"></span> <a href="https://bleech.de/impressum/"> Impressum </a> </p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div></div><script id="wpcf7-redirect-script-js-extra"> var wpcf7_redirect_forms = {"13401":{"page_id":"13278","external_url":"","use_external_url":"","open_in_new_tab":"","http_build_query":"","http_build_query_selectively":"","http_build_query_selectively_fields":"","delay_redirect":"0","after_sent_script":"","thankyou_page_url":"https:\/\/bleech.de\/danke-fuer-deine-bewerbung\/"},"13400":{"page_id":"13292","external_url":"","use_external_url":"","open_in_new_tab":"","http_build_query":"","http_build_query_selectively":"","http_build_query_selectively_fields":"","delay_redirect":"0","after_sent_script":"","thankyou_page_url":"https:\/\/bleech.de\/danke-fuer-deine-bewerbung\/"},"13295":{"page_id":"13278","external_url":"","use_external_url":"","open_in_new_tab":"","http_build_query":"","http_build_query_selectively":"","http_build_query_selectively_fields":"","delay_redirect":"0","after_sent_script":"","thankyou_page_url":"https:\/\/bleech.de\/danke-fuer-deine-bewerbung\/"},"13277":{"page_id":"13292","external_url":"","use_external_url":"","open_in_new_tab":"","http_build_query":"","http_build_query_selectively":"","http_build_query_selectively_fields":"","delay_redirect":"0","after_sent_script":"","thankyou_page_url":"https:\/\/bleech.de\/danke-fuer-deine-bewerbung\/"},"8129":{"page_id":"","external_url":"","use_external_url":"","open_in_new_tab":"","http_build_query":"","http_build_query_selectively":"","http_build_query_selectively_fields":"","delay_redirect":"","after_sent_script":"","thankyou_page_url":""},"8126":{"page_id":"","external_url":"","use_external_url":"","open_in_new_tab":"","http_build_query":"","http_build_query_selectively":"","http_build_query_selectively_fields":"","delay_redirect":"","after_sent_script":"","thankyou_page_url":""},"5624":{"page_id":"","external_url":"","use_external_url":"","open_in_new_tab":"","http_build_query":"","http_build_query_selectively":"","http_build_query_selectively_fields":"","delay_redirect":"","after_sent_script":"","thankyou_page_url":""},"5613":{"page_id":"","external_url":"","use_external_url":"","open_in_new_tab":"","http_build_query":"","http_build_query_selectively":"","http_build_query_selectively_fields":"","delay_redirect":"","after_sent_script":"","thankyou_page_url":""},"2044":{"page_id":"13531","external_url":"","use_external_url":"","open_in_new_tab":"","http_build_query":"","http_build_query_selectively":"","http_build_query_selectively_fields":"","delay_redirect":"0","after_sent_script":"","thankyou_page_url":"https:\/\/bleech.de\/danke-fuer-deine-nachricht\/"},"944":{"page_id":"13532","external_url":"","use_external_url":"","open_in_new_tab":"","http_build_query":"","http_build_query_selectively":"","http_build_query_selectively_fields":"","delay_redirect":"0","after_sent_script":"","thankyou_page_url":"https:\/\/bleech.de\/danke-fuer-deine-nachricht\/"}}; </script> <script src="https://bleech.de/wp-content/plugins/cf7-redirection/js/wpcf7-redirect-script.js" id="wpcf7-redirect-script-js"></script> <script id="flynt-assets-js-extra"> var FlyntData = {"templateDirectoryUri":"https:\/\/bleech.de\/wp-content\/themes\/bleech-website-2021","componentsWithScript":{"AccordionDefault":"AccordionDefault","BlockCountUp":"BlockCountUp","BlockCta":"BlockCta","BlockDocs":"BlockDocs","BlockGallery":"BlockGallery","BlockLottieTextVertical":"BlockLottieTextVertical","BlockNotFound":"BlockNotFound","BlockPodcastsTeaser":"BlockPodcastsTeaser","BlockVideoLocal":"BlockVideoLocal","BlockVideoOembed":"BlockVideoOembed","FormContactForm7":"FormContactForm7","GridPostsArchive":"GridPostsArchive","GridServices":"GridServices","HeroCta":"HeroCta","HeroImageText":"HeroImageText","ListComponents":"ListComponents","ListPodcasts":"ListPodcasts","NavigationBurger":"NavigationBurger","NavigationFooter":"NavigationFooter","SliderImages":"SliderImages","SliderPosts":"SliderPosts","SliderTestimonials":"SliderTestimonials"},"currentLanguage":"de"}; </script> <script src="https://bleech.de/wp-content/themes/bleech-website-2021/dist/assets/main.72c73c1d5ccd12cac405.js?ver=6.7.2" id="flynt-assets-js" defer></script> <script id="borlabs-cookie-js-extra"> var borlabsCookieConfig = {"ajaxURL":"https:\/\/bleech.de\/wp-admin\/admin-ajax.php","language":"de","animation":"","animationDelay":"","animationIn":"_brlbs-fadeInUp","animationOut":"_brlbs-fadeOutDown","blockContent":"1","boxLayout":"bar","boxLayoutAdvanced":"1","automaticCookieDomainAndPath":"","cookieDomain":"bleech.de","cookiePath":"\/","cookieSameSite":"Lax","cookieSecure":"1","cookieLifetime":"182","cookieLifetimeEssentialOnly":"182","crossDomainCookie":[],"cookieBeforeConsent":"","cookiesForBots":"","cookieVersion":"1","hideCookieBoxOnPages":[],"respectDoNotTrack":"","reloadAfterConsent":"","reloadAfterOptOut":"1","showCookieBox":"","cookieBoxIntegration":"html","ignorePreSelectStatus":"1","cookies":{"essential":["borlabs-cookie"],"external-media":["youtube"]}}; var borlabsCookieCookies = {"essential":{"borlabs-cookie":{"cookieNameList":{"borlabs-cookie":"borlabs-cookie"},"settings":{"prioritize":"0","asyncOptOutCode":"0"},"optInJS":"PHNjcmlwdD53aW5kb3cuQm9ybGFic0Nvb2tpZS51bmJsb2NrU2NyaXB0QmxvY2tlcklkKCJmbHludC1hc3NldHMiKTs8L3NjcmlwdD4=","optOutJS":""}},"external-media":{"youtube":{"cookieNameList":{"NID":"NID"},"settings":{"blockCookiesBeforeConsent":"0","prioritize":"0"},"optInJS":"PHNjcmlwdD5pZih0eXBlb2Ygd2luZG93LkJvcmxhYnNDb29raWUgPT09ICJvYmplY3QiKSB7IHdpbmRvdy5Cb3JsYWJzQ29va2llLnVuYmxvY2tDb250ZW50SWQoInlvdXR1YmUiKTsgfTwvc2NyaXB0Pg==","optOutJS":""}}}; </script> <script src="https://bleech.de/wp-content/plugins/borlabs-cookie/assets/javascript/borlabs-cookie.min.js?ver=2.3" id="borlabs-cookie-js"></script> <script id="borlabs-cookie-js-after"> document.addEventListener("DOMContentLoaded", function (e) { var borlabsCookieContentBlocker = {"facebook": {"id": "facebook","global": function (contentBlockerData) { },"init": function (el, contentBlockerData) { if(typeof FB === "object") { FB.XFBML.parse(el.parentElement); } },"settings": {"executeGlobalCodeBeforeUnblocking":false}},"googlemaps": {"id": "googlemaps","global": function (contentBlockerData) { },"init": function (el, contentBlockerData) { },"settings": {"executeGlobalCodeBeforeUnblocking":false}},"instagram": {"id": "instagram","global": function (contentBlockerData) { },"init": function (el, contentBlockerData) { if (typeof instgrm === "object") { instgrm.Embeds.process(); } },"settings": {"executeGlobalCodeBeforeUnblocking":false}},"openstreetmap": {"id": "openstreetmap","global": function (contentBlockerData) { },"init": function (el, contentBlockerData) { },"settings": {"executeGlobalCodeBeforeUnblocking":false}},"twitter": {"id": "twitter","global": function (contentBlockerData) { },"init": function (el, contentBlockerData) { },"settings": {"unblockAll":"0","executeGlobalCodeBeforeUnblocking":"0"}},"vimeo": {"id": "vimeo","global": function (contentBlockerData) { },"init": function (el, contentBlockerData) { },"settings": {"unblockAll":"0","saveThumbnails":"0","autoplay":"0","videoWrapper":"0","executeGlobalCodeBeforeUnblocking":"0"}},"youtube": {"id": "youtube","global": function (contentBlockerData) { },"init": function (el, contentBlockerData) { },"settings": {"unblockAll":"0","saveThumbnails":"0","thumbnailQuality":"maxresdefault","changeURLToNoCookie":"1","autoplay":"0","videoWrapper":"0","executeGlobalCodeBeforeUnblocking":"0"}}}; var BorlabsCookieInitCheck = function () { if (typeof window.BorlabsCookie === "object" && typeof window.jQuery === "function") { if (typeof borlabsCookiePrioritized !== "object") { borlabsCookiePrioritized = { optInJS: {} }; } window.BorlabsCookie.init(borlabsCookieConfig, borlabsCookieCookies, borlabsCookieContentBlocker, borlabsCookiePrioritized.optInJS); } else { window.setTimeout(BorlabsCookieInitCheck, 50); } }; BorlabsCookieInitCheck();}); </script> </div> </body> </html>

CINXE.COM

Ladezeit von WordPress optimieren: Die komplette Anleitung