Speed advisor: co włączyć, aby strona była szybsza

Doradca prędkości czyta Twoją stronę główną (i ostatnio zaimportowany raport Lighthouse) i wymienia, co włączyć w Baza Helper, a co może naprawić tylko motyw. To karta u góry diagnostyki wydajności w Baza Helper > Pamięć podręczna i optymalizacja.

Uruchom

1. Otwórz Baza Helper > Pamięć podręczna i optymalizacja i znajdź kartę Doradca prędkości.
2. Kliknij Przeanalizuj tę stronę. Wtyczka pobiera Twoją stronę główną z tej samej witryny, a także używa ostatniego raportu Lighthouse, jeśli go zaimportowano.
3. Przeczytaj porady. Każda pozycja ma krótkie uzasadnienie. Porada, która jest już włączona, nie jest oferowana ponownie.
4. Zaznacz, co chcesz, i kliknij Włącz wybrane. Przełączniki są włączane razem, cache stron jest czyszczony i startuje rozgrzewanie.
5. Otwórz stronę i przetestuj ją, szczególnie formularze, menu i suwaki.

Porada, którą wtyczka może zastosować, ma przełącznik, a przycisk stosuje wybrane naraz. Porada, której wtyczka nie może zastosować, to zwykły tekst z etykietą Zrób to sam i bez przełącznika.

Jeśli wszystko zalecane jest już włączone, karta pisze „Nic do włączenia: zalecane przełączniki są już włączone”. Jeśli strona główna nie odpowiada kodem HTTP 200, doradca mówi o tym i nie daje porad.

Co może zalecić

• Pamięć podręczna stron ze statycznym wydawaniem: strona jest budowana od nowa dla każdego odwiedzającego, a to czas do pierwszego bajtu. Zapisana kopia odpowiada od razu.
• Dłuższy czas życia pamięci podręcznej (6 godzin): kopia żyjąca pięć minut często znika, zanim przyjdzie odwiedzający lub test szybkości. Cache i tak jest czyszczony, gdy zmienia się treść.
• Połącz lokalne arkusze stylów w jeden plik, gdy stronę blokuje więcej niż sześć arkuszy stylów: jeden plik to jedno żądanie zamiast wielu.
• Czcionki: pokaż tekst od razu (font-display swap) i ładuj główne czcionki wcześnie (automatyczne wstępne ładowanie).
• Odrocz skrypty Elementora i jego dodatków.
• Odrocz wszystkie skrypty, w tym jQuery i motyw: wtyczka odkłada je w bezpiecznej kolejności i trzyma jQuery jako pierwsze, gdy strona wykonuje kod w treści, który go potrzebuje.
• Chroń i wstępnie ładuj największy obraz: największy obraz pierwszego ekranu jest znajdowany i ładowany pierwszy i nigdy nie jest ładowany z opóźnieniem.
• Odrocz ładowanie obrazów poniżej pierwszego ekranu, gdy strona ma więcej niż osiem obrazów.
• Pomiń style, których strona główna nie używa: gdy raport Lighthouse pokazuje arkusz stylów nieużywany w ponad 90 procentach na stronie głównej, doradca proponuje pominąć go tylko na stronie głównej (dodaje uchwyt z @front do reguł w „Skrypty i style”). Połączone kopie, chronione uchwyty i jQuery nigdy nie są proponowane. Potem sprawdź stronę.
• Pozostawić własne skrypty motywu poza odraczaniem: pokazywane, gdy odraczanie wszystkich skryptów jest włączone, a pierwszy ekran jest rysowany później niż sekundę po nadejściu strony.
• Ładować połączone arkusze stylów po pierwszym ekranie: wymaga to Critical CSS.
• Zrób to sam: zrób kopie dużych obrazów w rozmiarze telefonu (karta Obrazy, „Utwórz” z „Utwórz ponownie wszystkie”), wygeneruj Critical CSS przyciskiem „Generuj automatycznie” w panelu Critical CSS i wygeneruj go ponownie, gdy jest większy niż 30 KB (powstaje dla jednego rozmiaru ekranu, telefonu). Potem sprawdź stronę.

Dla twórcy motywu

Niektórych problemów nie naprawi przełącznik wtyczki. Druga lista, Dla twórcy motywu, zbiera je ze strony i raportu: skrypty w head bez defer i wtyczkę lub motyw, który je wypisuje, wymuszony reflow, kolory tekstu o zbyt małym kontraście, atrybuty ARIA niedozwolone na elemencie, obrazy większe niż pokazywane, style, których strona nie używa, i zbyt dużo pracy w głównym wątku. Kliknij Skopiuj listę, aby wysłać ją osobie budującej Twój motyw.

Jeśli jQuery musi zostać pierwsze, bo strona wypisuje kod w treści, który sam je wywołuje, doradca o tym mówi i wskazuje skrypty. Opakuj ten kod w obsługę DOMContentLoaded lub wypisz go przez wp_add_inline_script.

Warto wiedzieć

• Doradca zmienia tylko własne przełączniki wtyczki w Pamięć podręczna i optymalizacja. Nigdy nie edytuje Twojego motywu ani innych wtyczek.
• Czyta tylko stronę główną. Uruchom go ponownie po zmianie motywu lub dodaniu wtyczki.
• Zaimportuj świeży raport Lighthouse w karcie diagnostyki, aby uzyskać fakty o nieużywanym CSS, kontraście i dużych obrazach.