Mobile Performance mit Weblication

Nutzbar ab: Version

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.