Jak poprawić podstawowe parametry sieci na wielojęzycznej stronie internetowej?

Core Web Vitals to zbiór wskaźników mierzących jakość doświadczenia użytkownika na stronach internetowych. Google liczy je jako sygnały rankingowe i dlatego są one również ważne dla (wielojęzycznego) SEO. Jeśli je zaniedbasz, ryzykujesz, że zostaniesz odrzucony zarówno przez odwiedzających, jak i wyszukiwarki.

Aby uniknąć tego scenariusza, w tym poście dowiesz się wszystkiego, co musisz wiedzieć o poprawie tych wskaźników na swojej wielojęzycznej stronie internetowej. Wyjaśnimy, czym są Core Web Vitals, jak przetestować bieżącą wydajność witryny oraz krok po kroku instrukcje, jak poprawić każdy z tych wskaźników w witrynie.

Czym są Core Web Vitals?

Jak wspomniano, Core Web Vitals mierzy doświadczenia użytkowników na stronach internetowych. Wszystkie z nich są w jakiś sposób związane z szybkością ładowania i interaktywnością witryny. Wskaźniki te zostały wprowadzone przez Google w 2020 roku i stały się częścią ich algorytmu wyszukiwania. Przyjrzyjmy się im po kolei.

Farba o największej zawartości (LCP)

Pierwszym z nich jest Largest Contentful Paint (LCP). Mierzy on czas ładowania strony do momentu, w którym staje się ona widoczna i użyteczna. Określa to, wykrywając największy element treści strony internetowej, który często jest obrazem lub blokiem tekstowym, i kiedy staje się widoczny dla odwiedzających.

Interwał ten jest mierzony w sekundach i używany jako wynik LCP. Google zdefiniowało szereg punktów odcięcia, aby określić, jaki rodzaj czasu powinna osiągnąć Twoja witryna.

Jak widać powyżej, dobry wynik to do 2,5 sekundy na załadowanie elementu LCP. Do 4 sekund jest akceptowalne, ale powinno zostać poprawione, a wszystko powyżej tej wartości Google uważa za zbyt długie.

Łączna zmiana układu (CLS)

Ten kolejny wskaźnik śledzi stabilność układu strony internetowej podczas jej ładowania, co oznacza, jak duży ruch wykazuje, gdy na stronie pojawiają się nowe elementy. Nazywa się to Cumulative Layout Shift lub CLS.

Dlaczego ma to znaczenie?

Wysoki stopień CLS może zakłócać interakcję użytkownika z witryną. Oprócz tego, że po prostu nie wygląda dobrze, może również sprawić, że stracą swoje miejsce na stronie z powodu przesuwającego się tekstu lub spowodują przypadkowe kliknięcie niewłaściwego elementu, ponieważ przesunie się on w niewłaściwym momencie.

CLS jest obliczany poprzez sprawdzenie, jak bardzo układ porusza się podczas ładowania, a także jak duże są te ruchy. Te dwa współczynniki są mnożone przez siebie, aby uzyskać wynik.

Wynik CLS poniżej 0,1 jest dobry; do 0,25 wymaga poprawy, a wszystko powyżej jest niedopuszczalne.

Jedna uwaga: ruch strony w ciągu 500 ms od interakcji użytkownika ze stroną (np. kliknięcie) nie wpłynie na wynik CLS. Są one uważane za celowe.

Interakcja do następnej farby (INP)

Interaction to Next Paint lub INP to najnowszy dodatek do metryk Core Web Vitals. Zastąpi ona First Input Delay (FID), jeden z oryginalnych pomiarów, w marcu 2024 roku.

Oba śledzą czas między interakcją odwiedzającego z elementem strony a szybkością jego reakcji. Oczywiście im szybsza reakcja, tym lepiej.

Podczas gdy First Input Delay analizuje tylko pierwszą interakcję odwiedzającego, Interaction to Next Paint śledzi wszystkie zaangażowania na stronie podczas wizyty i pokazuje najgorszy wynik. W ten sposób można uzyskać dokładniejszy obraz responsywności strony.

Jaki jest dobry wynik INP?

Do 200 ms jest dobrze, a do 500 ms jest w porządku; wszystko, co przekroczy tę wartość, negatywnie wpłynie na postrzeganie witryny przez Google.

Jak przetestować podstawowe parametry witryny?

Gdy już wiesz, czym dokładnie są Core Web Vitals, kolejnym logicznym pytaniem jest, jak sprawdzić, gdzie znajduje się Twoja witryna? Najprostszym sposobem, aby się tego dowiedzieć, jest skorzystanie z narzędzia do testowania szybkości, takiego jak PageSpeed Insights.

Wystarczy wpisać adres URL witryny u góry i uruchomić test. Po zakończeniu nie tylko poinformuje Cię, czy Twoja witryna przeszła ocenę Core Web Vitals, ale także poda wartości dla każdego z wymienionych punktów danych.

Jeśli są dostępne, otrzymujesz mieszankę zarówno rzeczywistych, jak i laboratoryjnych wyników. Obejmuje to informacje z CrUX, gdzie Google zebrał dane użytkowników witryny z przeglądarki Chrome. Jeśli ich nie ma, otrzymujesz tylko pomiary z Lighthouse, która oblicza je ad hoc.

Inne narzędzia, które mogą powiedzieć o wydajności Core Web Vitals, to GTmetrix, WebPageTest lub rozszerzenie Chrome Web Vitals.

Poprawa podstawowych funkcji sieciowych na wielojęzycznych stronach internetowych

Co więc powinieneś zrobić, jeśli twoje wartości są mniej niż gwiezdne? Porozmawiajmy o tym teraz.

Od tego momentu będziemy krok po kroku wyjaśniać, jak poprawić każdy wskaźnik Core Web Vital w wielojęzycznej witrynie. Omówimy, jak zrobić to ręcznie, a także łatwy sposób na zrobienie tego dla użytkowników WordPressa za pomocą wtyczki WP Rocket.

WP Rocket sprawia, że osoby bez wiedzy technicznej mogą szybko i bez wysiłku wdrożyć zaawansowane ulepszenia wydajności. Jest to jedna z najpotężniejszych i najbardziej przyjaznych dla początkujących wtyczek do buforowania.

Ogólne ulepszenia wydajności

Zacznijmy od kilku ogólnych wskazówek, jak upewnić się, że witryna ładuje się szybko:

• Wybierz dobrą firmę hostingową - Jakość dostawcy usług hostingowych, u którego znajduje się witryna, ma duży wpływ na szybkość jej ładowania. Upewnij się, że wybierasz renomowanego dostawcę, czytając porównania prędkości i recenzje użytkowników przed podjęciem decyzji.
• Aktualizuj swoją witrynę - jeśli Twoja witryna jest oparta na systemie zarządzania treścią, takim jak WordPress, upewnij się, że wszystko jest aktualne. Oznacza to samo oprogramowanie, a także wszelkie wtyczki, motywy, wersję PHP serwera i wszystko inne należące do witryny. Tylko w ten sposób możesz skorzystać z nowych ulepszeń prędkości.
• Używaj mniejszej liczby wtyczek - Jednocześnie staraj się nie przesadzać z dodatkami dodawanymi do witryny. Każda wtyczka i rozszerzenie zawiera dodatkowy kod, który może potencjalnie spowolnić działanie witryny. Ogranicz więc to, co masz na swojej stronie do absolutnego minimum.
• Postaw na wysokiej jakości komponenty - W przypadku rozszerzeń, które znajdą się na Twojej stronie, upewnij się, że są one wysokiej jakości i zoptymalizowane pod kątem wydajności, takie jak Weglot.

Powyższe wskazówki stanowią dobry fundament dla ogólnie szybkiej wydajności, zanim przejdziesz do bardziej szczegółowych środków.

Naprawianie największej szkodliwej farby

Istnieją dwa główne sposoby na ulepszenie Largest Contentful Paint: ogólna optymalizacja szybkości ładowania strony (jak opisano powyżej) i przyspieszenie dostarczania elementów LCP.

Jaki jest twój element LCP? PageSpeed Insights powie ci to w sekcji Diagnostyka.

Wdrożenie buforowania i kompresji

Buforowanie i kompresja to dwie podstawowe techniki poprawy wydajności witryny. Pierwsza z nich oznacza przechowywanie renderowanych danych strony w celu przyspieszenia dostępu do nich dla odwiedzających. Jest to szczególnie skuteczne w przypadku korzystania z WordPressa do zasilania witryny.

Dlaczego?

W CMS, takim jak WordPress, strony są zwykle tworzone dynamicznie z kodu PHP i treści pobieranych z bazy danych. Serwer przekształca je w dokumenty HTML i wysyła do przeglądarki.

Buforowanie przyspiesza ten proces, przechowując wstępnie renderowane wersje HTML stron internetowych na serwerze, dzięki czemu można je wysyłać bezpośrednio do odwiedzających. Może to wyeliminować kilka podróży w obie strony na wizytę i sprawić, że doświadczenie użytkownika będzie znacznie szybsze i lepsze.

Z drugiej strony kompresja jest tym samym, co tworzenie plików zip, tyle że odbywa się na serwerze zamiast na komputerze domowym. Zmniejsza ona pliki tworzące stronę internetową, dzięki czemu mogą być one szybciej pobierane i wyświetlane.

Aby aktywować zarówno buforowanie, jak i kompresję na serwerze, należy edytować plik o nazwie .htaccess. Zawiera on ważne dyrektywy dotyczące funkcjonalności serwera WWW i zazwyczaj znajduje się w katalogu głównym witryny.

Możesz skopiować i wkleić poniższy kod, aby aktywować obie wyżej wymienione techniki optymalizacji prędkości:

<IfModule mod_deflate.c>
   # Compress HTML, CSS, JavaScript, Text, XML and fonts
   AddOutputFilterByType DEFLATE application/javascript
   AddOutputFilterByType DEFLATE application/rss+xml
   AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
   AddOutputFilterByType DEFLATE application/x-font
   AddOutputFilterByType DEFLATE application/x-font-opentype
   AddOutputFilterByType DEFLATE application/x-font-otf
   AddOutputFilterByType DEFLATE application/x-font-truetype
   AddOutputFilterByType DEFLATE application/x-font-ttf
   AddOutputFilterByType DEFLATE application/x-javascript
   AddOutputFilterByType DEFLATE application/xhtml+xml
   AddOutputFilterByType DEFLATE application/xml
   AddOutputFilterByType DEFLATE font/opentype
   AddOutputFilterByType DEFLATE font/otf
   AddOutputFilterByType DEFLATE font/ttf
   AddOutputFilterByType DEFLATE image/svg+xml
   AddOutputFilterByType DEFLATE image/x-icon
   AddOutputFilterByType DEFLATE text/css
   AddOutputFilterByType DEFLATE text/html
   AddOutputFilterByType DEFLATE text/javascript
   AddOutputFilterByType DEFLATE text/plain
   AddOutputFilterByType DEFLATE text/xml

   # Remove browser bugs (only needed for really old browsers)
   BrowserMatch ^Mozilla/4 gzip-only-text/html
   BrowserMatch ^Mozilla/4\.0[678] no-gzip
   BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
   Header append Vary User-Agent
</IfModule>

<IfModule mod_expires.c>
   ExpiresActive On

   # Images
   ExpiresByType image/jpeg "access plus 1 year"
   ExpiresByType image/gif "access plus 1 year"
   ExpiresByType image/png "access plus 1 year"
   ExpiresByType image/webp "access plus 1 year"
   ExpiresByType image/svg+xml "access plus 1 year"
   ExpiresByType image/x-icon "access plus 1 year"

   # Video
   ExpiresByType video/webm "access plus 1 year"
   ExpiresByType video/mp4 "access plus 1 year"
   ExpiresByType video/mpeg "access plus 1 year"

   # Fonts
   ExpiresByType font/ttf "access plus 1 year"
   ExpiresByType font/otf "access plus 1 year"
   ExpiresByType font/woff "access plus 1 year"
   ExpiresByType font/woff2 "access plus 1 year"
   ExpiresByType application/font-woff "access plus 1 year"
   ExpiresByType application/font-woff2 "access plus 1 year"

   # CSS, JavaScript
   ExpiresByType text/css "access plus 1 year"
   ExpiresByType text/javascript "access plus 1 year"
   ExpiresByType application/javascript "access plus 1 year"

   # Others
   ExpiresByType application/pdf "access plus 1 year"
   ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>

Oba fragmenty kodu zostały udostępnione dzięki uprzejmości GTmetrix i działają dla serwerów Apache. Instrukcje dla innych serwerów, takich jak NGINX, można znaleźć online, na przykład w tym samouczku w KeyCDN.

Jeśli wydaje się to onieśmielające, możesz osiągnąć to samo za pomocą wspomnianej wcześniej wtyczki WP Rocket. W tym przypadku wystarczy zainstalować i aktywować wtyczkę - automatycznie implementuje ona zarówno kompresję, jak i buforowanie, w tym dla urządzeń mobilnych.

Optymalizacja kodu i jego dostarczania

Wszystko, co możesz zrobić, aby usprawnić dostarczanie i przetwarzanie kodu witryny, pomoże ulepszyć Largest Contentful Paint na Twojej wielojęzycznej stronie internetowej. Przyjrzyjmy się kilku dobrym opcjom w tym zakresie:

• Usunięcie niepotrzebnych znaczników - jeśli w witrynie znajduje się dużo zbędnego kodu JavaScript i CSS, można poprawić wydajność, eliminując wszystko, co nie jest absolutnie konieczne.
• Minifikacja - oznacza to usunięcie białych znaków i komentarzy z plików stron internetowych. Zmniejsza to rozmiar plików, dzięki czemu są one szybciej pobierane i przetwarzane.
• Optymalizacja CSS i JavaScript - tutaj konfigurujesz pliki witryny tak, aby nie blokowały ładowania reszty witryny. Jest to niesławny komunikat "wyeliminuj zasoby blokujące renderowanie", który możesz otrzymać od narzędzi do testowania prędkości. Dwa popularne narzędzia do tego celu to atrybuty defer i async. Odpowiednio, przenoszą one wykonywanie JavaScript na koniec kolejki ładowania i nakazują przeglądarce pobieranie plików w tle i wykonywanie ich dopiero po ich udostępnieniu.

Do ręcznej minifikacji można użyć narzędzi takich jak Minifier lub Grunt. Optymalizacja CSS i JavaScript zwykle oznacza wiele analiz tego, co blokuje ładowanie stron. Narzędzia do testowania prędkości poinformują Cię o problematycznych skryptach.

Następnie należy ręcznie dodać do nich tagi defer i async. Wyglądają one następująco:

<script async src="important.js"></script>
<script defer src="not-so-important.js"></script>

Możesz także podzielić część kodu, aby na początku załadować tylko to, co jest niezbędne. Więcej na ten temat poniżej, gdy będziemy mówić o optymalizacji INP.

Jeśli chcesz zautomatyzować te procesy, WP Rocket może zminimalizować kod, usunąć nieużywany CSS, odroczyć JavaScript i załadować go asynchronicznie, po prostu zaznaczając kilka pól.

Optymalizacja obrazów

Optymalizacja obrazów oznacza zmniejszenie rozmiaru elementów wizualnych na stronie internetowej bez pogorszenia jakości. Jest to świetna ogólna poprawa wydajności i szczególnie pomaga poprawić Largest Contentful Paint, ponieważ obrazy często są elementami LCP.

Jak zoptymalizować obrazy w witrynie?

• Tłumaczenie obrazów - tłumaczenie witryny nie ogranicza się tylko do tekstu. Będziesz musiał również przekonwertować tekst na zdjęciach i/lub użyć bardziej odpowiednich kulturowo obrazów. Na szczęście, Weglot pomoże ci w tym obszarze.
• Kompresja - podobnie jak w przypadku plików tekstowych, można usunąć niepotrzebne dane z obrazów, aby zmniejszyć ich rozmiar.
• Używaj nowoczesnych formatów - obrazy w formatach nowej generacji, takich jak WebP lub AVIF, są znacznie mniejsze niż JPG lub PNG, a jednocześnie wyglądają równie dobrze.
• Prawidłowy rozmiar elementów wizualnych - wyświetlaj obrazy, które są tak duże, jak pojawiają się na Twojej stronie. W przeciwnym razie zmuszasz odwiedzających do ładowania niepotrzebnych danych.
• Włącz leniwe ładowanie - ta technika ładuje tylko obrazy, które są faktycznie widoczne w przeglądarce podczas początkowego ładowania i pobiera te dalej w dół strony, gdy odwiedzający przewijają. Zapobiega to również marnowaniu przepustowości na obrazy spoza LCP, dzięki czemu te ważne mogą ładować się szybciej.

Dostępne narzędzia

Możesz użyć narzędzi takich jak TinyPNG, aby skompresować obrazy i przekonwertować je na inne formaty plików. Coś takiego jak Image Resizer może również przyciąć je do dowolnych potrzebnych wymiarów. Opcje te można również znaleźć w WordPress w sekcji Ustawienia > Media.

Ponadto, jeśli korzystasz z najnowszej wersji WordPressa (lub czegokolwiek późniejszego niż wersja 5.4), Twoja witryna powinna mieć domyślnie włączone leniwe ładowanie.

Jeśli chcesz automatycznego rozwiązania, jest Imagify. Jest to łatwa wtyczka do optymalizacji obrazów, która dobrze współpracuje z WP Rocket. Może automatycznie przetwarzać obrazy, aby były lżejsze, jednocześnie równoważąc jakość i wydajność. Wtyczka konwertuje wizualizacje na WebP i Avif, zmienia rozmiar dużych obrazów i automatycznie wyświetla zoptymalizowane wersje w witrynie WordPress.

Ponadto WP Rocket oferuje leniwe ładowanie nie tylko obrazów, ale także tła CSS i osadzonych multimediów, takich jak filmy. Ponadto można wykluczyć media z leniwego ładowania, gdy ma to sens.

Korzystanie z sieci CDN

Sieć dostarczania treści (CDN) składa się z wielu połączonych ze sobą komputerów zlokalizowanych w różnych częściach świata, które zawierają pliki witryny. Jej celem jest dostarczenie ich odwiedzającym z najbliższej im lokalizacji i zrobienie tego tak szybko, jak to możliwe. Jest to szczególnie ważne w przypadku witryn wielojęzycznych z międzynarodową publicznością.

Z tego powodu Weglot automatycznie konfiguruje CDN, dzięki czemu można szybko dostarczać przetłumaczone treści na całym świecie. Jeśli nie jesteś użytkownikiem Weglot , zazwyczaj musisz zarejestrować się w sieci CDN i skonfigurować ją dla swojej witryny. Różni się to w zależności od dostawcy; oto przykładowe instrukcje.

Jeśli potrzebujesz pomocy, WP Rocket ma dedykowane dodatki dla Sucuri i Cloudflare, dwóch popularnych rozwiązań. Umożliwiają one szybszą i łatwiejszą konfigurację tych sieci dostarczania treści dla witryny.

Możesz także włączyć inne sieci w ustawieniach CDN, podając CNAME swojego dostawcy.

Wreszcie, WP Rocket ma również własną sieć o nazwie RocketCDN, którą można skonfigurować automatycznie z poziomu wtyczki. Ponadto zdolność WP Rocket do zmniejszania plików kodu może zmniejszyć ruch i koszty CDN.

Adresowanie skumulowanego przesunięcia układu

Następny na naszej liście Core Web Vitals do poprawy na wielojęzycznej stronie internetowej jest CLS. Oto, jak możesz odnieść sukces w tym dziale.

Dołącz atrybuty rozmiaru obrazu

Jednym z największych czynników wpływających na złe wyniki CLS są często obrazy bez zdefiniowanych atrybutów wysokości i szerokości.

Jeśli nie określisz, jak duży ma być obraz na ostatecznej stronie, przeglądarka nie może zarezerwować dla niego odpowiedniej ilości miejsca. W rezultacie, gdy rzeczywisty rozmiar różni się od symbolu zastępczego, obraz nagle pojawia się, spychając wszystko pod nim. Może się to zdarzyć zwłaszcza w przypadku leniwie ładowanych multimediów, które nie są wyświetlane podczas pierwszego ładowania strony.

Tak więc pierwszą zasadą optymalizacji CLS jest dodanie definicji wysokości i szerokości do obrazów. Jak to zrobić?

W czystym HTML wygląda to po prostu tak:

<img src="image.jpg" alt="Insert alt text" width="600" height="700">

Jeśli korzystasz z edytora bloków WordPress, powinien on automatycznie ustawić wymiary, ale możesz także zdefiniować określone rozmiary podczas tworzenia treści.

Dodatkowo WP Rocket ma opcję dodawania brakujących deklaracji szerokości i wysokości do plików multimedialnych, na wypadek gdybyś je przeoczył.

Zarezerwuj miejsce na osadzanie, ramki Iframe i miejsca na reklamy

Ta sama zasada, co powyżej, dotyczy również treści dynamicznych, takich jak elementy osadzone lub reklamy. One również potrzebują definicji wysokości i szerokości, aby uniknąć przesuwania się po pozostałej części układu strony.

Problem polega na tym, że nie zawsze można kontrolować, jak duże będą te elementy, ponieważ często pochodzą one ze źródeł zewnętrznych. W takim przypadku dobrą praktyką jest przynajmniej oszacowanie, aby zarezerwować miejsce. Nawet jeśli ostateczny element okaże się większy, przesunięcie nie będzie tak wyraźne, co doprowadzi do niższego wyniku CLS.

W WordPressie edytor automatycznie dodaje również szerokość i wysokość do osadzonych treści. Ponadto, jak wspomniano, WP Rocket posiada opcję leniwego ładowania osadzonych multimediów. Powoduje to automatyczne zarezerwowanie potrzebnego miejsca na ich załadowanie.

Optymalizacja dostarczania czcionek internetowych

Czcionki również mogą powodować zmiany w układzie, zwłaszcza jeśli używasz niestandardowych czcionek na swojej stronie internetowej. Dwa najczęstsze problemy to:

• Flash of Unstyled Text (FOUT) - oznacza to, że odwiedzający najpierw widzi tekst witryny w standardowej czcionce, która zmienia się w momencie załadowania pliku czcionki, potencjalnie prowadząc do przesunięcia układu.
• Flash of Invisible Text (FOIT) - Tutaj początkowo nie widać żadnego tekstu. Pojawia się on tylko wraz z plikiem czcionki internetowej.

Można tego uniknąć, stosując następujące strategie:

• Używaj nowoczesnych formatów czcion ek - Podobnie jak obrazy, czcionki są dostępne w większych i mniejszych formatach plików. Najszybsze do załadowania są zazwyczaj WOFF lub WOFF2.
• Zdefiniuj podobną czcionkę rezerwową - umieszczenie czcionki rezerwowej, która jest bardzo podobna do rzeczywistego kroju pisma, zmniejsza ruch strony podczas przełączania. Możesz użyć Font Style Matcher, aby znaleźć dobre kombinacje.
• Wstępne ładowanie czcionek - nadaj priorytet plikom czcionek internetowych, umieszczając je na początku dokumentu i dodając rel=preload do wywołania. W ten sposób przeglądarka załaduje je szybciej.

Jeśli korzystasz z WP Rocket, wtyczka zawiera opcję wstępnego ładowania plików czcionek. Wszystko, co musisz zrobić, to wprowadzić ścieżkę, w której się znajdują.

Nawiasem mówiąc, częścią optymalizacji czcionek dla wielojęzycznej strony internetowej jest również używanie czcionek kompatybilnych z różnymi alfabetami. Jest to szczególnie ważne, jeśli oferujesz na swojej stronie języki RTL (pisane od prawej do lewej).

Radzenie sobie z dynamiczną zawartością

Przez zawartość dynamiczną rozumiemy elementy, które pojawiają się po zakończeniu ładowania strony. Przykładem mogą być leniwie ładowane obrazy, banery, formularze itp.

Aby utrzymać ich wpływ na wynik CLS na niskim poziomie, postępuj zgodnie z powyższymi wskazówkami:

• Zdefiniuj wcześniej ich pojemniki i nadaj im stałe wymiary.
• Połącz ich wygląd z interakcją użytkownika. W ten sposób można uniknąć kary CLS.

Przy okazji, Weglot jest w pełni zdolny do tłumaczenia dynamicznych treści. Nie musisz się więc martwić, że Twoi odbiorcy jej nie zrozumieją.

Praca nad interakcją do następnej farby

Na koniec porozmawiajmy o tym, jak możesz upewnić się, że Twój INP jest na miejscu.

Optymalizacja JavaScript

JavaScript jest zwykle jednym z głównych czynników, jeśli chodzi o problemy z Interaction to Next Paint, zwłaszcza tak zwane "długie zadania". Są to zadania JavaScript, których wykonanie zajmuje więcej niż 50 ms i mogą one blokować zdolność przeglądarki do przetwarzania interakcji użytkownika na stronie. Ponadto, posiadanie dużej ilości skryptów na stronie może utrudniać responsywność stron.

Rozmawialiśmy już o tym, jak zoptymalizować JavaScript w sekcji LCP. W przypadku INP szczególnie ważne jest radzenie sobie z długimi zadaniami w witrynie. Jeśli takie istnieją, można je znaleźć w narzędziach programistycznych Chrome. Są one oznaczone małymi czerwonymi trójkątami.

Sprawdź, czy możesz podzielić je na mniejsze fragmenty, które mogą ładować się kolejno bez trwałego blokowania głównego wątku przeglądarki. Szczegółowe informacje na ten temat można znaleźć w tym samouczku web.dev. Minifikacja, odraczanie, asynchronizacja i usuwanie niepotrzebnego kodu również pomagają utrzymać responsywność przeglądarki na interakcję użytkownika.

Jeśli korzystasz z WP Rocket, wtyczka umożliwia szczegółowe skonfigurowanie plików JavaScript, których ładowanie ma być opóźnione, a które nie.

Redukcja nieużywanego CSS

Wszystko, co odnosi się do JavaScript, dotyczy również CSS. Pobieranie i przetwarzanie arkuszy stylów może zająć przeglądarkę i opóźnić jej reakcję na dane wprowadzane przez użytkownika.

Tutaj możesz również użyć narzędzi do testowania szybkości, aby znaleźć nieużywane CSS. Ponadto możesz podzielić swoje arkusze stylów, aby najpierw załadować kluczowy CSS lub umieścić go w tekście.

Jak wspomniano, WP Rocket posiada opcje automatycznego usuwania nieużywanego CSS.

Dodaj leniwe ładowanie

Mówiliśmy już o leniwym ładowaniu w celu optymalizacji obrazu. Może to mieć również pozytywny wpływ na INP, ponieważ zwalnia zasoby przeglądarki, aby reagować na dane wprowadzane przez użytkownika. Aby ją wdrożyć, należy postępować zgodnie z powyższymi instrukcjami.

Przy okazji, jeśli napotykasz problemy z tłumaczeniem leniwie ładowanych obrazów, Weglot domyślnie tłumaczy adresy URL obrazów dodane do atrybutów data-src lub srcset. Jeśli leniwe ładowanie wykorzystuje niestandardowe atrybuty, Weglot nie przetłumaczy ich od razu - będziesz musiał dodać filtr PHP, który jest przeznaczony specjalnie dla integracji WordPress.

Jeśli korzystasz z integracji Weglot JavaScript i / lub nadal nie możesz przetłumaczyć swoich obrazów, skontaktuj się z pomocą techniczną, aby uzyskać więcej informacji.

Popraw Core Web Vitals na swojej wielojęzycznej stronie już dziś!

Core Web Vitals są ważnym wskaźnikiem jakości dla użyteczności wielojęzycznej strony internetowej. Nie tylko odwiedzający dbają o ten temat, Core Web Vitals wpływa również na rankingi wyszukiwania. Z tego powodu optymalizacja witryny pod ich kątem jest zdecydowanie czymś, co powinieneś potraktować poważnie.

Jak zapewne zauważyłeś powyżej, nie jest to wcale takie trudne. Chodzi głównie o upewnienie się, że strony internetowe ładują się szybko i pozostają stabilne i responsywne w tym czasie. Istnieje kilka kluczowych środków, które można podjąć w tym celu, a które szczegółowo omówiliśmy powyżej.

Jeśli czujesz, że zmaganie się z kodem i plikami witryny przekracza twoje możliwości, możesz również zdecydować się na rozwiązanie wtyczkowe, takie jak WP Rocket. Może ona zoptymalizować witrynę bez konieczności posiadania umiejętności programistycznych lub technicznych i domyślnie wykonuje wiele pracy.