Beheben Sie das PageSpeed-Problem „Tap-Ziele haben nicht die richtige Größe“ für Ihre WordPress-Website

Wenn Sie von Google PageSpeed ​​Insights schon einmal die Warnung „Tippziele haben nicht die richtige Größe“ erhalten haben , sind Sie nicht allein. Dieses Problem bedeutet, dass Ihre Links, Schaltflächen oder andere anklickbare Elemente zu klein oder zu eng beieinander liegen, wodurch sie für Nutzer, insbesondere auf Mobilgeräten, schwer anzutippen sind. Dies kann die Benutzerfreundlichkeit Ihrer Website beeinträchtigen und sich negativ auf Ihre Bewertung der Mobilfreundlichkeit auswirken .

Zum Glück lässt sich das Problem beheben. Sie müssen die Größe Ihrer Tippziele anpassen und den Abstand zwischen ihnen vergrößern. Dies hilft nicht nur bei Googles Tests zur Mobilfreundlichkeit, sondern verbessert auch die Nutzererfahrung auf allen Geräten. Im Folgenden finden Sie einige einfache Lösungsansätze.

Was ist das PageSpeed-Problem „Tap Targets Are Not Sized Likely“?

Das PageSpeed-Problem „Nicht optimal dimensionierte Tippziele“ ist ein häufiges Problem, das die Benutzerfreundlichkeit von Websites, insbesondere auf Mobilgeräten, beeinträchtigt. Es tritt auf, wenn interaktive Elemente auf einer Webseite, wie Schaltflächen, Links und Formulareingabefelder (zusammenfassend als „Tippziele“ bezeichnet), zu klein oder zu eng beieinander liegen, um auf einem Touchscreen-Gerät einfach und präzise mit dem Finger angetippt werden zu können. Eine Möglichkeit, dieses Problem zu beheben, ist die Beauftragung von Dienstleistungen zur Website-Geschwindigkeitsoptimierung.

Bei WordPress-Designist es entscheidend, die unterschiedlichen Bildschirmgrößen und Eingabemethoden der Besucher zu berücksichtigen. Während Desktop-Nutzer mit einer Maus problemlos auf kleine oder eng beieinander liegende Elemente klicken können, sind mobile Nutzer auf ihre Finger angewiesen, die weniger präzise sind. Die Warnung „Tippziele sind nicht angemessen dimensioniert“ weist darauf hin, dass das Seitenlayout für mobile Nutzer möglicherweise schwer zu navigieren und effektiv zu bedienen ist.

Warum kleine Klickziele zu Frustration und verlorenen Konversionen führen

Für mobile Nutzer können kleine oder zu eng beieinander liegende Tippfelder erhebliche Usability-Probleme verursachen. Sind interaktive Elemente schwer anzutippen, klicken Nutzer möglicherweise versehentlich auf den falschen Button, haben Schwierigkeiten, die gewünschte Option auszuwählen, oder müssen in die Seite hineinzoomen, um mit ihr zu interagieren. Diese Frustrationen können zu einer schlechteren Nutzererfahrung, höheren Absprungratenund Umsatzeinbußen führen.

Googles PageSpeed ​​Insights weist auf dieses Problem hin, da die Mobilfreundlichkeit entscheidend ist. Da der Großteil des Web-Traffics von Mobilgeräten stammt, ist es unerlässlich, Websites so zu gestalten, dass sie auf kleinen Bildschirmen einfach zu bedienen sind.

Gründlich lesen: WordPress-Website-Bearbeitung: Ein umfassender Leitfaden für Anfänger

Behebung des PageSpeed-Problems „Nicht angemessen dimensionierte Tap-Ziele“

Die Behebung des Problems „Tippziele haben nicht die richtige Größe“ dient der Verbesserung der mobilen Benutzerfreundlichkeit. Durch Anpassen von Größe und Abstand interaktiver Elemente stellen Sie sicher, dass Nutzer Schaltflächen, Links und Formulare problemlos und ohne Frustration antippen können.

Hier erfahren Sie, wie Sie Ihre Website für ein besseres mobiles Nutzererlebnis optimieren können.

Verstehen, was Tap-Ziele sind und warum sie für PageSpeed ​​Insights wichtig sind

Interaktionsziele sind Bereiche einer Webseite, mit denen Nutzer interagieren können, wie z. B. Schaltflächen, Linksund Formularfelder. Im mobilen Design müssen diese Elemente groß genug und ausreichend voneinander entfernt sein, um eine einfache Bedienung ohne versehentliche Berührungen zu gewährleisten.

Warum Tippziele für PageSpeed ​​Insights wichtig sind:

• Benutzererfahrung: Richtig dimensionierte Tippziele verbessern die Navigation und reduzieren die Frustration der Benutzer, insbesondere auf Mobilgeräten.

• Mobilfreundlichkeit: PageSpeed ​​Insights berücksichtigt die Mobilfreundlichkeit als Rankingfaktor, wobei die Größe des Tippziels eine wichtige Komponente darstellt.

• Barrierefreiheit: Eine angemessene Größe und ein ausreichender Abstand der Tippziele machen Websites für Nutzer mit motorischen Einschränkungen oder größeren Fingern besser zugänglich.

• Leistungswahrnehmung: Ein gutes Tippzieldesign hat zwar keinen direkten Einfluss auf die Seitenladegeschwindigkeit , trägt aber zur insgesamt wahrgenommenen Leistung und Benutzerfreundlichkeit einer Website bei

Warum Tippziele für PageSpeed ​​Insights wichtig sind:

• Benutzererfahrung: Richtig dimensionierte Tippziele verbessern die Navigation und reduzieren die Frustration der Benutzer, insbesondere auf Mobilgeräten.

• Mobilfreundlichkeit: PageSpeed ​​Insights berücksichtigt die Mobilfreundlichkeit als Rankingfaktor, wobei die Größe des Tippziels eine wichtige Komponente darstellt.

• Barrierefreiheit: Eine angemessene Größe und ein ausreichender Abstand der Tippziele machen Websites für Nutzer mit motorischen Einschränkungen oder größeren Fingern besser zugänglich.

• Leistungswahrnehmung: Ein gutes Tippzieldesign hat zwar keinen direkten Einfluss auf die Seitenladegeschwindigkeit , trägt aber zur insgesamt wahrgenommenen Leistung und Benutzerfreundlichkeit einer Website bei

PageSpeed ​​Insights bewertet Tippziele anhand ihrer Größe und Nähe. Es empfiehlt:

• Eine Mindestgröße von 48×48 Pixeln für Tippziele
• Mindestens 8 Pixel Abstand zwischen den Tippzielen

Durch die Optimierung des Designs von Tippzielen kann Ihre PageSpeed ​​Insights-Punktzahl im Bereich „Mobile Benutzerfreundlichkeit“ gesteigert werden, was zu besseren Gesamtleistungsbewertungen und potenziell höheren Suchmaschinenplatzierungen beiträgt.

• Eine Mindestgröße von 48×48 Pixeln für Tippziele
• Mindestens 8 Pixel Abstand zwischen den Tippzielen

Durch die Optimierung des Designs von Tippzielen kann Ihre PageSpeed ​​Insights-Punktzahl im Bereich „Mobile Benutzerfreundlichkeit“ gesteigert werden, was zu besseren Gesamtleistungsbewertungen und potenziell höheren Suchmaschinenplatzierungen beiträgt.

Weiterlesen: Die schnellsten WordPress-Themes (mit PageSpeed-Werten)

Optimale Benutzerfreundlichkeit durch 48 x 48 Pixel große Tippziele gewährleisten

Die Richtlinie von 48 x 48 Pixeln für Tippziele ist ein weithin anerkannter Standard im mobilen Webdesign. Hier erfahren Sie, warum diese Größe wichtig ist und wie sie zu optimaler Benutzerfreundlichkeit beiträgt:

• Fingerfreundliches Design: Die durchschnittliche Fingerspitze eines Erwachsenen ist etwa 10 mm breit, was auf vielen Mobilgeräten ungefähr 48 Pixeln entspricht. Diese Größe gewährleistet, dass die meisten Nutzer Schaltflächen und Links bequem antippen können, ohne versehentlich benachbarte Elemente zu berühren.

• Geringere Fehlerraten: Größere Tippflächen verringern die Wahrscheinlichkeit von Fehltippungen, verbessern die Genauigkeit der Nutzer und reduzieren Frustration. Dies ist besonders wichtig für Aufgaben, die präzise Interaktionen erfordern, wie z. B. das Ausfüllen von Formularen oder die Navigation.

• Barrierefreiheit: Die Größe von 48px entspricht den Richtlinien für barrierefreie Webinhalte (WCAG)und macht Ihre Website somit besser nutzbar für Menschen mit motorischen Einschränkungen oder größeren Fingern.

• Verbessertes mobiles Erlebnis: Auf kleineren Bildschirmen tragen ausreichend große Tippziele wesentlich zu einem reibungslosen, frustfreien mobilen Erlebnis bei und fördern längere Besuche auf der Website sowie eine stärkere Interaktion.

• Geräteübergreifende Konsistenz: Diese Größe eignet sich gut für verschiedene Gerätegrößen und Auflösungen und gewährleistet so ein einheitliches Benutzererlebnis von kleinen Smartphones bis hin zu größeren Tablets.

• Optimierung von Touch vs. Maus: Während Mauszeiger kleinere Ziele präzise anklicken können, benötigen Touch-Interaktionen größere Ziele für eine komfortable Nutzung. Daher ist 48px ein guter Kompromiss für beides.

• Visuelle Klarheit: Größere Tippflächen ermöglichen oft klarere, besser lesbare Texte und Symbole in Schaltflächen und Links und verbessern so die gesamte visuelle Kommunikation.

Tipps zur Umsetzung:

• Verwenden Sie CSS , um Mindestbreiten und -höhen für interaktive Elemente festzulegen.
• Um ein versehentliches Antippen benachbarter Elemente zu verhindern, muss ein ausreichender Abstand zwischen den Tippzielen (mindestens 8px) gewährleistet sein.
• Erwägen Sie die Verwendung von Padding, um die antippbare Fläche zu vergrößern, ohne die visuelle Größe der Elemente unbedingt zu erhöhen.

Durch die Einhaltung der 48px x 48px-Richtlinie schaffen Sie eine benutzerfreundlichere, zugänglichere und effizientere mobile Benutzeroberfläche, was zu einer höheren Benutzerzufriedenheit und potenziell besseren Konversionsraten führt.

So vergrößern Sie die Schaltflächengröße in WordPress über den Customizer

Der WordPress Customizer bietet eine benutzerfreundliche Möglichkeit, das Erscheinungsbild Ihrer Website anzupassen, einschließlich der Schaltflächengrößen. Hier finden Sie eine Schritt-für-Schritt-Anleitung:

Beginnen Sie mit dem Zugriff auf den WordPress Customizer, mit dem Sie Live-Änderungen am Erscheinungsbild Ihrer Website vornehmen können:

• Melden Sie sich in Ihrem WordPress-Admin-Dashboard
• Navigieren Sie zu „Design“ ⟶ „Anpassen“ in der linken Seitenleiste
• Der Customizer wird geöffnet und zeigt eine Live-Vorschau Ihrer Website an

Suchen Sie als Nächstes die spezifischen Einstellungen für Schaltflächen, die je nach Theme in verschiedenen Abschnitten zu finden sein können:

• Suchen Sie nach Abschnitten mit der Bezeichnung „Schaltflächen“ oder „Typografie“.
• Überprüfen Sie die globalen Stile oder die Designoptionen, falls diese nicht sofort sichtbar sind
• Beachten Sie, dass die genauen Orte je nach Thema variieren können

Weiterlesen: WordPress-Website-Bearbeitung: Ein umfassender Leitfaden für Anfänger

Sobald Sie die Schaltflächeneinstellungen gefunden haben, können Sie verschiedene Eigenschaften anpassen, um deren Größe zu erhöhen:

• Gewichtung: Erhöht die Textstärke und hebt so die Schaltflächen besser hervor.
• Zeilenhöhe: Passt den vertikalen Abstand an und kann so die Schaltflächen höher machen.
• Buchstabenabstand: Ändert den horizontalen Abstand zwischen den Zeichen und vergrößert die Schaltflächen
• Innenabstand: Falls verfügbar, vergrößert dieser den Abstand um den Text herum und damit die gesamte Schaltfläche.

Achten Sie beim Ändern der Größen auf die Live-Vorschau, um sicherzustellen, dass die neuen Größen gut aussehen:

• Überprüfen Sie die Schaltflächen auf verschiedenen Seiten Ihrer Website
• Prüfen Sie, ob größere Formate Ihr Gesamtlayout nicht beeinträchtigen
• Stellen Sie sicher, dass der Text innerhalb der Schaltflächen zentriert und lesbar bleibt

Nachdem Sie die Einstellungen nach Ihren Wünschen angepasst haben, wenden Sie die Änderungen an, um sie zu aktivieren:

• Überprüfen Sie alle Änderungen ein letztes Mal
• Klicken Sie auf die „Veröffentlichen“ oder „Speichern & Veröffentlichen“ , die sich normalerweise oben im Customizer befindet.
• Ihre neuen, größeren Schaltflächen sind jetzt für alle Website-Besucher sichtbar

Weiterlesen: Eigene WordPress-Themes von Grund auf erstellen

Die Größe von Links in WordPress erhöhen, um sicherzustellen, dass sie leicht anklickbar sind

Die Klickbarkeit von Links zu verbessern, ist ein einfacher, aber entscheidender Aspekt der Benutzerfreundlichkeit. Größere Links fallen besser ins Auge und sind für Besucher leichter zu bedienen, was die Navigation insgesamt optimiert. WordPress bietet verschiedene Möglichkeiten, dies zu erreichen.

• Wählen Sie den Link aus und ändern Sie dessen Überschriftenebene in H1 oder H2, um die Schriftgröße sofort zu vergrößern.
• Nutzen Sie die Blockeinstellungen im Abschnitt Typografie, um die Linkgröße präziser zu steuern.
• Sorgen Sie für Einheitlichkeit über alle Links hinweg, um ein konsistentes Design und eine nahtlose Benutzererfahrung zu gewährleisten.

Weiterlesen: Schritt-für-Schritt-Anleitung zum Erstellen benutzerdefinierter Blöcke in WordPress

Wie man Zeilenhöhe und Buchstabenabstand nutzt, um Tippziele besser zugänglich zu machen

Tippziele wie Schaltflächen und Links sollten für alle Nutzer unabhängig von Gerät oder körperlichen Einschränkungen leicht anklickbar sein. Durch Anpassen der Zeilenhöhe und des Buchstabenabstands lassen sich Tippziele besser erreichen, ohne das Erscheinungsbild Ihres Designs zu beeinträchtigen.

• Durch Vergrößern Sie die Linienhöhe, um mehr vertikalen Raum zu schaffen und so die Tippziele leichter erreichbar zu machen.
• Passen Sie den Buchstabenabstand an, um den klickbaren Bereich horizontal zu vergrößern.
• Nutzen Sie diese Anpassungen, um Barrierefreiheit mit einem optisch ansprechenden Design in Einklang zu bringen.

Siehe auch: Wie beeinflusst die x-Höhe ein Schriftdesign?

Stellen Sie Konsistenz sicher, indem Sie die Größe der Tippziele auf allen Seiten Ihrer Website überprüfen

Nachdem Sie die Größe Ihrer Tippziele erhöht haben, ist es entscheidend, dass diese Änderungen auf Ihrer gesamten Website einheitlich angewendet werden. Unterschiedliche Tippzielgrößen können die Benutzerfreundlichkeit beeinträchtigen und zu Frustration führen.

• Überprüfen Sie alle Seiten, einschließlich Blogbeiträge, Homepage und Produktseiten, auf einheitliche Zielgrößen für die Gewindebohrungen.
• Um Verwirrung bei den Nutzern zu vermeiden, sollten Link- und Schaltflächengrößen einheitlich gestaltet werden.
• Für eine einheitliche Gestaltung ist eine vorhersehbare und benutzerfreundliche Oberfläche unerlässlich.

Weiterlesen: Gutenberg 14.8 überarbeitet die Benutzeroberfläche des Website-Editors und fügt ein Stylebook hinzu.

Vergrößern Sie den Abstand zwischen den Tippzielen, indem Sie die Padding-Eigenschaft in WordPress anpassen

Neben der Vergrößerung der Tippfläche ist ein angemessener Abstand für die Benutzerfreundlichkeit entscheidend. Durch Anpassen des Abstands um Schaltflächen und Links lassen sich versehentliche Klicks reduzieren und die Benutzerfreundlichkeit verbessern.

• Mit der Padding-Einstellung im WordPress Customizer können Sie um Links und Schaltflächen herum mehr Abstand hinzufügen.
• Für einen optimalen Abstand sollten Sie auf allen Seiten mindestens 10 Pixel Abstand einplanen.
• Passen Sie die Abstände entsprechend Ihrem Design und den Bedürfnissen Ihrer Nutzer an, um ein ausgewogenes Verhältnis zwischen Platzbedarf und Layout zu gewährleisten.

Fügen Sie mit dem WordPress-Abstandshalterblock zusätzlichen Abstand zwischen den Tippzielen hinzu

Sind Schaltflächen oder Links zu nah beieinander, kann zusätzlicher Abstand die Bedienbarkeit verbessern. Der WordPress-Abstandsblock bietet eine einfache Möglichkeit, Leerraum zwischen Elementen einzufügen, ohne das Design zu beeinträchtigen.

• Setzen Sie einen Abstandshalter zwischen eng beieinander liegende Gewindebohrer ein.
• Passen Sie die Höhe des Abstandhalters an, um eine atmungsaktivere Konstruktion zu erzielen.
• Verwenden Sie diese Methode für gestapelte Elemente oder Bereiche, in denen Änderungen des Innenabstands das Layout beeinflussen würden.

Vorschau der Änderungen auf verschiedenen Geräten, um sicherzustellen, dass die Tippziele die richtige Größe und den richtigen Abstand haben

Nach Änderungen an Größe und Abstand der Tippziele ist es unerlässlich, diese auf verschiedenen Geräten zu testen. Was auf einem Desktop-Computer gut aussieht, funktioniert möglicherweise nicht optimal auf einem Smartphone oder Tablet.

• Testen Sie Ihre Website in der Vorschau auf Mobiltelefonen, Tablets und Desktop-Computern, um sicherzustellen, dass die Tippziele weiterhin anklickbar sind.
• Nutzen Sie die responsive Vorschau von WordPress oder testen Sie auf echten Geräten, um eine genaue Darstellung zu erhalten.
• Nehmen Sie gegebenenfalls Anpassungen vor, je nachdem, wie die Tippziele auf verschiedenen Bildschirmgrößen dargestellt werden.

Weiterlesen: Die besten Vorlagen für Website-Entwicklungsangebote, die Ihren Bedürfnissen entsprechen

Testen Sie Ihre Website mit Google PageSpeed ​​Insights, um zu bestätigen, dass die Korrektur erfolgreich war

Um zu überprüfen, ob Ihre Änderungen die Benutzerfreundlichkeit verbessert haben, führen Sie einen Test Ihrer Website mit Google PageSpeed ​​Insights durch. Dieses Tool prüft, ob Ihre Tippziele den Google-Standards für mobile Optimierung entsprechen.

• Führen Sie eine Analyse Ihrer Website mit Google PageSpeed ​​Insights , um die Größe der Tippziele zu testen.
• Prüfen Sie im Auditergebnis, ob die Tap-Ziele nicht angemessen dimensioniert sind
• Wenn das Problem behoben ist, waren Ihre Anpassungen erfolgreich.
• Falls nicht, überprüfen und passen Sie die Größe und den Abstand Ihrer Tippziele gegebenenfalls an, bis das Problem behoben ist.

Weiterlesen: Die besten Website-Audit-Tools für SEO

Abschluss

Die Optimierung Ihrer Website für mobile Endgeräte durch Behebung des Problems „Tippziele haben nicht die richtige Größe“ dient nicht nur dazu, Google zufriedenzustellen, sondern vor allem dazu, jedem Besucher ein reibungsloseres und intuitiveres Erlebnis zu bieten.

Die Optimierung der Nutzererfahrung durch einfache Anpassungen wie die Vergrößerung der Tippziele und die Vergrößerung der Abstände trägt dazu bei, dass Ihre Website auf allen Geräten zugänglich, ansprechend und funktional bleibt. Letztendlich zahlt sich der Aufwand für diese Optimierungen durch höhere Konversionsraten und eine gesteigerte Nutzerzufriedenheit aus.