Jak sprawić, by Twoja witryna WordPress ładowała się szybciej za pomocą wtyczek?

Posiadanie ładnej strony internetowej z dużą ilością świetnych treści jest ważne, jeśli chcesz przyciągnąć uwagę czytelników. Niestety, jeśli Twoja strona ładuje się zbyt wolno, czytelnicy mogą nigdy nie zobaczyć Twojej zawartości. Czemu? Masz tylko kilka sekund, aby przyciągnąć ich uwagę i powstrzymać ich przed przejściem do następnej witryny. Czytelnicy nie chcą czekać na załadowanie treści. Im dłużej czekasz, tym większe prawdopodobieństwo ich utraty.

Z tego powodu niezwykle ważna jest optymalizacja szybkości ładowania strony. Istnieje kilka dobrych narzędzi online, które pomagają mierzyć prędkość i rozwiązywać problemy. Jednym z najpopularniejszych narzędzi jest Google PageSpeed ​​Insights.

Statystyki PageSpeed

Google PageSpeed ​​Insights to bezpłatne narzędzie online, które przetestuje szybkość ładowania dowolnej witryny, zidentyfikuje problemy, nada im priorytety i poda sugestie rozwiązania tych problemów.

W tym artykule używam mojej własnej strony, która używa Divi z Elegant Themes jako podstawowego bloga. Pokazuję, co należy naprawić, jakie sugestie daje narzędzie i jak je naprawiłem. Wynik daje wyniki zarówno dla urządzeń mobilnych, jak i komputerów stacjonarnych. Skupiam się na komputerze. Niektóre problemy z urządzeniami mobilnymi zostaną po drodze rozwiązane.

Większość z tych problemów zostanie rozwiązanych za pomocą wtyczek. Decydując się na wtyczkę, trzymaj się wtyczek, które zostały niedawno zaktualizowane i cieszą się dobrą reputacją. Wiele wtyczek rozwiąże więcej niż jeden problem.

Słowo ostrzeżenia – niektóre wtyczki nie współpracują dobrze z innymi, ponieważ obie próbują wykonać tę samą pracę. To może mieć inny efekt niż to, czego chcesz. Zalecam wypróbowanie ich w witrynie testowej przed użyciem ich w witrynie głównej. Nie tylko same wtyczki, ale także kombinacje wtyczek. Zanim wypróbujesz wtyczki w swojej aktywnej witrynie, upewnij się, że masz ostatnią kopię zapasową.

Mój wynik

Mój wynik to fatalne 46 . Pierwszą rzeczą, na którą należy zwrócić uwagę, są trzy różne sekcje w wynikach:

• Należy naprawić (2 przedmioty)
• Rozważ naprawę (6 elementów)
• Zdane (2 szt.)

Każda sekcja rozwija się, aby pokazać, jakie są problemy i dać porady, jak je naprawić. Uważam, że najlepiej zacząć od pierwszej pozycji i iść w kolejności. Rozwiązanie ich w kolejności rozwiąże również inne problemy z listy.

Uwaga – po drodze miałem nawet kilka niepowodzeń. Dołączyłem je, abyś był świadomy możliwych problemów.

Należy naprawić

Mam dwie rzeczy, które wymagają natychmiastowej uwagi:

• Włącz kompresję
• Wyeliminuj blokujące renderowanie JavaScript i CSS w części strony widocznej na ekranie

Włącz kompresję

Moją najważniejszą kwestią jest to, że nie używam kompresji. Pokazuje, że mogę zmniejszyć rozmiar transferu plików o 79%. Można to zrobić za pomocą gzip lub deflacji.

Wzmacniacz wyników WP

Ta bezpłatna wtyczka ma kompresję gzip i rozwiąże kilka innych problemów, takich jak problemy z CSS i JavaScript, usuwając ciągi zapytań, dodając różne: nagłówek accept-encoding i ustawianie pamięci podręcznej wygasania. Wybrałem go, ponieważ ma 4,7/5 z ponad 10 000 aktywnych instalacji. Został opracowany, aby przyspieszyć ładowanie strony i poprawić wyniki testów strony.

To dało mi wynik 78 z wiadomością mającą na celu skrócenie czasu odpowiedzi serwera. Ma to wiele wspólnego z moim planem hostingowym. Naprawiam to, przenosząc moją witrynę na nowy plan hostingowy. To wykracza poza zakres tego artykułu.

Jedną fajną rzeczą w tym jest rozwiązanie niektórych głównych problemów z następnym problemem: Wyeliminuj blokujący renderowanie JavaScript i CSS w części strony widocznej na ekranie. Ten problem został przeniesiony do opcji Rozważ naprawienie. Całkowicie naprawiono także buforowanie przeglądarki z dźwignią. Witryna przechodzi teraz 4 zasady, podczas gdy wcześniej przechodziła tylko 2.

Skróć czas odpowiedzi serwera

Dziwne jest to, że czas odpowiedzi serwera wzrósł z 0,96 do 1,4. Skrócenie czasu reakcji serwera było teraz w opcji Powinno naprawić. Wymagało to wtyczki buforowania.

W3 Całkowita pamięć podręczna

W3 Total Cache jest zdecydowanie najpopularniejszą wtyczką przyspieszającą działanie serwera Twojej witryny. Ma prawie milion aktywnych instalacji i ocenę 4,4/5. Optymalizuje Twoją witrynę poprzez buforowanie. Możesz wybrać różne opcje buforowania indywidualnie. Obejmują one stronę, bazę danych, obiekt i przeglądarkę. Będzie buforować przyszłe nagłówki wygaśnięcia i tagi encji, kanały i wyniki wyszukiwania. Posiada również funkcje minifikacji JS, CSS i HTML. Po pełnej konfiguracji przyspieszy to Twój wynik Google PageSpeed ​​co najmniej 10 razy.

Wypróbowałem to z włączonymi wszystkimi funkcjami buforowania. To podniosło mój wynik do 86 . Po raz pierwszy moja witryna jest teraz na zielono, a wszystkie problemy, które miałem, były w ramach Rozważ naprawienie. Przechodzi teraz 5 reguł, w tym czas odpowiedzi serwera, który teraz mówi „serwer odpowiedział szybko”.

Rozważ naprawę

Kiedy po raz pierwszy przeprowadziłem test, ta sekcja miała więcej problemów niż wtedy, gdy w końcu do niej dotarłem. Wiele z tych problemów zostało rozwiązanych, gdy naprawiłem problemy w obszarze Powinieneś naprawić.

Problemy pierwotnie zawarte:

• Cache przeglądarki dźwigni
• Czas odpowiedzi serwera
• Zminimalizuj JavaScript
• Optymalizacja obrazów
• Zminimalizuj CSS
• Zminimalizuj HTML

Oto spojrzenie na aktualne problemy.

Wyeliminuj blokujący renderowanie kod JavaScript i CSS w treściach powyżej ekranu

Puszka JavaScript i CSS, która znajduje się w górnej części strony, może spowolnić ładowanie strony przez zbyt duże obciążenie przeglądarki. Muszą się załadować, zanim załaduje się cokolwiek innego powyżej zgięcia.

Istnieje kilka sposobów, aby to naprawić:

• Odrocz ładowanie
• Załaduj asynchronicznie
• Wstaw je bezpośrednio do kodu HTML

Oto wtyczki, których użyłem do rozwiązania tego problemu.

Autooptymalizacja

Ta wtyczka zminimalizuje (usunie wszystkie niepotrzebne formatowanie i zmniejszy rozmiar pliku oraz załaduje się w przeglądarce) i skompresuje Twój JavaScript, CSS i HTML. Doda nagłówki wygaśnięcia i będzie je buforować. Przeniesie Twoje style do nagłówka strony i skrypty do stopki. Korzystając z zaawansowanych ustawień, możesz dostosować go do swoich potrzeb.

Rozwiąże to również kilka problemów, takich jak minifikacja JS i CSS na liście.

Na początku po prostu włączyłem podstawowe ustawienia HTML, JS i CSS. To podniosło mój wynik do 88 i zredukowało problemy do 3 zasobów CSS. Jedna została stworzona przez samą wtyczkę, a dwie pozostałe to czcionki Google. Przechodzi teraz 7 zasad. Rozwiązał Minify CSS i Minify HTML.

Lepsza Minifikacja WordPress

Głównym celem tej wtyczki jest zminimalizowanie CSS i JS, ale ma też fajną funkcję, która pozwala przenieść pliki do stopki lub innych lokalizacji (dlatego właśnie ją wybrałem). Wykorzystuje system kolejkowania, aby poprawić zgodność z przeglądarkami, wtyczkami i motywami.

Kiedy go zainstalowałem, wszystkie ustawienia układu dla mojego motywu zostały usunięte, a wszystkie moje menu, obrazy, łącza itp. pojawiły się po lewej stronie ekranu. Na szczęście formatowanie wróciło po odinstalowaniu. To mogło być coś w ustawieniach, które wymagało dostosowania. Jestem pewien, że to dobra wtyczka, ponieważ ma ponad 60 000 aktywnych instalacji i ocenę 4.4/5. Dołączyłem to tylko jako ostrzeżenie, że może nie działać tak, jak tego potrzebujesz, bez pewnej konfiguracji.

Ponieważ mój wynik wyniósł 88 i wiedziałem, jakie są 3 problemy, postanowiłem przejść do następnego problemu.

Optymalizacja obrazów

Rozmiar obrazu odgrywa dużą rolę w szybkości ładowania strony. Czasami możesz użyć znacznie mniejszego rozmiaru obrazu i niższej jakości bez większych różnic wizualnych podczas oglądania w Internecie. To nie tylko przyspiesza czas ładowania i zużywa mniej przepustowości, ale także przyspiesza czas tworzenia kopii zapasowych i zmniejsza ilość miejsca na serwerze.

Optymalizator obrazu EWWW

Ta wtyczka automatycznie zoptymalizuje Twoje obrazy podczas ich przesyłania i przekonwertuje je do formatu, który zapewnia najmniejszy rozmiar. Zoptymalizuje również obrazy, które już przesłałeś. Możesz także zastosować redukcje stratne dla obrazów PNG i JPG.

Kiedy go zainstalowałem, było kilka plików, które chciał, abym zlokalizował i zainstalował. Myślę, że ta wtyczka działałaby świetnie ze wszystkimi zainstalowanymi plikami, ale zdecydowałem się znaleźć taki, który działał po wyjęciu z pudełka.

WP Smush

Ta wtyczka zmniejszy rozmiar plików obrazów bez obniżania jakości. Czyni to poprzez usuwanie ukrytych informacji. Przeanalizuje twoje pliki i powie ci, ile obrazów należy zamazać. Możesz je zmiażdżyć zbiorczo.

Darmowa wersja nie zmiażdży niczego powyżej 1 MB i zmiażdży tylko 50 na raz. Aby uzyskać więcej, potrzebujesz WP Smush Pro, który rozbija obrazy do 32 MB bez limitu liczby na raz. Tworzy kopię zapasową oryginałów, jeśli ich potrzebujesz. Ceny zaczynają się od 19 USD miesięcznie.

Miałem 114 zdjęć, które wymagały wygładzenia. 8 z tych obrazów miało ponad 1 MB. Postanowiłem naprawić je ręcznie. Uciął 98 obrazów i zmniejszył rozmiar pliku o 4,79 MB (8,82%).

To podniosło mój wynik do 90 . Google Insights zidentyfikowało 5 obrazów, które mu się nie podobały, ale żaden z nich nie przekraczał 1 MB. Wynosiły one od 0,7 KB do 17 KB.

Optymalizacja obrazów ręcznie

Możesz zoptymalizować obrazy ręcznie, zmieniając rozmiar, zmniejszając jakość i zmieniając format. Jednym z moich ulubionych i najczęściej używanych narzędzi do obsługi obrazów jest Paint.NET. Jest to bezpłatna aplikacja do edycji obrazów i zdjęć dla systemu Windows, która oferuje wiele funkcji zmniejszających rozmiar pliku. Jaki jest Twój ulubiony?

Zminimalizuj JavaScript, CSS i HTML

Myślałem, że to naprawiłem…

Kiedy pracowałem nad innymi problemami, zauważyłem, że jedyna wiadomość do zminimalizowania dotyczyła JavaScript. Po zoptymalizowaniu obrazów wszystkie trzy problemy powróciły. Odtworzyłem swoje kroki, aby dowiedzieć się, co się stało.

Po wypróbowaniu Better WordPress Minify, a następnie wyłączeniu go, moje wiadomości o zminimalizowaniu CSS i HTML wróciły. Mój wynik spadł do 88 i wróciłem do 5 zdanych zasad. Włączyłem funkcje minifikacji W3 Total Cache i teraz przeszły wszystkie problemy z minifikacją. Miałem teraz 88 punktów i zdałem 8 zasad. Ponadto miał sześć plików nad zakładką. Wiedziałem, że rozwiązałem kilka z nich, więc musiałem coś zmienić.

Zrobiłem trochę rozwiązywania problemów i stwierdziłem, że wyłączyłem Autooptymalizację, gdy wcześniej miałem problem z Better WordPress Minify. Włączyłem ponownie autooptymalizację, wyłączyłem minifikację z W3 Total Cache i wyczyściłem pamięć podręczną (bardzo ważny krok!). Teraz uzyskałem wynik 90 punktów, a strona przeszła 8 zasad. Wrócił do trzech plików CSS u góry strony i wiadomości, aby zoptymalizować obrazy.

Bazując na moich wcześniejszych doświadczeniach, postanowiłem nie tracić czasu na te pliki. Myślę, że Google nienawidzi obrazów o dowolnym rozmiarze (bez względu na to, jak małe je zrobię, nadal otrzymuję komunikat, aby zmniejszyć rozmiar) i przejście od PageScore z 46 do 90 to wygrana w mojej książce. Nauczyłem się trudnego sposobu zatrzymywania się, gdy jesteś przed tobą.

Wynik końcowy

Mój wynik końcowy to 90/100. Wtyczki, których użyłem, aby uzyskać ten wynik, to:

• Autooptymalizacja (wszystkie funkcje włączone)
• W3 Total Cache (włączone tylko funkcje buforowania stron)
• WP Performance Score Booster (wszystkie funkcje włączone)
• WP Smush (edycja bezpłatna)

Dla przypomnienia, wynik mobilny wzrósł z 36 do 78. Aby to naprawić, musiałbym zoptymalizować moje obrazy i pliki pod kątem urządzeń mobilnych.

Końcowe przemyślenia

Twoi odwiedzający, Google i inne wyszukiwarki nienawidzą stron, które ładują się powoli. Korzystając z Google PageSpeed ​​Insights możesz dokładnie wiedzieć, jakie są problemy i uzyskać wskazówki, jak je rozwiązać. Kilka darmowych wtyczek to wszystko, czego potrzebujesz, aby przejść z powolnej witryny, której Google nienawidzi, do szybkiej witryny, którą Google uwielbia. Po prostu bądź ostrożny eksperymentując – niektóre wtyczki nie współpracują dobrze z innymi.

Chciałbym usłyszeć od ciebie. Czy zoptymalizowałeś swoją witrynę WordPress za pomocą Google PageSpeed ​​Insights? Czy twoje doświadczenie było podobne do mojego? Czy używałeś różnych wtyczek do rozwiązania problemów? Chciałbym usłyszeć o twoich doświadczeniach w komentarzach.