5️ Techniki Lazy-Load Content Content dla lepszego 📈 SEO i User Experience

1. Scenariusze zawartości leniwego obciążenia
2. Głoska bezdźwięczna
3. Kod
4. Kopiuj
5. Obsługa leniwych załadowanych obrazów
6. Czym jest IntersectionObserver?
7. Pagination / Continuous Scroll
8. Korzystanie z API historii
9. Ładowanie skryptów według potrzeb
10. Zawijanie go

Наша команда-партнер Artmisto

Szybkość witryny jest kluczowym aspektem na stronie SEO każdy może kontrolować. Twoim celem jest być interaktywnym w czasie poniżej 3 sekund, nawet na podstawowym telefonie przez połączenie 3G.

Jednak większość stron internetowych ma tak wiele żądań i dużych ładunków, że nie można osiągnąć tego limitu czasu lub budżetu. Zgodnie z wynikami badań Google załadowanie strony zajmuje średnio 22 sekundy.

Ale co, jeśli powiem, że istnieje sposób na odciążenie lub nawet uniknięcie ładowania zasobów strony, dopóki nie będą potrzebne?

Dzięki temu Twoja witryna może zyskać wyraźną przewagę nad konkurencją, ponieważ Google nie tylko polubi Twoje strony, ale także odwiedzających!

Dobrą wiadomością jest to, że aktualizacja strony wymaga trochę JavaScript i celowego działania.

I Zespół wyszukiwarki Google jest za tą techniką , zwany „leniwym ładowaniem”.

Krótki przewodnik Google wspomina o trzech podstawowych punktach:

• Wczytaj zawartość widoczną
• Jak wspierać nieskończone przewijanie i paginację
• Jak przetestować implementację

Sztuką nie jest ukrywanie treści, które musisz indeksować z Google. Opublikowali więc pomocny, ale cienki przewodnik.

Opublikowali także przewodnik po korzystaniu z Obserwatora skrzyżowań do leniwych zdjęć i filmów dopóki nie będą widoczne.

Dla przeciętnych stron internetowych, które udostępniają treści, takie jak blog lub strona marketingowa, leniwe ładowanie jest raczej proste. Ale w przypadku aplikacji internetowych może to być bardziej skomplikowane, a ja zagłębię się w niektóre techniki, których używam do ładowania kodu, aby upewnić się, że moje aplikacje są szybkie i elastyczne.

Przejrzę punkty w ofertach Google i przedstawię kilka porad i przykładów z własnego doświadczenia, korzystając z IntersectionObserver i trochę o tym, jak działa API historii.

Wskazówki dotyczące leniwego ładowania dove tail z ich ostatnimi wskazówkami aplikacje na jednej stronie i SEO ponieważ jest to dobra technika poprawiająca komfort korzystania z witryny.

W przypadku bardziej złożonych aplikacji internetowych dotknę technikę ładowania skryptów na żądanie, a nie z góry, co uniemożliwia renderowanie strony.

Scenariusze zawartości leniwego obciążenia

Przed dodaniem do witryny funkcji ładowania z opóźnieniem należy inwentaryzować zasoby ładowane przez strony i określać, co jest wymagane dla początkowego doświadczenia i co można załadować, gdy użytkownik zacznie czytać lub wchodzić w interakcję z treścią.

Powrócę do moich dwóch głównych scenariuszy, treści i aplikacji witryny, ponieważ potrzeby dotyczące treści są różne, ale nakładają się na siebie.

Po pierwsze, strona z treścią lub sprzedażą. Dla uproszczenia nazywam to blogiem. Witryny te zazwyczaj wymagają HTML, CSS, JavaScript, obrazów i niestandardowych czcionek. Zwykle są to witryny, które chcesz, aby wolny ruch organiczny od Google, co oznacza, że ​​SEO jest ważne.

Poza szybszym ładowaniem strony należy się upewnić, że zawartość jest dostępna dla pająka wyszukiwarki, który nie wykona kodu JavaScript ani nie przewinie strony, aby sterować ładowaną treścią.

Treść może odnosić się do mediów, kodu lub kopii (tekst i znaczniki).

Głoska bezdźwięczna

Obrazy i filmy to duże pliki. Odroczenie ich obciążenia ma natychmiastowy, pozytywny wpływ na czas ładowania strony.

Kod

JavaScript, CSS, HTML i czcionki są niezbędne do renderowania stron. Ale skrypty i CSS mogą być twoimi największymi wąskimi gardłami w szybkim czasie pierwszej interakcji. Opóźnienie obciążenia powoduje, że zawartość jest dostępna znacznie wcześniej.

Kopiuj

Czasami chcesz odroczyć ładowanie zawartości strony i kopiowanie. Upewnij się tylko, czy jest to ważne dla SEO, jest dostępne dla pająków.

Aby to zrobić, pokażę ci, jak używać IntersectionObserver do ładowania zasobów, takich jak obrazy i filmy, podczas ich przeglądania. Ale zanim to zrobię, musimy ustawić znaczniki, aby obrazy i filmy były indeksowane.

Złożone aplikacje internetowe mogą być nieco bardziej delikatne, ponieważ opierają się na większej logice aplikacji. Oznacza to, że wymagają więcej plików JavaScript. Kiedy te pliki są ładowane, ważne. W tym celu możesz użyć IntersectionObserver, ale Twoja aplikacja potrzebuje dobrej techniki do dynamicznego ładowania skryptów w razie potrzeby. W dalszej części tego artykułu dam ci tylko to!

Obsługa leniwych załadowanych obrazów

Chociaż Google i Bing mogą uruchamiać JavaScript Twojej strony, nie czynią tego priorytetem. Nie próbują również przewijać strony, aby wywołać takie rzeczy jak IntersectionObserver.

Oznacza to, że leniwa zawartość może równie dobrze nie istnieć.

Na początku możesz nie traktować tego jako wielkiego problemu, ale SEO może być kluczowym czynnikiem, który pomoże ci lepiej uszeregować wyniki wyszukiwania. Ponadto wyszukiwanie obrazów może być ukrytym źródłem dodatkowego ruchu organicznego.

Sekretem udostępniania pająka treści jest „ukrycie” go za tagiem noscript.

Wiem, że w tym przykładzie jest dużo kodu, ale przejdę do atrybutów „data-” w następnej sekcji.

Teraz chcę skupić się na elemencie noscript. Wewnątrz tego elementu znajduje się tradycyjny element IMG z wartością src ustawioną na duży rozmiar obrazu.

Teraz pająki wyszukiwania załadują obraz i zaindeksują go dla Ciebie.

Tag noscript jest mechanizmem semantycznym, który informuje przeglądarkę, aby renderowała zawartość wewnątrz elementu, jeśli przeglądarka (agent użytkownika) nie obsługuje JavaScript. Większość użytkowników będzie miała włączoną obsługę JavaScript, więc nie spowoduje to początkowego załadowania obrazu. Ale jak wkrótce zobaczysz, będzie to widoczne, gdy obraz nie-noscript jest widoczny.

Teraz przejdźmy do sposobu korzystania z IntersectionObserver.

Czym jest IntersectionObserver?

Stosunkowo nowy interfejs API przeglądarki, IntersectionObserver jest obsługiwany przez wszystkie nowoczesne przeglądarki i istnieje stabilny polifil, który można dynamicznie ładować dla tych, które tego nie robią.

Ten interfejs API wywołuje wywołanie zwrotne, gdy elementy docelowe pojawiają się w widoku. To wywołanie zwrotne umożliwia wykonanie kodu, który w naszym scenariuszu polega na ładowaniu zasobów zgodnie z potrzebami.

To jest proste API, ale jest kilka części, które musisz zrozumieć.

Po pierwsze, jak utworzyć IntersectionObserver:

Tworzysz nowy obiekt IntersectionObserver, przekazując metodę wywołania zwrotnego i obiekt konfiguracji. Oddzwonię później.

Parametry konfiguracyjne informują obserwatora, jak blisko widocznego okienka podglądu powinien znajdować się obserwowany element przed uruchomieniem metody wywołania zwrotnego. Wartość rootMargin określa, jaki margines może być pionowy i poziomy.

W moim przykładzie mówię obserwatorowi, aby wywołał wywołanie zwrotne, gdy oglądany element znajduje się w obrębie 50 pionowych pikseli rzutni. Ustawiłem poziomo na 0, ponieważ rzadko używam przewijania w poziomie.

Wywołanie zwrotne uruchomi się w ciągu 100ms, ponieważ próg jest ustawiony na 0,1 sekundy.

Uproszczyłem tutaj metodę obserwacji, ale zwykle zaznaczam wszystkie elementy pewnego rodzaju i zapętlam wyniki. Tutaj pokazuję tylko jeden obraz.

Każdy element, który ten obserwator ma oglądać, musi być dodany osobno. Dlatego przeglądam wyniki, ponieważ każdy obraz, wideo lub wszystko, co musi zostać wyraźnie dodane.

Metoda wywołania zwrotnego jest logiką, która uruchamia się, gdy oglądany element pojawia się w widoku.

Metoda wywołania zwrotnego otrzymuje dwa parametry, cele, które wywołały wywołanie zwrotne (teoretycznie więcej niż jeden może spełnić twoje progi w tym samym czasie) oraz odniesienie do rzeczywistego obserwatora.

Wpisy są analogiczne do typowego obiektu opartego na zdarzeniu obsługi zdarzeń. Aby uzyskać dostęp do rzeczywistego elementu DOM, odwołujesz się do wartości docelowej wpisu. Obiekt ma również właściwości isIntersecting i intersectionRatio, których można użyć do określenia, czy chcesz działać na elemencie, czy nie.

W tym przykładzie „odwracam” atrybuty danych do ich pasującego atrybutu obrazu, co powoduje renderowanie obrazu. Ponieważ zawsze używam responsywnych obrazów, muszę odwrócić atrybuty data-srcset, data-src i data-size.

Do tej pory korzystałem z tej techniki z obrazami, filmami i mapami na różnych stronach.

Jeśli zastanawiasz się, robię to ze wszystkimi moimi zdjęciami, nawet tymi renderowanymi „nad fałdą”. Chociaż obrazy renderowane są z niewielkim opóźnieniem, nie mają większego wpływu na mój UX. Główna treść ładuje się bardzo szybko, zwłaszcza na urządzeniach mobilnych.

Obrazy są ładowane, ponieważ IntersectionObserver dla tych elementów powyżej elementów fold jest spełniony i natychmiast uruchamia się. Nie wymaga przewijania obrazu do widoku.

Mówiąc o przewijaniu do widoku, można również ułatwić ciągłe przewijanie za pomocą IntersectionObserver.

Pagination / Continuous Scroll

Kilka interesujących wskazówek od Google, które ostatnio zwróciły moją uwagę, to radzenie sobie z listami stronicowania i ciągłymi przewijaniami.

Pierwszy, ciągły zwój.

Stało się to powszechną taktyką na stronach związanych z wiadomościami w ciągu ostatnich kilku lat. W tym miejscu przewijasz artykuł, a gdy docierasz na dół, renderowany jest nowy artykuł. Ta technika zrodziła się z mediów społecznościowych, takich jak Twitter i Facebook, dzięki czemu możesz przewijać pocztę po wysłaniu wiadomości, aż do momentu, gdy będziesz dobrze spać.

Możesz użyć IntersectionObserver do oglądania elementu, może ostatniego akapitu lub dwóch, aby wiedzieć, kiedy czytnik kończy artykuł. Gdy te dolne elementy przewijają się do widoku, możesz użyć fetch, aby pobrać następny artykuł i dodać go poniżej bieżącego artykułu. Będziesz również chciał użyć API historii, które omówię wkrótce, aby zaktualizować adres URL.

Drugi scenariusz to indeksy list, podobnie jak sposób konfigurowania stron indeksu blogu. Każda strona wyświetla około 20 kart lub wpisów do wpisów na blogu. Na dole znajduje się standardowa sekcja „paginacja” z linkami do poprzedniej i następnej strony według numeru.

W scenariuszu ciągłego przewijania Google nie uruchomi następnego artykułu. Więc po prostu bądź tego świadomy.

Zamiast tego możesz wyświetlić listę artykułów pokrewnych, tak jak to robię na tej stronie, pod artykułem. Jeśli naprawdę chcesz ciągłego przewijania, możesz ukryć powiązane artykuły za elementem noscript przy użyciu techniki, którą opisałem wcześniej.

Dla stronicowania Google sugerujemy utworzenie dużej strony ze wszystkimi podanymi linkami. Możesz użyć znacznika kanonicznego, aby wskazać tę stronę główną z każdej strony indeksu. W ten sposób Google nie będzie próbował indeksować tych stron, które oferują niewiele realnej wartości, jeśli chodzi o wyszukiwanie.

Korzystanie z API historii

Historia API i ja nie mamy wspaniałej historii, ok, to jest mały policzek, ale prawdziwy. Osobiście nie korzystałem z tego API, ponieważ moje pierwsze doświadczenia z tym API, prawie 7 lat temu, były straszne.

Ostatnio zastanawiałem się nad tym ponownie, ponieważ Google polecił go w kilku ostatnich artykułach z poradnikami. I muszę przyznać, że za drugim razem wydaje się to „lepsze” i przydatne.

Nie „zanieczyszczę cię swoim początkowym doświadczeniem, ale pokryję to, co to znaczy dzisiaj.

Wspomniałem o używaniu go w sekcji ciągłego przewijania, ponieważ Google zaleca używanie go w tym scenariuszu. Ale jeśli korzystasz z aplikacji do obsługi pojedynczej strony, powinieneś także korzystać z tego API.

=> Wstaw grafikę paska adresu

Główną zaletą, jaką zapewnia, jest możliwość zmiany adresu URL w pasku adresu bez wywoływania żądania serwera, które powoduje pełne przeładowanie strony. Działa bardzo podobnie do techniki fragmentów mieszania, ale używa współdzielonego adresu URL.

W przykładzie kodu można zobaczyć historię Metoda pushState ma trzy parametry: stan, nazwa i adres URL. Dla naszych celów możesz przekazać wartość null do pierwszych dwóch parametrów, URL jest ważną wartością.

Zmiana adresu URL w tym miejscu zmienia adres URL w pasku adresu, ale tak jak wspomniałem, nie spowoduje żądania do serwera. W scenariuszu ciągłego przewijania należy wykonać wywołanie AJAX w tle i wstrzyknąć wynikowy HTML do DOM, tuż poniżej bieżącego artykułu lub elementu. Po zmianie adresu URL użytkownik zobaczy prawdziwy adres URL do nowego artykułu, a jeśli udostępnią adres URL, będzie to bezpośredni link do strony artykułu.

Upewnij się, że adres URL przekazany do metody pushState jest prawdziwym linkiem do nowego artykułu!

Będziesz również chciał upewnić się, że kod wywołania zwrotnego IntersectionObserver uruchomi aktualizację za każdym razem, gdy element docelowy przewinie się do aktywnego widoku, aby zmienić adres URL tak, aby pasował do bezpośredniej strony elementu. Na przykład, jeśli przewinę stronę do tyłu.

To, do czego Google naprawdę dąży, to użycie prawdziwego adresu URL, ale adresu URL sterowanego JavaScript. W scenariuszu ciągłego przewijania, gdy IntersectionObserver uruchamia się, można załadować nowy artykuł i dynamicznie zmienić adres URL. Teraz użytkownik zobaczy adres URL nowego artykułu i może ponownie załadować stronę.

Teraz Twoje adresy URL są zsynchronizowane, a Google zobaczy bezpośredni adres URL, gdy znajdzie linki, itp.

Ładowanie skryptów według potrzeb

Jeśli mnie znasz, wiesz, że zalecam używanie jak najmniejszej ilości JavaScript. W przypadku stron z treścią, takich jak ta, często mogę uciec po kompresji 15 KB lub mniej. Ale aplikacje internetowe mogą szybko to wysadzić.

Jak więc zachować nadmierną ilość JavaScript, aby zwiększyć zadowolenie użytkowników?

Po pierwsze, używaj tylko tego, czego naprawdę potrzebujesz. Na przykład, Netflix skrócił średni czas renderowania o 50% po wyeliminowaniu React z ich frontonu i ograniczeniu do renderowania po stronie serwera (SSR).

Ale co z tymi czasami, w których potrzebujesz biblioteki do obsługi aplikacji?

Załaduj je, gdy są potrzebne i tylko wtedy, gdy są potrzebne.

Wymaga to trochę finezji, ale może sprawić, że Twój UX będzie o wiele lepszy, co powinno poprawić zadowolenie i utrzymanie klientów przy jednoczesnym zmniejszeniu liczby zgłoszeń do pomocy technicznej.

Kto nie chce tych wskaźników KPI ?!

Używam tej techniki, aby załadować wszystkie moje skrypty, nazywam to doświadczeniem rozruchowym. Można jednak rozszerzyć go na skrypty ładowania na żądanie.

Oto skrypt, a ja go nie stworzyłem, zespół Chrome pierwotnie go udostępnił:

Zredukowalem to do sposobu wczytywania polifilu IntersectionObserver od czasu sprawdzenia go w tym artykule. Ale sztuczka polega na stworzeniu tablicy skryptów, które chcesz załadować do każdego z nich w rozsądnej kolejności, aby zarządzać zależnościami.

Uwaga: skrypt używa Notacja wąsów , stąd pole {{{script}}} na górze skryptu, aby wstrzyknąć odniesienia zależności skryptu strony.

Nie musisz się martwić o ładowanie asynchroniczne lub odroczenie, ponieważ wszystkie te skrypty są ładowane na żądanie, co powinno nastąpić po wyświetleniu treści podstawowej.

Główną istotą logiki jest tutaj tworzenie elementu skryptu dla każdego skryptu i dołączanie go do DOM. Po dodaniu przeglądarka ładuje skrypt tak, jakby był częścią początkowego znacznika.

Używam tej techniki do ładowania polifili, gdy i kiedy są potrzebne. Ale możesz wykorzystać tę technikę do załadowania skryptów, gdy wymaga tego akcja użytkownika. Zamiast polifilu może twoja aplikacja potrzebuje biblioteki, ale dopiero po spełnieniu określonego kryterium lub wykonaniu akcji użytkownika.

Teraz zamiast opóźniać czas pierwszej interakcji o 1-5 sekund (lub więcej), możesz odciążyć tę wydajność i uderzenie UX, aż będzie potrzebne. A może używasz tego do ładowania skryptów, gdy wątek interfejsu użytkownika jest bezczynny (użytkownik nie robi niczego), więc nie będzie kolidował z rzeczywistym doświadczeniem użytkownika.

Zawijanie go

Istnieje wiele powodów, dla których leniwe ładowanie zawartości strony pomaga w lepszym użytkowaniu. Podstawową zaletą jest szybszy czas interakcji lub lepsza szybkość strony. Ale właściwe zarządzanie leniwym ładowaniem może również zapewnić korzyści SEO i UX.

Coś, czego nie omówiłem w tym artykule, to to, że możesz także uczynić swoją dynamiczną zawartość bardziej dostępną dla osób niepełnosprawnych za pomocą czytników ekranu.

Google nagrodzi szybsze strony internetowe lepszymi rankingami, ale tylko wtedy, gdy ich pająki będą mogły uzyskać dostęp do leniwych treści. Aby to zrobić, musisz poprawnie zakodować swoje strony, aby udostępnić leniwe treści, nawet jeśli JavaScript nie jest włączony, co jest domyślnym przypadkiem dla pająków wyszukiwarek.

Można użyć Obserwatora skrzyżowań i interfejsu API historii, aby pomóc w zarządzaniu ładowaniem treści i zasobów zgodnie z potrzebami bez zrywania użytkownika. Narzędzia te mogą zwiększyć złożoność witryny i należy przetestować lub upewnić się, że te zmiany nie naruszają doświadczenia użytkownika.

Pomóż swojej witrynie stracić na wadze, zaangażuj więcej odwiedzających i uzyskaj lepsze rankingi wyszukiwania za pomocą leniwych treści.