Dziś mam dla Ciebie krótki wpis o tym jak naprawić błąd “Docelowe elementy dotykowe nie mają odpowiedniej wielkości lub właściwych odstępów” w WordPress, który pojawia się podczas testów strony w Google PageSpeed Insights.

PageSpeed Insights to popularne narzędzie, które pozwala na zbieranie przydatnych informacji na temat wydajności twojej strony internetowej. Jednym z częstych problemów, na które zwraca uwagę, jest „Docelowe elementy dotykowe nie mają odpowiedniej wielkości lub właściwych odstępów”. Jeśli jednak nie jesteś programistą ani projektantem stron internetowych, możesz nie wiedzieć, co to oznacza ani jak to naprawić.

Na szczęście, naprawa jest stosunkowo łatwa. Zaczynajmy!

Jak naprawić „Docelowe elementy dotykowe nie mają odpowiedniej wielkości lub właściwych odstępów”

Tytułowy problem jest zgłaszany przez PageSpeed Insights w sytuacji gdy w wersji mobilnej Twojej strony internetowej, jakieś elementy klikalne są za małe (mniejsze niż 48 x 48 px) lub umieszczone zbyt blisko siebie (mniej niż 8 px odstępu). 

Oznacza to nie więcej niż tyle, że użytkownik może mieć problem na urządzeniu mobilnym aby dotknąć przycisk lub link swoim palcem.

Aby sobie z tym poradzić, masz w zasadzie dwie opcje:

1. Zwiększyć rozmiar elementów
2. Zwiększyć odstępy między elementami

Opcja 1) Zwiększenie rozmiaru elementów 

Zadanie jest banalne. Gdy rozwiniesz treść komunikatu, PageSpeed Insights dokładnie wskaże Ci o które elementy chodzi. 

Załóżmy, że masz w stopce ikony z linkami do social media. Wystarczy, że upewnisz się, że owe ikony będą miały więcej niż 48 x 48 px wysokości i szerokości. To samo tyczy się linków tekstowych (które jednak rzadko) mogą mieć za mały rozmiar.

W zależności od tego, jak zbudowana jest Twoja strona, powiększenie tych elementów będzie przebiegało inaczej. Edycja różni się w Gutenbergu, Elementorze, WP Bakery oraz czystym CSS.

Opcja 2) Zwiększenie odstępów między elementami 

Według dokumentacji przeglądarki Chrome, odstęp rzędu 8px między elementami dotykowymi powinien być wystarczający. Jednak jeśli elementy te są małe, warto wtedy ten odstęp powiększyć. 

I tutaj najczęściej leży istota problemu. Graficy (lub programiści) często zapominają, że nawet ikony czy przyciski o rozmiarze minimum 48px położone w odległości 8px odstępu, będą trudno dostępne dla użytkownika.

Naprawa tego problemu jest równie banalna i zróżnicowana co naprawa rozmiaru elementów. Przejdź po prostu to edytora treści odpowiedzialnego za powodujący problem element i zmień jego odstęp. Jeśli posiłkujesz się stylami CSS, to mówimy tu o parametrze ‘margin’.

Podsumowanie

Jeśli interesuje Cię temat optymalizacji WordPress, mam poradnik jak przyspieszyć stronę. Gdybyś chciał zadać mi jakieś dodatkowe pytania, nie wahaj się skorzystać z systemu komentarzy pod wpisem lub prywatnej wiadomości poprzez e-mail.