Gdyby mi jutro powiedziano, że na bezludną wyspę mogę zabrać tylko jedną wtyczkę, prawdopodobnie zabrałabym Perfmatters, a gdybym miała fanklub, zapisałabym się i chodziła na wszystkie ich koncerty.
Używam jej od stycznia 2021 r. i jest to jedna z wtyczek, która rozwiązała najwięcej problemów i która najbardziej i najlepiej przyczynia się do zmniejszenia prędkości ładowania.
Istotne
Jest to jedno z tych narzędzi, w przypadku których nawet nie zastanawiają się Państwo nad odległą możliwością nie zapłacenia, gdy nadejdzie dzień corocznego odnowienia. Co, nawiasem mówiąc, jest bardzo ekonomiczne w przypadku zastosowania na jednej stronie. Kosztuje tylko 24,95 dolarów i ma 15% zniżki na kolejne odnowienia. Od drugiego roku jest to więc 21,21 USD za marne 21,21 USD.
Ponieważ niektóre z jego funkcji opisałem osobno, czekała mnie bardziej dogłębna analiza i samouczek konfiguracji. To jest właśnie cel tego wpisu.
O konfiguracji
Disclaimer: Nie trzeba dodawać, że dodane przeze mnie ikony włączania i wyłączania pochodzą z mojej konfiguracji, która jest najlepszą, jaką mogłem uzyskać dla tego bloga. Nie oznacza to jednak, że jest on idealny dla Państwa środowiska.
Każdy scenariusz jest inny. Będzie Pan musiał przestudiować każdą opcję i zrozumieć ją, poeksperymentować z jej zachowaniem i zdecydować, co jest najlepsze w Pana przypadku. W tym celu nie ma nic lepszego, niż testowanie opcji jedna po drugiej i ocena wyników.
Kolejną rzeczą, o której należy pamiętać, jest to, że zdublowane narzędzia będą kolidować. Istnieją inne wtyczki, jak WP Rocket lub wtyczka cache serwera z Litespeed, które mają pewne funkcje, które robią dokładnie to samo. Aktywowanie ich razem może powodować konflikty. Musi Pan ocenić, która z nich działa najlepiej i trzymać się tylko jednej.
Zakładka ogólna
Zakładka ogólna zawiera najczęściej stosowane narzędzia. Obok każdego z nich znajdą Państwo link do odpowiedniej pomocy. Proszę się nie bać ich spróbować. Wszystko jest odwracalne. Kliknięcie przełącznika przywraca wszystko do stanu pierwotnego, a tu nic się nie stało
Wyłączenie emojis
W wersji 4.2 WordPressa z 2015 roku dodano do rdzenia obsługę emojis dla starszych przeglądarek.
Chociaż nie są one zbyt ciężkie (18 KB plus inne JS), można je wyłączyć, ponieważ ładują skrypt wp-emoji-release.min.js na każdej stronie Państwa bloga, a jedno żądanie mniej to zawsze jedno żądanie mniej.
Wyłączenie dashiconów
Dashicons jest oficjalną czcionką ikon w administracji WordPressa od wersji 3.8. Niektóre szablony używają go na front-endzie, ładując CSS dashicons.min.css. Jednak wiele nowoczesnych motywów i wtyczek stosuje już własne ikony, SVG lub nie stosuje ich wcale. Jeśli więc nie korzystają Państwo z dashiconów, można je wyłączyć, ponieważ arkusz stylów dodaje niepotrzebny czas ładowania, a także blokuje renderowanie.
Wyłączenie ich z Perfmatters nie ma wpływu na panel administracyjny WordPress, który z nich korzysta. Tylko dashicony na front-endzie zostaną usunięte, gdy nie będą Państwo zalogowani.
Wyłączenie embedów
Gdy dodadzą Państwo w edytorze dowolny link z Państwa bloga, WordPress rozpoznaje go i wyświetla jako taki (jeżeli nie zmienili Państwo jego stylizacji).
Jeżeli nie zależy Państwu na embedach, można je wyłączyć i nieco odciążyć. Nie wyłączyłem ich, ponieważ zauważyłem, że linki z podglądem mają dobry współczynnik klikalności, gdy są używane jako linki powiązane między akapitami.
Osadzanie lub embedy pojawiły się wraz z wersją 4.4 WordPressa. Wadą jest to, że zostały one dostarczone z dodatkowym kodem, który jest dodawany poprzez dołączenie jeszcze jednego JavaScript do załadowania: wp-embed.min.js
Wyłączenie embedów na Państwa blogu uniemożliwia również innym blogom osadzanie linków z Państwa strony z tym podglądem, ale usuwa specyficzny dla oEmbed JavaScript, wyłącza filtrowanie wyników oEmbedów,
usuwa wykrywanie linków oEmbedów, a także wszystkie reguły przepisywania embedów.
Wyłączenie XML-RPC
XML-RPC to protokół, który został dodany w WordPress 3.5, aby umożliwić zdalne połączenia i, o ile nie korzystają Państwo z aplikacji WordPress App do publikowania lub edytowania bloga z urządzeń mobilnych, należy go wyłączyć, ponieważ stwarza on poważne zagrożenia bezpieczeństwa.
Bardzo niewiele wtyczek tego wymaga, znam tylko jedną, która tego używa: JetPack. Wielofunkcyjny plugin, który nie jest zalecany, ponieważ znacznie ogranicza wydajność.
Po dezaktywacji XML-RPC wystarczy sprawdzić jego status, wchodząc na stronę yourdomain.com/xmlrpc.php, aby upewnić się, że zwraca on tylko komunikat o błędzie 403.
Można to również sprawdzić w tym programie. Jeżeli otrzymają Państwo taki komunikat, oznacza to, że XML-RPC jest wyłączony.
Usuń jQuery Migrate
Została ona wprowadzona w WordPressie 3.6 i nie jest już domyślnie włączona od wersji WP 5.5 i wyższych.
Chociaż większość szablonów i wtyczek nie potrzebuje go, jest jednak kilka takich, które wymagają go dla jakiejś drobnej funkcji. W moim przypadku korzystają z niego dwie wtyczki, Ultimate Membership Pro i Rank Math do paska statystyk (którego nie używam), który jest wyświetlany tylko dla administratorów. Niektóre wtyczki do zarządzania zgodą na pliki cookie jeszcze do niedawna korzystały z tego rozwiązania.
jQuery Migrate to zasób dla programistów, który umożliwia komunikację kodu ze starszymi zależnościami z nowym kodem.
Prawdopodobnie nie mają Państwo żadnych wtyczek, które by tego potrzebowały, więc jQuery Migrate dodaje niepotrzebny narzut w postaci javascripa jquery-migrate.min.js
Mimo to należy sprawdzić dokumentację wtyczek przed ich wyłączeniem lub zapytać ich twórców (później zobaczymy, jak wyłączyć je dla konkretnych witryn).
Ukryj wersję WordPressa
Ta opcja nie ma żadnych tajemnic, po prostu ukrywa wersję zainstalowanego przez Państwa WordPressa przed ciekawskimi oczami jako środek bezpieczeństwa.
To, co można zrobić na różne sposoby, jest przydatne w przypadku spóźnienia się z aktualizacją, gdy w Państwa wersji pojawią się luki, które można wykorzystać, lub gdy rdzeń zostanie naruszony. Przynajmniej ukrywając wersję, ułatwiają Państwo zadanie napastnikom, którzy szukają luk.
Wprawdzie usuwa się tylko jedną linijkę kodu i robi się to głównie dla bezpieczeństwa, ale dla entuzjastów optymalizacji jest to tylko kolejna szczypta, która dodaje się do sumy do odjęcia.
Usunąć link wlwmanifest
Jest to tag, który pojawia się w każdej instalacji WordPressa i był używany przez Windows Live Writer, który przestał być aktualizowany i wspierany w styczniu 2017 roku.
Jak wyżej, to tylko zbędny kod, więc jedna linijka mniej.
Usuń link RSD
Kolejna pozostałość po tagu, który pojawia się w każdej instalacji WordPress.
Jeśli edytują Państwo swoją stronę z poziomu przeglądarki, nie jest ona w ogóle potrzebna. Jest on również używany przez niektóre aplikacje innych firm, które wykorzystują żądania XML-RPC, które powinny być już przez Państwa wyłączone. Jest to więc zbędny kod do usunięcia.
Usunąć krótki link
Służy do tworzenia krótkich linków z numerami dla Państwa stron i postów, które dodają ten tag:
<link rel='shortlink' href='https://dominio.com?p=123' />
Jeżeli używają Państwo "ładnych" krótkich permalinków, takich jak domain.com/%postname%, to nie ma powodu, aby trzymać to bez sensu, więcej niepotrzebnego kodu do wyrzucenia.
Wyłączyć kanał RSS
WordPress domyślnie generuje różne rodzaje kanałów RSS. Chociaż kanały RSS są nadal użyteczne dla bloga, to jeżeli Państwa strona jest raczej statyczna lub po prostu nie używacie jej Państwo jako bloga, można wyłączyć kanał.
Usuń linki z kanałów RSS
Tak jak WordPress generuje kanały RSS, tak samo generuje linki do tych kanałów RSS dla Państwa stron, postów, komentarzy, kategorii, tagów itd. Można pozostawić włączone kanały RSS i mimo to usunąć linki do kanałów RSS. Celem tego jest usunięcie z Państwa strony dodatkowego i najprawdopodobniej nieużywanego kodu.
Wyłączenie autopingbacków
Pingback to w zasadzie automatyczny komentarz z linkiem, który powstaje jako powiadomienie na Państwa blogu, gdy inny blog zamieści link do Państwa. Autopingback powstaje wtedy, gdy na własnym blogu umieszczają Państwo link do artykułu.
Obecnie prawie nikt ich nie używa, a zewnętrzne pingbacki, które mogą Państwo otrzymać, są zazwyczaj spamem, marnują tylko zasoby i mogą nawet tworzyć złośliwe lub tymczasowe linki, które następnie są łamane i tym samym szkodliwe dla SEO.
Podobnie jak trackbacki, należą do przeszłości blogów, kiedy linkowanie jako filozofia blogowania było tradycją jako część netykiety.
Wyłączenie REST API
WordPress REST API oferuje punkty końcowe API dla typów danych WordPressa, które umożliwiają programistom zdalną interakcję z witrynami poprzez wysyłanie i odbieranie obiektów JSON.
Pozwala na porównywanie danych z innymi stronami oraz z oprogramowaniem napisanym w PHP lub innym języku.
Istnieją różne wtyczki, usługi i aplikacje, które korzystają z REST API, według Perfmatters są to niektóre z nich:
Widżet pulpitu nawigacyjnego Yoast SEO i Ryte, Jetpack, niektóre formularze kontaktowe, Wordfence i niektóre widżety pulpitu nawigacyjnego WooCommerce.
Jest on również wykorzystywany przez edytor blokowy Gutenberg do komunikacji, gdy dokonują Państwo edycji stron i postów. Jeśli wyłączy się ją całkowicie, pojawi się błąd "Aktualizacja nie powiodła się".
Perfmatters oferuje trzy opcje. Włączone (domyślnie), wyłączone dla osób niebędących administratorami i wyłączone po wylogowaniu.
Usuń powiązania REST API
Domyślnie w nagłówku typu umieszczony jest link do REST API:
<link rel='https://api.w.org/' href='https://domain.com/wp-json/' />W każdym żądaniu wysyłany jest również nagłówek, a do punktu końcowego Really Simple Discovery (RSD) dodawany jest tag API. Z całego tego kodu można zrezygnować, włączając opcję usuwania jego linków.
Wyłączyć Google Maps
Tylko to, wyłączyć Google Maps API.
Niektóre szablony i wtyczki WordPressa mają wbudowany Google Maps API i często nie oferują możliwości jego wyłączenia. Mapy Google mogą wywołać spustoszenie w wydajności Państwa bloga, mimo że zapytania są ładowane asynchronicznie. Zazwyczaj wniosek składa się za pośrednictwem oficjalnego API Google Maps.
Aby załadować mapę na Państwa blogu, można wykonać do 20 żądań HTTP do Google Maps. W zależności od integracji mogą Państwo złożyć mniej lub więcej wniosków.
Jeżeli nie są one potrzebne, należy je wyłączyć.
Wykluczenie dezaktywacji Google Maps przez numer identyfikacyjny poczty
Jeżeli jednak nie mają Państwo wyboru i muszą osadzać mapy, można wyłączyć dezaktywację tylko dla tych postów, w których trzeba je dodać. W tym celu należy wpisać w poniższym polu ID każdego postu, oddzielając je przecinkami.
Wyłączenie miernika siły hasła
Zostało to wprowadzone w najnowszych wersjach WordPressa i WooCommerce. Jest to wbudowany miernik siły hasła, który zmusza użytkowników do stosowania silnych haseł i ładuje kilka plików takich jak: /wp-admin/js/password-strength-meter.min.js i /wp-includes/js/zxcvbn.min.js
zxcvbn.min.js może mieć rozmiar ponad 800 KB
Jeżeli korzystają Państwo z WooCommerce, plik ten znajduje się również czasami w tej ścieżce:
/wp-content/plugins/woocommerce/assets/js/frontend/password-strength-meter.min.jsW zależności od szablonu i tego, jak deweloper ustawił wszystko w kolejce, czasami te pliki są ładowane w całej witrynie. Ze względu na wydajność powinny być ładowane tylko na stronach "konto", "kasa" i "reset hasła".
Jeżeli po wyłączeniu tej funkcji nadal znajdują Państwo te skrypty wśród zapytań, proszę zapoznać się z dokumentacją Państwa szablonu oraz dokumentacją wtyczek, które Państwa zdaniem mogą wykorzystywać tę funkcję.
Wyłączenie komentarzy
Jeżeli nie potrzebuje Pan komentarzy lub postanowił Pan skończyć ze spamem w najbardziej radykalny sposób, może Pan wyłączyć możliwość komentowania przez swoich czytelników. Formularz komentarza zniknie.
Jest to lista działań, które Perfmatters będzie próbował wykonać, gdy włączona jest opcja Wyłączenie komentarzy:
- Wyłączenie wbudowanego widgetu ostatnich komentarzy.
- Zdjąć nagłówek X-Pingback.
- Usunąć linki do komentarzy.
- Wyłączenie żądań podawania komentarzy.
- Usunąć linki do komentarzy z paska administratora.
- Usunąć obsługę komentarzy dla wszystkich typów postów.
- Zamknąć filtry komentarzy.
- Usunąć linki do komentarzy z menu administracyjnego.
- Wyłączyć wbudowaną stronę dyskusyjną.
- Ukryć komentarze z panelu sterowania.
- Ukrycie opcji ustawień komentarzy na stronie profilu.
- Na żądanie odesłać pusty szablon komentarza.
- Usunąć skrypt odpowiedzi na komentarze.
Proszę pamiętać, że jeżeli zdecydują się Państwo na opcję łagodniejszą, to z edycji każdego postu można zamknąć komentarze tylko do określonych postów, odznaczając to pole.
Albo w Ustawieniach/komentarzach można ustawić, aby zamykały się po określonej liczbie dni.
Usuń adresy URL z komentarzy
Komentarze WordPressa zawierają domyślnie pole strony internetowej, które tworzy link nofollow (chociaż spamerom to nie przeszkadza) w nazwie autora komentarza.
Jeżeli nie chcą Państwo zajmować się linkami, które z czasem się psują, mają zbyt mało komentarzy lub chcą po prostu wyeliminować spam, mogą Państwo za jednym zamachem usunąć wszystkie adresy URL dodane przez gości w komentarzach.
Włączenie tej funkcji spowoduje również usunięcie pola URL z formularza dla przyszłych komentarzy.
Dodaj pustą favicon
Jeżeli posiadają Państwo już favicon na swojej stronie, należy pozostawić tę opcję wyłączoną.
Dodanie białej favicon jest przydatne, jeżeli tworzą Państwo i testują wiele nowych instalacji WordPress. Dodanie pustej favicon pozwala uniknąć konieczności wgrywania favicon dla każdej witryny. Ponadto, jeżeli Państwo o tym zapomną, może to wygenerować błąd 404 w narzędziach do testowania prędkości.
Usuń globalne style
Począwszy od WordPressa 5.9, dodano dodatkowy kod inline, aby wzmocnić style duotone (kod CSS i SVG). Większość użytkowników prawdopodobnie nie będzie korzystać z tej funkcji, a problem polega na tym, że dodaje ona do każdej strony 311 linii kodu (bez minusów), które są podzielone w ten sposób:
196 linii CSS przed znacznikiem body i 115 linii kodu SVG, który jest również dodany przed znacznikiem /body.
Duża część kodu używa znaczników!important;, co również nie jest idealne.
Perfmatters uważa, że może to być błąd, dlatego dodają tę opcję jako łatwy sposób na usunięcie całego tego niepotrzebnego kodu, podczas gdy ten problem jest rozwiązywany.
Hearbeat, przeglądy i autozapisy
API WordPress Heartbeat wykorzystuje /wp-admin/admin-ajax.php do wykonywania wywołań AJAX z przeglądarki internetowej.
Jest to świetne rozwiązanie, ponieważ pozwala na zapisywanie szkiców i zapobiega ich utracie w przypadku nieoczekiwanego zamknięcia, ale może również powodować duże zużycie procesora i szalone ilości wywołań PHP. Na przykład, jeżeli pozostawią Państwo otwarty panel sterowania, będzie on wysyłał żądania POST do tego pliku w regularnym odstępie czasu, co 15 sekund. Aby to złagodzić, można zwiększyć częstotliwość do 60 sekund.
W pierwszej opcji mogą Państwo wybrać, kiedy i gdzie jest ona uruchamiana.
Trzecia opcja pozwala ograniczyć liczbę przeglądów wpisów, aby zaoszczędzić miejsce, np. jeżeli ustawi się ją na 10, to tylko 10 ostatnich zostanie zapisanych, a poprzednie zostaną usunięte.
Na koniec można ustawić interwał automatycznego zapisywania wersji roboczych. Domyślnie WordPress zapisuje je automatycznie co 60 sekund. Jeżeli jednak zwiększy Pan odstęp czasu, będzie musiał częściej zapisywać ręcznie, dzięki temu przeglądarka nie będzie się tak często "zawieszać", gdy jest Pan w obszarze administracyjnym, a także mniej zapisywać do bazy danych.
Woocommerce
O opcjach optymalizacji dla WooCommerce powiem tylko, że istnieją, ale będę unikał komentarzy, ponieważ w tym domu jest zwyczaj, że nie recenzuje się niczego, co nie jest dla mnie bardzo jasne, a tak jest w tym przypadku. Odinstalowałem WooCommerce w lipcu 2021 r. i prawie nic nie pamiętam o reakcji na te optymalizacje, więc odsyłam Pana do ich dokumentacji:
- Wyłączyć skrypty i style WooCommerce
- Wyłączenie fragmentów koszyka
- Wyłączenie pola statusu WooCommerce
- Wyłączenie widżetów WooCommerce
Adres URL do logowania
Kolejną ciekawą funkcją jest możliwość zmiany domyślnego adresu URL logowania do obszaru administracyjnego, który WordPress ustawia pod adresem yourdomain/wp-admin. Robi dokładnie to samo, co puginały, np WPS Hide Login.
Znajdą Państwo trzy pola:
W pierwszym z nich można zmienić adres url logowania do wp-admin na dowolny, np. "yourdomain.com/potato", unikając w ten sposób ataków brute force i innych, które zwykle celują w domyślny adres url. Wystarczy zapisać i/lub postarać się, aby nie był to dziwny adres url ze zbyt dużą ilością znaków, aby go nie zapomnieć (chociaż zawsze można go odzyskać, wchodząc do tabeli wp_options / perfmatters_options )
Drugie pole (Disabled Behavior) ustawia, na jaki adres url zostanie wysłany gość lądujący na Państwa domenie/wp-admin z trzema możliwościami:
- Wiadomość (domyślnie): Wyświetla wiadomość dla gościa. Wiadomość można dostosować do własnych potrzeb, dodając tekst w polu Wiadomość.
- 404 Szablon: Użytkownik zostanie odesłany na stronę 404.
- URL domowy: Użytkownik zostaje przekierowany na stronę domową.
Aktywa
W tym miejscu robi się naprawdę ciekawie.
Script Manager, czyli wisienka na torcie
Perfmatters Script Manager jest bez wątpienia ich najpotężniejszym i najbardziej użytecznym narzędziem. Już samo to jest warte każdego grosza z niewielkiej kwoty, którą płacą Państwo za wtyczkę i jej wsparcie.
Umożliwia wyłączenie skryptów i CSS używanych przez każdą wtyczkę i uniemożliwienie ich ładowania w poście lub na stronie, w obu miejscach lub w całym serwisie, filtrowanie według zalogowanych lub wylogowanych użytkowników, według urządzeń i dodawanie wyjątków, nawet dla kategorii i tagów.
Może to drastycznie zwiększyć szybkość ładowania (zwłaszcza strony głównej) poprzez wyeliminowanie zbędnych żądań w miejscach, gdzie nie są używane wtyczki, takich jak formularze lub inne.
Mandatory Usage Mode (MU) idzie znacznie dalej w kierunku Script Managera. Daje dużo większą kontrolę i umożliwia wyłączenie zapytań i haków wtyczek WordPressa, a także inline CSS i JS. Teraz mogą Państwo kontrolować wszystkie aspekty wtyczki, począwszy od jej skryptów front-end, poprzez kod inline i zapytania MySQL, gdziekolwiek Państwo zechcą.
W widoku globalnym znajdą Państwo wszystkie zastosowane ustawienia, na wypadek gdyby pewnego dnia trzeba było je przeorganizować, zmodyfikować, dodać nowe lub usunąć niektóre.
Posiada dość kompletną dokumentację. Jeśli nie są Państwo przyzwyczajeni do tego typu narzędzi, może to być początkowo onieśmielające, ale jak tylko spróbują Państwo, odkryją Państwo, że jest to bardzo łatwe w użyciu.
JavaScript
Odroczenie i opóźnienie JavaScript.
Oba te czynniki mogą przyczynić się do poprawy FCP i LCP
Dodanie atrybutu defer do każdego niekrytycznego pliku JavaScript przyspiesza pierwsze malowanie treści (FCP) strony. Oznacza to, że JavaScript jest pobierany podczas parsowania HTML i wykonywany po zakończeniu ładowania strony (po zakończeniu parsowania). Innymi słowy, pobieranie skryptu javascript jest przesuwane na dół strony, tak że odbywa się na końcu procesu.
Z opóźnieniem poprawiają się wyniki LCP i TBT. JavaScript jest opóźniany w zależności od interakcji użytkownika, przyspieszając pierwsze malowanie strony, gdy coś nie jest potrzebne natychmiast, jak np. ciężkie skrypty osób trzecich, jak Google Adsense, Google Analytics, piksele konwersji Facebooka lub Google Ads i podobne.
Dla obu opcji można dodać wyjątki i włączyć zachowanie Delay Timeout, które ustawia timeout, który automatycznie załaduje skrypty po 10 sekundach, jeżeli nie zostanie wykryta żadna interakcja użytkownika. Jest to opcja i domyślnie jest wyłączona.
Czas opóźnienia
Po włączeniu tej opcji mają Państwo możliwość ustawienia czasu opóźnienia na inną wartość przy użyciu jednego z tych filtrów.
Ten w przykładzie jest ustawiony na 7 sekund.
add_filter('perfmatters_delay_js_timeout', function($timeout) {
return '7';
});Radzą, aby nie ustawiać zbyt krótkiej wartości timeout, w przeciwnym razie funkcja opóźnienia JS nie będzie działać prawidłowo. Ponadto, niezależnie od timeoutu, w 99% przypadków wszystko odpali się przy pierwszej interakcji użytkownika, czy to będzie przewijanie, kliknięcie, czy pierwszy ruch myszką.
CSS
Perfmatters twierdzi, że najłatwiejszym sposobem rozwiązania problemu ostrzeżenia "Redukcja nieużywanego CSS" jest włączenie tej funkcji, którą sprawdzałem, gdy była jeszcze w fazie beta, a która robi to wszystko automatycznie. Twórcy twierdzą, że przetestowali go na setkach adresów URL (używając różnych szablonów i ustawień), a oto niektóre z wyników, jakie udało im się uzyskać:
- Średni spadek FCP o 15,20%.
- Średni spadek LCP o 19,66%.
- Średni spadek TTI o 14,95%.
Przed aktywacją funkcji "Usuń nieużywany CSS" w Perfmatters zalecają usunięcie wszystkich istniejących preloadów CSS, które zostały ustawione w Perfmatters (z wyjątkiem lokalnych arkuszy stylów Google Fonts).
Nie należy łączyć CSS (co często robią WP Rocket, Litespeed, Autoptimize i inne). CSS merge to przestarzała technika optymalizacji od czasu HTTP/2. W niektórych przypadkach łączenie CSS może wpłynąć na wydajność(w moim przypadku tak nie było) i na koniec proszę się upewnić, że nie próbują Państwo usunąć nieużywanego CSS za pomocą innej wtyczki.
Istnieją trzy metody usuwania:
- Opóźnienie (domyślnie): Wszystkie oryginalne arkusze stylów CSS (nieużywane CSS) są opóźnione i ładowane przy interakcji użytkownika. Jest to opcja zalecana.
- Asynchroniczny: Wszystkie oryginalne arkusze stylów CSS (nieużywane CSS) są ładowane przezasynchroniczny. Ta metoda może pomóc uniknąć pop-in, ponieważ arkusze stylów są wykonywane asynchronicznie podczas ładowania strony. Ta metoda spowoduje, że LCP/FCP będzie nieco wyższe niż w przypadku postępowania z opóźnieniem.
- Usuń: Wszystkie oryginalne arkusze stylów CSS (nieużywane CSS) są usuwane. Jest to najbardziej agresywna metoda, ale prawdopodobnie będzie wymagała również dodania wyjątków. Jest zalecany tylko dla zaawansowanych użytkowników.
Nie ma tu żadnej tajemnicy poza tym, że trzeba eksperymentować w środowisku testowym i mierzyć wyniki, zarówno w izolacji, jak i w interakcji z innymi funkcjami.
Niektóre z tych funkcji można wyłączyć na każdym poście lub stronie w edycji WP.
Kod
Przydatna klasyka, którą zawiera wiele innych wtyczek, coś, co można nawet zrobić ręcznie, ale co upraszcza i ułatwia operację dodawania własnego kodu do nagłówka, ciała lub stopki Państwa bloga.
Poniższe pola drukują kod bezpośrednio do front-endu, dlatego musi to być poprawny HTML. Dotyczy to również inline CSS wewnątrz znaczników <style> lub inline JS wewnątrz znaczników <script>. Mogą Państwo również przesłać plik JS lub CSS.
Nie obsługuje języków server-side, takich jak PHP. Aby dodać własny kod PHP, zaleca się użycie wtyczki Code Snippets.
Wstępne ładowanie
W Preloadingu pierwsza opcja o nazwie"Instant Page" wykorzystuje bibliotekę instant.page i ładuje lokalnie na Państwa stronę mały plik JS o wielkości mniejszej niż 2 KB(instantpage.js), który służy do wstępnego ładowania adresów URL, gdy użytkownik najedzie na link lub obraz w wersji desktopowej. Na urządzeniach mobilnych adres URL jest ładowany wstępnie po tym, jak użytkownik zacznie stukać w link na swoim ekranie, a zanim go puści.
Po 65 milisekundach rozpoczyna się automatycznie w tle wstępne ładowanie adresu URL.
To narzędzie jest odpowiednikiem"Instant Click" Litespeeda i"Preload Links" WP Rocket, dlatego jeżeli korzystają Państwo z tej opcji w którejś z tych dwóch wtyczek, należy ją dezaktywować, aby wypróbować Perfmatters.
W moim przypadku zadziałało to nieco lepiej niż analogiczna opcja w Litespeed, chociaż należy zauważyć, że w niektórych przypadkach może to zwiększyć obciążenie serwera.
Podobnie jak w przypadku opcji Javascript i CSS, wykorzystanie preloadingu i preconnection powinno być stosowane w zależności od Państwa potrzeb na podstawie różnych testów.
Preloading krytycznych obrazów (tych powyżej fałdy), to opcja będąca jeszcze w fazie Beta, która może pomóc w skróceniu czasu malowania większych treści (LCP) w Core Web Vitals.
Są to zazwyczaj obrazy takie jak logo, wyróżniony obraz w poście, główny obraz na stronie docelowej itp. Po załadowaniu wstępnym przesuwają się one na szczyt wodospadu i w zasadzie informują przeglądarkę, że mają priorytet i powinny być natychmiast załadowane.
Mogą Państwo wybrać pomiędzy zerem, aby nie załadować żadnego (opcja domyślna), a pięcioma obrazami. Permatters zaleca wybór dwóch lub najwyżej trzech, ponieważ Chrome ma limit dwóch wstępnie załadowanych obrazów, które pojawią się na górze wodospadu.
Leniwe ładowanie
Kolejny klasyk związany z wydajnością, który WordPress zawiera natywnie od wydania 5.4 w 2020 roku.
W moim przypadku korzystam z opcji Litespeed, ponieważ w testach znalazłem nieco lepsze wyniki, mimo to ta z Perfmatters działa naprawdę dobrze i stosuje ją również do CSS obrazów tła.
Czcionki
Kolejna dobra rzecz. Ta opcja, dodana do wersji 1.7.4 Perfmatters 1.7.4został wydany 7 czerwca 2022 roku. Dzięki niemu za pomocą kilku kliknięć można lokalnie hostować i wgrywać Google Fonts.
Zalet lokalnego hostingu czcionek jest wiele, zyskują Państwo pełną kontrolę nad nimi, eliminują wszystkie te żądania, a więc i czas ładowania, i mogą Państwo decydować o sposobie ich podawania.
Funkcja ta automatycznie lokalizuje wszystkie referencje Google Fonts, które istnieją na Państwa blogu, pobiera odpowiednie czcionki z fonts.google.com i umieszcza je lokalnie na Państwa serwerze w katalogu: /wp-content/cache/perfmatters/your-domain.com/fonts/
Ten inny post wyjaśnia bardziej szczegółowo jego zastosowanie.
CDN
Nie ma tu nic szczególnego i niewiele jest do skomentowania. Narzędzie, zawsze przydatne, aby dodać CDN, z którego Państwo korzystają. Ponieważ korzystam z QUIC.CLOUD, nie było mi to jeszcze potrzebne.
Analityka
Wprawdzie obecnie nie używam go, ponieważ rozpocząłem przejście na Matomo i przekazałem zarządzanie skryptem Analytics mojemu pluginowi do zarządzania zgodą na pliki cookie RGPD/CCPA, który również zarządza nim prawidłowo, ale wiem, że działa on bardzo dobrze z Perfmatters, ponieważ używałem go już w przeszłości.
Stąd mogą Państwo lokalnie hostować skrypt Google Analytics. Pomaga to przyspieszyć Państwa stronę dzięki ograniczeniu dodatkowych zapytań DNS i rozwiązaniu problemu "wykorzystywania pamięci podręcznej przeglądarki" przez ich skrypt.
Według Perfmatters, jak na ironię, Google we własnym skrypcie ostrzega o buforowaniu, ale to dlatego, że ma bardzo krótki czas ważności nagłówka HTTP cache. W przypadku samodzielnego hostingu, nagłówki HTTP cache z własnego CDN lub serwera zostaną automatycznie zastosowane. Innymi słowy, zyskują Państwo pełną kontrolę nad buforowaniem skryptu.
Zwracają również uwagę, że to narzędzie nie jest oficjalnie wspierane przez Google, ale jest używane od lat bez żadnych problemów.
Hosting Google Analytics lokalnie i serwowanie skryptu z własnego CDN lub serwera pozwala również na wykorzystanie pojedynczego połączenia HTTP/2.
