Responsive Webdesign – Grundlagen

Schritte zur Performance-Verbesserung

Testen Sie unsere 1927 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Für verbesserte Performance kann man auf eine Reihe unterschiedlicher Maßnahmen setzen. Ein Tool wie PageSpeed Insights von Google verrät, welche Schritte im Einzelnen notwendig sind.

Transkript

Für eine verbesserte Performance kann man eine Reihe von Dingen machen. Ein Tool wie PageSpeed Insights von Google zeigt Ihnen welche Schritte im Einzelnen notwendig sind. Dieses Tool können Sie direkt laufen lassen bei einer Web-Seite in Web. Und das möchte ich hier einmal machen. Ich gehe hier auf Analysieren und das dauert dann einen kleinen Moment, bis das ausgeführt wird und Sie erhalten dann detaillierte Angaben an welchen Punkten Verbesserungen möglich sind. Sie sehen in dieser Ansicht auch, dass Sie variieren können. Sie können das sowohl anschauen sozusagen die Desktop-Version, als auch die mobile. Und ich möchte jetzt hier die mobile Version einmal anschauen, weil die natürlich uns mehr interessiert. Hier kriegen Sie dann zuerst mal eine prinzipielle Wertung: hier sind 78 von 100 Punkten. Sie sehen hier auch eine kleine Vorschau, übrigens hier ist so ein modales Fenster, was einem darauf hinweist, dass man irgendeine App herunterladen kann. Ich weiß nicht wie es Ihnen geht, aber mich stört es immer, wenn ich mit dem Smartphone unterwegs bin und ich kriege so ein modales Fenster und muss das erst wegklicken bevor ich zum eigentlichen Inhalt komme. Ich fände es besser, man würde so etwas diskreter machen. Schauen wir uns mal an was für Punkte hier alles gefunden wurden. Also, Umleitungen vermeiden. JavaScript, wenn es wenig Code ist, kann man es auch inline einfügen. Die Reihenfolge der Formate ist wichtig. Sie sollten nie CSS-Dateien nach JavaScript einfügen, sondern immer vorher. Dann gibt es den Punkt Skalierte Bilder bereitstellen. Wenn wir das hier mal ansehen, was hier alles da steht, dann vermute ich mal stark, dass hier eine Optimierung für hochauflösende Displays durchgeführt wurde. Deswegen wurden die großen Bilder immer hier in kleinere geändert. Aber das ist für die Performance natürlich nicht gut. Allgemein wird empfohlen die Bilder zu optimieren, man könnte die besser komprimieren. Dafür gibt es an sich verschiedene Tools wie zum Beispiel JPEGmini, was Bilder optimiert oder auch von Yahoo, dieses Smush.it Das sind alles Tools, um bestehende Bilder zu optimieren. Dieses Smush.it läuft auch, ohne dass irgendwelche Einbussungen da sind, was die Optik anbelangt. JavaScript reduzieren, HTML reduzieren, das bedeutet, Sie sollten Tools laufen lassen, die Ihnen nicht benötigte Leerzeichen vom JavaScript-Code oder vom HTML-Code entfernt, weil dadurch die Dateien auch kleiner werden. Außerdem sollten Sie serverseitig eine Komprimierung aktivieren. @import in CSS sollte man prinzipiell vermeiden, weil das Performance mäßig nicht gut ist. Weitere Sachen sind zum Beispiel hier, dass man den Browser-Cash aktivieren und nutzen sollte. Schauen wir uns das hier auch einmal an. Sie können, das müssen Sie serverseitig machen, festlegen wie lange bestimmte Ressourcen gecasht werden sollen. Ganz am Anfang hat man vom Web Design oder so hat man häufig gedacht, dass das Cashen was Böses ist, weil um Gottes Willen soll ja immer das Aktuellste ausgeliefert werden. Aber für die Performance ist es genau umgekehrt, nämlich was gecasht ist, was beispielsweise aus dem Browser Cash geladen wird, das ist sofort da, weil es auf der Festplatte des Nutzers da ist. Also, das Cashen ist was ganz Wichtiges für eine gute Performance. Beim Cashen muss man aber differenzieren je nach den verschiedenen Ressourcen. Es gibt natürlich Inhalte, ich habe ja gerade die Web-Seite der Süddeutsche, wo es natürlich um aktuelle Nachrichten geht. Da gibt es natürlich Inhalte, die nicht gecasht werden sollen. Andere hingegen kann man beruhigt cashen. Ich habe hier mal jetzt ein Beispiel. Es gibt irgendein Bild, ein Pfeil und der wird jetzt hier nur 5 Minuten gecasht. Und das ist natürlich ein Schmarrn, weil der wird sich ja nicht ändern, der ist ja ein Teil der optischen Gestaltung. Also, dem könnte man wesentlich längere Zeiträume ansetzten, könnte man auch sagen, der darf ruhig ein Jahr gecasht werden. Also, man sollte beim Cashen immer differenzieren nach den Typen von Dateien. Bilder kann man lange cashen. Beispielsweise auch, wenn Sie jetzt ein Bild haben, was einen Artikel illustriert, dann darf das ja auch ein Jahr lang gecasht werden. Wenn es neue Informationen gibt, dann gibt es neue Bilder, die wieder neue Dateinamen haben, sodass das überhaupt kein Problem geben kann. Wie man das Cashen macht und was da empfohlen ist, in solchen Fällen hilft es immer zu Mobile-Boilerplate zu schauen, was hier für Informationen bereitstellt. Dieses Cashen etc. können Sie aktivieren über eine .htaccess-Datei. Die finden Sie auch bei Mobile-Boilerplate. Und hier sehen Sie dann Vorschläge wie man das machen könnte, wo eben immer unterschieden wird je nach Dateityp wie lange der gecasht werden soll. Zum Beispiel hier HTML soll überhaupt nicht gecasht werden, weil das sind die Dateien, die sich ändern und die immer neu ausgeliefert werden sollen. Aber beispielsweise jetzt Bilder, die kann man wesentlich länger cashen. In dem Beispiel sehen Sie hier auch ein Verweis auf JavaScript. Und da schlagen die vor, das soll man ein Jahr cashen. Was macht man aber, wenn sich jetzt an der JavaScript-Datei doch etwas ändert, irgendeine Verbesserung durchgeführt wird? Dann wäre einfach der beste Weg, dass Sie den Dateinamen ändern. Sie könnten zum Beispiel in den Dateinamen am Ende ein Datum integrieren oder eine Versionierung. Und wenn das da ist, dann ist der Dateiname geändert und dadurch wird das Dokument, eben dieses auch neu angefordert, denn ein geänderter Dateiname ist wie ein neues Dokument. Für eine bessere Performance kann man eine Reihe von Dingen tun. Und sehr hilfreich ist es hier die Vorschläge von PageSpeed Insights einfach abzuarbeiten. Und Sie finden bei den einzelnen Punkten auch immer noch genauere Information was hier zu tun ist.

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!