Uwaga: Poniższy artykuł pomoże Ci w: Jak naprawić ostrzeżenie „Prawidłowo rozmiar obrazów” w WordPress
Obrazy są trudne. Każda witryna ich potrzebuje, czy to na stronach produktów, czy w postach na blogu, ale łatwo je pomylić.
W szczególności obrazy mogą być bardzo, bardzo duże. Typowy smartfon może robić zdjęcia, które są szczerze mówiąc ogromne, zwłaszcza jeśli weźmie się pod uwagę, że zaledwie 10-20 lat temu zdjęcie wielkości znaczka pocztowego zajmowało kilka minut.
Łatwy dostęp do dużych obrazów, łatwe przeglądanie na dużych ekranach komputerów i łatwy dostęp do szybkiego Internetu dla wielu z nas oznaczają, że możemy nie myśleć o obrazach jako o prawie takim wpływie, jaki wywierają.
Ale potem jedziesz na wieś i próbujesz użyć smartfona za pośrednictwem usługi LTE do przeglądania strony internetowej, i widzisz, że obrazy przekraczają limit czasu podczas ładowania, widzisz strony internetowe pozbawione treści, ponieważ zdjęcia się nie ładują, i zdajesz sobie z tego sprawę.
Ponad 50% współczesnego przeglądania stron internetowych odbywa się na urządzeniach mobilnych. I choć dostępność szybkiego internetu szybko rośnie, wciąż nie jest on dostępny wszędzie. Czy wiedziałeś o tym prawie 25% gospodarstw domowych albo te miliony nadal korzystać z usługi dial-up?
Pamiętaj, że internet nie jest tylko dla ludzi z dostępem do gigabitowego światłowodu w sercu Doliny Krzemowej. Internet jest dla wszystkich, co oznacza osoby korzystające z wolnych, nieregularnych łączy, osoby przeglądające Internet przez satelitę itp.
Co to wszystko ma wspólnego z obrazami?
Obrazy są duże. Nie tylko w wymiarach; obrazy mają duży rozmiar pliku. Średni rozmiar pliku obrazów jest coraz większyale w 2022 roku nadal będą to średnio tylko 2-3 megabajty. Witryna, nawet w pełni funkcjonalna z mnóstwem treści, nie będzie miała więcej niż kilka megabajtów.
Teraz zastanów się, jak duży jest obraz. Pojedyncze zdjęcie może być kilka razy większe niż cała strona internetowa, a strona internetowa może zawierać wiele zdjęć. Nic dziwnego, że obrazy mogą spowalniać strony internetowe o wiele rzędów wielkości.
W tym zjawisku wkraczają zasady Google. Google ustawił „szybko ładujące się strony” i kilka wskaźników czasu ładowania w Core Web Vitals jako kluczowe czynniki rankingu wyszukiwania. Im wolniej ładuje się strona, tym bardziej wpłynie to na ranking wyszukiwania. Jeśli ktoś próbuje odwiedzić Twoją witrynę z jednym lub dwoma paskami usługi telefonii komórkowej, nadal powinien być w stanie zobaczyć Twoją witrynę bez czekania 30 sekund, zanim zacznie widzieć ruch.
Aby ułatwić optymalizację, Google udostępnia narzędzie o nazwie Statystyki PageSpeed. PageSpeed Insights skanuje Twoją witrynę i określa, jak szybko się ładuje, zarówno w przypadku wersji mobilnej, jak i stacjonarnej. Audytują Twoją witrynę pod kątem dziesiątek potencjalnych problemów i dostarczają raport z wszelkimi wykrytymi problemami. Jednym z bardziej powszechnych problemów jest błąd „Prawidłowo rozmiar obrazów”.
Ten samouczek pomoże Ci rozwiązać ten problem raz na zawsze. Zacznijmy!
Co oznacza „obrazy o odpowiednim rozmiarze”?
Jeśli w PageSpeed Insights pojawia się ostrzeżenie o „właściwym rozmiarze obrazów”, prawdopodobnie chcesz wiedzieć, co to jest i jak możesz temu zaradzić. W końcu, jeśli chcesz osiągnąć wynik PSI powyżej 90, musisz rozwiązać jak najwięcej problemów z ich czytaniem.
Zanim zagłębię się w to, czym jest ten błąd i co on oznacza, chcę powiedzieć jedną rzecz: nie jest to absolutne zerwanie umowy, jeśli masz to ostrzeżenie.
Ten problem nie obciąża Twojego SEO, a naprawienie go nie wyniesie Cię na pozycję nr 1. Rozwiązanie tego problemu pomoże skrócić czas ładowania strony i podstawowe wskaźniki internetowe, ale nie będzie miało ogromnego, dramatycznego efektu – to jeden z setek czynników rankingowych.
Więc jaki jest problem?
Gdy prześlesz obraz do WordPress, platforma automatycznie wygeneruje kilka różnych rozmiarów wersji obrazu do użycia, które możesz następnie określić na blogu z obrazami, który dodasz do swojej witryny. Ta funkcja umożliwia wybór dużej, średniej, małej lub miniaturowej wersji obrazu do wyświetlenia.
Każda inna zmiana rozmiaru w witrynie – na przykład, gdy witryna jest ściśnięta za pomocą responsywnego projektu na urządzeniu mobilnym – WordPress może skorzystać z wtyczek lub niestandardowego kodu, aby zamiast tego wyświetlać te odchudzone wersje miniatur.
Oznacza to, że możesz mieć obraz o wymiarach takich jak 1440 x 1080, z kodem, który spowoduje wyświetlenie go w rozmiarze 370 x 278 na urządzeniu mobilnym. To ogromna różnica! Ten dodatkowy rozmiar jest niepotrzebny na małych ekranach, ale oznacza, że oryginalne pliki obrazów są ogromne. Funkcja tworzenia wielu miniatur jest podstawową funkcją WordPress, ale WordPress nie zamienia ich w zależności od urządzenia i jesteś zmuszony wybrać jeden rozmiar podczas wstawiania obrazu – o tym za chwilę.
Co ważniejsze, wiele nowoczesnych projektów stron internetowych ma spory obraz na części strony widocznej na ekranie, który towarzyszy tytułowi i wstępowi posta. Ten ogromny obraz wygląda doskonale na pulpicie, ale musi ładować się z przodu i na środku, co wymaga czasu. Niszczy to Twoje pierwsze i największe wyniki malowania treści na urządzeniach mobilnych, może powodować skumulowaną zmianę układu i generalnie niszczy podstawowe funkcje mobilne.
Jedna z moich testowych witryn uzyskała 98 punktów w PageSpeed Insights na komputerze, ale zaledwie 76 punktów na urządzeniach mobilnych, i to prawie wyłącznie dlatego, że te widoczne na ekranie obrazy nie są zoptymalizowane pod kątem przeglądania na urządzeniach mobilnych. To niesamowita różnica!
W skrócie: kiedy Google skanuje Twoją witrynę mobilną w poszukiwaniu PageSpeed Insights, robi to, symulując sieć komórkową 4G ze słabą obsługą i używając Moto G4 (lub jej emulowanej wersji), więc używa przestarzałego „sprzętu”.
Ale ponieważ miliony ludzi w całym kraju nadal używają starego sprzętu, jest to realistyczna symulacja tego, czego może używać ktoś w sytuacji pośrodku drogi.
Google’a oczekiwanie na obrazy w responsywnym projekcie jest stosunkowo niewielka. W szczególności porównują rozmiar renderowanego obrazu (tego, co widzisz) z rozmiarem rzeczywistego ładowanego pliku obrazu. Jeśli wystąpi jakakolwiek znacząca różnica w wymiarach lub więcej niż 4 KB w rozmiarze pliku, Google oznaczy to jako problem, który należy rozwiązać, aby poprawić wygodę użytkownika.
Niestety nie ma prostego pola wyboru, które można kliknąć, aby to naprawić w WordPress. Większość motywów WordPress została zaprojektowana w celu ułatwienia skalowania obrazu i nie wierzy, że skalowanie jest z natury złe. Z drugiej strony Google woli, aby obrazy były jak najbardziej zbliżone do rozmiaru wyświetlanego. Po co zawracać sobie głowę ładowaniem zdjęcia o szerokości 3000 pikseli na ekranie o szerokości zaledwie 1170 pikseli? Twoi użytkownicy właśnie czekali trzy razy dłużej, niż musieli, i wyszukiwarki to widzą.
Cztery możliwe rozwiązania
Badając (i naprawiając) błąd prawidłowego rozmiaru obrazów WordPress, odkryłem kilka możliwych rozwiązań.
1. Rozwiązanie pierwsze jest na razie go zignorować i najpierw naprawić bardziej krytyczne problemy. Jeśli możesz zająć się innymi istotnymi kwestiami w PageSpeed Insights, często możesz osiągnąć ponad 90 w narzędziu bez rozwiązania problemu. W rzeczywistości na tej stronie testowej, o której wspomniałem, wersja komputerowa z wynikiem 98 zawiera błąd, podczas gdy wersja mobilna z wynikiem 76 nie. Dziki!
Czy ignorowanie tego to dobry pomysł? Prawdopodobnie nie. Głównie sprowadza się to do dwóch rzeczy: ile masz czasu na majsterkowanie i jakie inne możliwe problemy możesz rozwiązać zamiast tego.
Wolałbym raczej majstrować i podnieść te 76 do ponad 90, niż uzyskać 98 do 99 w Google PageSpeed Insights.
2. Rozwiązanie drugie polega na ręcznej zmianie rozmiaru obrazu i kompresji obrazu. Możesz to zrobić za pomocą aplikacji takich jak Imagify, Shortpixel lub Smush; Napisałem tutaj o wielu różnych opcjach, więc przeczytaj to, jeśli chcesz zbiorczo zmienić rozmiar obrazów. Jedna uwaga: ta opcja może wymagać przejrzenia i zastąpienia wszystkich polecanych obrazów oraz wszelkich innych nowych obrazów, które powodują problemy. Jednak większość z tych narzędzi będzie proaktywnie zmieniać rozmiar każdego nowego zdjęcia przesłanego do witryny.
3. Rozwiązanie trzecie używa na przykład wtyczek do automatycznego zamiany mniejszych obrazów na wersję miniatur generowaną przez WordPress. To rozwiązanie może powodować problem z przestrzelaniem i używaniem zbyt małych zdjęć w niektórych przypadkach, ale często jest to lepsze niż używanie zbyt dużych obrazów, co może działać na Twoją korzyść. Możesz także użyć wtyczek do leniwego ładowania obrazów, co jest praktyką polegającą na ukrywaniu obrazów, które są poza zasięgiem wzroku użytkownika.
Obrazy ładowane z opóźnieniem zaczynają się ładować dopiero po ich wyświetleniu. Jeśli masz stronę z dużą ilością obrazów, wszystkie mogą próbować ładować się jednocześnie, podczas gdy tak naprawdę potrzebujesz tylko obrazów nad zakładką, aby załadować je jako pierwsze.
4. Rozwiązanie czwarte polega na zagłębieniu się w chwasty motywu WordPress, zidentyfikowaniu wielu różnych punktów przerwania i określeniu obrazów źródłowych dla każdego z zapytań o media CSS. Ta opcja jest przesadą; praktycznie zagwarantuje najlepsze możliwe wyniki dla każdego na dowolnym urządzeniu mobilnym, ale Google zwykle używa jednego symulowanego urządzenia mobilnego do PageSpeed Insights (i przypuszczalnie ich indeksu). To rozwiązanie jest najlepsze dla witryn, które nie mają bloga ani które mają tylko kilka stron wewnętrznych. Nie jest to realistyczna opcja, jeśli masz setki lub tysiące stron.
Dlaczego więc chcesz to zrobić? To zależy od twojego celu. Jeśli chcesz, aby każdy użytkownik mobilny miał jak najlepsze wrażenia, ta opcja pomoże Ci osiągnąć ten cel. Z drugiej strony, jeśli chcesz uzyskać najlepsze wskaźniki SEO według Google, dodatkowa praca (i korzyści) nie wpłynie na twój ranking. To zależy od Ciebie, co chcesz zrobić.
Ponieważ rozwiązanie pierwsze polega na zignorowaniu problemu, a rozwiązanie drugie jest zarówno nużące, jak i zostało omówione gdzie indziej, resztę tego postu skupię na rozwiązaniach trzecim i czwartym.
Używanie wtyczek do rozwiązywania błędów prawidłowego rozmiaru obrazów
Jeśli mamy być szczerzy, ta opcja jest tą, z której skorzysta 90% z was. Jest szybki i stosunkowo łatwy, a także przeznaczony specjalnie do tego, czego szuka Google. Jeśli Google zmieni sposób mierzenia responsywności strony mobilnej, Twoje obrazy mogą wymagać poprawek, ale do tego momentu powinno to działać dobrze.
Pierwszą wtyczką, której chcesz użyć, jest Wyróżniony obraz mobilny, który można znaleźć na tej stronie GitHub. Jak to działa?
Kiedy przesyłasz obrazy do WordPress, automatycznie przetwarza te obrazy i generuje kilka różnych rozmiarów. Następnie wtyczka próbuje obsłużyć najlepszy rozmiar dla każdego użytkownika. Niestety, przy responsywnym projekcie mobilnym nie zawsze jest on dokładny, ale w większości przypadków wykonuje za Ciebie ciężkie zadania.
Wtyczka dodaje nową linię do listy rozmiarów używanych przez WordPressa i daje opcję „wyróżnionego obrazu mobilnego” pod standardowym polem „wyróżnionego obrazu” w tworzonym poście. Jeśli pozwolisz mu działać, automatycznie zastąpi wszystkie polecane obrazy mobilne miniaturową wersją Twojego polecanego obrazu.
Jeśli jednak chcesz, możesz również określić dokładny obraz, który ma się wyświetlać na urządzeniu mobilnym, w tym zmienić go w inną i niepowtarzalną grafikę. Nie polecałbym tworzenia go wyjątkowym – Google lubi, aby różne rozdzielczości witryny były takie same – ale jest to opcja, jeśli chcesz z niej korzystać.
Jeśli powyższa wtyczka nie rozwiąże problemu, możesz spróbować czegoś takiego Tylko responsywne obrazy.
Ta opcja jest bardziej szczegółową wtyczką, która pomaga konwertować wszystkie twoje obrazy na responsywne obrazy z większą ilością niuansów, niż zwykle pozwala na to WordPress. Wykrywa rozdzielczość ekranu użytkownika i automatycznie zamienia każdy adres URL obrazu na rozmiar miniatury, który najlepiej pasuje do jego urządzenia. Ta wtyczka jest genialna, ponieważ te miniatury obrazów już istnieją w Twojej witrynie i są automatycznie generowane przez rdzeń WordPress; ta wtyczka korzysta z tego i wyświetla miniatury, które najlepiej pasują do rozmiaru ekranu odwiedzających. Bardzo mądry.
Druga część tego procesu to optymalizacja pozostałych obrazów w Twojej witrynie. Leniwe ładowanie obrazów w części strony widocznej na ekranie znacznie przyspiesza ładowanie strony. Uwielbiam za to WP Rocket; mają tę funkcję wbudowaną w ich podstawową wtyczkę, płatną wtyczkę lub możesz użyć darmowy spinoff z leniwym ładowaniem tutaj. Na przykład, jeśli użyjesz wtyczki „Wyróżniony obraz mobilny” i wyłączysz go z leniwego ładowania, a następnie leniwie załadujesz resztę, PageSpeed Insights zobaczy tylko Twój wyróżniony obraz, który jest już zoptymalizowany pod kątem urządzeń mobilnych.
Jak widać, istnieje więcej niż jedno rozwiązanie tego problemu. Wtyczki czasami bardzo ułatwiają życie.
Ręczna edycja WordPressa w celu rozwiązania błędów prawidłowego rozmiaru obrazów
Drugą opcją jest ręczne znalezienie „punktów przerwania” w rozmiarze ekranu, w których Twój responsywny projekt dostosowuje się do różnych mobilnych rzutni.
Polecam używać Responsywny obraz Linter audytu Twoich zdjęć. Ten skrypt jest skryptozakładką; to znaczy fragment kodu uruchamiany po skopiowaniu go do paska adresu. Wszystko, co musisz zrobić, to dodać link do zakładek na stronie, a następnie, gdy jesteś na swojej stronie, aktywować zakładkę. Uruchomi skrypt, przeprowadzi audyt Twojej strony i wygeneruje raport ze wszystkich Twoich obrazów na różnych rozmiarach ekranu. Kod powie ci, które obrazy mają problemy, w jakich wymiarach i jak je naprawić.
Po uzyskaniu tego raportu musisz dowiedzieć się, jakie wymiary i rozmiary obrazu należy zoptymalizować. Będziesz musiał wygenerować te obrazy i przesłać je na swój hosting oraz ponownie wygenerować dla nich miniatury. Następnie musisz zarejestrować więcej rozmiarów obrazów w swojej funkcji add_image_size() i odpowiednio wyświetlać obrazy dla różnych rozmiarów rzutni.
Możesz przeczytać więcej dokumentacji na temat tego procesu na tej stronie. Pamiętaj, że będzie to dość duży projekt z dużą ilością czasu spędzonego na wykonywaniu skryptów, jeśli Twoja witryna WordPress ma więcej niż kilkadziesiąt stron, więc odpowiednio zaplanuj swój czas.
Jeśli ta opcja jest dla Ciebie zbyt techniczna, nie martw się. Poprzednia opcja oparta na wtyczce WordPress zbliży cię wystarczająco blisko – to jest tylko dla moich kolegów webmasterów, którzy chcą rozważyć każdą możliwą opcję.
Jeśli udało Ci się usunąć ostrzeżenie „Obrazy o odpowiednim rozmiarze”, jest kilka rzeczy, które możesz zrobić, aby jeszcze bardziej poprawić swój wynik i przekroczyć 90 w Google PageSpeed.
Na przykład:
- Zaimplementuj CDN. Poprawi to twój czas FCP (pierwsze malowanie treści) i czas LCP (największe malowanie treści). Jeśli sieć dostarczania treści może dostarczyć użytkownikowi obraz szybciej niż Twój dostawca usług hostingowych, oznacza to, że Twoja witryna będzie ładować się szybciej, co poprawi Twoje ogólne wyniki. Obrazy są zwykle jednymi z najcięższych elementów na stronie internetowej, więc umieszczenie ich na hiperszybkim serwerze jest rozsądne. Przepustowość jest również tania jak barszcz; nasza usługa KeyCDN kosztuje nas kilka dolarów miesięcznie.
- Zmień formaty obrazów. Unikaj plików PNG i trzymaj się głównie plików JPG. Jeśli zdecydujesz się skorzystać z płatnej wtyczki do optymalizacji obrazu, takiej jak Imagify, nie tylko zoptymalizuje ona Twoje obrazy, ale także przekonwertuje je do formatu .webp. Użycie formatu obrazu .webp pozwoli pozbyć się ostrzeżenia. Imagify pomoże Ci również skompresować obrazy i zmienić rozmiar pełnowymiarowych obrazów, jeśli są one zbyt duże, co pomaga pozbyć się ostrzeżenia. Nadal będzie tworzyć kopie zapasowe obrazów w wysokiej rozdzielczości, a także oryginalnych formatów obrazów, więc nie martw się o utratę oryginalnych plików.
- Zdefiniuj swoje obrazy w kodzie HTML. Ustaw określony wymiar wysokości i szerokości i sprawdź pliki CSS motywu WordPress, aby upewnić się, że są odpowiednio skalowane w każdej rozdzielczości. Chcesz również upewnić się, że obrazy mają zdefiniowaną „maksymalną szerokość”, aby nie wylewały się poza ekran. Bez określonej wysokości i szerokości Twoje obrazy spowodują wyświetlenie ostrzeżenia w statystykach Google Lighthouse i PageSpeed:
- Ładuj tylko obrazy siatkówki na ekranach siatkówki. Możesz sprawdzić ekrany Retina za pomocą następującego zapytania CSS o media:
@media (-webkit-min-device-pixel-ratio: 2), (min-rozdzielczość: 192 dpi) { - Leniwe ładowanie obrazów. Leniwe ładowanie obrazu uniemożliwi ładowanie obrazów poza ekranem, dopóki użytkownik nie przewinie do nich. Jeśli obrazy w wyższej rozdzielczości znajdują się w dalszej części strony, może to od razu rozwiązać problem. Usunie również błąd.
Te opcje powinny pomóc rozwiązać większość potencjalnych problemów z obrazami, które nie ładują się w prawidłowych wymiarach. Po wdrożeniu poprawki należy zwrócić uwagę na inne podstawowe wskaźniki sieciowe i upewnić się, że wszystkie zostały uporządkowane.
W zależności od rozmiaru Twojej witryny i ilości rzeczywistych danych, które Google może zbierać, aktualizacja podstawowych wskaźników internetowych w Search Console może zająć miesiące, a nawet lata, dlatego przeprowadzaj testy i staraj się, aby Twoja witryna była do zaliczenia.
