Technologiczne, Gadżety, Telefony Komórkowe, Pobieranie Aplikacji

25 strategii optymalizacji witryny pod kątem podstawowych wskaźników internetowych Google

Uwaga: Poniższy artykuł pomoże Ci w: 25 strategii optymalizacji witryny pod kątem podstawowych wskaźników internetowych Google

Publikowaliśmy już wcześniej treści na temat podstawowych wskaźników internetowych Google, od ogólnego przeglądu po szczegółowe szczegółowe informacje. Jeśli jednak szukasz łatwej do odniesienia listy sposobów na ulepszenie podstawowych wskaźników internetowych swojej witryny i osiągnięcie wymiernych wyników, jesteś we właściwym miejscu.

Przedstawiamy 25 skutecznych działań, które możesz zastosować, aby przenieść podstawowe wskaźniki internetowe swojej witryny na wyższy poziom (i przy okazji poprawić jej rankingi).

1. Zminimalizuj JavaScript i CSS

Nadmierny kod nie tylko brzmi źle, ale wręcz źle: gdy używasz dużej ilości kodu (mianowicie JavaScript i CSS) do ulepszania stron swojej witryny, ryzykujesz spowolnieniem witryny, a tym samym pogorszeniem jej wyników w Core Web Vitals.

Aby mieć pewność, że kod Twojej witryny nie zajmie zbyt dużo miejsca, spróbuj go skompresować za pomocą bezpłatnego narzędzia do minimalizacji, takiego jak Minifier.org

Lub Zminimalizuj kod.

2. Zastosuj leniwe ładowanie

Lenistwo nie zawsze jest złe, szczególnie jeśli chodzi o zwiększenie szybkości strony i poprawę podstawowych wskaźników internetowych. Wyjaśnijmy.

Leniwe ładowanie to metoda ładowania, która skupia się na ładowaniu tylko tego, co jest potrzebne w danym momencie, zamiast po prostu ładowania całej strony na raz. Poniższa grafika od Impervy ilustruje tę koncepcję Dobrze:

W ten sposób zasoby są oszczędzane do czasu, aż będą rzeczywiście potrzebne, a użytkownicy będą mogli korzystać ze strony szybciej.

Aby zapoznać się z technicznym i szczegółowym spojrzeniem na sposoby implementacji leniwego ładowania, zobacz Dokumentacja Mozilli na temat.

3. Określ wymiary obrazu i wideo

Czy kiedykolwiek odwiedzałeś stronę internetową i widziałeś, jak jeden z jej obrazów nagle rozrósł się do znacznie większej wersji siebie, po czym zmniejszył się z powrotem do rozsądnego rozmiaru? To właśnie może się zdarzyć, jeśli nie określisz wymiarów obrazu i wideo w witrynie, a to zła wiadomość dla wyniku skumulowanego przesunięcia układu (CLS).

Na szczęście rozwiązanie jest proste — wystarczy edytować kod źródłowy strony, aby uwzględnić atrybuty szerokości i wysokości. Nie wiesz jak? W3Schools zapewnia łatwy do naśladowania przykład:

4. Określ wymiary reklamy, ramki IFrame i osadzenia

Inne elementy Twojej witryny również mogą zyskać na parametrach rozmiaru, a mianowicie reklamy, ramki IFrame i elementy osadzone. Określając wymiary każdego z nich, możesz zrobić jeszcze więcej, aby obniżyć wynik CLS swojej witryny.

Oto jak to zrobić dla każdego komponentu:

5. Skorzystaj z narzędzia Web Worker

Mówiąc prościej, pracownicy sieci umożliwiają uruchamianie skryptów w wątkach w tle. Oznacza to, że główny wątek może swobodnie uruchamiać skrypty, które są najważniejsze dla doświadczenia użytkownika. Nie wiesz, co to jest wątek? Nie martw się: w informatyce: a nitka odnosi się po prostu do ścieżki, wzdłuż której wykonywane są zadania.

Zatem wdrażając moduł roboczy sieci Web, umożliwisz stronom swojej witryny dzielenie zadań między wiele wątków, pozostawiając w ten sposób nienaruszony interfejs użytkownika, a odwiedzający będą zadowoleni.

6. Wyeliminuj niepotrzebny kod

Jeśli Twoje strony zawierają kod, który nie pełni żadnej funkcji, może zamiast tego spowalniać witrynę, negatywnie wpływając na wygodę użytkownika i ostatecznie pogarszając podstawowe wskaźniki internetowe.

Aby uniknąć tego problemu, Ty (lub twórcy Twojej witryny) powinniście zacząć identyfikować i usuwać niepotrzebny kod w całej witrynie. Można to zrobić na wiele różnych sposobów, a jednym z najprostszych jest zdolność Lighthouse do automatycznego wykrywania nieużywanego kodu JavaScript:

Gdy niewykorzystany kod Twojej witryny zostanie usunięty, zasoby Twojej witryny będą mogły swobodnie ładować to, co najważniejsze dla użytkowników.

7. Zaktualizuj wtyczki i motywy

Jeśli kiedykolwiek próbowałeś znaleźć coś idealnego Wtyczka WordPressa Lub motyw witrynyto wiesz, jak przygnębiające jest natrafienie na obiecującą opcję tylko po to, by zobaczyć, że nie była ona aktualizowana od miesięcy, a nawet lat.

Ale co, jeśli pobierzesz go, gdy był świeżo zaktualizowany, zapomnisz o nim i pozwolisz mu działać w Twojej witrynie przez czas nieokreślony, podczas gdy staje się coraz bardziej przestarzały? Jeśli nie czyściłeś wtyczek i motywów swojej witryny przez dłuższy czas, może to już mieć miejsce.

Aby zapobiec takiej frustrującej sytuacji i zaradzić jej, pamiętaj o przeglądaniu wtyczek i motywów swojej witryny co miesiąc i aktualizowaniu ich lub, jeśli nie możesz znaleźć zaktualizowanej wersji, usunięciu ich.

8. Pozbądź się nieużywanych wtyczek

Przestarzałe wtyczki nie są jedynym typem wtyczek, które mogą negatywnie wpłynąć na CLS — nieużywane wtyczki mogą również okazać się cierniem w boku.

Dzieje się tak dlatego, że nawet jeśli nie korzystasz aktywnie z zainstalowanych wtyczek, mogą one nadal pochłaniać zasoby Twojej witryny w tle. Jeśli więc zmienisz wtyczkę blokującą spam na inną, ale nie odinstalujesz starej, może ona pozostać i pogorszyć Twoje podstawowe wskaźniki internetowe.

Dlatego pamiętaj o regularnym sprawdzaniu zainstalowanych wtyczek i zawsze usuwaj te, które nie są używane.

9. Zmniejsz niestabilność czcionki

Kiedy próbujesz określić źródło skumulowanego przesunięcia układu witryny, czcionki mogą być ostatnią rzeczą, o której myślisz. Okazuje się jednak, że te pozornie nieszkodliwe kroje pisma mogą powodować poważne problemy z układem Twojej witryny.

Dzieje się tak dlatego, że czcionki przeznaczone do wyświetlania w Internecie, trafnie zwane czcionki internetowe, muszą być ładowane przez przeglądarkę użytkownika za każdym razem, gdy odwiedza on jedną z Twoich stron. Po załadowaniu czcionki internetowej może to spowodować zmianę położenia i rozmiaru elementów strony.

Aby zapobiec sianiu spustoszenia przez czcionki w CLS, spróbuj:

10. Przejmij kontrolę nad zawartością dynamiczną

Nie ma wątpliwości, że dynamiczna treść ma niezliczone korzyści. Dzięki automatycznemu dopasowywaniu do urządzeń, lokalizacji, zachowań i preferencji użytkowników dynamiczna treść ułatwia zaspokajanie indywidualnych potrzeb odwiedzających. Na przykład poniższe grafika od Adobe ilustruje, jak dynamiczna treść może zapewnić spersonalizowane rekomendacje produktów:

Treść dynamiczna ma jednak także wady — ponieważ zmienia się ona w celu dostosowania do potrzeb użytkowników, może w rezultacie zmienić układ strony, zwiększając w ten sposób CLS witryny.

Aby tego uniknąć, możesz po prostu określić ilość miejsca, jakie będzie zajmować dynamiczna treść Twojej witryny.

11. Użyj rel=połączenie wstępne

Kiedy serwer musi nawiązać połączenia z innymi firmami, aby załadować zawartość Twojej witryny, może to oznaczać dłuższy czas ładowania dla odwiedzających.

Na szczęście, rel=połączenie wstępne atrybut może przyspieszyć działanie, informując przeglądarkę użytkownika, że ​​zostanie nawiązane połączenie z podmiotem trzecim.

W ten sposób przeglądarka może rozpocząć inicjowanie połączenia z zewnętrznym źródłem tak szybko, jak to możliwe, skracając czas ładowania.

12. Zastosuj podpisane wymiany HTTP

Jak Google to podajepodpisana wymiana (SXG) „to mechanizm dostarczania, który umożliwia uwierzytelnienie pochodzenia zasobu niezależnie od sposobu, w jaki został dostarczony”.

Choć może to wydawać się skomplikowane, wynik nie jest taki: w przypadku SXG zawartość jest łatwiej buforowana i dlatego można ją szybciej ładować. W rzeczywistości Google czasami to robi nawet pobrać z wyprzedzeniem SXG (tj. pobieranie treści w tle), co czyni je szczególnie przydatnymi w przypadku witryn otrzymujących znaczną część ruchu z Google.

Aby uzyskać pomoc we wdrażaniu SXG po raz pierwszy, sprawdź Dokumentacja Google na temat.

13. Kompresuj obrazy i filmy

Wolno ładujące się elementy strony mogą znacznie wydłużyć tekst witryny (ang. Largest Contentful Paint, LCP), czasami do tego stopnia, że ​​użytkownicy po prostu wpatrują się w pusty ekran, czekając, aż coś się pojawi.
Dobra wiadomość jest taka, że ​​jeśli wolno ładujący się fragment treści to obraz lub film, można go niemal natychmiast przyspieszyć, wdrażając skuteczną kompresję.

Dodatkowo, jeśli korzystasz z WordPressa, możesz to łatwo zrobić, instalując wtyczkę kompresującą, taką jak roztrzaskać Lub EWWWW.

14. Wykorzystaj buforowanie

Kiedy dane są buforowaneco oznacza, że ​​jest on przechowywany w lokalizacji tymczasowej, dzięki czemu można szybko i łatwo uzyskać do niego dostęp w późniejszym czasie.

Po włączeniu buforowania na serwerze nie ma potrzeby konwertowania strony internetowej do pliku HTML za każdym razem, gdy ktoś ją odwiedza. Zamiast tego przechowuje kopię pliku HTML strony we własnej pamięci, dzięki czemu następnym razem, gdy ktoś odwiedzi stronę, może po prostu od razu przesłać plik HTML.

Jeśli masz witrynę opartą na WordPressie, z przyjemnością dowiesz się, że podobnie jak w przypadku kompresji obrazu, wdrożenie buforowania jest tak proste, jak instalacja wtyczki. Niektóre z najczęściej używanych obejmują:

A jeśli chcesz dowiedzieć się więcej o technicznej stronie buforowania sieciowego, odwiedź Mozillę przewodnik po buforowaniu HTTP to przydatne miejsce na rozpoczęcie.

15. Przerwij długie zadania

Gdy strona wykonuje zadania oparte na języku JavaScript, często nie reaguje na działania użytkownika. Jeśli więc użytkownik kliknie przycisk lub spróbuje otworzyć menu, strona musi zakończyć swoje zadania, zanim będzie mogła odpowiedzieć. Może to poważnie odbić się na podstawowych wskaźnikach internetowych Twojej witryny, zwiększając opóźnienie pierwszego wejścia (FID).

Aby mieć pewność, że witryna będzie responsywna, a jednocześnie będzie ładowała wszystkie niezbędne pliki JavaScript, możesz je rozdzielić Długie zadania (są one zdefiniowane jako zadania, które zajmują główny wątek interfejsu użytkownika przez 50 milisekund lub dłużej).

Gdy długie zadania strony zostaną podzielone na mniejsze, łatwiejsze do zarządzania części, główny wątek będzie mógł znacznie szybciej reagować na dane wejściowe użytkownika.

16. Korzystaj z sieci dostarczania treści

Ma sens, że dla osoby znajdującej się w USA serwer, który również znajduje się w USA, może zapewnić szybszy czas ładowania niż serwer zlokalizowany w Szwajcarii.

Taka jest zasada Sieci dostarczania treści (CDN). Te sieci serwerów poprawiają szybkość strony, wykorzystując informacje o lokalizacji odwiedzających do załadowania witryny za pośrednictwem najbliższego serwera:

Zatem korzystając z kompleksowej sieci CDN, możesz mieć pewność, że wszyscy odwiedzający Twoją witrynę będą mogli cieszyć się błyskawicznym działaniem, niezależnie od tego, gdzie mieszkają.

Aby rozpocząć, sprawdź oferty popularnych dostawców CDN, takich jak Cloudflare, AkamaiI Szybko.

17. Zweryfikuj swój kod

Ponieważ użytkownicy mają do wyboru różne przeglądarki internetowe, ważne jest, aby upewnić się, że Twoja witryna jest kompatybilna ze wszystkimi z nich. Skutecznym sposobem na osiągnięcie tego jest metoda weryfikacja koduco odnosi się do procesu sprawdzania, czy kod źródłowy witryny jest poprawnie sformatowany i ważny.

Naszym ulubionym narzędziem do sprawdzania poprawności kodu jest Usługa sprawdzania poprawności znaczników W3C. Aby z niego skorzystać, wystarczy wprowadzić identyfikator URI, przesłać plik lub bezpośrednio skopiować i wkleić znacznik.

18. Rozważ nowy plan hostingowy

Jeśli zastosowałeś wszystkie opisane w książce sztuczki optymalizacyjne serwera, ale nadal uzyskujesz zbyt wysokie wyniki w CLS, FID lub LCP, być może nadszedł czas, aby rozważyć aktualizację swojego planu hostingowego. Może to przydzielić więcej zasobów dla Twojej witryny, co oznacza szybsze ładowanie dla użytkowników.

Jeśli korzystasz ze wspólnego planu hostingowego jak większość ludzimożesz poprawić wydajność poprzez:

  • przejście na plan, w którym Twój serwer jest współdzielony przez mniejszą liczbę witryn; Lub
  • przejście na dedykowany plan hostingowy, w którym Twoja witryna posiada własny serwer.

A jeśli korzystasz już z dedykowanego planu hostingowego, możesz chcieć uaktualnić go do takiego, który zapewnia większą pamięć masową, przepustowość i moc.

19. Wyodrębnij krytyczny CSS

Jak CSS wpływa na Twoje podstawowe wskaźniki internetowe? Jak Google to podaje:

Przeglądarka musi pobrać i przeanalizować pliki CSS, zanim będzie mogła wyświetlić stronę, co sprawia, że ​​CSS jest zasobem blokującym renderowanie. Jeśli pliki CSS są duże lub warunki sieciowe są słabe, żądania plików CSS mogą znacznie wydłużyć czas renderowania strony internetowej.

Jednak dzięki technice zwanej Krytycznym CSS możesz nadać priorytet CSS używanemu w treści na ekranie, aby odwiedzający witrynę mogli ją wyświetlić tak szybko, jak to możliwe.

Aby zaimplementować Critical CSS i sprawić, że Twoja witryna będzie szybsza i bardziej responsywna, możesz użyć narzędzi takich jak Krytyczny, Krytyczny CSSI Daszekz których wszystkie są dostępne bezpłatnie w serwisie GitHub.

20. Uprość swoje tło

W latach 90. i na początku XX wieku modne były witryny z ruchliwym środowiskiem. Od błyszczących GIF-ów, przez odtwarzacze MIDI, po wirujące logo, minimalistyczne projektowanie stron internetowych było jeszcze bardzo odległe.

To nie przypadek, że ładowanie tych wczesnych witryn również wydawało się wiecznością: gdy tło strony konkuruje z główną treścią o zasoby, może to poważnie spowolnić działanie.

Mając to na uwadze, pamiętaj o uproszczeniu tła swojej witryny, jeśli to w ogóle możliwe. W razie wątpliwości zawsze możesz wybrać jednolity kolor, aby uzyskać czysty, nowoczesny i markowy wygląd. Ale jeśli wolisz użyć obrazu, mądrze byłoby przeczytać WordPress’ doradztwo w zakresie określenia optymalnych wymiarówwybierając odpowiednią nakładkę i zapewniając kompatybilność przeglądarki.

21. Dodaj odraczać I asynchroniczny Atrybuty JavaScriptu

Oprócz dzielenia długich zadań możesz jeszcze bardziej zmniejszyć wpływ nieużywanego i niepotrzebnego kodu JavaScript na witrynę, korzystając z opcji odraczać I asynchroniczny atrybuty.

The odraczać atrybut informuje przeglądarkę użytkownika, że ​​nie musi ona czekać na załadowanie określonego pliku JavaScript przed załadowaniem reszty strony. Tymczasem, asynchroniczny atrybut umożliwia jednoczesne ładowanie wielu plików JavaScript (tj. asynchronicznie).

Obydwa atrybuty można łatwo dodać do dowolnego pliku JavaScript, jak pokazuje ten przykład z W3Schools:

Wdrażając jedną lub obie metody, możesz zaświadczyć, że żadne irytujące pliki JavaScript nie szkodzą użytkownikom Twojej witryny.

22. Ogranicz liczbę skryptów stron trzecich

Istnieje wiele powodów, dla których możesz zdecydować się na dodanie do swojej witryny skryptów innych firm, od dodania prostego przycisku mediów społecznościowych po wdrożenie dodatkowych analiz. Jednak może nie być od razu oczywiste, że te pozornie nieszkodliwe fragmenty kodu mogą negatywnie wpłynąć na szybkość działania Twojej witryny, podstawowe wskaźniki internetowe i ogólną wydajność.

Aby mieć pewność, że tak się nie stanie, regularnie korzystaj z narzędzi takich jak Latarnia morska aby zidentyfikować skrypty stron trzecich, które pochłaniają cenne zasoby. Google’a tutorial jak to zrobić pokazuje rodzaj cennych informacji, które Lighthouse może odkryć:

Po zidentyfikowaniu skryptów innych firm powodujących spowolnienie Twojej witryny, możesz je całkowicie usunąć lub zastąpić lepiej zoptymalizowanymi alternatywami.

23. Używaj skalowalnej grafiki wektorowej (SVG)

Jeśli jesteś na bieżąco z taktykami optymalizacji obrazów, znasz już popularne formaty plików graficznych, takie jak JPEG, PNG i GIF.

Ale jedną, z którą możesz nie być tak zaznajomiony, jest skalowalna grafika wektorowa (SVG). W przeciwieństwie do innych formatów plików składających się z pikseli, pliki SVG składają się z gładkich linii i zaokrąglonych krzywych. Oznacza to, że można je skalować w górę lub w dół w nieskończoność, nie tracąc żadnych szczegółów ani nie powodując pikselowania i rozmycia. Dlatego pliki SVG idealnie nadają się do zastosowań takich jak złożone diagramy, obrazy wektorowe, ilustracje i animacje.

Jeśli chodzi o podstawowe wskaźniki internetowe, SVG są korzystne, ponieważ obsługują kompresja bezstratna. Innymi słowy, pliki obrazów można skompresować do ułamka ich pierwotnego rozmiaru bez utraty szczegółów, co oznacza, że ​​ładowanie obrazów zajmuje mniej czasu.

24. Zapewnij przyjazność dla urządzeń mobilnych

Wytyczne dotyczące Core Web Vitals mogą nie wspominać konkretnie o kompatybilności z urządzeniami mobilnymi, ale jeśli chcesz uzyskać świetne wyniki w Core Web Vitals, Twoja witryna koniecznie musi być dostosowana do urządzeń mobilnych.

Dlaczego? Google teraz używa indeksowanie dostosowane do urządzeń mobilnych, co oznacza, że ​​mobilna wersja Twojej witryny będzie wersją, której Google używa głównie do celów ustalania rankingów i indeksowania. Dlatego niezwykle ważne jest, aby witryna działała równie dobrze na urządzeniach mobilnych, jak i na laptopach i komputerach stacjonarnych.

Oto kilka taktyk, których możesz użyć, aby to zrobić:

  • realizowanie elastyczny projekt;
  • tworzenie usprawnionej nawigacji;
  • umieszczenie najważniejszej treści strony w górnej części strony widocznej na ekranie;
  • używanie wyraźnej i czytelnej czcionki;
  • używanie przycisków, które są duże i łatwe do kliknięcia na urządzeniach z ekranem dotykowym; I
  • testowanie dostosowania witryny do urządzeń mobilnych za pomocą narzędzi takich jak Google Test przyjazny dla urządzeń mobilnych.

25. Zastosuj kompresję GZIP

GNU zip, bardziej znany jako GZIP, jest zarówno programem do bezstratnej kompresji, jak i formatem pliku. Jednak w celu optymalizacji witryny pod kątem podstawowych wskaźników internetowych Google największe znaczenie ma program do kompresji bezstratnej.

Dzieje się tak, ponieważ po zastosowaniu kompresji GZIP możesz zauważyć wymierny wzrost szybkości strony. Jeden test przeprowadzony przez Pingdom odkryło, że po włączeniu kompresji GZIP czas ładowania strony witryny został skrócony o 48 milisekund:

Jeśli chcesz zobaczyć podobne wyniki w swojej witrynie, możesz zaimplementować kompresję GZIP, modyfikując ustawienia serwera swojej witryny. Jeśli używasz WordPressa, proces ten staje się wykładniczo łatwiejszy dzięki wtyczkom takim jak WP Fastest Cache i Koliber.

Optymalizuj pod kątem podstawowych wskaźników internetowych, aby optymalizować na przyszłość

Ponieważ długoterminowe zaangażowanie Google w Core Web Vitals jest jasne, wszyscy specjaliści zajmujący się SEO powinni priorytetowo traktować optymalizację. Dzieje się tak niezależnie od tego, czy Twoja witryna zostanie 1000 unikalnych użytkowników dziennie lub 1000 000 i niezależnie od niszy, w której się znajduje.

Na szczęście dla profesjonalistów zajmujących się SEO na całym świecie optymalizacja pod kątem podstawowych wskaźników internetowych nie musi być czymś skomplikowanym. Łącząc 25 opisanych tutaj prostych taktyk, możesz być na dobrej drodze do osiągnięcia wyższych rankingów, lepszego doświadczenia użytkownika i witryny przygotowanej na przyszłe wyzwania wyszukiwania.

Kredyty obrazowe

Imperva / Dostęp: październik 2021 r
Zrzuty ekranu autorstwa autora / październik 2021
web.dev / lipiec 2020
Adobe Marketo / kwiecień 2021
Cloudflare / Dostęp: listopad 2021 r