TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak naprawić skumulowane przesunięcie układu w WordPressie?

165

Google nakłania webmasterów do wdrożenia wszelkich środków potrzebnych do poprawy szybkości ładowania strony. Szybkość ładowania strony Twojej witryny jest mierzona na podstawie kilku parametrów, które możesz zobaczyć w narzędziu Google PageSpeed ​​Insights. Kumulatywne przesunięcie układu (CLS) jest jednym z kryteriów pomiaru szybkości w Core Web Vital. Jest to ważny czynnik nie tylko dla poprawy szybkości, ale także dla lepszego doświadczenia użytkownika. W tym artykule wyjaśnimy różne przyczyny problemu z CLS i jak naprawić skumulowany błąd przesunięcia układu w WordPressie.

Co to jest skumulowane przesunięcie układu?

Zanim zaczniesz czytać dalej, konieczne jest zrozumienie, czym jest CLS. Mówiąc prościej, jest to zmiana układu treści, która powoduje słabe wrażenia użytkownika. Na przykład masz zamiar kliknąć przycisk na stronie i nagle obraz banera ładuje się powyżej i naciska przycisk. W końcu nieumyślnie klikniesz w obraz, co może przenieść Cię na inną stronę. To bardzo złe doświadczenie użytkownika, a Google ma dobre wyjaśnienie w tym artykule, który możesz przeczytać dalej.

Powiązane: Jak włączyć leniwe ładowanie obrazu w Google Chrome?

Sprawdzanie skumulowanego błędu przesunięcia układu

Otwórz narzędzie Google PageSpeed ​​Insights (PSI) i sprawdź szybkość swojej strony internetowej. Możesz sprawdzić dane pola lub podsumowanie pochodzenia, aby potwierdzić, że w Twojej witrynie występuje skumulowany problem przesunięcia układu. Możesz najechać kursorem na pasek postępu, aby znaleźć skumulowany procent ładowania, w którym występuje problem na stronie/witrynie.

Jak naprawić skumulowane przesunięcie układu w WordPressie?

Sprawdź problem CLS w PSI

W celu odnalezienia elementów powodujących problemy przewiń w dół do sekcji diagnostycznej i zaznacz opcję „Unikaj dużych przesunięć układu". Tutaj Google pokaże listę elementów powodujących przesunięcie układu na testowanej stronie.

Jak naprawić skumulowane przesunięcie układu w WordPressie?

Unikaj dużego przesunięcia układu

Sprawdź szczegóły w Google Search Console

Możesz wyświetlić adresy URL stron z problemem CLS na swoim koncie Google Search Console. Po zalogowaniu się na swoje konto przejdź do sekcji „Core Web Vitals” w sekcji „Ulepszenia”. Możesz znaleźć raporty zarówno dla urządzeń mobilnych, jak i komputerów stacjonarnych, aby wyświetlić strony z „problemem CLS: więcej niż 0,25 (urządzenia mobilne) / (komputery)”.

Jak naprawić skumulowane przesunięcie układu w WordPressie?

Problem z CLS w Google Search Console

Kliknij problem, aby wyświetlić przykładowy adres URL w witrynie, w której występuje problem z CLS, oraz średni czas CLS. Google uzna CLS za problem zgodnie z poniższą tabelą:

Dobry Potrzebuje ulepszenia Słaby
<0,1 s 0.1 do 0.25s > 0,25s

Dlatego musisz dążyć do skrócenia czasu CLS o mniej niż 0,25 sekundy, aby to zielono-żółte narzędzie PSI i usunąć błędy z konta Search Console.

Napraw skumulowany błąd zmiany układu w WordPressie

Oto niektóre z czynników, które mogą powodować skumulowane opóźnienie przesunięcia układu w witrynie WordPress. Wyjaśnijmy szczegółowo każdy problem i możliwe rozwiązania.

1 Optymalizacja dostarczania CSS

Jak widać na powyższym zrzucie ekranu „Unikaj dużych przesunięć układu”, pierwszym elementem jest „<div class=”row footer-row”>”. Jest to zaskakujące, ponieważ nie ma możliwości załadowania sekcji stopki powyżej obszaru składania. Po sprawdzeniu zrozumieliśmy, że jest to spowodowane opcją „Optymalizuj dostarczanie CSS” włączoną z wtyczką WP Rocket. Ta opcja wygeneruje krytyczny kod CSS i wstawi go w sekcji nagłówka, aby usunąć kod CSS blokujący renderowanie. Jednak w wielu przypadkach doprowadzi to do problemu skumulowanego przesunięcia układu. Jeśli używasz WP Rocket lub innej wtyczki buforującej do umieszczania CSS w nagłówku, wyłącz tę opcję i sprawdź, czy pomaga poprawić opóźnienie CLS.

2 AdSense i inne skrypty reklamowe w ATF

Wielu wydawców korzysta z Google AdSense lub innej sieci reklamowej, aby zarabiać na swoich treściach online. Aby wyświetlać reklamy, musisz umieścić na swojej stronie internetowej fragment kodu reklamy JavaScript. Ogólnie rzecz biorąc, musisz wstawić kod reklamy w górnej części ekranu (ATF), aby zwiększyć widoczność reklamy i przychody. Wpłynie to jednak bezpośrednio na szybkość ładowania strony i spowoduje skumulowany błąd przesunięcia układu w narzędziu Google PageSpeed ​​Insight (PSI).

Po całkowitym załadowaniu treści powyżej strony przewinięcia, Twoja reklama zacznie się ładować i przesuwać treść w dół.

Jak naprawić skumulowane przesunięcie układu w WordPressie?

Zmiana układu z powodu reklamy

Istnieje kilka opcji rozwiązania tego problemu. Jednym z nich jest odroczenie skryptu reklamowego w WordPress za pomocą wtyczek takich jak WP Rocket. Wpłynie to jednak na wyświetlanie reklam i współczynnik klikalności, zmniejszając w ten sposób ogólne zarobki.

Jak naprawić skumulowane przesunięcie układu w WordPressie?

Opóźnij wykonanie reklamy JavaScript

Drugą opcją jest użycie reklam o stałej szerokości powyżej obszaru zagięcia, zgodnie z zaleceniami Google. Niestety Google wyjaśnia również, że używanie stałej szerokości nie jest możliwe w przypadku reklam elastycznych lub płynnych.

Nie można zarezerwować miejsca na te boksy przed żądaniem treści reklamy, a reklamy o płynnych rozmiarach zawsze powodują zmiany układu. Aby złagodzić skutki zmian układu podczas pracy z boksami reklamowymi o płynnym kształcie, zalecamy wykonanie następujących czynności: rozmiaru elastycznego używaj tylko w przypadku boksów znajdujących się w części strony widocznej na ekranie.

Google

Podsumowując, nie można rozwiązać problemu, chyba że usuniesz zewnętrzny kod reklamy z obszaru ATF. Dotyczy to każdego kodu innej firmy, który umieściłeś w sekcji nagłówka swojej witryny.

3 Użyj odpowiednich wymiarów obrazu

Jest to podobne do używania naprawionego z reklamami. Jeśli nie masz wymiarów obrazu, przeglądarki będą czekać na załadowanie obrazów i wypchnąć zawartość poniżej, powodując problem z przesunięciem układu. Na szczęście nie stanowi to problemu, ponieważ WordPress automatycznie doda wymiary do obrazów podczas przesyłania za pomocą edytora postów. Musisz jednak ręcznie dodać parametry wysokości i szerokości do tagu img, jeśli ręcznie wstawiasz obrazy za pomocą bloku „Niestandardowy HTML”, funkcji „Edytuj jako HTML” lub obrazu logo. Ponadto zdefiniuj stałą szerokość i wysokość podczas osadzania filmów i ramek iframe z witryn innych firm.

Jak naprawić skumulowane przesunięcie układu w WordPressie?

Brak szerokości i wysokości obrazu

4 czcionki opóźniające ładowanie treści

Każda strona korzysta z czcionek. Spowoduje to skumulowany problem z przesunięciem układu, zwłaszcza podczas korzystania z usług innych firm, takich jak czcionki Google. Ponieważ czcionki Google muszą ładować się z serwerów zewnętrznych, spowoduje to podobny skumulowany problem z przesunięciem układu, jak kod reklamy. Możesz również zobaczyć ten problem w PSI jako „Upewnij się, że tekst pozostaje widoczny podczas ładowania czcionek internetowych”, co wskazuje na opóźnienie w ładowaniu widocznej zawartości.

Jak naprawić skumulowane przesunięcie układu w WordPressie?

Problem z czcionką

  • Skutecznym sposobem rozwiązania tego problemu jest użycie wtyczki pamięci podręcznej do wstępnego łączenia i wstępnego pobierania domen DNS, takich jak domena fonts.googleapis.com i fonts.gistatic.com. Pomoże to przyspieszyć ładowanie czcionek poprzez wstępne połączenie z serwerem czcionek Google. SG Optimizer, WP Rocket (automatyczne) i wiele innych wtyczek oferuje tę funkcję, którą możesz wykorzystać w tym celu. Dodatkowo można ograniczyć liczbę rodzin czcionek i grubości oraz zmniejszyć rozmiar pobieranego pliku.

Jak naprawić skumulowane przesunięcie układu w WordPressie?

Optymalizacja czcionek internetowych SG Optimizer

5 ikon czcionek w menu i ATF

Wiele motywów WordPress używa ikon czcionek w obszarze nawigacji do wyświetlania elementów podmenu. Ogólnie rzecz biorąc, ikony te pochodzą ze stron internetowych osób trzecich, takich jak font awesome lub icomoon. Spowoduje to podobne problemy, takie jak czcionki, i wydłuży skumulowany czas zmiany układu. Motywy takie jak GeneratePress pozwalają wybrać ikony SVG zamiast czcionek w menu nawigacyjnym. Podobnie w motywie Astra możesz wyłączyć ładowanie biblioteki czcionek za pomocą funkcji niestandardowej. W ten sposób możesz poprawić problem skumulowanego przesunięcia układu w WordPressie. Jednak nie będziesz mieć innej opcji niż wyłączenie elementów podmenu w większości innych motywów, co nie jest dobrym rozwiązaniem.

6 Leniwe ładowanie logo obrazu

Webmasterzy źle rozumieją ostrzeżenie PSI dotyczące „Odrocz obrazy poza ekranem”. To ostrzeżenie pojawia się, gdy nie ładujesz z opóźnieniem obrazów dostępnych w treści poniżej części widocznej na ekranie (BTF). Jeśli jednak używasz wtyczki w WordPress, wszystkie obrazy z HTML

Aby skrócić czas CLS w narzędziu PSI, musisz wykluczyć obraz logo z leniwego ładowania. Rozwiązanie zależy od wtyczki, której używasz do leniwego ładowania obrazów. Na przykład w WP Rocket przejdź do sekcji „Media> LazyLoad” i podaj nazwę logo lub adres URL, aby wykluczyć z leniwego ładowania.

Jak naprawić skumulowane przesunięcie układu w WordPressie?

Wyklucz logo z leniwego ładowania

7 Lazy Loading Image Sliders w ATF

Podobnie jak w przypadku logo obrazu, zobaczysz wysoki skumulowany czas zmiany układu, gdy masz suwaki obrazu nad obszarem składania. Możesz wykluczyć obrazy suwaków z leniwego ładowania i przetestować, co pomaga skrócić czas CLS.

Powiązane: 25 wskazówek SEO, aby poprawić ranking witryny WordPress.

8 Renderuj blokujący JavaScript, taki jak jQuery

Ostatnim tematem jest popularny JavaScript blokujący renderowanie ze względu na motywy oparte na jQuery. W rzeczywistości WordPress zawiera również jQuery jako część folderu wp-includes. Możesz odroczyć jQuery i inne skrypty blokujące renderowanie na swojej stronie za pomocą wtyczki buforującej, takiej jak W3 Total Cache. Pamiętaj jednak, aby dokładnie przetestować swoją witrynę, aby uniknąć uszkodzonych układów.

Weryfikowanie poprawki w Google Search Console

Po rozwiązaniu problemu nie zapomnij przesłać weryfikacji na koncie Google Search Console. Możesz wrócić do sekcji „Core Web Vitals” i przesłać walidacje dla całej witryny.

Jak naprawić skumulowane przesunięcie układu w WordPressie?

Weryfikowanie problemu z CLS w Google Search Console

Sprawdzenie przez Google problemu z CLS w Twojej witrynie i wyświetlenie odpowiednich wyników na koncie Search Console potrwa do 28 dni.

Wniosek

Jak widać, głównym powodem błędu skumulowanego przesunięcia układu w WordPressie jest umieszczenie skryptów blokujących renderowanie powyżej obszaru zawartości zgięcia. Mogą to być kody reklamowe, jQuery, czcionki, ikony lub inne rzeczy. Rozwiązaniem tego problemu jest użycie prostych, minimalistycznych motywów, takich jak GeneratePress lub Astra. Z drugiej strony możesz użyć wtyczek do buforowania, aby wstępnie połączyć i połączyć pliki czcionek, aby skrócić skumulowany czas zmiany układu.

Źródło nagrywania: www.webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów