Seitenanalyse

Lighthouse

Lighthouse ist ein Open-Source-Tool zur automatischen Verbesserung der Qualität von Webseiten. Es kann auf jede beliebige Webseite angewendet werden, öffentlich oder mit Authentifizierung. Es bietet Analysen zu Leistung, Barrierefreiheit, progressiven Web-Apps, SEO und mehr.

Es ist als Add-on für Google Chrome und Firefox verfügbar und kann auch über die Kommandozeile ausgeführt werden. Das ist nützlich zum Testen in einer lokalen Entwicklungsumgebung.

Weitere Informationen gibt es auf der Website Chrome for Developers: Lighthouse.

Das Tool kann online über PageSpeed Insights für diese Seite genutzt werden.

Der folgende Screenshot zeigt den ersten Teil des PageSpeed-Insights-Berichts:

Leistungsverbesserungen

Der zweite Teil des Berichts schlägt Methoden zur Leistungsverbesserung vor:

• Ressourcen, die das Rendering blockieren, entfernen – Mögliche Einsparung von 540 ms. Ehrlich gesagt, das ist zu viel Aufwand für zu wenig Nutzen.
• Textkomprimierung aktivieren Mögliche Einsparung von 11 KiB. In der Globalen Konfiguration, im Bereich Server, GZip-Seitenkomprimierung auf Ja setzen. Es bleiben kleine JavaScript- und CSS-Dateien, die noch minimiert und komprimiert werden müssen.
• Ungenutztes CSS reduzieren Mögliche Einsparung von 62 KiB. Die Übeltäter sind template.min.css und joomla-fontawesome.min.css, aber das würde bedeuten, das CSS für jede Seite der Website individuell anzupassen, was zu fehleranfällig und aufwendig für zu wenig Nutzen ist.
• Statische Ressourcen mit einer effizienten Cache-Richtlinie bereitstellen – 21 Ressourcen gefunden. Referenzen bereitgestellt, einschließlich Joomla-spezifischer Referenzen.

Die allgemeine Aussage ist, dass einige Vorschläge sich lohnen umzusetzen, andere jedoch nicht.

Mobil- vs. Desktop-Bericht

Der Desktop-Bericht unterscheidet sich üblicherweise vom Mobil-Bericht. In diesem Fall wurden einige zusätzliche Probleme festgestellt:

• Bilder richtig dimensionieren – Mögliche Einsparung von 48 KiB. Das Bild-Tag ist tatsächlich mit WebP-Bildern in 768 und 1200 Pixel Breite optimiert. Es scheint, dass etwas dazwischen gefragt ist.

Barrierefreiheit

• Links haben keinen erkennbaren Namen Dies bezieht sich auf die Pfeile nach links und rechts am unteren Seitenrand, die vorwärts oder rückwärts navigieren. Der Text wurde weggelassen, um Übersetzungsprobleme zu vermeiden. Muss noch einmal überdacht werden!
• Touch-Ziele haben keine ausreichende Größe oder keinen ausreichenden Abstand Dies bezieht sich auf die Größe der Menüeinträge in der linken und rechten Spalte. Sie benötigen mehr vertikalen Platz – eine CSS-Anpassung ist erforderlich.

Best Practices und SEO

Obwohl beide für Mobil und Desktop den Wert 100 erreicht haben, müssen sie nach jeder Designänderung erneut überprüft werden.

Zusammenfassung

Alle Probleme dieser Website wurden behoben, mit Ausnahme der Zerlegung der CSS-Dateien und der Minimierung der kleinen JavaScript- und CSS-Dateien der Komponente.