Site icon Atelier für 3D-Visualisierungen, V/AR. Produktvisualisierung und Rendering. ❤ r23

Fehlermeldungen im Lighthouse Bericht

Ralf Dreiundzwanzig

Wie viele andere Bloggerinnen und Blogger haben auch wir eine schlechte Sichtbarkeit bei Google. In unserem Blog berichten wir von Zeit zu Zeit über die Maßnahmen, die wir ergreifen, um unsere Sichtbarkeit zu verbessern. Heute geht es um die Fehlermeldungen im Lighthouse-Bericht.

Ein Lighthouse Bericht ist ein Werkzeug von Google, um die Geschwindigkeit und Leistung von Webseiten zu überwachen und zu verbessern. Es analysiert verschiedene Aspekte einer Webseite, wie Ladezeit, Zugänglichkeit, SEO, progressive Web-Apps und Best Practices. Es generiert einen Bericht mit Bewertungen, die Audit-Metriken widerspiegeln, und Vorschlägen zur Optimierung der Webseite. Sie können Lighthouse Berichte mit Chrome DevTools oder anderen Methoden erstellen.

Wie kann ich einen Lighthouse Bericht erstellen?

Es gibt verschiedene Möglichkeiten, einen Lighthouse Bericht zu erstellen. Eine Möglichkeit ist, Lighthouse in Chrome DevTools zu verwenden. Dazu müssen Sie:

Nach einigen Sekunden erhalten Sie einen Bericht mit Bewertungen und Vorschlägen für die Webseite.

Eine andere Möglichkeit ist, Lighthouse als Node Modul zu installieren und von der Kommandozeile auszuführen. Dazu müssen Sie:

Link

Lighthouse overview - Chrome Developers

Fehler: <frame>- oder <iframe>-Elemente haben keinen Titel

Die Fehlermeldung bedeutet, dass Ihre Webseite Frames verwendet, die für Screenreader-Nutzer nicht gut zugänglich sind. Ein Screenreader ist eine Software, die Blinden und Sehbehinderten eine alternative Benutzerschnittstelle anstelle des Textmodus oder anstelle einer grafischen Benutzeroberfläche bietet. Screenreader-Nutzer sind auf Frametitel angewiesen, die die Inhalte von Frames beschreiben.

Um die Fehlermeldung zu beheben, sollten Sie Ihre Webseite barrierefrei gestalten und Frames mit aussagekräftigen Titeln versehen. Sie können auch den EXPERTE.de Barrierefreiheit-Test nutzen, um Ihre Webseite auf Barrierefreiheit zu überprüfen.

Um einem iframe einen Frametitel zu geben, müssen Sie das Attribut title im iframe-Element verwenden. Zum Beispiel:

<iframe src="https://www.youtube.com/embed/123456" title="Ein YouTube-Video"></frame>

Der Frametitel wird dann von Screenreadern vorgelesen und beschreibt den Inhalt des iframes. Sie können auch das Attribut name verwenden, um dem iframe einen Namen zu geben, der in Links referenziert werden kann.

Was ist ARIA?

ARIA ist eine Abkürzung für Accessible Rich Internet Applications. Es handelt sich um eine Reihe von Rollen und Attributen, die vom W3C im Rahmen der Web Accessibility Initiative erarbeitet wurden. Sie definieren Möglichkeiten, um Webinhalte und Webanwendungen (besonders solche, die mit JavaScript entwickelt wurden) für Menschen mit Behinderungen besser zugänglich zu machen.

ARIA ermöglicht es zum Beispiel, Elemente wie Menüs, Tabs, Schieberegler oder Dialogfenster für Screenreader-Nutzer verständlich zu beschreiben und zu bedienen. ARIA ergänzt die semantischen Informationen von HTML und hilft dabei, Barrierefreiheit im Internet zu fördern.

Update Boostrap

Laut der offiziellen Dokumentation ist Bootstrap 4.6.x eine große Überarbeitung des gesamten Projekts. Es gibt einige bemerkenswerte Änderungen, die Sie beachten sollten, bevor Sie das Update durchführen. Zum Beispiel:

Um Bootstrap 4.6.x herunterzuladen, können Sie die kompilierten CSS- und JavaScript-Dateien verwenden oder die Quell-Sass-, JavaScript- und Dokumentationsdateien verwenden. Sie können auch Bootstrap mit einem Paketmanager wie npm installieren. Wenn Sie Beispiele für Bootstrap 4.6.x sehen möchten, können Sie sie hier herunterladen.

Unterschiede zwischen 3.x und 4.6 bei der Navigation?

Ja, es gibt einige Unterschiede zwischen Bootstrap 3.x und 4.6 bei der Navigation. Hier sind einige der wichtigsten:

Sie können mehr über die Unterschiede zwischen Bootstrap 3.x und 4.6 in der Migrationsdokumentation lesen oder sich einige Beispiele für Navigationen in Bootstrap 4.6 ansehen.

Was sind die Vorteile von Flexbox gegenüber Floats?

Flexbox ist ein -Layoutmodell, das eine einfache und saubere Möglichkeit bietet, Elemente in einem Container anzuordnen. Flexbox hat einige Vorteile gegenüber Floats, wie zum Beispiel:

Floats sind eine ältere Methode in CSS, um Elemente links oder rechts zu positionieren. Floats haben einige Nachteile gegenüber Flexbox, wie zum Beispiel:

Wie kann ich Flexbox in meinem Projekt verwenden?

Um Flexbox in Ihrem Projekt zu verwenden, müssen Sie zunächst einen Flex-Container definieren, indem Sie die Eigenschaft display: flex auf das Elternelement der Elemente anwenden, die Sie als Flex-Elemente anordnen möchten. Zum Beispiel:

HTML:

<section class="flex-container">
  <article>...</article>
  <article>...</article>
  <article>...</article>
</section>

CSS:

.flex-container {
  display: flex;
}

Dies bewirkt, dass die <article> -Elemente in einer Reihe angeordnet werden, die sich an die verfügbare Breite des Containers anpasst. Sie können dann verschiedene Eigenschaften auf den Flex-Container oder die Flex-Elemente anwenden, um das Layout weiter anzupassen. Zum Beispiel:

Fehler: Umfangreiche Layoutverschiebungen vermeiden

 <div pseudo="-webkit-input-placeholder" id="placeholder" style="display: block !important;">

Layoutverschiebungen können auftreten, wenn sichtbare Elemente gezwungen werden, sich zu bewegen, weil ein anderes Element plötzlich zur Seite hinzugefügt oder in der Größe geändert wurde.

Eine häufige Ursache für Layoutverschiebungen sind Bilder ohne Abmessungen. Wenn Sie die Breite und Höhe Ihrer Bilder nicht angeben, kann der Browser erst dann den erforderlichen Platz reservieren, wenn er die Abmessungen der Bilder ermittelt hat¹. Das kann dazu führen, dass der Text plötzlich nach unten springt.

Um das zu vermeiden, sollten Sie immer die Breite- und Höhe-Attribute auf Ihren Bildern und Videoelementen angeben. Alternativ können Sie den erforderlichen Platz mit CSS-Aspektverhältnis-Boxen reservieren.

In Ihrem Fall scheint das Problem von dem Element <div pseudo="-webkit-input-placeholder" id="placeholder" style="display: block !important;"> zu kommen. Dieses Element wird wahrscheinlich von einem Ihrer Skripte dynamisch in den DOM eingefügt und verursacht einen Layoutverschiebung.

Sie können versuchen, dieses Element zu entfernen oder seine Position und Größe mit CSS festzulegen, um zu vermeiden, dass es andere Elemente verschiebt. Sie können auch die Chrome DevTools verwenden, um die Layoutverschiebungen auf Ihrer Seite zu visualisieren und zu debuggen.

Fehler: Statische Inhalte mit einer effizienten Cache-Richtlinie bereitstellen 

Die Fehlermeldung "Statische Inhalte mit einer effizienten Cache-Richtlinie bereitstellen" bedeutet, dass Sie die Lebensdauer von statischen Dateien und Skripten, die im Browser eines Nutzers gespeichert werden, optimieren sollten. Dies kann die Ladezeit Ihrer Webseite verkürzen und die PageSpeed-Punktzahl verbessern.

Wenn Sie einen Apache WebServer haben, können Sie die Cache-Richtlinie für Ihre statischen Inhalte mit dem Modul mod_expires einstellen. Dieses Modul ermöglicht es Ihnen, die Ablaufzeit für verschiedene Dateitypen zu definieren, indem Sie den Cache-Control und Expires-Header in der .htaccess-Datei oder in der virtuellen Host-Konfiguration hinzufügen.

Zum Beispiel können Sie die folgenden Zeilen in Ihrer .htaccess-Datei hinzufügen, um die Ablaufzeit für .mp4 und .webp Dateien auf 30 Tage zu setzen:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType /mp4 "access plus 30 days"
  ExpiresByType image/webp "access plus 30 days"
</IfModule>

Sie können auch andere Dateitypen und Zeiträume angeben, je nach Ihren Bedürfnissen. Sie müssen jedoch sicherstellen, dass das Modul mod_expires auf Ihrem Server aktiviert ist. Sie können dies tun, indem Sie den folgenden Befehl ausführen:

sudo a2enmod expires

Und dann den Apache-Server neu starten:

sudo systemctl restart apache2

Fehler: Größe von Tippzielen ist nicht richtig eingestellt 

Die Fehlermeldung "Größe von Tippzielen ist nicht richtig eingestellt" bedeutet, dass Ihre Webseite Elemente enthält, die zu klein oder zu nah beieinander sind, um auf einem mobilen Gerät leicht angetippt werden zu können. Dies kann die Benutzerfreundlichkeit und die PageSpeed-Punktzahl Ihrer Webseite beeinträchtigen.

Um dieses Problem zu beheben, sollten Sie sicherstellen, dass Ihre interaktiven Elemente wie Schaltflächen und Links mindestens 48 x 48 Pixel groß sind und genügend Abstand voneinander haben. Sie können dies tun, indem Sie die CSS-Eigenschaften wie font-size, padding, margin und border für diese Elemente anpassen.

Zum Beispiel können Sie die folgenden Zeilen in Ihrer CSS-Datei hinzufügen oder ändern:

a.next-post, a.previous-post {
  font-size: 18px; /* erhöht die Schriftgröße */
  padding: 10px; /* fügt Abstand innerhalb des Links hinzu */
  margin: 10px; /* fügt Abstand außerhalb des Links hinzu */
  border: 1px solid #ccc; /* fügt einen Rand um den Link hinzu */
}

Wie kann ich meine Webseite noch verbessern?

Es gibt viele Möglichkeiten, wie Sie Ihre Webseite noch verbessern können, je nachdem, welche Ziele Sie verfolgen. Hier sind einige allgemeine Tipps, die Ihnen helfen können, Ihre Webseite zu optimieren:

Das sind nur einige der möglichen Schritte zur Website Optimierung.

Was sind die besten Praktiken für mobile Webseiten?

Um eine mobile Webseite zu erstellen oder zu verbessern, gibt es einige bewährte Praktiken, die Sie befolgen können, wie z.B.:

Wie kann ich meine Webseite für Suchmaschinen optimieren?

Suchmaschinenoptimierung (SEO) ist der Prozess, bei dem Sie Ihre Webseite so gestalten und verbessern, dass sie von den Suchmaschinen wie besser gefunden und bewertet wird. Das Ziel ist es, ein höheres Ranking für relevante Suchbegriffe (Keywords) zu erzielen und mehr Besucher und potenzielle Kunden auf Ihre Webseite zu ziehen.

Um Ihre Webseite für Suchmaschinen zu optimieren, gibt es einige Schritte, die Sie befolgen können, wie z.B.:

Das sind nur einige der möglichen Schritte zur Suchmaschinenoptimierung Ihrer Webseite. Wenn Sie mehr darüber erfahren möchten, können Sie sich auch diese Artikel ansehen:

Das könnte Sie auch interessieren

Wenn Sie Ihren Blog-Erfolg steigern möchten, dann ist das Schreiben, Veröffentlichen und Triumphieren unerlässlich. In diesem Blogbeitrag werden wir Ihnen erklären, wie Sie noch heute mehr Erfolg haben können. Verpassen Sie nicht die Gelegenheit, Ihren Blog in kurzer Zeit zum Erfolg zu führen. Schreiben, veröffentlichen, triumphieren: Steigern Sie Ihren Blog-Erfolg noch heute!

In diesem Blogbeitrag möchte ich Tipps und Tricks vorstellen, die dabei helfen, Leser:innen auf den eigenen Blog anzulocken. Dabei wird es unter anderem um die richtige Vermarktung des Blogs, die Auswahl der richtigen Kanäle, sowie das Erstellen eines attraktiven Layouts gehen. Mit den vorgestellten Strategien können Blogger:innen eine breite Leserschaft aufbauen und ihren Blog erfolgreich machen. Wie man Leser:innen auf seinen Blog anlockt?

Kreativität ist etwas, das viele Menschen begeistert. Es gibt unendlich viele Möglichkeiten, kreativ zu sein, und jeder kann auf seine ganz eigene Art kreativ sein. kann so vieles bedeuten – von der Gestaltung eines neuen Kleidungsstücks bis hin zur Erfindung eines neuen Geschäftsmodells. Kreativität ist die Fähigkeit, etwas Neues zu erschaffen, das bisher noch nicht existiert. Kreativität steigern: Tipps & Tricks

Exit mobile version