Mobile Performance mit Weblication

Nutzbar ab: Version

Veröffentlichungsdatum: 06. April 2018
Änderungsdatum: 07. Oktober 2020

weblication cms mobile performance ranking bench komprimierung komprimieren gzip

Der Anteil der mobilen Zugriffe steigt kontinuierlich und macht auf manchen Seiten bereits die Hälfte aus. Mobile Performance wird zunehmen für das allgemeine Ranking relevant.

Die Performance Ihrer Webseite ist nicht nur für Ihre Seitenbesucher ein wichtiger Faktor, um länger auf den Seiten zu bleiben. Ebenso wichtig ist dies für das Ranking Ihrer Website bei den wichtigen Suchmaschinen (z.B. Google, Bing, etc.).

Weblication® stellt Ihnen ab Version 13.x weitere wichtige Grundlagen und Werkzeuge zur Verfügung, um für die mobile wie auch Desktop-Ausgabe Ihrer Internetseiten für diese Anforderung vorbereitet zu sein. Der Artikel bezieht sich vorwiegend auf die Projektgrundlage der BASE (Mobile First) (kurz: MBF), auch wenn viele Punkte auch in der BASE Classic umsetzbar sind.

Die Funktionen der Version 13 können Sie übrigens jetzt schon nutzen, indem Sie als angemeldeter Administrator unter aktueller 12.x Version folgenden Pfad zu Ihrer lizenzierten Domain aufrufen:

  /weblication/grid5/scripts/wSystem.php?action=setVersion&version=13

So nutzen Sie bereits mit den Beta-Versionen von CMS-Version 12.x die neuen Funktionen der kommenden Version 13.x. Ab Erscheinen der ersten Final-Version benötigen Sie dann einen Lizenzschlüssel für Version 13.

Werkzeuge zur Performance-Optimierung

Die wichtigsten Werkzeuge zur Performance-Optimierung sind u.a.:

  • Weblication® Seiteninfo
  • Netzwerkanalyse bei Firefox, Chrome, Safari, IE
  • Chrome Lighthouse (Entwickler-Tools / Audits) oder über node.js

Was die Entwicklerwerkzeuge der Browserhersteller angeht, gehen wir in diesem Artikel nicht näher darauf ein. Informieren Sie sich hierzu bitte über die FAQ- und Forumsseiten der entsprechenden Hersteller.

Seitens Weblication® liefert Ihnen die Seiteninfo (siteinfo) wichtige Informationen zu Cache, Netzwerk, Komprimierung, etc.

Weblication® Siteinfo - Geschwindigkeit
Weblication® Siteinfo - Geschwindigkeit

Die im Block "Geschwindigkeit" angezeigten Daten liefern Ihnen eine wichtige Grundlage zur Optimierung Ihrer Webseiten. Performanceprobleme haben Ihre Ursache in den meisten Fällen in den hier gelisteten Punkten. Im allgemeinen sind dies:

  • unkomprimierte Übertragung
  • nicht minimiertes HTML, CSS, JavaScript
  • zu viele einzelne GET-Anfragen
  • nicht ausreichende Bildoptimierung
  • blockieren durch serielles Laden

Folglich sind das die Ansatzpunkte, die Sie bei Optimierungsmaßnahmen zuerst angehen sollten.

  • Übertragung von HTML, CSS und JS komprimieren
    Komprimieren Sie die Antwort über gzip!
    Dies führt in den meisten Fällen zu ca. 90% weniger Datenübertragung.
    Je nach Hosting ist dies nur über HTTP/2 möglich.
  • Minimieren der Dateien
    Über die Projektkonfiguration können Sie in aktueller MBF die Minimierung von HTML, CSS und JavaScript aktivieren.
  • Zusammenführen von Dateien
    Über die Projektkonfiguration können Sie in aktueller MBF das Zusammenführen von CSS- und JavaScript-Dateien aktivieren.

Seiteninfo - Geschwindigkeit

In der Seiteninfo werden Ihnen zur Geschwindigkeit der Webseite folgenden Infos ausgegeben:

  • Cache-Dauer
    Zur aufgerufenen Seite wird Ihnen hier die eingestellte Gültigkeitsdauer des Seitencache angezeigt und ob die Einstellung geerbt wird (siehe auch Online-Doku "Datei-Status - Cache").
  • Netzwerk
    Ausgabe des verwendeten Hypertext Transfer Protocol (HTTP).
    HTTP/2 liefert Ihnen weitaus mehr an Performance als HTTP/1! Sofern noch nicht umgestellt, sollten Sie die Umstellung auf HTTP/2 bei Ihrem Provider veranlassen.
  • Server
    Allgemeine Informationen zum Server, wie z.B. PHP-Version und die Antwortzeit des Servers.
    PHP 7.x bietet eine weitaus besser Performance als ältere PHP-Versionen.
  • HTML
    Ausgabe der Größe der aktuell aufgerufenen HTML-Seite und ob diese minimiert ist und komprimiert übertragen wird.
    Aktuelle BASE 2.x und Mobile First Projekte bieten die Möglichkeit, dies über die Projektkonfiguration einzustellen (HTML minimieren) und nutzen zur Komprimierung die Funktion "ob_gzhandler" über die pre.php.
    Umso kleiner eine HTML-Seite ist, umso schneller wird diese übertragen. Zusätzlich ist die Webseite performanter, wenn die Inhalte minimiert sind und komprimiert übertragen wird.
    Weitere Informationen siehe *Hinweise* unten.
  • CSS
    Informationen zu Cascade Style Sheets (CSS).
    Aktuelle BASE 2.x und Mobile First Projekte bieten die Möglichkeit, über die Projektkonfiguration diverse Optimierungseinstellungen vorzunehmen:
    - CSS-Dateien automatisch zu einer Datei zusammenführen
    - CSS automatisch minimieren
    Um CSS zu komprimieren, sollte dies über den Webserver bzw. htaccess-Dateien definiert sein, was im BASE Projekt über .../layout/.htaccess vorgenommen wird.
    Weitere Informationen siehe *Hinweise* unten.
  • JavaScript
    Informationen zu JavaScript
    Aktuelle BASE 2.x und Mobile First Projekte bieten die Möglichkeit, über die Projektkonfiguration diverse Optimierungseinstellungen vorzunehmen:
    - JavaScript Dateien automatisch zu einer Datei zusammenführen
    - JavaScript Dateien automatisch minimieren
    Um JavaScript zu komprimieren, sollte dies über den Webserver bzw. htaccess-Dateien definiert sein.
    Weitere Informationen siehe *Hinweise* unten.
  • Geladene Bilder
    Ausgabe zur aktuell aufgerufenen Seite, wieviele Bilder mit welcher Größe geladen wurden.
    Über die Schaltfläche "Bildgrößen auf den Bildern anzeigen" erhalten Sie einen Überblick, welche Bilder ggf. zu groß abgelegt bzw. generiert wurden und optimiert werden sollten.
*Hinweise*

Ab CMS-Version 15 berücksichtigt die Abfrage/Anzeige zur Komprimierung auch Redirects (z.B. Projekt-Domain Umleitungen, Ausblenden des Hauptverzeichnisses, etc.). Ebenso wird ein Zwischenschalten von z.B. Security-/Antiviren-Software zwischen Webserver und Browser berücksichtigt, welche ggf. den Inhalt vom Webserver entgegen nehmen und somit schon entpacken (im Header über z.B. X-Content-Encoding-Over-Network: gzip ersichtlich).
Bei Bedarf kommt dann lediglich eine Ausgabe mit Fragezeichen (z.B. HTML komprimiert übertragen ?).

Chrome Lighthouse (Entwickler-Tools / Audits)

Der Chrome Browser bietet in aktuellsten Versionen die Möglichkeit, ein Audit einer Webseite zu erstellen.
Rufen Sie dazu den Bereich für die Entwickler-Werkzeuge auf (unter Windows z.B. mit F12) und wählen Sie dort das Register "Audits".
Sie haben hier die Möglichkeit, eine Prüfung zur aufgerufenen Webseite durchzuführen, welche Ihnen wichtige Informationen zur Performance der Seite liefert.

Aktuelle BASE Classic und Mobile First Projekte liefern bereits im Standard entsprechende Einstellungen zur Performanceoptimierung. Auf das jeweilige Projekt bezogen sind in der Regel individuelle Optimierungsmaßnahmen vorzunehmen, wozu Ihnen dieser Artikel allgemeine Informationen liefert.
Hinsichtlich Einstellungen zum Webserver wenden Sie sich bitte an Ihren Provider bzw. Hosting-Dienstleister.

Performance-Optimierungen
FAQs
Warum wird Mobile Performance für das Ranking immer wichtiger?
Der Anteil mobiler Zugriffe steigt kontinuierlich und macht auf manchen Seiten bereits die Hälfte aus. Dadurch wird Mobile Performance künftig stärker relevant für das allgemeine Ranking bei Suchmaschinen wie Google und Bing.
Welche Bedeutung hat die Performance einer Webseite über die Nutzer hinaus?
Gute Performance hilft, dass Besucher länger auf der Seite bleiben. Gleichzeitig ist sie ein wichtiger Ranking-Faktor bei Suchmaschinen (z. B. Google, Bing, etc.).
Welche neuen Grundlagen und Werkzeuge bietet Weblication ab Version 13.x für Mobile Performance?
Ab Version 13.x stellt Weblication weitere wichtige Grundlagen und Werkzeuge bereit, um Seiten sowohl für die mobile als auch für die Desktop-Ausgabe zu optimieren. Der Artikel bezieht sich vorwiegend auf die Projektgrundlage „MBF“, viele Punkte sind jedoch auch in anderen Umsetzungen nutzbar.
Wie kann ich die Funktionen von Weblication Version 13.x schon in CMS-Version 12.x testen?
Als angemeldeter Administrator können Sie in einer aktuellen 12.x Version unter Ihrer lizenzierten Domain folgenden Pfad aufrufen: */weblication/grid5/scripts/wSystem.php?action=setVersion&version=13*. So nutzen Sie die neuen Funktionen bereits mit Beta-Versionen von 12.x.
Benötige ich für die Final-Version von Weblication 13.x einen Lizenzschlüssel?
Ja. Ab Erscheinen der ersten Final-Version benötigen Sie einen Lizenzschlüssel für Version 13.
Welche wichtigsten Werkzeuge zur Performance-Optimierung nennt der Artikel?
Zu den wichtigsten Werkzeugen gehören: Weblication® Seiteninfo, Netzwerkanalyse in Firefox/Chrome/Safari/IE sowie Chrome Lighthouse (Entwickler-Tools/Audits) entweder im Browser oder über node.js.
Welche Informationen liefert Weblication® „Seiteninfo“ (Siteinfo) zur Performance?
Die Seiteninfo liefert wichtige Informationen zu Themen wie Cache, Netzwerk und Komprimierung. Im Bereich „Geschwindigkeit“ finden Sie Daten, die als Grundlage für Optimierungen dienen.
Welche typischen Ursachen für Performanceprobleme listet die Seiteninfo im Abschnitt „Geschwindigkeit“?
Häufige Ursachen sind u. a.: unkomprimierte Übertragung, nicht minimiertes HTML/CSS/JavaScript, zu viele einzelne GET-Anfragen, nicht ausreichende Bildoptimierung sowie blockierendes serielles Laden.
Was sollte ich bei Optimierungsmaßnahmen zuerst angehen?
Zuerst sollten Sie die Punkte aus der Seiteninfo im Bereich „Geschwindigkeit“ priorisiert bearbeiten, da die meisten Performanceprobleme in den dort gelisteten Bereichen ihre Ursache haben.
Wie kann ich die Antwortkomprimierung (gzip) aktivieren und was bringt das?
Komprimieren Sie die Antwort über gzip. In den meisten Fällen führt das zu etwa 90% weniger Datenübertragung. Abhängig vom Hosting ist dies nur über HTTP/2 möglich.
Wie aktiviere ich in MBF die Minimierung von HTML, CSS und JavaScript?
Über die Projektkonfiguration können Sie in der aktuellen MBF die Minimierung von HTML, CSS und JavaScript aktivieren (für BASE 2.x und Mobile-First Projekte wird dies erwähnt).
Kann ich CSS- und JavaScript-Dateien zusammenführen?
Ja. Über die Projektkonfiguration können Sie in der aktuellen MBF das Zusammenführen von CSS- und JavaScript-Dateien aktivieren.
Welche Werte zeigt die Seiteninfo bei „Cache-Dauer“ an?
Sie sehen die eingestellte Gültigkeitsdauer des Seitencache für die aufgerufene Seite und ob die Einstellung geerbt wird.
Was bedeutet in der Seiteninfo der Punkt „Netzwerk“ (HTTP/2 vs. HTTP/1)?
Die Seiteninfo zeigt das verwendete Hypertext Transfer Protocol. HTTP/2 liefert deutlich mehr Performance als HTTP/1. Falls noch nicht umgestellt, sollten Sie die Umstellung auf HTTP/2 bei Ihrem Provider veranlassen.
Welche Server-Informationen werden in der Seiteninfo angezeigt?
Unter „Server“ werden allgemeine Informationen zum Server angezeigt, z. B. die PHP-Version sowie die Antwortzeit des Servers. PHP 7.x wird als deutlich performanter als ältere PHP-Versionen beschrieben.
Welche Hinweise gibt der Artikel zur HTML-Ausgabe in der Seiteninfo?
Es wird die Größe der aktuell aufgerufenen HTML-Seite angezeigt sowie ob sie minimiert und komprimiert übertragen wird. Je kleiner die HTML-Seite, desto schneller ist die Übertragung; minimierte und komprimierte Inhalte verbessern zusätzlich die Performance. Für BASE 2.x und Mobile-First Projekte wird dies über die Projektkonfiguration bzw. Komprimierung via „ob_gzhandler“ über „pre.php“ ermöglicht.
Wie kann ich CSS in BASE 2.x oder Mobile-First Projekten optimieren (zusammenführen/minimieren)?
Über die Projektkonfiguration können CSS-Dateien automatisch zusammengeführt und automatisch minimiert werden. Für das tatsächliche Komprimieren sollte dies zudem über Webserver bzw. htaccess-Dateien definiert sein (im BASE Projekt über */layout/.htaccess*).
Wie kann ich JavaScript in BASE 2.x oder Mobile-First Projekten optimieren (zusammenführen/minimieren)?
Über die Projektkonfiguration können JavaScript-Dateien automatisch zusammengeführt und automatisch minimiert werden. Für das Komprimieren sollte dies über Webserver bzw. htaccess-Dateien definiert sein.
Wofür ist in der Seiteninfo der Bereich „Geladene Bilder“ nützlich?
Er zeigt, wie viele Bilder auf der Seite geladen wurden und welche Größen dabei auftreten. Über die Schaltfläche „Bildgrößen auf den Bildern anzeigen“ erhalten Sie einen Überblick, welche Bilder ggf. zu groß abgelegt bzw. generiert wurden und daher optimiert werden sollten.
Was ist Chrome Lighthouse und wozu dient es?
Chrome Lighthouse ist ein Audit-Feature im Chrome Browser, das die aufgerufene Webseite prüft und Ihnen wichtige Informationen zur Performance liefert.
Wie führe ich ein Chrome Lighthouse Audit für eine Webseite aus?
Öffnen Sie die Entwickler-Tools (z. B. unter Windows mit F12), wechseln Sie in das Register „Audits“ und führen Sie dort das Audit für die aufgerufene Seite aus.
Welche Projekte liefern bereits im Standard Performanceoptimierungen?
Der Artikel nennt, dass aktuelle BASE- und Mobile-First-Projekte bereits im Standard entsprechende Einstellungen zur Performanceoptimierung mitbringen. Je nach Projekt sind jedoch individuelle Optimierungsmaßnahmen erforderlich (insbesondere projektbezogen).