Korzystanie z szybkiej, przejrzystej, intuicyjnej i atrakcyjnej wizualnie strony internetowej jest przyjemne i przekłada się na lepsze wyniki zaangażowania użytkowników. Te z kolei stanowią jeden z parametrów branych pod uwagę przy ocenie optymalizacji SEO strony www. Dotychczas jednak tzw. czynniki on-site związane z wydajnością i użytecznością strony były uznawane za istotne, choć nie najważniejsze. Nad przejrzystość i intuicyjność obsługi stawiano jakość optymalizacji poszczególnych elementów strony internetowej. Szczególną uwagę przykładano treści strony i jej elementów. W wielu przypadkach także kwestie marketingowe brały górę nad UX i UI.
Aktualizacja algorytmów Google w 2021
Wkrótce ta sytuacja się zmieni. Już w 2021 roku doczekamy się aktualizacji w całości poświęconej zagadnieniom Page Experience. Google oficjalnie ogłosiło plan wprowadzenia udoskonaleń w swoich algorytmach. Udoskonalenia te skupione będą głównie na analizie stron internetowych pod kątem ich przyjemnego użytkowania. W ten sposób Google kontynuuje realizację celu, jaki stawia sobie od dawna. By Internet stawał się lepszy, a użytkownicy Googla otrzymywali wyniki najwyższej jakości. Teraz nie tylko pod kątem treści, ale także użyteczności.
Jakie czynniki obejmie aktualizacja algorytmu Google?
Czynniki brane pod uwagę przez zaktualizowane algorytmy Google nazywane są łącznie wskaźnikami wygody użytkowania strony (oryg. Search signals for Page Experience). Podzielone są na dwie grupy. Pierwszą z nich są wprowadzone niedawno Core Web Vitals. W ich skład wchodzą trzy wskaźniki, które mierzą czas potrzebny do zrealizowania konkretnych procesów na stronie. Określają także jej wydajność, a przez to wygodę użytkowania. Na szczęście każdy z tych czynników jest szczegółowo opisany. Dzięki temu z dużą dokładnością określimy aktualny wynik każdego ze wskaźników Core Web Vitals naszej strony www. W razie potrzeby łatwo zdiagnozujemy potencjalne problemy i wprowadzimy zmiany.
Druga grupa czynników to kwestie techniczne, które już wcześniej były brane pod uwagę podczas optymalizacji SEO on-site. Do tej pory jednak protokół https://, czy dostosowanie mobile friendly pełniły rolę niejako uzupełniającą dla szeregu innych, ważniejszych elementów optymalizacji. Od 2021 ich istotność znacznie wzrośnie.
Ale po kolei. Zacznijmy od…
Core Web Vitals
Na początku maja 2020 roku zespół przeglądarki Google Chrome ogłosił nowy zestaw czynników powiązanych z technicznymi aspektami wydajności stron internetowych. Stanowią one pewnego rodzaju esencję technicznych parametrów strony i serwera. Pośród wielu tego typu wskaźników używanych dotychczas przez web developerów, z których można wymienić np. TTFB (ang. Time To First Byte), czy też czas wygenerowania kluczowych treści strony, specjaliści Google wybrali te najważniejsze, bezpośrednio wpływające na wygodę użytkowania strony internetowej z punktu widzenia użytkownika.
Core Web Vitals składają się z trzech wskaźników. Każdy z nich w pewnym zakresie określa nie tylko tempo ładowania strony, ale jej dostępności i interaktywności dla użytkownika.
Largest Contentful Paint (LCP)
Pierwszym z rodziny wskaźników Page Experience Core Web Vitals jest Largest Contentful Paint. LCP określa w sekundach czas potrzebny na wygenerowanie największego elementu w obszarze strony widocznym dla użytkownika (tzw. DOM). Głównym kryterium branym pod uwagę przy określaniu, który element strony jest największy, jest jego faktyczny wyświetlany na ekranie rozmiar. Do określenia wielkości elementów wyświetlanych w innym rozmiarze niż oryginalny (np. duże grafiki skalowane za pomocą CSS) algorytm sprawdzi i porówna oryginalny i wyświetlany rozmiar grafiki, a następnie wybierze mniejszy z nich. Z kolei elementy strony posiadające różnego rodzaju odstępy (margin, padding, border) będą mierzone bez ich uwzględniania.
Ciekawostką jest to, że element strony podlegający pomiarowi Largest Contentful Paint może się zmieniać w trakcie ładowania strony. W miarę jak poszczególne elementy strony są ładowane, algorytm bada na bieżąco, który z aktualnie wyświetlanych elementów jest największy. Punktem końcowym jego poszukiwań jest interakcja użytkownika (kliknięcie lub przescrollowanie strony).
Algorytmy analizują takie elementy strony jak:
- zdjęcia i grafiki (w tym te umieszczone wewnątrz grafik SVG),
- filmy video,
- elementy strony posiadające obrazkowe tło wczytywane funkcją CSS url(),
- bloki tekstowe.
W dużym, obarczonym pewnym błędem merytorycznym, uproszczeniu wartość wskaźnika LCP uznaje się za tempo ładowania strony. Określa on, jak szybko strona internetowa jest w stanie pokazać treść użytkownikowi. Nie jest jednak tożsamy z czasem załadowania kluczowej treści.
Wartością zalecaną dla parametru Largest Contentful Paint są maksymalnie 2,5 sekundy liczone od momentu rozpoczęcia ładowania strony.
First Input Delay (FID)
Szybkość ładowania tekstów, obrazów, filmów i innych elementów strony to jedno. Drugim ważnym czynnikiem wpływającym na Page Experience użytkownika jest to, jak szybko przeglądarka będzie w stanie odpowiedzieć na jego pierwszą interakcję (kliknięcie link, skorzystanie ze skryptu JS itp.). Czas potrzebny na odpowiedź na interakcję określa First Input Delay, w skrócie FID, należący do Core Web Vitals.
Podczas ładowania strony przeglądarka i serwer są zajęte wczytywaniem kolejnych zasobów. Od kodu HTML, przez treści i obrazy, kod CSS, po różnego rodzaju skrypty. Jednak my jako użytkownicy widzimy stronę i możemy z niej korzystać często na długo przed załadowaniem ostatniego zasobu. Wtedy klikając w przyciski, linki, czy próbując wywołać działanie jakiegokolwiek skryptu, natrafiamy na opór ze strony przeglądarki. Objawia się on kilkusekundowym opóźnieniem w jej reakcji na nasze kliknięcie. Wywołuje to w nas nieprzyjemne odczucia względem strony, którą przeglądamy i psuje ogólne wrażenie. Kolejne interakcje, z racji zakończenia ładowania zasobów i mniejszego obciążenia przeglądarki, zachodzą zazwyczaj znacznie sprawniej. Dlatego właśnie to ta pierwsza interakcja jest kluczem do sukcesu i przedmiotem badania wskaźnika First Input Delay.
First Input Delay często mylony jest z czasem TTI (ang. Time To Interaction) określającym czas, jaki jest potrzebny stronie do uzyskania pełnej interaktywności. “Stety” albo niestety, to nie to samo. FID mierzy czas odpowiedzi na pojedynczą, pierwszą interakcję użytkownika ze stroną. Nawet jeśli zajdzie ona jeszcze przed uzyskaniem pełnej interaktywności.
Wartość wskaźnika FID nie powinna przekraczać 100 milisekund.
Cumulative Layout Shift (CLS)
Wszyscy doświadczyliśmy chociaż raz takiej sytuacji, gdy w trakcie czytania tekstu strony nagle cała treść ucieka w dół. W jej miejsce pojawia się inna (np. banner reklamowy, ramka z filmem, zdjęcie itp.). Zapewne niejednokrotnie też kliknęliśmy zupełnie niezamierzony element strony, ponieważ pojawił się dokładnie w tym miejscu, gdzie przycisk, który faktycznie chcieliśmy kliknąć.
Wizualizacja problemu niespodziewanie przesuwającej się treści. Źródło: web.dev/Google
Cumulative Layout Shift, w telegraficznym skrócie, wyraża liczbą (ułamkiem) natężenie niespodziewanych przesunięć elementów strony mających miejsce podczas ładowania jej kolejnych elementów.
Wyrażając się bardziej precyzyjnie, jest to suma współczynników przesunięcia (layout shift score) każdego z elementów, które znajdują się w widocznym polu strony (DOM) i zostały przesunięte względem swojej pierwotnej pozycji.
Layout shift score to współczynnik przesunięcia obliczany dla każdego poszczególnego elementu strony osobno. Jest iloczynem dwóch czynników – czynnika wpływu (impact fraction) i czynnika odległości (distance fraction).
Pierwszy z nich – czynnik wpływu – określa obszar ekranu urządzenia, na który nagłe przesunięcie treści miało wpływ. Wyrażany jest proporcją obszaru zmienionego przesunięciem do całego obszaru ekranu urządzenia. Na przykład. Odwiedzamy stronę znajomej firmy. Pierwszy naszym oczom ukazał się akapit tekstu. Nad nim powinien znajdować się obrazek, który z racji większego rozmiaru, załadował się chwilę później. Pojawienie się grafiki powoduje przesunięcie tekstu w dół. Obszar, na który przesunięcie miało wpływ, obejmuje zarówno zdjęcie, jak i przesunięty przez nie tekst. Załóżmy, że oba te elementy zajmują obecnie 50% powierzchni ekranu telefonu. Zatem czynnik wpływu wyniesie 0,5.
Czynnik odległości mierzy dystans, o jaki został przesunięty pierwotny element strony. Podawany jest ponownie jako proporcja do całego ekranu. W powyższym przykładzie tekst został przesunięty w dół przez obrazek o odległość odpowiadającą 30% wysokości ekranu. Zatem czynnik odległości wynosi 0,3, a layout shift score tego elementu równy jest 0,15 (0,5 x 0,3). Jeśli akapit tekstu byłby jedynym przesuniętym elementem, to CLS tej strony wyniósłby tyle samo.
Rekomendowana dla wskaźnika Cumulative Layout Shift wartość nie powinna przekraczać 0,1.
Jeśli urządzenie, na którym przeglądamy stronę, jest w orientacji poziomej, wówczas jako punkt odniesienia algorytm przyjmie jego szerokość, a nie wysokość.
Warto jeszcze napisać, czym właściwie jest niespodziewane przemieszczenie. Tym razem definicja jest prosta. Za niespodziewane przemieszczenie uznaje się wszelkie ruchy elementów strony, które nie zostały wywołane interakcją użytkownika. Nie będą to zatem elementy rozwijane kliknięciem lub najechaniem (np. mechanizmy typu accordion), menu wyjeżdżające w panelu bocznym po kliknięciu ikony, czy też rozwijane pola wyszukiwarek.
Dotychczasowe sygnały o wydajności strony
Poza nowymi wskaźnikami Core Web Vitals, w mocy pozostają cały czas od dawna znane developerom i specjalistom SEO wytyczne, o których wspomnę tylko pokrótce.
Mobile Friendly
Tworzenie stron responsywnych jest już standardem. Dzisiaj częściej przeglądamy strony internetowe na naszym smartfonie niż komputerze stacjonarnym. Każda strona powinna zapewniać ten sam wysoki poziom pozytywnego Page Experience zarówno w wersji desktopowej, jak i mobilnej. Istnieje nawet trend mobile-first mówiący o tym, że warto w pierwszej kolejności zadbać o wygląd strony na smartfonach, a dopiero później dostosować ją do wyświetlania na dużych ekranach komputerów.
Warto także wspomnieć, że wyszukiwarka Google ocenia naszą stronę internetową dwukrotnie. Pierwszej oceny dokonuje robot indeksujący dla komputerów, a drugiej – robot dla urządzeń mobilnych. Oba roboty oceniają stronę i decydują, na których pozycjach wyświetlić ją użytkownikom poszczególnych rodzajów urządzeń. Może się zatem okazać, że choć w wyszukiwaniach na komputerach nasza strona znajduje się wysoko, to wyszukanie tej samej frazy na smartfonie nie wyświetli naszej strony w ogóle (lub będzie ona na znacznie dalszej pozycji).
Google Safe Browsing
Google przykłada ogromną wagę do kwestii bezpieczeństwa w sieci. Aby ułatwić użytkownikom ocenę poziomu bezpieczeństwa stron www, stworzyli usługę Google Safe Browsing. Roboty pracujące w obrębie tej usługi codziennie przeszukują miliardy witryn internetowych w poszukiwaniu zagrożeń. Analizują zarówno treści, jak i wszelkiego typu mechanizmy i skrypty. Jeśli wykryją złośliwe oprogramowanie lub próbę oszustwa – strona zostanie oznaczona jako niebezpieczna, a każdy użytkownik, który zdecyduje się ją odwiedzić, otrzyma ostrzeżenie.
Niestety często nasza strona może stać się siedliskiem niebezpiecznego oprogramowania, nawet jeśli sami prowadzimy zupełnie bezpieczną i legalną działalność. Mechanizmy złośliwego oprogramowania mogą zaatakować naszą stronę, wykorzystać luki w bezpieczeństwie i umieścić na niej różnego rodzaju zagrożenia bez naszej wiedzy. Dowiadujemy się o tym najczęściej właśnie z powodu alertów Google Safe Browsing, które otrzymują nasi klienci próbując do nas zajrzeć. Pozostaje wtedy samodzielnie lub z pomocą doświadczonego fachowca zdiagnozować, zlokalizować i usunąć zagrożenie ze strony, a następnie poprosić Google o ponowne sprawdzenie. Warto mieć na uwadze, że krążące po sieci algorytmy nie zawsze mają dobre zamiary, a dbanie o bezpieczeństwo naszej strony jest bardzo ważną kwestią.
Protokół HTTPS
Certyfikaty SSL niegdyś przeznaczone były wyłącznie instytucjom finansowym. Później szyfrowanej transmisji danych między serwerem a komputerem użytkownika używały także sklepy internetowe i wszystkie strony przetwarzające dane. Dzisiaj wymóg stosowania szyfrowanego protokołu HTTPS jest stawiany każdej, nawet najmniejszej stronie internetowej. Brak zainstalowanego certyfikatu SSL skutkuje oznaczeniem strony jako niebezpieczna w przeglądarkach internetowych. Niektóre programy antywirusowe reagują alertem o zagrożeniu, gdy chcemy odwiedzić stronę z nieaktywnym lub niewłaściwym certyfikatem SSL.
Jak na korzyści, jakie za sobą niesie, stosowanie protokołu HTTPS jest relatywnie proste i tanie. Najtańsze certyfikaty SSL kupimy już za 10 zł, istnieją także serwisy udostępniające je za darmo. Instalacja certyfikatu na serwerze trwa zaledwie kilka minut i najczęściej wystarczy na cały okres jego ważności. Zyskujemy za to gwarancję, że nikt nie będzie w stanie “podsłuchać” naszego połączenia z serwerem strony. Nawet jeśli taka sztuka by się powiodła, otrzymałby szyfr nic nie znaczących znaków.
Natrętne okienka pełnoekranowe
Nikt z nas nie lubi, gdy treść strony którą czyta, nagle przysłoni pełnoekranowa reklama lub pop-up informujący o jakże istotnej promocji. Google o tym wie i zwróci na to baczną uwagę przy ocenie Page Experience naszej strony internetowej. Nie możemy w tym przypadku mówić o jakichkolwiek dopuszczalnych liczbach, jak w przypadku Core Web Vitals. Należy zatem przyjąć, że jakakolwiek próba przeszkodzenia użytkownikowi w dostępie do pożądanej przez niego treści, będzie wpływała negatywnie na ocenę algorytmów Google.
Czy to oznacza zupełny zakaz stosowania pop-upów? Niekoniecznie. Pełnoekranowe okna można będzie nadal używać w ważnych przypadkach. Dobrym przykładem jest wyświetlenie prośby o akceptację polityki Cookies. Innym właściwym zastosowaniem będzie okno weryfikacji wieku na stronach dla pełnoletnich. Stosowanie reklam, czy pop-upów o treściach mniej istotnych (promocje, zapis do newslettera, komunikaty itp.) będzie wciąż możliwe. Będą musiały jednak zajmować rozsądną ilość miejsca na ekranie i nie przysłaniać kluczowych treści.
Aktualizacja algorytmów Google 2021 – kiedy?
Choć zmiany wprowadzane w aktualizacji algorytmów związanej z Page Experience wydają się znaczące i wymagające w wielu przypadkach sporych zmian w stronach internetowych, nie ma powodu do paniki. Specjaliści Google celowo poinformowali o nadchodzących zmianach z dużym wyprzedzeniem, abyśmy wszyscy mieli czas na dostosowanie stron do nowych wytycznych. Na decyzję o wcześniejszym poinformowaniu miała wpływ także pandemia COVID-19.
Oficjalne stanowisko Google w sprawie daty aktualizacji algorytmów Page Experience stanowi, że nastąpi ona nie wcześniej niż w 2021 roku. O ostatecznej dacie zostaniemy poinformowani z minimum 6-miesięcznym wyprzedzeniem.
Czasu jest zatem dużo. Już teraz dostępnych jest wiele narzędzi, które są w stanie dać nam precyzyjne raporty o wydajności i dostosowaniu naszej strony do wymagań Page Experience.
Jak się przygotować?
Przede wszystkim warto określić, kim jest osoba wchodząca na naszą stronę. Czego szuka, jakich informacji, w jakiej formie, czy jest w stanie je łatwo odszukać? Jaka powinna być jej kolejna akcja? Czy ma się z nami skontaktować (i czy wie jak)? Czy ma złożyć zamówienie? Cały ten proces składa się na analizę strony pod kątem dwóch aspektów. Po pierwsze User Experience. UX odpowiada na pytanie “Czy na stronie jest to, czego szuka użytkownik?”. Druga sprawa to User Interface (UI) odpowiadający na pytanie “Czy wie, jak to znaleźć?” oraz “Czy nie ma z tym problemów?”. Takie analizy możemy przeprowadzić sami na podstawie danych, jakie mamy o naszych klientach. Możemy także powierzyć ich przeprowadzenie specjalistom od UX i UI.
Narzędzia do optymalizacji Page Experience
Jeśli zdecydujemy się zadbać o naszą stronę samodzielnie, mamy do dyspozycji wiele narzędzi, które nam w tym pomogą:
- raporty Podstawowe wskaźniki internetowe oraz Obsługa na urządzeniach mobilnych w Google Search Console
- raporty o wydajności dostarczane przez Google PageSpeed Insights
- raporty o wydajności od GTmetrix
- Test optymalizacji mobilnej sprawdzający mobile-friendly
- dane o zaangażowaniu i przepływie ruchu w Google Analytics
- test statusu w Google Safe Browsing
- test antywirusowy od Sucuri i VirusTotal
a także:
- narzędzie do tworzenia map ciepła i śledzenia ruchu Hotjar
- narzędzie do testów A/B i optymalizacji UI Google Optimize
- tryb “Zbadaj” (Chrome) lub “Zbadaj element” (Firefox) do sprawdzenia, jak wyświetla się nasza strona na ekranach różnej wielkości.
Celowo nie ująłem w zestawieniu narzędzi do prototypowania i makietowania ze względu na to, że w artykule mówimy głównie o drobnych zmianach już istniejących serwisów.
