Kentico Performance Guide

Denn je schneller eine Website lädt, desto besser rankt sie bei Google und somit wird Ihr Produkt besser im Internet aufgefunden. Und was hilft die schönste Website wenn keiner weiß, dass es sie gibt?

Generelle Servereinstellungen

Die Ladezeit einer Website hängt zum Großteil von schlankem Code und Assets ab. Die Einstellungen des Webservers, IIS sind bei Microsoft gut dokumentiert (https://msdn.microsoft.com/en-us/library/ee377050(v=bts.10).aspx). So sollte man z.B. die Kompression aktivieren, da diese in Kentico genutzt werden kann, um den Content schneller auszuliefern. Weitaus wichtiger sind aber die Optimierungen die bereits vor Beginn eines Projektes beginnen.

Planung ist alles – oder der Fisch stinkt vom Kopf her

Nichts ist schlimmer als ein schlecht geplantes Projekt. Sind Developer gut gebrieft, haben Sie das Design oder UI verstanden? Wird ein Projekt agil betrieben und in schaffbare Sprints aufgeteilt? Perfekt! Denn wenn es hier schon hakt, wirkt sich das auf alle weiteren Schritte aus.

Gern vergessene aber wichtige Fragen sind:

• Welche Bildformate brauchen wir?
• Welche JS-Bibliotheken oder Frameworks verwenden wir?
• Haben wir wiederkehrende Elemente identifiziert?
• Sind Animationen und Effekte geplant?

Gerade große Projekte sollten daher genauestens geplant werden.

CSS – Stilvoller coden

Ist das Design konsistent, so sollte CSS es auch sein. Notationsregeln wie ITCSS machen die Codefiles besser wartbar. Ein CSS-Präprozessor wie SCSS in der Entwicklung erleichtert dabei die Segmentierung durch das Aufteilen in mehrere, leicht wart- und überschaubare Dateien.

Dies hilft bei Projekten mit vielen Entwicklungszyklen, Erweiterbarkeit wird gewährleistet und Redundanzen vermieden.

Beherrscht der CSS-Compiler bereits Minifizierung?

Binden Sie die minifizierten CSS-Files mit dem CSS-Webpart von Kentico ein:

Bilder – mundgerecht serviert

Gerade responsive Websites sind häufig bildlastig. Doch großformatige Bildwelten kosten viel Bandbreite. Sorgen Sie dafür, dass der User nur die unbedingt benötigte Bildgröße laden muss.

• Nutzen Sie Tools wie Lazyload um Bilder erst dann einzublenden, wenn Sie auch im Viewport sind
• Source-Sets sind sinnvoll um verschiedene Bildgrößen zu verwalten
• Verwenden Sie SVG für einfache Grafiken und Logos. Die Dateigröße ist meist niedriger als bei PNG z.B. und das Format erlaubt Animationen und Kompression
• 20 Megapixel-JPEGs von der DSLR-Kamera haben im Web nichts verloren, sensibilisieren Sie Ihre Redaktion für Bildgrößen und Dateivolumina

JavaScript

Diese Fragen sollte man sich stellen:

• Brauchen wir wirklich all diese Scripts und Frameworks?
• Muss es z.B. immer Bootstrap sein, wenn man doch einfach nur ein Grid benötigt?
• Gibt es ggf. CSS3-Alternativen für unsere Anforderungen?
• Gerade Tools wie Datepicker oder Slider sind häufig selbst komprimiert noch riesig.
• Lassen sich verwendete Libraries vielleicht anpassen. Entfernen Sie nicht benötigte Funktionen. Zum Beispiel bei modernizr oder Bootstrap.

Binden Sie ihre Scripts über den JavaScript Webpart ein:

Diese können dann über Kentico minified und komprimiert werden.

Falls möglich, sollten alle Scripts in eine Datei zusammengefasst werden – je weniger Requests, desto besser.

Webfonts

Auch zu viele Webfonts verhindern einen schnellen Seitenaufbau.

• Brauchen wir alle Schriftschnitte? (Medium, Bold, Italic, usw.)
• Bei Verwendung einer Iconfont nur die wirklich verwendeten Icons exportieren
• Gegebenenfalls SVGs statt Iconfonts benutzen

Zudem ist darauf zu achten, dass einige Webserver .woff und .woff2 Mimetypes nicht kennen.
Diese können dann nicht vom IIS ausgeliefert werden und müssen erst in der Web.config eingetragen werden:

Kentico-Settings

Einige Kentico-Einstellungen können die Performance Ihrer Website beeinflussen.

Die wichtigsten hat Kentico zusammengestellt in seiner Dokumentation:
https://docs.kentico.com/k9/configuring-kentico/optimizing-website-performance

Die grundsätzlichen Performance-Einstellungen von Kentico sind zu finden unter:

Settings -> System -> Performance

Die wichtigsten Einstellungen erläutern wir im Folgenden.

General

Enable Output Compression
Unbedingt einschalten! Kentico liefert dann das HTML komprimiert an den Browser aus, sofern dieser das unterstützt.

Server Content Caching

Cache page info (minutes)
Richtwert: 10 Minuten. Dauer in Minuten in der Kentico Meta-Informationen vorhält.

Cache content (minutes)
Richtwert: 10 Minuten. Dauer in Minuten, die der Kentico Cache Items und andere Datenbank-Objekte vorhält. Einstellung auf 0 deaktiviert das Content-Caching.

Server file caching

Cache files (minutes)
Richtwert: 10 Minuten.
Zeit in Minuten in der Dateien vom Server vorgehalten werden (z.B. Bilder im Filesystem)

Maximum file size to cache
Wert in Kilobyte. Maximale Dateigröße für Elemente die im Cache bleiben sollen.
Ein Richtwert kann hier 1024 sein (1 Megabyte). Werden zu große Dateien vorgehalten, belastet das den Speicherverbrauch der Website.

Client side file-caching

Client cache (minutes)
Richtwert: 10 Minuten. Gibt dem Browser die Dauer der Validität herunterladenener Elemente (Bilder o.ä.) mit. Nach Ablauf dieser Zeit löscht der Browser den Content im Cache und fordert ihn erneut an.

Allow client cache revalidation
Einschalten. Fordert der Browser abgelaufenen Content an, so muss er diesen re-validieren.

Output caching

Enable output caching
Einschalten! Sorgt dafür, dass ausgeliefertes HTML serverseitig vorgehalten wird.
Aber Vorsicht: Diese Einstellung kann dafür sorgen, dass veralteter Content ausgeliefert wird.

Cache output in file system (minutes)
Richtwert: 10 Minuten. Solange wird HTML von Kentico vorgehalten, bevor es erneut generiert wird.

Resources

Allow resource compression
Einschalten. Hiermit werden Javascript und CSS Files komprimiert ausgeliefert (sofern vom Client unterstützt).

Allow JavaScript minification
Einschalten. Erlaubt das Minifizieren von referenzierten JavaScript-Dateien.

Allow CSS minification
Einschalten. Erlaubt das Minifizieren von referenzierten CSS-Dateien.

CSS Styles

Combine CSS from components
Einschalten. Haben Komponenten wie Widgets und CSS eigene CSS-Files warden diese zusammengefasst. Zur Minimierung von Requests unbedingt aktivieren.

Zusammenfassend lässt sich sagen, dass viele Fehler schon im (Frontend-)Development vermieden werden können. Ein späteres Optimieren ist – wenn überhaupt möglich – sehr zeit- und damit kostenintensiv. Darüber hinaus bietet Kentico out-of -the-box viele Funktionen um performante Websites zu programmieren.

Haben Sie Fragen zur Website-Optimierung oder Websites mit Kentico CMS? Sprechen Sie uns an!