Nie optymalizujesz witryny, aby zadowolić stoper. Optymalizujesz swoją witrynę dla prawdziwych ludzi. Jak więc określić, czy osiągasz swój cel?
Aby zmierzyć skuteczność witryny z perspektywy użytkownika, w ocenie wydajności należy uwzględnić metryki, takie jak First Contentful Paint I First meaning Paint. Obie powiedzą ci więcej o tym, jak twoja strona zachowuje się w środowisku naturalnym, dzięki czemu możesz zoptymalizować rzeczy, które naprawdę poprawią wrażenia użytkownika.
W tym poście skupimy się w szczególności na tym, jak zmniejszyć czas potrzebny na załadowanie treści w witrynie WordPress, abyś mógł skrócić czas do pierwszej szczęśliwej farby i pierwszej znaczącej farby oraz poprawić wynik Google PageSpeed Insights w tym procesie.
Oto wszystko, co musisz wiedzieć o pierwszej treściwej farbie i pierwszej znaczącej farbie oraz o tym, jak je ulepszyć:
Czym jest First Content Paint (FCP)?
First Content Paint (FCP) to wskaźnik wydajności, który mierzy, ile czasu upłynęło, zanim przeglądarka zacznie wyświetlać pierwsze elementy witryny.
Zazwyczaj pierwsze elementy malowania treści w WordPress są elementami nagłówka, więc odwiedzający najpierw zobaczy logo witryny lub menu nawigacyjne.
Pierwsza Farba treści jest ważna, ponieważ zapewnia odwiedzającym informację zwrotną, że ich prośba jest w toku. Czy kiedykolwiek kliknąłeś link lub przycisk, a następnie kliknąłeś go jeszcze kilka razy, ponieważ nic się nie stało? Zadaniem FCP jest komunikacja ” słyszeliśmy cię i pracujemy nad tym.”Zapewnia to czytelnikowi, że może oczekiwać, że Twoja witryna będzie działać poprawnie i dostarczać treści.
Czym jest First meaning Paint (FMP)?
Pierwsza znacząca farba jest wtedy, gdy dobre rzeczy faktycznie się ładują. Gdy zawartość, której szuka użytkownik, pojawia się na stronie, jest ona określana jako pierwsza znacząca farba.
Odwiedzający przychodzą do twojej witryny po treść, aby nie widzieć logo i menu nawigacyjnego, więc treść ma większą wartość dla odwiedzającego. Pierwsza znacząca farba jest jedną z najważniejszych wskaźników do oceny, jak długo odwiedzający czeka na otrzymanie informacji, na które odwiedził Twoją witrynę. Pierwszy znaczący paint zawiera również czas potrzebny na załadowanie czcionek internetowych, ponieważ są one needed do renderowania treści.
Najcenniejsze elementy treści na twojej stronie są znane jako elementy bohatera. Zależy to od witryny, ale nietrudno określić, jaka jest najcenniejsza część strony.
W przypadku stron wideo na YouTube najważniejszym elementem jest wideo. W sieciach społecznościowych najważniejsze są pierwsze posty na osi czasu, które znajdują się powyżej fałdy. W przypadku blogów najważniejsza jest treść posta na blogu i polecany obraz (jeśli jest wyświetlany powyżej fałdy z treścią bloga), ponieważ jest to to, co użytkownik widzi jako pierwszy.
Inne treści, takie jak obrazy, mogą być odroczone, dopóki odwiedzający ich nie potrzebuje.
Korzystanie z Google PageSpeed Insights do wyszukiwania FCP I FMP
Zarówno pierwsza przyjemna farba, jak i pierwsza znacząca Farba są znane jako wskaźniki wydajności zorientowane na użytkownika. Google nagradza witryny, które zapewniają lepsze wrażenia użytkownika dzięki wyższym rankingom wyszukiwania. Ponieważ Google chce zachęcić właścicieli witryn do optymalizacji ich witryn dla użytkowników, FCP I FMP to dwie metryki, które są mierzone w Google PageSpeed Insights.
Od listopada 2018 r. Google PageSpeed Insights zaczęło używać narzędzia open source o nazwie Lighthouse do symulacji ładowania witryny dla odwiedzających. Latarnia zwraca 6 metryk w Dane Laboratoryjne sekcja, która maluje bogaty obraz wydajności Twojej witryny:
- Pierwsza Zadowolona Farba
- Indeks Prędkości
- Czas na Interactive
- Pierwsza Znacząca Farba
- Pierwszy procesor bezczynny
- Szacowane Opóźnienie Wejścia
First Content Paint I First meaning paint to wskaźniki oparte na czasie, które są mierzone w sekundach. Aby osiągnąć korzystny wynik w oczach Google, chcesz, aby zarówno FMP, jak i FCP były krótsze niż sekunda.
5 zaleceń dotyczących skrócenia czasu malowania i poprawy wyniku PageSpeed Insights
Po uruchomieniu usługi Google PageSpeed Insights Google udostępnia dostosowane sugestie dotyczące naprawy witryny. Uruchomienie testu jest najlepszym sposobem, aby zobaczyć, jak twoja witryna spada.
Poniższe pięć sugestii pochodzi bezpośrednio od Google dla wszystkich witryn na temat tego, jak poprawić pierwszą znaczącą farbę i jak poprawić pierwszą szczęśliwą farbę.
Naszym celem przy pierwszych czterech rekomendacjach jest ulepszenie First Contentful Paint poprzez skrócenie czasu pobierania zasobów i usunięcie przeszkód, które blokują przeglądarce rejestrowanie treści DOM. Ostatnią propozycją jest ulepszenie pierwszej znaczącej farby.
Mamy zamiar dostać się do niektórych szczegółów technicznych, ale jeśli chcesz proste rozwiązanie, Koliber może pomóc. Wypróbuj Hummingbird Pro free i zobacz, jaka to różnica dla Twojej witryny. Wersja 3.0 jest już dostępna dla naszych członków z zupełnie nowym skanerem, który zawiera rekomendacje Lighthouse.
I dla naszych WordPress.org koliber darmowe użytkowników, można spodziewać się nowego skanera w przyszłym tygodniu, lub upgrade do pro I get it now 😉
1. “Zminimalizuj liczbę zewnętrznych arkuszy stylów i skryptów blokujących renderowanie, od których zależy strona”
Co to jest blokowanie renderowania? Gdy odwiedzający ładuje stronę internetową, wszystko, co przeszkadza w renderowaniu drzewa DOM, jest określane jako blokowanie renderowania. Są to przeszkody kodowe, które przeglądarka musi najpierw przetworzyć, zanim zrobi cokolwiek innego.
Czasami są ważne. Na przykład pliki CSS są blokowane przez renderowanie, ale mają kluczowe znaczenie.
Innym razem zasób blokujący renderowanie może poczekać. Dlatego należy przenieść pliki JavaScript z nagłówka strony internetowej, jeśli nie są one potrzebne do renderowania drzewa DOM. Załaduj je po DOM, aby poprawić wrażenia użytkownika.
Jeśli możesz, najlepszym sposobem na optymalizację szybkości strony jest całkowite wyeliminowanie zasobów blokujących renderowanie. Jeśli nie wywołują radości, to byeeeee….
2. “Użyj buforowania HTTP, aby przyspieszyć powtarzanie wizyt”
Buforowanie to niezawodny sposób na zwiększenie szybkości witryny dla odwiedzających, przechowując zasoby w pamięci podręcznej w celu szybszego pobierania. Istnieje kilka rodzajów skrzynek.
Dzięki buforowaniu HTTP przeglądarka przechowuje w swojej pamięci podręcznej kopię zasobów pobranych przez Użytkownika za pośrednictwem protokołu HTTP, dzięki czemu będzie mogła je odzyskać bez dodatkowej podróży na serwer. To znacznie poprawia wydajność dla powtarzających się odwiedzających, gdy odbywa się prawidłowo.
Niedawno porównaliśmy Hummingbird do innych popularnych wtyczek buforujących i Hummingbird zoptymalizował je wszystkie.
3. “Minimalizuj i kompresuj zasoby tekstowe, aby przyspieszyć czas pobierania”
Twoje strony internetowe składają się z tekstowych plików HTML, CSS i JavaScript. Jeśli nie możesz wyeliminować pliku, ponieważ jest on niezbędny, musisz zmniejszyć rozmiar pliku tak bardzo, jak to możliwe.
Można to zrobić na dwa sposoby:
Zminimalizuj swoje pliki
Podczas minifikacji plików tekstowych usuwa się wszystkie obce znaki i spacje, tworząc skompresowany plik, który jest znacznie trudniejszy do odczytania przez ludzi, ale znacznie mniejszy. Przeglądarka nie ma nic przeciwko braku czytelności i będzie mogła pobrać plik znacznie szybciej.
Kompresuj swoje pliki
Kompresja plików jest podobna do procesu kompresji obrazów. Podczas procesu kompresji kompresor wykrywa wzorce i duplikacje w pliku tekstowym i koduje je znacznie efektywniej.
Zarówno minifikacja, jak i kompresja plików tekstowych usuwa dodatkowe bajty, które nie wpływają negatywnie na stronę internetową, ale skracają czas malowania.
4. “Do less JavaScript work on page load”
JavaScript jest jednym z najgorszych przestępców, jeśli chodzi o spowolnienie witryny. Po pierwsze, pliki JavaScript wymagają więcej zasobów do przetworzenia w porównaniu z innymi zasobami. Na przykład obrazy muszą zostać zdekodowane, ale JavaScript musi zostać przetworzony, skompilowany, a następnie ostatecznie wykonany, zajmując dużo cennego czasu.
Nie pomaga to również, gdy kod JavaScript jest zwinięty w jeden ogromny plik. Wiem, że wydaje się to sprzeczne z intuicją, ale utworzenie jednego dużego pliku nie pomaga w wydajności ani trochę.
O wiele lepiej podzielić kod na kawałki wielkości ugryzienia za pomocą procesu znanego jako podział kodu. Następnie możesz przesunąć elementy, które nie są krytyczne, z głowy witryny, skracając czas pierwszego malowania.
Innym sposobem na zminimalizowanie plików JavaScript jest przycięcie kodu, który nie jest już używany. Proces ten jest znany jako Tree shaking. Jako twój strona dojrzewa, dodajesz fragmenty kodu, ale nie wszystko jest używane w dłuższej perspektywie. Powinieneś okresowo przeglądać kod JavaScript i usuwać to, czego nie potrzebujesz.
5. “Optymalizacja krytycznej ścieżki renderowania w celu uzyskania szybszego pierwszego znaczącego obrazu”
Krytyczna ścieżka renderowania odnosi się do wszystkich zasobów, które przeglądarka musi renderować, aby odpowiedzieć na bieżące żądanie odwiedzającego. Chcesz nadać priorytet zasobom, które są najważniejsze right now i załaduj je tak szybko, jak to możliwe.
To jak podróżowanie. Jeśli chcesz umówić się na czas i jesteś spóźniony, prawdopodobnie nie jest to najlepszy czas na szybkie sprawunki lub małe zwiedzanie. Zrób to później!
Zalecenie to obejmuje usunięcie zasobów blokujących renderowanie, ale ma szerszą perspektywę. Musisz spojrzeć na całą pracę, którą wykonuje przeglądarka, aby dostarczyć stronę internetową i znaleźć lepszy sposób na obsługę ważnych bitów i odłożyć wszystko, co może poczekać. Jeśli nie jest krytyczny, możesz go odroczyć lub załadować asynchronicznie, aby zapewnić lepszą wydajność.
Pamiętaj
Gdy zaczniesz optymalizować swoją witrynę, ważne jest, aby pamiętać, że wyniki zwracane przez Google PageSpeed Insights reprezentują tylko jedną perspektywę. Są to symulowane wyniki, ale nie w pełni uchwycić rzeczywistość.
Odwiedzający, którzy odwiedzają Twoją witrynę na gównianych urządzeniach na tandetnym połączeniu mobilnym, doświadczą FCP I FMP, które są znacznie dłuższe. Jeszcze więcej powodów, aby kontynuować poprawę, nawet jeśli masz idealną 100.
Twoim celem zawsze powinna być optymalizacja witryny dla prawdziwych użytkowników, a nie Złota Gwiazda 😉
Streszczenie
First Contentful Paint I First meaning Paint To wskaźniki skoncentrowane na użytkowniku, które mogą wiele powiedzieć o tym, jak długo twoi goście czekają na treści. Oba powinny być krótsze niż sekundę, aby zapewnić najlepsze wrażenia użytkownika. Możesz dowiedzieć się, jak twoja witryna osiąga wyniki Dzięki Google PageSpeed Insights.
Jeśli witryna jest zbyt wolna, najlepszym sposobem na skrócenie czasu na pierwsze malowanie jest zminimalizowanie zasobów blokujących renderowanie, użycie buforowania HTTP, zminimalizowanie i skompresowanie zasobów tekstowych, mniej pracy w języku JavaScript i optymalizacja krytycznej ścieżki renderowania. Jeśli nie masz pewności, co musisz zrobić, uruchomienie testu Google PageSpeed Insights da ci ukierunkowane sugestie dotyczące twojej witryny.
Jeśli nie jesteś pewien, jak poprawić czas malowania, Hummingbird ułatwia. Pobierz Koliber za darmo na WordPress.org lub spróbuj Koliber Pro za darmo.
Tagi:
