Nachtrag: Mobile Web Performance Optimierung

Vor kurzem hatte ich das Chromium Device Mode Tool((Chromium Device Mode – Ähnlich wie die Firefox Responsive Design View bietet Chromium (oder Google Chrome) seit Version 38 ein leistungsfähigeres Werkzeug an. Neben mehr Geräteprofilen und der Auswertung des mobile viewport gibt es ein Killer Feature, nämlich das die Simulation von Netzwerkverbindungen wie WiFi, 3G,EDGE,GPRS einfach möglich ist.)) wieder entdeckt und ausführlich getestet((mobile web performance optimization mit chromium responsive design view)).

Die Einsparung war mit kleinen Handgriffen direkt enorm, aber ein paar Ideen hatte ich noch, denen ich in diesem Artikel nachgehen werde.

Als Ausblick sei genannt Grunt((Grunt – Der Javascript Task Runner)), SVG((SVG – Scalable Vector Graphic; Ein verlustfrei skalierbares Grafikformat)), Minifizierung((Minifizierung – Entfernen aller nicht notwendigen Zeichen in einer Javascript- oder CSS Datei)), Uglifizierung((Uglifizierung – Ersetzung von Variablen- und Funktionsnamen um einerseits die Datei noch kleiner zu bekommen, anderseits die Lesbarkeit zu erschweren)) und SVG-Sprites((Sprites – im allgemeinen fasst man mit Sprites mehrere Grafiken in einer Datei zusammen, damit diese nur ein mal geladen werden muss und somit den Seitenaufbau beschleunigt)). Weiterlesen

mobile Web Performance Optimization mit Chromiums 38 Responsive Design View

Der Titel ist ein ziemlicher Buzzword Dump, hält aber was er verspricht.

TL;DR

Mit Hilfe der Responsive Design View im Chromium((Responsive Design Mode – Ein Werkzeug welches verschiedene Geräteprofile und Netzverbindungen simulieren kann)) 38, konnte ich schnell Flaschenhälse auf einer Seite erkennen und mit kleinen Handgriffen beheben.

Neben einer kleinen Theorie-Runde gibt es weiter unten die Messwerte vor und nach der Optimierung, Verbesserungen um 66% sind drin!

und los…

Bis gestern habe ich immer das Firefox Responsive Design View genutzt. Das äquivalente Tool im Chromium war mir bekannt, aber ich fand es nicht so intuitiv wie beim Firefox.

Der Ansatz im Firefox war einfach direkter, allerdings muss man als Anwender das Device Pixel Ratio((Device Pixel Ratio – Hierbei weicht die native Auflösung eines Displays, zum Beispiel Full HD (1920×1080), von der im Gerätebrowser verfügbaren um einen bestimmten Faktor ab)) Konzept verstanden haben und die meta name="viewport" Angabe nicht vergessen.
Weiterlesen