fboës - Der Blog

Die Verfettung des Internets

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.

Zur Übersichtsseite