Eine Mischung aus Faktoren, darunter Design, Entwicklung, Netzwerkarchitektur und die Geschwindigkeit des Endverbindungsbenutzers, bestimmen, wie schnell oder langsam eine Website geladen wird. Viele davon, insbesondere die letzte, werden sich Ihrer Kontrolle entziehen.
Wir stellten fest, dass die Dateigröße der Homepage über 1.7 MB betrug, als wir die Anfang dieses Jahres eingerichtete Website erneut besuchten. Für eine Webseite ist das eine absurd große (aber leider häufige) Dateigröße. Wir sind auf ähnliche Herausforderungen mit enormen grafischen Seitenbannern gestoßen, einer weiteren kürzlich durchgeführten Initiative von Hochschulen. Dies ist für Personen, die eine langsame Verbindung oder ein Mobilfunknetz verwenden, um die Website zu besuchen, unerträglich schwierig. All die Arbeit, die eine reaktionsschnelle Website mit flüssiger Breite erstellt, die auf kleinen Geräten großartig aussieht, ist umsonst, wenn der Benutzer die Seite verlässt, bevor sie vollständig geladen ist.
Kleine Bilder erleichtern Benutzern mit schlechter Internetgeschwindigkeit das Durchsuchen der Website
Obwohl es möglicherweise kein Problem ist, das Sie oder mich direkt betrifft, wenn wir an unseren Schreibtischen sitzen und Websites planen, erstellen oder verwalten, müssen wir bedenken, dass der Kontext, in dem wir die Websites verwenden, nicht immer mit dem Kontext übereinstimmt, in dem die Website verwendet wird Leute, die sie benutzen, tun es. Viele Menschen in Städten und weltweit haben zu Hause keinen Internetzugang und sind auf schlechte Mobilfunkverbindungen angewiesen, um online zu gehen. Zweifellos nutzen viele Ihrer mobilen Benutzer das Hochgeschwindigkeitsinternet. Was ist mit denen, die versuchen, Ihre Website über öffentliches Wi-Fi von schlechter Qualität zu laden, wie z. B. Cafés, Bibliotheken und Flughäfen?
Die Bildkomprimierung ist nicht nur ein zu berücksichtigender Faktor, wenn es um die Seitenleistung geht; Viele andere Dinge können getan werden, um die Ladezeiten zu beschleunigen.
Die Bildkomprimierung kann die Ladezeiten einer Website verbessern
Die Webseite bestand größtenteils aus einer zufällig geladenen transparenten PNG-Datei – insbesondere einer, die 1.6 MB wog. Es gibt kostenlose webbasierte Bildkomprimierungsprogramme, die die Größe von Bilddateien erheblich reduzieren können. Mit dem minimal wahrnehmbaren Unterschied in der Bildqualität könnte dieses 1.6-MB-Bild auf 230 KB reduziert werden. Die Ladezeit wurde dadurch um ca. 85 % reduziert.
Bilder komprimieren vor dem Hochladen auf das Content-Management-System, das Sie als Teil Ihres Content-Migrations-/Eingabezyklus verwenden. Leider haben die meisten CMS, einschließlich Business-CMS, keine Bildkomprimierung. Photoshop hat es trotz seiner Komprimierungseinstellungen für „Save for Web“ nicht geschafft, die gleiche Komprimierungsstufe wie die besseren Komprimierungsprogramme zu erreichen.
Es ist wunderbar, wenn Ihre Seiten etwa 200 oder 300 KB groß sind. Wenn Sie grafisch intensive Seiten unter 600 KB halten können, sollten Sie das anstreben. Es gibt keine magische Zahl, also versuchen Sie, die Seitengröße so klein wie möglich zu halten. Wenn Ihre Fotos zuvor komprimiert wurden, laden Sie möglicherweise einfach zu viele Bilddateien. Das Festlegen von Leistungsbudgets für Seiten ist ein ausgezeichneter Ansatz, um dieses Konzept in die Praxis umzusetzen. Sie können ein Ziel für das Seitengewicht festlegen und es durch Festlegen eines Budgets begrenzen.
CSS-Sprites verwenden
Der CSS-Sprites-Ansatz führt mehrere Bilder zu einem einzigen Bild zusammen, um die Seitengeschwindigkeit zu verbessern und HTTP-Anforderungen einzusparen. Dies eignet sich hervorragend für Symbole, Logos und andere visuelle Elemente auf Ihrer Seite, die mehrmals verwendet werden. Weitere Einzelheiten zu dieser Methode finden Sie unter „How CSS Sprites Improve Speed and Sustainability“.
Wählen Sie den richtigen Dateityp
Wenn Sie ein Bild erstellen und speichern, wird es komprimiert, wodurch die Dateigröße reduziert wird. Unterschiedliche Dateitypen erfordern unterschiedliche Wege, um die Dateigröße zu verringern. Die Wahl des richtigen Dateiformats für ein bestimmtes Bild führt normalerweise zu einer geringeren Dateigröße.
• Verwenden Sie für Bilder und Illustrationen mit vielen Schattierungen JPEGs; Verwenden Sie GIF oder SVG für Strichzeichnungen, Grafiken und Text. Denken Sie daran, dass Website-Spider und Hilfsgeräte wie Bildschirmlesegeräte für Personen mit Beeinträchtigungen den in ein Bild eingebetteten Typ nicht sehen können. Verwenden Sie Schrift auf diese Weise nur zu Zierzwecken.
• PNG ist häufig der beste Dateityp für Bilder, die eine teilweise Transparenz erfordern, während ein Teil der Klarheit eines JPG erhalten bleibt, z. B. ein Firmenlogo.
Experimentieren Sie in Photoshop mit der Bildqualität.
Wir haben im Beispiel unten einen JPEG-Dateityp für eine Aufnahme von Bikern auf Climate Ride gewählt. Sie können die JPEG-Qualität ändern, nachdem Sie einen Dateityp für ein Bild ausgewählt haben. Sie suchen nach der kürzesten Dateigröße im richtigen Dateiformat, das gut aussieht.
Sie können eine andere Art von Variation mit Auflösung verwenden und Ihr Bild attraktiver machen.
