Fehlermeldungen im Lighthouse Bericht

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:

• Google Chrome für Desktop herunterladen.
• In Google Chrome die URL öffnen, die Sie überprüfen möchten.
• Chrome DevTools öffnen.
• Die Registerkarte Lighthouse auswählen.
• Die Kategorie Leistung auswählen und alle anderen Kategorien abwählen.
• Auf Audit starten klicken.

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:

• Google Chrome für Desktop herunterladen.
• Die aktuelle Long-Term Support Version von Node installieren.
• Lighthouse als globales Modul installieren: npm install -g lighthouse
• Ein Audit durchführen: lighthouse <url>
• Alle Optionen anzeigen: lighthouse --help

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:

• Die HTML-Struktur und die Layout-Stile für benutzerdefinierte und Standard-Checkboxen und Radios wurden neu geschrieben.
• Die CSS für die Verwaltung mehrerer background-image s für benutzerdefinierte Formular-Checkboxen und Radios wurde geändert.
• Der Selektor für input-basierte Button-Gruppen wurde aktualisiert.
• Die .col-form-legend Klasse wurde zugunsten einer leicht verbesserten .col-form-label Klasse entfernt.
• Die $custom-file-text Sass-Variablen für benutzerdefinierte Dateieingaben wurden geändert.

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:

• Bootstrap 4.6 verwendet Flexbox für das Layout, während Bootstrap 3.x Floats verwendet.
• Bootstrap 4.6 hat eine neue Klasse .navbar-expand- {breakpoint} , die die Navbar auf dem angegebenen Breakpoint kollabieren oder erweitern lässt. Bootstrap 3.x hat nur eine Klasse .navbar-fixed-top , die die Navbar immer erweitert lässt.
• Bootstrap 4.6 hat eine neue Komponente .nav-item , die die direkten Kinder von .nav-link s sein müssen. Bootstrap 3.x hat keine solche Komponente.
• Bootstrap 4.6 hat eine neue Komponente .dropdown-menu-right , die das Dropdown-Menü nach rechts ausrichtet. Bootstrap 3.x hat eine Klasse .dropdown-menu-left , die das Dropdown-Menü nach links ausrichtet.
• Bootstrap 4.6 hat eine neue Komponente .navbar-toggler , die einen anpassbaren Schalter für das Kollabieren der Navbar enthält². Bootstrap 3.x hat eine Klasse .navbar-toggle , die einen vorgefertigten Schalter mit drei horizontalen Balken enthält.

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 CSS3-Layoutmodell, das eine einfache und saubere Möglichkeit bietet, Elemente in einem Container anzuordnen. Flexbox hat einige Vorteile gegenüber Floats, wie zum Beispiel:

• Flexbox ermöglicht es, die Elemente entlang einer einzigen Achse auszurichten, die je nach Bedarf horizontal oder vertikal sein kann.
• Flexbox kann die Breite und Höhe der Elemente anpassen, um den verfügbaren freien Platz im Container optimal zu nutzen.
• Flexbox ist responsiv und mobilfreundlich, da es sich automatisch an verschiedene Bildschirmgrößen und -ausrichtungen anpasst.
• Flexbox vereinfacht die Positionierung von Kinderelementen im Container, ohne dass zusätzliche Eigenschaften wie margin oder padding erforderlich sind.
• Flexbox kann die Reihenfolge der Elemente auf der Webseite ändern, ohne Änderungen im HTML vornehmen zu müssen.

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

• Floats erfordern oft zusätzliche Elemente wie clear oder overflow, um Layoutprobleme zu vermeiden.
• Floats können nur Elemente horizontal ausrichten, nicht vertikal.
• Floats können die Breite und Höhe der Elemente nicht automatisch anpassen, um den verfügbaren freien Platz im Container optimal zu nutzen.
• Floats sind nicht responsiv und mobilfreundlich, da sie sich nicht automatisch an verschiedene Bildschirmgrößen und -ausrichtungen anpassen.
• Floats können die Reihenfolge der Elemente auf der Webseite nicht ändern, ohne Änderungen im HTML vornehmen zu müssen.

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:

• Um die Richtung der Flex-Reihe zu ändern, können Sie die Eigenschaft flex-direction verwenden. Zum Beispiel: flex-direction: column , um die Elemente in einer Spalte anzuordnen.
• Um den Abstand zwischen den Flex-Elementen zu steuern, können Sie die Eigenschaft justify-content verwenden. Zum Beispiel: justify-content: space-between , um einen gleichen Abstand zwischen den Elementen zu erzeugen.
• Um die Größe der Flex-Elemente anzupassen, können Sie die Eigenschaft flex-basis , flex-grow oder flex-shrink verwenden. Zum Beispiel: flex-basis: 200px , um die Basisbreite der Elemente auf 200 Pixel festzulegen.

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 video/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:

• Metadaten optimieren: Metadaten sind Informationen, die den Suchmaschinen und den Nutzern beschreiben, worum es auf Ihrer Webseite geht. Dazu gehören der Titel, die Beschreibung und die Keywords Ihrer Seite. Sie sollten diese Metadaten so gestalten, dass sie relevant, eindeutig und ansprechend sind.
• Crawling ermöglichen: Crawling ist der Prozess, bei dem die Suchmaschinen Ihre Webseite besuchen und indexieren. Um das Crawling zu ermöglichen, sollten Sie eine robots.txt-Datei und eine XML-Sitemap erstellen, die den Suchmaschinen mitteilen, welche Seiten Ihrer Webseite sie besuchen und indexieren dürfen.
• Ladezeit optimieren: Die Ladezeit ist die Zeit, die Ihre Webseite benötigt, um vollständig geladen zu werden. Eine schnelle Ladezeit ist wichtig für die Nutzererfahrung und das Ranking Ihrer Webseite. Um die Ladezeit zu optimieren, sollten Sie die Größe und Anzahl Ihrer Bilder und Skripte reduzieren, den Browser-Cache nutzen und einen schnellen Server wählen.
• Sprechende URLs nutzen: Sprechende URLs sind URLs, die den Inhalt Ihrer Seite beschreiben und für die Nutzer und die Suchmaschinen leicht verständlich sind. Zum Beispiel ist https://www.example.com/blog/website-verbessern eine bessere URL als https://www.example.com/?p=123. Um sprechende URLs zu nutzen, sollten Sie kurze, relevante und beschreibende Wörter verwenden und Bindestriche statt Unterstriche zur Trennung nutzen.
• Mobile Optimierung: Mobile Optimierung bedeutet, dass Ihre Webseite auf mobilen Geräten wie Smartphones oder Tablets gut funktioniert und angezeigt wird. Da immer mehr Nutzer das Internet über mobile Geräte nutzen, ist dies ein wichtiger Faktor für die Nutzererfahrung und das Ranking Ihrer Webseite. Um Ihre Webseite für mobile Geräte zu optimieren, sollten Sie ein responsives Design verwenden, das sich automatisch an die Bildschirmgröße anpasst.
• Interne Verlinkungen: Interne Verlinkungen sind Links, die von einer Seite Ihrer Webseite zu einer anderen Seite Ihrer Webseite führen. Sie helfen den Nutzern und den Suchmaschinen, sich auf Ihrer Webseite zu orientieren und relevante Inhalte zu finden. Um interne Verlinkungen zu nutzen, sollten Sie sinnvolle und natürliche Links einfügen, die einen Mehrwert für Ihre Nutzer bieten.

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.:

• Verwenden Sie ein responsives Design, das sich an verschiedene Bildschirmgrößen und -auflösungen anpasst
• Vermeiden Sie Technologien, die auf mobilen Geräten nicht unterstützt werden
• Optimieren Sie die Ladezeit Ihrer Webseite, indem Sie die Größe und Anzahl Ihrer Bilder und Skripte reduzieren, den Browser-Cache nutzen und einen schnellen Server wählen
• Achten Sie auf das Aussehen Ihrer Webseite, indem Sie klare und lesbare Schriftarten, Farben und Layouts verwenden
• Aktivieren Sie Accelerated Mobile Pages (AMP), um Ihre Webseite schneller und benutzerfreundlicher zu machen
• Nutzen Sie Media Queries, um verschiedene CSS-Stile für verschiedene Bildschirmbreiten anzuwenden
• Optimieren Sie Ihre Bilder, indem Sie sie komprimieren, skalieren und in geeigneten Formaten speichern
• Verwenden Sie Prozente statt Pixel, um die Breite und Höhe Ihrer Elemente relativ zum Bildschirm anzugeben
• Geben Sie Ihren Links genügend Platz, damit sie leicht angetippt werden können
• Optimieren Sie die Platzierung Ihrer Schaltflächen, damit sie gut sichtbar und erreichbar sind
• Reduzieren Sie die Anzahl der Pop-ups, die Ihre Webseite stören oder verdecken können
• Verwenden Sie den Viewport Meta Tag, um den Browsern mitzuteilen, wie sie Ihre Webseite skalieren sollen
• Schalten Sie die Autokorrektur auf Ihren Formularen aus, um Frustrationen bei den Nutzern zu vermeiden

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 Google 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.:

• Analysieren Sie Ihre Webseite: Überprüfen Sie den aktuellen Zustand Ihrer Webseite, z.B. die Ladezeit, die Struktur, den Inhalt, die Metadaten, die Sicherheit und die Mobilfreundlichkeit. Sie können dafür verschiedene Tools wie Google PageSpeed Insights, Google Search Console oder Google Analytics verwenden.
• Überprüfen Sie die Seiten von Wettbewerbern: Schauen Sie sich an, wie Ihre Konkurrenten ihre Webseiten gestalten und welche Keywords sie verwenden. Sie können dafür Tools wie Alexa oder Ahrefs verwenden.
• Keywords recherchieren: Finden Sie heraus, welche Keywords Ihre Zielgruppe verwendet, um nach Ihrem Angebot zu suchen. Sie können dafür Tools wie Google Keyword Planner oder Ubersuggest verwenden.
• Strategische Platzierung der Keywords: Integrieren Sie Ihre Keywords in Ihre Webseitentexte, Titel, Überschriften, Metadaten und URLs. Achten Sie darauf, dass Sie die Keywords natürlich und sinnvoll verwenden und nicht übertreiben (Keyword-Stuffing).
• Nutzen Sie Meta- und Titel-Tags: Meta- und Titel-Tags sind Informationen, die den Suchmaschinen und den Nutzern beschreiben, worum es auf Ihrer Seite geht. Sie sollten diese Tags so gestalten, dass sie relevant, eindeutig und ansprechend sind.
• Erstellen Sie Traffic-Reports: Messen Sie regelmäßig die Leistung Ihrer Webseite, z.B. die Anzahl der Besucher, die Absprungrate, die Verweildauer, die Konversionsrate und das Ranking. Sie können dafür Tools wie Google Analytics oder Google Search Console verwenden.
• Stellen Sie ständig neue Inhalte zur Verfügung: Erstellen Sie hochwertige und nützliche Inhalte für Ihre Zielgruppe, z.B. Blogartikel, E-Books, Videos oder Infografiken. Aktualisieren Sie auch Ihre bestehenden Inhalte regelmäßig.
• Backlinks aufbauen: Backlinks sind Links von anderen Webseiten zu Ihrer Webseite. Sie signalisieren den Suchmaschinen, dass Ihre Webseite vertrauenswürdig und relevant ist. Um Backlinks zu bekommen, können Sie z.B. Gastbeiträge schreiben, Pressemitteilungen veröffentlichen oder Influencer ansprechen.

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:

• Wie optimiere ich meine Website für Suchmaschinen? – THiiiNK
• Website Optimierung für Suchmaschinen [7 Tipps für Anfänger] – Optimerch
• Startleitfaden zur Suchmaschinenoptimierung (SEO) – Google Help

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. Kreativität 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

---