Løs PageSpeed-problemet med "Trykmål har ikke den korrekte størrelse" på dit WordPress-websted

Hvis du nogensinde har fået advarslen "Trykmålene er ikke i den rigtige størrelse" fra Google PageSpeed ​​Insights, er du ikke alene. Dette problem betyder, at dine links, knapper eller andre klikbare elementer er for små eller for tæt på hinanden, hvilket gør dem svære for brugerne at trykke på, især på mobile enheder. Det kan skade dit websteds brugervenlighed og påvirke din mobilvenlighedsscore .

Heldigvis er det muligt at løse det. Du skal justere størrelsen på dine trykpunkter og tilføje lidt afstand mellem dem. Dette hjælper ikke kun med Googles mobilvenlighedstest, men forbedrer også den samlede oplevelse for besøgende på alle enheder. Lad os gennemgå nogle nemme måder at løse dette på.

Hvad er PageSpeed-problemet med, at "Trykmålene har ikke den korrekte størrelse"?

PageSpeed-problemet "Trykmål har ikke den korrekte størrelse" er et almindeligt problem, der påvirker brugeroplevelsen på websteder, især på mobile enheder. Dette problem opstår, når interaktive elementer på en webside, såsom knapper, links og formularinput (samlet kendt som "trykmål"), er for små eller for tæt på hinanden til nemt og præcist at kunne trykkes med en finger på en berøringsskærm. En måde at løse dette problem på er ved at hyre tjenester til optimering af webstedshastighed.

I WordPress-designer det afgørende at overveje de varierende skærmstørrelser og inputmetoder, som besøgende bruger. Mens en desktopbruger med en mus nemt kan klikke på små eller tætliggende elementer, er mobilbrugere afhængige af deres fingre, som er mindre præcise. Advarslen "Trykmålene er ikke korrekt dimensioneret" indikerer, at sidelayoutet kan være svært for mobilbrugere at navigere og interagere effektivt med.

Hvorfor små trykmål fører til frustration og tabte konverteringer

For mobilbrugere kan små eller overfyldte trykpunkter forårsage betydelige problemer med brugervenligheden. Når interaktive elementer er svære at trykke på, kan brugerne ved et uheld klikke på den forkerte knap, have svært ved at vælge den ønskede mulighed eller være nødt til at zoome ind for at interagere med siden. Disse frustrationer kan resultere i en forringet brugeroplevelse, højere afvisningsprocenterog tabte konverteringer.

Googles PageSpeed ​​Insights påpeger dette problem, fordi mobilvenlighed er afgørende. Da størstedelen af ​​webtrafikken kommer fra mobile enheder, er det vigtigt at designe websteder, der er nemme at navigere på små skærme.

Læs grundigt: WordPress Fuld hjemmesideredigering: Komplet begynderguide

Håndtering af problemet med "Retning af PageSpeed-problemet for tapmål, der ikke har den korrekte størrelse"

At løse problemet med, at "Tap-mål er ikke i den rigtige størrelse", handler om at forbedre brugervenligheden på mobilen. Ved at justere størrelsen og afstanden mellem interaktive elementer kan du sikre, at brugerne nemt kan trykke på knapper, links og formularer uden frustration.

Sådan kommer du i gang med at optimere din hjemmeside for en bedre mobiloplevelse.

Forstå hvad trykmål er, og hvorfor de er vigtige for PageSpeed ​​Insights

Trykpunkter er de områder på en webside, som brugerne kan interagere med, f.eks. knapper, linksog formularkontroller. I mobilvenligt design skal disse elementer være store nok og placeret tilstrækkeligt med afstand til at sikre nem interaktion uden utilsigtede tryk.

Hvorfor trykmål er vigtige for PageSpeed ​​Insights:

• Brugeroplevelse: Trykpunkter i den rigtige størrelse forbedrer navigationen og reducerer brugerfrustration, især på mobile enheder.

• Mobilvenlighed: PageSpeed ​​Insights betragter mobilvenlighed som en rangeringsfaktor, og tap target-størrelse er en nøglekomponent i dette.

• Tilgængelighed: Tilstrækkelig størrelse og afstand mellem trykpunkter gør websteder mere tilgængelige for brugere med motoriske handicap eller større fingre.

• Opfattelse af ydeevne: Selvom det ikke direkte påvirker sidens indlæsningshastighed, bidrager et godt design af trykpunkter til den samlede oplevede ydeevne og brugervenlighed af et websted.

Hvorfor trykmål er vigtige for PageSpeed ​​Insights:

• Brugeroplevelse: Trykpunkter i den rigtige størrelse forbedrer navigationen og reducerer brugerfrustration, især på mobile enheder.

• Mobilvenlighed: PageSpeed ​​Insights betragter mobilvenlighed som en rangeringsfaktor, og tap target-størrelse er en nøglekomponent i dette.

• Tilgængelighed: Tilstrækkelig størrelse og afstand mellem trykpunkter gør websteder mere tilgængelige for brugere med motoriske handicap eller større fingre.

• Opfattelse af ydeevne: Selvom det ikke direkte påvirker sidens indlæsningshastighed, bidrager et godt design af trykpunkter til den samlede oplevede ydeevne og brugervenlighed af et websted.

PageSpeed ​​Insights evaluerer trykmål baseret på størrelse og nærhed. Den anbefaler:

• En minimumsstørrelse på 48×48 pixels for trykmål
• Mindst 8 pixels mellem trykmål

Forbedring af designet af trykmål kan forbedre din PageSpeed ​​Insights-score i afsnittet "Mobil brugervenlighed", hvilket bidrager til bedre samlede præstationsvurderinger og potentielt højere søgerangeringer.

• En minimumsstørrelse på 48×48 pixels for trykmål
• Mindst 8 pixels mellem trykmål

Forbedring af designet af trykmål kan forbedre din PageSpeed ​​Insights-score i afsnittet "Mobil brugervenlighed", hvilket bidrager til bedre samlede præstationsvurderinger og potentielt højere søgerangeringer.

Fortsæt med at læse: Hurtigste WordPress-temaer i (med PageSpeed-scorer)

Sikring af optimal brugervenlighed med 48px x 48px trykmål

Retningslinjen for trykmål på 48 x 48 pixels er en bredt accepteret standard inden for mobilwebdesign. Her er hvorfor denne størrelse er vigtig, og hvordan den bidrager til optimal brugervenlighed:

• Fingervenligt design: Den gennemsnitlige voksenfingerspids er omkring 10 mm bred, hvilket svarer til cirka 48 pixels på mange mobile enheder. Denne størrelse sikrer, at de fleste brugere komfortabelt kan trykke på knapper og links uden ved et uheld at ramme tilstødende elementer.

• Reducerede fejlrater: Større tastefelter mindsker sandsynligheden for forkerte tastetryk, hvilket forbedrer brugerens nøjagtighed og reducerer frustration. Dette er især vigtigt for opgaver, der kræver præcis interaktion, såsom udfyldning af formularer eller navigation.

• Overholdelse af tilgængelighedsregler: Størrelsen på 48px er i overensstemmelse med retningslinjerne for tilgængelighed af webindhold (WCAG), hvilket gør dit websted mere brugbart for personer med motoriske handicap eller større fingre.

• Forbedret mobiloplevelse: På mindre skærme bidrager trykmål med passende størrelse betydeligt til en problemfri og frustrationsfri mobiloplevelse, hvilket fremmer længere besøg på webstedet og bedre engagement.

• Konsistens på tværs af enheder: Denne størrelse fungerer godt på tværs af forskellige enhedsstørrelser og opløsninger og sikrer en ensartet brugeroplevelse fra små smartphones til større tablets.

• Optimering af berøring vs. mus: Mens musemarkører præcist kan klikke på mindre mål, kræver berøringsinteraktioner større mål for komfortabel brug, hvilket gør 48px til et godt kompromis for begge.

• Visuel klarhed: Større trykfelter giver ofte mulighed for klarere og mere læsbar tekst og ikoner i knapper og links, hvilket forbedrer den samlede visuelle kommunikation.

Implementeringstips:

• Brug CSS til at indstille minimumsbredder og -højder for interaktive elementer.
• Sørg for tilstrækkelig afstand mellem trykmål (mindst 8px) for at forhindre utilsigtede tryk på tilstødende elementer.
• Overvej at bruge margin til at øge det berørbare område uden nødvendigvis at øge elementernes visuelle størrelse.

Ved at følge retningslinjen for 48px gange 48px skaber du en mere brugervenlig, tilgængelig og effektiv mobilgrænseflade, hvilket fører til forbedret brugertilfredshed og potentielt bedre konverteringsrater.

Sådan øger du størrelsen på knapper i WordPress via Customizer

WordPress Customizer tilbyder en brugervenlig måde at ændre dit websteds udseende, inklusive knapstørrelser. Her er en trinvis vejledning:

Start med at tilgå WordPress Customizer, som giver dig mulighed for at foretage liveændringer af dit websteds udseende:

• Log ind på dit WordPress-administratordashboard
• Naviger til Udseende ⟶ Tilpas i venstre sidepanel
• Tilpasningsværktøjet åbnes og viser et live-forhåndsvisning af dit websted

Find derefter de specifikke indstillinger for knapper, som kan findes i forskellige sektioner afhængigt af dit tema:

• Se efter sektioner mærket Knapper eller Typografi
• Markér globale stilarter eller temaindstillinger, hvis de ikke er synlige med det samme
• Husk at de præcise placeringer kan variere mellem temaer

Læs mere: WordPress Fuld hjemmesideredigering: Komplet begynderguide

Når du har fundet knapindstillingerne, kan du justere forskellige egenskaber for at øge deres størrelse:

• Vægt: Øger teksttykkelsen, hvilket gør knapperne mere fremtrædende
• Linjehøjde: Justerer den lodrette afstand, hvilket potentielt gør knapperne højere
• Bogstavafstand: Ændrer vandret afstand mellem tegn, udvider knapper
• Padding: Hvis tilgængelig, øges pladsen omkring teksten, hvilket forstørrer hele knappen.

Når du foretager ændringer, skal du være opmærksom på live-forhåndsvisningen for at sikre, at de nye størrelser ser godt ud:

• Tjek knapper på forskellige sider på dit websted
• Kontroller, at øgede størrelser ikke forstyrrer dit overordnede layout
• Sørg for, at teksten forbliver centreret og læsbar inden for knapperne

Når du har justeret indstillingerne til din tilfredshed, skal du anvende ændringerne for at aktivere dem:

• Gennemgå alle ændringer en sidste gang
• Klik på Udgiv eller Gem og udgiv , som normalt findes øverst i brugertilpasningsværktøjet.
• Dine nye, større knapper er nu synlige for alle besøgende på siden

Fortsæt med at læse: Opret brugerdefinerede WordPress-temaer fra bunden

Forøg størrelsen på links i WordPress for at sikre, at de er lette at klikke på

At gøre dine links nemmere at klikke på er et simpelt, men afgørende aspekt af brugeroplevelsen. Større links er mere synlige og nemmere for besøgende at interagere med, hvilket forbedrer den samlede navigation. WordPress tilbyder flere måder at opnå dette på.

• Vælg linket, og skift dets overskriftsniveau til H1 eller H2 for øjeblikkelig størrelsesforøgelse.
• Brug blokindstillingerne under sektionen Typografi for mere præcis kontrol over linkstørrelsen.
• Sørg for ensartethed på tværs af alle links for at skabe et ensartet design og en problemfri brugeroplevelse.

Fortsæt med at læse: Trin-for-trin guide til at oprette brugerdefinerede blokke i WordPress

Sådan bruger du linjehøjde og bogstavafstand for at gøre trykmål mere tilgængelige

Trykpunkter som knapper og links skal være nemme for alle at klikke på, uanset enhed eller fysiske begrænsninger. Justering af linjehøjde og bogstavafstand kan gøre trykpunkter mere tilgængelige uden at gå på kompromis med dit designs udseende.

• Øg linjehøjden for at skabe mere lodret plads, hvilket gør det nemmere at trykke på trykmål.
• Juster bogstavafstanden for at udvide det klikbare område vandret.
• Brug disse justeringer til at skabe balance mellem tilgængelighed og et visuelt tiltalende design.

Se også: Hvordan påvirker X-højden et skrifttypedesign

Sørg for konsistens ved at kontrollere størrelserne på trykmålene på alle sider på dit websted

Når du har øget størrelsen på dine trykmål, er det afgørende at sikre, at disse ændringer anvendes ensartet på tværs af hele dit websted. Inkonsistente størrelser på trykmål kan forstyrre brugeroplevelsen og føre til frustration.

• Gennemgå alle sider, inklusive blogindlæg, hjemmeside og produktsider, for at sikre ensartede størrelser på trykmålene.
• Sørg for ensartethed i link- og knapstørrelser for at undgå at forvirre brugerne.
• Oprethold ensartethed for at skabe en forudsigelig og brugervenlig brugerflade.

Læs mere: Gutenberg 14.8 overhaler website-editorens brugerflade og tilføjer stilbog

Øg afstanden mellem trykmål ved at justere Padding-egenskaben i WordPress

Udover at øge størrelsen på trykområdet er korrekt afstand nødvendig for at sikre brugervenlighed. Justering af polstringen omkring knapper og links kan hjælpe med at reducere utilsigtede klik og forbedre brugeroplevelsen.

• Brug indstillingen Padding i WordPress Customizer til at tilføje plads omkring links og knapper.
• Start med mindst 10 pixels margin på alle sider for optimal afstand.
• Juster polstringen baseret på dit design og brugerens behov, og balancer plads og layoutintegritet.

Tilføj ekstra plads mellem trykmål ved hjælp af WordPress Spacer Block

Hvis knapper eller links er for tæt på hinanden, kan det at tilføje ekstra plads gøre dem mere brugbare. WordPress Spacer-blokken er en nem måde at indsætte mellemrum mellem elementer uden at forstyrre designet.

• Indsæt en afstandsblok mellem tæt placerede trykmål.
• Juster afstandsblokkens højde for at skabe et mere åndbart design.
• Brug denne metode til stablede elementer eller områder, hvor ændringer i margen ville påvirke layoutet.

Forhåndsvisning af ændringer på tværs af forskellige enheder for at sikre, at trykmålene har den korrekte størrelse og afstand

Når du har foretaget ændringer i størrelsen og afstanden mellem trykmål, er det vigtigt at teste dem på flere enheder. Det, der ser godt ud på en computer, fungerer måske ikke godt på en smartphone eller tablet.

• Se et eksempel på dit websted på mobiltelefoner, tablets og computere for at sikre, at der stadig er klikbare trykpunkter.
• Brug WordPress' responsive forhåndsvisning eller test på faktiske enheder for at få en præcis repræsentation.
• Foretag de nødvendige justeringer baseret på, hvordan trykmålene vises på tværs af forskellige skærmstørrelser.

Fortsæt med at læse: De bedste skabeloner til forslag til hjemmesideudvikling, der passer til dine behov

Test dit websted med Google PageSpeed ​​Insights for at bekræfte, at løsningen er vellykket

For at bekræfte, at dine ændringer har forbedret brugervenligheden, skal du køre din hjemmeside via Google PageSpeed ​​Insights. Dette værktøj kan kontrollere, om dine trykmål opfylder Googles standarder for mobilvenlighed.

• Kør din hjemmeside via Google PageSpeed ​​Insights for at teste størrelserne på trykmål.
• Kontroller, om trykmålene ikke har den korrekte størrelse, i revisionsresultatet.
• Hvis problemet er løst, er dine justeringer gennemført.
• Hvis ikke, så gentag og juster størrelsen og afstanden mellem dine trykmål efter behov, indtil problemet er løst.

Fortsæt med at læse: De bedste værktøjer til SEO-revision af websteder

Konklusion

At gøre din hjemmeside mere mobilvenlig ved at løse problemet med "Tap Targets er ikke i den rigtige størrelse" handler ikke kun om at tilfredsstille Google; det handler om at skabe en mere gnidningsfri og intuitiv oplevelse for alle besøgende.

Prioritering af brugeroplevelsen gennem simple justeringer som at øge størrelsen og afstanden mellem trykpunkter hjælper med at holde dit websted tilgængeligt, engagerende og funktionelt på alle enheder. I sidste ende kan den indsats, du lægger i disse optimeringer, betale sig i form af forbedrede konverteringer og højere brugertilfredshed.