High-Performance für SEO-Ranking und User-Experience mit Weblication®

11.08.2021

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

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

„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

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

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

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

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

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.