W artykule:
Obrazy są jednym z najważniejszych elementów w Twojej witrynie, a ich prawidłowe wykonanie może być różnicą między popularną witryną, która zapewnia niesamowite wrażenia użytkownika, a witryną, która nie generuje ruchu ani konwersji. Ale obrazy są, dobrze, skomplikowane.
Jest wiele, co musisz zrobić, aby uzyskać je idealne, aby uzyskać jak najwięcej korzyści.
W tym ostatecznym przewodniku optymalizacji obrazu WordPress podam Ci wszystkie informacje potrzebne do optymalizacji zdjęć. Przejrzymy wszystko.:
- Jak przygotować zdjęcia przed przesłaniem
- Jak zoptymalizować WordPress dla swoich obrazów
- Jak zidentyfikować obrazy, aby poprawić SEO
- Jak skutecznie służyć obrazom
Omówimy wszystkie ważne podpowiedzi i informacje, które udostępniliśmy w naszych poprzednich postach dotyczących optymalizacji obrazu, tak zwięźle, jak to możliwe (w tym nasz kompletny przewodnik po SEO dla obrazów), więc w mgnieniu oka będziesz optymalizatorem obrazu WordPress. Jeśli chcesz o wiele dokładniejszego wyjaśnienia tych tematów, w całym tym poście zamieściłem linki do naszych szczegółowych samouczków.
Przygotowanie Zdjęć
- Komponowanie Obrazów
- Wymiarowanie i kadrowanie obrazów
- Jak obsługiwać skalowane obrazy
- Kadrowanie Obrazów
- Korzystanie z odpowiedniego formatu obrazu dla zadania
- O Plikach Graficznych
- Obrazy wektorowe
- Obrazy rastrowe
- Kompresja Stratna
- Kompresja bezstratna
- Typy Plików Obrazów
- JPEG
- PNG
- WebP
- SVG
- GIF
- O Plikach Graficznych
- Tytuły Obrazów
- Edytory Obrazów Zbiorczych
Optymalizacja zdjęć w WordPress
- WordPress Domyślne Rozmiary Obrazów
- Responsywne Obrazy
- Obrazy Siatkówki
- Pliki WebP Nowej Generacji
Image SEO
- Tytuł Obrazu
- Tekst Alt
- Tytuł Zdjęcia
- Inne elementy na stronie w pobliżu obrazu
- Mapa strony
- Tagi Social Media
Serwowanie Obrazów
- Leniwe Ładowanie
- Buforowanie Przeglądarki
- Sieci dostarczania treści, CDN
Jeśli zastanawiasz się, co jest najlepszym optymalizatorem obrazu WordPress, nie szukaj dalej niż nasz własny Smush Pro. Połącz go z Hummingbird i SmartCrawl SEO, ponieważ wszystkie trzy mogą znacznie poprawić wydajność twoich obrazów. Możesz wypróbować wszystkie trzy na swojej stronie z bezpłatnym okresem próbnym bez ryzyka.
Chcesz zoptymalizować obrazy na stronie o małym natężeniu ruchu, indywidualnej lub hobbystycznej? Posiadamy również darmową wersję Smush dostępną na WordPress.org.
Jak zoptymalizować obrazy
Zanim prześlesz obraz do WordPress, musisz upewnić się, że twój obraz jest najlepszy, gdy go wykonasz. Musisz go odpowiednio skomponować, idealnie dopasować, użyć odpowiedniego formatu obrazu i nadać mu opisową nazwę pliku.
Komponowanie Obrazów
Najważniejsze pytanie podczas tworzenia obrazów jest następujące:
Czy ten obraz jest konieczny?
Obrazy wymagają wielu zasobów, aby dostarczyć je odwiedzającym. Są to „drogie” zasoby witryny, więc nie powinieneś ich używać tylko do wypełnienia przestrzeni. Twórz oryginalne obrazy, które wzbogacają zawartość i korzystaj z niedrogich zasobów, takich jak nagłówki i tekst, zamiast obrazów, aby komunikować się i dodawać styl, gdy tylko to możliwe.
Nigdy nie dodawaj tekstu do zdjęć. Ta praktyka nie jest zgodna z najlepszymi praktykami dostępności, a jeśli Twoje obrazy zmniejszą się, aby reagowały na urządzenia mobilne, tekst będzie mniejszy i trudniejszy do odczytania. Ponadto obrazy z tekstem muszą być znacznie wyższej jakości, aby zachować najdrobniejsze szczegóły liter. Nie marnuj zasobów, zamiast tego utwórz tekst nad obrazami za pomocą CSS, aby uzyskać lepsze wyniki.
Wiem, że rezygnacja z obrazów jest trudna. Mogą naprawdę sprawić, że Twoja witryna będzie wyglądać świetnie, ale według badań nad wydajnością witryny, sesje, które konwertują użytkowników, miały 38% mniej obrazy niż sesje, które nie zostały przekonwertowane, więc więcej obrazów nie dodaje się do dolnej linii.
Wymiarowanie i kadrowanie obrazów
Jeśli chodzi o obrazy, rozmiar ma znaczenie! A większe nie jest lepsze. GTmetrix i Google PageSpeed Insights zalecają skalowanie obrazów w celu dopasowania do kontenera, w którym będą mieszkać,aby poprawić wydajność.
Obrazy, które są zbyt duże dla kontenera, muszą być ręcznie zmniejszane przez przeglądarkę. To marnuje czas i dane podczas ładowania stron internetowych, nie zapewniając żadnych korzyści w wydajności i jakości.
Jak zmniejszyć rozmiar obrazu w WordPress
Pierwszym krokiem jest użycie narzędzi programistycznych w przeglądarce, aby dowiedzieć się o różnych rozmiarach kontenerów obrazów w witrynie.
Obejrzyj nasz szybki samouczek, Jak wykryć nieprawidłowo wielkości obrazów w WordPress.
Następnie użyj edytora obrazów, aby zmienić rozmiar obrazu, aby dopasować go do największego kontenera, który będzie zamieszkiwał w Twojej witrynie. Jeśli chcesz używać obrazów Retina w swojej witrynie, musisz podwoić szerokość i wysokość największego kontenera. Porozmawiamy więcej o obrazach siatkówki poniżej.
Jeśli skalujesz nowy obraz w witrynie, pozostaje tylko przesłać obraz i użyć go w kontenerze, dla którego był przeznaczony. Jeśli poprawiasz istniejący obraz w witrynie, prześlij go i zastąp adres URL starego obrazu nowym.
Smush Pro może również automatycznie zmieniać rozmiar obrazów. Jeśli więc masz dojrzałą witrynę z dużą ilością obrazów, pozwól Smushowi zająć się skalowaniem. Wypróbuj Smush Pro za darmo.
Kadrowanie Obrazów
Podczas kadrowania obrazów spróbuj utworzyć ciaśniejsze kadrowanie i wyciąć nadmiar szczegółów i przestrzeni z obrazu.
Współczynniki 4:3 i 16: 9 są lepsze dla image SEO, więc jeśli twoim celem jest uzyskanie obrazu w rankingu w wyszukiwaniu obrazów, celuj w obraz, który nie jest panoramiczny lub wysoki i Chudy.
Korzystanie z odpowiedniego formatu obrazu dla zadania
Używasz PNGs do wszystkiego? Bądź szczery. Najlepszym sposobem na optymalizację obrazów w WordPress bez wtyczki jest użycie odpowiedniego formatu obrazu.
Każdy typ pliku został zaprojektowany dla konkretnego przypadku użycia i ma swoje mocne i słabe strony.
Dodatkowe funkcje plików graficznych (takie jak przezroczystość), niepotrzebne szczegóły i zbyt duża liczba kolorów-wszystko to powoduje uwędzenie obrazów. Czasami są one konieczne, a innym razem nie.
Kluczem jest użycie odpowiedniego pliku obrazu z odpowiednimi możliwościami do własnych potrzeb.
Przygotowaliśmy ściągawkę PDF do pobrania, abyś mógł się do niej odnieść! Kliknij tutaj, aby otrzymać kopię
WordPress Image Resize Kompresja
Istnieją dwa rodzaje typów grafiki obrazu, obrazy wektorowe i obrazy rastrowe.
Obrazy wektorowe są matematycznie generowane kształty geometryczne, które mogą być zmieniane bez utraty jakości.
Obrazy rastrowe składają się z małych bloków zwanych pikselami ułożonych na siatce. Obrazy rastrowe wyświetlają się w wysokiej jakości tylko w rozmiarze, w którym miały być wyświetlane lub mniejszym. W przeciwnym razie obraz pojawi się pikselowany.
Kompresja Obrazu WordPress
Inną rzeczą, o której należy pamiętać przy wyborze typu pliku obrazu, jest typ kompresji obrazu, którego każdy z nich używa, ponieważ wpłynie to na jakość obrazu, gdy jest dekodowany i pojawia się w witrynie.
Kompresja Stratna trwale usuwa dane obrazu, gdy obraz jest skompresowany. Niektóre szczegóły są niezauważalne dla ludzkiego oka, więc nie zawsze powoduje to widoczną utratę jakości.
Ogólnie rzecz biorąc, kompresja stratna w zakresie 75-100% utrzyma integralność i wysoką jakość obrazu, ale przy 75% obraz jest o połowę mniejszy. Większość sieci społecznościowych kompresuje swoje obrazy w zakresie 70-85% podczas ich przesyłania.
Kompresja bezstratna zachowuje wszystkie dane, więc nic nie jest tracone, a obraz może być odtworzony dokładnie bez utraty jakości. Minusem jest znacznie większy rozmiar pliku. Oto porównanie.
Typy Plików Obrazów
JPEG
Obrazy JPEG są najlepsze dla dużych zdjęć.
- Pliki JPEG są standardowym typem plików wytwarzanym przez kamery konsumenckie i urządzenia mobilne.
- Pliki JPEG mogą zawierać miliony kolorów i wykorzystują kompresję stratną, aby uzyskać mały rozmiar pliku.
- Są obsługiwane we wszystkich głównych przeglądarkach.
- JPEG nie obsługuje przezroczystości ani animacji.
PNG
Obrazy PNG są najlepsze, gdy zachowanie szczegółów (takich jak tekst zrzutu ekranu) jest krytyczne.
- Pliki png wykorzystują bezstratną kompresję obrazu, dzięki czemu są większe niż porównywalne pliki JPEG.
- Istnieją 3 rodzaje PNGs:
- PNG-8 obsługuje 256 indeksowanych kolorów i jest jak GIF PNGs.
- PNG-24 obsługuje 24-bitowe kolory, tworząc paletę milionów kolorów, dzięki czemu jest bardziej podobny do formatu JPEG.
- PNG-32 obsługuje 24-bitowe kolory oraz dodatkowy kanał alfa dla zaawansowanych możliwości przezroczystości.
- Wszystkie trzy typy PNG obsługują przezroczystość, ale robią to na różne sposoby. W tym poście możesz uzyskać pełne wyjaśnienie różnych typów PNG i sposobu, w jaki radzą sobie z przezroczystością.
WebP
WebP jest open-source format obrazu Google, który łączy najlepsze JPEG i PNG, ale o znacznie mniejszym rozmiarze pliku. Są bliscy szerokiego poparcia.
Istnieją dwa rodzaje plików obrazów WebP
- Pierwszy jest znany po prostu jako WebP i używa kompresji stratnej. To jak Wersja WebP JPEG.
- Drugi typ jest znany jako WebP Lossless i jest bardziej podobny do odpowiednika PNG, ponieważ używa kompresji bezstratnej.
Jeśli zastanawiasz się, jak utworzyć pliki WebP dla WordPress, możesz użyć wtyczki, aby to zrobić za Ciebie. W rzeczywistości Smush Pro CDN konwertuje obrazy na WebP. Jeśli ktoś odwiedzi Twoją witrynę w przeglądarce obsługującej WebP, Smush przekonwertuje Twoje obrazy i wyświetli obrazy WebP. Jeśli są w przeglądarce, która nie obsługuje WebP, otrzymają Twój codzienny JPEG lub PNG.
SVG
SVG to język znaczników oparty na XML, który umożliwia tworzenie dwuwymiarowych kształtów w celu tworzenia grafiki wektorowej. Najlepiej nadaje się do prostych kształtów, takich jak logo, wykresy, flagi, ikony i kształty geometryczne.
- Svg nie działa dobrze na zdjęciach.
- Są kompatybilne ze wszystkimi przeglądarkami.
- Ponieważ są technicznie językiem znaczników, WordPress domyślnie nie zezwala na pliki SVG, aby zapobiec wstrzyknięciu złośliwego oprogramowania. Należy zezwolić tylko zaufanym użytkownikom, którzy rozumieją ryzyko związane z korzystaniem z plików SVG, na korzystanie z nich w witrynie.
GIF
Gify są świetne do animowania głupich memów i nic więcej.
- Pliki GIF wytwarzają wyjątkowo duże rozmiary plików, zwłaszcza jeśli obraz zawiera animacje. W przypadku animacji pliki MP4 lub WebM mają mniejszy rozmiar pliku.
- Gify mają ograniczoną paletę kolorów 256 kolorów i obsługują przezroczystość.
- Są kompatybilne ze wszystkimi przeglądarkami.
- Nie ma konsensusu, jak je wymawiać, więc kto ich potrzebuje.
Tytuły Obrazów
Po wybraniu odpowiedniego formatu, w którym chcesz zapisać obraz, musisz zmienić domyślny tytuł obrazu wygenerowany przez aparat.
Nadaj swoim obrazom zwięzłe i opisowe tytuły. Użyj słów kluczowych, jeśli odpowiednio opisują obraz. Jeśli słowa kluczowe nie opisują obrazu, nie używaj ich w tytule obrazu. Pokażę Ci bardziej odpowiednie miejsce dla nich w sekcji SEO tego postu.
Edytory Obrazów Zbiorczych
Tworzenie partii obrazów dla nowej witryny lub powrót do rozwiązania wszystkich problemów z obrazami obecnie w witrynie może zająć dużo czasu. Na szczęście istnieje kilka narzędzi, które mogą pomóc w zbiorczym przetwarzaniu obrazu.
Lightroom Classic został zaprojektowany do zarządzania nieniszczącymi edycjami obrazów. Użyj go do skalowania zbiorczego, przycinania lub zmiany nazwy obrazów JPEG z aparatu.
Photoshop może pomóc w masowej edycji plików PNG lub JPEG. Użyj procesora obrazu lub utwórz własne akcje programu Photoshop, aby nagrać złożoną sekwencję zmian, a następnie zastosować je do innych obrazów.
Optymalizacja zdjęć w WordPress
Prawidłowe przygotowanie obrazów może zapobiec wielu problemom przed ich rozpoczęciem. Gdy już przygotujesz swoje zdjęcia, WordPress ma kilka niesamowitych funkcji, które pomogą Ci zarządzać zdjęciami i sprawić, by wyglądały jak najlepiej.
WordPress Domyślne Rozmiary Obrazów
Za każdym razem, gdy przesyłasz obraz do biblioteki multimediów WordPress, WordPress domyślnie tworzy następujący dodatkowy Rozmiar obrazu:
- Miniaturka
- Średni
- Średni Duży
- Duże
Jeśli szablon określa dodatkowe rozmiary obrazów dla strony archiwum, strony głównej itp. WordPress tworzy je również. WordPress zachowuje również oryginalny rozmiar, który przesyłasz i nadaje mu nazwę Pełna jak w pełnym rozmiarze.
Aby wykonać mniej pracy ręcznie zmieniając rozmiar obrazów dla różnych kontenerów w witrynie, możesz dostosować ustawienia domyślne w sekcji Media > ustawienia lub dodać niestandardowe rozmiary, aby mieć więcej opcji do wyboru. Po prostu unikaj przesadzania i tworzenia obrazów dla każdego możliwego celu, bo inaczej spalisz przestrzeń dyskową na serwerze hostingowym.
Po wprowadzeniu zmiany sposobu, w jaki WordPress tworzy dodatkowe obrazy, nie aktualizuje obrazów, które są już w bibliotece multimediów. Aby zmienić już przesłane obrazy, musisz użyć popularnej wtyczki Regenerate Thumbnails.
Jeśli wykonujesz którąkolwiek z poniższych czynności, musisz zregenerować miniatury:
- modyfikowanie domyślnych rozmiarów obrazów WordPress
- dodawanie niestandardowych rozmiarów obrazów lub
- przejście na nowy motyw, który ma różne niestandardowe rozmiary.
Responsywne Obrazy
Jednym z zastosowań dla wszystkich różnych rozmiarów obrazów jest to, że WordPress może obsługiwać responsywne obrazy.
Funkcja responsywnego obrazu została wprowadzona w wersji WordPress 4.4 i jest domyślnie włączona. Działa przy użyciu srcset atrybut, aby dać przeglądarce listę wielu obrazów w różnych rozmiarach do wyboru.
Zamiast pobierać i obsługiwać największy plik obrazu za każdym razem, przeglądarka ładuje plik o odpowiednim rozmiarze dla urządzenia. Jeśli odwiedzający korzysta z urządzenia mobilnego, otrzyma mniejszy obraz w srcset. Jeśli odwiedzają Twoją witrynę na stacjonarnym urządzeniu Retina, otrzymają ogromny, Pełnowymiarowy plik gotowy do siatkówki.
WordPress pisze srcset kod i dodaje obrazy do zestawu automatycznie, ale nadal dobrym pomysłem jest to, że nic w Twoim motywie lub wtyczkach nie zakłóca tego procesu w ramach audytu optymalizacji obrazu.
Obrazy Siatkówki
Retina i inne ekrany o wysokiej rozdzielczości mają 4x więcej pikseli. Aby zachować szczegółowość i ostrość obrazów na ekranach o wysokiej rozdzielczości, musisz utworzyć obrazy siatkówki z wystarczającą ilością danych, aby wypełnić wszystkie nowe piksele, a następnie przesłać je tylko do urządzeń Retina.
Jak obsługiwać obrazy siatkówki w WordPress
Krok 1: twórz obrazy o podwójnych wymiarach w pikselach
Aby utworzyć obrazy siatkówki w WordPress z wystarczającą ilością danych dla każdego piksela, musisz podwoić wymiary pikseli dla każdego przesłanego obrazu.
- Jeśli masz duży obraz bohatera o szerokości 1600px i wysokości 400px, musisz stworzyć obraz o szerokości 3200px i wysokości 800px.
- Jeśli szerokość Twojego bloga wynosi 800px, obrazy na Twoim blogu będą musiały mieć szerokość 1600px i tak dalej.
Wystarczy podwoić wymiary w pikselach, aby uzyskać największy możliwy rozmiar obrazu. Nie trzeba tworzyć obrazów o podwójnych wymiarach dla każdego możliwego rozmiaru responsywnego.
Krok 2: podawaj obrazy siatkówki do urządzeń Retina
Wariant 1: Jednym z lepszych sposobów serwowania obrazów siatkówki jest użycie srcset atrybut. Wystarczy dodać obrazy siatkówki do zestawu źródeł, którego WordPress używa do generowania responsywnych obrazów.
Wariant 2: Zainstaluj i skonfiguruj darmową wtyczkę WordPress Retina 2x.
Krok 3: Prześlij swoje obrazy siatkówki do WordPress i użyj ich w swojej witrynie
Gdy używasz obrazu Retina w witrynie, użyj odmiany obrazu, która jest o połowę większa od szerokości i wysokości pełnego rozmiaru.
Pliki WebP Nowej Generacji
Ponieważ obrazy nowej generacji, takie jak WebP, nie są powszechnie obsługiwane, możemy również użyć srcset do obsługi obrazów WebP dla kompatybilnych przeglądarek.
Najpierw musisz użyć konwertera WebP, aby przekonwertować istniejące obrazy w bibliotece multimediów, a także przyszłe przesyłanie. Następnie musisz określić, czy przeglądarka odwiedzającego obsługuje obrazy WebP.
Wreszcie możesz użyć srcset lub inną metodą serwowania obrazów WebP, jeśli są obsługiwane, lub starszym formatem plików, takim jak PNG lub JPEG, jeśli nie są.
Smush Pro może konwertować obrazy, które używają tag na swojej stronie do WebP i służyć im do kompatybilnych przeglądarek z jej CDN. Musisz jednak użyć innej metody dla obrazów tła CSS. Uzyskaj bezpłatny okres próbny i zobacz, jaka to różnica dla Twojej witryny.
Sprawdź poniższy film, aby znaleźć przykład użycia optymalizatora obrazu WordPress do obsługi obrazów nowej generacji.
Image SEO
Image SEO zyskało ostatnio na znaczeniu i istnieje wiele możliwości zwiększenia ruchu za pomocą obrazów. W przeciwieństwie do treści pisanych, w których duplikat treści jest karany, z obrazami, najlepiej zoptymalizowany obraz „wygra” w wynikach wyszukiwania i będzie najlepiej Sklasyfikowany.
Prawidłowa identyfikacja obrazów przy użyciu odpowiednich atrybutów HTML może pomóc w znalezieniu obrazów w wyszukiwaniu obrazów, nie wspominając o poprawie dostępności stron internetowych, co jest bardzo ważne.
Oto ważne atrybuty obrazów, które musisz wypełnić dla każdego obrazu.
Tytuł Obrazu
Tytuł obrazu w WordPress różni się od tytułu nazwy pliku. Tytuł pliku dodawany podczas tworzenia obrazu w programie Photoshop lub innym edytorze obrazów jest ważniejszy niż pole Tytuł obrazu w bibliotece multimediów WordPress. Ten pierwszy przyczynia się do SEO, ten drugi można całkowicie pominąć.
Tekst Alt
Tekst alternatywny jest ważny nie tylko dla SEO, ale także dla dostępności.
Aby napisać efektywny znacznik alt dla obrazu, należy napisać zwięzły opis, który komunikuje to, co zawiera obraz lub próbuje przekazać komuś, kto nie widzi obrazu, ponieważ korzysta z czytnika ekranu lub nie może go pobrać. Dodatkowo tekst alternatywny zastosowany w Tekst Alt atrybut zależy od typu obrazu używanego w treści.
Przeczytaj nasz kompleksowy przewodnik po pisaniu tagów alt obrazu w WordPress, aby uzyskać równowagę SEO i dostępności w sam raz.
Tytuł Zdjęcia
Podpisy i inny tekst otaczający obraz nadają mu kontekst. Pomagają również Google zrozumieć, o czym jest obraz. Nie wszystkie obrazy wymagają podpisu, ale podpisy działają podobnie do wywołań w tekście głównym. Ponieważ są one oddzielone od reszty tekstu i wyróżnione, są cztery razy bardziej prawdopodobne do przeczytania.
Inne elementy na stronie w pobliżu obrazu
Google bierze również pod uwagę całą stronę, próbując zrozumieć Twoje zdjęcia. Jaki jest tytuł strony? Co to jest adres URL? Mimo że nie są one bezpośrednio związane z twoim obrazem, Google wykorzystuje je jako czynnik rankingowy. Dołącz słowa kluczowe i powiązane frazy w tytule strony, adresie URL strony i adresie URL obrazu, jeśli to możliwe.
Mapy Witryn Obrazów
Aby upewnić się, że Google indeksuje wszystkie Twoje obrazy, musisz utworzyć mapę witryny obrazu. Mapy witryn są szczególnie ważne, jeśli często aktualizujesz treści, masz witrynę e-commerce lub jeśli masz nową witrynę i chcesz, aby Google indeksowało obrazy tak szybko, jak to możliwe.
Jeśli chcesz łatwego rozwiązania, możesz użyć SmartCrawl do wygenerowania mapy strony.
Tagi mediów społecznościowych to sposób na etykietowanie treści, więc gdy ktoś udostępnia je w sieci społecznościowej, udostępnia to, co chcesz, aby udostępnił. Facebook, Twitter, LinkedIn i Pinterest obsługują Open Graph, który jest językiem tagów społecznościowych Facebooka. Twitter ma własne metatagi, ale rozpoznaje otwarte dane Wykresów, jeśli tagi mediów społecznościowych Twittera nie są dostępne.
Ważnym znacznikiem Open Graph dla obrazów jest og: obraz i pozwala określić, jaki obraz chcesz, aby Facebook i inne sieci społecznościowe wyświetlały się, gdy ktoś udostępnia twój post.
Serwowanie Obrazów
Ostatnią rzeczą, na którą musisz zwrócić uwagę podczas optymalizacji obrazów, jest sposób dostarczania obrazów. Istnieje kilka narzędzi, których możesz użyć w WordPress, aby poprawić optymalizację obrazu i szybkość strony. Smush Pro ma leniwe ładowanie i własny CDN. Koliber może pomóc w buforowaniu przeglądarki. Uzyskaj bezpłatną wersję próbną członkostwa bez ryzyka i wypróbuj wersje pro obu na swojej stronie.
Leniwe Ładowanie
Leniwe ładowanie jest techniką poprawiającą początkową szybkość i ładunek strony poprzez odroczenie ładowania niekrytycznych zasobów, które nie są obecnie w widoku przeglądarki. Aby odroczyć obrazy offscreen w WordPress zasadniczo oznacza poczekać, aby załadować obrazy, których jeszcze nie widzimy.
Buforowanie Przeglądarki
Buforowanie to niezawodny sposób na zwiększenie szybkości witryny dla odwiedzających, przechowując zasoby w pamięci podręcznej w celu szybszego pobierania. Dzięki buforowaniu HTTP przeglądarka przechowuje w pamięci podręcznej kopię zasobów (takich jak obrazy) pobranych przez Użytkownika za pośrednictwem protokołu HTTP, dzięki czemu będzie mogła je odzyskać bez konieczności dodatkowej podróży na serwer. To znacznie poprawia wydajność dla powtarzających się odwiedzających, gdy odbywa się prawidłowo.
Sieci dostarczania treści, CDN
Zamiast serwować obrazy z serwera www tylko w jednej lokalizacji, – CDN mają lokalizacje na całym świecie, więc transfer danych wymagany do załadowania obrazów odbywa się znacznie szybciej.
Jedną rzeczą, o której należy pamiętać, jeśli używasz CDN do wyświetlania obrazów, jest unikanie zmiany CDN lub aktywowania CDN i dezaktywacji. Spowoduje to zmianę adresów URL obrazu i może negatywnie wpłynąć na SEO obrazu.
Dodatkowe Zasoby
Aby uzyskać bardziej szczegółowe samouczki dotyczące optymalizacji obrazu, Sprawdź nasze inne posty na ten temat:
- Jak prawidłowo zmienić rozmiar i służyć skalowane obrazy z WordPress
- Najlepsze formaty graficzne dla stron internetowych w porównaniu! PNG, JPG, GIF i WebP
- Jak obsługiwać obrazy w formatach następnej generacji z WordPress
- Jak zrobić obrazy gotowe do siatkówki, które nie spowalniają WordPressa
- Domyślne rozmiary obrazów WordPress i jak dodać niestandardowe rozmiary
- Kompletny przewodnik po SEO dla obrazów
- Jak odroczyć obrazy Offscreen w WordPress z leniwym ładowaniem
- 6 leniwe wtyczki ładowania, aby Twoja witryna WordPress była szybsza
- Masowa Edycja zdjęć dla WordPress
To wszystko jest do optymalizacji obrazu WordPress
Optymalizacja obrazów jest bardzo ważna, więc najlepszym sposobem na rozpoczęcie pracy jest audyt witryny i sprawdzenie, gdzie znajdują się obrazy. Najpierw skup się na najważniejszych rzeczach, skalowanie obrazów i dodawanie tekstu alternatywnego to dwie rzeczy, które są czasochłonne,ale mogą pomóc w radykalnej poprawie.
Inne taktyki optymalizacji obrazu, takie jak umożliwienie leniwego ładowania, korzystanie z buforowania przeglądarki, dodawanie CDN, tworzenie mapy strony obrazu, korzystanie z obrazów następnej generacji można wykonać za jednym zamachem za pomocą optymalizatora obrazu WordPress, takiego jak Smush Pro. Więc jeśli nie masz dużo czasu lub zarządzasz kilkoma witrynami, korzystanie z wtyczki automatycznej kompresji obrazu WordPress jest dobrym miejscem na rozpoczęcie.
Wreszcie, korzystanie z potężnych edytorów obrazów zbiorczych, takich jak Lightroom i Photoshop, może pomóc w poprawie poszczególnych obrazów znacznie szybciej.
Jeśli poważnie myślisz o ulepszeniu swojej gry optymalizacji obrazu, nie szukaj dalej niż trifecta optymalizacji WPMU DEV: Koliber, SmartCrawl i szalony popularny Smush Pro. Smush Pro to najlepszy optymalizator obrazu WordPress, ponieważ robi to wszystko. Możesz wypróbować wszystkie trzy na swojej stronie za pomocą bezpłatnego okresu próbnego. Jeśli nigdy nie traktowałeś optymalizacji obrazu poważnie, będziesz mile zaskoczony, jak bardzo poprawi się wydajność Twojej witryny.
Tagi:
