{"id":311,"date":"2022-10-21T15:12:48","date_gmt":"2022-10-21T13:12:48","guid":{"rendered":"https:\/\/www.servicepraxis.com\/plugins\/?page_id=311"},"modified":"2025-06-06T15:49:51","modified_gmt":"2025-06-06T13:49:51","slug":"ladezeiten","status":"publish","type":"page","link":"https:\/\/www.servicepraxis.com\/plugins\/suchmaschinenoptimierung\/ladezeiten\/","title":{"rendered":"Ladezeiten optimieren macht Sinn"},"content":{"rendered":"\n

Die Geschwindigkeit, die eine Website zum Laden ben\u00f6tigt, z\u00e4hlt nach wie vor zu den wichtigsten Stellschrauben bei der Suchmaschinenoptimierung<\/strong>. Nicht nur Besucher:innen, sondern gerade Suchmaschinen ziehen die Zeit, die beim Aufruf einer Seite ins Land streicht, als wichtiges Bewertungskriterium heran. Ein schlanker und komprimierter Code und der Einsatz von Mechanismen zum Caching z\u00e4hlen ebenso zu den erprobten L\u00f6sungsans\u00e4tzen f\u00fcr gute Ladezeiten<\/strong> und eine schnelle Webpr\u00e4senz wie die Verwendung komprimierter Bilder.<\/p>\n\n\n

In f\u00fcnf Schritten zur Ladezeitenoptimierung<\/h3>\r\n
\r\n
    \r\n
  1. \r\n \r\n <\/span>\r\n Webspace<\/a>
    Potenzial zur optimalen Auslieferung der Daten nutzen.<\/span>\r\n <\/span>\r\n <\/li>\r\n
  2. \r\n \r\n <\/span>\r\n WordPress<\/a>
    Theme und Plugins aufr\u00e4umen statt Balast mitschleppen.<\/span>\r\n <\/span>\r\n <\/li>\r\n
  3. \r\n \r\n <\/span>\r\n Bilder<\/a>
    Richtige Gr\u00f6\u00dfen und neuere Bildtypen wie WebP verwenden.<\/span>\r\n <\/span>\r\n <\/li>\r\n
  4. \r\n \r\n <\/span>\r\n Zubeh\u00f6r<\/a>
    Styles und Skripts minifizieren, asynchron ggf. zum Schlu\u00df laden.<\/span>\r\n <\/span>\r\n <\/li>\r\n
  5. \r\n \r\n <\/span>\r\n Cache<\/a>
    Installation eines Plugins, Abfragen der Datenbank reduzieren.<\/span>\r\n <\/span>\r\n <\/li>\r\n <\/ol>\r\n <\/div>\n\n\n\n

    Webspace<\/h4>\n\n\n\n

    Erster Ausgangspunkt ist der passende Server(platz), hinsichtlich Umfang und Ausstattung sollte dieser zum Projekt passen. \u00dcber die Datei .htaccess<\/code> lassen sich auf Apache das Komprimieren von Inhalten, bevor sie an den Browser \u00fcbertragen werden und das Setzen von Headern und die Cache-Kontrolle von Grafiken, Schriften u.\u00e4. einrichten. Mittels H2PushResource<\/code> kann, falls erforderlich, das Laden von einzelnen Dateien nach hinten aufgeschoben werden.<\/p>\n\n\n\n

    WordPress<\/h4>\n\n\n\n

    Sowohl Page Builder als auch fertige Multi Purpose Themes statt individueller Programmierung haben die Tendenz einen gewaltige Overhead, ein aufgebl\u00e4htes Backend und dadurch eine eingeschr\u00e4nkte Performance mit sich zu bringen, weshalb ich ausschlie\u00dflich selbst erstellte Themes statt Produkte von der Stange nutze.
    Hinsichtlich Plugins stellt sich als Erstes immer die Frage, ob dieses \u00fcberhaupt erforderlich ist oder es sich um eine Aufgabenstellung handelt, die problemlos anderweitig, beispielsweise in der functions.php<\/code>, erledigt werden kann. \u00dcberpr\u00fcfen Sie daher die Nutzung in der Website und entfernen Sie diejenigen, die nicht mehr ben\u00f6tigt oder verwendet werden.<\/p>\n\n\n\n

    Bilder<\/h4>\n\n\n\n

    F\u00fcr ein optimales Laden der Website sollten Bilder nicht nur im passendem Format (H\u00f6he x Breite) entsprechend dem Endger\u00e4t des Nutzers bereitgestellt werden, sondern auch neuere Dateiformate ber\u00fccksichtigt werden. Ein einmalig zu installierendes Tool wie das Plugin WebP Express<\/em> liefert entsprechend automatisch generierte Bilder, \u00e4ltere Browser erhalten die gewohnten Formate. Mit Smush<\/em> kann man Bilder von unn\u00f6tigen Dateiinformationen befreien.
    Au\u00dfer dem Headerbild bzw. Bildern, die im sofort sichtbaren Bereich einer Seite eingesetzt werden, verwende ich natives loading=\"lazy\"<\/code>, sodass diese erst dann geladen werden, wenn Besucher:innen zu diesen hin scrollen.<\/p>\n\n\n\n

    Zubeh\u00f6r<\/h4>\n\n\n\n

    Asynchrones Laden von Skripten und Schriften, wann immer m\u00f6glich. Ich bevorzuge defer<\/code> da dann die Reihenfolge und somit die Abh\u00e4ngigkeiten eingehalten werden. Minifizierung des Quelltextes, der Stylesheets und Javaskripten, d.h. Entfernung alle unn\u00f6tigen Zeichen aus dem Quellcode. Dies erledige ich mit wp_html_compression<\/code> bzw. bereits w\u00e4hrend der Programmierung mit Atom sowie Visual Studio Code. Ggf. sollten Schriften f\u00fcr das Erscheinungsbild mit rel=\"preload\"<\/code> vorgeladen werden. Analog wird mit rel=\"stylesheet preload\" as=\"style\"<\/code> mit Stylesheets verfahren. Nur wichtige Dateien landen im Header, der Rest verschwindet im Footer.
    Wann immer m\u00f6glich binde ich Skripts und Styles (z.B. f\u00fcr Karten, Formulare, Tabellen etc.) nur dann ein, wenn diese tats\u00e4chlich ben\u00f6tigt werden, anstatt diese durch alle Seiten mitzuschleppen. In der Regel nehme ich hierf\u00fcr entsprechende Eintr\u00e4ge direkt in der functions.php<\/code> von WordPress vor, um diese nur dann zu laden, wenn wir sie wirklich brauchen.<\/p>\n\n\n\n

    \n
    \n
    \n
    \n
    Page Speed<\/span><\/div><\/div>\n

    Page Speed<\/h4>

    Die Geduld von Besucher:innen einer Website ist sehr begrenzt: rund die H\u00e4lfte ist nicht mehr interessiert, wenn die Ladezeit bei \u00fcber drei Sekunden liegt. Time to First Paint<\/strong>, d. h. die Zeit w\u00e4hrend der Nutzer erst mal gar nichts sieht und Time to First Contentful Paint<\/strong>, gemeint ist der Zeitpunkt ab dem erste Inhalte sichtbar sind, sollten so gering wie m\u00f6glich sein. Hauptaugenmerk liegt auf dem Largest Contentful Paint<\/strong>. Dieser Wert bildet das gr\u00f6\u00dfte Element im sofort sichtbaren Bereich der Website, dem sogenannten above the Fold<\/strong> und dessen Rendering- bzw. Ladezeit ab.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n

    Cache<\/h4>\n\n\n\n

    Um ein schnelleres Laden zu erm\u00f6glichen, werden die einzelnen Seiten mittels eines Cache ohne Datenbankabfragen oder spontane Komprimierung ausgeliefert, anstatt Daten f\u00fcr jeden Besucher dynamisch zu generieren. Caching in WordPress erledige ich beispielsweise mit den schlanken Plugins Cache Enabler<\/em> oder Hyper Cache<\/em>. Die im Cache vorgehaltenen statischen Seiten aktualisieren sich automatisch entsprechend der eingestellten Anzahl an Stunden oder Tagen bzw. bei einer \u00c4nderung oder Neueinstellung eines Beitrags bzw. einer Seite.
    Es gibt Plugins mit wesentlich mehr Funktionen wie LiteSpeed<\/em> bzw. W3 Total Cache<\/em>, die auf einer bzw. drei Millionen Sites genutzt werden. Ich habe es lieber minimalistisch, da ich alles, was die Plugins zus\u00e4tzlich k\u00f6nnen, bereits vorher erledigt habe. Die h\u00e4ufig angebotene Kombination von bereits minifizierten CSS- bzw. JS-Dateien darf auf modernen Servern als obsolet gelten.<\/p>\n\n\n\n

    Nutzer und Suchdienste gl\u00fccklich machen<\/h3>\n\n\n\n

    Die genannten Ma\u00dfnahmen legen die Basis f\u00fcr eine gute technische Optimierung der Website<\/strong>, die Besucher als auch Suchdienste sch\u00e4tzen und langfristig Ihren Erfolg sichern werden. Daneben gibt es weitere Ans\u00e4tze zur Verbesserung, die ich grunds\u00e4tzlich bei Umsetzung eines Webprojektes einflie\u00dfen lasse.<\/p>\n\n\n\n

    Cumulative Layout Shift<\/h4>\n\n\n\n

    Hierbei handelt es sich im Wesentlichen um einen Rankingfaktor<\/strong> der Verschiebungen des Layouts, w\u00e4hrend die Seite l\u00e4dt, misst. Meine bisherige Best Practice<\/strong> zur Vermeidung ist, dass Bilder Gr\u00f6\u00dfenangaben bekommen und mehrere Versionen eines Bildes je nach Gr\u00f6\u00dfe des Endger\u00e4ts angeboten werden. Insbesondere im Header macht bei Bildern noch ein aspect ratio<\/code>, also die Definition des Seitenverh\u00e4ltnisses (16:9, 4:3 etc.) Sinn. Schriften sowie die Styles f\u00fcr den Header werden im Kopfbereich geladen. Das Attribut font-display<\/code> erm\u00f6glicht, in das Verhalten beim Rendern von benutzerdefinierten Schriften einzugreifen. Mit diesen Ma\u00dfnahmen m\u00fcssen sich Nutzer:innen dann nicht neu orientieren, weil beispielsweise Teile der Seite wegen eines nachgeladenen Bildes nach unten rutschen. Anzeigen (Banner bzw. Ads), Einbettungen wie Iframes u.\u00e4. vermeide ich daher an dieser Stelle oder lade zumindest einen Platzhalter vor.<\/p>\n\n\n\n

    \n

    Sie brauchen Ideen f\u00fcr die Optimierung Ihrer Website?
    Sichern Sie sich ganz unkompliziert hier Ihr kostenfreies Vorgespr\u00e4ch<\/p>\n\n\n

    \n\t\n\t\tTelefontermin vereinbaren\t<\/a>\n<\/div>\n<\/div><\/div>\n\n\n\n

    Bei sorgf\u00e4ltiger Planung und Realisierung des Webprojekts lassen sich alle Schritte f\u00fcr eine optimale Ladezeit<\/strong>, mit Ausnahme der Umwandlung der Bilder in das Format WebP und der Bereitstellung des Cache, in WordPress ohne Plugins<\/strong> ausf\u00fchren. Und was kann ich f\u00fcr Sie tun<\/a>?<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"

    Die Geschwindigkeit, die eine Website zum Laden ben\u00f6tigt, z\u00e4hlt nach wie vor zu den wichtigsten Stellschrauben bei der Suchmaschinenoptimierung. Nicht nur Besucher:innen, sondern gerade Suchmaschinen ziehen die Zeit, die beim Aufruf einer Seite ins Land streicht, als wichtiges Bewertungskriterium heran. Ein schlanker und komprimierter Code und der Einsatz von Mechanismen zum Caching z\u00e4hlen ebenso zu […]<\/p>\n","protected":false},"author":1,"featured_media":310,"parent":290,"menu_order":19,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[9],"class_list":["post-311","page","type-page","status-publish","has-post-thumbnail","hentry","tag-wartung-und-optimierung"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/pages\/311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/comments?post=311"}],"version-history":[{"count":0,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/pages\/311\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/pages\/290"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/media\/310"}],"wp:attachment":[{"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/media?parent=311"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/tags?post=311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}