Kompletny przewodnik po optymalizacji szybkości strony dla WordPress

Postępując zgodnie z tym przewodnikiem, poznasz wszystkie techniki drastycznego przyspieszenia witryny WordPress. Oto najważniejsze powody, dla których świetna szybkość ładowania strony w WordPressie jest korzystna dla Twojej firmy: użytkownicy nie opuszczą Twojej witryny, spędzą tam więcej czasu i pieniędzy, a wyszukiwarki będą lepiej umieszczać Twoją witrynę w wynikach wyszukiwania. Gotowe?

Wprowadzenie

Internauci nie mają wiele cierpliwości, jeśli chodzi o czas ładowania strony. Klikamy w link lub wpisujemy adres URL i czekamy sekunda, dwie, trzy i to wszystko. Statystyki Google podają, że 50% użytkowników oczekuje, że strona mobilna załaduje się w 2 sekundy, a 53% prawdopodobnie porzuci stronę, jeśli ładuje się ona dłużej niż 3 sekundy. To bardzo krótki okres, jeśli weźmiemy pod uwagę, że średni czas ładowania strony głównej na urządzeniu mobilnym to 19 sekund (w sieci 3G). Czasy ładowania na komputerach są szybsze, a średni czas ładowania to 5 sekund, ale to wciąż za długo.

Przyjmowanie testów porównawczych witryn na komputery stacjonarne jako odniesienia nie jest już wymówką. W przypadku większości dzisiejszych witryn większość ruchu pochodzi z urządzeń mobilnych. W tym artykule przyjrzymy się w pełni najnowszym technikom optymalizacji szybkości strony w witrynach WordPress. Postępując zgodnie z tym przewodnikiem, będziesz mógł przyspieszyć witrynę WordPress, drastycznie skracając czas ładowania urządzeń mobilnych i komputerów stacjonarnych, a tym samym uczynić ją bardziej przyjazną dla użytkownika.

Jeśli nie masz witryny WordPress, nie zamykaj jeszcze przewodnika. Większość technik optymalizacji prędkości wyjaśnionych w tym przewodniku krok po kroku można zastosować na dowolnym typie witryny.

Jeśli Twoja witryna została stworzona z myślą o zarabianiu, niezależnie od tego, czy jest to internetowy sklep e-commerce, czy też sprzedajesz usługi online/offline, utrata potencjalnych klientów nigdy nie jest dobrą rzeczą. W zasadzie zostawiasz pieniądze na stole. Poprawa szybkości strony powinna mieć pozytywny wpływ na Twoje zarobki. Ciekawostka: kampania fundraisingowa Obamy zwiększyła konwersję darowizn o 14% dzięki optymalizacji witryny i skróceniu czasu ładowania strony z 5 sekund do 2 sekund.

Jako właściciele lub programiści stron internetowych chcemy, aby nasi odwiedzający mieli jak najlepsze wrażenia. Tworzymy świetnie wyglądające strony z niesamowitą funkcjonalnością, ale zwykle zapominamy, jak ważna jest szybka strona internetowa. Szybka strona internetowa buduje zaufanie naszych odwiedzających, zwiększa szansę, że odwiedzający pozostanie na naszej stronie dłużej, a tym samym może wydać więcej. Z drugiej strony, jeśli nasza strona internetowa działa wolno, odwiedzający mogą po prostu zrezygnować i nawet nie zobaczą naszej wspaniałej strony internetowej z równie niesamowitą ofertą.

Jeśli powyższe powody nie były wystarczająco przekonujące, mam jeszcze jeden. Google i inne wyszukiwarki (SE) ujawniły, że powolna strona internetowa obniży pozycję Twojej wyszukiwarki, pozostawiając jeszcze mniej odwiedzających. Posiadanie szybkiej strony internetowej oznacza więc, że Google będzie Cię bardziej lubił, a to może drastycznie zmienić Twoje rankingi SE na Twoją korzyść.

Oczywiście czasy ładowania różnią się z kilku powodów, na przykład szybkości Internetu odwiedzającego, lokalizacji odwiedzającego oraz tego, jak „ciężka” lub rozdęta jest nasza witryna. Nic nie możemy zrobić z szybkością Internetu odwiedzającego, ale możemy zająć się innymi aspektami i poprawić wrażenia dla wszystkich. W tym przewodniku przyjrzymy się, jak zoptymalizować naszą witrynę WordPress pod kątem szybkości, aby była szybka i szczupła, więc chodźmy!

Spis treści

• Podwaliny
  • Hosting WordPress
    • Hosting współdzielony
    • Zarządzany hosting
    • VPS lub serwery dedykowane
  • Motyw WordPress
  • Wtyczki WordPress
• Kroki optymalizacji szybkości strony WordPress
  • Narzędzia szybkości strony
    • Statystyki Google PageSpeed
    • GTMetrix
    • Test szybkości witryny Pingdom
    • Test strony internetowej
  • Optymalizacja obrazu
    • Mini przewodnik po optymalizacji obrazu
    • Zoptymalizowane obrazy Google PageSpeed
    • Inne ulepszenia obrazu
    • Ulepszenia studium przypadku
  • Buforowanie przeglądarki
  • Kompresja zasobów (Gzip lub Deflate)
  • Usuń niepotrzebne pliki JS lub CSS
  • JavaScript i CSS blokujące renderowanie w części strony widocznej na ekranie
  • Buforowanie po stronie serwera
    • WP Rocket (wtyczka buforowania po stronie serwera)
  • Sieć dostarczania treści
    • Cloudflare
• Ostateczne rezultaty
• Wniosek

Podwaliny

Aby Twoja strona internetowa była jak najszybsza, musimy ją zbudować na dobrych fundamentach. Podobnie jak budowa domu, nie chcesz budować go na ruchomych piaskach i masz problemy już na początku. Chcesz ją postawić na solidnych fundamentach, żeby wytrzymała bezproblemowo przez długi czas. Trzy główne rzeczy do sprawdzenia to:

• hosting
• motyw WordPress
• wtyczki WordPress

Hosting WordPress

Hosting jest podstawą Twojej witryny WordPress i dlatego jest kluczowym elementem, którego nie należy pomijać, nawet jeśli masz już hosting. Przejście na lepszego dostawcę hostingu przyspieszy czas ładowania WordPressa nawet o kilka sekund.

Wybór odpowiedniego hosta internetowego jest ważny i nie powinieneś opierać swojej decyzji na cenie hostingu. Zwykle przy niskich cenach uzyskujesz niską wydajność i tego chcemy uniknąć. Przyjrzyjmy się dostępnym opcjom hostingu i wyjaśnijmy, jakie są różnice.

Hosting współdzielony

Jest to najbardziej rozpowszechnione rozwiązanie hostingowe, ponieważ jest tanie. Ale jak powiedzieliśmy, przy niskich cenach otrzymujesz niską wydajność. Na hostingu współdzielonym na jednym serwerze fizycznym znajdują się tysiące kont, co oznacza, że ​​zasoby serwera są dzielone między wszystkie strony internetowe tworzone przez te konta hostingowe.

Wyobraź sobie dużą pizzę (hmmm?…), każda witryna na współdzielonym hostingu dostaje bardzo mały kawałek. Ale ponieważ Twoja witryna ma wielu odwiedzających, potrzebuje więcej pizzy! Nadal jest głodny, ale nie ma już pizzy :(, bo inne strony też są głodne…

Jeśli zdobycie tylko małego kawałka pizzy nie jest wystarczająco złe, potencjalne zagrożenia bezpieczeństwa prawdopodobnie pogorszą sprawę hostingu współdzielonego. Zainfekowana strona internetowa na współdzielonym hostingu może powodować problemy z szybkością i wydajnością całego serwera, a także zagrażać Twojej witrynie WordPress.

Konfiguracja serwerów na współdzielonych hostingach jest bardzo ograniczona i nie masz zbyt wiele miejsca na skonfigurowanie jej według własnych upodobań. Serwer jest wstępnie skonfigurowany do określonych, zwykle bardzo ogólnych ustawień i powinien bez problemu uruchomić WordPress. Problemy pojawiają się później, w postaci braku pamięci lub w postaci ograniczonego ustawienia PHP, którego wtyczka musiałaby działać poprawnie.

Naprawdę nie mogę polecić hostingu współdzielonego dla żadnej witryny biznesowej, ale gdybym musiał, musiałbym powiedzieć, że jest najbardziej odpowiedni dla witryn o bardzo małym ruchu.

Zarządzany hosting

To duże ulepszenie w stosunku do hostingu współdzielonego, ponieważ Twoja witryna dostaje większy kawałek pizzy (cały kawałek pizzy, tak!), ale kosztuje więcej.

Serwery na zarządzanym hostingu są mniej zaludnione, co przekłada się na więcej zasobów serwerowych dla Twojej witryny. Serwery te są zwykle zoptymalizowane pod kątem płynnego działania WordPressa, mają więcej pamięci, moc obliczeniową i system buforowania.

Instalacja sprzętu i oprogramowania oraz konfiguracja tych zarządzanych serwerów hostingowych jest wykonywana przez firmę hostingową (stąd słowo „zarządzany”). W skład hostingu zarządzanego mogą wchodzić również inne usługi, takie jak backupy, load balancery, odzyskiwanie po awarii oraz kontrole/zapobieganie bezpieczeństwa, w zależności od oferty firmy hostingowej.

Zarządzany hosting WordPress jest zalecany dla witryn o małym i średnim ruchu.

VPS lub serwery dedykowane

Jeśli będziemy trzymać się analogii do pizzy, z VPS (Virtual Private Server) otrzymasz kilka kawałków pizzy, ale nie całą pizzę, a przy serwerach dedykowanych otrzymasz całą pizzę.

Oznacza to, że w przypadku serwerów dedykowanych masz kontrolę nad całym serwerem ze wszystkimi jego zasobami, a dzięki VPS otrzymujesz część serwera, ponieważ nadal dzielisz fizyczną maszynę serwera z innymi. Jeśli chodzi o optymalizację szybkości strony dla WordPress, nie ma żadnych ograniczeń po stronie serwera podczas konfigurowania WordPressa na VPS lub serwerze dedykowanym. Wiesz dokładnie, ile zasobów jest dostępnych dla Twojej witryny i możesz ją skonfigurować według własnych upodobań. Możesz wdrożyć najnowocześniejsze funkcje, zanim standardowi dostawcy usług hostingowych będą je obsługiwać (co może być opóźnione w stosunku do technologii oprogramowania serwerowego).

Obie te opcje zapewniają większą kontrolę i zasoby, ale mają również wyższe ceny i wymagają więcej umiejętności, aby je skonfigurować i utrzymać na dłuższą metę. Serwery VPS/dedykowane mogą być również zarządzane, więc nie musisz być guru serwerów, aby z nich korzystać. Są odpowiednie dla witryn o dużym natężeniu ruchu.

Jeśli nie jesteś pewien, na który hosting się zdecydować, sugeruję opcję hostingu zarządzanego WordPress, który w razie potrzeby powinien również być w stanie skalować (przydzielić więcej zasobów z serwera).

Bezpłatna optymalizacja strony internetowej, którą każdy przyzwoity hosting oferuje obecnie, polega na aktualizacji PHP do wersji 7.x. Jeśli Twoja witryna WordPress działa na PHP w wersji niższej niż 7, np. 5.6 lub nawet starszej, skontaktuj się z pomocą techniczną hostingu i poproś o aktualizację do najnowszej stabilnej wersji. Jeśli szukasz nowego hostingu, możesz poprosić ich o wsparcie, jeśli posiada PHP w wersji 7.x. Wszyscy powinni odpowiedzieć solidnym „tak”, ale jeśli nie mają możliwości korzystania z PHP 7.x, radzę trzymać się od nich z daleka. PHP 7 jest, w porównaniu do starszych wersji, ogromnym ulepszeniem, jeśli chodzi o szybkość i wydajność, a przełączenie się na niego jest bardzo łatwe, więc skorzystaj z niego.

Dobry wybór hostingu zaoszczędzi ci wiele bólu na drodze, a jeśli napotkasz problem, dobra obsługa klienta powinna być w stanie ci pomóc, więc pamiętam również, aby wybrać hosta, który oferuje dobre wsparcie . Jedna szybka sztuczka, którą możesz zastosować: zadaj im pytanie przed zakupem i monitoruj ich czas odpowiedzi, nastawienie i poziom profesjonalizmu.

Motyw WordPress

Kiedy wybieramy motyw WordPress dla naszej witryny, zawsze zaczynamy od projektu motywu i to jest OK. Powinniśmy najpierw wybrać kilka motywów, które nam się podobają, ponieważ chcemy, aby nasza strona była niesamowita, a świetny projekt jest pierwszą rzeczą, którą widzi odwiedzający. Druga sprawa to prawdopodobnie funkcjonalność motywu. Czy motyw lub zalecane wtyczki oferują żądaną funkcjonalność? Jeśli tak, to świetnie! Jesteśmy w biznesie! To, o czym prawie zawsze zapominamy, to sprawdzenie, jak szybko ładuje się motyw.

Możemy przetestować czas ładowania strony demonstracyjnej motywu i szybko zobaczymy, czy motyw jest zoptymalizowany pod kątem szybkości. Sprawdzimy, jakich narzędzi do szybkości strony użyć i jak z nich korzystać w sekcji poniżej, ale na razie chcę tylko poinformować o tym dodatkowym kroku weryfikacji motywu przed zakupem. Oczywiście czas ładowania strony demonstracyjnej prawdopodobnie może ulec poprawie, więc jeśli nie uzyskasz idealnego wyniku, nie martw się, żaden motyw WordPress nie uzyska idealnego wyniku 100%, z wyjątkiem sytuacji, gdy ma bardzo mało treści na swojej stronie demonstracyjnej. Zasadniczo powinieneś szukać motywów, których nie ma na czerwonych cyfrach (ocena 50 lub niższa w narzędziach szybkości strony).

Sprowadza się to do dobrej równowagi między projektem motywu i funkcjonalnością a szybkością motywu. Na przykład pusty motyw WordPress z odrobiną tekstu ładuje się bardzo szybko, ale rozdęty motyw z dużą ilością funkcji (z których większość może nie być potrzebna), z dużą ilością treści multimedialnych, ładuje się znacznie wolniej. Dotarcie do tego idealnego miejsca jest celem przy wyborze dobrego i wydajnego motywu WordPress.

Wtyczki WordPress

Często pojawia się pytanie: „Ile wtyczek to za dużo?”. Nie jest to problem z liczbą wtyczek WordPress, ale z jakością kodu i wpływem wtyczki na system. Możesz mieć ponad 50 aktywnych wtyczek, przy czym każda z wtyczek dba o małą konkretną funkcjonalność (z dobrym kodem), a strona będzie działać poprawnie. Z drugiej strony możesz mieć 5 aktywnych wtyczek, a jedna z nich może zatykać twój system, spowalniając twój WordPress.

Przejrzenie kodu każdej wtyczki to dobry pomysł, ale „nikt nie ma na to czasu” , a do tego potrzebna jest dobra wiedza programistyczna. Jeśli pójdziesz tą drogą, musisz uważać na wtyczki, które zakolejkują wiele zasobów zewnętrznych, wykonują wiele żądań HTTP, wykonują niepotrzebne (niezoptymalizowane) zapytania do bazy danych i tak dalej (w zasadzie wszystko, co spowolniłoby działanie witryny WordPress, bez uzasadnionego powodu).

Zalecam, aby nie instalować i nie aktywować każdej wtyczki, której potrzebujesz.

Najpierw zastanów się, czy Twoja witryna naprawdę potrzebuje tej dodatkowej funkcjonalności? Na przykład, jeśli potrzebujesz shortcode przycisku, sprawdź dokumentację motywu, może motyw ma dla niego krótki kod i nie musisz instalować i aktywować całej wtyczki pakietu shortcode tylko po to, aby użyć skrótu pojedynczego przycisku. To banalny przykład, ale chcę, żebyś pomyślał przed instalacją i aktywacją nowych wtyczek. Każda niezweryfikowana wtyczka może sprawić, że Twoja witryna będzie cięższa, a przez to wolniejsza, a ponadto może prowadzić do naruszenia bezpieczeństwa, jeśli wtyczka jest źle zakodowana lub nieutrzymywana.

Wreszcie, jedną wspaniałą rzeczą, z której możesz skorzystać, wybierając wtyczkę, jest duży globalny udział WordPressa, a co za tym idzie ogromna społeczność. Przy braku znajomości kodowania dobrą zasadą jest trzymanie się popularnych wtyczek z dużą ilością aktywnych instalacji, dobrymi średnimi ocenami i pozytywnymi recenzjami. Inni WordPresserzy znacznie ułatwią Ci wybór!

Kroki optymalizacji szybkości strony WordPress

Zanim zaczniemy optymalizację, chciałbym wspomnieć o kilku rzeczach.

Po pierwsze, powinieneś utworzyć kopię zapasową swojej witryny WordPress, oto przewodnik, jak to zrobić za pomocą wtyczki WordPress. Lepiej dmuchać na zimne!

Po drugie, ostrzegam, aby nie oczekiwać wyniku 100/100 w narzędziach szybkości strony, których użyjemy w naszym przewodniku. Dążenie do wyniku 100/100 nie jest dobrym pomysłem, a nawet nie jest możliwe w niektórych witrynach. Wszystko zależy od tego, jakie treści wyświetla Twoja witryna. Jeśli witryna zawiera tylko trochę tekstu i obraz, to z pewnością doskonały wynik jest całkowicie możliwy. Ale jeśli masz długą stronę, z dużą ilością treści multimedialnych i innymi integracjami z aplikacjami innych firm, takimi jak mapy google i tak dalej, to wynik 100 nie jest w twoim zasięgu i nie powinieneś go również ścigać.

Dlaczego nie jest dobrym pomysłem stawianie na 100/100? Jeśli postępujesz zgodnie z instrukcjami narzędzi szybkości strony i zoptymalizujesz wszystko tak, jak mówią, Twoja witryna może nie działać poprawnie. Jeśli przeniesiesz wszystkie blokujące pliki JS lub CSS do stopki, pojawi się flashowanie CSS (niestylowana treść pojawi się jako pierwsza, a po załadowaniu CSS witryna „flashuje” na miejsce), to samo stanie się z kodem JS , który zmodyfikuje dowolne elementy DOM po załadowaniu kodu JS.

Możesz zepsuć swoją witrynę, jeśli ślepo postępujesz zgodnie z instrukcjami i stale optymalizujesz witrynę WordPress, aby uzyskać lepszy czas ładowania, tylko po to, aby uzyskać idealny wynik. Idealny wynik szybkości strony to tylko liczba, która w rzeczywistości nie ma znaczenia, jeśli użytkownicy trafią na zepsutą witrynę. Musimy znaleźć równowagę między szybkością strony a doświadczeniem użytkownika.

Aby zademonstrować optymalizację szybkości strony WordPress, użyjemy mojego współdzielonego konta hostingowego i naszego medycznego motywu WordPress (z zalecanymi wtyczkami motywu). Tak, tak, wiem, że zasadniczo powiedziałem, aby nie korzystać z hostingu współdzielonego, ale zobaczymy, do czego jest zdolny i jakie są ograniczenia, a ponadto jest to tylko test optymalizacji szybkości strony, a nie rzeczywista biznesowa witryna WordPress

Zainstalowałem najnowszą wersję WordPressa, motyw MedicPress, wszystkie zalecane wtyczki i zaimportowałem zawartość demo. To jest nasz punkt wyjścia dla strony testowej.

Narzędzia szybkości strony

Optymalizacja szybkości strony może być trudna, ale na szczęście istnieją narzędzia online, które ułatwiają nam życie i doradzają nam, co zrobić, aby poprawić szybkość naszej witryny.

Pierwsza zasada optymalizacji WordPressa pod kątem szybkości brzmi: zawsze mierz!

Uruchom narzędzia (lub przynajmniej jedno z nich), którym przyjrzymy się w poniższej sekcji, po każdym kroku optymalizacji i śledź ulepszenia. Dzięki temu będziesz wiedział, które zadania przynoszą największe usprawnienia. Powinieneś także wielokrotnie uruchamiać testy, aby zobaczyć rzeczywisty średni czas ładowania.

Strony ładują się inaczej, w zależności od lokalizacji serwera hostingowego. Na przykład, jeśli twój serwer znajduje się w Ameryce Północnej, a odwiedzający pochodzi z Europy, strona będzie się dla niego ładować wolniej niż dla gościa z Kanady. Ten problem można rozwiązać za pomocą CDN (Sieć dostarczania treści), ale przyjrzymy się temu nieco później w artykule. Na razie chciałem tylko zaznaczyć, że ten problem dotyczy odwiedzających na całym świecie, a także narzędzi do optymalizacji szybkości strony. Niektóre narzędzia umożliwiają również wykonanie testu z różnych lokalizacji, dzięki czemu możesz zobaczyć, jak wpływa to na czas ładowania.

Narzędzia szybkości strony, którym się przyjrzymy, to:

• Statystyki Google PageSpeed
• GTmetrix
• Test szybkości witryny Pingdom
• Test strony internetowej

Istnieją inne narzędzia, ale te są najbardziej popularne i będziemy się ich trzymać.

Statystyki Google PageSpeed

Jak widać z tytułu tego narzędzia, jest to produkt firmy Google. Oprócz wyniku (podzielonego na komputery i urządzenia mobilne) oraz przydatnych instrukcji dotyczących tego, co zrobić, aby skrócić czas ładowania strony, możemy również wyciągnąć wnioski na temat tego, co Google lubi oglądać w witrynie. Jakie rzeczy chce zoptymalizować na stronie internetowej, aby uzyskać dobrą pozycję w wynikach wyszukiwania.

Jeśli masz niezoptymalizowane obrazy lub pliki zasobów (JS lub CSS), wygeneruje plik zip z ich zoptymalizowanymi odpowiednikami, który możesz zastąpić na swoim serwerze. Całkiem schludny, prawda? Optymalizacji obrazu i kodu zajmiemy się później, wiedz tylko, że Google PageSpeed ​​może Ci w tym pomóc.

Google PageSpeed ​​Insights nie zawiera wielu szczegółowych informacji, jak inne narzędzia, ale jest dobrym punktem wyjścia, który obejmuje wszystkie ważne aspekty optymalizacji szybkości strony. Zawiera listę kroków, które najbardziej poprawią Twoją witrynę.

Uruchomiłem to narzędzie z adresem URL naszej strony testowej i uzyskałem wynik 71 dla komputerów i 67 dla urządzeń mobilnych, więc jest miejsce na ulepszenia. Lista możliwych propozycji optymalizacji obejmuje:

• Włącz kompresję (kompresja zasobów za pomocą gzip lub deflate),
• optymalizować obrazy,
• skrócić czas odpowiedzi serwera,
• wyeliminować blokujące renderowanie JavaScript i CSS w treści strony widocznej na ekranie,
• zminimalizować JavaScript.

GTmetrix

To narzędzie daje bardziej szczegółowe informacje o tym, które elementy są zoptymalizowane, a które nie. Każdy szczegół optymalizacji jest wyszczególniony i oceniony w skali od 0-100. Lista jest uporządkowana według ważności, więc jeśli będziesz śledzić zadania od góry do dołu i zoptymalizować te, które nie mają 100% wyniku, będziesz na dobrej drodze do jak najszybszego przyspieszenia witryny WordPress.

Korzystając z narzędzi testowych PageSpeed ​​i YSlow, GTmetrix generuje wyniki dla Twojej strony i wyświetla zadania, które należy poprawić. Przyjemną cechą tego narzędzia jest również raport Wodospad, który graficznie przedstawia sposób ładowania witryny i umożliwia szybsze wykrywanie wąskich gardeł. Na poniższym obrazku widać, że mój powolny hosting współdzielony zajął 1,13 s, aby odpowiedzieć na pierwsze informacje. To o wiele za długo, ale będziemy w stanie to poprawić.

Możesz również przetestować swoją stronę z 7 różnych lokalizacji na całym świecie, co jest miłe, a także ważne do przetestowania, co zobaczymy w dalszej części artykułu.

Uruchomiłem narzędzie GTmetrix (lokalizacja: Vancouver, Kanada) na naszej stronie testowej i uzyskałem wynik PageSpeed ​​równy 77 i wynik YSlow równy 71. Dzięki temu narzędziu otrzymujemy również te przydatne informacje:

• Czas pełnego obciążenia: 3,1 s,
• Całkowity rozmiar strony: 803 KB
• Żądania: 54

Najbardziej podoba mi się narzędzie GTmetrix, ponieważ w jednym miejscu otrzymujesz wiele istotnych informacji. W tym przewodniku będziemy używać głównie narzędzia GTmetrix do mierzenia naszych postępów w optymalizacji.

Test szybkości witryny Pingdom

Pingdom to kolejne narzędzie, które nieco inaczej wyświetla informacje dotyczące optymalizacji. Otrzymujesz te same podstawowe dane podsumowujące, co w narzędziu GTmetrix (bez wyniku YSlow). Dzięki Pingdom masz możliwość przetestowania szybkości strony w 4 różnych lokalizacjach. Wyniki są różne dla każdej lokalizacji, co pokazuje, że lokalizacja serwera jest ważna, ale będziemy w stanie to również poprawić (z CDN w dalszej części artykułu). Będziemy używać narzędzia Pingdom do testowania czasu ładowania strony w 4 dostępnych lokalizacjach, ponieważ testy Pingdom kończą się szybciej.

Pingdom wyświetla również kilka interesujących tabel, takich jak rozmiar treści lub liczba żądań, filtrowane według typu treści lub domeny, a także ma raport kaskadowy.

Test strony internetowej

Narzędzie WebPageTest ma jeszcze więcej opcji konfiguracyjnych niż poprzednie narzędzia. Ma więcej lokalizacji do wyboru, można wybrać prędkość Internetu, można włączyć/wyłączyć kilka opcji przeglądarki i przetestować określone urządzenia.

To dobre narzędzie, które wyświetla szczegółowy raport kaskadowy dla każdego biegu (domyślnie daje 3 biegi, ale możesz to zmienić w ustawieniach) i wyświetla oceny od A do F dla każdego z tych czynników optymalizacji prędkości:

• Czas pierwszego bajtu (czas odpowiedzi),
• włączone utrzymywanie aktywności,
• skompresuj transfer (gzip),
• kompresować obrazy,
• zawartość statyczna pamięci podręcznej,
• efektywne wykorzystanie CDN.

Możesz wejść w szczegóły, sprawdzając wszystkie zakładki wyników, w których znajdziesz wiele przydatnych informacji. Skorzystałbym z tego narzędzia, gdybym potrzebował szczegółowego raportu lub gdybym musiał przetestować lokalizację dostępną na ich stronie, w przeciwnym razie myślę, że GTmetrix ma bardziej zwięzłe informacje.

Uruchomiłem to narzędzie dla naszej strony testowej. Wyniki możesz zobaczyć na poniższym zrzucie ekranu:

Przyjrzeliśmy się bardziej popularnym narzędziom szybkości strony i wykonaliśmy wstępne testy szybkości strony, więc teraz jesteśmy w końcu gotowi do optymalizacji naszej witryny WordPress. Dla porównania, to są wyjściowe wyniki z narzędzi szybkości strony, których będziemy używać do mierzenia naszych postępów w optymalizacji szybkości:

• Statystyki Google PageSpeed
  • Telefon komórkowy: 67
  • Pulpit: 71
• GTmetrix
  • Prędkość strony: 77
  • YSlow: 71

Optymalizacja obrazu

Jest to prawdopodobnie najbardziej ignorowany aspekt wydajności witryny, a jednocześnie może przynieść największą poprawę szybkości witryny. Jeśli nigdy nie myślisz o optymalizacji obrazu przed przesłaniem go do witryny WordPress, jest to świetny pierwszy krok do optymalizacji czasu ładowania WordPressa.

Przesyłanie dużych, niezoptymalizowanych obrazów, używanych w małym miejscu w Twojej witrynie, to wielkie „nie, nie”. Przykład: masz boks na obrazy, który nie będzie większy niż 600 x 400 pikseli w Twojej witrynie i przesyłasz obraz o wymiarach 1920 x 1080 pikseli (lub nawet większy!). Teraz powtórzysz ten błąd kilka razy, a Twoja witryna będzie działać bardzo wolno.

Pierwszą rzeczą do zrobienia jest zmiana rozmiaru obrazu do odpowiedniego rozmiaru. W naszym przykładzie boks obrazu nigdy nie będzie większy niż 600 x 400 px, więc powinniśmy zmienić rozmiar obrazu do tego rozmiaru.

„To wszystko, robota wykonana, prawda?” Nie. Możemy jeszcze bardziej poprawić wizerunek. Istnieje wiele narzędzi, które optymalizują (kompresują) obraz bez utraty jego jakości (nasze oczy nie są w stanie wykryć utraty jakości za pomocą tych narzędzi). Spowoduje to również drastyczne zmniejszenie rozmiaru pliku obrazu, przyspieszając jego ładowanie.

Kompresji obrazu można dokonać ręcznie lub za pomocą wtyczek WordPress. Mój współpracownik Marko napisał fenomenalny przewodnik po optymalizacji obrazu, więc wykorzystamy wiedzę zdobytą w jego artykule i szybko omówimy techniki, których możesz użyć do optymalizacji swoich obrazów.

Mini przewodnik po optymalizacji obrazu

Wybierz odpowiedni format obrazu – najpopularniejsze formaty obrazu do użytku online to JPEG i PNG. Możesz dużo zaoszczędzić na rozmiarze pliku obrazu, wybierając odpowiedni format obrazu (Marko zaoszczędził 45% w swoim artykule). Powinieneś użyć:

• Format .jpg dla zdjęć, obrazów z gradientami i obrazów z milionami kolorów.
• Format .png dla obrazów z ograniczonymi kolorami (logo) i obrazów z przezroczystością.

Zmień rozmiar obrazów — jak wspomniałem powyżej, zawsze powinieneś zmienić rozmiar obrazów przed przesłaniem ich do witryny WordPress. Najpierw sprawdź, jak duża jest przestrzeń, w której będziesz używać obrazu, i odpowiednio zmień jej rozmiar. Możesz zmienić rozmiar obrazów za pomocą programu do obróbki obrazów, takiego jak GIMP lub Photoshop.

Kompresuj swoje obrazy — można to zrobić za pomocą narzędzia do kompresji obrazów online lub wtyczki WordPress:

Narzędzie do kompresji online : Marko poleca narzędzie online Optimizilla. Po prostu prześlij swoje obrazy do aplikacji Optimizilla, a po zakończeniu procesu pobierz zoptymalizowane obrazy, które następnie prześlij na swoją witrynę WordPress. Brzmi to trochę żmudnie, więc oczywiście istnieje wtyczka WordPress, która może uprościć ten proces.

Wtyczka do kompresji obrazu WP : Ponownie Marko przetestował najpopularniejsze wtyczki do kompresji obrazu i ogłosił zwycięzcę: ShortPixel Image Optimizer. Po zainstalowaniu wtyczki będziesz musiał poprosić o klucz API, aby móc korzystać z wtyczki (bardzo prosty proces). Domyślne ustawienia wtyczki są świetne, więc nie musisz niczego konfigurować, po prostu przejdź do Media -> Bulk ShortPixel i kliknij przycisk „Rozpocznij optymalizację”. Każdy nowo przesłany obraz zostanie również zoptymalizowany. Uwaga: darmowa wersja tej wtyczki umożliwia tylko 100 optymalizacji obrazu miesięcznie, jeśli potrzebujesz więcej, musisz przejść na płatny plan. Chcemy, aby nasi klienci mieli dostęp do najlepszych dostępnych narzędzi, dlatego nawiązaliśmy współpracę z ShortPixel, a teraz nasi członkowie ProteusClub otrzymują również 1000 kredytów za darmo do wykorzystania z wtyczką ShortPixel WordPress.

Na koniec nie mogę wystarczająco polecić przeczytania całego artykułu na temat optymalizacji obrazu w WordPressie.

Zoptymalizowane obrazy Google PageSpeed

Jest to alternatywny sposób optymalizacji istniejących obrazów w witrynie WordPress. Jeśli wykonałeś powyższe kroki w sekcji Mini przewodnik po optymalizacji obrazu, prawdopodobnie masz już zoptymalizowane obrazy i dlatego Google PageSpeed ​​nie będzie miał dla Ciebie żadnych obrazów. Dobra robota! Nadal możesz przeczytać tę sekcję w celach informacyjnych

Wspomniałem we wstępie do narzędzia Google PageSpeed, że Google generuje plik zip ze zoptymalizowanymi plikami, których możesz użyć w swojej witrynie. Możesz pobrać plik zip, klikając ten link:

W tym pliku zip masz folder o nazwie image , który zawiera zoptymalizowane obrazy. Możesz przesłać je za pośrednictwem FTP lub programu do przesyłania plików hostingowych. Zastąp/nadpisz obrazy w poprawnych folderach przesyłania (…/wp-content/uploads/…). Następnie powinieneś również wygenerować mniejsze wersje (miniaturki) tych obrazów w swojej witrynie WordPress. Możesz to zrobić za pomocą wtyczki Regenerate Thumbnails.

Inne ulepszenia obrazu

W tej sekcji przyjrzymy się kilku dalszym ulepszeniom dotyczącym obrazów, które możemy wykorzystać, aby uzyskać dodatkową wydajność.

Leniwe ładowanie obrazów

Lazy Loading to technika ładowania obrazów, w której obrazy są ładowane asynchronicznie. Obrazy, które nie znajdują się nad krawędzią strony, nie są ładowane podczas ładowania strony (są ładowane po lub tylko wtedy, gdy są potrzebne). Oznacza to, że obrazy, które można zobaczyć u góry strony, są ładowane, podczas gdy inne obrazy (niewidoczne) są ładowane po załadowaniu strony lub podczas przewijania strony w dół (na żądanie). Jeśli masz długą stronę z wieloma obrazami, dzięki tej technice możesz zaoszczędzić dużo czasu wczytywania strony początkowej.

Lazy loading można zaimplementować za pomocą niestandardowego kodu lub wtyczki WP. Będziemy później używać wtyczki buforowania WP Rocket, która ma również funkcję leniwego ładowania.

Hotlink do obrazu

Co to jest hotlink? Wyświetla obraz znajdujący się na innym serwerze. Na przykład, jeśli masz bardzo popularny post i w tym poście masz ładny obraz. Odwiedzający (złodziej) może skopiować adres URL źródła obrazu i użyć go we własnej witrynie. Oznacza to, że obraz zostanie zażądany i przesłany z Twojego serwera. Pomnóż złodzieja przez 100 i masz tysiące zewnętrznych żądań, na które twój serwer musi odpowiedzieć, co może spowolnić twój serwer.

Nie jest to bezpośrednia optymalizacja szybkości strony, ale raczej optymalizacja serwera. Możesz rozwiązać problem hotlinkingu za pomocą kodu w pliku .htaccess. Możesz pójść o krok dalej (być trochę zły) i zastąpić skradziony obraz innym, może nie tak ładnym obrazkiem :). Można to również zrobić w pliku .htaccess. Otwórz plik .htaccess na swoim serwerze i dodaj do niego ten kod. Zastąp adres twoja-website.com swoją domeną, a google.com dowolną inną domeną, której chcesz zezwolić na dostęp do swoich obrazów i zastąp http://replacing-stolen-image-url-goes-here.jpg z adresem URL obrazu, który chcesz wyświetlić w przypadku skradzionych obrazów.

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ http://replacing-stolen-image-url-goes-here.jpg [NC,R,L]

Jeśli nie chcesz zastępować skradzionego obrazu własnym obrazem, użyj tego kodu. Spowoduje to wyłączenie obrazu na ich stronie internetowej:

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]

Ulepszenia studium przypadku

Przyjrzyjmy się postępowi, jaki poczyniliśmy do tej pory w naszej witrynie testowej, po zoptymalizowaniu obrazów. Jak wiecie, zaimportowałem dane demonstracyjne dla naszego motywu medycznego, którego używamy jako naszej strony testowej. Te obrazy demonstracyjne używały poprawnych formatów plików i miały już prawidłowy rozmiar, więc mogłem pominąć te dwa kroki. Gdybym miał wgrać nowy obraz, nie pominąłbym go!

Zainstalowałem więc wtyczkę ShortPixel i uruchomiłem optymalizator zbiorczy. Wtyczka odnotowała średnią optymalizację obrazu na poziomie 38%. To wspaniale!

Uruchomiłem narzędzie PageSpeed ​​Insights i Google zwróciło uwagę, że niektóre obrazy można jeszcze bardziej skompresować, więc zastosowałem się do własnej rady, wykorzystałem obrazy, które przygotował dla mnie Google i przesłałem je na mój serwer przez FTP.

Po posortowaniu obrazów wyniki narzędzi szybkości strony były następujące:

• Statystyki Google PageSpeed
  • Telefon komórkowy: 72
  • Pulpit: 77
• GTmetrix
  • Prędkość strony: 81
  • YSlow: 71

Nie jest to duża poprawa, ponieważ obrazy użyte w danych demonstracyjnych zostały już dość zoptymalizowane, ale mimo to jesteśmy o krok bliżej naszego celu. Jeśli masz niezoptymalizowane obrazy w swojej witrynie, ten krok optymalizacji obrazu przyniesie Ci ogromny wzrost wyników i skróci czas ładowania strony.

Buforowanie przeglądarki

Kiedy użytkownik odwiedza Twoją witrynę za pośrednictwem przeglądarki, musi pobrać wszystkie zasoby (HTML, obrazy, JS, CSS, … ) z Twojego serwera, aby wyświetlić witrynę odwiedzającemu. Gdy ten sam użytkownik odwiedza inną stronę w Twojej witrynie, pliki CSS i JS zwykle pozostają takie same, ale przeglądarka może nadal pobierać je ponownie z Twojego serwera, jeśli nie masz odpowiedniej konfiguracji serwera.

Proper caching headers and expiration dates should be set on your server, to allow static resources (JS, CSS and other files) to be stored in the browser's cache. This greatly improves the performance for returning visitors or for visitors who look at more than one page on your site.

Usually, the hosting servers have that already configured. If the page speed optimization tools report that you are missing the “Leverage browser caching” optimization or something like that, then it's best to contact your hosting company and let them know that you want to set-up browser caching for your site. They will be able to sort that out for you or at least point you to the right direction on how to do that yourself.

If you want to do things yourself, then you have to know that these browser caching settings vary, depending on the server type your hosting company is using. A good starting point for Apache servers is the .htaccess file of the HTML5 Boilerplate project (check out the “Expires headers” section). An nginx configuration is available as well.

My shared hosting account has browser caching already configured, so there is nothing for us to do on our test site.

Resource Compression (Gzip or Deflate)

Files sent from your server (HTML, JS, CSS, …) to your visitors can be compressed, so that they can be transferred faster, which improves your page speed. This can be done by enabling Gzip or Deflate compression on your server.

You can contact your hosting support and ask them, if they can enable resource compression for your site or you can configure it yourself, but be sure you know which server type your hosting is using. We can again look at the HTML5 Boilerplate project for some tips, they have default server configs for each of the major server types. For example, my hosting is using Apache server, so I found this compression config. I've copied the content of this config, I've located the .htaccess file for my WordPress site via the FTP (it's in the root of your WP installation) and I copied it at the end of the file.

I've re-run the page speed tools, after I've enabled the resource compression for my WordPress site and here are the results:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 96
  • YSlow: 82

As you can see, we've improved our scores by a fair amount and all we did, was enable the resource compression, which did not take a lot of time. By compressing resources, we change the total page size from 803KB to 476KB, which is awesome! We made another step towards an optimized site, so let's continue.

Remove unneeded JS or CSS files

If you are using plugins, which include JS or CSS files on all your pages and you actually are not using the plugin features on those pages, then it's best to remove them. This can be done with custom code in your child theme, but I would recommend that you use a plugin for that. It's much easier!

The plugin that will help us do that is WP Asset CleanUp. After you install and activate this plugin, go and edit your home page. Home pages are usually the “heavier” pages, so we will look at it for our example, but you can do that for other pages as well.

Under the page content editor, you will see a section called WP Asset CleanUp . This section will list all CSS and JS files that are included on your front page. Now, your job is to find out, which of these files are not needed on your WordPress front page.

For example, in our test site, we are using the Contact Form 7 plugin, but we are only using the contact form on our “Contact Us” page, so we can safely remove (unload) its CSS and JS files from our home page. I can do the same with WooCommerce assets, since we are not using them on our home page as well. You should look at each asset in the list and check, if you can unload it. Watch out for the files with the red exclamation icon, you should probably never unload these, since they are core WordPress files and they are needed for the site to work properly. This is how my home page Assets CleanUp settings looks like:

I was able to safely remove 11 assets, which will save 11 resource requests when a page loads and that will improve the page speed.

Re-run of page speed test tools showed, that Google PageSpeed Insights score did not change (because it also did not list this as a recommended optimization), but the GTmetrix score did improve:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 97
  • YSlow: 86

Our site also loads faster, it now needs 2.7 seconds to load the whole site (in the beginning it took 3.1 seconds). We are improving the WordPress site speed slowly but surely. Bear in mind, I'm using one of our WordPress themes for the test, which are built from the ground up to be performing out of the box. If you're using some other WordPress theme, where the author didn't put any efforts to optimize it for speed, your improved loading speed results will most probably be much greater at this point.

With removing unneeded JS and CSS files from our home page, we improved our scores, load time, number of request and the total page size as well. Dobra robota!

Render-blocking JavaScript and CSS in above-the-fold content

One of the optimizations that Google PageSpeed Insights suggests is also: “Eliminate render-blocking JavaScript and CSS in above-the-fold content”. This is a tricky one. Remember when I said, that it's not good to chase a perfect score in the page speed tools? This is one of the reasons for that.

If we look at our example, the Google tool suggests that the Page Builder front-flex.css should be deferred or loaded asynchronously. We are using the Page Builder by SiteOrigin plugin for building content in our pages. So, if this file is responsible for making our layout of the page look good, then I might not respect Google suggestion and simply ignore it.

“But why would you disrespect Google? How dare you!” Well, this is only a tool and it gives you suggestions on what to do, but it does not know, if implementing some of these changes will break your site or ruin good user experience (UX) for your visitors. For example, if the tools had suggested that we load the style.css file with all the theme styles asynchronously, then it would have created the FOUC: Flash of unstyled content:

This is a bad UX, so I would ignore the suggestion from the tool and keep a good UX instead of improving our score. After all, Google is also using other factors it can gather from your website to rank it in the search results and user experience is one of them. When optimizing the website for speed, don't follow the recommendations blindly and forget about all the other aspects and goals your WordPress website has.

If the files that the tool suggests to be loaded asynchronously are valid candidates and they don't break anything, then of course we can implement that change. The best way is to just try to asynchronously load each suggested file and see, if the page still loads ok. Don't forget to reload the page without browser cache, so that a fresh copy of the page loads. You can do that by hard refreshing your site.

We will look at how to load files asynchronously in the WP Rocket plugin section below. There are other standalone plugins that offer this functionality, but since the WP Rocket has it build in, we don't need to pollute our WP installation with more plugins.

Server Side Caching

We've already talked about browser cache, but now we also have to take care of the server side cache. To understand server side caching we have to know the basics of how WordPress works, so let's look at that first.

When a visitor opens a WordPress page, the following things happen (basic explanation):

1. Server receives a page request.
2. WordPress PHP code begins to execute.
3. WordPress access the database to get the information it needs to build the requested page.
4. WordPress produces the HTML.
5. Server responds with the HTML for the browser to display it to the visitor.

These 5 steps have to be repeated for each page view, for each visitor. That's a lot of repetitive work for content that stays the same for each visitor (if your site is displaying mostly static content, which majority of websites is).

Server side caching eliminates pretty much all the server's hard work. It removes the need for repeating steps 2,3 and 4. So, when we enable server side caching, the process of a page request looks like this:

1. Server receives a page request.
2. Server retrieves the page HTML from the cache (if a cached version is available).
3. Server responds with the HTML for the browser to display it to the visitor.

As you can see, the hard work of running the WordPress code and accessing the database is bypassed, which means that the page loading time should be much faster.

If we look at the Google PageSpeed Insights tool suggestions, we will spot the “Reduce server response time” task. The tool says that our server responded in 0.98 seconds, which is not good. The slow shared hosting I'm using is definitely to blame for some chunk of that 1 second response time, but we'll be able to shorten it with server side caching.

Each page cache is usually saved with an expiration time of 24 hours, but that setting can be changed. This means that instead of thousands of page requests running the whole WordPress HTML building process, it will only be run once a day, to generate that cached page and the server will serve that cached page to other visitors. So, not only the page will be quicker, but the server will also have to do less work.

If you are updating a page in WordPress and an old cached version of the page is still available on your server, then you would have to clear that cache manually (usually with the click of a button) or some tools would do that for you automatically.

Some hosting companies already have a server side caching in place for their users, but this feature is usually available for managed WordPress hosting packages. So, before you follow instructions below, on how to setup server side caching, you should make sure that your server is not doing that for you already.

We will look at how to setup the WP Rocket plugin to enable server side caching and other features that it has (like lazy loading images, loading assets asynchronously, minification of JS and CSS files and much more). WP Rocket is a premium (paid) plugin, but I believe it's worth the investment. If you don't agree with me, that's fine WP Super Cache is a good free alternative, but it does not have the same extra features as WP Rocket and it's a little bit more cumbersome to setup.

WP Rocket (server side caching plugin)

As soon as we install and activate the WP Rocket plugin it will have some basic features enabled out of the box:

• Caching of all the pages for quick viewing.
• Decrease bandwidth usage with our GZIP compression.
• Management of the headers (expires, etags…).

The WP Rocket plugin default settings are a good starting point.

I've run the page speed tools a couple of times, so that they picked up the cached version of the site and these are the new results:

• Google page speed insights
  • Mobile: 91
  • Desktop: 97
• GTmetrix
  • PageSpeed: 97
  • YSlow: 87

The Google PageSpeed Insights tool no longer displays the “Reduce server response time” optimization suggestion, because we reduced it from 1 second to 121ms, that's a 88% improvement in server response time, just by activating the WP Rocket plugin! With this improvement, our fully loaded time is now 1.9 seconds, but we are not stopping here

Przyjrzyjmy się ustawieniom, które ma do zaoferowania wtyczka WP Rocket. WP Rocket ma ładne menu skrótów na górnym pasku menu administratora WP. Stamtąd możesz uzyskać dostęp do strony ustawień, wyczyścić pamięć podręczną i uzyskać dostęp do innych przydatnych informacji dotyczących tej wtyczki.

Zanim przejdziemy dalej i wypróbujemy różne ustawienia WP Rocket, chciałbym wspomnieć, że po każdej wprowadzonej zmianie należy zweryfikować swoją witrynę w zakładce przeglądarki incognito/prywatnej . Jeśli jesteś zalogowany w swojej witrynie WordPress, nie zobaczysz buforowanej wersji witryny. W zakładce przeglądarki incognito nie będziesz zalogowany i otrzymasz buforowaną wersję strony, dzięki czemu możesz sprawdzić, czy działa poprawnie.

Wiedz również, że włączenie każdego ustawienia WP Rocket może mieć różne wyniki, a nawet negatywny wpływ na szybkość WordPressa, w zależności od używanego motywu lub wtyczek, więc samo włączenie wszystkich ustawień WP Rocket nie jest dobrym rozwiązaniem. Powinieneś wypróbować każde ustawienie i zmierzyć je za pomocą narzędzi szybkości strony, aby zobaczyć różnicę. Jak zobaczysz, niektóre techniki nie poprawią szybkości naszej strony, dlatego nie będziemy ich używać.

Wyczyść pamięć podręczną

Buforowanie po stronie serwera zacznie działać, gdy tylko aktywujesz wtyczkę WP Rocket, więc spójrzmy, jak możemy ją wyczyścić. Możesz ręcznie wyczyścić pamięć podręczną, klikając pozycję menu „Wyczyść pamięć podręczną” w menu skrótów WP Rocket. Wtyczka zajmie się również automatycznym czyszczeniem pamięci podręcznej, gdy zaktualizujesz ustawienia dostosowywania, zmienisz/zaktualizujesz widżety, kategorie, … i częściowo wyczyści pamięć podręczną podczas aktualizacji strony. Aby uzyskać więcej informacji o tym, kiedy nastąpi automatyczne czyszczenie pamięci podręcznej, zapoznaj się z tym pytaniem WP Rocket.

Pamięć podręczna ma żywotność, którą można ustawić w zakładce „Podstawowe” ustawień WP Rocket. Proponuję ustawić to na 1 dzień.

Wstępne ładowanie pamięci podręcznej

Fajną funkcją WP Rocket jest „Wstępne ładowanie pamięci podręcznej”, która wstępnie załaduje pamięć podręczną Twojej strony głównej i stron, do których prowadzi, dzięki czemu Twoi użytkownicy zawsze otrzymają buforowaną wersję strony. Mógłbym użyć tej funkcji, zanim uruchomię narzędzia szybkości strony i nie musiałbym wielokrotnie uruchamiać tych narzędzi, aby uzyskać wyniki wersji z pamięci podręcznej.

Dostęp do ustawień wstępnego ładowania pamięci podręcznej można uzyskać na stronie ustawień w zakładce „Wstępne ładowanie”. Poszukaj opcji „Preload bot”, tam znajdziesz opcję ręczną i automatyczną. Jeśli włączysz opcję automatycznego bota, pamięć podręczna ładowania wstępnego będzie uruchamiana za każdym razem, gdy aktualizujesz lub tworzysz stronę lub gdy pamięć podręczna wygaśnie. Ta opcja może mieć wpływ na wydajność serwera, więc miej oko na dzienniki wydajności, jeśli ją włączysz. Jeśli aktualizujesz i tworzysz wiele postów/stron i masz hosting współdzielony, radzę nie włączać tej opcji. Zamiast tego powinieneś włączyć tylko opcję ręcznego bota, która utworzy kolejny element menu skrótów WP Rocket, zatytułowany „Wstępnie ładowana pamięć podręczna” i wstępnie załaduje pamięć podręczną dopiero po jej kliknięciu (po zakończeniu edycji postów i stron).

Na karcie ustawień „Wstępne ładowanie” znajdziesz również ustawienia wstępnego ładowania pamięci podręcznej z mapy witryny, dzięki czemu możesz zdefiniować mapę witryny i użyje ona adresów URL w mapie witryny do wstępnego załadowania pamięci podręcznej dla tych stron.

LazyLoad

Wyjaśniłem już leniwe ładowanie obrazów w sekcji optymalizacji obrazu tego artykułu, ale teraz, gdy mamy zainstalowany WP Rocket, możemy włączyć tę funkcję. Przejdź do zakładki „Podstawowe” w ustawieniach WP Rocket i włącz LazyLoad dla obrazów, a jeśli używasz dowolnych filmów lub ramek iframe, możesz to również włączyć.

Po włączeniu tej funkcji należy zawsze sprawdzić swoją witrynę i zobaczyć, jak ładują się obrazy. LazyLoad może zepsuć układ witryny lub może nie podobać Ci się sposób ładowania obrazów (przeskakiwanie treści), więc zawsze sprawdzaj swoje strony. Ta funkcja jest naprawdę przydatna, gdy masz dużo obrazów w części strony widocznej po przewinięciu i pomoże Ci zmniejszyć liczbę żądań obrazów podczas oryginalnego ładowania strony. Na naszej stronie testowej mamy tylko 5 obrazów w części strony widocznej po przewinięciu, więc zapisaliśmy 5 żądań obrazów, a nasz czas ładowania strony skrócił się teraz do 1,7 sekundy, podczas gdy wyniki narzędzi szybkości strony pozostały takie same. To dobry wskaźnik, że możesz poprawić szybkość swojej strony, wykonując pewne zadania, których narzędzia nie sugerują.

Zminimalizuj pliki

Niektóre z sugestii GTMetrix, które możemy jeszcze poprawić, to minimalizacja plików HTML, CSS i JS. Ponieważ nasz motyw WordPress i większość zalecanych wtyczek używa już zminifikowanych wersji plików JS/CSS, a na naszym serwerze mamy włączony Gzip, ta optymalizacja WP Rocket nie przyniesie żadnych znaczących ulepszeń dla naszej strony testowej, ale może to być inny; różny. Przejdź do zakładki „Pliki statyczne” w ustawieniach WP Rocket i zaznacz wszystkie 3 opcje w opcji Zminifikuj pliki . Zapisz ustawienia i sprawdź swoją witrynę w zakładce incognito/prywatnej, aby poszukać wszelkich problemów, które te opcje mogą spowodować w Twojej witrynie. W mojej testowej witrynie WordPress minifikacja CSS zepsuła kolejkę pliku css kreatora stron, więc musiałem wyłączyć opcję pliku minifikacji CSS. Opcje HTML i JS działały OK.

Poprosiłem WP Rocket o wsparcie, jaki może być problem i byli na tyle mili, aby debugować ten problem na mojej stronie. Problem był spowodowany przez pamięć podręczną Varnish używaną na moim współdzielonym hostingu. Zasugerowali zmianę konfiguracji lakieru na moim serwerze hostingowym. Skontaktowałem się z moim wsparciem hostingowym i tak jak podejrzewałem, nie mogę zmienić konfiguracji Varnish na moim współdzielonym hostingu, ale byłbym w stanie, gdybym uaktualnił do pakietu hostingowego VPS. Jak widać, korzystanie z hostingu współdzielonego nie jest dobrym pomysłem

Jeśli masz problemy z minifikacją CSS lub JS, możesz dodać adres URL pliku, który spowodował problemy, do pola wykluczonych plików JS lub CSS. Znalezienie pliku odpowiedzialnego za problemy może być trudne, ale zwykle wiesz, która funkcja jest zepsuta i która wtyczka jest za nią odpowiedzialna, więc sprawdzasz kod źródłowy swojej strony i sprawdzasz dołączone pliki przez tę wtyczkę. Jeśli wtyczka zawiera wiele plików JS lub CSS, możesz po prostu spróbować dodać je do listy wykluczeń i zobaczyć, czy problem zniknie.

Połącz pliki JS i CSS

Karta YSlow w narzędziu GTmetrix mówi nam, abyśmy „Tworzyli mniej żądań HTTP”. Mówi, że nasz WordPress używa 9 zewnętrznych skryptów JS i że powinniśmy spróbować połączyć je w 1, a strona używa 4 zewnętrznych plików CSS i powinniśmy spróbować połączyć je również w 1 plik. Jeśli pamiętasz, usunęliśmy już niepotrzebne pliki JS i CSS w sekcji Usuwanie niepotrzebnych plików JS lub CSS tego artykułu.

Łączenie wszystkich plików JS i CSS w jeden plik nie jest dobrym pomysłem, ponieważ przeglądarki mogą pobierać równolegle 6 mniejszych plików, szybciej niż 1-2 duże pliki. Innym powodem jest to, że niektóre pliki znajdują się w nagłówku dokumentów HTML, a inne na końcu dokumentu, więc musisz je podzielić na co najmniej 2 pliki.

Aby połączyć pliki z WP Rocket, przejdź do zakładki „Pliki statyczne” w ustawieniach wtyczki i włącz opcje w obszarze Połącz pliki . Jak zawsze, zweryfikuj swoją witrynę na karcie przeglądarki w trybie incognito/prywatnej, aby sprawdzić, czy nie występują problemy.

W naszym przykładzie WP Rocket ponownie miał problemy z powodu wspomnianego powyżej problemu z konfiguracją Varnish hostingu współdzielonego, więc musiałem wyłączyć opcję łączenia plików JS.

Ponownie, jeśli masz problemy z konkatenacją CSS lub JS, możesz dodać adres URL pliku, który powodował problemy, do pola wykluczonych plików JS lub CSS, tak jak w powyższym kroku minifikacji.

Usuń ciągi zapytań z zasobów statycznych

GTMetrix zaleca nam usunięcie ciągów zapytań z zasobów statycznych, ponieważ niektóre serwery proxy nie buforują zasobów z ciągami zapytań.

Ciągi zapytań w zasobie statycznym (zwykle w pliku JS lub CSS) to atrybut URL, który oznacza wersję wspomnianego pliku. Wygląda to tak: ?ver=2.5.8 i jest dodawane na końcu adresu URL: http://domain.com/css/front-flex.css?ver=2.5.8

Możemy łatwo usunąć te ciągi zapytań za pomocą WP Rocket. Przejdź do zakładki „Pliki statyczne” w ustawieniach wtyczki i włącz opcję Usuń ciągi zapytania .

Po włączeniu tej opcji nasz wynik GTmetrix PageSpeed ​​zmienił się na 98, ale czas ładowania strony się nie zmienił.

CSS/JS blokujący renderowanie

Jedyna sugestia narzędzia Google PageSpeed ​​Insights to „Wyeliminuj blokujący renderowanie kod JavaScript i CSS w treści strony widocznej na ekranie”. Oznacza to, że niektóre pliki JS lub CSS blokują ładowanie strony w treści strony widocznej na ekranie. To, czego oczekuje od nas narzędzie, to odroczenie lub asynchroniczne ładowanie tych zasobów blokujących.

Po raz kolejny na ratunek przychodzi wtyczka WP Rocket. Przejdź do zakładki „Pliki statyczne” i poszukaj opcji CSS/JS blokujących renderowanie . Tam możesz włączyć opcje JS i CSS, które mogą rozwiązać ten problem. Po włączeniu opcji JS pojawi się opcja trybu awaryjnego (zalecane) . Ten tryb bezpieczny załaduje bibliotekę jQuery (domyślną bibliotekę kolejkowaną WP) w nagłówku strony, pozostawiając ją jako plik blokujący, ale nie przerwie żadnych stron, które mają wbudowany kod jQuery na stronie. Ponieważ jQuery wciąż jest ładowane w głowie, narzędzie PageSpeed ​​wciąż narzeka, że ​​mamy plik JS blokujący renderowanie.

Tak więc, jeśli wyłączę tryb bezpieczny dla naszej strony testowej, narzędzie Google PageSpeed ​​daje nam doskonały wynik, 100 na urządzeniach mobilnych i 100 na komputerach. Świetnie, prawda? Nie całkiem! Nasza strona nadal działa poprawnie, ale spójrzmy jak strona się ładuje:

Flash unstyled content (FOUC) można naprawić, korzystając z opcji CSS ścieżki krytycznej w ustawieniach WP Rocket (tuż pod opcją CSS/JS blokującą renderowanie). Teoria polega na tym, że można dodać kod CSS potrzebny do części strony uginającej się na zakładkę, aby efekt flashowania niestylizowanego tekstu nie pojawiał się podczas ładowania strony. To jest trudniejsze niż się wydaje. Istnieją narzędzia, które mają generować dla Ciebie ten krytyczny CSS, ale nie odniosłem z nimi większego sukcesu.

Aby wygenerować kod CSS ścieżki krytycznej:

1. Wyłącz wtyczkę WP Rocket w swojej witrynie.
2. Przejdź do narzędzia Critical Path CSS Generator.
3. Wprowadź adres URL swojej witryny i uruchom go.
4. Skopiuj kod CSS ścieżki krytycznej.
5. Aktywuj wtyczkę WP Rocket.
6. Wklej kod CSS do pola „Critical path CSS” w ustawieniach WP Rocket.
7. Sprawdź, czy w krytycznym kodzie CSS są jakieś względne ścieżki URL i zmień je na ścieżki bezwzględne.

Tak wygląda teraz ładowanie naszej strony testowej WordPress:

Tak jest lepiej, ale nadal mi się to nie podoba. Tak, wynik Google PageSpeed ​​100/100 jest świetny, ale całkowity czas ładowania jest wolniejszy i mamy też 2 dodatkowe żądania, ponieważ włączyliśmy opcję blokowania renderowania CSS/JS. Głównym problemem dla mnie jest nadal wrażenia użytkownika podczas ładowania strony, więc wyłączyłem tę opcję WP Rocket.

WP Rocket to zdecydowanie wtyczka, z której powinien korzystać każdy właściciel witryny WordPress, ponieważ ma wszystkie funkcje przyspieszające działanie witryny. Wystarczy aktywować wtyczkę, aby uzyskać ogromny impuls. Inne funkcje muszą zostać przetestowane dla każdej witryny, ponieważ każdy motyw i wtyczka mogą mieć własne problemy.

Jesteśmy prawie na końcu naszych kroków optymalizacyjnych. Jedyne, co pozostało, to użycie CDN dla zasobów naszej witryny.

Sieć dostarczania treści (CDN)

Już kilka razy wspominałem w tym artykule, że czasy ładowania strony różnią się w zależności od lokalizacji serwera i lokalizacji odwiedzającego. Na przykład mój współdzielony serwer hostingowy, którego używamy do testowania, znajduje się w Austin w Teksasie (USA) i na początku w sekcji narzędzia Pingdom Speed ​​Tool tego artykułu przetestowaliśmy 4 lokalizacje. Oto wyniki:

• Dallas, Teksas (USA) = 1,65s
• San Jose, Kalifornia (USA) = 2,53s
• Sztokholm, Szwecja (UE) = 3,06s
• Melbourne (AUS) = 5,38s

Teraz, gdy zoptymalizowaliśmy witrynę, wykonując wszystkie kroki wymienione w tym artykule, nasze czasy ładowania wynoszą:

• Dallas, Teksas (USA) = 0,63 s
• San Jose, Kalifornia (USA) = 0,76s
• Sztokholm, Szwecja (UE) = 1,21 s
• Melbourne (AUS) = 2,24s

Wykorzystamy te czasy do porównania czasu ładowania naszego WordPressa, gdy konfigurujemy naszą witrynę do korzystania z CDN.

Widzimy, że te czasy są bardzo różne; dzieje się tak, ponieważ dane muszą przebyć dłuższą drogę z lokalizacji naszego serwera do gościa z Australii niż do gościa w Dallas. W tym miejscu CDN pomoże nam skrócić czas ładowania.

CDN to rozproszona geograficznie sieć serwerów proxy i ich centrów danych. Ich głównym celem jest dystrybucja zawartości Twojej witryny do odwiedzających z serwera znajdującego się najbliżej odwiedzającego. Oznacza to, że statyczna zawartość Twojej witryny (obrazy, JS, CSS, …) będzie obsługiwana przez ich serwery, które są rozsiane po całym świecie, dzięki czemu Twoja witryna będzie się szybciej ładować dla wszystkich.

Korzystanie z CDN WordPress ma wiele zalet, w tym:

• Zmniejszające się opóźnienie, czyli czas lub opóźnienie, jakie musi pokonać odległość.
• Zmniejsza czas do pierwszego bajtu (TTFB), który jest miarą tego, jak długo przeglądarka musi czekać, zanim otrzyma pierwszy bajt danych z serwera.
• Obsługuje zawartość z pamięci podręcznej, aby przyspieszyć ładowanie strony i zmniejszyć obciążenie serwera hostingowego (początkowego).
• Wykorzystuje protokół HTTP/2 przez bezpieczne połączenia, aby skorzystać z multipleksowania, równoległości, wypychania serwera i kompresji HPACK.
• Kompresuje dane za pomocą GZIP lub Brotli, aby zapewnić mniejsze pliki HTML, arkusze stylów i JavaScript.

Obecnie sieci CDN oferują szereg innych funkcji, zwłaszcza w dziale bezpieczeństwa. Zwykle oferują ochronę przed atakami DDoS, wykrywanie/zapobieganie botom i tak dalej.

Przyjrzymy się jednemu z bardziej popularnych CDN, zwanym Cloudflare. Oferują darmowy pakiet, który obejmuje korzystanie z ich globalnego CDN i tego właśnie potrzebujemy.

Cloudflare

Najpierw wejdź na cloudflare.com i załóż nowe darmowe konto. Po utworzeniu konta będziesz musiał skonfigurować swoją witrynę internetową w Cloudflare, aby mogła obsługiwać Twoje statyczne treści (zasoby).

Po zalogowaniu się na nowe konto Cloudflare zostaniesz poproszony o dodanie swojej witryny (domeny), aby automatycznie pobrać rekordy DNS.

Wprowadź swoją domenę i kliknij „Rozpocznij skanowanie”. Mimo że używam subdomeny ( speed.gregorcapuder.com ), musiałem wprowadzić tylko domenę główną: gregorcapuder.com . Część skanowania zajęła około minuty, a w międzyczasie możesz obejrzeć krótki film, który wyjaśni, co się dzieje. Po zakończeniu skanowania możesz kliknąć przycisk „Kontynuuj”.

W następnym kroku zobaczysz wszystkie rekordy DNS, które Cloudflare może znaleźć dla naszej domeny. Tutaj musisz dodać wszelkie rekordy, których może brakować, więc przejrzyj listę i sprawdź, czy czegoś nie brakuje. W naszym przykładzie brakowało subdomeny prędkości, więc dodałem ją do listy. W polu nazwy wpisałem „speed” (nazwę mojej subdomeny), w adresie IPv4 wpisałem ten sam adres IP, co moja domena główna (gregorcapuder.com), a następnie kliknąłem „Dodaj rekord”. Jak widać na poniższym zrzucie ekranu, włączyłem Cloudflare dla mojej domeny głównej, a także dla subdomeny prędkości (oznaczonej pomarańczową chmurką ze strzałką biegnącą za chmurą). Oznacza to, że na tych dwóch stronach ruch będzie obsługiwany i chroniony przez Cloudflare.

Kiedy skończysz z rekordami DNS, możesz przejść do następnego kroku, w którym wybierasz plan „Darmowa witryna” i kontynuujesz.

Ostatnim krokiem, aby włączyć Cloudflare dla Twojej witryny, jest zalogowanie się do pulpitu rejestratora domeny (skąd kupiłeś domenę) i zmiana serwerów nazw dla Twojej domeny. Stwierdzono, że zastosowanie nowych serwerów nazw może zająć do 48 godzin, ale w moim przypadku zostało to zaktualizowane w ciągu 1 godziny. W międzyczasie nie będzie żadnych przestojów, więc nie martw się.

Po zaktualizowaniu serwerów nazw dla Twojej witryny zobaczysz, że status Twojej witryny Cloudflare zmieni się na „aktywny”.

Domyślnie zostawiłem wszystkie ustawienia Cloudflare na desce rozdzielczej, jedyne, co zmieniłem, to poziom bezpieczeństwa. Przejdź do zakładki Zapora i ustaw „Poziom bezpieczeństwa” na Niski . Dzieje się tak, ponieważ nie chcę, aby moi goście dostali „stronę z wyzwaniem” w przypadku wykrycia fałszywego atakującego.

Teraz, gdy skonfigurujemy stronę Cloudflare, powinniśmy również włączyć ustawienia Cloudflare w naszej wtyczce WP Rocket.

Zaloguj się do pulpitu administratora WordPress i przejdź do ustawień wtyczki WP Rocket. Przejdź do zakładki „CDN”, włącz zakładkę Pokaż ustawienia Cloudflare i zapisz ustawienia. Spowoduje to wyświetlenie nowej zakładki „Cloudflare” w ustawieniach WP Rocket i powinieneś ją otworzyć. Tam należy wpisać adres e-mail konta Cloudflare, domenę, a także skopiować i wkleić globalny klucz API Cloudflare. Aby pobrać globalny klucz API, przejdź do pulpitu nawigacyjnego Cloudflare (zakładka przeglądu) i kliknij link „Uzyskaj klucz API”. Zobaczysz sekcję „Klucz API” na tej nowej stronie i powinieneś kliknąć przycisk „Wyświetl klucz API” w wierszu „Globalny klucz API”. Po wklejeniu globalnego klucza API do ustawień WP Rocket sugerowałbym również włączenie opcji „Ustawienia optymalne” w WP Rocket. Zapisz ustawienia, a następnie kliknij przycisk „Wyczyść pamięć podręczną Cloudflare”, aby sprawdzić, czy wszystko działa poprawnie.

Teraz, gdy CDN jest skonfigurowany, możemy ponownie przetestować czasy ładowania z różnych lokalizacji i zobaczyć ulepszenia (testy Pingdom).

• Dallas, Teksas (USA) = 0,54 s
• San Jose, Kalifornia (USA) = 0,70s
• Sztokholm, Szwecja (UE) = 0,91 s
• Melbourne (AUS) = 1,16s

Zgodnie z oczekiwaniami najbardziej poprawiły się czasy ładowania w Europie i Australii. A wszystkie nasze czasy ładowania wynoszą około 1 sekundy lub mniej. To świetny czas ładowania!

Kiedy testujesz swoją witrynę, nie testuj jej za pomocą tylko jednego uruchomienia narzędzia szybkości strony dla jednej lokalizacji. Musisz to przetestować kilka razy. Kiedy po raz pierwszy uruchamiasz narzędzie dla określonej lokalizacji, pliki z pamięci podręcznej muszą być najpierw przechowywane na najbliższym serwerze Cloudflare, każdy kolejny test powinien pokazać prawdziwy czas ładowania wersji z pamięci podręcznej. Proponuję przetestować 3-5 razy, aby uzyskać dobrą średnią z tego, jak szybko Twoja strona będzie się ładować z określonej lokalizacji.

Ostateczne rezultaty

Nasze końcowe oceny szybkości strony to:

• Statystyki Google PageSpeed
  • Telefon komórkowy: 91
  • Pulpit: 97

• GTmetrix
  • Prędkość strony: 98
  • YSlow: 91

Oto zrzuty ekranu:

Porównajmy dane GTmetrix przed i po naszej optymalizacji:

Poprawiliśmy wydajność naszej strony internetowej pod każdym względem. Strona ładuje się szybciej, zajmuje mniej żądań, aby wyświetlić stronę użytkownikowi, zajmuje mniej przepustowości i ładuje się szybko dla odwiedzających na całym świecie. Jednocześnie zachowaliśmy całą funkcjonalność i stylistykę naszej strony internetowej tak, jak było na początku. Niesamowite!

Na koniec przygotowaliśmy ładną wizualną reprezentację wyników dla każdego pojedynczego kroku optymalizacji, który wykonaliśmy:

Wniosek

W tym ostatecznym przewodniku po optymalizacji szybkości strony WordPress przyjrzeliśmy się ważniejszym krokom, które możesz podjąć, aby radykalnie poprawić wydajność swojej witryny. Postępowanie zgodnie z radami zawartymi w tym artykule sprawi, że Twoja witryna będzie szczupła i szybka, co poprawi czas ładowania strony, a tym samym wrażenia użytkownika. Te ulepszenia mogą również przynieść więcej pieniędzy i pomóc Ci zaoszczędzić trochę na kosztach serwera, więc jest to korzystna dla wszystkich!

Chciałbym zakończyć ten artykuł stwierdzeniem, że szybkość to nie wszystko, to kolejny element internetowej układanki. Budujemy strony internetowe dla ludzi, potencjalnych klientów, więc zawsze miej to na uwadze. Znajdź odpowiednią równowagę między treścią, multimediami, wyglądem, doświadczeniem użytkownika i szybkością strony. Nie miej obsesji na punkcie szybkości strony i wyników narzędzia szybkości strony. Tak długo, jak poprawisz wrażenia odwiedzających, Twój cel zostanie osiągnięty.

Czy przegapiłem jakiś krok optymalizacji strony, który Twoim zdaniem może znacząco poprawić czas ładowania strony? Daj mi znać w komentarzach pod spodem!

Jeśli uznałeś nasz artykuł za przydatny i postępowałeś zgodnie z jego krokami, daj mi znać w komentarzach poniżej, jakie ulepszenia osiągnąłeś.