TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

7 sposobów na optymalizację obrazów w WordPress w celu poprawy szybkości ładowania strony

9

Obrazy są nieodłączną częścią każdej strony internetowej. Jak mówi popularny cytat – „Obraz jest wart tysiąca słów". Obrazy są bardzo przydatne w wyrażaniu myśli, szczególnie w przypadku samouczków, fotografii i witryn. każdy post, aby atrakcyjnie się nim dzielić.Teraz pytanie może wychodzić z Twojej głowy – używam wielu obrazów na mojej stronie WordPress i jaką optymalizację powinienem zrobić?

Prostą odpowiedzią jest to, że każdy obraz na Twojej stronie wpływa na szybkość ładowania, co z kolei bezpośrednio wpływa na wrażenia użytkownika. Nikt nie lubi powolnych stron wczytujących się, dlatego problemy z optymalizacją obrazu należy traktować z najwyższym priorytetem.

Jak poznać problemy z optymalizacją obrazu?

Jest to bardzo proste i istnieje wiele darmowych narzędzi do sprawdzania szybkości ładowania strony. Google ma dedykowane narzędzie PageSpeed ​​Insights do mierzenia problemów na stronie wpływających na szybkość ładowania. Wprowadź adres URL swojej strony w narzędziu, aby zobaczyć wyniki, jak poniżej:

7 sposobów na optymalizację obrazów w WordPress w celu poprawy szybkości ładowania strony

Optymalizuj obrazy w Google PageSpeed ​​Insights

Powinieneś zobaczyć "Optymalizuj obrazy" jako problem o najwyższym priorytecie, gdy twoje obrazy nie są skompresowane. Kompresja obrazu to jeden z głównych problemów, które zobaczysz w narzędziu Google PageSpeed ​​Insights. Istnieje jednak wiele innych problemów, które można znaleźć podczas korzystania z narzędzi takich jak pingdom i GTmetrix, jak poniżej.

  • Równolegle pobieraj pliki z różnych nazw hostów
  • Wyświetlaj zawartość statyczną z plików cookie bez domeny
  • Określ wymiary obrazu
  • Wyświetlaj skalowane obrazy

Wszystkie te problemy można łatwo rozwiązać za pomocą wtyczek i postępując zgodnie z prostymi wskazówkami.

Jak zoptymalizować obrazy w WordPressie, aby poprawić szybkość ładowania strony?

Oto podsumowanie technik optymalizacji, które poprawiają szybkość ładowania strony:

  1. Zmniejsz liczbę obrazów na serwerze
  2. Użyj wtyczki do kompresji obrazów, aby zaoszczędzić rozmiar
  3. Wyświetlaj obrazy z subdomeny
  4. Użyj prawidłowego rozmiaru obrazu
  5. Unikaj zmiany rozmiaru w HTML / CSS
  6. W miarę możliwości używaj ikon wektorowych
  7. Wybierz odpowiedni format obrazu

1 Zmniejsz liczbę obrazów

Każdy pojedynczy obraz na stronie wyśle ​​osobne żądanie HTTP do serwera, a jego pobranie zajmie trochę czasu. Przysłowie „Obraz jest wart tysiąca słów” może dobrze wyglądać, ale w rzeczywistości używaj obrazów tylko wtedy, gdy jest to wymagane. Mniej obrazów oznacza mniejszą liczbę żądań serwera i szybkie ładowanie strony.

Z drugiej strony obrazy zajmują miejsce na twoim serwerze i zwiększają hosta hostingu. Zwłaszcza WordPress generuje ogromną liczbę miniatur w zależności od motywu i zainstalowanych wtyczek. Sprawdź artykuł o tym, jak zmniejszyć miniatury w witrynie WordPress.

2 Kompresuj obrazy, aby zachować rozmiar

Przeglądarka musi pobrać obrazy z serwera podczas ładowania strony. Zmniejszenie rozmiaru każdego KB będzie liczyć na wydajność; w związku z tym upewnij się, że obrazy będą wyświetlane po odpowiedniej kompresji. Na przykład obrazy mają metadane, takie jak lokalizacja, szczegóły aparatu itp. O ile nie jest to wyraźnie konieczne, usuń te dane za pomocą wtyczek, aby zmniejszyć rozmiar obrazów.

Obrazy można kompresować na dwa sposoby – stratną i bezstratną. Mówiąc prościej, kompresja stratna jest nieodwracalnym sposobem i usuwa niektóre piksele danych z obrazu. A kompresja bezstratna to odwracalny sposób, który kompresuje obraz bez usuwania pikseli. W zależności od formatu obrazu (PNG / JPEG / GIF), jakości i wymaganej kompresji może być konieczne wypróbowanie różnych wtyczek, aby zobaczyć, co działa dla Ciebie.

Jeśli masz kilka stron internetowych lub kilka obrazów do optymalizacji, zalecamy wykonanie tego za pomocą narzędzi do kompresji obrazu. Poniżej znajdują się niektóre z narzędzi do kompresji obrazu, których możesz użyć:

  • gifsicle – do tworzenia i optymalizacji obrazów GIF
  • optipng – użyj kompresji bezstratnej, aby zmniejszyć rozmiar obrazu PNG
  • pngquant – użyj kompresji stratnej, aby zmniejszyć rozmiar obrazu PNG
  • jpegtran – kompresuj obrazy JPEG

WordPress ma wiele darmowych i premium wtyczek do kompresji obrazu. Dwie takie popularne wtyczki to – EWWW Image Optimizer i WP-Smushit. EWWW Image Optimizer ma wiele ustawień i wykonuje kompresję na własnym serwerze hostingowym. Podczas gdy WP-Smushit jest prosty i bezpośredni, kompresuje obrazy na serwerze zewnętrznym. Po zainstalowaniu i aktywacji wtyczki te pomogą automatycznie skompresować obrazy podczas ich przesyłania. Oto kompletny samouczek dotyczący korzystania z wtyczki WP-Smushit.

7 sposobów na optymalizację obrazów w WordPress w celu poprawy szybkości ładowania strony

WP Smush WordPress Wtyczka

Pamiętaj, że wtyczki do kompresji obrazu zużywają duże zasoby serwera. Nie kompresuj setek obrazów na raz, co doprowadzi do naruszenia warunków Twojej firmy hostingowej. Kompresuj mniej obrazów z wystarczającymi interwałami, aby uniknąć dużego obciążenia serwera.

3 serwuj obrazy z subdomeny

Zaleca się umieszczanie obrazów w osobnej subdomenie. Pomoże to załadować obrazy równolegle do treści z domeny głównej. Treść na Twojej stronie ładuje się szybciej, ponieważ obrazy są ładowane z innego miejsca.

7 sposobów na optymalizację obrazów w WordPress w celu poprawy szybkości ładowania strony

Udostępnianie treści z różnych serwerów

Sprawdź nasz artykuł o tym, jak przenieść folder obrazów WordPress do subdomeny.

4 Użyj prawidłowego rozmiaru obrazu

Przygotuj zdjęcia dokładnie w takim rozmiarze, jak będą wyświetlane na stronie. Gdy potrzebujesz obrazu 600×350, nie szykuj rozmiaru 1200×700. Przeglądarka potrzebuje dużo czasu na pobranie większych plików graficznych ze względu na rozmiar. Wtyczka WP-Smushit posiada również opcję ustawienia maksymalnego rozmiaru przesyłanych obrazów. Pomoże to zmienić rozmiar przesyłanych obrazów do maksymalnego rozmiaru i zmniejszyć rozmiar obrazu.

5 Unikaj zmiany rozmiaru w HTML / CSS

Ludzie używają HTML i CSS do zmiany rozmiaru obrazu po jego pobraniu do przeglądarki. To tylko wydłuży czas ładowania, ponieważ przeglądarka potrzebuje dodatkowego czasu na renderowanie obrazu do wymaganego rozmiaru.

Na przykład nie jest dobrą praktyką przesyłanie obrazu o wymiarach 90×90 pikseli i próba zmniejszenia rozmiaru za pomocą poniższego kodu HTML.

<img src="your image URL" height=45 width=45>

6 Użyj ikon wektorowych

Normalne obrazy (nazywane obrazami rastrowymi) mają inny format i nie będą renderowane poprawnie podczas powiększania do większych wymiarów. Najlepszym sposobem jest użycie skalowalnych ikon czcionek SVG, takich jak niesamowite ikony czcionek, zamiast obrazów. Na przykład ikony w menu nawigacyjnym powinny używać ikon czcionek SVG. Używanie obrazów dla tak mniejszych ikon nie tylko zniekształci wygląd, ale także wydłuży czas ładowania strony. Poniżej przykładowe użycie ikony czcionki:

Jestem ikoną czcionki, użyj mnie zamiast obrazu.

Upewnij się, że włączona jest kompresja GZIP na poziomie serwera, aby zmniejszyć rozmiar plików obrazów SVG i innej zawartości.

7 Wybierz odpowiedni format obrazu

Istnieją trzy powszechnie obsługiwane formaty obrazów – GIF, PNG i JPEG. Każdy ma swoje plusy i minusy.

  • Użyj GIF, gdy potrzebujesz animacji
  • PNG może być używany do obrazów o wysokiej rozdzielczości i wysokiej jakości, takich jak obrazy fotograficzne. Ale obrazy PNG będą większe.
  • JPEG jest bardziej odpowiedni dla normalnych zrzutów ekranu i obrazów internetowych o mniejszym rozmiarze obrazu i niższej jakości (w porównaniu z PNG).

Wybierz wymagany format obrazu i skompresuj go za pomocą wtyczek przed wyświetleniem użytkownikom.

Wniosek

Kiedy zaczynasz stronę internetową, zalecamy wypróbowanie wielu kombinacji i sprawdzenie, która z nich działa dla Ciebie. Jeśli masz już uruchomioną witrynę z dużą liczbą obrazów, użyj wtyczek, aby skompresować wszystkie istniejące obrazy. Użyj narzędzia Google PageSpeed ​​Insight, aby sprawdzić, czy problem „Optymalizuj obrazy” został usunięty, a wynik szybkości Twojej strony uległ poprawie. Przestrzeganie wszystkich wyżej wymienionych technik optymalizacji pomoże znacznie poprawić wynik wczytywania strony do zielonej strefy.

Źródło nagrywania: www.webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów