Przewodnik dla początkujących dotyczący optymalizacji szybkości witryny Napraw powolną witrynę

Nie wiesz, jak zwiększyć ogólną szybkość swojej witryny?

Szybkość strony internetowej jest podstawową częścią nowoczesnego SEO i zaufaj mi; Ma natychmiastowy i znaczący wpływ na rankingi.

Jeśli kiedykolwiek odwiedziłeś moją witrynę TheGuideX, zauważysz, że moja witryna ładuje się poniżej 1 sekundy (poniżej załączyłem również wynik GTmertix).

Według GTmetrix wynik PageSpeed ​​z TheGuideX.com wynosi 100%, a wynik YSlow wynosi około 95% przy czasie ładowania 0,9 sekundy i tylko 23 żądaniach HTTP. To jest niesamowite.

… a oto kolejny raport TheVPNCoupon.com, na którym bloguję o VPN.

Według GTmetrix wynik PageSpeed ​​z mojego drugiego bloga (TheVPNCoupon.com) wynosi około 99%, a wynik YSlow wynosi 95% przy żądaniach 23-HTTP, a ta strona internetowa ładuje się również w czasie poniżej 1 sekundy (chociaż załadowanie tego zajmuje tylko 800 ms stronie internetowej).

Witryna, która ładuje się poniżej 2 sekund, jest uważana za dopuszczalną prędkość ładowania. Ale zawsze zalecamy zoptymalizowanie witryny tak dalece, jak to możliwe, aby uzyskać lepszą prędkość ładowania.

Więc co mam zrobić, aby zoptymalizować szybkość mojej witryny? Czy potrzebujesz umiejętności technicznych lub programistycznych, aby zoptymalizować swoją witrynę?

Odpowiedź brzmi nie; nie potrzebujesz żadnych umiejętności technicznych ani programistycznych, aby zoptymalizować swoją witrynę. Możesz to łatwo zrobić za pomocą kilku wtyczek WordPress i CDN. Aby zoptymalizować swoją witrynę, najpierw potrzebujesz lepszego planu hostingowego.

Większość blogerów-amatorów zawiodła tutaj. Kiedy proszą mnie o zoptymalizowanie swojej witryny, zauważam, że korzystali z tanich współdzielonych planów hostingowych na swojej stronie, a korzystanie z taniego planu hostingowego nigdy nie sprawi, że strona internetowa będzie szybka.

Jeśli masz podstawową wiedzę na temat VPS, polecam najpierw przenieść swoją witrynę do DigitalOcean lub Cloudways, a jeśli chcesz hosting oparty na cPanel, możesz przejść do SiteGround.

Upewnij się również, że używasz CDN w swojej witrynie. Jeśli szukasz darmowego dostawcy CDN, polecę Ci Cloudflare. Możesz także użyć ImageKit dla Image CDN (używam tego na mojej stronie i pomaga mi optymalizować obrazy w czasie rzeczywistym).

Zanim zagłębimy się w techniki optymalizacji prędkości, najpierw dowiemy się

Dlaczego prędkość ma znaczenie?

Jak długo czekasz na załadowanie strony?

Cóż, według statystyk połowa z nas i nawet jeśli chodzi o mnie, nie chcę czekać dwie sekundy, aż strona się załaduje.

Dlatego chciałem mieć pewność, że moja strona ładuje się w ciągu jednej sekundy lub jak najszybciej. A dzisiaj podzielę się dokładnie tą samą metodą, której używam na swojej stronie, aby zoptymalizować jej szybkość.

Ale dlaczego szybkość strony internetowej ma znaczenie? A jaką różnicę robi ułamek sekundy?

Odpowiedź? To robi dużą różnicę!

Ale jak to robi dużą różnicę? Zobaczmy szczegółowy raport, aby dowiedzieć się więcej o tym, dlaczego szybkość ma znaczenie.

1. Powolne strony zabijają konwersje:

Powolna strona internetowa może zabić konwersje w Twojej witrynie.

Wyobraźmy sobie, że prowadzisz witrynę eCommerce, a jej załadowanie zajmuje około czterech sekund. Według różnych raportów 40% osób może opuścić Twoją witrynę, jeśli ładowanie zajmie ponad trzy sekundy.

W tym sensie, jeśli Twoja witryna otrzymuje około 1 000 000 ruchu miesięcznie, a jej załadowanie zajmuje około czterech sekund, istnieje wiele szans, że nawet 40 000 osób może ją porzucić.

W ten sposób stracisz 40% ludzi, a tym samym odbije się to również na ogólnej konwersji witryny. W ten sposób szybkość witryny ma duże znaczenie dla zwiększenia konwersji.

2. Oczekujemy szybkości i doświadczenia użytkownika:

Jak już wspomniałem powyżej, 40% osób opuszcza Twoją witrynę, jeśli ładowanie trwa dłużej niż trzy sekundy. A jeśli chodzi o mnie, zawsze opuszczam stronę, co zajmuje dwie lub więcej sekund, aby się załadować.

WTH czekać na dwie sekundy, aby załadować stronę?

Jeśli nie mogę czekać dwie sekundy, to nie mogę oczekiwać, że moi czytelnicy zostaną na tak długo.

Na dobre wrażenia użytkownika składają się dwa główne czynniki:

1. Dając odwiedzającym to, czego szukają, i
2. Daj im to szybko.

Oto kilka innych czynników rankingowych związanych z nową obsługą strony Google, które możesz zoptymalizować w swojej witrynie.

A gdy tylko użytkownicy są zdezorientowani i sfrustrowani, oznacza to, że zrobiliśmy coś złego i nie ma nic bardziej sfrustrowanego niż powolny czas ładowania.

Jeśli naprawdę chcesz poprawić ogólną wydajność swojej witryny, szybkość ładowania witryny powinna być Twoim najwyższym priorytetem.

3. Szybkość witryny wpływa na Twoją pozycję w Google:

Ostatnim, ale nie mniej ważnym punktem jest to, że dominuje w rankingu Google.

Google już przyznało, że dąży do tego, aby cała sieć była szybka. Ich misją jest uczynienie strony internetowej superszybką, bardziej niezawodną i użyteczną.

Nie byłoby to możliwe bez dobrej szybkości ładowania, a oni dają pierwszeństwo witrynom, które szybko się wczytują. I zgodnie z moją wiedzą w 2010 roku ogłosili, że nieco bardziej preferują strony internetowe o dużej szybkości ładowania.

A według raportu SERoundtable, jeśli Twoja witryna zajmuje ponad 2 sekundy, aby załadować zawartość, Google może ograniczyć liczbę robotów, które wysyła do Twojej witryny.

Jeśli tak jest w przypadku Twojej witryny, Google będzie mniej prawdopodobne, że będzie preferować i pobierać Twój najnowszy post na blogu lub zauważać niedawne aktualizacje. I na pewno zaszkodzi to Twojej witrynie.

Tak więc szybkość ma znaczenie, wpływa na konwersję witryny; wpływa na wrażenia użytkownika, a także wpływa na ranking wyszukiwarek.

W tej chwili jestem pewien, że wiesz, jak ważna jest szybko ładująca się strona internetowa.

A teraz, zanim przejdziemy do konkretnych technik, które pomogą Ci zoptymalizować ogólną szybkość Twojej witryny, poświęćmy chwilę na przegląd narzędzi, które pomogą Ci w analizie szybkości Twoich stron internetowych.

Narzędzia do testowania szybkości witryny

Ok, więc optymalizacja szybkości strony ma znaczenie! Teraz, jak możesz powiedzieć, gdzie jesteś?

Czy Twoja witryna jest wolna? Czy jest w środku, czy jest to błyskawica (Gratulacje, prawdopodobnie możesz przestać czytać!).

Jedynym sposobem, aby się dowiedzieć, jest przetestowanie swojej witryny. Istnieje wiele witryn do pomiaru szybkości naszej witryny, ale w tym przewodniku podzielę się tylko kilkoma narzędziami, których osobiście wolę używać.

1. GTmetrix

GTmetrix to jedno z najlepszych narzędzi do sprawdzania wydajności serwisu. To narzędzie jest dobrą opcją dla zwykłych użytkowników i programistów.

GTmetrix oferuje przyjazny dla użytkownika projekt z wieloma przydatnymi i dogłębnymi optymalizacjami. Aby skorzystać z tego narzędzia, wystarczy umieścić link do strony internetowej i kliknąć przycisk „ Analizuj” .

Kiedy klikniesz na przycisk „ Analizuj ”, zajmie kilka sekund, a czasem minutę, aby wypluć szczegółową analizę Twojej strony internetowej.

A jeśli zagłębisz się w wynik GTmetrix i rozwiniesz sekcję „ rekomendacje” , pokaże ona rekomendacje specyficzne dla Twojej witryny. Możesz także kliknąć „Co to oznacza?” aby dowiedzieć się więcej o tych błędach i optymalizacjach.

Oprócz „ rekomendacji” pokazuje również czas wyszukiwania DNS każdego zewnętrznego i wewnętrznego pliku, z którego korzysta Twoja witryna. Jeśli jesteś programistą lub masz umiejętności techniczne, pomoże Ci to w dalszej optymalizacji witryny.

2. Pingdom

Pingdom to kolejne najbardziej wydajne i świetne narzędzie do optymalizacji szybkości WordPressa. Jeśli jesteś początkującym lub programistą, to narzędzie pomoże Ci skutecznie przetestować Twoją witrynę i pomoże Ci z zaleceniami dotyczącymi optymalizacji witryny.

Aby skorzystać z tego narzędzia, wprowadź adres swojej witryny, a następnie wybierz „ lokalizację testową”. Po wybraniu lokalizacji testowej kliknij przycisk „ Rozpocznij test” , a rozpocznie się analiza strony.

I podobnie jak GTmetrix, jeśli zagłębisz się głębiej, pokaże Ci różne zalecenia dotyczące optymalizacji Twojej witryny. A niżej znajdziesz informacje o konkretnych żądaniach w Twojej witrynie oraz analizę kaskadową.

To narzędzie jest naprawdę pomocne w improwizacji szybkości witryny – ale wymaga trochę zaawansowanej wiedzy, aby skorzystać. Możesz również przeczytać post na temat analizy wodospadu przez KeyCDN, aby dowiedzieć się więcej na ten temat.

3. Google PageSpeed ​​Insights

Kolejnym najlepszym narzędziem do testowania Twojej witryny jest Google PageSpeed ​​Insight. To narzędzie podaje tylko sugestie, dzięki którym możesz zoptymalizować swoją witrynę, ale nie podzieliłoby wyniku testu szybkości Twojej witryny.

To się jednak zmieniło. Teraz Google będzie udostępniać czas ładowania strony zarówno dla First Contentful Paint (FCP) , jak i DOM Content Loaded (DCL) . Możesz dowiedzieć się więcej o tych wskaźnikach prędkości na oficjalnej stronie programisty Google tutaj.

Jeśli masz niski wynik szybkości strony i masz słaby czas ładowania, ten przewodnik jest dla Ciebie! Możesz przeczytać ten przewodnik do końca, aby odpowiednio zoptymalizować swoją stronę w Google PageSpeed ​​Insight i innych witrynach.

Możesz również sprawdzić nasz inny przewodnik dotyczący rozwiązywania problemu Flash of Invisible Text (FOIT), aby zoptymalizować czcionki w swojej witrynie.

4. Test strony internetowej

Ostatnim, ale nie najmniej ważnym narzędziem do sprawdzania szybkości strony internetowej jest WebPageTest. To narzędzie jest jednym z najbardziej zaawansowanych narzędzi do testowania prędkości WordPress pod względem głębi funkcjonalności i dostarczanych danych.

Kiedy sprawdzasz szybkość swojej witryny za pomocą narzędzia WebPageTest, możesz użyć kilku ustawień zaawansowanych , aby przeanalizować swoją witrynę. Możesz użyć tych zaawansowanych ustawień, aby;

Jeśli sprawdzisz tego tweeta Johna Muellera z wyszukiwarki Google, poleca on również narzędzie WebPageTest do sprawdzania szybkości ładowania witryny.

Jeśli mylisz się z tymi opcjami, polecam wypróbowanie zakładki „ Proste testowanie” . Ogólnie rzecz biorąc, to narzędzie jest najlepsze do testowania szybkości witryny, a jeśli jesteś programistą, bardzo pomoże ci naprawić witrynę.

Do tej pory dowiedzieliśmy się, jak ważne jest posiadanie szybko ładującej się strony internetowej i narzędzi do sprawdzania szybkości strony.

Teraz nadszedł czas, aby podzielić się technikami prawidłowej optymalizacji witryny.

W tym samouczku nie tylko podzielę się instrukcjami korzystania z wtyczki pamięci podręcznej w celu optymalizacji CSS, JS, HTML lub korzystania z CDN, jak robią to inni, ale podzielę się najbardziej dostępnym sposobem, dzięki któremu możesz wykonać te optymalizacje prawidłowo.

Te metody są proste i najprostsze z przykładami;

Ale zanim przejdziesz do tych metod, polecam najpierw wykonać kopię zapasową witryny WordPress za pomocą wtyczki Updraft Backup, która jest dostępna bezpłatnie w repozytorium WordPress.

Po wykonaniu kopii zapasowej witryny WordPress możemy kontynuować optymalizację witryny.

Więc jak…

Zoptymalizuj swoją witrynę

Teraz czekanie się skończyło!

Tutaj dzielę się metodami, których zawsze używam na mojej stronie, aby ją zoptymalizować. Możesz zastosować te same techniki, aby zoptymalizować swój blog, mikroniszę, a także sklep eCommerce.

1. Wybór szybkiego i zaufanego hostingu

Tak więc pierwszym krokiem jest wybór zaufanego i szybkiego dostawcy usług hostingowych.

Jak już wspomniałem, kiedy ludzie proszą mnie o optymalizację ich witryny, zauważam, że korzystali z tanich współdzielonych planów hostingowych na swojej stronie, a korzystanie z taniego planu hostingowego nigdy nie sprawi, że strona internetowa będzie szybka.

Więc jeśli korzystasz z jakiegokolwiek taniego współdzielonego planu hostingowego, zdecydowanie polecam Ci najpierw przejść od obecnego dostawcy usług hostingowych do dowolnego zaufanego dostawcy.

Jeśli pytasz mnie o szybką i najlepszą platformę hostingową, zawsze będę polecać DigitalOcean – ale zarządzanie dropletem DigitalOcean wymaga kilku umiejętności technicznych. Chociaż jest to łatwe i dla większej wygody, możesz użyć dowolnego panelu sterowania na swoim serwerze (ja osobiście używam DigitalOcean we wszystkich moich projektach).

Panele te mogą obejmować ServerPilot, VestaCP i wiele innych – ale zawsze polecam używanie ServerPilot, ponieważ jest to jeden z najłatwiejszych paneli kontrolnych do instalacji WordPressa (możesz kliknąć tutaj, aby otrzymać 10 USD darmowego kredytu na ServerPilot).

A jeśli jesteś początkującym i chcesz hostingu opartego na cPanel, możesz również skorzystać z SiteGround. SiteGround jest jednym z najlepszych i zaufanych dostawców usług hostingowych dla małych firm i stron internetowych.

1.1 Zalecany hosting

1.2 Nie zalecany Hosting

2. Wybór zoptymalizowanego motywu WordPress

Wybierając motyw dla swojej witryny WordPress, ważne jest, aby wybrać motyw zoptymalizowany pod kątem szybkości. Niektóre piękne i efektownie wyglądające motywy są słabo zakodowane i mogą bardzo spowolnić Twoją witrynę.

A jeśli nie używasz zoptymalizowanego motywu w swojej witrynie, jest mniejsze prawdopodobieństwo, że te metody optymalizacji szybkości będą dla Ciebie skuteczne.

Zwykle wolę korzystać z motywu, który ma prosty i przejrzysty interfejs użytkownika, niż preferować efektowną, ogromną animację i motyw o złożonym układzie. Zawsze możesz dodać te funkcje za pomocą niezawodnej i wysokiej jakości wtyczki WordPress.

Jeśli potrzebujesz rekomendacji dotyczących motywów, sugeruję, abyś preferował motywy WordPress premium od StudioPress, MyThemeShop i GeneratePress. Motywy z tych rynków są zoptymalizowane i dobrze zakodowane zarówno pod kątem szybkości, jak i SEO. (Osobiście wolę używać motywu GeneratePress na moich stronach internetowych)

Możesz również sprawdzić Astrę, która jest kolejnym motywem zoptymalizowanym pod kątem szybkości i SEO. Podobnie jak GeneratePress, ten motyw ma również wiele opcji dostosowywania i jest jednym z najczęściej pobieranych motywów w repozytorium WordPress z ponad 700 000 aktywnych instalacji.

2.1 Polecane motywy

Do tej pory rozmawialiśmy o zaufanych i szybkich dostawcach hostingu oraz szybkim i niezawodnym motywie WordPress.

Te dwie rzeczy są niezbędne do przejścia do trzeciego kroku, czyli optymalizacji bloga/strony internetowej za pomocą kilku wtyczek WordPress.

3. Optymalizacja za pomocą wtyczek WordPress

Więc zanim omówimy optymalizację witryny WordPress za pomocą kilku wtyczek, zakładamy, że już zajęto się dwiema rzeczami;

Jeśli zaznaczysz te dwa pola, możesz przejść do optymalizacji WordPressa za pomocą różnych wtyczek i zbadać kompleksowe sposoby na przyspieszenie ładowania witryny.

3.1 Zoptymalizuj swoją witrynę za pomocą WP Rocket

Tak więc pierwszą wtyczką, której używamy do optymalizacji prędkości WordPress, jest WP Rocket.

WP Rocket to jedna z najlepszych wtyczek pamięci podręcznej WordPress, która pomaga przyspieszyć ładowanie witryny. Jest to przyjazne dla początkujących narzędzie z wieloma możliwościami dostosowania, aby zwiększyć wydajność Twojej witryny za pomocą zaledwie kilku kliknięć.

Wtyczka może pomóc w optymalizacji;

Więc teraz zrozumieliśmy podstawy korzystania z tej wtyczki. Teraz pokażemy Ci, jak poprawnie zoptymalizować swoją witrynę za pomocą wtyczki pamięci podręcznej WP-Rocket.

Jeśli używasz innej wtyczki pamięci podręcznej, nie polecam ci przejścia na WP-Rocket.

Jest to jedna z najłatwiejszych, ale najlepszych wtyczek do pamięci podręcznej, a nawet nie musisz zepsuć ich ustawień, tak jak w przypadku innych wtyczek pamięci podręcznej. Wystarczy jedno kliknięcie i gotowe.

Więc…

Jak skutecznie korzystać z WP-Rocket?

Znajdziesz wiele funkcji we wtyczce WP-Rocket i czy kiedykolwiek zastanawiałeś się, jakie ustawienia musisz aktywować w swojej witrynie, aby była szybka?

Po zainstalowaniu i aktywacji wtyczki WP-Rocket w witrynie WordPress, przejdź do „ Ustawienia ” > „ WP Rocket ”, aby otworzyć stronę konfiguracji.

Teraz kliknij Ustawienia pamięci podręcznej , aby ustawić pamięć podręczną witryny za pomocą wtyczki WP-Rocket. (Pokaże coś takiego)

Przede wszystkim musisz włączyć „ Mobilną pamięć podręczną ”, a jeśli konfigurujesz pamięć podręczną dla handlu elektronicznego, włączyć ustawienia „ Pamięć podręczna zalogowanych użytkowników ”.

A następnie ustaw „ Czas życia pamięci podręcznej ” na „ 10 godzin ”.

Gdy skończymy z ustawieniami pamięci podręcznej, przejdziemy do „ Optymalizacja pliku ”, skąd możemy minimalizować HTML, CSS, JS, Odroczyć JS i łączyć CSS i JS.

Te ustawienia są jednym z najważniejszych ustawień WP-Rocket. Pomoże Ci również zmniejszyć żądanie HTTP, łącząc CSS i JS Twojej witryny.

Po kliknięciu części „ Optymalizacja pliku ” otrzymasz różne opcje minimalizacji HTML, CSS, JS i łączenia ich w mniejszej liczbie plików.

A w „ Ustawieniach podstawowych” zaznacz wszystkie trzy opcje „ Minify HTML”, „ Połącz pliki czcionek Google”, „ Usuń ciągi zapytań”. Nie wpłynie to na Twoją witrynę — ale po aktywowaniu ustawień „ Pliki CSS ” i „ Pliki JS ” upewnij się, że nie spowoduje to uszkodzenia witryny.

Teraz zaznacz opcję „Minifikuj CSS”, „Połącz CSS” i „Optymalizuj dostarczanie CSS” w plikach CSS , aby zminimalizować CSS i połączyć je w mniej plików. Naprawi również problem „ eliminuje blokowanie renderowania CSS ” w Twojej witrynie.

Podobnie w sekcji JS Files kliknij „Remove JQuery Migrate”, „Minify JS”, ​​„Combine JavaScript Files”, „Load JavaScript Deferred”, a następnie włącz „Safe Mode for JQuery” w sekcji JS Deferred.

Po wprowadzeniu tych ustawień w Optymalizacji plików wyczyść pamięć podręczną i upewnij się, że nie zniszczy ona Twojej witryny, odwiedzając jej stronę główną lub dowolną stronę.

Po ustawieniach Optymalizacji plików otrzymasz ustawienia zarządzania Lazy loading & Media. Kliknij opcję Media , aby wprowadzić zmiany w ustawieniach mediów;

Tutaj, w tej opcji, dostaniesz opcję włączenia lazyload na obrazach i filmach, a także otrzymasz opcję wyłączenia osadzania, emotikonów i włączenia kompatybilności z WebP.

Zasugeruję włączenie ustawień Lazyload dla obrazów, iframe i wideo. Możesz także zamienić filmy z YouTube lub iframe na obrazy (zaufaj mi, dzięki temu Twoja witryna będzie błyskawicznie działać).

Otrzymasz również opcję wyłączenia emotikonów i osadzonych elementów, które w większości są dla nas bezużyteczne, a wyłączając osadzanie, zaoszczędzisz zasoby witryny, więc zalecamy włączenie tych ustawień.

Po ustawieniach multimediów otrzymasz opcję włączenia wstępnego ładowania w swojej witrynie.

Dlaczego wstępne wczytywanie gotówki jest niezbędne do poprawy wydajności Twojej witryny?

Wstępne ładowanie zapewnia, że ​​odwiedzający od razu otrzymają szybsze wersje Twojej witryny zapisane w pamięci podręcznej. WP Rocket automatycznie się tym zajmie, a Twoja strona główna i wszystkie znalezione na niej linki zostaną wstępnie załadowane

Po wprowadzeniu ustawień wstępnego ładowania dostaniesz opcję konfiguracji zaawansowanych ustawień. W ustawieniach zaawansowanych możesz łatwo zarządzać kilkoma ustawieniami, które mogą obejmować wyłączenie pamięci podręcznej dla niestandardowego adresu URL lub niestandardowych plików cookie, agenta użytkownika i wyczyszczenie żądanego adresu URL.

Następnie otrzymasz opcję zarządzania optymalizacją bazy danych i CDN, ale tutaj pominiemy to ustawienie. Używamy wtyczki WP-Optimize do efektywnej optymalizacji bazy danych, a później pokażemy, jak zaimplementować CDN w sekcji CDN.

I znowu, po tych ustawieniach otrzymasz opcję zarządzania API WordPress Heartbeat. Zasadniczo WordPress Heartbeat API zapewnia połączenie do przesyłania danych w czasie rzeczywistym i synchronizacji między serwerem a przeglądarką.

Nadal nie możesz zrozumieć ustawień bicia serca? Tutaj podzielę się kilkoma przykładami, w których zaangażowane są ustawienia bicia serca;

Jeśli używasz serwera z niskimi zasobami, możesz go wyłączyć, aby zaoszczędzić zasoby, ale w przypadku małych witryn nie jest to poważny problem.

A teraz ostatnim, ale nie najmniejszym ustawieniem wtyczki WP-Rocket, są ich ustawienia dodatków . Jeśli korzystasz z Facebook Pixel i Google Analytics na swojej stronie, pomoże Ci to przechowywać je lokalnie na Twoim serwerze, aby zoptymalizować szybkość witryny.

Możesz go po prostu włączyć, aby poprawić problem z buforowaniem przeglądarki w swojej witrynie.

Kolejny świetny dodatek może obejmować integrację Twojej witryny z Cloudflare i Sucuri bezpośrednio z pulpitu nawigacyjnego WP-rocket. Pomoże Ci wyczyścić i wyczyścić pamięć podręczną tych dostawców CDN za każdym razem, gdy wyczyścisz coś w swojej witrynie.

Zaufaj mi; są to jedne z najlepszych ustawień, które sprawią, że Twoja witryna będzie naprawdę szybka. Jeśli chcesz, aby Twoja strona ładowała się szybko, sugeruję włączenie tych ustawień.

Na chwilę obecną wdrożyliśmy kilka optymalizacji za pomocą wtyczki WP-Rocket.

Teraz użyjemy kilku innych wtyczek, takich jak WP-Optimize do optymalizacji bazy danych i AssetCleanUp Pro do dalszej optymalizacji szybkości.

3.2 Zoptymalizuj swoją witrynę za pomocą Asset CleanUp Pro

Po zoptymalizowaniu witryny za pomocą WP Rocket i sprawdzeniu wyniku GTmetrix i Pingdom zobaczysz natychmiastową poprawę szybkości ładowania strony.

Ale nie skończyliśmy tutaj, wspomniałem już powyżej, że musimy zoptymalizować naszą stronę internetową tak bardzo, jak to możliwe.

Więc teraz użyjemy kilku innych wtyczek, takich jak Asset CleanUp Pro, do dalszej optymalizacji naszej strony internetowej (możesz również użyć darmowej wersji Asset CleanUp do optymalizacji, ale sugeruję zakup płatnej).

Ta wtyczka może pomóc rozwiązać problem Flash of Invisible Text (FOIT) w Twojej witrynie, a także blokować dostęp do pliku XML-RPC i robić o wiele więcej rzeczy.

Ponieważ zoptymalizowaliśmy już naszą stronę za pomocą WP Rocket, więc modyfikacje HTML, CSS i JS oraz kilka innych ustawień są zablokowane i nie możemy ich włączyć (to dobrze!)

Po włączeniu trybu testowego kliknij opcję Optymalizuj CSS , a następnie przewiń w dół do ustawień Cache Dynamic Loaded CSS , a następnie włącz ją.

Gdy to zrobisz, kliknij przycisk Zapisz .

Podobnie w sekcji Optymalizuj JS włącz bufor JavaScript ładowany dynamicznie.

Te opcje pomogą Ci buforować dynamiczne wartości CSS i JS. Chociaż po użyciu WP-Rocket nie wystąpią te problemy w WordPressie.

Po wprowadzeniu tych ustawień kliknij ustawienia „ Wspólne operacje usuwania w całej witrynie ” po opcji „ CDN ”.

Tutaj znajdziesz kilka opcji wyłączania emotikonów , osadzeń , dashiconów , biblioteki bloków CSS Gutenberga , migracji JQuery i odpowiedzi na komentarze w całej witrynie .

Ale jeśli nie używasz ikony Gutenberg, Dashicons na swoim blogu, możesz je wyłączyć.

A jeśli nie używasz WordPressa jako bloga, nie chcesz, aby odwiedzający zostawiali komentarze lub zastąpiłeś domyślne komentarze WordPress platformą komentarzy, taką jak Disqus lub Facebook, możesz również wyłączyć „ Witryna odpowiedzi na komentarze- szeroki ” z ustawień.

Teraz przejdziemy do sekcji „ Oczyszczanie źródła HTML ”, z której możemy usunąć nieużywane elementy z sekcji <head>.

Z tych ustawień możemy usunąć niechciane elementy z sekcji <head>.

Nie martw się!

Usunięcie tych elementów w ogóle nie wpłynie na Twoją witrynę.

Usunąłem kilka opcji z tych ustawień, w tym komentarz RSS, tagi generatora meta, tagi wersji WordPressa, łącza REST API i RSD.

Możesz usunąć te ustawienia ze swojej witryny i nie zaszkodzi to Twojej witrynie. Możesz również usunąć łącze do kanału RSS tylko wtedy, gdy go nie używasz.

A jeśli używasz wersji premium programu Asset Cleanup Pro , możesz zmienić wartość „ Zastosuj CSS wyświetlania czcionek ” z „ Nie stosuj ” na „ Zamień”. Może to uchronić Twoją witrynę przed błyskiem niewidocznego problemu z tekstem. Możesz kliknąć tutaj, aby dowiedzieć się więcej o tym problemie.

Możesz również wprowadzić adres URL lokalnych plików czcionek w sekcji wstępnego ładowania, aby je natychmiast załadować. Kiedy wstępnie ładujemy plik czcionki, wyraźnie zwiększamy priorytet zasobu.

Po ustawieniach lokalnej optymalizacji czcionek zobaczysz podobną opcję w „Czcionkach Google”. ustawienie.

Wystarczy wybrać opcję „ zamień ” w ustawieniach wyświetlania czcionek , a także włączyć preconnect . Włączenie opcji wstępnego łączenia podpowie i poinstruuje przeglądarkę, aby wstępnie połączyć się z Google Fonts podczas ładowania CSS, oszczędzając czas ładowania.

Używaj wtyczek i narzędzi tylko na niezbędnych stronach za pomocą narzędzia Asset CleanUp Pro.

W tej chwili dokonaliśmy kilku optymalizacji za pomocą narzędzia Asset CleanUp, aby poprawić szybkość ładowania witryny – jednak w tej wtyczce dostępnych jest kilka niesamowitych funkcji, o których nie wiemy.

Funkcje te mogą obejmować ładowanie wtyczek w określonym poście na stronie.

W prostych słowach załóżmy, że korzystasz z „ Formularza kontaktowego 7 ” (najpopularniejszej wtyczki do tworzenia formularza kontaktowego) w swojej witrynie i używasz go na określonej „ stronie kontaktowej ” w swojej witrynie.

Ale głównym problemem z tą wtyczką jest to, że ładuje swój plik CSS i JS w sekcji <head> Twojej witryny, a tym samym zwiększa dwa dodatkowe żądania na wszystkich stronach (w tym na stronie kontaktowej) – ale potrzebujemy go tylko do załadowania konkretną stronę, czyli stronę kontaktową .

Na przykład; Jeśli zaznaczysz Kupon VPN, używam wtyczki „Formularz kontaktowy 7” na stronie Kontakt i na innych postach/stronach, takich jak „Najlepsze filmy animowane”, nie używam żadnego formularza kontaktowego – ale nadal ładuje CSS i JS wtyczki Contact Form 7 na tych stronach (możesz sprawdzić na obrazku poniżej).

Ale jak możesz rozwiązać ten problem?

Rozwiązanie jest bardzo proste, wystarczy opublikować post lub stronę, a następnie ponownie kliknąć opcję „ Edytuj post/stronę ”, a wtedy ta wtyczka załaduje wszystkie pliki w panelu postów WordPress.

A następnie zwolnij określony plik CSS i JS z opcji Asset CleanUp.

Na przykład; Jeśli tworzę stronę „ Skontaktuj się z nami ” w mojej witrynie za pomocą wtyczki „ Formularz kontaktowy 7 ”, opublikuję stronę, gdy będzie gotowa, a następnie ponownie kliknę opcję „ Edytuj stronę ” .

Po kliknięciu strony Edytuj pokaże ona wszystkie pliki, które są żądane lub ładowane, gdy ktoś ładuje stronę kontaktową.

Teraz wprowadzimy pewne zmiany w ustawieniach i usuniemy CSS i JS formularza kontaktowego 7 ze wszystkich stron z wyjątkiem strony Kontakt (możesz wykonać te same ustawienia, które zrobiliśmy na powyższym obrazku).

3.3 Optymalizuj obrazy na stronie internetowej

Jak wiesz, Optymalizacja Obrazu jest jednym z najważniejszych czynników spowalniających szybkość Twojej witryny. Jest to główne źródło spowalniania witryn, dlatego zawsze musimy skompresować nasze obrazy przed przesłaniem ich do Twojej witryny.

Nawet jeśli sprawdzisz którykolwiek z naszych postów na blogu TheGuideX,

…obrazy są cięższe niż cokolwiek innego na mojej stronie.

Dlatego optymalizacja obrazów powinna prowadzić do najbardziej znaczącej poprawy szybkości witryny i tak się dzieje.

Wszyscy wiemy, że obrazy są niezbędne dla każdej strony internetowej, ale nie zaleca się używania obrazów o znacznie wysokiej jakości. Dlatego musimy upewnić się, że przesyłany przez nas obraz jest odpowiednio zoptymalizowany.

Powinieneś skompresować obrazy w taki sposób, aby nie obniżyć ogólnej jakości obrazu, a jedynie zmniejszyć jego rozmiar.

W tym celu stworzyłem witrynę poświęconą optymalizacji obrazu i możesz użyć tej witryny do optymalizacji obrazów przed przesłaniem ich do WordPressa.

Aby właściwie zoptymalizować obrazy, musisz wykonać te pięć kroków;

Użyj prawidłowego formatu obrazu

Dwa najczęściej używane typy obrazów w Internecie to JPG i PNG.

I nie są takie same;

Przykład obrazu JPEG

Szczegóły obrazu
Format obrazu	JPEG
Rozmiar obrazu	2.893kb
Zoptymalizowany rozmiar obrazu	607kb
Kompresja obrazu % wiek	79%
Opis obrazu	Złożony obraz z dużą ilością informacji o kolorze.

Przykład obrazu PNG

Szczegóły obrazu
Format obrazu	PNG
Rozmiar obrazu	716kb
Zoptymalizowany rozmiar obrazu	173kb
Kompresja obrazu % wiek	75%
Opis obrazu	Prosty obraz z niewielką ilością informacji o kolorze

W powyższych przykładach pokazałem jeden obraz JPG z 79% kompresją obrazu i obraz PNG o podobnym poziomie kompresji – ale skompresowany rozmiar obrazu JPEG jest znacznie większy niż oryginalny rozmiar obrazu PNG ze względu na jego złożoność i dużo informacji o kolorze.

Dlatego następnym razem, gdy przesyłasz obrazy do swojej witryny, upewnij się, że używasz prawidłowego formatu obrazu.

3.4 Optymalizacja bazy danych za pomocą WP-Optimize

Na razie zoptymalizowaliśmy naszą witrynę za pomocą WP Rocket i Asset CleanUp, ale jeśli nadal uważasz, że załadowanie Twojej witryny zajmuje dużo więcej czasu, możesz zoptymalizować bazę danych i usunąć wersje postu.

Czasami, gdy aktualizujemy zawartość naszej strony internetowej lub gdy piszemy coś w Edytorze WordPress, automatycznie zapisuje on wersję posta w naszej bazie danych.

Optymalizacja bazy danych jest więc kolejnym bardzo pomocnym i ważnym procesem zwiększania szybkości witryny.

Aby to zrobić, użyjemy darmowej wtyczki WordPress o nazwie „ WP-Optimize”. Wtyczka została opracowana przez Team Updraft, który opracował również niesamowitą wtyczkę, którą polecam do tworzenia kopii zapasowych Twojej witryny.

Aby skorzystać z tej wtyczki, po prostu zainstaluj wtyczkę „WP-Optimize” z repozytorium WordPress.

Po zainstalowaniu wtyczki zalecam wykonanie kopii zapasowej bazy danych, a następnie przejście do „ WP-Optimize ”>„ Baza danych”. A kiedy jesteś na stronie bazy danych, kliknij „ Uruchom wszystkie wybrane optymalizacje ”, a rozpocznie się optymalizacja bazy danych.

Optymalizacja bazy danych zajmie kilka minut, a po jej zakończeniu usunie wszystkie wersje postów, komentarze spamowe, oczekujące komentarze, trackbacki, posty usunięte i automatyczne wersje robocze.

Nie martw się!

Twoje posty i wersje robocze pozostaną bezpieczne. Nie usunie żadnego z Twoich opublikowanych ani wersji roboczych postów w Twojej witrynie, ale usunie tylko poprawki. Więc jesteś bezpieczny.

3.5 Nie używaj tych wtyczek w swojej witrynie

Niektóre wtyczki mogą spowolnić działanie Twojej witryny i powodować wysokie zużycie procesora. Zawsze będę sugerować, abyś nie używał ciężkich wtyczek na swojej stronie.

Te wtyczki mogą obejmować;

Na tym etapie użyliśmy kilku wtyczek WordPress, aby skutecznie zoptymalizować naszą witrynę, a jeśli sprawdzisz wynik GTmetrix i Pingdom swojej witryny, zobaczysz natychmiastowy wzrost wydajności.

Ale optymalizacja prędkości to nie tylko optymalizacja strony za pomocą niektórych wtyczek lub szybkiego ładowania motywu WordPress.

Jest o wiele więcej rzeczy do zrobienia, jeśli chcesz zwiększyć ogólną wydajność swojej witryny. Na przykład korzystanie z sieci CDN w witrynie i udostępnianie plików, obrazów lub danych z najbliższego dostępnego serwera.

4. Korzystanie z sieci dostarczania treści (CDN)

Zanim wyjaśnię, w jaki sposób możesz wykorzystać CDN do zwiększenia wydajności swojej witryny, najpierw dowiemy się, czym jest CDN i jak może pomóc w poprawie wydajności witryny.

Czym więc jest CDN lub sieć dostarczania treści?

Według Akamai, CDN (Content Delivery Network) to wysoce rozproszona platforma serwerów, która pomaga zminimalizować opóźnienia w ładowaniu zawartości strony internetowej poprzez zmniejszenie fizycznej odległości między serwerem a użytkownikiem. Dzięki temu użytkownicy na całym świecie mogą oglądać te same wysokiej jakości treści bez długiego czasu ładowania.

Jak więc może pomóc w zwiększeniu wydajności serwisu?

Odpowiedź to; Za każdym razem, gdy odwiedzasz witrynę, wysyła żądania do zdalnego serwera, a ten serwer odpowiada z powrotem danymi. Transmisja danych odbywa się przez publiczny Internet i powoduje pewne opóźnienia.

A jeśli zmniejszymy odległość Twojej lokalnej maszyny od serwera, to z pewnością zmniejszy to czas opóźnienia i zwiększy wydajność witryny.

Tak więc teraz zrozumieliśmy wykorzystanie CDN na naszej stronie internetowej i jak istotne jest zwiększenie ogólnej wydajności naszej strony internetowej.

Teraz omówimy niektóre CDN, aby zwiększyć wydajność naszej witryny;

4.1 Użyj Cloudflare na stronie internetowej

Pierwszym CDN, z którego większość ludzi korzysta na swojej stronie internetowej, jest Cloudflare.

Cloudflare zbudował rozległą globalną sieć centrów danych, które buforują zawartość statyczną bliżej użytkowników i dostarczają dynamiczną zawartość za pośrednictwem najszybszych i najbardziej niezawodnych prywatnych łączy szkieletowych

Konfiguracja Cloudflare w nazwie domeny jest bardzo łatwa; wystarczy zmienić serwery nazw z obecnego hosta na Cloudflare, a następnie możesz łatwo zarządzać swoim DNS bezpośrednio z Cloudflare.

Gdy Cloudflare jest aktywny w Twojej nazwie domeny, zaloguj się na swoje konto Cloudflare, a następnie wybierz swoją witrynę z pulpitu nawigacyjnego.

Teraz przejdź do strony SSL/TLS i ustaw SSL na Flexible . Możesz także ustawić ustawienia SSL na Pełne – ale przed ustawieniem ustawienia SSL na Pełne, upewnij się, że Twoja witryna korzysta już z SSL.

Po skonfigurowaniu SSL w swojej witrynie przejdź do ustawień certyfikatu Edge w SSL i aktywuj „ Zawsze używaj HTTPS”, „ TLS 1.3 ” i włącz „ Automatyczne przepisywanie HTTPS”.

Teraz skonfigurowaliśmy SSL na naszej stronie internetowej za pomocą SSL. Po tym kroku kliknij Ustawienia prędkości , a następnie kliknij Optymalizacja w ustawieniach Prędkości .

Gdy znajdziesz się na stronie Optymalizacja w Speed, włącz Auto Minifikację dla JavaScript, CSS i HTML.

A następnie włącz kompresję Brotli w swojej witrynie. Brotli to algorytm kompresji opracowany przez Google i najlepiej nadaje się do kompresji tekstu.

Oto kilka funkcji korzystania z kompresji Brotli w Twojej witrynie;

Po włączeniu kompresji Brotli w swojej witrynie możesz przewinąć w dół do opcji Rocket Loader , a następnie ją włączyć. Domyślnie to ustawienie jest włączone, ale czasami ta wtyczka koliduje z wtyczką WP Rocket i może powodować problemy.

Teraz przechodzimy do ustawień pamięci podręcznej w Cloudflare, a następnie ustawiamy poziom buforowania odpowiednio na „ Standard ” i TTL pamięci podręcznej przeglądarki na „ 1 rok ”.

Po włączeniu tych ustawień przewiń w dół do opcji Zawsze online i kliknij, aby ją włączyć. Dzięki tym ustawieniom, jeśli w jakikolwiek sposób Twój serwer ulegnie awarii, Cloudflare będzie obsługiwać statyczne strony Twojej witryny z ich pamięci podręcznej.

Więcej informacji o zalecanych ustawieniach znajdziesz tutaj.

Teraz najważniejszą rzeczą jest skonfigurowanie reguł strony na naszym blogu za pomocą Cloudflare.

Aby to zrobić, otwórz ustawienia reguł strony w Cloudflare. Dzięki bezpłatnemu planowi Cloudflare możemy tworzyć tylko reguły 3-stronicowe, a jeśli chcesz utworzyć więcej niż 3-stronicowe reguły, musisz kupić więcej reguł stron w Cloudflare.

Jak widać na powyższym obrazku, stworzyłem regułę 3 stron na mojej stronie TheGuideX, aby poprawić jej wydajność. Te 3-stronicowe zasady są jedną z najważniejszych zasad, które pomagają zoptymalizować naszą stronę internetową.

Teraz pierwszą rzeczą jest kliknięcie przycisku Utwórz regułę strony wyświetlającego się w kolorze niebieskim. Po kliknięciu otworzy się strona, z której możemy utworzyć naszą pierwszą regułę strony.

Jak widać na powyższym obrazku, w pierwszym polu musimy wpisać adres URL strony, na której musimy zastosować ustawienia Page Rule, a następnie musimy wybrać ustawienia z menu rozwijanego. Gdy skończymy, kliknij przycisk Zapisz i wdróż , aby włączyć te reguły strony.

Zasada pierwszej strony dla Cloudflare

Więc pierwsza zasada brzmi;

• URL : example.com/wp-login.php
• Reguła (do wyboru z listy rozwijanej) : Poziom bezpieczeństwa, a następnie wybierz Wysoki lub Jestem atakowany

Przykład;

Korzystanie z reguły tej strony

Ta reguła strony dodaje dodatkową warstwę bezpieczeństwa do twojego pliku wp-login.php. Za każdym razem, gdy ktoś spróbuje zalogować się do pulpitu WordPress, najpierw sprawdzi integralność przeglądarki i zapobiegnie atakom brute force na Twoją witrynę.

Możemy również użyć kilku wtyczek, aby chronić naszą witrynę przed atakami Brute force, ale tego typu wtyczki wymagają ogromnych zasobów witryny i mogą spowolnić Twoją witrynę. Dlatego używamy Cloudflare, aby zapobiec złośliwym próbom naszej strony logowania.

Zasada drugiej strony dla Cloudflare

Druga zasada brzmi;

• URL : example.com/wp-admin/*
• Reguła (do wyboru z listy rozwijanej) : Wyłącz wydajność

Przykład;

Korzystanie z reguły tej strony

Ta reguła strony wyłączyła wydajność w folderze wp-admin. Wyłączenie go spowoduje wyłączenie Minifikacji, Ładowania rakiet, Mirage i Polski po stronie zaplecza Twojej witryny.

Reguła trzeciej strony dla Cloudflare

Trzecia zasada brzmi;

• URL : example.com/wp-content/*
• Zasada 1 : TTL pamięci podręcznej przeglądarki => rok
• Zasada 2 : Zawsze online => Włącz
• Zasada 3 : Poziom pamięci podręcznej => Cache wszystko
• Zasada 4 : TTL pamięci podręcznej krawędzi => miesiąc

Przykład;

Korzystanie z reguły tej strony

Reguła trzeciej strony działa w folderze wp-content i buforuje wszystko w folderze wp-content, a pamięć podręczna przeglądarki wygasa TTL to czas, w którym Cloudflare instruuje przeglądarkę odwiedzającego, aby buforowała zasób.

Do czasu upływu czasu przeglądarka ładuje zasoby z lokalnej pamięci podręcznej, co pomaga przyspieszyć działanie serwisu.

A Edge Cache TTL to ustawienie, które kontroluje, jak długo serwery Cloudflare będą buforować zasób przed żądaniem nowej kopii.

Jeśli zaimplementowałeś te same ustawienia w swojej witrynie za pomocą Cloudflare, istnieje wiele szans, że Twoja witryna zacznie dobrze działać w GTmetrix i innych narzędziach do testowania szybkości strony.

Do tej pory udostępniliśmy tylko jeden CDN, aby poprawić ogólną wydajność naszej witryny. Teraz udostępnimy jeszcze kilka CDN, które mogą współpracować z Cloudflare CDN.

4.2 Użyj ImageKit do optymalizacji obrazu

Teraz użyjemy ImageKit do optymalizacji naszych obrazów w czasie rzeczywistym. Jest to jedna z sieci CDN do optymalizacji i transformacji obrazu w czasie rzeczywistym, która pomaga stronie internetowej zmniejszyć rzeczywisty rozmiar zdjęć bez faktycznego wpływu na widoczną wizualną jakość obrazu.

Jedną z najlepszych rzeczy, które najbardziej mi się podobały w tym CDN, jest szybka integracja z aplikacją taką jak WordPress. Oferuje rozsądne ceny i uważam, że jest to znacznie lepsza opcja do wyboru lepszej optymalizacji obrazu.

ImageKit oferuje trzy rodzaje cen CDN i możesz je wybrać zgodnie z wymaganiami Twojej witryny (korzystam z darmowego planu Forever na mojej stronie).

Po wybraniu ceny i zarejestrowaniu się na ich platformie musisz utworzyć Punkt końcowy . Po utworzeniu punktu końcowego otrzymasz adres URL CDN (sprawdź na obrazku poniżej)

Jak widać, stworzyłem adres URL CDN oparty na serwerze WWW dla nazwy domeny TheGuideX . Mój adres URL CDN to https://ik.imagekit.io/tgx/

Gdy otrzymamy adres URL ImageKit, musimy go włączyć w naszej witrynie WordPress. Aby to zrobić, musimy otworzyć ustawienie WP Rocket CDN, odwiedzając Panel administracyjny WordPressa > Ustawienia > WP Rocket > CDN,

Gdy już jesteśmy na stronie CDN, musimy włączyć CDN dla naszej witryny, a następnie w polu wpisać adres URL ImageKit i w ustawieniu „ zarezerwować dla” zmień go na obrazy.

Gdy to zrobisz, WP Rocket przepisze tylko adres URL obrazów z nazwy https://theguidex.com na https://ik.imagekit.io/tgx. Twoje obrazy zaczną się ładować z adresu URL CDN w czasie rzeczywistym.

Po wprowadzeniu tych zmian wprowadzimy teraz kilka poprawek optymalizacji w ImageKit, aby uzyskać lepszą kompresję i dostarczanie obrazów.

W przypadku tych poprawek optymalizacji ponownie logujemy się do pulpitu ImageKit Dashboard, a następnie klikamy Ustawienia obrazu.

Gdy znajdziesz się na stronie Ustawienia obrazu , możesz dostosować ustawienia do swoich potrzeb.

Jak widać, włączyłem „ Użyj najlepszego formatu do dostarczania obrazu” , a także włączyłem jakość obrazu do 70%.

Jeśli chcesz, możesz również włączyć ustawienia Oszczędzania danych. Jeśli użytkownik Twojej witryny korzysta z trybu Oszczędzania danych w swojej przeglądarce, ImageKit użyje różnych metod, w tym obniżenia jakości i braku obsługi automatycznego DPR, dzięki czemu obrazy będą lżejsze i szybciej się ładują.

A obok ustawień Optymalizacji dostaniesz opcję Optymalizacji sieci. W ustawieniach optymalizacji sieci otrzymasz opcję wyświetlania obrazów o jakości zgodnej z typem sieci użytkownika.

Przeważnie ludzie korzystają z urządzeń 4G. Dokładnie przeanalizuj swoje dane analityczne, aby dowiedzieć się więcej o typie sieci. Jeśli dowiesz się, że ludzie korzystają z wolniejszej sieci, aby uzyskać dostęp do Twojej witryny, możesz ręcznie ustawić jakość dostarczania obrazu tutaj.

Są to więc najważniejsze ustawienia dla ImageKit, ale możesz zrobić o wiele więcej ustawień na ich stronie Ustawienia obrazu .

Ustawienia te mogą obejmować ręczne ustawianie wysokości i szerokości obrazu dla urządzeń mobilnych i stacjonarnych, zapisywanie kopii obrazów itp., ale nie będziemy omawiać tych ustawień w tym poście i są one dla nas bezużyteczne.

Teraz przejdziemy do trzeciej części korzystania z CDN na naszej stronie internetowej. W tym kroku pokażemy Ci, jak zaimplementować i używać Cloudfront na naszej stronie internetowej dla JS i CSS.

4.3 Użyj Amazon Cloudfront dla JS i CSS

Jak wiecie, Amazon CloudFront jest jednym z najpopularniejszych CDN, jakie kiedykolwiek otrzymaliście, a największe na świecie strony internetowe polegają na usłudze Amazon CloudFront CDN.

Mają 61 serwerów rozmieszczonych na całym świecie, które są w stanie szybciej przesyłać i dostarczać obrazy stron internetowych w określonych lokalizacjach.

Najpierw kliknij „ Rozpocznij z Amazon Cloudfront” i zarejestruj się na ich stronie internetowej przy użyciu istniejącego identyfikatora Amazon ID lub możesz również użyć nowego identyfikatora e-mail, aby zarejestrować się na ich platformie.

Po zalogowaniu się na konto Amazon AWS wyszukaj Cloudfront (możesz również kliknąć tutaj, aby bezpośrednio odwiedzić stronę Cloudfront), a następnie kliknij „ Utwórz dystrybucję” , a następnie wybierz usługę internetową i kliknij „ Rozpocznij”.

W polu Nazwa domeny Origin wprowadź nazwę swojej domeny. W tym przypadku moja nazwa domeny to https://theguidex.com, więc wpisuję theguidex.com (bez www lub https).

Obok tego musisz podać ścieżkę pochodzenia , ścieżkę do folderu wp-content, a następnie wybrać TLSv1 w protokole SSL i wybrać „ Dopasuj Viewer” w protokole pochodzenia.

Teraz przewiń w dół do „ Ustawienia dystrybucji”, a następnie wybierz „ Użyj wszystkich lokalizacji brzegowych” w klasie cenowej i ustaw domyślne ustawienia CloudFront SSL.

Możesz także ustawić wspieraną wersję HTTP i zmienić ją na „HTTP/2, HTTP/1.1, HTTP/1.0”. Po wykonaniu tych ustawień kliknij „ Utwórz dystrybucję”.

Ponownie przejdź do strony dystrybucji Cloudfront i sprawdź, czy twoja dystrybucja jest poprawnie włączona (pokaże się zielonym tekstem pod sekcją stanu).

Po włączeniu kliknij identyfikator swojej domeny źródłowej.

Po kliknięciu identyfikatora dystrybucji otworzy się podobna strona, którą pokazałem na powyższym obrazku. Skopiuj nazwę domeny (pokazaną w czerwonym polu) i wklej ją w sekcji CDN WP Rocket.

Po wklejeniu nazwy domeny w WP Rocket wybierz zarezerwowane dla => „ Javascript / CSS ”.

Teraz pomyślnie skonfigurowałeś AWS Cloudfront na swojej nazwie domeny.

Te ustawienia wystarczą, aby Twoja witryna zwiększyła wydajność w Google PageSpeed ​​Insight, GTmetrix i Pingdom. Możesz teraz zobaczyć natychmiastowy wzrost wydajności swojej witryny.

Jeśli jednak nie masz pewności, jak zwiększyć szybkość swojej witryny lub potrzebujesz usługi optymalizacji szybkości witryny, możesz skontaktować się ze mną na adres e-mail [chroniony e-mail] .

Do tej pory zrobiliśmy prawie wszystko, co możliwe, aby zoptymalizować szybkość naszej strony – ale jeśli jesteś zaawansowanym użytkownikiem, to dzielę się kilkoma innymi metodami, które pomogą Ci zwiększyć szybkość witryny.

Ale jeśli jesteś początkującym lub nie masz żadnej wiedzy technicznej, polecam skontaktować się ze wsparciem hostingowym w celu zarządzania tego rodzaju rzeczami.

Dostrajanie WordPressa pod kątem szybkości (zaawansowane)

W tej dopracowanej metodzie optymalizacji szybkości WordPress dzielimy się kilkoma zaawansowanymi wskazówkami, które działają niesamowicie, aby zoptymalizować szybkość Twojej witryny.

1. Użyj najnowszej wersji PHP

Tak więc pierwszą metodą optymalizacji witryny jest użycie najnowszej wersji PHP. Nowsze PHP 7 jest dwa razy szybsze od swoich poprzedników. To ogromny wzrost wydajności, z którego musi skorzystać Twoja witryna.

Dlaczego warto korzystać z najnowszej wersji PHP?

Jeśli nie wiesz, dlaczego używać najnowszej wersji PHP na swojej stronie, oto odpowiedź: WordPress jest napisany głównie w języku PHP, a PHP to język po stronie serwera.

Więc jeśli korzystasz z najnowszej wersji PHP na swojej stronie internetowej, możesz zwiększyć wydajność swojej witryny. Najnowsza i stabilna wersja PHP to v7.4; Używam nawet tej wersji PHP na tej stronie.

2. Ogranicz zmiany postów

Czasami zapominamy zoptymalizować naszą bazę danych za pomocą wtyczek takich jak WP-Optimize, a jak wspomniałem powyżej, kiedy pisałem ten post, zapisał on w mojej bazie ponad 40+ poprawek.

Czasami automatyczne zapisywanie tak wielu wersji może obniżyć wydajność Twojej witryny do najgorszego poziomu. Możesz łatwo ograniczyć liczbę poprawek, które WordPress utrzymuje dla każdego artykułu.

Dodaj ten wiersz kodu do pliku wp-config.php.

 zdefiniuj( 'WP_POST_REVISIONS', 4 );

3. Wyłącz Hotlinking i wysysanie treści

Czasami, jeśli tworzymy wysokiej jakości treści w naszej witrynie, zostają one skradzione za pomocą RSS, a czasami inne witryny wyświetlają Twoje obrazy bezpośrednio ze swoich adresów URL w Twojej witrynie, zamiast przesyłać je na własne serwery.

W ten sposób szkodzi Twojej witrynie, ponieważ kradli przepustowość Twojej witryny, a Ty nie uzyskujesz z tego żadnych korzyści.

Tak więc w tym przypadku musimy użyć kodu .htaccess, aby zablokować hotlinkowanie obrazów, aby zaoszczędzić zasoby witryny i przepustowość. Kod jest następujący;

 #wyłącz hotlinking obrazów z zabronioną lub niestandardową opcją obrazu
RewriteEngine włączony
Przepisz Warunek %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?theguidex.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
Przepisz regułę \.(jpg|jpeg|png|gif)$ – [NC,F,L] 

Uwaga: Nie zapomnij zmienić theguidex.com na własną nazwę domeny.

Możesz także wyłączyć kanał RSS, jeśli nie używasz go w swojej witrynie.

4. Użyj zapory internetowej na poziomie DNS

Innym najważniejszym czynnikiem optymalizacji prędkości jest użycie zapory internetowej na poziomie DNS. Jeśli pamiętasz, stworzyłem regułę strony Cloudflare na theguidex.com/wp-login.php, aby zwiększyć bezpieczeństwo mojej strony logowania.

Cóż, używam również wersji premium Wordfence na mojej stronie internetowej. Jest to fantastyczna wtyczka i pomaga blokować zagrożenia, ataki typu brute force w czasie rzeczywistym, ale bez wątpienia; jest to ciężka wtyczka, a zwalczanie zagrożeń wymaga wielu zasobów mojej witryny.

Aby zapobiec wysokiemu zużyciu zasobów procesora, używam zapór sieciowych na poziomie DNS w mojej witrynie. Upewnij się więc, że używasz zapór sieciowych na poziomie DNS, aby poprawić wydajność swojej witryny i zatrzymać zagrożenia na poziomie DNS.

5. Ogranicz połączenia z bazą danych

Ten krok jest nieco bardziej złożony i wymaga wiedzy technicznej, aby zredukować wywołania bazy danych z motywu. Istnieje wiele źle zakodowanych motywów, które nie są zgodne z wytycznymi WordPressa i wykonują zbyt wiele niepotrzebnych wywołań do bazy danych.

Te motywy mogą spowolnić Twoją witrynę i ją zmniejszyć, zmniejszyć liczbę wywołań bazy danych i zwiększyć ogólną wydajność witryny.

Nawet niektóre dobrze zakodowane i dobrze zoptymalizowane motywy powodują niepotrzebne wywołania bazy danych w celu uzyskania podstawowych informacji z bazy danych. Utwórz więc motyw potomny i statycznie dodaj te podstawowe informacje, aby zmniejszyć liczbę wywołań bazy danych.

6. Podziel komentarze na strony

Jeśli otrzymujesz dużo komentarzy na swoim blogu, to przede wszystkim gratulacje! To świetny znak budowania świetnej publiczności.

Ale minusem jest to, że wczytanie posta ze wszystkimi komentarzami może spowolnić prędkość.

W takim przypadku możesz podzielić komentarze na różne strony, aby jeszcze bardziej zaimprowizować szybkość swoich stron internetowych. Proces jest prosty, po prostu przejdź do Ustawienia » Dyskusja i zaznacz pole obok opcji „ Podziel komentarze na strony ”.

7. Sprawdzanie kompresji GZIP

Kompresja GZIP to kolejny najważniejszy czynnik zwiększający szybkość strony internetowej. Jeśli używasz wtyczki wp rocket na swojej stronie, automatycznie włącza ją dla Ciebie.

Kompresja GZIP jest włączona po stronie serwera i pomaga skompresować rozmiar plików HTML, JS i CSS. Nie będzie działać na obrazach, ponieważ są one już skompresowane w inny sposób.

Możesz użyć niektórych narzędzi, takich jak Sprawdź kompresję GZIP, aby sprawdzić, czy Twoja witryna używa GZIP, czy nie.

Jeśli Twoja witryna nie używa GZIP, możesz użyć tego kodu w pliku .htaccess, aby włączyć GZIP w swojej witrynie – ale upewnij się, że korzystasz z serwera Apache w swojej witrynie przed użyciem tego kodu.

 # Kompresuj HTML, CSS, JavaScript, tekst, XML i czcionki
  AddOutputFilterByType DEFLATE aplikacja/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE czcionka/opentype
  AddOutputFilterByType DEFLATE czcionka/otf
  AddOutputFilterByType DEFLATE czcionka/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE obraz/ikona x
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE tekst/zwykły
  AddOutputFilterByType DEFLATE text/xml

  # Usuń błędy przeglądarki (wymagane tylko w przypadku naprawdę starych przeglądarek)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Dołączanie nagłówka Vary User-Agent

8. Użyj pobierania wstępnego

Pobieranie zasobów z wyprzedzeniem to kolejna świetna technika optymalizacji, która zwiększa wydajność witryny. Możemy go użyć, aby poinformować przeglądarkę, jakich zasobów może potrzebować użytkownik w przyszłości — zanim jeszcze ich potrzebować.

Jako programista znamy aplikacje lepiej niż przeglądarka. Dlatego używamy tych informacji, aby informować przeglądarkę o podstawowych zasobach.

Na przykład,

 < link rel = " prefetch " href = " image.png " >

9. Ogranicz użycie czcionek internetowych

Czasami, aby tekst był chwytliwy, używamy kilku czcionek internetowych – ale największą wadą używania zbyt wielu czcionek internetowych jest to, że wydłuża to czas renderowania strony. Dodaje to również dodatkowe żądanie HTTP do zasobów zewnętrznych. I ogólnie rzecz biorąc, chcesz ograniczyć żądania HTTP do minimum.

Jak widać na powyższym obrazku, na mojej stronie używam tylko czterech czcionek internetowych, których faktycznie potrzebuję. Powinieneś również upewnić się, że Twój blog nie używa mnóstwa niepotrzebnych czcionek internetowych, aby skrócić czas renderowania Twojej strony.

Teraz twoja kolej

Wśród różnych sposobów optymalizacji blogów WordPress, podzieliłem się kilkoma technikami optymalizacji, których osobiście używam na mojej własnej stronie internetowej w celu optymalizacji szybkości. Metody te są proste i łatwe do wdrożenia.

A teraz nadszedł czas, aby zainwestować godzinę w poprawę szybkości witryny WordPress.

I zaufaj mi, jeśli zoptymalizujesz swojego bloga dokładnie tymi metodami, wydajność Twoich stron wzrośnie, a także poprawi się ogólny czas ładowania strony.

Mam nadzieję, że ten artykuł zawiera jasne wyjaśnienie niektórych skutecznych sposobów na zwiększenie szybkości bloga WordPress. Jeśli uznasz ten artykuł za pomocny, daj nam znać w sekcji komentarzy. A jeśli używasz innej metody optymalizacji swojej witryny, również daj mi znać w sekcji komentarzy poniżej.