Der Vortrag „The Website Obesity Crisis“ stößt uns mal wieder auf ein interessantes Problem: Unsere Webseiten werden immer dicker.
Besonders interessant fand ich das bei einem Beispiel aus der eigenen Mache: Mein alter Blog, der von Tumblr mit vielen schönen Zusatzfeatures ausgestattet wird:
Und mein neuer Blog, den ich mittels Grav selber aufgesetzt habe:
Gemessen auf gut vergleichbaren Artikel-Seiten, ist der Unterschied eklatant: Statt 775 KB kommt man bei fast identischen Inhalten und Funktionen auf 70 KB, also Faktor 10.
Generell gesprochen führt die Verfettung nicht nur zur immer weiteren Verbreitung von AdBlockern, die wiederum zu Finanzierungsproblemen bei manchen Portalen führen kann – andererseits macht uns diese Art der Seiten auch abhängig von großen Bandbreiten. Gerade für Informationen, die mobil benötigt werden, sollte man also immer mal wieder sein Augenmerk auf die Verschlankung der Seite legen.
Ein interessantes Tool zum Überprüfen der Seitengröße ist in Verbindung mit Grunt ist grunt-size-report, mit dem man einfach die Größe von Frontend-Dateien schon beim Entwickeln im Blick behalten kann. Eine typische Ausgabe kann wie folgt aussehen:
~~~~~~~~~~~
Size report
~~~~~~~~~~~
Filename Size %
---------------------------------------------------------------------
/css/style.css 263.5 KiB 25.3%
/fonts/serif_italic/SerifWeb-Italic.woff 94.6 KiB 9.1%
/fonts/serif_bold_italic/SerifWeb-BoldItalic.woff 88.5 KiB 8.5%
/fonts/sans_italic/SansWeb-Italic.woff 84.2 KiB 8.1%
/fonts/serif_bold/SerifWeb-Bold.woff 80.7 KiB 7.8%
/fonts/sans_bold_italic/SansWeb-BoldItalic.woff 78.3 KiB 7.5%
/fonts/serif_regular/SerifWeb-Regular.woff 76.6 KiB 7.4%
/fonts/sans_regular/SansWeb-Regular.woff 72.4 KiB 7.0%
/fonts/sans_bold/SansWeb-Bold.woff 68.4 KiB 6.6%
/fonts/icons/fonts/icons.woff 46.7 KiB 4.5%
/fonts/lt_322/Fonts/694103/0d19a47ca2-bb5.woff 31.9 KiB 3.1%
/fonts/lt_333/Fonts/692221/f5e7241f94-bdd.woff 22.0 KiB 2.1%
/css/normalize.css 19.8 KiB 1.9%
/js/build/scripts.js 5.5 KiB 0.5%
/css/print.css 2.7 KiB 0.3%
/css/tabs.css 2.3 KiB 0.2%
/css/layout.css 2.0 KiB 0.2%
/css/default.css 1.3 KiB 0.1%
=====================================================================
Total: 1.0 MiB
In Zusammenhang mit CSS-Preprocessors verliert man auch gerne aus dem Blick, wie z.B. scheinbar harmlose SCSS/SASS-Schachtelungen im kompilierten CSS dann einige KB an zusätzlichem Code ausmachen können.
Also: Auch während des Entwickelns sollte man die eigene Seite öfter auf die Waage stellen.