Responsive Webdesign – Grundlagen

HTTP-Requests einsparen

Testen Sie unsere 1951 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Eine zentrale Regel zur Verbesserung der Performance lautet: HTTP-Requests reduzieren. Dabei helfen verschiedene Techniken von CSS Sprites über Data-URLs oder allgemeine Methoden für Bilderersetzung und -verkleinerung.

Transkript

Ein zentraler Punkt für die Performance-Verbesserung ist es die Anzahl der http Requests zu reduzieren. Jede Datei, das ist ein Bild, eine CSS-Datei, oder ein JavaScript muss einzeln vom Server angefordert werden. Und das braucht Zeit, besonders weil mobile Geräte üblicherweise eine größere Latenz haben. Deswegen weniger Dateien heißt bessere Performance. Sie sehen diese Empfehlung auch beim Yahoo Developer Network. Minimize HTTP Requests, also http Requests reduzieren. Was kann dafür machen? Ja, zum einen können Sie Dateien zusammenfassen. Das heißt, beispielsweise bei Bildern mit CSS Sprites arbeiten. Bei CSS Sprites ist die Sprite Cow sehr hilfreich. Hier könnten Sie erstmal Ihr Bild laden, was Sie als Sprite nehmen wollen. Was sind überhaupt CSS Sprites? Das Prinzip dahinter ist, dass Sie mehrere Bilder auf ein Bild montieren, die Sie gerne als Hintergrundbilder per CSS einfügen wollen. Und per CSS sorgen Sie dann dafür, dass immer der richtige Ausschnitt zu sehen ist und damit nur dieses eine Bild, was Sie dort wollen. Es heißt also, Bilder zusammenfassen. Wir können uns hier ein Beispiel ansehen, wo Sie merken wie Sprite Cow hilfreich ist. Also, normalerweise würden Sie Ihr Bild öffnen. Ich nehme jetzt das vorgefertigte Beispiel. Und wenn ich jetzt das hier hätte als Sprite, dann kann ich hingehen und dahinklicken. Und Sprite Cow liest mir automatisch die richtigen Koordinaten aus. Das heißt, das ist der CSS-Code, den ich dann brauchen würde, um dieses Icon, dieses Bild dann einzufügen. Sonst wäre das relativ mühsam zu ermitteln. Und da ist Sprite Cow wirklich eine sehr schöne Geschichte. Bilder zusammenfassen, das reduziert http Requests. Ansonsten sollten Sie natürlich auch mehrere JavaScript-Dateien zusammenfassen. Das ist auch empfehlenswert. Und Sie sollten auch CSS-Dateien zusammenfassen. Wenn Sie aber jetzt, weil es natürlich besser ist zu organisieren, mit verschiedenen CSS-Dateien arbeiten, dann können Sie das natürlich auch weiterhin während der Entwicklung machen. Aber im letzten Schritt sollten Sie die eben zusammenfassen. Und hierfür gibt es natürlich auch nützliche Tools wie Less oder andere CSS Präprozessoren. Die erlauben Ihnen mit verschiedenen Dokumenten zu arbeiten und Sie können die dann am Schluss, die werden, wenn dann das CSS erzeugt wird, dann automatisch zusammengefasst. Wie kann man noch http Requests reduzieren? Bisher waren das Beispiele wie Sie bestehende Dateien zusammenfassen können. Sie können natürlich jetzt auch schauen, dass es an sich weniger Dateien werden, indem Sie statt Bildern beispielsweise zu UTF-8 Icons greifen. Eine weitere Möglichkeit was Sie machen können, ist mit Data URLs zu arbeiten. Das heißt, angenommen Sie haben kleine Bilder. Dann können Sie die auch auf eine bestimmte Art kodieren und direkt im Dokument selber abspeichern. Also, nicht als externe Datei, sondern direkt im Dokument selber. Und das geht auch bei anderen Dokumentsorten, also nicht nur bei Bildern. Sie sehen hier so ein Beispiel von Chris Coyier, wo jetzt ein Hintergrundbild eingefügt wird. Und Sie sehen, das ist sehr komisch kodiert, also ein ganz komischer Code. Wie kommt man dazu? Dafür gibt es einfach Tools, die Konvertierungen durchführen. Hier zum Beispiel dieses Tool hier. Da wählen Sie dann Ihr Bild aus und sagen: Convert Image. Und dann wird Ihnen die kodierte Variante erzeugt. Außerdem können Sie natürlich auch immer wo möglich CSS 3 einsetzen statt Bilder. Das heißt, beispielsweise für abgerundete Ecken, für Schatten und für solche Effekte, wo man früher immer zu Bildern gegriffen hätte. Anderes wichtiges Beispiel ist natürlich auch die Farbverläufe, die man heute auch über CSS 3 machen sollte. Also, http Requests sparen lohnt sich. Zwei Prinzipien wie man das machen kann: man kann bestehende Dateien zusammenfassen und man kann außerdem Bilder ersetzen, wo es geht.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!