8 praktycznych sposobów na poprawę FCP w WordPress

W tym artykule omówimy kilka prostych sposobów na ulepszenie FCP lub First Contentful Paint w WordPress. Poprawiając ten wskaźnik wydajności, Twoja witryna WordPress będzie miała lepsze wrażenia użytkownika, uzyska wyższą pozycję w Google i będzie się ładować zauważalnie szybciej. Najpierw przyjrzyjmy się bardzo szybko, czym jest FCP, a następnie omówmy kilka prostych sposobów na poprawienie tego wskaźnika w witrynie WordPress.

Co to jest FCP?

FCP, znany również jako First Contentful Paint, to statystyka zebrana od prawdziwych użytkowników za pomocą raportu z doświadczeń użytkowników Chrome. Jest to jeden z bardziej realistycznych mierników doświadczenia użytkownika w świecie rzeczywistym. Jest przeznaczony do pomiaru, jak poszczególni odwiedzający i użytkownicy postrzegają wydajność strony internetowej. Jest to również jedna z pierwszych z wielu statystyk szybkości, które Google zacznie wykorzystywać w swojej kampanii zachwycającej witryny, mającej na celu poprawę komfortu użytkownika dla konsumentów na wszystkich stronach internetowych.

First Contentful Paint to pierwsza instancja renderowania zawartości wizualnej dla użytkownika końcowego. W tym przykładzie FCP występuje w drugiej ramce i jest to pierwszy element treści wyrenderowany dla użytkownika. Posiadanie szybszego FCP zapewnia, że ​​użytkownik pozostanie w Twojej witrynie do momentu załadowania całej zawartości, ponieważ postrzegany czas ładowania tej treści jest znacznie szybszy.

Jak stwierdziliśmy w naszym wyczerpującym opisie tego, czym są FCP i LCP, powinieneś zrozumieć, że zmienia się to w zależności od witryny i konkretnej strony. Więc twój FCP może być jedną rzeczą na jednej stronie i inną rzeczą na innej stronie. To nieco komplikuje proces optymalizacji, ale dopóki rozumiesz, czym jest FCP i stosujesz metody omówione w tym artykule, powinieneś być gotowy.

Pamiętaj, że Google zacznie wykorzystywać te dane jako poważne wskaźniki rankingu w marcu 2021 r., więc ustalenie Twojego First Contentful Paint przed tym punktem będzie w Twoim najlepszym interesie.

Testowanie i rozumienie pierwszego contentful paint

Zrozumienie i przetestowanie metryk First Contentful Paint jest bardzo łatwe. Wszystko, czego potrzebujesz, to narzędzie Google Pagespeed. Po prostu wpisz swój adres URL, a jeden z pierwszych wskaźników powie Ci w ciągu kilku sekund, jak szybko ładuje się Twoja witryna.

Witryna, która ładuje się w czasie poniżej jednej sekundy w odniesieniu do FCP, jest klasyfikowana jako szybka, witryna, która ładuje się w czasie poniżej 3 sekund, FCP jest określana jako umiarkowana, a witryna, która ma pierwsze wyrenderowanie treści trwające trzy sekundy lub dłużej, jest określana jako powolna. Jak widać, nie ma tu dużej swobody i zdecydowanie potrzebujesz FCP, który jest znacznie szybszy niż 3 sekundy, aby uzyskać dobrą pozycję w Google.

Dobrą wiadomością jest to, że ulepszenie swojego First Contentful Paint na WordPressie ma kilka praktycznych metod, które zapewnią natychmiastową i trwałą poprawę. Większość z tych rozwiązań zawiera wtyczki, które zautomatyzują proces optymalizacji, co znacznie ułatwi optymalizację FCP na WordPressie.

Tak więc, pomijając to wprowadzenie FCP, zrozummy, jak możemy poprawić tę metrykę. Nawet jeśli masz dobry FCP, ulepszenie go nawet o milisekundy może zwiększyć wygodę użytkownika i bezpośrednio skutkować wzrostem konwersji i niższym współczynnikiem odrzuceń w witrynie WordPress.

Skoncentruj się na czasie do pierwszego bajtu

Pierwszą i najbardziej wykonalną rzeczą, jaką możesz zrobić, aby skrócić czas FCP i zwiększyć ten wynik, jest skupienie się na czasie do pierwszego bajtu. Wiele stron internetowych ma bardzo wolne TTFB, czyli czas potrzebny przeglądarce na otrzymanie pierwszego kęsa treści strony internetowej. TTFB to suma czasu potrzebnego do uzyskania żądania HTTP, przetworzenia tego żądania i czasu odpowiedzi samego żądania HTTP.

Mówiąc prościej, jeśli połączenie z serwerem trwa dłużej niż przeciętnie, renderowanie i pobieranie treści będzie wolniejsze dla użytkownika końcowego, co skutkuje wolniejszym FCP.

FCP jest pierwszą metryką, która się pojawia, więc jest prawie bezpośrednio związana z TTFB. Dwa główne sposoby na poprawienie swojego Time To First Byte w witrynie WordPress, bezpośrednio zwiększając wynik First Contentful Paint, to wybór szybkiego hosta WordPress i korzystanie z wysokiej jakości CDN.

Jeśli masz szybkiego hosta WordPress, dane są wysyłane do przeglądarki odwiedzających znacznie szybciej niż zwykle, zwiększając TTFB. Jeśli masz użytkownika, który ładuje witrynę z geograficznie odległej lokalizacji w odniesieniu do lokalizacji serwera, użycie CDN, która ma indywidualny węzeł, który jest fizycznie bliżej użytkownika końcowego, poważnie zwiększy twoją TFB i doprowadzi do znacznie lepszego Pierwszego Zadowolony wynik malowania.

Rekomendując dobrego hosta WordPress i CDN, zawsze mówimy, że powinno to być zintegrowane rozwiązanie. Nie powinieneś szukać indywidualnego CDN i indywidualnego hosta WordPress, zamiast tego powinieneś szukać bardzo szybkiego hosta WordPress, który zawiera CDN w swojej usłudze. Pozwoli to nie tylko zaoszczędzić pieniądze, ale będzie znacznie mniej skomplikowane, a dzięki integracji prawdopodobnie szybciej.

Tak więc pierwszą możliwą do wykonania rzeczą, którą możesz zrobić, aby poprawić swój FCP, jest spojrzenie na dobrego hosta. Najlepszym hostem, który ma zintegrowany CDN (przedsiębiorstwo Cloudflare, które obejmuje automatyczną optymalizację platformy) jest Rocket.net.

To jest host WordPress, którego używaliśmy do obsługi naszego bloga prawie 100 000 odwiedzających miesięcznie , a ze względu na jego integrację z premium CDN i błyskawicznym sprzętem, a także pełną pamięć podręczną stron, TTFB jest niewiarygodnie niski, co oznacza, że ​​nasz FCP nie jest ograniczony.

Wyeliminuj zasoby blokujące renderowanie

Następną praktyczną rzeczą, którą możesz zrobić, aby zminimalizować czas FCP, jest wyeliminowanie zasobów blokujących renderowanie. Zasoby blokujące renderowanie to elementy witryny, zazwyczaj CSS i JavaScript, które są wywoływane podczas procesu renderowania Twojej strony internetowej.

Ponieważ blokują one proces renderowania, przeglądarka musi poczekać, aż rzeczywiście wyświetli elementy DOM użytkownikowi, pobrać zasób blokujący renderowanie, przeanalizować go, a następnie kontynuować renderowanie całej strony.

Jeśli założysz, że to blokowanie renderowania blokuje również element First Contentful, byłoby to poprawne. Im dłużej te zasoby blokują proces renderowania, tym dłużej trwa renderowanie elementu First Contentful, co prowadzi do wyższego wyniku FCP.

Najlepszym sposobem na wyeliminowanie zasobów blokujących renderowanie jest użycie wtyczki innej firmy o nazwie Asset Cleanup, która opóźnia i asynchronicznie ładuje JavaScript i CSS. Możesz nawet wyłączyć różne skrypty na stronie internetowej, na której nie są one używane, minimalizując nieużywany CSS, o czym powiemy w dalszej części tego artykułu.

Wbudowany krytyczny CSS

Dodatkowo, wbudowanie krytycznego CSS pozwala odroczyć ładowanie głównego arkusza stylów CSS do końca procesu renderowania. Można to zrobić za pomocą czyszczenia zasobów, ale zalecamy również połączenie WP Rocket, który jest wtyczką do buforowania i optymalizacji. Ma automatyczny krytyczny generator CSS i działa bardzo dobrze w odniesieniu do usuwania zasobów blokujących renderowanie.

Wyeliminowano nieużywany CSS

Następnym krokiem, jak wspomnieliśmy, byłoby wyeliminowanie nieużywanego CSS. Jeśli ładujesz nieużywane style na stronie internetowej, mogą one powodować blokowanie renderowania, ale po prostu powodują, że Twoja strona jest cięższa, co skutkuje przesyłaniem większej ilości danych, co skutkuje wolniejszym FCP.

Pozbycie się tych nieużywanych arkuszy stylów CSS to świetny sposób na zminimalizowanie ilości przesyłanych danych, torując drogę do narysowania krytycznego elementu First Contentful w Twojej witrynie. Wpływa to bezpośrednio na wynik FC w korzystny sposób.

Aby to zrobić, nie ma zautomatyzowanego oprogramowania, ale istnieje wtyczka, która pomaga usunąć CSS z poszczególnych stron i zakresów stron. To jest czyszczenie zasobów, jak wspomnieliśmy powyżej, i umożliwia włączanie i wyłączanie stylów i skryptów.

Następnie możesz przetestować fronton swojej witryny, aby sprawdzić, czy coś się zepsuło, a jeśli nie, usunąłeś nieużywany kod CSS, co skutkuje szybszym ładowaniem witryny i lepszym wynikiem FCP.

Usuń elementy skryptu nad krawędzią (jak reklamy JS)

Jeśli chodzi o rzeczywisty wygląd Twojej witryny, usunięcie elementów opartych na skrypcie, które znajdują się w części strony widocznej na ekranie, jest niezawodnym sposobem na ulepszenie Twojej pierwszej zawartości w witrynie WordPress. JavaScript można zoptymalizować tak bardzo, jak to możliwe, ale ze względu na jego strukturę, renderowanie zawsze będzie wolniejsze niż zwykły HTML i krytyczny CSS.

Tak więc, jeśli masz jakiś kod JavaScript, który mógłby być uważany za pierwsze treściowe malowanie strony internetowej (w zasadzie wszystko, co znajduje się w części strony widocznej na ekranie lub w początkowym oknie roboczym, które ładuje się do użytkownika), zdecydowanie chcesz się go pozbyć i zastąpić z czystym HTML.

Zwykle jest to problem w witrynach z treścią, które wykorzystują reklamy oparte na JavaScript, które ładują się w części widocznej na ekranie. Skrypty te mogą również mieć poważny negatywny wpływ na skumulowaną zmianę układu.

Zastępując je szybciej ładującym się kodem HTML, poważnie ulepszysz First Contentful Paint, tylko ze względu na naturę technologii HTML i CSS.

Wyłącz Lazy Load Above The Fold (szalone, wiem)

Kontynuując czyszczenie wszelkich elementów opartych na JavaScript, jeśli leniwie ładujesz obrazy wyświetlane w części strony widocznej na ekranie, będziesz chciał wyłączyć tę funkcję.

Lazy loading images to świetny sposób na zwiększenie wydajności witryny WordPress, ale w rzeczywistości mają one negatywny wpływ na First Contentful Paint, ponieważ wykorzystują biblioteki JavaScript do włączenia tej funkcji.

Wyłącz więc leniwe ładowanie obrazów, które ładują się w części strony widocznej na ekranie, ale upewnij się, że są odpowiednio zoptymalizowane. Obejmuje to przekonwertowanie ich do formatu WebP (użyj ShortPixel), a także całkowite skompresowanie ich, aby były jak najmniejsze przy zachowaniu przejrzystości.

Obrazy wbudowane (SVG lub Base64)

Jeśli chcesz jeszcze bardziej zwariować podczas optymalizacji obrazu, w przypadku mniejszych obrazów, które nie mają większych wymagań dotyczących rozdzielczości, możesz je umieścić w linii. Jest to dobre, jeśli masz określone logo lub mniejszy obraz, który ładuje się w górnej części strony. Konwertując je do formatu SVG lub base 64, wstawiasz obraz, redukując dodatkowe żądanie HTTP w celu ich pobrania, poprawiając FCP.

Pamiętaj, że ta rada może być pomocna tylko w określonych przypadkach użycia, a jeśli masz serwer oparty na HTTP2 lub niewiarygodnie ciężki obraz, który próbujesz ustawić, najlepiej zachować go bez zmian.

Jednak wykorzystanie logo SVG i 64 podstawowych logo, ikon wyszukiwania, ikon mediów społecznościowych i tła może być korzystne dla Twojego First Contentful Paint, poprawiając wynik witryny WordPress w Google oraz poprawiając pozycję w rankingu i wrażenia użytkownika.

Skoncentruj się na rozmiarze DOM

Ostatnią ważną rzeczą, jaką możesz zrobić, jest skupienie się na rozmiarze DOM. DOM lub dokument obiektowy model jest strukturą przypominającą drzewo, która zasadniczo odnosi się do każdego elementu na twojej stronie.

Tak więc wszelkie elementy div w treści, opakowania span, akapity, nagłówki, metaliki i inne elementy będą uważane za elementy DOM. Im więcej elementów na stronie, tym dłuższy czas renderowania i wolniejsze pierwsze wyrenderowanie treści.

Tak więc, zmniejszając liczbę elementów DOM, będziesz miał szybciej ładującą się stronę internetową. Można to zrobić, całkowicie przebudowując stronę tak, aby była jak najbardziej szczupła, z dowolnymi umieszczonymi w niej elementami lub wykorzystując nowy motyw lub narzędzie do tworzenia stron.

Na przykład Elementor zawija swoje elementy w dziesiątki niepotrzebnych elementów div, więc przejście na narzędzie do tworzenia stron z mniejszym rozrostem kodu może zminimalizować liczbę elementów DOM na stronie, prowadząc do mniejszego transferu danych, co prowadzi do skrócenia czasu renderowania, co prowadzi do lepsze wyniki First Contentful Paint w Google.

Wniosek

Ponieważ First Contentful Paint wywodzi się z rzeczywistego doświadczenia użytkownika w Twojej witrynie WordPress, nie możesz jechać na łyżwach z zasobem o niskiej wydajności. Zamiast tego musisz zająć się pierwszym i stawić czoła wynikom malowania, włączając te sześć metod do optymalizacji, co zapewnia lepsze wrażenia użytkownika, lepsze miejsce w rankingu i niższy współczynnik odrzuceń.

Istnieje wiele innych metod, których możesz użyć, aby zwiększyć ogólną wydajność witryny WordPress, co będzie również korzystne dla Twojego pierwszego malowania treści, ale te sześć metod to najlepszy sposób na zwiększenie pierwszego malowania świątyń na witrynie WordPress. Jeśli masz dodatkowe zalecenia dotyczące optymalizacji, możesz je zostawić w sekcji komentarzy poniżej.