Jak zoptymalizować obrazy WordPress i przyspieszyć swoją witrynę

Jeśli chcesz zapewnić odwiedzającym doskonałe wrażenia użytkownika, musisz upewnić się, że Twoja witryna ładuje się szybciej, aby ich nie frustrować. W rzeczywistości szybkość Twojej witryny może przyczynić się do powstania lub złamania Twojego biznesu online. MUSISZ zoptymalizować obrazy WordPress, aby Twoja witryna była szybsza - ponieważ obrazy są zwykle najcięższą częścią treści,

Walmart znalazł 2% wzrost ich współczynnika konwersji ilekroć poprawili prędkość o 1 sekundę.

I Amazon odnotował wzrost przychodów o 1% na każde 100 milisekund poprawy szybkości witryny. Te statystyki wskazują, że szybkie działanie witryny ma kluczowe znaczenie dla Twojej witryny. Prostym sposobem na przyspieszenie witryny jest optymalizacja wszystkich obrazów w witrynie WordPress.

Contents [show] [Pokazać]
 

zoptymalizuj obrazy wordpress, aby poprawić współczynniki konwersji

Jeśli jeszcze nie brałeś pod uwagę szybkości swojej witryny WordPress jako krytycznego elementu swojej firmy, musisz ponownie pomyśleć i zacząć podejmować działania w celu poprawy szybkości witryny WordPress.

Polecam lekturę: Jak uzyskać szybką witrynę WordPress - kompletny przewodnik [25 działań]

Istnieje wiele sposobów na przyspieszenie Twojej witryny. Niektóre z nich wymieniono poniżej.

  • Unikaj używania zbyt wielu wtyczek WordPress
  • Korzystaj z usług CDN WordPress
  • Zoptymalizuj dostarczanie CSS
  • Zoptymalizuj obrazy WordPress

Obrazy, które nie zostały zoptymalizowane pod kątem internetu, są zazwyczaj duże. Te obrazy będą ładować się dłużej. Ważne jest, aby zoptymalizować obrazy, czyniąc je jak najmniejszymi. Jednak w większości przypadków proces optymalizacji obrazów dla WordPressa i Twojej witryny jest żmudny lub przeszkadza w tworzeniu treści.

W tym poście wyjaśnimy różne sposoby optymalizacji obrazów WordPress, a tym samym szybsze ładowanie witryny.

Kompresuj obrazy lub zapisuj je w Internecie

To oczywiste, że rozmiar obrazu może wpłynąć na czas ładowania witryny WordPress. Ponieważ obrazy o wysokiej rozdzielczości będą miały większy rozmiar pliku, zawsze lepiej jest kompresować obrazy przed przesłaniem.

Teraz możesz mieć pytanie: co to jest kompresja obrazu WordPress i jak może zmniejszyć rozmiar bez wpływu na jakość?

Kompresja to proces radykalnego zmniejszania rozmiaru obrazu poprzez algorytmiczne usuwanie informacji o obrazie, których ludzkie oko nie jest w stanie dostrzec. To bardzo skuteczny sposób optymalizacji obrazów WordPress.

Chociaż kompresja obrazu jest pewną metodą zmniejszania rozmiaru obrazu, jeśli chodzi o kompresję plików JPEG, czasami proces traci rzeczywistą zawartość obrazów podczas procesu. To jedyny minus tego podejścia. Pamiętaj, aby dokładnie sprawdzić wyniki po kompresji, aby upewnić się, że jesteś zadowolony z efektów kompresji.

WP Smush to popularna wtyczka WordPress, która pozwala łatwo zmniejszyć rozmiar pliku obrazu, skanując każdy przesłany obraz i usuwając niepotrzebne informacje o danych. Bezpłatna wersja tej wtyczki pozwala kompresować obrazy do rozmiaru 1 MB, podczas gdy w wersji pro możesz kompresować obrazy do 32 MB.

Można pobrać WP Smush tutaj.

wp smush, aby zoptymalizować obrazy wordpress

Należy również pamiętać, że ta wtyczka pozwala zoptymalizować wszystkie nowo przesłane obrazy do witryny WordPress. Jeśli chcesz skompresować istniejące obrazy, możesz użyć linku Bulk Smush.it na karcie biblioteki multimediów, aby zoptymalizować istniejące obrazy WordPress.

Lazy loading: zoptymalizuj czas ładowania obrazów WordPress

[UPDATE: WordPress 5.4 ma wbudowane leniwe ładowanie, więc musisz wykonać tę czynność tylko wtedy, gdy twoja wersja WordPressa jest niższa od tej wersji]

Wszyscy wiemy, że „Obraz jest wart tysiąca słów”.

Jednak użycie zbyt wielu zdjęć na jednej stronie może spowolnić ładowanie witryny.

Jednym z łatwych sposobów na skrócenie czasu ładowania jest usunięcie niepotrzebnych obrazów i zachowanie tylko tego, co jest absolutnie konieczne. Jednak nie każdy chce zmniejszyć liczbę obrazów używanych na stronie internetowej, tylko po to, aby strona ładowała się szybciej.

Jak rozwiązać ten problem?

Być może już to zauważyłeś - strony internetowe, które używają wielu obrazów na każdej stronie, rozwiązują ten problem, sprawiając, że obraz ładuje się tylko wtedy, gdy jest widoczny dla użytkownika. Ta taktyka nie tylko skraca czas ładowania strony, ale także oszczędza przepustowość serwera. Nazywa się to leniwym ładowaniem. Ponieważ obraz jest „leniwy”, pojawia się tylko wtedy, gdy jest potrzebny.

Jeśli korzystasz z WordPressa, łatwiej jest ładować obraz tylko wtedy, gdy jest widoczny. Wszystko, co musisz zrobić, to zainstalować wtyczkę Lazy load. Po raz kolejny jest to doskonały sposób na optymalizację obrazów WordPress w celu zwiększenia szybkości.

Możesz pobrać Wtyczka leniwego ładowania tutaj.

Zoptymalizuj obrazy wordpress z leniwym ładowaniem

Ta wtyczka nie wymaga żadnej dodatkowej konfiguracji, ponieważ działa od razu po instalacji i aktywacji.

Czytaj więcej: Divi kontra Elementor

Użyj zoptymalizowanego i prawidłowego formatu obrazu

JPEG, PNG i GIF to najpopularniejsze formaty obrazów.

Znajomość różnic między poszczególnymi formatami obrazu pozwala na użycie odpowiedniego formatu w witrynie, co pomaga nawet w optymalizacji obrazu.

Jaki format jest lepszy dla zoptymalizowanych obrazów witryn WordPress i kiedy należy go używać? Poniżej kilka wskazówek:

  • GIF: Użyj GIF, gdy obraz jest za mały i używa względnie less liczba kolorów. Na przykład GIF jest dobrym wyborem dla klipartów, punktorów i wykresów. Z drugiej strony złożone obrazy z ulepszeniami, takimi jak cienie, nie mogły być poprawnie wyświetlane za pomocą GIF.
  • JPEG / JPG: Nadaje się do złożonych obrazów z wieloma wariantami kolorystycznymi lub jeśli zawiera obrazy fotograficzne.
  • PNG: Format PNG najlepiej nadaje się do przezroczystych obrazów.
  • WebP: to obecnie najlepszy format, ale tworzenie tych obrazów wymaga wsparcia serwera na Twojej stronie

Należy pamiętać, że są to tylko ogólne zalecenia. Jak wszystkie zasady, są wyjątki, a niektóre z nich mają zostać złamane.

Efektywnie wykorzystuj pamięć podręczną przeglądarki

Gdy przesyłasz obrazy na stronę internetową, upewnij się, że przesyłasz je do jednego katalogu. Przesyłanie obrazów do jednego katalogu na stronie internetowej pomoże przeglądarce w łatwy sposób załadować te obrazy przy użyciu pamięci podręcznej przeglądarki podczas wielokrotnych wizyt.

W porządku, jeśli przesyłasz obrazy za pomocą domyślnego programu do przesyłania obrazów WordPress. Ale na przykład, jeśli tworzysz strony docelowe HTML na WordPress, prawdopodobnie nie będziesz używać domyślnego programu do przesyłania obrazów WordPress. W takich przypadkach zamiast przesyłać obrazy strony internetowej do różnych katalogów, upewnij się, że przesyłasz je wszystkie do jednego katalogu.

Jeśli chcesz dowiedzieć się więcej o pamięci podręcznej przeglądarki i sposobach jej wykorzystania, zapoznaj się z naszym szczegółowym artykułem tutaj: Jak wykorzystać buforowanie przeglądarki w WordPress z wtyczką lub bez niej [sposoby 5]

 

Użyj tego samego obrazu wiele razy

Innym sposobem wykorzystania pamięci podręcznej przeglądarki w celu zmniejszenia przepustowości obrazu jest wielokrotne używanie tych samych obrazów w całej witrynie.

Na przykład, gdy używasz logo lub elementów menu ze strony, upewnij się, że wywołujesz te same obrazy w całej witrynie, aby użytkownicy nie musieli pobierać ich kilka razy, ale raz, a przeglądarki mogły wyświetlać obrazy z przeglądarki Pamięć podręczna.

Używając tła z teksturą, pamiętaj, aby wielokrotnie używać mniejszych obrazów zamiast jednego dużego obrazu. Może to również pomóc w skróceniu czasu ładowania.

Domyślnie, gdy przesyłasz obrazy za pomocą narzędzia do przesyłania multimediów na pulpicie nawigacyjnym WordPress, trafiają one do folderu w zależności od tego, kiedy je przesyłasz. Oznacza to, że wszystkie obrazy przesyłane w ciągu miesiąca będą znajdować się w jednym katalogu.

Na przykład, jeśli prześlesz obraz w styczniu 2021, będzie on znajdować się w tym katalogu: wp-content/uploads/2021/01.

Przyjrzyjmy się korzyściom płynącym z przesyłania za pomocą programu do przesyłania multimediów, a następnie powiemy Ci, co należy wziąć pod uwagę, gdy nie przesyłasz do programu do przesyłania multimediów, aby przyspieszyć działanie witryny.

Media uploader przyspiesza ładowanie obrazu: Ładowanie będzie szybsze, jeśli obrazy są przechowywane w tym samym folderze podczas przeglądania strony internetowej. Gdy obrazy są wywoływane wielokrotnie, przeglądarka może je łatwo pobrać z pamięci podręcznej przeglądarki, jeśli znajdują się w jednym folderze.

Często jednak blogerzy WordPress nie używają domyślnego narzędzia do przesyłania multimediów, zwłaszcza podczas pracy nad niestandardową stroną docelową. Dla ułatwienia przesyłają obrazy w osobnym katalogu.

W takich przypadkach upewnij się, że przesyłasz wszystkie obrazy tej strony do jednego katalogu zamiast do wielu katalogów. Ta taktyka może skrócić czas ładowania, ponieważ buforowanie plików będzie łatwiejsze podczas wielokrotnych wizyt.

Użyj CSS zamiast obrazów

Czy wiesz, że możesz poprawić czas ładowania, nie używając w ogóle żadnego obrazu?

Na przykład całkowicie możliwe jest generowanie określonych kształtów za pomocą prostego CSS zamiast obrazów, takich jak zaokrąglone prostokąty, gradienty, cienie i przezroczyste obrazy. Biorąc to pod uwagę, upewnij się, że sprawdzasz zgodność przeglądarki za każdym razem, gdy zastępujesz dowolny obraz CSS, ponieważ nie wszystkie przeglądarki są w stanie obsługiwać te techniki.

O autorze
Shahzad Saeed
Autor: Shahzad SaeedStrona internetowa: http://shahzadsaeed.com/
Shahzaad Saaed był opisywany w wielu witrynach autorytetów jako ekspert od WordPressa. Specjalizuje się w content marketingu, aby pomóc biznesowi zwiększyć ruch.

Jeszcze jedna rzecz... Czy wiesz, że osoby, które udostępniają przydatne rzeczy, takie jak ten post, również wyglądają NIESAMOWITE? ;-)
Proszę zostaw użyteczny skomentuj swoje przemyślenia, a następnie udostępnij to na swoich grupach na Facebooku, które uznają to za przydatne i wspólnie zbierzmy korzyści. Dziękuję za udostępnienie i bycie miłym!

Ujawnienie: Ta strona może zawierać linki do zewnętrznych witryn produktów, które kochamy i gorąco polecamy. Jeśli kupisz sugerowane przez nas produkty, możemy otrzymać opłatę za polecenie. Takie opłaty nie wpływają na nasze rekomendacje i nie przyjmujemy płatności za pozytywne recenzje.

Autorzy promowani w:  Inc Czasopismo Logo .   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   i wiele więcej ...