Google Page Speed: Bilder in neueren Formaten veröffentlichen

Eines der weltweit am häufigsten verwendeten Tools zum Testen der Geschwindigkeit und Leistung einer Website ist ohne Zweifel   Google PageSpeed ​​​​​​Insights  . Wir haben bereits über dieses Tool gesprochen  , aber heute konzentrieren wir uns auf den Vorschlag, den das Tool generiert:   Bilder in neueren Formaten veröffentlichen  .

Ich muss übrigens zugeben, dass ich beim ersten Auftreten dieses Problems etwas ratlos war, andererseits habe ich meine Bilder mit Photoshop über die Save for Web- Funktion gespeichert  und dachte absolut nicht, dass dies ein Problem  sein kann veraltete Möglichkeit, die Datei zu speichern. .

Es muss jedoch gesagt werden, dass das Tool kürzlich aktualisiert wurde. Die von ihm gemeldeten Vorschläge stammen von einem Tool namens   Lighthouse   , das bereits in Google Chrome integriert ist.

Inhaltsverzeichnis

  • Leuchtturm: wozu dient er?
  • Bilder für das Web optimieren
  • WordPress Bildoptimierung: Plugins
  • Schlussfolgerungen

Leuchtturm: wozu dient er?

Ja, um die Leistung einer Website zu   testen  , greifen Sie einfach auf die Entwicklertools zu (mit der rechten Maustaste oder drücken Sie die F12- Taste   auf Ihrer Tastatur) und Sie finden eine Registerkarte namens   Lighthouse  . In diesem Fenster, das nur in Google Chrome verfügbar ist, haben wir die Möglichkeit, unsere Website aus verschiedenen Blickwinkeln zu testen.

Das Werkzeug in der Tat ermöglicht es uns , die Website zu testen   , in Desktop- und Mobile –   Versionen    , die uns die Möglichkeit geben wählen fünf Bereiche von Interesse: Performance, Progressive Web App, Best Practice, Zugänglichkeit und SEO.

Ein vielseitiges Tool in der Praxis, das sich nicht nur auf die Beratung zu Website-Performance und -Geschwindigkeit konzentriert, sondern weit darüber hinausgeht, was auch zu reinen SEO- und Barrierefreiheitsproblemen führt. Schließlich können wir mit dem Tool die Verbindungsgeschwindigkeit auswählen, um den Cache vor dem Start zu simulieren und zu löschen.

Lassen Sie uns den Scan starten und wir werden das Ergebnis zusammen mit nützlichen Tipps zur Verbesserung der Website in all den verschiedenen Aspekten sehen können, bei denen Probleme auftreten.

Mit der neuen Version von Google PageSpeed ​​wurde Lighthouse integriert. Auf der Website erhalten Sie genau die gleiche Punktzahl wie auf der Registerkarte Scheinwerfer in Google Chrome. PageSpeed ​​​​​​Insights ist jedoch ein umfassenderes Tool, das umfassende Ratschläge zur Verbesserung Ihrer Website bietet.

Nach dieser Prämisse erreichen wir den zentralen Punkt unseres Guides. Die neue Version von PageSpeed ​​ist übrigens viel starrer als die vorherige und bietet teilweise Fehler, die für Neulinge schwer zu beheben sind. Eines der Arbeitspferde des Tools ist zweifellos das berühmte Thema “Over -the-Fold- Inhalte”   , das auch in dieser Version geblieben ist. Wir haben über dieses Problem bereits in anderen Leitfäden gesprochen, die ich Sie einlade, sie zu lesen und in die Praxis umzusetzen.

Darüber hinaus wurden mit den neuesten Versionen neue sehr eingeschränkte Metriken eingeführt, die Core Web Vitals genannt werden und die bald auch aus SEO-Sicht einen Einfluss haben werden und die mit   Content Layout Shift   (   CLS   – d. h. dem Vorhandensein von Änderung des Inhalts beim Laden der Seite) und   größeren Paint-Inhalten   (LCP – verstrichene Zeit bis zum Laden des größten Bildinhalts auf der Seite).

Bilder für das Web optimieren

Kommen wir zurück zu uns und unserem Fehler. Wie ich Ihnen bereits sagte, ist es wichtig, zusätzlich zu den von Google geforderten, geeigneten Bildformaten für unsere Website zu verwenden. Daher sollten die Bildformate JPEG 2000, JPEG XR   vermieden werden  , wobei versucht wird, die neuen JPG- und PNG-Formate zu bevorzugen, die von der neuesten Grafiksoftware zur Verfügung gestellt werden und in der Lage sind, ein geringes Gewicht vor einer hervorragenden Videowiedergabe zu halten, insbesondere die   The Das WebP-Format   wird derzeit von Google zusammen mit dem progressiven JPG als das beste angesehen    .

Wenn Sie, wie ich, eine aktuelle Version von  Adobe Photoshop   zum Erstellen Ihrer Bilder verwenden, ist es eine gute Idee, vom alten   Speichern für das Web   zum neuen   Export als  .

Das stimmt, Adobe selbst bezeichnet die beliebte Funktion als veraltet und schlägt die Verwendung von Adobe Generator vor, einem neuen leistungsstarken und effizienten Tool zum Exportieren Ihrer Assets.

Tatsächlich gibt es Gerüchte über die schrittweise vollständige Entsorgung alter Salven für das Web. Laufen Sie zum Penthouse und nutzen Sie die neue Funktion, die bereits in der CC2015-Version   der Software verfügbar ist   .

Ich erinnere mich auch, dass es im Web mehrere Tools gibt, mit denen Sie die Bilder optimieren können, indem Sie nicht nur das Format ändern, sondern auch klarer machen und so mehrere KB sparen. Das am häufigsten verwendete ist zweifellos   TinyPNG  , diese Software hat auch ein   Plugin für Photoshop  .

WordPress Bildoptimierung: Plugins

Natürlich gibt es auch mehrere   WordPress-Plugins   , die es uns ermöglichen, das gleiche Ergebnis zu erzielen. Tatsächlich ist es in einem Zustand, in dem bereits viele Bilder auf unsere Website hochgeladen wurden. Wie können wir die Vergangenheit und Zukunft optimieren?

Glücklicherweise gibt es mehrere Plugins, die uns dies ermöglichen, ich werde drei unten erwähnen, aber wie bereits erwähnt, gibt es viele, nur um sie auszuprobieren und das richtige für Sie zu finden.

  • TinyPNG
  • EWWW-Optimierer
  • smush

TinyPNG

Wir haben bereits über großartiges   TinyPNG gesprochen   . Sie müssen wissen, dass TinyPNG Plug-Ins für Photoshop und WordPress hat.

Das Plugin macht seine Arbeit sehr gut und ermöglicht es Ihnen, die zuvor auf die Site hochgeladenen Bilder zu optimieren. In der kostenlosen Version gibt es einige Einschränkungen, Sie können nur 100 Bilder pro Monat optimieren. Eine ziemlich niedrige Zahl, wenn man bedenkt, dass WordPress für jedes hochgeladene Bild   mehrere Miniaturansichten generiert  . Wenn Sie ein paar Bilder auf Ihrer Website verwenden, kann dies eine wirklich wertvolle Hilfe für Sie sein. Alternativ können Sie das Tool jederzeit über die bereits erwähnte Website verwenden.

EWWW-Optimierer

EWWW Optimizer  ist ein Plugin, mit dem Sie die Größe der Bilder auf Ihrer Website stark ändern können. Es handelt sich um Open-Source-lizenzierte Software und unterliegt keinen besonderen Einschränkungen. Ermöglicht die Optimierung einer großen Anzahl von Bildern, wodurch viel beim tatsächlichen Gewicht der Bilder eingespart wird.

Das Bedienfeld ist voller Optionen und ermöglicht Ihnen die genaue Auswahl der Größe der Miniaturansichten und der anzuwendenden Komprimierungsstufe. Ohne Zweifel ist es eines der aktuellsten Plugins für diese Art von Operation auf dem Markt.

smush

Das letzte Plugin, das ich empfehlen kann, ist   Smush. Smush ist sehr einfach zu bedienen und ermöglicht es Ihnen, Ihre Website-Bilder aufzuhellen, ohne die Leistung zu beeinträchtigen. In der kostenlosen Version gibt es keine besonderen Einschränkungen, der einzige Fehler besteht darin, dass Sie nach 50 massenoptimierten Bildern die Schaltfläche „Fortsetzen“ drücken müssen.

Dies ist ein kleines Opfer, um diese leistungsstarke Software kostenlos zu nutzen.

Schließlich macht eine moderne und attraktive grafische Oberfläche diese Software zu einer der besten, die ich persönlich getestet habe.

Schlussfolgerungen

Wie wir gesehen haben, gibt es verschiedene Methoden und Ansätze, um die Bilder auf unserer Website zu   optimieren  .

Dies ist ein nicht zu unterschätzender Aspekt, da er die Leistung Ihrer Website stark beeinflusst. Niemand mag eine langsame Website.

Wenn Sie andere Methoden kennen, um die Bilder einer Website zu optimieren, können Sie mir gerne schreiben, und ich werde sie gerne ausprobieren und diese Liste mit Ihren Ratschlägen aktualisieren.

 

Leave a Comment

Your email address will not be published.