Wir haben in den letzten Jahren einige Blogs zur Verbesserung der Geschwindigkeit von Seiten ver\u00f6ffentlicht. Letzte Woche habe ich dar\u00fcber berichtet, wie man CSS optimiert<\/a>. Diese Woche zeige ich Ihnen, wie Sie Bilder auf Ihrer Webseite konfigurieren k\u00f6nnen, um die Ladezeiten der Webseite drastisch zu verbessern, ohne die Bildqualit\u00e4t zu beeintr\u00e4chtigen.<\/p>\n Die h\u00e4ufigsten Bildempfehlungen der g\u00e4ngigen Pagespeed-Tools sind:<\/strong><\/p>\n W\u00e4hrend einige davon wirklich einfach zu bewerkstelligen sind, kann es bei anderen ziemlich schwierig sein, sie effektiv auf einer ganzen Seite durchzuf\u00fchren. Zum Beispiel kann es sehr zeitaufw\u00e4ndig sein, die Gr\u00f6\u00dfe zu \u00e4ndern, zu komprimieren und alle Bilder auf Ihrer Seite in Next-Gen-Formaten bereitzustellen. Au\u00dferdem k\u00fcmmern sich die meisten schnellen L\u00f6sungen f\u00fcr das Lazy-Loading von Bildern auf einer Webseite nicht um 3rd-Party-Pixel und -Bilder.<\/p>\n Im Folgenden zeige ich einige schnelle Hacks und L\u00f6sungen, um alle 4 oben genannten Punkte \u00fcber eine gesamte Webseite zu optimieren (Schritt f\u00fcr Schritt ). Auf diese Weise k\u00f6nnen Sie endlich die Empfehlungen von Pagespeed-Tools loswerden und Ihre Seite schneller machen (ich zeige sogar, wie man das ohne Programmierung macht).<\/p>\n <\/p>\n <\/p>\n Lesen Sie hier meinen Blog \u00fcber die Bereitstellung von Next-Gen-Formaten mit WordPress.<\/a><\/p>\n Viele Publisher und Content-Ersteller, mit denen ich spreche, haben Bedenken, Bilder von SEOs und Webmastern optimieren zu lassen, weil sie bef\u00fcrchten, dass entweder die Komprimierung oder die \u00c4nderung der Art und Weise, wie Bilder bereitgestellt werden, die Qualit\u00e4t des Bildes beeintr\u00e4chtigt.<\/p>\n Im Wesentlichen m\u00f6chte der Publisher oder der Autor des Inhalts nicht, dass die Besucher eine niedrig aufgel\u00f6ste Version der Bilder sehen. Das macht Sinn. Niemand m\u00f6chte, dass die Besucher seiner Webseite eine minderwertige Version seiner Seite sehen.<\/p>\n Die Wahrheit ist, dass Next-Gen-Bildformate, Lazy Loading Images und sogar die meisten Formen der Kompression die Bildqualit\u00e4t f\u00fcr Ihre Besucher nicht merklich beeintr\u00e4chtigen, wenn Sie es richtig machen.<\/p>\n Dies sind die besten Praktiken, um Ihre Seite so einzustellen, dass sie den Empfehlungen g\u00e4ngiger Pagespeed Tools (wie Google Pagespeed Insights) entspricht.<\/p>\n Wenn Sie eine auf Bilder spezialisierte Seite sind und hochaufl\u00f6sende Versionen Ihrer Bilder zum Anschauen oder Herunterladen zur Verf\u00fcgung stellen wollen, kann dies immer durch Verlinkung geschehen. Die meisten Bilder, die auf der Seite angezeigt werden, k\u00f6nnen auf eine Art und Weise bedient werden, die sowohl f\u00fcr die Geschwindigkeit der Seite optimal ist als auch f\u00fcr die Besucher, die auf Ihre Seite kommen, visuell identisch mit der hochaufl\u00f6senden Version ist.<\/em><\/p>\n Wie bereits erw\u00e4hnt, ist das “Lazy Loading” von Bildern ein ziemlich einfacher Prozess und es gibt eine Menge schneller L\u00f6sungen, die Ihnen dabei helfen. Leider k\u00f6nnen viele Quick-Fix-L\u00f6sungen, die Bilder asynchron auf eine Seite laden, “nicht-native” Bilder nicht identifizieren. Das bedeutet, dass sie oft Pixel und Bilder von Drittanbietern vermissen.<\/p>\n Was ist ein nicht-natives Bild?<\/strong> Ein nicht-natives Bild k\u00f6nnte so einfach sein wie das Twitter-Logo, das auf einem Social-Sharing-Widget angezeigt wird, oder ein Facebook-Pixel, das in Ihrer Kopf- oder Fu\u00dfzeile installiert ist. Dies sind oft Bilder, die von g\u00e4ngigen Tools und Plugins \u00fcbersehen werden.<\/p><\/blockquote>\n Was bedeutet “Lazy Loading Images”?<\/strong><\/p>\n Lazy Loading Images ist ein anderer Begriff f\u00fcr das asynchrone Laden von Bildern auf einer Webseite. Dies ist der Prozess, bei dem Bilder nach der ersten Seitenanforderung geladen werden. W\u00e4hrend der Besucher der Webseite die Seite nach unten scrollt, werden die Bilder geladen, wenn sie vom Besucher der Webseite ben\u00f6tigt werden, anstatt dass sie alle auf einmal geladen werden, wenn die Seite angefordert wird. Dadurch wird die Seite f\u00fcr die Leser anfangs schneller geladen und das Surfen auf der Seite wird zu einem besseren Erlebnis.<\/p>\n Wie implementiert man Lazy-Loading richtig?<\/strong><\/p>\n Wenn Sie ein Nutzer von Ezoic<\/a> sind, geht es nicht viel einfacher. Mit der neuen Site Speed App im Ezoic App-Store k\u00f6nnen Sie sowohl native als auch nicht-native Bilder sofort zeitverz\u00f6gert laden lassen.<\/p>\n Die Site Speed App<\/a> implementiert automatisch “Lazy Loading” f\u00fcr alle Bilder gem\u00e4\u00df den von Google beschriebenen Best Practices. Es funktioniert auf jeder Seite, unabh\u00e4ngig von CMS oder Infrastruktur.<\/p>\n Wenn Sie kein Ezoic-Nutzer sind oder es vorziehen, es ohne die Site Speed App zu implementieren, gibt es eine Reihe von Optionen. Wie ich bereits erw\u00e4hnt habe, gibt es eine Menge wirklich einfacher L\u00f6sungen, mit denen Sie dies schnell und einfach nur f\u00fcr native Bilder implementieren k\u00f6nnen (was immer noch besser ist als nichts).<\/p>\n Wenn Sie eine WordPress Webseite betreiben, k\u00f6nnen Sie einfach ein Plugin herunterladen und es seitenweit mit sehr wenigen Konflikten f\u00fcr alle nativen Bilder implementieren. Ich mag das Lazy Load Plugin von WP-Rocket<\/a> sehr.<\/p>\n Dieses Plugin – und einige andere da drau\u00dfen – haben sehr einfache Einstellungen, die es WordPress-Seiten erm\u00f6glichen, Bilder, die sie als Dateien auf ihrer Seite gespeichert haben, mit Verz\u00f6gerung zu laden. Achten Sie nur darauf, dass Sie ein Plugin verwenden, das mit Ihrer Version von WordPress getestet wurde und viele aktive Nutzer hat.<\/p>\n Wenn Sie Joomla verwenden, ist Lazy Loading f\u00fcr Joomla<\/a> der CMS-Standard. Drupal-Nutzer k\u00f6nnen den LazyLoader<\/em> von Drupal<\/a> verwenden.<\/p>\n Diese Plugins und Erweiterungen k\u00fcmmern sich um native Bilder, aber das Lazy Loading von nicht-nativen Bildern ist etwas schwieriger. Au\u00dferdem m\u00fcssen Sie, wenn Sie kein CMS wie WordPress oder Joomla verwenden, einen Weg finden, um “Lazy Loading” f\u00fcr alle Arten von Bildern zu implementieren.<\/p>\n Das Schreiben einiger einfacher JS kann Ihnen in der Regel helfen, die \u00fcberwiegende Mehrheit der nativen Bilder oder Bilder mit einem <img >oder <picture >Tag auf Ihrer Webseite zu verwalten.<\/p>\n Beispiel-JS f\u00fcr das Lazy Loading nativer Bilder auf Custom-PHP- oder anderen Nicht-WP-, Joomla- oder Drupal-Seiten:<\/strong><\/p>\n Lazy Laden der Bilder, die schwer zu bekommen sind… nicht-native Bilder<\/strong><\/p>\n Googles Pagespeed Insights wird immer Empfehlungen f\u00fcr nicht-native Bilder ausgeben – auch wenn es sich um kleine Gr\u00f6\u00dfen handelt – bis Sie in der Lage sind, diese ordnungsgem\u00e4\u00df asynchron zu laden. Nicht-native Bilder k\u00f6nnen aus dem Theme Ihrer Webseite stammen, Pixel von sozialen Plattformen oder einfach Bilder, die in verschiedene Tools oder Plugins von Drittanbietern eingebunden sind, die auf Ihrer Webseite verwendet werden.<\/p>\n Die meisten Plugins, Erweiterungen und Tools sind nicht in der Lage, diese Bilder mit Verz\u00f6gerung zu laden.<\/p>\n Der Prozess f\u00fcr das Lazy Loading von nicht-nativen Bildern ist derselbe Prozess, den viele Nicht-WordPress-Nutzer verwenden werden, um Lazy Loading auf ihrer Seite zu implementieren.<\/p>\n Wenn Sie diese schwer zu optimierenden nicht-nativen Bilder erhalten wollen – und Sie verwenden Ezoic nicht – gibt es keine allzu einfache L\u00f6sung, die f\u00fcr jede Webseite gilt. Leider machen Code-Basen, Browser-Typen und eine Reihe anderer Faktoren einige L\u00f6sungen f\u00fcr verschiedene Arten von Seiten einfacher als andere.<\/p>\n Eine der universellsten L\u00f6sungen ist die Implementierung von benutzerdefiniertem Lazy-Loading f\u00fcr alle Bilder auf einer Seite mit JQuery. Dies ist eine wirklich einfach zu bedienende und robuste JQuery-Bibliothek<\/a>, die einfach zu implementieren ist, wenn Sie einige grundlegende Entwicklerf\u00e4higkeiten haben. Wenn nicht, k\u00f6nnen Sie es vielleicht trotzdem herausfinden.<\/p>\n Es gibt definitiv viel schwierigere Code-Bibliotheken zu implementieren und zu verwenden.<\/p>\n Letztendlich haben Sie Ihre Seite beschleunigt und Ihre PageSpeed-Scores verbessert, wenn Sie nur das Laden Ihrer nativen Bilder mit einem Plugin oder einer Erweiterung verz\u00f6gern k\u00f6nnen. Wenn Sie dies bei nicht nativen Bildern nicht implementieren, wird eine Webseite wahrscheinlich nicht sehr langsam werden. Dies h\u00e4ngt von der Anzahl der Bilder von Drittanbietern auf Ihrer Webseite ab.<\/p>\n Dies ist ein Thema, das ich schon einmal ausf\u00fchrlich behandelt habe.<\/p>\n Ich habe die Bildkomprimierung und -optimierung in einem fr\u00fcheren Blogbeitrag<\/a> \u00fcber einfache SEO-Tricks besprochen, die jeder Webmaster durchf\u00fchren kann. Ich empfehle, diesen Blog zu lesen, um mehr \u00fcber die Gr\u00f6\u00dfen\u00e4nderung von Bildern gem\u00e4\u00df den Google Best Practices zu erfahren.<\/p>\n Hier ist eine kurze Zusammenfassung der Informationen:<\/strong><\/p>\n Die einfachen Regeln zum Befolgen:<\/strong><\/p>\n Mit diesen Informationen k\u00f6nnen Sie die Gr\u00f6\u00dfe von Bilddateien erheblich reduzieren. Leider kann dieser Weg ziemlich m\u00fchsam werden, wenn Sie sich auf Ihrer Seite bisher nicht an die Best Practices gehalten haben. Ich empfehle, mit den obersten Landing Pages zu beginnen, wenn Sie sich dazu entschlie\u00dfen, alle Bilder auf Ihrer Seite zu optimieren.<\/p>\n Gl\u00fccklicherweise gibt es einen etwas schnelleren Weg, um einige dieser Aufgaben zu erledigen.<\/p>\n Auch wenn es bei der physischen Gr\u00f6\u00dfen\u00e4nderung einiger Bilder nicht hilft, kann der Prozess, den ich f\u00fcr die Bereitstellung von Bildern in Next-Gen-Formaten mag, Ihnen tats\u00e4chlich eine Menge manueller Arbeit beim Komprimieren Ihrer Bilder ersparen.<\/p>\n Was ist ein Next-Gen-Bildformat?<\/strong> Ein Next-Gen-Bildformat bezieht sich auf eine Reihe von Dateitypen, die eine verbesserte Komprimierung und Qualit\u00e4t f\u00fcr die Verwendung im Web aufweisen. Beliebte Formate sind JPEG 2000, JPEG XR und WebP. Viele Formate erfordern bestimmte Browser, um korrekt geladen zu werden. Dies bedeutet, dass andere Bilddateitypen als Standard serviert werden m\u00fcssen, wenn ein Next-Gen-Format vom Browser des Web-Besuchers nicht unterst\u00fctzt wird.<\/p><\/blockquote>\n Diese Art von Formaten den Besuchern zu bieten, ist nicht so schwer, wie es auf den ersten Blick erscheinen mag. Sie m\u00fcssen Ihre Seite zwar so konfigurieren, dass diese Bildtypen korrekt angezeigt werden, aber die Implementierung dieser Dateitypen auf der gesamten Seite ist eigentlich recht einfach.<\/p>\n Und wenn es Ihnen nichts ausmacht, ein wenig Geld auszugeben, k\u00f6nnen Sie Ihre gesamte Seite schnell auf die neuesten Bildformate umr\u00fcsten. F\u00fcr das gesamte Projekt ben\u00f6tigen Sie vielleicht nur ein oder zwei Stunden. F\u00fcr diejenigen, die kein Geld ausgeben wollen, haben wir eine ausf\u00fchrliche Anleitung, wie man Bilder in Next-Gen-Formaten mit WordPress bereitstellt<\/a>.<\/p>\n Welches ist das beste Next-Gen-Bildformat?<\/strong><\/p>\n Alle Next-Gen-Bildformate sind in Bezug auf Komprimierung und Qualit\u00e4t \u00e4hnlich, aber WebP ist das Format, das in letzter Zeit die meiste Aufmerksamkeit von Google und anderen gro\u00dfen Plattformen erhalten hat. Google Chrome und alle anderen gro\u00dfen Browser unterst\u00fctzen das WebP-Format in ihren neuesten Updates. Das bedeutet, dass sie f\u00fcr die meisten Webbesucher zug\u00e4nglich und verf\u00fcgbar ist.<\/p>\n WebP ist ebenfalls ein Open-Source-Format und hat sich im Web sehr gut durchgesetzt.<\/p>\n Dies ist wichtig, denn wenn Sie eine ganze Seite auf die Bildformate der n\u00e4chsten Generation umr\u00fcsten und ein Format w\u00e4hlen, das irgendwann nicht mehr beliebt ist oder von einigen Browsern nicht unterst\u00fctzt wird, werden Sie den Besuchern Ihrer Seite wahrscheinlich die Standard-JPEG- oder PNG-Bilder als Backup anbieten. Wenn Sie diese nicht alle manuell komprimiert und optimiert haben, kann das eine Menge verschwendete Zeit und M\u00fche sein.<\/p>\n Was wird ben\u00f6tigt, um WebP und andere Next-Gen-Bildformate zu bedienen?<\/strong><\/p>\n Es ist tats\u00e4chlich einfacher, als Sie vielleicht denken. Sie werden feststellen, dass es bei den meisten Bild-\/Grafiksoftwaresystemen nicht zu den Standardeinstellungen geh\u00f6rt, dass Nutzer ein Bild als WebP speichern k\u00f6nnen. Au\u00dferdem kann das Hochladen eines Bildes im WebP-Format ohne den richtigen Code auf Ihrer Webseite dazu f\u00fchren, dass die Besucher entweder einen leeren Frame oder eine leere Fl\u00e4che sehen.<\/p>\n Dies ist eine einfache L\u00f6sung.<\/p>\n Sie k\u00f6nnen einen einfachen Code in den <Head> Ihrer Webseite einf\u00fcgen und dann eine Reihe von verschiedenen Konvertern verwenden, um alle vorhandenen Bilder in WebP zu konvertieren.<\/p>\n Von dort aus k\u00f6nnen Sie einfach WebP-Bilder auf Ihre Seite hochladen oder verschiedene Tools verwenden, um alle Bilder, die Sie auf Ihre Seite hochladen, automatisch in das WebP-Format zu konvertieren. Einige Tools empfehlen sogar, Dateien als JPEGs zu speichern und als Backup-Standard zu speichern, w\u00e4hrend der Konverter das WebP auf der Seite ausliefert, es sei denn, ein Besucher befindet sich in einem nicht unterst\u00fctzten Browser.<\/p>\n Dies ist eigentlich die beste Konfiguration – und diejenige, die ich weiter unten zeigen werde -, da sie alle Ihre Grundlagen abdeckt, einschlie\u00dflich der Gr\u00f6\u00dfen\u00e4nderung von Bildern, Next-Gen-Formaten und der Bereitstellung von konventionellen Dateitypen f\u00fcr Besucher in Browsern, die keine WebP-Bilder anzeigen k\u00f6nnen.<\/p>\n Blog zur CSS-Optimierung hier ansehen.<\/em><\/a><\/p>\n Es gibt eine Reihe von verschiedenen Ans\u00e4tzen, die Sie damit verfolgen k\u00f6nnen. Ich zeige Ihnen das, welches ich f\u00fcr einen meiner WordPress-Blogs verwendet habe, aber es kann in jeder Art von Framework oder CMS gemacht werden. Meine Anleitung, wie man das speziell in WordPress macht, k\u00f6nnen Sie hier lesen<\/a>.<\/p>\n Es machte einen moderaten Unterschied im Gesamtscore von Google Pagespeed Insights und nahm mich weniger als 30-40 Minuten in Anspruch, um es zu implementieren (die Zeit f\u00fcr den Konverter, um alle Bilder auszuf\u00fchren, kann etwas l\u00e4nger gewesen sein).<\/p>\n Obwohl es mit WordPress als CMS gemacht wird, werden Sie feststellen, dass alle unten stehenden Anweisungen und Tools, die ich verwende, auf alle Webseiten anwendbar sind; es kann jedoch etwas einfacher sein, wenn Sie ein WordPress-Nutzer sind (keine Codierung).<\/p>\n Wie f\u00fcge ich WebP-Bilder zu meiner Webseite hinzu?<\/strong><\/p>\n Zuerst m\u00fcssen wir Ihre Seite in die Lage versetzen, WebP-Bildformate zu speichern, bereitzustellen und zu rendern. Wie bereits erw\u00e4hnt, m\u00fcssen Sie einen Prozess einrichten, um Backup-Bilddateien f\u00fcr Besucher bereitzustellen, die Browser verwenden, die das WebP-Format nicht unterst\u00fctzen. Dies bedeutet in der Regel, dass Sie JS verwenden, um Anzeigeregeln in den <Head>-Code Ihrer Webseite zu schreiben oder Ihre .htaccess-Datei zu modifizieren, um die Speicherorte der Bilddateien auf der Basis der Browserdetails richtig umzuleiten.<\/p>\n Option 1:<\/strong> Es gibt tats\u00e4chlich eine wirklich gute Quelle f\u00fcr JS, die bereits Pagespeed-Insights-optimiert ist und einfach zu Ihrer Seite hinzugef\u00fcgt werden kann. Sie k\u00f6nnen es sogar automatisch mit diesem einfachen Plugin hinzuf\u00fcgen<\/strong><\/a>, wenn Sie ein WordPress-Nutzer sind, der alle m\u00f6glichen Kodierungen vermeiden m\u00f6chte (beachten Sie, dass Plugins f\u00fcr alle Seiten unterschiedlich funktionieren).<\/p>\n Option 2:<\/strong> Andernfalls m\u00fcssen Sie diese Dateien unten auf dieser Seite<\/a> zu Ihrer Datenbank hinzuf\u00fcgen und den unten stehenden Code implementieren…<\/p>\n Wird nur ben\u00f6tigt, wenn Sie WordPress nicht verwenden, oder das Plugin in Option 1 verwenden: Jetzt haben Sie die M\u00f6glichkeit, Besuchern WebP-Bilder zu liefern und auf regul\u00e4re Formate auszuweichen, wenn sie in unterst\u00fctzten Browsern sind. Als N\u00e4chstes ben\u00f6tigen Sie eine M\u00f6glichkeit, vorhandene Bilder in WebP zu konvertieren und neu hochgeladene Nicht-Next-Gen-Bilder als WebP bereitzustellen, wenn Sie neue Artikel oder Beitr\u00e4ge auf der Seite hinzuf\u00fcgen.<\/p>\n Sobald Sie Regeln geschrieben haben, um Backup-Bilder in universell ausgew\u00e4hlten Formaten bereitzustellen, k\u00f6nnen Sie den hier verf\u00fcgbaren<\/a> Open-Source-Codec und das Download-Repository verwenden, um Bilder auf Ihrer Webseite in das WebP-Format zu konvertieren. Dies erm\u00f6glicht es Ihnen, Besuchern in unterst\u00fctzten Browsern WebP-Bilder direkt von Ihren bestehenden Seiten aus anzubieten.<\/p>\n Einfachere Option:<\/strong> Es gibt tats\u00e4chlich eine Menge wirklich gro\u00dfartiger Tools und Plugins, die diesen Prozess sehr vereinfachen und die Notwendigkeit der Codierung herausnehmen. Und um ehrlich zu sein, das Tool, das ich im Folgenden verwenden werde, hat mir eine Menge Zeit erspart, die ich wahrscheinlich mit einer Menge Versuch und Irrtum verbracht h\u00e4tte (keine Empfehlung).<\/p>\n Um bestehende Bilder zu konvertieren und alle neu hochgeladenen Bilder automatisch in WebP-Formate auf meiner Seite zu erfassen, habe ich ShortPixel<\/a> (kein Affiliate, ich fand nur deren L\u00f6sung f\u00fcr meine Seite am besten)<\/em> sehr gerne verwendet.<\/p>\n ShortPixel hat zwar einige kostenlose Funktionen, aber die meisten Publisher werden sich wahrscheinlich f\u00fcr ihre Credit-basierten Bildoptimierungspl\u00e4ne entscheiden m\u00fcssen. Da sie im Wesentlichen bei der Verarbeitung und Speicherung verschiedener Backups Ihrer Bilder behilflich sind, ist mit der Nutzung ihrer Tools eine geringe Geb\u00fchr verbunden. Allerdings ist ein gro\u00dfer Teil der anf\u00e4nglichen Kosten im Voraus, und das Kreditsystem macht es ziemlich einfach und sehr erschwinglich f\u00fcr fast jeden.<\/p>\n Wie bereits erw\u00e4hnt, habe ich das WordPress-Plugin verwendet und einen monatlichen Kreditplan bei ShortPixel abonniert. Sie haben Tools und Ressourcen zur Verf\u00fcgung, um Bilder im WebP-Format auch f\u00fcr andere Arten von Seiten zu konvertieren und bereitzustellen (Joomla, benutzerdefinierte PHP, etc.), so dass das, was ich unten zeige, f\u00fcr mehr als nur WordPress-Seiten anwendbar ist. Die Implementierung wird jedoch etwas anders sein.<\/p>\n Es hat mich weniger als 40 Dollar gekostet<\/a>, alle Bilder meiner Seite zu konvertieren. Ich hatte auch genug Credits \u00fcbrig, um meine zuk\u00fcnftigen Uploads f\u00fcr ein paar Monate zu unterst\u00fctzen.<\/p>\n Die Schritte zum Konvertieren von Bildern:<\/strong><\/p>\n 1.) Nachdem ich den Plan ausgew\u00e4hlt hatte, der meinen Bed\u00fcrfnissen entsprach, lud ich das Plugin herunter und gab meinen API-Schl\u00fcssel ein.<\/p>\n 2.) Als N\u00e4chstes habe ich ShortPixel so konfiguriert, dass es mit den Best Practices auf meiner Seite \u00fcbereinstimmt. Siehe unten.<\/p>\n 3.) In den Einstellungen gibt es eine Stelle, an der Sie festlegen k\u00f6nnen, dass bestimmte Dateierweiterungen, Dateinamen und Dateitypen niemals konvertiert werden. Es lohnt sich wirklich, dar\u00fcber nachzudenken. Wenn es Bilder oder Teile Ihrer Seite gibt, die nicht konvertiert werden sollen (Slider-Hintergr\u00fcnde usw.), sollten Sie in Erw\u00e4gung ziehen, diese hier hinzuzuf\u00fcgen.<\/p>\n HINWEIS: Alle Bilder k\u00f6nnen in den Einstellungen gesichert und nach der Konvertierung leicht wieder in ihr Original zur\u00fcckversetzt werden, falls dies die Darstellung Ihrer Seite in irgendeiner Weise beeintr\u00e4chtigt.<\/strong><\/em><\/p>\n 4.) Sobald ich das Plugin so konfiguriert hatte, dass es Next-Gen-Bilder konvertiert und auf meiner Seite gem\u00e4\u00df meinen Einstellungen bereitstellt, konnte ich mit dem Massen-Upload und der Konvertierung aller Dateien meiner Seite beginnen.<\/p>\n 5.) Nachdem ich den Massen-Upload von Bildern abgeschlossen hatte, \u00fcberpr\u00fcfte ich meine Seite in mehreren Browsern, um sicherzustellen, dass meine Bilder korrekt angezeigt wurden. Erfolg!<\/p>\n Nach all dem waren meine Bilder komprimiert und optimiert und ich konnte den unterst\u00fctzten Browsern WebP-Bilder auf meiner Seite anbieten.<\/p>\n In den obigen Informationen finden Sie so ziemlich alle Daten, die Sie ben\u00f6tigen, um die Bilder auf Ihrer Webseite zu optimieren und sie deutlich schneller zu machen. Zumindest wird es einen besseren Pagespeed Insights-Score haben.<\/p>\n Wenn Sie dies mit den Tipps zur CSS-Optimierung aus unserem letzten Blog kombinieren, erhalten Sie einige wirkungsvolle M\u00f6glichkeiten, um Ihre Webseite schneller zu machen<\/a>.<\/p>\n Wenn Sie ein Ezoic-Nutzer<\/a> sind, k\u00f6nnen die Lazy-Loading- und CSS-Einstellungen innerhalb der Site Speed App<\/a> eine Menge davon sehr einfach machen (kostenlos im App-Store erh\u00e4ltlich). Wenn Sie kein Nutzer von Ezoic sind, sollten das Plugin und die obigen Regeln genug vereinfachte Informationen liefern, um zumindest das Laden Ihrer Bilder auf der Seite zu verbessern.<\/p>\n Wenn Sie schlie\u00dflich die Bildformate der n\u00e4chsten Generation bedienen und die Dateigr\u00f6\u00dfen verbessern m\u00f6chten, k\u00f6nnen Sie dies fast vollst\u00e4ndig erreichen, indem Sie die Schritte im letzten Abschnitt oben ausf\u00fchren. Die wahre Best Practice dabei ist die manuelle Komprimierung und Gr\u00f6\u00dfenanpassung aller Bilder, noch bevor sie hochgeladen werden – auf diese Weise erhalten die Besucher auch bei Browsern, die keine Next-Gen-Formate unterst\u00fctzen, eine kleinere Dateigr\u00f6\u00dfe.<\/p>\n Wenn Sie Bilder noch nicht richtig gespeichert und komprimiert haben, empfehle ich Ihnen, jetzt damit anzufangen, egal wie. Auch wenn Sie die oben genannten Optimierungstools und Next-Gen-Formate verwenden, ist es klug, alle Bilder, die Sie hochladen, in der bestm\u00f6glichen Gr\u00f6\u00dfe zu speichern.<\/p>\n Wenn Sie weitere Fragen zu diesen Prozessen haben, k\u00f6nnen Sie diese unten hinterlassen.<\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" Verbesserung der Seitengeschwindigkeit durch Lazy Loading & die Verwendung von Next-Gen-Formaten Wir haben in den letzten Jahren einige Blogs zur Verbesserung der Geschwindigkeit von Seiten ver\u00f6ffentlicht. Letzte Woche habe ich dar\u00fcber berichtet, wie man CSS optimiert. Diese Woche zeige ich Ihnen, wie Sie Bilder auf Ihrer Webseite konfigurieren k\u00f6nnen, um die Ladezeiten der Webseite… Verbesserung der Seitengeschwindigkeit durch Lazy Loading & die Verwendung von Next-Gen-Formaten<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":4,"featured_media":7523,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"tpgb_global_settings":"","footnotes":""},"categories":[8],"tags":[],"class_list":["post-330886","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","entry"],"tpgb_featured_images":{"full":["https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/03\/shutterstock_1024861048-1.jpg",950,627,false],"tp-image-grid":["https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/03\/shutterstock_1024861048-1.jpg",700,462,false],"thumbnail":["https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/03\/shutterstock_1024861048-1-150x150.jpg",150,150,true],"medium":["https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/03\/shutterstock_1024861048-1-300x198.jpg",300,198,true],"medium_large":["https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/03\/shutterstock_1024861048-1-768x507.jpg",768,507,true],"large":["https:\/\/wp.ezoic.com\/de-lang\/wp-content\/uploads\/2019\/03\/shutterstock_1024861048-1.jpg",950,627,false],"default":"https:\/\/wp.ezoic.com\/de-lang\/wp-content\/plugins\/the-plus-addons-for-block-editor\/assets\/images\/tpgb-placeholder.jpg"},"tpgb_post_meta_info":{"get_date":"24. Januar 2021","category_list":{"category":[{"term_id":8,"name":"SEO","slug":"seo","term_group":0,"term_taxonomy_id":8,"taxonomy":"category","description":"","parent":0,"count":60,"filter":"raw"}],"post_tag":false,"post_format":false},"author_name":"Tyler Bishop","author_url":"https:\/\/wp.ezoic.com\/de-lang\/author\/tbishop\/","author_email":"tbishop@ezoic.com","author_website":"","author_description":"","author_facebook":"","author_twitter":"","author_instagram":"","author_role":["administrator"],"author_firstname":"Tyler","author_lastname":"Bishop","user_login":"tbishop","author_avatar":"\n
![\"Google](\"https:\/\/blog.ezoic.com\/\/nas\/content\/live\/ezoicblog\/var\/www\/writeable\/blogwordpress\/2019\/03\/pagespeed-score-min.png\")
<\/a><\/span>K\u00f6nnen Sie Bilder f\u00fcr SEO optimieren, ohne die Qualit\u00e4t zu beeintr\u00e4chtigen?<\/span><\/h2>\n
![\"Bildkomprimierung](\"https:\/\/blog.ezoic.com\/\/nas\/content\/live\/ezoicblog\/var\/www\/writeable\/blogwordpress\/2019\/03\/Untitled-presentation-5.jpg\")
<\/a>Gl\u00fccklicherweise k\u00f6nnen Sie Bilder verlustfrei komprimieren, ihre Gr\u00f6\u00dfe an die Bildschirme verschiedener Ger\u00e4te anpassen, sie im WebP-Format bereitstellen und sie “lazy” laden lassen, ohne die sichtbare Qualit\u00e4t der Bilder, die Sie auf einer Seite bereitstellen, zu beeintr\u00e4chtigen.<\/p>\n<\/span>Lazy Loading, um die Seitengeschwindigkeit zu verbessern<\/span><\/h2>\n
![\"Lazy](\"https:\/\/blog.ezoic.com\/\/nas\/content\/live\/ezoicblog\/var\/www\/writeable\/blogwordpress\/2019\/03\/Image-from-iOS-2-1024x504.png\")
<\/a><\/p>\n![\"lazy](\"https:\/\/blog.ezoic.com\/\/nas\/content\/live\/ezoicblog\/var\/www\/writeable\/blogwordpress\/2019\/03\/lazyload-images-min-1.png\")
<\/a><\/p>\n\n
document<\/span>.addEventListener<\/span>(\"DOMContentLoaded\"<\/span>, function<\/span>() {\n var<\/span> lazyloadImages<\/span> =<\/span> document<\/span>.querySelectorAll<\/span>(\"img.lazy\"<\/span>); \n var<\/span> lazyloadThrottleTimeout<\/span>;\n \n function<\/span> lazyload<\/span> () {\n if<\/span>(lazyloadThrottleTimeout<\/span>) {\n clearTimeout<\/span>(lazyloadThrottleTimeout<\/span>);\n } \n \n lazyloadThrottleTimeout<\/span> =<\/span> setTimeout<\/span>(function<\/span>() {\n var<\/span> scrollTop<\/span> =<\/span> window<\/span>.pageYOffset<\/span>;\n lazyloadImages<\/span>.forEach<\/span>(function<\/span>(img<\/span>) {\n if<\/span>(img<\/span>.offsetTop<\/span> <<\/span> (window<\/span>.innerHeight<\/span> +<\/span> scrollTop<\/span>)) {\n img<\/span>.src<\/span> =<\/span> img<\/span>.dataset<\/span>.src<\/span>;\n img<\/span>.classList<\/span>.remove<\/span>('lazy'<\/span>);\n }\n });\n if<\/span>(lazyloadImages<\/span>.length<\/span> ==<\/span> 0<\/span>) { \n document<\/span>.removeEventListener<\/span>(\"scroll\"<\/span>, lazyload<\/span>);\n window<\/span>.removeEventListener<\/span>(\"resize\"<\/span>, lazyload<\/span>);\n window<\/span>.removeEventListener<\/span>(\"orientationChange\"<\/span>, lazyload<\/span>);\n }\n }, 20<\/span>);\n }\n \n document<\/span>.addEventListener<\/span>(\"scroll\"<\/span>, lazyload<\/span>);\n window<\/span>.addEventListener<\/span>(\"resize\"<\/span>, lazyload<\/span>);\n window<\/span>.addEventListener<\/span>(\"orientationChange\"<\/span>, lazyload<\/span>);\n});<\/code><\/span><\/pre>\n<\/blockquote>\n![\"Bildladegeschwindigkeit\"](\"https:\/\/blog.ezoic.com\/\/nas\/content\/live\/ezoicblog\/var\/www\/writeable\/blogwordpress\/2019\/03\/non-native-images-min.png\")
<\/a>![\"Lazy](\"https:\/\/blog.ezoic.com\/\/nas\/content\/live\/ezoicblog\/var\/www\/writeable\/blogwordpress\/2019\/03\/jquery-lazy-load-min.png\")
<\/a><\/p>\n<\/span>Wie werden Bilder komprimiert und richtig skaliert?<\/span><\/h2>\n
\n
![\"Bild](\"https:\/\/blog.ezoic.com\/\/nas\/content\/live\/ezoicblog\/var\/www\/writeable\/blogwordpress\/2019\/03\/save-for-web-photoshop-2019-min-1024x875.jpg\")
<\/a><\/p>\n\n
<\/span>Wie k\u00f6nnen Sie Bilder in Next-Gen-Formaten bereitstellen?<\/span><\/h2>\n
![\"webp](\"https:\/\/blog.ezoic.com\/\/nas\/content\/live\/ezoicblog\/var\/www\/writeable\/blogwordpress\/2019\/03\/webpimages.jpg\")
<\/a><\/p>\n![\"Webp-Bilder\"](\"https:\/\/blog.ezoic.com\/\/nas\/content\/live\/ezoicblog\/var\/www\/writeable\/blogwordpress\/2019\/03\/webp-iamges12-min-1024x586.png\")
<\/a><\/p>\n![\"webp-Bildformate](\"https:\/\/blog.ezoic.com\/\/nas\/content\/live\/ezoicblog\/var\/www\/writeable\/blogwordpress\/2019\/03\/Untitled-presentation-6-min.jpg\")
<\/a><\/p>\n<\/span>So \u00e4ndern Sie alle Bilder in WebP und machen Ihre Webseite schneller<\/span><\/h2>\n
![\"Webp-Plugin\"](\"https:\/\/blog.ezoic.com\/\/nas\/content\/live\/ezoicblog\/var\/www\/writeable\/blogwordpress\/2019\/03\/webpplugin.png\")
<\/a><\/p>\n
\n<\/em>
\n<script>(function(){var WebP=new Image();WebP.onload=WebP.onerror=function(){
\nif(WebP.height!=2){var sc=document.createElement(‘script’);sc.type=’text\/javascript’;sc.async=true;
\nvar s=document.getElementsByTagName(‘script’)[0];sc.src=’js\/webpjs-0.0.2.min.js’;s.parentNode.insertBefore(sc,s);}};
\nWebP.src=’data:image\/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA\/veff\/0PP8bA\/\/LwYAAA’;})();<\/script><\/p><\/blockquote>\n<\/span>Wie kann ich Bilder auf meiner Webseite in WebP konvertieren?<\/span><\/h2>\n
![\"Next-Gen-Bildformatkonverter\"](\"https:\/\/blog.ezoic.com\/\/nas\/content\/live\/ezoicblog\/var\/www\/writeable\/blogwordpress\/2019\/03\/shortpixel-plugin-for-webp-min-1024x460.png\"){kind=tracking}
<\/a><\/p>\n![\"Bilder](\"https:\/\/blog.ezoic.com\/\/nas\/content\/live\/ezoicblog\/var\/www\/writeable\/blogwordpress\/2019\/03\/shortpixel-min-1024x440.png\"){kind=tracking}
<\/a><\/p>\n![\"Einstellungen](\"https:\/\/blog.ezoic.com\/\/nas\/content\/live\/ezoicblog\/var\/www\/writeable\/blogwordpress\/2019\/03\/image-short1-min-1024x363.png\")
<\/a><\/p>\n![\"next-gen](\"https:\/\/blog.ezoic.com\/\/nas\/content\/live\/ezoicblog\/var\/www\/writeable\/blogwordpress\/2019\/03\/short-pixel-settings-min-1024x476.png\"){kind=tracking}
<\/a><\/p>\n![\"Massenkonvertierung](\"https:\/\/blog.ezoic.com\/\/nas\/content\/live\/ezoicblog\/var\/www\/writeable\/blogwordpress\/2019\/03\/bulk-image-opt-min-1024x318.png\")
<\/a><\/p>\n<\/span>So geht’s. Damit ist alles erledigt.<\/span><\/h2>\n
