Hohe Performance für SEO-Ranking, Nachhaltigkeit und User-Experience mit Weblication®

11. Apr 2024

Die integrierte High-Performance-Technologie in Weblication® hilft, SEO-Rankings zu verbessern. Und sie trägt zum positiven Empfinden Ihrer Website-Besucher bei.

Nachhaltigkeit: Die Weblication® Technologie hilft nicht nur, das SEO-Rankings zu verbessern. Sie reduziert auch den Energiebedarf bei Auslieferung, Übertragung und Anzeige Ihrer Website auf den Endgeräten und trägt so zur Nachhaltigkeit bei.

Grund: Alle Maßnahmen, die die Performance positiv beeinflussen, reduzieren auch die Rechenleistung zur Generierung der Inhaltsseiten und optimieren die übertragene Datenmenge und die Bildgrößen. Außerdem gewährleisten sie, dass Bilder nur im Bedarfsfall und nicht generell beim Seitenaufruf übertragen werden. Darüber hinaus können unerwünschte traffic-generierende Bots ausgeschlossen werden.

Robert Moder, Progressive Media GmbH
Robert Moder, Progressive Media GmbH

„Im Lighthouse Performance-Test von Google kommen neue Weblication Projekte sofort ohne OnPage-Optimierung auf Top-Werte.

Die Technik zur Website-Performance-Steigerung in Weblication ist für uns enorm beeindruckend. Vergleichbares haben wir noch nicht gesehen.“

Robert Moder, Progressive Media GmbH

Alexander Schuster, FIGGE+SCHUSTER AG
Alexander Schuster, FIGGE+SCHUSTER AG

„Aufgrund der verwendeten Techniken und der Vielzahl an Optimierungen erreicht eine Website, die auf Basis von Weblication CMS erstellt wurde, bereits "Out of the box" hervorragende Werte im PageSpeed Insights Test und besteht außerdem den wichtigen Core Web Vitals Test auf Anhieb.

Selbst bei umfangreichen und bildlastigen Websites lassen sich Werte zwischen 90 und 100 Punkten erreichen – das gelingt in dieser Art und Weise mit keinem anderen mir bekannten CMS.."

Alexander Schuster, FIGGE+SCHUSTER AG

Immer schnelle Websites: Der asynchrone Cache in Weblication®

Weblication® bietet immer schnelle Seiten. Hierfür nutzt Weblication® nicht nur einfach einen Cache mit statisch abgelegten Seiten, sondern die Weblication® Technologie des asynchronen Cache: Beim Aufruf einer Seite wird diese zunächst über den Cache - statisch fertig abgelegte Seite - ausgeliefert. Für die Seiten lassen sich bedarfsgerecht bis auf Seitenebene Gültigkeitszeiträume des Cache definieren. Sofern der Cachezeitraum abgelaufen ist, wird im Hintergrund die Seite nach der Auslieferung neu generiert und gecacht - also statisch neu abgelegt.

Mit asynchronem Cache bleibt der gesamte Cachespeicher nach dem Speichern einer Seite zunächst bestehen, und der Cache wird nur für die gerade gespeicherte Seite neu erzeugt. Zur Wahrung der Konsistenz wird nach jedem einzelnen neuen Seitenaufruf aus dem Cache die jeweilige aufgerufene Seite im Hintergrund neu generiert und neu statisch abgelegt - also gecacht. Damit ist gewährleistet, dass Seiten grundsätzlich aus dem Cache schnell ausgeliefert werden und gleichzeitig die Konsistenz der Seiten gewahrt bleibt. Auf Wunsch lässt sich der asynchrone Cache  auch ausschalten, so dass dann der herkömmliche Cache aktiviert ist.

Ohne die Weblication® Technologie des asynchronen Cache müsste zur Wahrung der Konsistenz aller Seiten der Cachespeicher komplett gelöscht und durch spätere Seitenaufrufe wieder neu erzeugt werden, was einen höheren Rechenbedarf erfordert und mehr Energie verbraucht.

Komprimierte Übertragung per GZIP - teils über 90% Einsparung bei Datenübertragung

Weblication® komprimiert den Source-Code vor der Übertragung per GZIP. Dadurch wird die Übertragung der Daten teils um über 90% komprimiert. 

Automatisch die richtige Bildgröße: CSS-Picture Rendering - Weblication® Technologie

Die Weblication® Technologie CSS-Picture-Rendering macht es möglich, dass Bilder automatisch jeweils im Kontext in die dafür erforderliche Größe berechnet werden. Bild hochladen, in Seite einbinden, fertig: Die Bildgrößen berechnet Weblication® automatisch!

Das ist keinesfalls selbstverständlich: Üblicherweise werden in Internet-Auftritten die Bilder in Grafikprogrammen auf die erforderliche Größe gerechnet und dann in den Internet-Auftritt geladen. Das Weblication® CSS-Picture-Rendering erledigt die Umrechnung automatisch für Sie und Sie sparen viel Arbeitszeit.

Ändern Web-Designer z.B. über CSS die Spaltenbreiten, werden automatisch alle Bilder beim jeweils ersten Seitenaufruf nach jeder CSS-Änderung neu berechnet.

Bilder skalieren automatisch in die richtige Bildgröße
Bilder skalieren automatisch in die richtige Bildgröße

Automatische Bildbreitenberechnung über Client-Feedback

Die Bildbreitenberechung geschieht in Weblication® über Client-Feedback. Das bedeutet, dass der Client dem System mitteilt, wie groß die Bilder für die jeweiligen Breakpoints gerendert werden. Dazu findet im Hintergrund eine breakpoint-basierte Breitensimulation statt. Der Redakteur bekommt davon allerdings nichts mit. Das Ergebnis der Breitenberechnungen lässt sich im Panel über Werkzeuge / Bildgrößen aufrufen. Bei Bedarf können dort die existierenden Bildgrößen auch gelöscht bzw. zurückgesetzt werden.

Responsive Bilder: So funktioniert die Breitenberechnung
Responsive Bilder: So funktioniert die Breitenberechnung

Nutzung von WebP für hochoptimierte Bilder

Mit dem Bildformat WebP wird die Größe der Bilddateien ohne Qualitätsverlust teils erheblich reduziert. Ob WebP auf dem Server unterstützt wird, ist unter Systeminformationen ersichtlich.

WebP wird in Weblication® sowohl für Bilder als auch Hintergrundbilder unterstützt. Und auch Listen, Banner und Bildergalerien unterstützen WebP in Weblication® ab Version 15 sowohl für JPG- als auch PNG-Bilder.

Damit WebP genutzt wird, sind bestimmte Einstellungen im Projekt vorzunehmen.

LazyLoading: Bilder laden erst im sichtbaren Bereich

In Weblication® ist bereits im Standard einstellbar, dass Bilder erst nachgeladen werden, wenn diese im sichtbaren Bereich einer Seite erscheinen. Dies verkürzt die Ladezeit der Seiten insbesondere bei Seiten mit vielen Bildern und beim Abruf über Smartphones.

Mobile Performance: Erweitertes LazyLoading

Da auf Desktop-Geräten mit herkömmlichem Internet-Anschluss meist deutlich größere Bandbreiten verfügbar sind, kann für Geräte mit größerer Bildschirmbreite das LazyLoading abgestellt werden, so dass LazyLoading nur bei Zugriff über mobile Geräte - einhergehend mit oft langsamerer Internet-Verbindung - greift.

Art Direction: Geräteabhängige Bilder definieren

In Weblication® lassen sich verschiedene Bildausschnitte für Desktops und mobile Endgeräte vom selben Bild definieren. Beim Einsatz von mobilen Geräten können Bild-Ladezeiten dadurch insbesondere bei geringer Bandbreite erheblich reduziert werden. Insbesondere bei Bannerbildern entfaltet die dadurch mögliche Ladezeitoptimierung ihr volles Potenzial.

Art Direction: Geräteabhängige Bildausschnitte
Art Direction: Geräteabhängige Bildausschnitte

Hintergrundbilder auf mobilen Geräten ausblenden

Um die Ladezeiten auf mobilen Endgeräten zu verbessern, können Hintergrundbilder auf mobilen Endgeräten ausgeblendet werden.

Anzeige Bildgröße und Qualität für Redakteure

Die Seiteninfo in Weblication® können sich Redakteure Bildgröße und Bildqualität auf Bildern direkt anzeigen lassen.

Die Information ist sehr wertvoll, um Ladezeiten zu optimieren, weil häufig zu große Bilder die Performance einer Seite ausbremsen.

Seiteninfo - Anzeige von Bildgröße und Qualität in Seiten
Seiteninfo - Anzeige von Bildgröße und Qualität in Seiten

Performance-Analyse: LCP-Ladezeiten anzeigen

In der Siteinfo im Bedienpanel von Weblication® werden Redakteuren performance-relevante Parameter in ROT angezeigt, die noch Potenzial zur Performanceverbesserung aufweisen.

Seit Mai 2021 berücksichtig Google Web Vitals Werte als Ranking-Faktoren. Es handelt sich dabei um die Werte FCP (First Input Delay), LCP (Largest Contentful Paint) und CLS (Cumulative Layout Shift). Für Projektoptimierungen sind meist nur LCP und CLS relevant. LCP gibt an, wann der größte, also relevanteste Teil der Seite geladen wurde.

In Weblication® können Sie pro Seite in der Siteinfo die LCP Ladezeiten grafisch aufbereitet erkennen und bei Bedarf Gegenmaßnahmen einleiten.

Seiteninfo - Anzeige von Bildgröße und Qualität in Seiten
Seiteninfo - Anzeige von Bildgröße und Qualität in Seiten

Asynchrones Laden von JavaScript-Dateien

JavaScript-Dateien lassen sich asynchron einbinden. Dies verhindert, dass dadurch das Laden der Seite selbst blockiert wird und kann zu einem besseren Performance-Wert beitragen.

Einbetten wichtiger CSS-Definitionen im Kopfbereich

Weblication® erkennt selbständig, welche CSS-Definitionen in der aktuellen Seite verwendet wird und bettet die CSS-Datei im Kopfbereich ein, falls die CSS-Datei nicht bereits bei einem vorherigen Aufruf geladen und somit im Cache verfügbar ist. Durch diese Technik entfällt die Blockierung durch das Laden der gesamten CSS-Datei beim ersten Aufruf.

Videos mit Vorschaubild statt sofortige Anzeige

Damit das Laden von Videos nicht die Ladezeit einer Seite ausbremst, können Vorschaubilder als Platzhalter für Videos angezeigt werden. Damit wird ein Video erst geladen, nachdem ein Besucher auf das Vorschaubild zum Start des Videos klickt.

Nachhaltigkeit und Reduzierung Energiebedarf durch Ausschliessen unnötiger Bots

Ein nicht zu unterschätzender Anteil der Website-Aufrufe erfolgt tatsächlich durch unnötige Aufrufe von oft auch unerwünschten Bots. Weblication® blockiert die Aufrufe von ausgewählten Bots vollständig und reduziert damit den Energiebedarf, der durch Ihre Website erzeugt wird im Vergleich zu einer Website, die diese Technologie nicht nutzt.