Die vier großen Wege, wie Jetpack bei der Bild Leistung hilft

Wir arbeiten hier mit Jetpack als Sponsor zusammen. Es ist eine gute Übereinstimmung, denn als jemand mit einer Reihe von selbst gehosteten WordPress-Sites ist Jetpack für mich eines dieser Plugins, über die man nicht nachdenken muss. Jetpack kann eine Menge guter Dinge für jede Website auf vielfältige Weise tun. Hier ist eine Denkweise dazu: Es bringt die Leistung der riesigen Server von WordPress zu Ihnen.

Konzentrieren wir uns für den Moment nur auf einen Aspekt dessen, was Jetpack für Sie tun kann: die Bildleistung. Jetpack leistet in dieser Hinsicht viel für Sie und löst einige nicht triviale Leistungsverbesserungen. Lassen Sie uns einen Blick auf das werfen, was ich als die vier großen Vorteile betrachte, die Sie mit Jetpack für Ihre Bilder erzielen.

1) WordPress kümmert sich um responsive Bilder für Sie

Okay, ich habe bei der ersten unofficially geschummelt, da Sie Jetpack nicht wirklich benötigen, um davon zu profitieren. Aber es ist ein wichtiges und grundlegendes Konzept für schnelle Bilder. Allein durch die Verwendung von WordPress erhalten Sie grundlegende responsive Bilder kostenlos.

Wenn Sie bereits wissen, wovon ich spreche, hier ist ein Beispiel für die Ausgabe, die Sie im DOM eines veröffentlichten WordPress-Posts mit einem Bild sehen, das über den Media Uploader hochgeladen wurde.

Wenn Sie neu im Konzept der responsiven Bilder sind, ist die Hauptidee Folgende: Anstatt dass ein einzelnes Bild an jeden Browser gesendet wird, der Ihre Website besucht, haben Sie mehrere Bilder in verschiedenen Größen und das am besten geeignete wird geliefert. Stellen Sie sich vor, anstatt dass ein Mobiltelefon ein 1600 Pixel breites Bild herunterlädt (viel größer als nötig), lädt es nur ein 320 Pixel breites Bild herunter, was viel Downloadzeit spart.

Wir haben im Laufe der Jahre viel über responsive Bilder geschrieben.

2) Sie erhalten ein CDN

Lesen Sie ein wenig über Web-Performance und Sie werden einstimmig hören: „Nutzen Sie ein CDN.“ Ein CDN ist ein Content Delivery Network, im Wesentlichen Webserver, die speziell dafür ausgelegt sind, die Auslieferung von Assets wie Bildern extrem schnell zu machen. Man nennt es Netzwerk, weil es nicht nur ein Server ist, sondern viele Server, die physisch auf der ganzen Welt verteilt sind, so dass, wenn Ihre Website von verschiedenen Orten auf der ganzen Welt angefordert wird, die zurückgesendeten Dateien von geografisch näher gelegenen Orten kommen (schneller!). Ganz zu schweigen davon, dass es andere clevere Dinge tut, wie z.B. keine Cookies für jede Webanfrage zu benötigen, wie es Ihr eigener Server wahrscheinlich tut.

Drehen Sie buchstäblich einen Schalter in Jetpack und Sie werden ein Bild-CDN nutzen

Es heißt Photon.

Die Website-Geschwindigkeit wird von vielen Faktoren beeinflusst, und einer davon ist die Inhaltsbereitstellung. Die Nutzung eines sogenannten Content Delivery Network (oder CDN) hilft dabei,

• Ihre Inhalte von Hochgeschwindigkeits- und dedizierten Rechenzentren aus zu liefern.
• Mehr Dateien können gleichzeitig vom Browser heruntergeladen werden.
• Verteilte Rechenzentren (d.h. an verschiedenen geografischen Standorten) verbessern die Download-Geschwindigkeiten und sorgen für Redundanz.
• Durch die Verteilung der Last und die Einsparung von Bandbreite reduzieren Sie Ihre bestehenden Hosting-Kosten (oder halten sie in Schach).

3) Sie erhalten Optimierung

Una Kravets nennt Bildoptimierung einen einfachen Leistungssieg für Designer. Es ist etwas Leichtes zu sehen. Versuchen Sie, einen Screenshot von etwas zu machen, etwas aus Photoshop zu exportieren oder Stockfotos zu besorgen. Dann werfen Sie es auf ein Werkzeug wie ImageOptim und sehen Sie zu, wie die Bytes wegfallen, während es optimiert wird. Massive Einsparungen.

Aber wäre es nicht schön, wenn es nicht an Ihnen läge, alle Ihre Bilder manuell zu optimieren, bevor Sie sie verwenden? Computer sollen uns doch bei Routineaufgaben helfen, oder?! Wenn Sie die CDN-Funktion von Jetpack aktivieren, werden Ihre Bilder nun auf Photon gehostet, und Sie können in den Photon-Dokumenten sehen, wie es Dinge wie Größenänderung und Qualität für Sie handhabt.

4) Sie erhalten Lazy Loading

Lazy Loading ist die Idee, dass Sie nichts laden, es sei denn, Sie benötigen es. Im Fall von Bildern laden Sie das Bild nicht herunter, es sei denn, es ist auf der Seite sichtbar. Das heißt, laden Sie kein Bild herunter, das drei Viertel des Artikels tief liegt und das ein Benutzer möglicherweise nie erreicht, aber wenn doch, dann laden Sie es herunter.

Sie wissen, was sie sagen: die schnellste Webanfrage ist eine, die niemals gestellt wird. Jeremy Wagner von Google sagt:

Wenn wir Bilder und Videos per Lazy Loading laden, reduzieren wir die anfängliche Ladezeit der Seite, das anfängliche Seitengewicht und die Systemressourcennutzung, was alles positive Auswirkungen auf die Leistung hat.

Dies ist eine weitere "Schalter umlegen"-Funktion, die auf jedem Theme funktioniert. Schalten Sie sie ein, und Sie haben Lazy Loading.

Alles zusammen jetzt

1. Sie erhalten responsive Bilder mit WordPress, was allein schon ein großer Leistungsvorteil sein kann.
2. Mit Jetpack werden diese responsiven Bilder CDN-gehostet, was zu einer Geschwindigkeitssteigerung und hervorragendem Caching für die Bilder führt, die heruntergeladen werden.
3. Nur weil Sie responsive Bilder und ein CDN verwenden, bedeutet das nicht automatisch, dass diese Bilder optimiert sind, aber auf Photon sind sie es.
4. Zuletzt wird nichts heruntergeladen, es sei denn, die Bilder sind in Sicht (Lazy Loading), was das Effizienteste ist, was Sie tun können.

Ziemlich überzeugend.