Die Vier Großen Wege Jetpack Hilft mit Bild-Performance

0
32

Wir arbeiten mit Jetpack, um hier als sponsor. Es ist ein tolles Spiel, weil da jemand mit einem Bündel der selbst-gehostete WordPress-Seiten, Jetpack ist eins von diesen no-brainer plugins für mich. Jetpack kann wirklich eine Menge guter Dinge für eine Website in einer Vielzahl von sehr unterschiedlichen Arten. Hier ist ein Weg, daran zu denken: es bringt die power des WordPress-eigenen massiven Server für Sie.

Für jetzt, lasst uns einfach konzentrieren sich auf einen Winkel, was Jetpack für Sie tun können: Bild-performance. Jetpack hat eine Tonne für Sie in diesem Zusammenhang, die Lösung einige nicht-triviale performance-upgrades. Lassen Sie uns nehmen einen Blick an, was ich sehen, wie die vier großen steigert Sie bekommen von Jetpack auf Ihre Bilder.

1) WordPress macht ansprechende Bilder für Sie

OK, ich habe geschummelt mit der ersten, weil Sie nicht wirklich brauchen, Jetpack, um davon profitieren. Aber es ist eine wichtige und grundlegende Konzept für schnelle Bilder. Nur durch die Verwendung von WordPress, Sie erhalten grundlegende responsive Bilder kostenlos.

Wenn Sie bereits wissen, von was ich Rede, hier ein Beispiel der Ausgabe, die Sie sehen in der DOM-eines veröffentlichten WordPress-post mit einem Bild in den es hochgeladen über den Medien-Uploader:

Es ist wunderbar, sich diese kostenlos, so schreiben Sie ansprechende Bilder, die syntax von hand ist Recht umständlich.

Wenn Sie neu in der Idee von responsive images, die große Idee ist: anstatt ein einzelnes Bild gehen zu jedem browser, Ihre website zu besuchen, haben Sie mehrere Bilder in verschiedenen Größen und die meisten-richtige geliefert wird. Stellen Sie sich statt einem Handy herunterladen ein 1600 pixel breites Bild (viel größer als es muss), es lädt nur ein 320 pixel breites Bild, das spart eine Menge Download-Zeit.

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

2) bekommen Sie ein CDN

Lesen Sie mehr über web-performance und Sie werden einstimmig gesagt: “verwenden Sie ein CDN.” Ein CDN ist ein Content Delivery Network, im wesentlichen web-Server speziell entwickelt, um dienenden assets wie Bilder, super schnell. Sie nennen es ein Netzwerk, weil es nicht nur ein server, es sind viele Server die sich physisch auf der ganzen Welt so, dass wenn die Webseite angefordert wird, von verschiedenen Orten aus der ganzen Welt, werden die Dateien gesendet werden, zurück kommen aus geografisch näher Standorte (schneller!). Nicht zu erwähnen, es ist andere clevere Dinge wie nicht, die cookies für jede web-Anfrage, wie Sie Ihren eigenen server wohl nicht.

Buchstäblich, flip einen Schalter in Jetpack und du wirst mit einem Bild CDN:

Es heißt Photon.

Website-Geschwindigkeit ist beeinflusst von vielen Faktoren und einer davon ist die Bereitstellung von Inhalten. Mit dem, was bezeichnet wird als ein content-delivery-Netzwerk (CDN) hilft durch:

  • Bereitstellung von Inhalten aus high-speed und dedizierte Rechenzentren.
  • Weitere Dateien heruntergeladen werden, die gleichzeitig durch die browser.
  • Verteilte Rechenzentren (dh in verschiedenen geografischen Standorten) verbessern die download-Geschwindigkeit und Redundanz.
  • Durch die Verteilung der Last und Bandbreite sparen und reduzieren Sie Ihren bestehenden hosting-Kosten (oder halten Sie in Schach).

3) Sie bekommen-Optimierung

Una Kravets fordert Bild-Optimierung eine einfache performance-gewinnen für Designer. Es ist eine einfache Sache zu sehen. Versuchen Sie, eine Abbildung von etwas, das exportieren etwas von Photoshop oder greifen einige stock-Fotografie. Dann legen Sie Sie auf ein tool wie ImageOptim und beobachten Sie die bytes fallen Weg, wie es optimiert werden. Massive Einsparungen.

Aber wäre es nicht schön, wenn er nicht auf Sie manuell zu optimieren Sie alle Ihre Bilder, bevor Sie Sie verwenden? Computer sollen uns helfen, mit einfachen Aufgaben, rechten?! Wenn Sie flip auf die CDN-Funktion von Jetpack, Ihre Bilder sind gehostet auf Photonen, und Sie können siehe in der Photon-docs wie es behandelt Dinge wie Größenänderung und Qualität für Sie.

4) Sie bekommen, lazy loading

Lazy loading ist die Idee, dass Sie keine Belastung überhaupt nichts, es sei denn, Sie es brauchen. Im Fall der Bilder, nicht das Bild herunterladen, es sei denn, es ist auf der Seite sichtbar. Wie in, nicht das herunterladen eines Bildes, das drei Viertel nach unten ein Artikel, den ein Benutzer möglicherweise nie einen Bildlauf nach unten zu, aber wenn Sie es tun, dann laden Sie es.

Sie wissen, was Sie sagen, der Schnellste web-Anfrage ist eines, das niemals gemacht. Jeremy Wagner, für Google, sagt:

Wenn wir faul laden von Bildern und video, wir reduzieren die anfängliche Ladezeit der Seite, erste Seite, Gewicht und system-Ressourcen-Nutzung, die alle positive Auswirkungen auf die Leistungsfähigkeit.

Dies ist ein weiterer flip-a-switch-Funktion, funktioniert auf jedem Thema. Drehen Sie es auf, Sie bekam lazy loading.

Und Jetzt Alle Zusammen

  1. Erhalten Sie ansprechende Bilder mit WordPress, die von sich selbst können einen großen performance-Gewinn.
  2. Mit Jetpack, diese ansprechende Bilder CDN gehostet wird, bietet eine Geschwindigkeit zu steigern, und groß der Puffer für die Bilder, die heruntergeladen werden.
  3. Nur weil Sie verwenden ansprechende Bilder und ein CDN nicht automatisch bedeuten, dass die Bilder optimiert sind, aber Sie sind auf dem Photon.
  4. Letzten, nichts wird heruntergeladen, wenn die Bilder angezeigt werden (lazy loading), das ist das effizienteste, was man tun kann.

Ziemlich überzeugend.

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die Sicherheit und backups, Markdown-support, site-Suche, Kommentar-Formularen, social-network-verbindungen und vieles mehr!