Jednym z czynników, który może spowolnić działanie Twojej witryny, jest używanie dużych zdjęć, które nie są zoptymalizowane pod kątem Internetu.
Czasami, gdy ludzie chcą coś szybko opublikować, przesyłają zdjęcia bezpośrednio ze swoich aparatów fotograficznych, w bardzo dużej rozdzielczości, zdjęcia ważące nawet 4-5 MB.
Zoptymalizowany obraz ma mniej kilobajtów bez widocznej utraty jakości, dlatego zawsze należy optymalizować obrazy bez utraty jakości przed lub w trakcie przesyłania ich do witryny.
Nieważne, czy Twoja witryna to WordPress, czy inna platforma, możesz zoptymalizować obrazy dla Internetu i przyspieszyć ładowanie witryny.
Jedną z zalet korzystania z WordPressa jest to, że masz wtyczki, które mogą optymalizować obrazy podczas przesyłania ich do Twojej witryny, a także zbiorczo optymalizować istniejące obrazy.
Jakie są zatem najlepsze praktyki dotyczące zdjęć?
Nie trać jakości
Postępuj zgodnie z celami swojej witryny. Nie optymalizuj na ślepo tylko dlatego, że jakieś narzędzie dało Ci zły wynik. Narzędzia nie znają celów Twojej witryny.
Gdybym miała bloga o modzie lub sklep, pokazywałabym piękne zdjęcia; Nie obchodzi mnie, co mnie ocenili w YSlow lub Pagespeed Insights.
Nie skupiaj się na ocenach i wynikach, rób to, co najlepsze dla Ciebie i Twoich gości. Lepiej wydać więcej na CDN, aby wyświetlać większe i lepsze obrazy, niż nadmiernie optymalizować zdjęcia i mieć brzydką stronę internetową.
Może to kosztować gości i pieniądze.
Nie przesyłaj obrazów większych niż potrzebujesz
Jeśli szerokość treści wynosi 620 pikseli, przed przesłaniem ich na swoją witrynę należy zmienić rozmiar obrazów na szerokość 620 pikseli.
Jeśli chcesz, aby odwiedzający widzieli większy obraz po kliknięciu, możesz użyć szerokości 1024 pikseli. Ustaw jedną z miniatur WordPress na szerokość 620 pikseli, użyj tej miniatury na swojej stronie i połącz ją z większym obrazem.
Prawdopodobnie nie potrzebujesz obrazów o rozdzielczości większej niż 1024 piksele (to powinno wystarczyć w przypadku większości blogów), ale co, jeśli tak?
W takim przypadku możesz rozważyć przesłanie obrazów w większej rozdzielczości i skorzystanie z CDN.
Za chwilę omówimy bardziej szczegółowo CDN.
Zoptymalizuj obrazy przed przesłaniem
Możesz zoptymalizować swoje obrazy na komputerze za pomocą programu Photoshop. Niektórzy zalecają, aby obraz był nieco ostrzejszy za pomocą Inteligentnego wyostrzania, Maski wyostrzającej, Filtru górnoprzepustowego lub innego narzędzia, które lubisz; Photoshop ma wiele opcji.
Po wyostrzeniu nie widziałem dużej różnicy (w KB), ale nie jestem mistrzem Photoshopa.
Zmień rozmiar zdjęcia na żądaną rozdzielczość w swojej witrynie, użyj opcji Zapisz dla Internetu, wybierz JPG, Jakość w zakresie 60-80%, zaznacz opcję Progresywny, a następnie Zapisz.
Polecam używać JPG, chyba że potrzebujesz przezroczystości i musisz użyć PNG.
Jeśli nie masz Photoshopa, możesz użyć tych narzędzi do optymalizacji:
- Zamieszki (Windows)
- Imageoptim (Mac)
- Jpegmini (online, Mac i Windows)
- Kraken (online)
- Compressor.io (online)
Sam używam Jpegmini; Nadal mogę zgolić kolejne 5-10%, nawet po wcześniejszej optymalizacji w Photoshopie.
Lub zoptymalizuj podczas przesyłania
Nie sądzę, że istnieje jeden najlepszy sposób optymalizacji obrazów. Jeśli nie chcesz tracić czasu na optymalizację zdjęć na komputerze przed ich przesłaniem, możesz pozwolić, aby wtyczka WordPress wykonała całą pracę dla ciebie.
Istnieje wiele wtyczek WordPress, których możesz użyć:
- WP Smush – Optymalizacja obrazu
- Optymalizator obrazu ShortPixel
- Optymalizator obrazu Kraken.io
- Optimus – Optymalizator obrazu WordPress
- Chmura optymalizatora obrazu EWWW
- Imagify Optymalizator obrazu
Dzięki tym wtyczkom możesz optymalizować obrazy podczas przesyłania, a także te, które już przesłałeś.
Nie korzystałem z nich wszystkich, tylko WP Smush i ShortPixel, i uważam, że ShortPixel jest doskonały. Może ogolić część KB nawet w przypadku obrazów wcześniej zoptymalizowanych za pomocą Photoshopa i Jpegmini.
Kolejną przydatną wtyczką jest Imsanity .
Jeśli masz witrynę z wieloma autorami, musisz kontrolować, jakie obrazy przesyłają ludzie. Ustaw maksymalną szerokość, wysokość i jakość. Gdy użytkownik prześle większy obraz, wtyczka automatycznie zmniejszy go do skonfigurowanego rozmiaru.
WP Smush Pro również to robi.
Wyświetlanie obrazów
Teraz, gdy masz zoptymalizowane obrazy, możesz także ulepszyć sposób ich prezentacji w swojej witrynie.
Jeśli masz dużo zdjęć na stronie, na przykład na blogu o modzie, możesz skorzystać z leniwego ładowania.
Oznacza to, że Twoje obrazy zostaną załadowane tylko wtedy, gdy będą widoczne, gdy odwiedzający będzie przewijał stronę w dół.
Możesz w tym celu użyć jednej z następujących wtyczek WordPress:
- Leniwy ładunek
- BJ Leniwy ładunek
- Rakietowy leniwy ładunek
- Obraz Leniwe ładowanie
- WPParse Leniwe ładowanie
Nie mogę powiedzieć, która wtyczka jest lepsza. Musisz przetestować, ponieważ mogą występować niezgodności z Twoim motywem. Na przykład leniwe ładowanie nie działa w przypadku wyróżnionych obrazów, jeśli masz motyw Genesis Framework.
Ponadto, gdy testowałem leniwe ładowanie, wyglądało to dziwnie na urządzeniach mobilnych. W miejscach, w których powinny znajdować się zdjęcia, były puste miejsca, ponieważ nie ładowały się tak szybko, jak w widoku na komputerze.
Kolejną rzeczą, którą możesz zrobić, aby przyspieszyć czas ładowania, jest wyświetlanie obrazów z subdomeny, np. Images.domain.com.
Musisz utworzyć subdomenę z cPanel lub dowolnego panelu sterowania oferowanego przez Twoją firmę hostingową, a następnie skonfigurować WordPress, aby ładował multimedia z tej subdomeny za pomocą WP Original Media Path .
Mogę napisać szczegółowy post na blogu dla osób, które chcą to zrobić (jeśli ktoś o to poprosi), ale zamiast tego zalecam korzystanie z CDN. To dużo prostsze rozwiązanie.
Użyj CDN
Cloudflare jest bardzo łatwy i darmowy. Po prostu zmieniasz serwery nazw domen na Cloudflare i aktywujesz (sprawdź pomarańczową chmurę pod kątem wpisów DNS) i to wszystko. Twoje pliki statyczne (obrazy, CSS, JS) zostaną załadowane z CDN Cloudflare.
Istnieją inne firmy CDN, z których możesz skorzystać, wymienione poniżej. Ale myślę, że Cloudflare jest najłatwiejszy do wdrożenia:
Sprzątaj po sobie
Za każdym razem, gdy zmieniasz motyw, pozostawiasz ślad nieużywanych miniatur i wpisów w bazie danych powiązanych z tymi obrazami.
Podczas przełączania motywów możesz użyć AJAX Thumbnail Rebuild , aby odbudować miniatury w celu dopasowania do nowego motywu.
Stare miniatury można usunąć z serwera za pomocą jednej z poniższych wtyczek:
Polecam Thumbnail Cleaner, ponieważ jest szybki. Ale usuwa wszystkie miniatury, a nie tylko te nieużywane. Po usunięciu musisz użyć AJAX Thumbnail Rebuild , aby odbudować potrzebne miniatury.
Nieużywane miniatury nie wpływają na wydajność Twojej witryny. Po prostu zajmują miejsce na Twoim serwerze. Istnieją jednak wpisy w bazie danych powiązane z tymi miniaturami i dobrą praktyką jest utrzymywanie bazy danych w jak największej czystości.
To właśnie zrobimy w następnym kroku – wyczyścimy bazę danych WordPress.
Zostaw odpowiedź