Czas ładowania strony zawsze będzie problemem dla twórców stron internetowych, zwłaszcza gdy odkryjesz nowe sposoby na zaimponowanie odwiedzającym niestandardowymi zdjęciami, dynamiczną treścią i innymi filmami.
Dzieje się tak dlatego, że po dodaniu każdego nowego zasobu witryna musi generować dodatkowe żądania HTTPS, aby komunikować się z przeglądarkami odwiedzających. A te żądania HTTPS stopniowo spowolnią Twoją witrynę … sposób wayyyy na dół.
W tym przewodniku omówimy, jakie są żądania serwera HTTPS, narzędzia, których należy użyć, aby je śledzić, a następnie sposoby ograniczania tych żądań w WordPress. Czytaj dalej, lub Skocz do przodu, korzystając z tych linków:
Chcesz przyspieszyć swoją witrynę? Sprawdź nasz szczegółowy przewodnik ” The Ultimate Mega Guide to Speeding Up WordPress.”Czytaj więcej
Czym są żądania serwera HTTP?
Nie ma nic ważniejszego niż doświadczenie użytkownika. To właśnie inspiruje odwiedzających do subskrybowania Twojego bloga, kupowania produktów lub sięgania po więcej informacji na temat Twoich usług.
Wszystko, co naraża to doświadczenie-nawet jeśli jest to tylko strona internetowa, która trwa kilka sekund za długo, aby załadować—może zagrozić współczynnikowi konwersji.
Oto, co musisz wiedzieć o żądaniach serwera HTTPS i dlaczego tak się dzieje:
Za każdym razem, gdy ktoś odwiedza Twoją stronę… Za każdym razem, gdy ktoś odwiedza jeden Twoich stron internetowych (i pomyśl o tym, ile ich jest w Twojej witrynie), ich przeglądarka wysyła żądanie do twojej witryny:
“Hej, uh, możesz wysłać mi wszystkie te pliki ze swojej strony, abym mógł podzielić się tym z potencjalnym gościem / czytelnikiem/klientem?”
Następnie obowiązkiem witryny jest przesłanie KAŻDEGO pliku, z którego składa się witryna. Obejmuje to tekst, obrazy (czyli zazwyczaj większość plików), osadzenia wideo, pliki CSS i JavaScript, a nawet obrazy Gravatar, które pojawiają się w kanałach komentarzy. I każdy plik otrzymuje oddzielny żądanie serwera.
Po przetworzeniu wszystkich żądań serwera i przesłaniu plików do przeglądarki, Twoja witryna może zostać załadowana na ekrany odwiedzających. Ale jeśli Twoja witryna WordPress ma dziesiątki, a nawet setki plików do wysłania do przeglądarek odwiedzających, jak myślisz, co to robi z czasem ładowania strony?
Nic dobrego.
A to staje się wykładniczo gorsze, gdy Twoja witryna rośnie popularność i otrzymuje jednoczesne żądania serwera HTTPS. Przykład: 40% ludzi traci cierpliwość wobec strony internetowej, jeśli muszą czekać dłużej niż trzy sekundy na załadowanie strony. Kissmetrics informuje również, że jednosekundowe opóźnienie w odpowiedzi na stronę, gdy użytkownik angażuje się w nią, może kosztować do 7% konwersji.
Musisz więc znaleźć sposób na ograniczenie liczby plików do przesłania do przeglądarki, jeśli chcesz, aby te czasy ładowania pozostały dynamiczne.
Rozwiązaniem nie jest użycie mniejszej liczby obrazów lub dynamicznej zawartości lub tak Minimalne z projektem, że jest to przytłaczająco nudne. Podczas gdy rozmiar plików i ilość plików ma znaczenie, istnieją sposoby obejścia tego w WordPress.
Na szczęście nie ma potrzeby zgadywać. To nie jest tak, że Twoi goście widzą biały ekran śmierci, a ty nie masz pojęcia, co go spowodowało. Istnieje wiele narzędzi, które pomogą Ci śledzić źródło czasu opóźnienia w czasie ładowania witryny.
Jeje to jedne z bardziej niezawodnych (i darmowych) :
Narzędzia Programistyczne Google Chrome
Jeśli chcesz dogłębnie przyjrzeć się, jak długo każdy element i plik działa w Twojej witrynie WordPress, poświęć chwilę na otwarcie go w oknie przeglądarki Chrome. Tam przejdź do zakładki Ustawienia o nazwie narzędzia programistyczne.
Po prawej stronie ekranu otworzy się nowy panel. Kliknij kartę Sieć, a stamtąd będziesz mógł przejrzeć, co dzieje się na twojej stronie.
Możesz nawet zagłębić się w czas poszczególnych elementów, aby sprawdzić, czy jest jedna rzecz, która trzyma wszystko inne.
Google PageSpeed Insights
Oczywiście nie jest to jedyne narzędzie dostępne od Google, które pomaga wykrywać problemy z żądaniami serwera HTTPS. Idealnie, jeśli używasz narzędzi programistycznych, powinieneś mieć w swoim arsenale również informacje PageSpeed.
Po uruchomieniu witryny za pomocą narzędzia otrzymasz wyniki zarówno dla wydajności mobilnej witryny, jak i pulpitu.
Każda z tych ocen zapewni Ci wynik na 100 pod względem tego, jak dobrze działa, a następnie da ci wskazówki, jak zoptymalizować witrynę w celu poprawy wydajności.
GTmetrix
GTmetrix to kolejne narzędzie do oceny prędkości strony, które zapewni Ci wynik wydajności Twojej witryny.
Jednak sposób, w jaki gtmetrix radzi sobie z tym, jest nieco bardziej wszechstronny—i uspokajający—niż Google. Tak więc, chociaż możesz zobaczyć wynik, który jest w kolorze żółtym lub czerwonym (co nie jest dobre), możesz najechać kursorem na każdy z punktów danych, aby zobaczyć, jakie są średnie wyniki i czasy ładowania. Da to bardziej realistyczny obraz tego, jak dobrze lub źle działa Twoja strona.
W ocenie GTmetrix otrzymasz standardowe wskazówki dotyczące optymalizacji strony pod kątem szybkości. Każda wskazówka będzie miała odpowiedni wynik obok, informując cię, gdzie zrobiłeś wszystko dobrze i gdzie są obszary do poprawy. A jeśli chcesz jeszcze więcej pomocy w tych słabszych obszarach, po prostu kliknij strzałkę w dół, a GTmetrix powie Ci, które pliki mogą przydać się do pracy.
Pingdom
Pingdom jest bardzo podobny do GTmetrix pod względem działania i dostarczanych informacji.
Główną różnicą między tymi dwoma narzędziami jest prawdopodobnie szybkość, z jaką dostarcza swoje wyniki. A interfejs jest trochę ładniejszy do obejrzenia.
” />
W przeciwnym razie otrzymasz prawie taką samą dokładną ocenę z obu stron—co jest dokładnie tym, czego potrzebujesz, jeśli próbujesz zaoszczędzić czas na ocenie problemów witryny i chcesz zawęzić to, co nie działa.
WebPageTest
Chciałbym też wrzucić tutaj WebPageTest.
Chociaż strona jest trochę bardziej clunkier i wyniki nie są tak łatwe do odczytania, jak niektóre inne narzędzia, podoba mi się wykres słupkowy używany do wyświetlania czasu ładowania KAŻDEGO pliku.
Chociaż na tej stronie może być przytłaczająca ilość danych i brak wskazówek, jak rozwiązać konkretne problemy ze spowolnieniem, nadal uważam, że wizualizacja cięższych elementów jest dobra. Zawsze możesz użyć tego w połączeniu z narzędziami programistycznymi Google, aby zawęzić problematyczne elementy w Twojej witrynie.
Zmniejszenie liczby żądań serwera HTTPS dla witryny WordPress
Teraz, gdy wiesz, jak zidentyfikować kłopotliwe obszary na swojej stronie, porozmawiajmy o tym, jak zdusić nadrzędny problem w zarodku: zmniejszenie liczby żądań serwera HTTPS dla Twojej witryny WordPress. Oto 9 rzeczy, które możesz teraz zrobić, aby utrzymać je w bardziej rozsądnej liczbie:
1. Usuń Niepotrzebne Obrazy
Nie mówię, że musisz zacząć poświęcać obrazy ze względu na ograniczenie żądań serwera HTTPS. Zamiast tego, myślę, że powinieneś skupić się na utrzymaniu biblioteki multimediów w super nieskazitelnej formie. Tak więc, jeśli są obrazy, których nie używasz—nawet jeśli masz nadzieję wykorzystać je w przyszłości—porzuć je. Nie robią nic poza dodawaniem dodatkowej wagi i żądaniami serwera, których Twoja witryna nie potrzebuje.
2. Usuń Inne Niepotrzebne Pliki
Możesz być zaskoczony tym, co odkryjesz w narzędziach oceny prędkości strony powyżej. Mogą ci powiedzieć, że to nie obrazy powodują problem, ale zamiast tego jest to coś w rodzaju wtyczki do kanałów społecznościowych lub osadzonego filmu. Jeśli na twojej stronie jest coś, co uznasz za niepotrzebne i powoduje wzdęcia, wyrzuć to. Obejmuje to wtyczki i Motywy Zainstalowane, ale nie są używane w tej chwili.
3. Zmniejsz Rozmiar Pliku
Kolejna rzecz, którą musisz zrobić? Pobierz wtyczkę WP Smush i zautomatyzuj kompresję obrazów witryny. Jeśli chcesz zachować te piękne, wysokiej rozdzielczości obrazy na swojej stronie i jakość nienaruszoną, musisz je skompresować.
4. Utwórz Sprite obrazu CSS
Korzystając z CSS, możesz utworzyć coś, co jest znane jako sprite obrazu CSS. Zasadniczo ten plik CSS połączy wszystkie pliki obrazów w jeden. Skorzystaj z tego przewodnika ze szkół W3, aby stworzyć swój własny.
5. Czy Leniwe Ładowanie
Słyszałeś kiedyś o leniwym ładowaniu? Jeśli nie, daj ten artykuł od Raelene Morey gander. Zasadniczo te wtyczki wysyłają żądania serwera tylko wtedy, gdy użytkownik przewija w dół do obrazu na stronie. Dzięki temu witryna nie będzie musiała wysyłać niepotrzebnych żądań serwera HTTPS do przeglądarki w celu uzyskania obrazów, których odwiedzający nigdy nie napotkają.
6. Ignoruj Irraktywa podwyższone
Wtyczka WP Asset Cleanup działa podobnie do leniwych wtyczek ładowania. Jednak zamiast skupiać się na opóźnianiu żądań serwera dla niezauważonych obrazów, Ta wtyczka wykrywa, gdy istnieje wtyczka, plik lub inny zasób, który istnieje w Twoim motywie, ale nie na tej konkretnej stronie. Następnie utrzymuje ten zasób przed załadowaniem i wykryciem na tej stronie; w ten sposób zmniejsza liczbę żądań serwera, które muszą wyjść do przeglądarek.
7. Użyj Koliber
Wtyczka buforująca jest absolutną koniecznością dla witryn WordPress-zwłaszcza jeśli polegasz na odwiedzających, którzy wracają do niej raz po raz. Dla tych powracających odwiedzających, naprawdę nie ma potrzeby przetwarzania tych samych żądań serwera, jeśli nic się nie zmieniło, a więc wtyczka buforująca usunie potrzebę tego.
Wtyczka WPMU DEV ‘ s Hummingbird jest idealna do tego. Oprócz zarządzania buforowaniem przeglądarki, zajmuje się również kompresją plików, CSS, JavaScript i minifikacją HTML, a także dodaje CDN, aby jeszcze bardziej przyspieszyć. Będziesz mieć również dostęp do raportów wydajności, jeśli nie masz ochoty korzystać z powyższych stron trzecich do oceny stanu szybkości witryny.
8. Łączenie plików CSS i JavaScript
Strony internetowe WordPress mają wiele plików CSS i JavaScript pływających wokół. Zamiast jednak wysyłać każdy plik jako oddzielne żądanie serwera do przeglądarek odwiedzających, możesz połączyć je w pojedynczy plik.
Pamiętaj tylko, że scalony plik CSS powinien znajdować się w nagłówku Twojej witryny. Twój plik JavaScript musi następnie przejść do stopki.
9. Ograniczanie Obrazów Zewnętrznych
Najczęstszym tego przykładem jest kanał komentarzy na blogu. Czy wiesz, że jeśli zostawisz domyślny system komentowania WordPress na miejscu, automatycznie użyje Gravatar (inna właściwość Automattic) do wciągania zdjęć i BIOSu komentujących? Te zdjęcia stają się dodatkowymi żądaniami serwera, które musisz wysłać do przeglądarek, a to może być niechlujne, jeśli prowadzisz popularny blog. Komentowanie wtyczek pomoże Ci uniknąć tego problemu.
Wrapping Up
Och, radości tworzenia stron WordPress. W WordPress można zrobić tak wiele, ale łatwo stracić z oczu to, jak wszystkie te piękne motywy, fajne wtyczki i niesamowite obrazy mogą stać się nadmierne w oczach przeglądarki, która po prostu próbuje to wszystko przetworzyć. Ale nie bój się: jeśli trzymasz narzędzie do monitorowania prędkości strony w pobliżu i przestrzegasz dziewięciu powyższych wskazówek dotyczących redukcji żądań serwera, wydajność witryny powinna być w porządku.
Tagi:
