Auswirkungen von Frontend-Frameworks auf die Ladezeit

Bei der Entwick­lung von Web­sites stellen Frame­works bere­its fer­tige Lösun­gen für wiederkehrende Stan­dar­d­an­forderun­gen bere­it und ermöglichen eine Reduzierung des erforder­lichen Zeitaufwan­des in der Entwick­lungsphase. Neben Funk­tions­bib­lio­theken wie jQuery, die nur eine Manip­u­la­tion der Ele­mente des DOM erlauben, existieren voll­ständi­ge Fron­tend-Frame­works. Mit diesen wird die Erstel­lung eines Web­de­signs, durch die Bere­it­stel­lung vorge­fer­tigter Kom­po­nen­ten und Gestal­tungsraster, inner­halb kürzester Zeit möglich. Nachteilig wirkt sich dies auf die Dateigröße des Quell­codes und die Per­for­mance aus, da oft nur ein geringer Anteil der über­tra­ge­nen Def­i­n­i­tio­nen und Funk­tio­nen zur Darstel­lung der Web­site effek­tiv genutzt wird [Hog15].

Tom Bark­er unter­sucht in seinem Buch „High Per­for­mance Respon­sive Design“ die Auswirkun­gen von vier unter­schiedlichen Fron­tend-Frame­works auf die Ladezeit. Dabei ver­gle­icht er die mod­u­lar aufge­baut­en Frame­works Boot­strap, Foun­da­tion und Seman­tic UI mit dem CSS-Frame­work Skele­ton CSS in Anbe­tra­cht auf das entste­hende Daten­vol­u­men und die zu erwartende Per­for­mance. Tom Bark­er kommt zu dem Ergeb­nis, dass sich die Ver­wen­dung der Frame­works Boot­strap, Foun­da­tion und Seman­tic UI neg­a­tiv auf die Per­for­mance der Web­seit­en auswirkt und das Daten­vol­u­men durch das Laden nicht genutzter Kom­po­nen­ten und Funk­tio­nen erhöht wird. Seman­tic UI ist das vom Daten­vol­u­men her umfassend­ste Frame­work und bringt eine Steigerung von 448 Kilo­byte mit sich. Boot­strap erhöht das zu über­tra­gende Daten­vol­u­men ein­er Web­seite um 220,6 Kilo­byte und Foun­da­tion um 337,1 Kilo­byte. Jedoch laden diese bei­den Frame­works für alle Web­seit­en und Endgeräte die gle­ichen JavaScript-Bib­lio­theken und Stylesheets. Skele­ton CSS hinge­gen beste­ht auss­chließlich aus Stylesheets und erhöht das Daten­vol­u­men um 13,2 Kilo­byte (siehe Abbil­dung 3.13) [Bar14].

Die Ver­suche von Tom Bark­er haben gezeigt, dass Frame­works durch eine zu geringe Mod­u­lar­ität und die fehlende Berück­sich­ti­gung der Aus­liefer­ung spez­i­fis­ch­er Inhalte für mobile Endgeräte aus Sicht der Per­for­manceop­ti­mierung nicht zu empfehlen sind.