Przewodnik marketera dotyczący renderowania po stronie serwera

Opublikowany: 2021-07-26

Język programowania nie jest łatwym do zrozumienia pojęciem, zwłaszcza gdy Twoja praca SEO skupiała się przede wszystkim na stronie nietechnicznej. Ale oto rzecz dotycząca technicznego SEO: znajomość tego pomaga zrozumieć zmiany, które Twoja witryna musi wprowadzić, aby uzyskać lepszą pozycję w wyszukiwarkach.
Ponieważ Google wypuściło Core Web Vitals w czerwcu, co jest częścią aktualizacji Page Experience, każdy marketer, który nie przyjrzał się bliżej technicznemu SEO, będzie chciał to zrobić teraz.
A kiedy Twoja witryna jest zbudowana na frameworkach JavaScript, jednym z elementów, do których należy się zagłębić, jest renderowanie po stronie serwera.

Co to jest renderowanie po stronie serwera?

Renderowanie po stronie serwera ma miejsce, gdy proces pobierania strony internetowej, przechwytywania kodu, wyświetlania zawartości na ekranie — wszystko to dzieje się na serwerze.
W SSR:

  • Serwer wysyła gotową do renderowania odpowiedź do przeglądarki;
  • Przeglądarka renderuje stronę, przygotowując ją do przeglądania, a następnie przeglądarka pobiera JavaScript;
  • Przeglądarka następnie uruchamia React, gdy strona jest gotowa do wyświetlenia i
  • Strona internetowa jest wtedy gotowa do interaktywności.

Sposób, w jaki to wszystko się dzieje, sprawił, że jest to lepsza opcja dla innych typów renderowania: renderowania po stronie klienta (gdzie JavaScript jest renderowany przez przeglądarkę, czyli klienta) i renderowania dynamicznego (gdzie użytkownicy otrzymują treści renderowane przez klienta i serwery oraz wyszukiwarki uzyskać zawartość renderowaną po stronie serwera). Nawet Google zachęca programistów stron internetowych do wyboru renderowania po stronie serwera.
Czemu?

[Studium przypadku] Zarządzanie indeksowaniem botów Google

Mając ponad 26 000 referencji produktów, 1001Pneus potrzebował niezawodnego narzędzia do monitorowania wydajności SEO i upewnienia się, że Google przeznacza swój budżet na indeksowanie odpowiednich kategorii i stron. Dowiedz się, jak skutecznie zarządzać budżetem indeksowania witryn e-commerce za pomocą OnCrawl.
Przeczytaj studium przypadku

Zalety SSR

  • Pomaga załadować stronę internetową, gdy połączenie internetowe użytkownika jest wolne
  • Pozwala na szybkie ładowanie stron, przyczyniając się do lepszego doświadczenia użytkownika
  • Tworzy pełną stronę HTML, zapobiegając czasochłonnemu procesowi pobierania danych
  • Umożliwia ładowanie stron ze wszystkimi jego elementami, nawet jeśli użytkownik ma urządzenie o zbyt małej mocy, takie jak smartfon starej generacji
  • Przyczynia się do wydajności SEO, ponieważ umożliwia wyszukiwarkom dokładne indeksowanie i indeksowanie stron; boty mogą łatwo indeksować strony, ponieważ rozumieją JS

Ogólnie rzecz biorąc, SSR pomaga lepiej obsługiwać klientów online, ponieważ odwiedzający witrynę nie będą czekać na wyświetlenie stron na swoich urządzeniach. Dzięki szybkim przejściom między stronami Twoi użytkownicy nigdy nie dostaną pustej strony, dzięki czemu będą mogli natychmiast skorzystać z Twojej witryny.
Ponieważ Google wzmacnia swoją kampanię, aby zapewnić dokładniejsze wyniki dzięki ulepszeniom algorytmu opartym na doświadczeniu użytkownika, SSR jest lepszy pod względem wydajności SEO w porównaniu z renderowaniem klient-serwer.
Ale jak wszystko inne w marketingu cyfrowym, pojedyncze podejście rzadko działa dla wszystkich. W niektórych przypadkach renderowanie po stronie serwera może stanowić problem. Jak mówi Google, SSR „nie jest srebrną kulą”.

Wady SSR

  • Wymaga to dużo pracy, ponieważ dwukrotnie wykonuje tę samą aplikację: raz na kliencie, a potem na serwerze.
  • Może to opóźnić czas do pierwszego bajtu
  • Może to wpłynąć na wewnętrzne linki lub jakość strony, ponieważ nie może renderować JS stron trzecich (np. treści generowanych przez użytkowników, recenzji produktów itp.) ani żadnych treści, które nie znajdują się w statycznym kodzie HTML; boty nie będą mogły ich zobaczyć
  • Nieaktualizowane adresy URL mogą oznaczać, że boty nie będą mogły zobaczyć nowych artykułów, co może prowadzić do utraty ruchu

Innym kluczowym aspektem SSR jest to, że oznacza to koszty dla firmy, ponieważ renderowanie odbywa się na twoich serwerach. Ale jest to koszt, w który możesz chcieć zainwestować, ponieważ ten rodzaj renderowania może przyczynić się do optymalizacji Core Web Vitals.

Dlaczego SSR ma znaczenie dla CWV?

Twórcy stron internetowych i SEO pracowali od miesięcy w oczekiwaniu na wprowadzenie CWV. Około 60 procent ankietowanych agencji SEO zajęło się poprawianiem wyników CWV klientów. Jeśli używasz SSR, być może nie będziesz musiał wykonywać znacznej pracy, aby spełnić oczekiwania.
Ponieważ SSR ułatwia szybkość, Twoja witryna internetowa może już dobrze radzić sobie z jednym ze wskaźników: Największe malowanie treści (LCP).
LCP skupia się na postrzeganym doświadczeniu ładowania. Mierzy czas ładowania strony, gdy największy obraz lub tekst strony internetowej jest widoczny w oknie roboczym. To, do czego chcesz dążyć, aby uzyskać dobry wynik, to 75-procentowe ładowanie strony w <2,5 sekundy.
Głównymi wyzwaniami w uzyskaniu dobrego LCP są blokujące renderowanie JS i CSS; wolne czasy ładowania zasobów, powolna reakcja serwera i renderowanie po stronie klienta.
Przejście na SSR jest tylko jednym z rozwiązań poprawy wyniku LCP, ponieważ Twój problem może nie ograniczać się do CSR. Będziesz chciał współpracować z programistami internetowymi, aby najpierw określić, co powoduje opóźnienia w LCP.
Jeśli źródło strony ujawnia kod, który nie ma sensu (a Twój programista Ci to powie), to problemem może być CSR. Jeśli twój programista odkryje, że TTFB jest słaby, możesz mieć do czynienia z powolnym czasem odpowiedzi serwera.
Inne wskaźniki CWV to:

  • Opóźnienie pierwszego wejścia, które koncentruje się na responsywności, oraz
  • Kumulatywne przesunięcie układu, które koncentruje się na stabilności wizualnej.

Oba nie są istotne dla SSR, więc są to metryki, w które możesz chcieć włożyć więcej wysiłku, ponieważ SSR częściowo zajmuje się LCP.

Jak sprawdzić, czy SSR poprawnie renderuje strony internetowe?

Najlepszym sposobem sprawdzenia, czy SSR prawidłowo renderuje Twoje strony, jest użycie narzędzi. Jednym z nich jest Test Przyjazności Mobilnej. Jest to narzędzie, które zapewnia migawkę tego, jak Twoje strony internetowe będą wyglądały dla Googlebotów, i wyświetla ewentualne błędy podczas renderowania.
Google Search Console zawiera również narzędzie do sprawdzania adresów URL, które pozwala sprawdzić, czy wyszukiwarka renderuje Twoje strony. Użyj go, aby sprawdzić brakujące treści lub jakiekolwiek błędy związane z zablokowanym JavaScript lub CSS.
Możesz także przejść do View Render Source, który jest darmowym rozszerzeniem Chrome. Powie Ci, jak przeglądarka renderuje stronę z oryginalnego kodu HTML do działającego DOM. Rozszerzenie ilustruje różnicę między wersją surową a wersją renderowaną, z podkreśleniem sposobu, w jaki strony JS modyfikowały strony w czasie renderowania.
Innym rozszerzeniem Chrome do wypróbowania jest SiteCrawler. Robot indeksujący obsługujący JS indeksuje mapy witryn, linki i obrazy oraz porównuje strony obsługujące tylko HTML i strony obsługujące JS.

Podsumowanie

Znaczna część prac SEO polega na optymalizacji stron, które zostały już „dostarczone” do klienta lub przeglądarki. Ale kiedy zbadasz, w jaki sposób te strony „dostają się” do klienta i jak możesz poprawić, jak to się dzieje, użytkownicy lepiej spędzają czas w Twojej witrynie.
Boty poprawnie indeksują Twoje strony. Twoje strony zostaną zindeksowane. Twoja witryna ma lepszą pozycję w wyszukiwarkach.
Aktualizacje wyszukiwarek wraz ze zmianami w zachowaniach konsumentów wymagają również zmian w Twojej witrynie. Wraz z nadchodzącym wdrożeniem CWV, teraz jest dobry moment, aby przyjrzeć się SSR, aspektowi technicznemu, który wpłynąłby na Twoje wysiłki SEO.