Jak zoptymalizować obrazy w WordPress (zarówno prędkość + SEO)

Jeśli chodzi o optymalizację obrazu, prawdopodobnie słyszałeś już wystarczająco dużo o tekście alternatywnym.


Istnieje 20 różnych sposobów optymalizacji obrazów (jeśli uwzględnisz zarówno SEO, jak i optymalizację prędkości). Dadzą ci lepsze wyniki w GTmetrix / Pingdom, potencjalnie zajmą wyższą pozycję w wyszukiwaniu i znacznie przyspieszą ładowanie treści. Udało mi się uzyskać 100% raport GTmetrix z czasem ładowania .5s … Optymalizacja moich zdjęć w WordPress była jego dużą częścią.

Zoptymalizuj zdjęcia PRZED przesłaniem – Używanie programu takiego jak Photoshop do optymalizacji obrazów przed ich przesłaniem może zaoszczędzić dużo pracy. Możesz zmieniać rozmiar, kompresować, usuwać dane EXIF, zapisywać w prawidłowym formacie (np. PNG / JPEG) i pisać opisową nazwę pliku (która będzie automatycznie używana jako tekst alternatywny, jeśli używasz Wtyczka Automatic Image Alt Attributes). To 6 optymalizacji!

Jeśli potrzebujesz obrazów w wysokiej rozdzielczości (np. strona z fotografiami), możesz nie chcieć zmieniać ich rozmiaru i kompresji (krok 3 i 8), ponieważ mogą one obniżyć jakość, nawet jeśli jest to niewielka ilość.

Główne narzędzia, których używam – Używam ŻYŁKA zmieniać rozmiar / kompresować obrazy (mój edytor zdjęć do wyboru), WP Rocket dla mojej wtyczki pamięci podręcznej, Wyobraź sobie w celu dalszej bezstratnej kompresji + usunięcia danych EXIF Cloudflare i StackPath CDN, Wtyczka Automatic Image ALT Attributes aby automatycznie użyć nazwy pliku obrazu jako tekstu alternatywnego, oraz Optymalna pamięć podręczna Gravatar buforować Gravatars w komentarzach. używam WP Review Pro jako moją wtyczkę Rich Snippets, Lepsze wyszukiwanie Zastąp do zbiorczej aktualizacji obrazów (bardzo przydatne) i GTmetrix jako moje narzędzie do testowania prędkości. Zobacz pełną listę narzędzi.

1. Znajdź niezoptymalizowane obrazy

Uruchom swoją witrynę GTmetrix i zobaczysz te elementy na kartach Szybkość strony / YSlow. Pierwsze pięć jest zazwyczaj specyficzne dla strony, co oznacza, że ​​GTmetrix wyświetla tylko niezoptymalizowane obrazy dla testowanej pojedynczej strony. Ostatnie 3 zwykle występują w całej witrynie. Oczywiście to tylko 7 sposobów optymalizacji obrazów, ale niektóre z najważniejszych, więc zajmiemy się nimi w pierwszej kolejności.

  • Podaj skalowane obrazy: zmiana rozmiaru dużych obrazów w celu poprawienia wymiarów (krok 2)
  • Określ wymiary obrazu: określ szerokość / wysokość w kodzie HTML lub CSS obrazu (krok 3)
  • Zoptymalizuj obrazy – bezstratnie kompresuj obrazy (krok 4)
  • Czesanie obrazów za pomocą duszków CSS – połącz wiele zdjęć w 1 zdjęcie (krok 5)
  • Unikaj przekierowań adresów URL – nie wyświetlaj obrazów z niewłaściwej wersji www lub http (s) (krok 6)
  • Użyj sieci dostarczania treści – obsługuj obrazy / pliki z CDN (krok 7)
  • Cache przeglądarki dźwigni – buforuj obrazy / pliki za pomocą wtyczki pamięci podręcznej (krok 8)
  • Uczyń favicon małym i łatwym do buforowania – użyj favikonu 16x16px i buforuj go (krok 9)

Optymalizacje obrazu w GTmetrix

Zacznij od naprawy obrazów, które pojawiają się na wielu stronach: logo, obrazy na pasku bocznym / stopce itp. Zacznij także od wyświetlania obrazów skalowanych, ponieważ może być konieczne ich zmiana rozmiaru / ponowne załadowanie w nowych wymiarach.

2. Podaj skalowane obrazy

Jeśli zobaczysz wyświetlać skalowane obrazy błędy w GTmetrix, oznacza to, że masz za duże obrazy i musisz zmienić ich rozmiar do odpowiednich wymiarów (co zapewnia ci GTmetrix). Dopóki postępujesz zgodnie ze ściągawką z wymiarów obrazu (patrz poniżej), nie powinieneś widzieć tych błędów. Ale jeśli przesłałeś już duże obrazy, musisz zmienić ich rozmiar ręcznie lub użyć wtyczki.

Podaj skalowane obrazy

Bulk Zmień rozmiar zdjęć za pomocą wtyczki – problemem jest to, że różne obrazy wymagają różnych wymiarów (widżety, suwaki, obrazy o pełnej szerokości). Podczas gdy większość wtyczek optymalizacji obrazu ma opcję zmiany rozmiaru obrazów na jeden pojedynczy określonego zestawu wymiarów, powinieneś naprawdę przyciąć / zmienić ich rozmiar przed przesłaniem. Jeśli zmieniasz rozmiar obrazów za pomocą wtyczki, zachowuje kopie zapasowe oryginalnych obrazów (i testujesz tylko kilka) na wypadek, gdybyś nie był zadowolony z wyników.

Zmień rozmiar dużych obrazów

Zmień rozmiar zdjęć ręcznie – uzyskaj prawidłowe wymiary z GTmetrix i zmień ich rozmiar / ponownie załaduj. Pamiętaj, że GTmetrix pokazuje tylko niezoptymalizowane obrazy dla testowanej pojedynczej strony.

Utwórz ściągę o wymiarach obrazu swojej witryny
Suwaki, pasek boczny blogu, polecane obrazy i treść bloga wymagają określonych wymiarów, do których należy zmienić rozmiar obrazów. Utwórz ściągawki, aby móc zmienić ich rozmiar przed przesłaniem ich do WordPress. Jest to szczególnie przydatne, jeśli masz wiele obszarów witryny wymagających różnych rozmiarów obrazów i jeśli masz wielu projektantów / redaktorów.

Przykład:

  • Obrazy suwaka: 1900 (w) x 400 (h)
  • Obrazy karuzelowe: 115 (h)
  • Obrazy widżetów: 414 (w)
  • Obrazy postów na blogu o pełnej przepustowości: 680 (w)
  • Wyróżnione zdjęcia: 250 (w) x 250 (h)
  • Obraz Yoast na Facebooku: 1200 (szer.) X 628 (godz.) – krok 11
  • Yoast Twitter OG obraz 1024 (szer.) X 512 (godz.) – krok 11

Prostokąt o szerokości 680 pikseli

3. Określ wymiary obrazu

Oznacza to dodanie szerokości / wysokości do kodu HTML lub CSS obrazu. Edytor wizualny robi to za Ciebie (ale widżety, niektóre programy budujące strony i niestandardowy HTML nie rób). Przetestuj kilka stron w GTmetrix.

GTmetrix informuje o wymiarach obrazu…

Speciy Image Dimensions GTmetrix

Dodaj szerokość / wysokość do kodu HTML obrazu…

Określ wymiary obrazu

4. Bezstratnie kompresuj obrazy

Są to elementy „optymalizuj obrazy” w GTmetrix. Wiele programów (np. Photoshop i Gimp) ma opcję kompresji podczas eksportu. Chociaż jest to świetny początek, wtyczki kompresji obrazu zwykle uzyskują jeszcze lepsze wyniki. wolę Wyobraź sobie, Kraken, ShortPixel, lub Smush. Inne wtyczki są znane z tego, że wizualnie obniżają jakość obrazu i mogą powodować błędy w obrazach.

Kompresowanie zdjęć za pomocą Imagify

  1. Zapisać się do Wyobraź sobie
  2. Zainstaluj Imagify Plugin
  3. Zostaną wyświetlone następujące instrukcje:
  4. Wprowadź swój klucz API z konta Imagify
  5. Ustaw poziom kompresji (normalny, agresywny, ultra)
  6. Imagifemem all (zdjęcie poniżej) zbiorczo optymalizuje wszystkie obrazy w Twojej witrynie
  7. Po osiągnięciu limitu zapłać 4,99 USD lub poczekaj w przyszłym miesiącu, aby zresetować limit

wyobraź sobie

Sprawdź, jak wyglądają obrazy przy różnych poziomach kompresji…

Wyobraź sobie porównanie kompresji

Po zarejestrowaniu zbiorczo zoptymalizuj wszystkie obrazy w swojej witrynie…

imagify-wordpress-image-optimization

Ustaw opcję optymalizacji zdjęć podczas przesyłania…

Imagify Optymalizuj obrazy podczas przesyłania

5. Połącz obrazy w duszki CSS

Na mojej stronie domowej może się wydawać, że widzisz 21 ikon, ale w rzeczywistości są to 1 pojedynczy obraz. To jest Duszek CSS, gdzie łączysz wiele zdjęć w 1 pojedynczy obraz. Zmniejsza to liczbę zdjęć (i żądań), dlatego moja strona główna ma tylko 10 żądań. Zamiast ładować 21 obrazów, ładuje 1. Będziesz potrzebować wiedzy CSS, aby to zrobić, lub użyj Generator ikonek CSS.

Duszki CSS

GTmetrix CSS Sprites

Używaj duszków CSS tylko do obrazów dekoracyjnych – tracisz dużo tagów alt obrazu po połączeniu 21 obrazów w 1. NIE łącz ważnych obrazów w duszki CSS, jeśli opisują one twoją treść. Jeśli chodzi o mnie, szybkość mojej strony głównej jest ważniejsza niż SEO… Korzystam z raportu GTmetrix mojej strony głównej w wielu miejscach (więc muszę to utrzymywać w czystości), a moja strona internetowa, wierzcie lub nie, nie jest kierowana na słowo kluczowe. Jego celem jest nakreślenie moich samouczków… i szybkie ładowanie.

6. Unikaj przekierowań adresów URL obrazów

Jeśli zmieniłeś wersję na HTTPS, wersje www lub zacząłeś wyświetlać obrazy z CDN, powinieneś zbiorczo zaktualizować wszystkie swoje obrazy (i linki) za pomocą Lepsze wyszukiwanie Zastąp więc serwują poprawną wersję. W przeciwnym razie możesz zobaczyć zminimalizować przekierowania lub korzystaj z domen wolnych od plików cookie błędy.

Minimalizuj przekierowania

Domeny bez plików cookie

Użyj wtyczki Lepsze wyszukiwanie Zastąp, aby zbiorczo aktualizować adresy URL obrazów…

Lepsze wyszukiwanie Zastąp wersje WWW

Lepsze wyszukiwanie Zastąp HTTP vs. HTTPS

7. Podaj obrazy z CDN

Wymaga to zmiany adresów URL obrazów w celu uwzględnienia Twojego CDN URL

  • Stary adres URL obrazu (bez CDN): Https://onlinemediamasters.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png
  • Nowy adres URL obrazu (z CDN): Https://t9w8m8j8.stackpathcdn.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png

Cloudflare vs. StackPath – Używam obu Cloudflare i StackPath ponieważ więcej centrów danych = szybsze dostarczanie treści. Cloudflare ma Ponad 200 centrów danych, StackPath ma Ponad 34 centra danych które są mocno zlokalizowane w Stanach Zjednoczonych (z tego miejsca pochodzi większość moich gości). Cloudflare nie przypisuje Ci adresu URL CDN więc użyjemy CDN StackPath do wyświetlania obrazów.

StackPath-Data-Centers

Krok 1: Wybierz CDN. używam StackPath (mają 30-dniowy okres próbny).

Krok 2: W panelu kliknij kartę CDN, a następnie utwórz witrynę StackPath CDN

StackPath-CDN-Tab

StackPath-CDN-Domain

CDN-URL-StackPath

Krok 3: Skopiuj adres URL CDN i wklej go do wtyczki pamięci podręcznej (poniżej dotyczy WP Rocket)…

WP-Rocket-CDN

Krok 4: Zamień adresy URL obrazów, aby uwzględnić adres URL CDN (używając Lepsze wyszukiwanie Zastąp).

Lepsze wyszukiwanie Zastąp adres URL CDN

Krok 5: Sprawdź za pomocą starych adresów URL obrazu Chrome DevTools. Czasami Twoja wtyczka pamięci podręcznej lub CDN Enabler zajmuje się tym, z wyjątkiem linków w CSS i JavaScript, które są zakodowane na stałe. W przypadku linków, które są pozostawione, zwykle znajdują się w akta (takich jak CSS lub Javascript), które wymagają ręcznego sprawdzenia i wymiany. Chrome DevTools pokazuje wszystkie aktualnie używane domeny.

Krok 6: Uruchom swoją witrynę w GTmetrix a „sieć dostarczania treści” powinna być zielona w YSlow. Nie powinno też być żadnych błędów w „minimalizowaniu przekierowań” lub „używaniu domen wolnych od plików cookie”.

CDN GTmetrix YSlow

8. Obrazy w pamięci podręcznej

Większość wtyczek pamięci podręcznej ma opcję dla buforowanie przeglądarki, który buforuje obrazy. Używam WP Rocket, który został oceniony jako nr 1 wtyczki pamięci podręcznej w wielu sondażach na Facebooku i mam do tego tutorial. Szybka wydajność jest ogólnie w rankingu nr 1 darmowej wtyczki pamięci podręcznej (mam też samouczek).

Buforowanie przeglądarki

9. Uczyń Favicon małym i buforowalnym

Upewnij się, że twój favicon ma format 16x16px, jest w formacie favicon.ico i że jest buforowany przy użyciu wtyczki pamięci podręcznej.

10. Usuń dane EXIF

Dane Exif zawiera informacje takie jak przysłona, czas otwarcia migawki, ISO, ogniskowa, model aparatu, data zrobienia zdjęcia i inne. Nie potrzebujesz tego do zdjęć w swojej witrynie. The VA Usuwanie wtyczki Exif automatycznie usuwa dane Exif po przesłaniu zdjęć.

Większość wtyczek do optymalizacji obrazu (w tym Imagify, ShortPixel, Kraken, EWWW i Smush) ma opcję automatycznego usuwania danych EXIF. Oto ustawienia Imagify…

Imagify Usuń dane EXIF

11. Optymalizacja obrazu Cloudflare

Cloudflare ma również kilka sposobów optymalizacji obrazów. Mirage i polski znajdują się w twoim Ustawienia prędkości Cloudflare podczas gdy ochrona Hotlink znajduje się w twoim Ustawienia Scrape Shield.

Cloudflare Mirage (Funkcja Pro) – zmniejsza liczbę żądań obrazu, opóźnia ładowanie obrazów i skraca czas ładowania obrazów na urządzeniach mobilnych z powolnymi połączeniami sieciowymi. Oto więcej szczegółów…

  • Zmienia rozmiar zdjęć na podstawie urządzenia / połączenia użytkownika. Gość o słabym połączeniu otrzyma mniejszą wersję (niższą rozdzielczość), dopóki nie wróci na większą przepustowość.
  • Zmniejsza liczbę żądań – zamiast wysyłać wiele żądań dla wszystkich zdjęć w witrynie, Mirage łączy je w jedno żądanie, dzięki czemu odwiedzający mogą natychmiast zobaczyć obrazy.
  • Leniwy ładuje obrazy (ładuje je tylko wtedy, gdy użytkownik przewinie w dół i faktycznie zobaczy obraz).

Cloudflare Image Mirage

Cloudflare polski (Funkcja Pro) – usuwa dane EXIF ​​i kompresuje obrazy.

Cloudflare Image Polish

Cloudflare Hotlink Protection – zapobiega kopiowaniu twoich zdjęć i wklejaniu ich na własnej stronie internetowej, która (ponieważ nadal udostępniasz ten obraz), zużyje przepustowość.

Cloudflare Hotlink Protection

12. Leniwe ładowanie obrazów

Opóźnia to ładowanie obrazów, dopóki użytkownik nie przewinie strony i nie zobaczy widocznego obrazu. Chociaż poprawia to początkowe czasy ładowania, ciągłe ładowanie zdjęć podczas przewijania może być bardzo denerwujące. Osobiście ładuję tylko leniwe filmy, ponieważ ładowanie ich zajmuje dużo więcej czasu niż zdjęć.

Możesz użyć Wtyczka Lazy Load, Wtyczka Lazy Load For Videos, lub użyj WP Rocket…

WP-Rocket-Lazy-Load

13. Zapisz jako poprawny format

PNG vs. JPEG – PNG jest nieskompresowany (większy rozmiar pliku) i powinien być używany w prostych obrazach bez dużej liczby kolorów. JPEG to skompresowany (mniejszy rozmiar pliku), który nieznacznie obniża jakość obrazu, ale ma mniejszy rozmiar i jest używany w obrazach z dużą ilością kolorów. GIMP i inne programy do edycji obrazów powinny automatycznie używać poprawnego formatu, ale nadal warto o tym wiedzieć.

jpg_vs_png

Ilustracja autorstwa Labnol

14. Nazwy plików obrazów

Wyszukiwarki używają zarówno tekstów alternatywnych, jak i nazw plików graficznych, więc nazwij swoje pliki przed przesłaniem ich do WordPress. Jeśli używasz wtyczki, że automatycznie dodaje tekst alternatywny na podstawie nazwy pliku, wystarczy nazwać swoje pliki! Nie wpisuj słów kluczowych, po prostu opisz obraz.

Nazwy plików obrazów etykiet

15. Tekst alternatywny

Powinny być takie same jak nazwa pliku obrazu. Możesz użyć Wtyczka Automatic Image Alt Attributes aby automatycznie użyć nazwy pliku jako tekstu alternatywnego. Tak długo, jak używasz odpowiednich obrazów, niektóre z nich powinny oczywiście zawierać (bity) słowa kluczowego… nie ma absolutnie żadnego powodu, aby umieszczać słowa kluczowe w obrazach, co grozi kara za upychanie słów kluczowych.

Automatycznie dodawaj tekst alternatywny do obrazów – Użyj Wtyczka Automatic Image Alt Attributes. Teraz za każdym razem, gdy dodasz obraz, wtyczka doda tekst alternatywny, taki sam jak nazwa pliku…

alt ="WP-Fastest-Cache-Plugin" szerokość ="577" wysokość ="247" />

Znajdź brakujący tekst alternatywny – Screaming Frog to darmowe narzędzie, które pokazuje wszystkie obrazy bez tekstu alternatywnego.

  • Pobieranie Screaming Frog SEO Spider
  • Wejdź na swoją stronę i kliknij „Start”, aby zaindeksować witrynę
  • Kliknij kartę obrazów
  • Przejdź do Przegląd → Brak tekstu alternatywnego (patrz poniżej)
  • Znajdź te obrazy na swojej stronie i dodaj tekst alternatywny

Tekst brakujący obraz - krzycząca żaba

16. Otwórz wykres (Facebook + Twitter)

To sprawia, że ​​format zawartości jest poprawnie wyświetlany podczas udostępniania na Facebooku / Twitterze, w szczególności twój obraz, ponieważ obie sieci używają niestandardowych wymiarów, aby go wyświetlić, w przeciwnym razie będzie wyglądać śmiesznie.

udostępnienie na Facebook

Jeśli używasz Yoast, przejdź do ustawień „Społecznościowych” i włącz opcję Otwórz wykres na Facebooku / Twitterze…

Yoast-Social-Meta-Data

Teraz edytuj stronę / post, a następnie kliknij link „udostępnij” w Yoast, a zobaczysz opcje przesyłania niestandardowych zdjęć do Facebooka (szerokość 1200 x 628 wysokości) i Twittera (szerokość 1024 x 512 wysokości).

Optymalizacja yoast-social-media

17. Obrazy w polecanych fragmentach

Polecane fragmenty mają miejsce, gdy Google wyświetla fragmenty treści u góry wyników wyszukiwania i może (ale nie jest to gwarantowane) dołączyć obraz. Google pobierze je z wyników pierwszej strony, jednak od nich zależy, czy będą wyświetlać polecany fragment lub obraz. Dzięki temu fragment kodu pojawia się dwa razy i jest niesamowitym sposobem na uzyskanie dużego ruchu.

3 rodzaje polecanych fragmentów

  • Odpowiedzi
  • Stoły
  • Listy

Polecane fragmenty obrazu

Jak uzyskać polecane fragmenty w Google

  • Kieruj na słowo kluczowe tam, gdzie ludzie chcą zwięzły odpowiedź
  • Posługiwać się Eksplorator słów kluczowych Moz do identyfikacji słów kluczowych pytań
  • Użyj odpowiedzi Publiczne, aby znaleźć jeszcze więcej słów kluczowych do pytania
  • Wybierz, czy odpowiedzią powinien być akapit, lista czy tabela
  • Zaprojektuj ładną grafikę (lub zrób zdjęcie) opisującą słowo kluczowe
  • Użyj optymalnej długości postaci (patrz zdjęcie poniżej zrobione z Moz)
  • Twórz treści oparte na faktach z referencjami jakości (linki, grafika itp.)
  • Kieruj na słowa kluczowe, które mają już opisany fragment, ale wykonują słabą robotę
  • Jeśli szukasz pola odpowiedzi, skieruj słowo kluczowe za pomocą dopasowania ścisłego
  • Upewnij się, że jesteś na pierwszej stronie dla słowa kluczowego, jeśli nie, popraw treść

Optymalna długość wyróżnionych fragmentów

18. Dane strukturalne

Obrazy można wykorzystać w uporządkowane dane (i odznaki) dla następujących typów treści:

Fragment rozszerzony wideo

Fragmenty bogate w przepisy

Fragment rozszerzony produktu

Jakiej wtyczki Rich Snippets powinienem użyć?
używam WP Review Pro MyThemeShop (tutaj jest strona, z której korzystam), która obsługuje 14 typów danych, w tym przepisy i recenzje produktów. Kiedyś korzystałem z fragmentów rozszerzonych WP, ale programista porzucił wtyczkę i nie była aktualizowana od ponad 2 lat, a Wtyczka All In One Schema jest po prostu nudny (brak opcji i stylizacji). WP Review Pro jest bardzo łatwy w użyciu.

19. Obrazy w stylu

Nie zapomnij stylizować swoich zdjęć! Używam granic na większości moich.

  • Tytuły obrazów
  • Linki do obrazów
  • Granice obrazu
  • Podpisy pod zdjęciami

20. Zmień rozmiar GIF-ów

Podobnie jak w przypadku zmiany rozmiaru obrazów do odpowiednich wymiarów, pliki GIF również powinny być zmieniane (użyj GIF GIF).

Zmień rozmiar GIF…

Zmiana rozmiaru plików GIF

Następnie skompresuj…

Kompresuj pliki GIF

Wynik :-)

Zoptymalizuj Dog GIF

21. Cache Gravatars

Jeśli masz posty z dużą ilością komentarzy, Gravatars może całkowicie zepsuć twój raport. Możesz je wyłączyć, łamać komentarze, aby wyświetlać tylko określoną liczbę komentarzy lub wypróbować wtyczkę pamięci podręcznej Gravatar. Konieczne może być przetestowanie, ponieważ niektóre wtyczki nie działają w niektórych witrynach.

  • Gravatars z pamięci podręcznej (Optymalny, Harry’ego, lub Pamięć podręczna FV Gravatar)
  • Całkowicie wyłącz Gravatars
  • Ustaw domyślnego Gravatar na pusty
  • Usuń komentarze, które nie dodają wartości
  • Ustaw domyślnego Gravatar na niestandardowy obraz na twoim serwerze
  • Ogranicz obrazy Gravatar do mniejszych wymiarów (np. 32px)
  • Paginuj komentarze w WP Wyłącz, aby wyświetlać tylko 20 komentarzy na raz
  • Jeśli nic z tych nie działa, sprawdź Samouczek Gravatars buforowania WP Rocket

Cache-Gravatar-Images

22. Unikaj osadzania obrazów z zewnętrznych stron internetowych

Zawsze przesyłaj zdjęcia do swojej witryny, nigdy nie kopiuj / wklej ich. W przeciwnym razie otrzymujesz dodatkowe żądania, ponieważ obraz nie jest hostowany na twoim serwerze, więc musi pobrać go z innego miejsca.

23. Narzędzia do optymalizacji obrazu

Unikaj używania wtyczek ze zduplikowanymi funkcjami – Imagify, ShortPixel, Kraken, EWWW i Smush w zasadzie robią to samo (kompresja bezstratna, usuwanie danych EXIF, zmiana rozmiaru zdjęć). WP Rocket ma opcje leniwego ładowania, buforowania i CDN (i czyszczenia bazy danych + lokalnego hostingu Google Analytics), których nie ma większość wtyczek pamięci podręcznej, co oszczędza Ci korzystania z dodatkowych wtyczek.

Często Zadawane Pytania

&# x2705; Jak naprawić błędy optymalizacji obrazu w GTmetrix?

Bezstratnie kompresując je za pomocą wtyczki takiej jak ShortPixel, Imagify lub Smush. Używam ShortPixel, ponieważ zawsze naprawia ten błąd w GTmetrix.

&# x2705; Jak naprawić błędy Serve Scaled Image w GTmetrix?

Oznacza to, że musisz przyciąć / zmienić rozmiar zdjęć do odpowiednich wymiarów. Jeśli obrazy są zbyt duże, GTmetrix wyświetli błędy wyświetlania skalowanych obrazów i poda prawidłowe wymiary, do których należy zmienić rozmiar.

&# x2705; Jak naprawić błędy Określ wymiar obrazu w GTmetrix?

Wyświetl kod HTML obrazu i sprawdź, czy ma określoną szerokość i wysokość, jak pokazano w tym samouczku.

&# x2705; Wszelkie inne sposoby na szybsze ładowanie obrazów?

Usunięcie danych EXIF ​​i użycie CDN do obsługi zdjęć zrobi największą różnicę poza zaleceniami w GTmetrix.

&# x2705; Która optymalizacja obrazu jest najlepsza?

Używam ShortPixel, ponieważ praktycznie nie ma utraty jakości i naprawia element Optymalizuj obrazy w GTmetrix.

Co myślisz?
Czy Twój raport GTmetrix wygląda trochę lepiej? Daj mi znać w komentarzach! A jeśli potrzebujesz więcej wskazówek, które zapewnią Ci jeszcze lepsze wyniki / czasy ładowania, zobacz mój pełny przewodnik prędkości WordPress.

Twoje zdrowie,
Tomek

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map