7 sprawdzonych wskazówek, jak przyspieszyć ładowanie obrazów w celu szybszej witryny WordPress

Czy wiesz, że obrazy stanowią 63% rozmiaru przeciętnej strony internetowej? Oznacza to, że jeśli chcesz, aby Twoja witryna działała szybciej, jedną z najlepszych rzeczy, jakie możesz zrobić, jest przyspieszenie ładowania obrazów.

Szybsze strony internetowe mają:

• Szczęśliwsi odwiedzający, ponieważ długi czas ładowania frustruje użytkowników.
• Lepsze rankingi w wyszukiwarkach, ponieważ szybkość witryny jest czynnikiem rankingowym.
• Wyższe współczynniki konwersji, co oznacza więcej pieniędzy w Twojej kieszeni.

Ale jak faktycznie przyspieszyć ładowanie obrazów i czerpać korzyści z szybszej witryny WordPress? Cóż, postępuj zgodnie ze wskazówkami, które zaraz przedstawię . Zagłębmy się.

Zanim zaczniesz — uzyskaj punkt odniesienia do porównania

Nie martw się – pokażę Ci, jak przyspieszyć swoją witrynę i znajdujące się na niej obrazy. Ale chcę ci udowodnić, że to naprawdę działa. Zanim zaczniemy, poproszę cię o przysługę:

Sprawdź, ile czasu zajmuje ładowanie Twojej witryny w tej chwili. Oprócz bycia dowodem, że wiem, o czym mówię, stanowi to punkt odniesienia do porównania. Dzięki temu nie musisz zgadywać, czy zmiana rzeczywiście przyspieszyła działanie Twojej witryny. Będziesz mieć dane, które będziesz mieć pewność .

Ale jak sprawdzić, ile czasu zajmuje ładowanie witryny? OK, będziesz potrzebować stopera i szybkiego palca… czekaj, nie. To nie brzmi jak dobry pomysł. A co powiesz na automatyczny sposób?

Zamiast tego spróbuj tego — przejdź do Narzędzi Pingdom, wpisz adres URL swojej witryny i kliknij przycisk Rozpocznij test :

Następnie Pingdom splunie dokładnie, ile czasu zajęło załadowanie Twojej witryny.

Jakakolwiek liczba, którą otrzymasz, jest liczbą, której powinieneś się spodziewać po zakończeniu czytania tego postu!

Moja witryna z portfolio (przykład) jest już całkiem dobrze zoptymalizowana – mam nadzieję, że po zastosowaniu tych wskazówek czas ładowania strony będzie podobny…

1. Zmień rozmiar obrazów przed ich użyciem

Bez względu na to, jakiego motywu WordPress używasz, Twój motyw będzie mógł wyświetlać obrazy tylko do określonej maksymalnej szerokości. Oznacza to, że jeśli przesyłasz obrazy o wymiarach przekraczających maksymalną szerokość, spowalniasz witrynę na dwa sposoby:

• Zwiększasz rozmiar plików swoich obrazów, niż jest to konieczne.
• Sprawiasz, że przeglądarka internetowa odwiedzającego zmienia rozmiar obrazu.

Żadna z tych rzeczy nie jest dobra, jeśli chcesz przyspieszyć ładowanie obrazów! Aby rozwiązać ten problem, zawsze zmieniaj rozmiar zdjęć przed ich przesłaniem.

Jakich wymiarów należy użyć? Cóż, dokładne wymiary zależą od motywu WordPress, więc nie mogę dać ogólnej odpowiedzi. Ale z reguły szerokość w zakresie 700–800 pikseli jest odpowiednia dla większości motywów WordPress.

Jak zmienić rozmiar obrazów WordPress

Istnieją dwa proste sposoby zmiany rozmiaru obrazów WordPress.

Najpierw możesz zainstalować wtyczkę taką jak Imsanity, która automatycznie zmieni rozmiar obrazów przesyłanych do witryny WordPress.

Po drugie, jeśli wolisz rozwiązanie bez wtyczek, możesz użyć narzędzia Batch Image Resizing Made Easy, aby łatwo zbiorczo zmieniać rozmiar obrazów. Upewnij się tylko, że wybrałeś opcję Automatyczna wysokość , aby narzędzie nie przycięło obrazów podczas procesu zmiany rozmiaru:

Jeśli pracujesz na istniejącej witrynie, powinieneś także wrócić i zmienić rozmiar jak największej liczby starych obrazów. Wtyczka Imsanity może pomóc w masowej zmianie rozmiaru istniejących obrazów WordPress.

2. Kompresuj obrazy, aby zaoszczędzić jeszcze większy rozmiar

Ok, więc zmiana rozmiaru obrazów to połowa sukcesu. Możesz jednak pójść jeszcze dalej i zmniejszyć rozmiary plików obrazów za pomocą czegoś, co nazywa się kompresją. Kompresja zmniejsza rozmiary na dwa możliwe sposoby:

• Bezstratna kompresja . Zmniejsza rozmiar plików bez utraty jakości.
• Kompresja stratna . Oferuje większe oszczędności w rozmiarze, ale kosztem jakości.

Zwykle zalecam kompresję bezstratną w przypadku zdjęć i innych obrazów, w przypadku których jakość jest najwyższa. Jednak w przypadku zrzutów ekranu z tutoriali (takich jak obrazy w tym artykule) zalecałbym skorzystanie z kompresji stratnej, aby uzyskać jak największe oszczędności.

Jak kompresować obrazy WordPress

Podobnie jak w przypadku zmiany rozmiaru obrazów, możesz pobrać wtyczkę, która Ci pomoże, lub skorzystać z samodzielnego narzędzia.

Jeśli chodzi o wtyczki, Smush Image Compression and Optimization to świetna opcja, ponieważ w swojej najnowszej wersji może zarówno kompresować , jak i zmieniać rozmiar obrazów.

Jeśli potrzebujesz samodzielnej witryny, Kraken to kolejna solidna opcja, która pozwala kompresować obrazy zarówno metodami bezstratnymi, jak i stratnymi:

Wiem, że to uciążliwe, ale podobnie jak w przypadku zmiany rozmiaru obrazów, powinieneś wrócić i skompresować jak najwięcej starych obrazów. Jeśli używasz wtyczki Smush, może ona automatycznie kompresować zarówno stare, jak i nowe obrazy.

3. Użyj CDN, aby dostarczyć swoje obrazy i inną zawartość

CDN, skrót od sieci dostarczania treści, przyspiesza ładowanie witryny i obrazów w następujący sposób:

Zwykle, gdy ktoś odwiedza Twoją witrynę, musi pobrać wszystkie pliki z centrum danych hostingu. Jeśli Twoje centrum danych znajduje się w Dallas w Teksasie i odwiedza Cię ktoś z Kalifornii, nie ma problemu . Nadal są sobie całkiem blisko!

Ale co, jeśli ktoś przyjedzie z Londynu w Wielkiej Brytanii? To nie jest zbyt dobre . Widzisz, niezależnie od szybkości Internetu, prędkość transmisji danych jest nadal ograniczona fizyką. Oznacza to, że odległość fizyczna ma znaczenie, choćby tylko o ułamek sekundy.

Sieci CDN rozwiązują ten problem, przechowując pliki Twojej witryny w wielu centrach danych na całym świecie. Następnie, gdy ktoś odwiedzi Twoją witrynę, będzie mógł pobrać Twoje pliki z najbliższego globalnego centrum danych.

To naprawdę świetne narzędzie do przyspieszania Twojej witryny. Ale ile to będzie kosztować?

Nie martw się! W rzeczywistości możesz znaleźć wysokiej jakości bezpłatne CDN. Dwie takie opcje to:

• Jetpack Site Accelerator – moduł Photon wtyczki Jetpack działa jako CDN dla Twoich obrazów. Jeśli chcesz tylko przyspieszyć ładowanie obrazu, jest to dobra opcja.

• CloudFlare – popularna opcja, łatwa w konfiguracji i dostarczająca wszystkie pliki statyczne, w tym obrazy i HTML.

4. Włącz buforowanie przeglądarki dla swojej witryny

Jeśli kiedykolwiek korzystałeś z narzędzia Google PageSpeed ​​Insights, fraza „Wykorzystaj pamięć podręczną przeglądarki” prawdopodobnie prześladuje Cię w snach. To powiedziawszy, jest to powszechna sugestia dotycząca przyspieszenia witryny.

Buforowanie przeglądarki w zasadzie nakazuje przeglądarce odwiedzającego przechowywać określone pliki na lokalnym komputerze odwiedzającego, zamiast pobierać je za każdym razem. Na przykład użytkownik będzie musiał pobrać obraz logo podczas swojej pierwszej wizyty. Jednak podczas każdej kolejnej wizyty odwiedzający ładował ten plik z lokalnej pamięci podręcznej.

Oznacza to krótszy czas ładowania, ponieważ odwiedzający nie musi pobierać wszystkiego bezpośrednio z serwera.

Najprostszym sposobem skonfigurowania buforowania przeglądarki jest po prostu dodanie następującego kodu do pliku .htaccess:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

Plik .htaccess można znaleźć, korzystając z programu FTP w celu połączenia się z katalogiem głównym serwera. Lub, jeśli nie wiesz, gdzie znaleźć ten plik, pomoc Twojego dostawcy usług hostingowych może Ci pomóc!

5. Upewnij się, że używasz wtyczki do buforowania stron

Buforowanie przeglądarki to nie jedyny sposób na przyspieszenie witryny WordPress. Istnieje również coś, co nazywa się buforowaniem stron i ułatwia wyświetlanie treści w witrynie. A co najważniejsze, buforowanie stron przyspieszy zarówno ładowanie obrazu, jak i resztę witryny!

Aby zaimplementować buforowanie stron, polecam wtyczkę o nazwie Cache Enabler, ponieważ jest lekka i łatwa w konfiguracji. Wystarczy go zainstalować i aktywować. Następnie przejdź do Ustawienia → Cache Enabler i skonfiguruj go w ten sposób:

A co najlepsze, Cache Enabler zminifikuje również Twój kod, co jest kolejną techniką skracającą czas ładowania strony.

6. Wyłącz funkcję Hotlink dla swoich obrazów

Hotlinkowanie ma miejsce wtedy, gdy inne witryny internetowe publikują obrazy przechowywane na Twoim serwerze. Zasadniczo powoduje to, że Twój serwer internetowy wykorzystuje zasoby, aby ulepszyć witrynę innej osoby . To nie jest dobrze!

Dlatego powinieneś rozważyć wyłączenie Hotlinkowania. W ten sposób Twój serwer może skupić się wyłącznie na Twojej własnej witrynie internetowej.

Aby wyłączyć hotlinkowanie, możesz użyć wtyczki All In One WP Security & Firewall lub dodać następujący kod do pliku .htaccess (tego samego, do którego dodałeś pamięć podręczną przeglądarki):

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

Pamiętaj tylko, aby zastąpić adres yourdomain.com rzeczywistą nazwą domeny!

7. Wszystko inne zawiedzie – wybierz szybszego hosta

Wszystko, co wymieniłem powyżej, sprawi, że Twoja witryna i obrazy będą ładować się szybciej. Jest jednak coś, czego nie da się pokonać wszystkimi tymi wskazówkami:

Powolny hosting .

Jeśli masz usługodawcę hostingowego z długim czasem reakcji, wszystkie te wskazówki to zwykłe bandaże. Oznacza to, że szybkość Twojej witryny będzie zawsze ograniczona wydajnością Twojego hosta.

Jeśli więc wdrożyłeś wszystko powyżej i nadal jesteś rozczarowany czasem ładowania strony, być może nadszedł czas, aby przejść do rozwiązania i przejść na dostawcę usług hostingowych premium.

Lub jeśli szukasz tańszych, ale wciąż skutecznych opcji, jestem wielkim fanem SiteGround*. SiteGround to narzędzie, którego używam w przypadku mojej osobistej witryny z portfolio, która ładuje się w czasie krótszym niż 700 ms*.

Zakończenie rzeczy

Zrobię krótką pauzę, podczas gdy ty wrócisz do Pingdom i ponownie przetestujesz swoją witrynę.

Czy wszystko jest szybsze? Powinni być!

Dzięki temu Twoja witryna internetowa będzie odnosić sukcesy zarówno teraz, jak i w przyszłości. Ponieważ wraz z rozwojem mobilnego Internetu, czas ładowania strony stanie się jeszcze ważniejszy.

Chcesz podzielić się swoją opinią lub dołączyć do rozmowy? Dodaj swoje komentarze na Twitterze.

Zapisz Zapisz