Naprawianie zawartości, która wolno się ładuje

Opóźnienie wczytywania mniej istotnych lub niewidocznych treści, nazywane „leniwym ładowaniem”, to często stosowana, sprawdzona metoda zwiększająca wygodę obsługi. Więcej informacji znajdziesz w sekcji dotyczącej wolnego wczytywania obrazów i filmów na stronie „Podstawy tworzenia witryn”. Jeśli jednak nie zaimplementujesz tej metody prawidłowo, może ona spowodować ukrycie treści przed Google. W tym dokumencie wyjaśniamy, jak sprawdzić, czy Google może pobrać i zindeksować treści, które wczytują się powoli.

Ładowanie zawartości, gdy jest ona w widocznym obszarze

Aby upewnić się, że Google widzi całą zawartość strony, sprawdź, czy implementacja leniwego ładowania pozwala na ładowanie wszystkich wymaganych treści za każdym razem, gdy znajdą się one w widocznym obszarze. Oto kilka przykładów, jak to zrobić:

Przetestuj swoją implementację

Obsługa wczytywania treści z podziałem na strony w przypadku nieskończonego przewijania

Jeśli zaimplementujesz funkcję nieskończonego przewijania, upewnij się, że masz włączoną obsługę podziału na strony. Możliwość wczytywania treści z podziałem na strony jest istotna z punktu widzenia użytkowników, bo pozwala im udostępniać Twoje treści i do nich wracać. W takiej sytuacji Google może też wyświetlić link do określonego fragmentu treści zamiast do górnej części strony z funkcją nieskończonego przewijania.

Aby umożliwić wczytywanie z podziałem na strony, musisz udostępnić niepowtarzalny link do każdej sekcji, którą użytkownicy będą mogli bezpośrednio wczytywać i udostępniać. Zalecamy skorzystanie z interfejsu History API, by zaktualizować URL w przypadku dynamicznego wczytywania treści.

Test

Po skonfigurowaniu implementacji upewnij się, że działa ona prawidłowo. Możesz na przykład wykorzystać skrypt Puppeteer, żeby przetestować implementację lokalnie. Puppeteer to biblioteka środowiska Node.js do kontrolowania Chrome bez interfejsu graficznego. Do uruchomienia skryptu potrzebujesz środowiska Node.js. Użyj tych poleceń, by sprawdzić i uruchomić skrypt: 

git clone https://github.com/GoogleChromeLabs/puppeteer-examples
cd puppeteer-examples
npm i
node lazyimages_without_scroll_events.js -h

Po uruchomieniu skryptu sprawdź ręcznie utworzone zrzuty ekranu, aby upewnić się, że zawierają wszystkie treści, które robot Google powinien odczytać i zindeksować.

Możesz też użyć narzędzia do sprawdzania adresów URL w Search Console, by sprawdzić, czy wszystkie obrazy zostały wczytane. Sprawdź pod tym kątem zrzut ekranu i wyrenderowany kod HTML.