Divi – Usunięcie błędu [user-scalable=”no”] i [maximum-scale]

Czym jest ten błąd? Wyjaśnienie czym jest [user-scalable=”no”] lub atrybut [maximum-scale] ma wartość mniejszą niż 5

Podczas analizy strony w PageSpeed Insights, jednym z ostrzeżeń może być informacja o obecności atrybutów [user-scalable="no"] lub [maximum-scale] ustawionych na wartość mniejszą niż 5. Są to elementy, które ograniczają możliwość skalowania strony na urządzeniach mobilnych.

Atrybut user-scalable="no" sprawia, że użytkownik nie może powiększać ani pomniejszać widoku strony poprzez gesty uszczypnięcia na ekranie dotykowym. Natomiast maximum-scale określa maksymalny poziom powiększenia, jaki użytkownik może zastosować. Jeśli ta wartość jest mniejsza niż 5, Google może uznać to za ograniczenie dostępności i użyteczności strony, co wpływa na wynik w PageSpeed Insights.

W przypadku motywu Divi (popularnego narzędzia do budowy stron w WordPressie), domyślnie dodawany jest kod, który zawiera takie ustawienia viewportu, co może prowadzić do powyższego błędu w testach optymalizacji.

Czy warto go usunąć?

Decyzja o usunięciu tego ograniczenia zależy od priorytetów właściciela strony. Jednak warto zaznaczyć, że ograniczanie możliwości skalowania strony może negatywnie wpływać na doświadczenia użytkowników.

Z perspektywy dostępności (WCAG), możliwość powiększania treści jest kluczowa dla osób z problemami wzroku. Blokowanie tej funkcji może sprawić, że niektóre osoby nie będą w stanie wygodnie korzystać z witryny. Google również kładzie duży nacisk na dostępność stron, co wpływa na ich ocenę pod kątem SEO i UX.

Dodatkowo, współczesne urządzenia mobilne radzą sobie bardzo dobrze z responsywnością stron. W większości przypadków nie ma potrzeby sztucznego ograniczania możliwości skalowania widoku. Dlatego w wielu sytuacjach usunięcie tego błędu będzie korzystnym rozwiązaniem.

Jaki ma wpływ na stronę?

Wpływ tego ustawienia jest szczególnie odczuwalny dla użytkowników mobilnych. Strona może wydawać się mniej elastyczna, szczególnie jeśli użytkownik chce powiększyć tekst lub obrazy. Jeśli treść na stronie nie jest dostosowana do wygodnego czytania na małych ekranach, brak możliwości skalowania może pogorszyć komfort przeglądania witryny.

Dodatkowo, Google traktuje to jako potencjalny problem w dostępności i może to wpłynąć na ocenę strony w narzędziu PageSpeed Insights. Choć nie jest to czynnik krytyczny dla SEO, może przyczynić się do niższej oceny optymalizacji mobilnej, co w skrajnych przypadkach może wpłynąć na pozycjonowanie.

Jeśli strona jest skierowana do szerokiego grona odbiorców, w tym osób starszych czy z wadami wzroku, blokowanie skalowania może zniechęcić część użytkowników do jej przeglądania.

Jak go usunąć?

Aby usunąć ten problem w motywie Divi, należy dodać odpowiedni kod do pliku functions.php w motywie podrzędnym (child theme).

Kroki do usunięcia błędu:

1. Zaloguj się do WordPressa i przejdź do sekcji „Wygląd” → „Edytor plików motywu” (lub użyj klienta FTP do edycji plików).
2. Otwórz plik functions.php w swoim motywie podrzędnym.
3. Dodaj poniższy kod na końcu pliku:

add_action('after_setup_theme', 'db_remove_et_viewport_meta');
add_action('wp_head', 'db_enable_pinch_zoom');

function db_remove_et_viewport_meta() {
    remove_action('wp_head', 'et_add_viewport_meta');
}

function db_enable_pinch_zoom() {
    echo '<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, minimum-scale=0.1, maximum-scale=10.0">';
}

4. Zapisz zmiany i odśwież stronę.
5. Sprawdź ponownie wynik w PageSpeed Insights – komunikat o błędzie powinien zniknąć.

Co robi ten kod?

• remove_action('wp_head', 'et_add_viewport_meta'); – usuwa domyślnie dodawany przez Divi meta tag viewport, który zawiera ograniczające ustawienia.
• add_action('wp_head', 'db_enable_pinch_zoom'); – dodaje nowy, poprawny meta tag, który pozwala na pełne skalowanie (user-scalable=yes, maximum-scale=10.0).

Dzięki tej modyfikacji użytkownicy będą mieli możliwość swobodnego powiększania zawartości strony, co poprawi jej dostępność i ocenę w PageSpeed Insights.

Podsumowując

Jeśli zależy Ci na lepszej dostępności strony oraz wyższym wyniku w Google PageSpeed, warto usunąć ograniczenia skalowania w motywie Divi. Blokowanie tej funkcji może negatywnie wpływać na doświadczenie użytkowników, zwłaszcza na urządzeniach mobilnych.

Dodanie kilku linijek kodu do functions.php pozwoli na usunięcie problemu, poprawiając komfort korzystania z witryny oraz wynik w testach optymalizacji.