Jak ulepszyć First Contentful Paint (FCP) w WordPress

Wprowadzenie do First Contentful Paint

First Contentful Paint to przydatna miara, która monitoruje szybkość ładowania strony. Istnieje wiele podobnych wskaźników, które mierzą wydajność witryny. FCP w szczególności koncentruje się na czasie potrzebnym do pojawienia się pierwszej treści na stronie. Po wygenerowaniu FCP użytkownik wie, że reszta jest w drodze.

Jest podobny do metryki Largest Contentful Paint (LCP) w Google Core Web Vitals. Ale podczas gdy LCP mierzy, jak długo trwa ładowanie „głównej” treści witryny, FCP skupia się tylko na pierwszym fragmencie treści, który może, ale nie musi, być główną treścią.

Na Twój wynik FCP składa się wiele czynników. Pliki JavaScript i źle zoptymalizowany HTML są częstymi przyczynami niskiej wydajności, ponieważ do ich przetworzenia potrzeba dużo zasobów. Ponadto skrypty blokujące renderowanie mogą mieć wpływ na wynik FCP, ponieważ muszą zostać przetworzone przed wykonaniem jakichkolwiek innych operacji.

Twój wynik FCP jest ważny, ponieważ jest wskaźnikiem ogólnej szybkości Twojej witryny. Nie tylko wydajność ma kluczowe znaczenie dla Twojego UX, ale jest to również czynnik, który wyszukiwarki, takie jak Google, biorą pod uwagę przy podejmowaniu decyzji o uszeregowaniu stron. Niska wydajność może prowadzić do niższych rankingów wyszukiwania. Oznacza to, że jeśli nie wiesz, jak poprawić First Contentful Paint, może to wpłynąć na widoczność Twojej witryny.

Jak mierzyć First Contentful Paint

Chociaż FCP daje wgląd w postrzeganie użytkownika, nadal jest to wskaźnik, który można obiektywnie zmierzyć za pomocą testów laboratoryjnych i danych terenowych. Na przykład PageSpeed ​​Insights to narzędzie, które pozwala zobaczyć, czego doświadczają Twoi prawdziwi użytkownicy ( o ile ruch w Twojej witrynie jest wystarczający, aby można ją było uwzględnić w raporcie dotyczącym wrażeń użytkownika przeglądarki Chrome ).

Nawet jeśli Twoja witryna nie ma wystarczającej ilości danych, aby zobaczyć rzeczywiste wrażenia użytkowników, PageSpeed ​​Insights nadal może pomóc Ci zebrać dane FCP w symulowanych testach laboratoryjnych.

Aby z niego skorzystać, po prostu wprowadź swój adres URL i uzyskaj natychmiastowy wynik:

Możesz także przełączać się między widokiem mobilnym i stacjonarnym, aby zobaczyć, jak responsywna jest Twoja witryna na różnych urządzeniach.

Innym przydatnym narzędziem do pomiaru FCP jest WebPageTest, który zajmuje trochę więcej czasu, ale może zapewnić bardziej dogłębną analizę.

Jaki jest dobry czas FCP?

Według Chrome Twoja witryna ma dobry wynik FCP, jeśli jest poniżej 1,8 sekundy. Kiedy twój wynik FCP przekracza trzy sekundy, jest to powód do niepokoju.

Jednak nawet jeśli Twoja witryna ma obecnie wysoki wynik FCP, zawsze można coś ulepszyć.

Jak ulepszyć First Contentful Paint w WordPressie (6 technik)

Teraz, gdy wiesz nieco więcej o FCP, przyjrzyjmy się, jak ulepszyć First Contentful Paint na swojej stronie za pomocą sześciu skutecznych metod:

1. Użyj sieci dostarczania treści (CDN)
2. Optymalizuj i kompresuj obrazy
3. Wyeliminuj zasoby blokujące renderowanie
4. Zmniejsz rozmiar DOM
5. Popraw czas odpowiedzi serwera
6. Unikaj zbyt wielu przekierowań na strony

1. Korzystaj z sieci dostarczania treści (CDN)

Sieć dostarczania treści (CDN) to prosty sposób na skrócenie ogólnego czasu ładowania. Bez niego, gdy użytkownik odwiedzi Twoją witrynę, będzie musiał poczekać, aż niezbędne dane zostaną przesłane między głównym serwerem Twojej witryny a jego lokalizacją. Może to skutkować dłuższym czasem oczekiwania dla użytkowników, którzy są geograficznie daleko od serwerów Twojego dostawcy usług hostingowych.

Z drugiej strony CDN oferuje sieć serwerów rozmieszczonych na całym świecie. Dlatego treść może być dostarczana z dowolnego serwera, który jest fizycznie najbliżej każdego odwiedzającego.

Jednym z popularnych przykładów sieci CDN jest Cloudflare, która ma ponad 275 centrów danych na całym świecie:

Dzięki Cloudflare możesz skorzystać z innych technik optymalizacji, takich jak bezstratna optymalizacja obrazu.

Zazwyczaj sieci CDN używają również buforowania i innych strategii w celu poprawy FCP. Na przykład Twój dostawca CDN może oferować minimalizację i kompresję plików, aby rozjaśnić Twoją witrynę. Pomaga to zmniejszyć opóźnienia, poprawić UX i zmniejszyć obciążenie głównego serwera.

2. Zoptymalizuj i skompresuj obrazy

Obrazy rzadko są pierwszym elementem ładowanym na Twojej stronie internetowej. Jeśli jednak prowadzisz witrynę z dużą ilością mediów, taką jak portfolio lub prezentacja fotografii, ważne jest, aby zoptymalizować i skompresować obrazy, aby poprawić swój wynik FCP (i ogólną wydajność).

Jednym ze sposobów optymalizacji obrazów jest przejście na inny format pliku. Na przykład, jeśli obecnie polegasz na plikach JPG/JPEG lub PNG, możesz przejść do formatu z lepszą kompresją, takiego jak SVG lub WebP.

Powinieneś także zmienić rozmiar obrazów do najmniejszych wymiarów, które odpowiadają Twoim potrzebom, i skompresować je, aby jeszcze bardziej zmniejszyć ich rozmiar.

Chociaż możesz to wszystko zrobić ręcznie za pomocą narzędzi online, znacznie prostszym sposobem dla użytkowników WordPress jest użycie wtyczki do optymalizacji obrazu.

Na przykład bezpłatna wtyczka Optimole może automatycznie zmieniać rozmiar, kompresować i konwertować obrazy. Dodatkowo może im również służyć z wbudowanego CDN, który upieka dwie pieczenie na jednym ogniu.

To narzędzie pozwala również szybko dostarczać wysokiej jakości obrazy, bez względu na to, z jakiego urządzenia korzystają odwiedzający, aby uzyskać dostęp do Twojej witryny. Możesz użyć funkcji, takich jak leniwe ładowanie i zmiana rozmiaru obrazu, aby jeszcze bardziej udoskonalić swoje obrazy.

3. Wyeliminuj zasoby blokujące renderowanie

Zasoby blokujące renderowanie mogą uniemożliwić szybkie ładowanie treści, ponieważ przeglądarka musi je najpierw przetworzyć – nawet jeśli nie są one ważne do załadowania początkowej zawartości witryny. W rezultacie mogą spowolnić Twój wynik FCP. Może to obejmować kod HTML, arkusze stylów CSS i pliki JavaScript.

Jeśli zastanawiasz się, jak ulepszyć First Contentful Paint, istnieje kilka sposobów na wyeliminowanie zasobów blokujących renderowanie. Jeśli nie masz problemów z programowaniem i znajdziesz kod, który nie jest używany na Twojej stronie, możesz go usunąć. Możesz także zidentyfikować swoje krytyczne zasoby i „umieścić” je na swojej stronie za pomocą tagów <script> i <style>.

Ponadto istnieje możliwość odroczenia JavaScript, aby Twoja treść nie była opóźniana podczas oczekiwania na przetworzenie tych plików przez przeglądarkę. Ponadto możesz wygenerować krytyczne CSS, aby wyświetlać treść „powyżej strony widocznej na ekranie” (część, którą użytkownicy natychmiast widzą). Jeśli nie jesteś programistą, narzędzie takie jak Jetpack może pomóc Ci wprowadzić niektóre z tych zmian.

4. Zmniejsz rozmiar DOM

Po załadowaniu strony internetowej przeglądarka tworzy obiektowy model dokumentu (DOM). Jest to reprezentacja wszystkich obiektów, które składają się na Twoją stronę.

Jeśli na Twojej stronie jest zbyt wiele węzłów DOM (tagów HTML) lub są one zagnieżdżone zbyt głęboko, przetworzenie strony przez przeglądarkę trwa dłużej. Może to skutkować wolniejszymi prędkościami ładowania i słabym wynikiem FCP.

Dlatego możesz poprawić swój FCP, zmniejszając rozmiar DOM. Możesz to zrobić ręcznie, usuwając niepotrzebne znaczniki <div>, dzieląc długie strony na mniejsze i ograniczając liczbę postów w archiwum lub na stronie głównej.

Ponadto możesz leniwie ładować elementy HTML za pomocą wtyczki optymalizacyjnej, takiej jak Optimole. Leniwe ładowanie to technika, która opóźnia ładowanie treści, dopóki nie będzie potrzebna. Zamiast przetwarzać wszystko na raz, przeglądarka może skupić się na dostarczaniu tych elementów, które są natychmiast widoczne.

Wybór zoptymalizowanego motywu może również pomóc zmniejszyć rozmiar DOM, ponieważ wiele motywów (i programów budujących strony) używa zbyt wielu tagów <div>. Jeśli szukasz nowego motywu, zalecamy wypróbowanie Neve, który jest szybki, lekki i używa tylko wysokiej jakości kodu.

5. Popraw czas odpowiedzi serwera

Czas odpowiedzi serwera jest również określany jako czas do pierwszego bajtu (TTFB). Ta metryka mierzy czas między wysłaniem żądania przez użytkownika a wysłaniem przez serwer pierwszego bajtu informacji.

Istnieje wiele sposobów na poprawienie czasu odpowiedzi serwera (a co za tym idzie, wyniku FCP).

Po pierwsze, ważne jest, aby wybrać wysokiej jakości dostawcę usług hostingowych. Najlepiej poszukać hosta, który obsługuje strony WordPress i zwrócić uwagę na lokalizację jego serwerów. Idealnie byłoby, gdyby Twój host miał serwery, które znajdują się blisko Twoich głównych odbiorców.

Jeśli chcesz poprawić wydajność swojego hosta, możesz wybrać dostawcę z naszej popartej danymi kolekcji najszybszego hostingu WordPress.

Jeśli jednak Twój dostawca usług hostingowych nie oferuje wygodnych serwerów, zawsze możesz wybrać CDN, o którym mówiliśmy wcześniej, omawiając, jak ulepszyć First Contentful Paint.

Buforowanie to świetny sposób na skrócenie czasu odpowiedzi. Niektóre hosty oferują wbudowane buforowanie. Alternatywnie możesz zainstalować wtyczkę buforującą, taką jak WP Rocket lub WP Fastest Cache.

6. Unikaj zbyt wielu przekierowań na strony

Kiedy odwiedzasz stronę, która natychmiast przekierowuje Cię do innej witryny, Twoja przeglądarka musi wysłać kolejne żądanie HTTP do nowej lokalizacji. Może to skutkować słabym wynikiem FCP, ponieważ opóźnia ładowanie Twojej strony internetowej.

Im więcej przekierowań masz na swojej stronie, tym prawdopodobnie gorszy będzie Twój wynik FCP. Ponadto zbyt wiele przekierowań stron może poważnie zakłócić Twój UX.

Jeśli problem występuje w całej witrynie, warto przyjrzeć się, jak zarządzasz przekierowaniami z www na inne niż www (lub odwrotnie) i/lub z HTTP na HTTPS.

Na przykład, jeśli przekierowujesz z http://www.yoursite.com na http://yoursite.com , a następnie ponownie na https://yoursite.com , bardziej efektywne byłoby zrobienie tego w jednym kroku.

Jeśli przekierowania wpływają tylko na Twój FCP na jednej stronie, możesz przejrzeć wszelkie przekierowania utworzone dla tej strony.

Możesz ręcznie zarządzać przekierowaniami, chociaż może to być czasochłonne. Zwykle lepiej jest wybrać wtyczkę WordPress, taką jak Redirection:

Po zainstalowaniu możesz użyć tego narzędzia do łatwego i szybkiego zarządzania przekierowaniami.

Popraw czas FCP swojej witryny już dziś

Na złożonych lub bogatych w treść witrynach utrzymanie krótkich czasów ładowania może być trudne. Na szczęście, kierując się kluczowymi wskaźnikami, takimi jak First Contentful Paint (FCP), możesz ocenić i skrócić czas potrzebny odwiedzającym na zobaczenie Twoich treści.

Podsumowując, oto jak ulepszyć First Contentful Paint w WordPress:

Aby poznać inne sposoby na przyspieszenie witryny, zapoznaj się z naszą kolekcją różnych sposobów na przyspieszenie WordPressa.

Czy masz jakieś pytania dotyczące ulepszania FCP w WordPress? Daj nam znać w sekcji komentarzy poniżej!