DevTools & Intrinsic Placeholders

Das Projekt von Patrick zum 2. MyInnovationDay:

Chrome DevTools

Das tägliche Tool eines jeden Frontend-Entwicklers und doch von vielen nur zu Bruchteilen genutzt. In den letzten Jahren integrierte Paul Irish mit seinem Team viele nützliche Features in die DevTools von Google Chrome. Denn diese können mehr als nur den DOM der Seite untersuchen und manipulieren. Da Performance von Webseiten immer wichtiger geworden ist, gibt es auch immer mehr Möglichkeiten diese zu verbessern. Der Timeline-Tab eignet sich neben dem Anzeigen von den geladenen Ressourcen auch zum Anzeigen von Memory-Leaks. So können Javascript-Funktionen oder CSS-Eigenschafen Webseiten enorm verlangsamen, ohne, dass man es als Entwickler nur ansatzweise erahnen könnte.

Intrinsic Placeholder

Auch in Gedanken an die Performance von Webseiten beschäftigte ich mich mit dem Painting und Repainting der Webseite innerhalb des Browsers. Unter Painting versteht man das Zeichnen / Setzen von Pixeln innerhalb des Browser-Viewports. Somit muss bei dem Ergänzen von Elementen auf einer Webseite zum Beispiel der komplette Viewport gerepainted werden. Ziel ist es, keine unnötigen Paintings auf Webseiten zuzulassen. Bei Webseiten mit vielen Ressourcen wird meistens zuerst der Text dargestellt und die Bilder werden synchron dazu geladen. Da nach dem vollständigen Laden der Bilder sich die Container und somit das Layout verändert, muss somit der Viewport erneut gepainted werden. So kann es bei größeren Webseiten bis zum Absturz des Browsers auf mobilen Endgeräten kommen. 

Um dies zu Umgehen gibt es verschiedene Techniken. Hier habe ich mich mit einer Art der Platzhalter für die zu ladenen Bilder beschäftigt. Die Technik von Instrinsic Placeholdern simuliert durch CSS in Abhängigkeit des Bildverhältnisses den Platz des zu ladenen Bildes. Somit ist das Layout schon beim Laden der CSS-Dateien da und muss nach dem erfolgreichen und vollständigen Ladens der Bilder nicht erneut gepainted werden. Inklusive die Integration von Platzhalterbildern und CSS-Ladegrafiken kann somit das komplette Layout ohne die richtigen Bilder erforscht werden. Nützlich ist dies, wenn ich den Produktnamen schon kenne und als wiederkehrender Nutzer genau weiß wo sich dieses Element befindet. Wenn man allerdings in einem Cafe oder unterwegs ist und somit die Internetverbindung nicht die schnellste ist, kann ich so sehr schnell zu meinem Element navigieren und interagieren. Denn auch das Laden einer Platzhaltergrafik von 10kb kann bei 3G Netzwerken auch ersichtlich sein.

Die mittlerweile sehr große und bekannte Blogging-Platform www.medium.com setzt noch eins oben drauf und lädt kleine Bildgrößeren der eigentlichen Bilder vor der Originalgröße. Mit Hilfe von Javascript-Bibliotheken wurde unter Anderem auch der Animationseffekt ergänzt, welcher die kleine 2KB Bilddatei verschwommen darstellen lässt, welche beim vollständigen Laden zur Originaldatei animiert wird.