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

Meine mobile Webseite ist langsam…

Ich wollte eigentlich „Deine mobile Webseite ist langsam…“ schreiben, aber das wäre gemein und vielleicht sogar falsch – und so stimmt der Betreff immerhin.

Bisher habe ich mich immer auf die „Responsive Alles Könner Rahmenwerke“ verlassen wie zum Beispiel Foundation oder Bootstrap und während man damit eine Seite entwickelt sitzt man im Büro, zu Hause oder sonstwo und hat Kabel-LAN, Kabellos-LAN, LTE oder HSDPA am Smartphone und schaut sich immer über diese Breitbänder die eigene Arbeit an.

Es hallt noch durch die Räume dass man vor dem Start der Umsetzung gesagt hat „Man müsse auf niedrig sowie hoch aufgelöste Displays achten“ aber diese Aussage hat man falsch verstanden, oder falsch gemeint.

weiterlesen