Czwartek, 28 marca 2024

Analiza strony internetowej WordPress: Przed i po ImageEngine

11 kwietnia 2022


WordPress jest zdecydowanie najpopularniejszym systemem CMS na świecie. Nie tylko dominuje na rynku systemów CMS z 64% udziałem w rynku, ale także zasila 39,6% wszystkich stron internetowych. Zdobył internet szturmem, demokratyzując sieć dla wszystkich. Teraz każdy może zbudować udaną stronę internetową, zarządzać nią i prowadzić ją bez konieczności posiadania dyplomu ukończenia studiów wyższych lub specjalistycznej wiedzy z zakresu kodowania.

Jednak mimo że WordPress świetnie radzi sobie z wieloma aspektami technicznymi, nie jest w stanie zrobić wszystkiego za Ciebie. Zbudowany głównie w oparciu o PHP, często pojawiają się obawy dotyczące wydajności WordPressa. A ponieważ wydajność ma wpływ na wszystko - od współczynnika odrzuceń, przez rankingi SEO, po konwersje - jest to coś, co powinno znaleźć się również na Twojej liście zainteresowań.

Jeśli jeszcze o tym nie wiesz, obrazy są jedną z głównych przyczyn powolnego ładowania się stron internetowych. W ostatnich latach WordPress zwiększył swoje wysiłki, aby spróbować pomóc użytkownikom w optymalizacji obrazów poza skrzynką odbiorczą.

Mimo to, jak pokażemy, nie jest to całkowite rozwiązanie i nadal możesz zrobić wiele, aby zapewnić lepsze wrażenia na swojej witrynie WordPress dzięki optymalizacji obrazu.

Czym jest optymalizacja obrazów w WordPressie? Dlaczego jest ona ważna?

Mówiąc najprościej, optymalizacja obrazu to wszystko, co robisz, aby obrazy ładowały się szybciej na stronach Twojej witryny. Prawie wszystkie strony internetowe wykorzystujące obrazy mogą skorzystać z jakiejś formy optymalizacji obrazu, nawet te, które korzystają z WordPressa.

Dlaczego?

Cóż, wydajność jest dziś niezwykle istotnym czynnikiem, jeśli chodzi o konkurencyjność Twojej witryny.

Google sprawiło, że wydajność staje się coraz ważniejszym czynnikiem w rankingach SEO. W rzeczywistości wydajność jest bezpośrednim sygnałem rankingowym, który ma duże znaczenie.

Największym krokiem w tym kierunku jest aktualizacja Google Page Experience Update, która weszła w życie w 2021 roku. Wkrótce Google może nawet używać wskaźników wizualnych w wynikach SERP, aby odróżnić witryny o wysokiej wydajności od pozostałych.

Jak mówi Google: "Sygnały te mierzą, jak użytkownicy odbierają interakcję ze stroną internetową i przyczyniają się do naszej nieustannej pracy nad tym, aby ludzie mieli w sieci jak najwięcej pomocnych i przyjemnych doświadczeń".

Dlaczego więc powinniśmy skupić się na obrazach w celu optymalizacji wydajności?

Według Google, obrazy mają największy wpływ na wagę strony. Google wyróżniło również optymalizację obrazów jako czynnik o największym niewykorzystanym potencjale optymalizacji wydajności.

Problem ten nie zniknie w najbliższym czasie. Według danych Archiwum HTTP, na stronach desktopowych znajduje się około 967,5 KB bajtów danych graficznych, a na stronach mobilnych - 866,3 KB. Stanowi to wzrost odpowiednio o 16,1% i 38,8% w ciągu ostatnich pięciu lat.

Dzięki popularnym narzędziom e-commerce, takim jak Woocommerce, szacuje się, że nawet 28% wszystkich transakcji sprzedaży online odbywa się na stronach WordPress.

Nie zapominaj też, że obrazy są zarówno kluczowym elementem przekazywania informacji użytkownikowi, jak i integralną częścią projektu Twojej witryny. Jeśli na przykład ich ładowanie trwa znacznie dłużej niż ładowanie tekstu, będzie to miało negatywny wpływ na wrażenia użytkownika na wiele sposobów.

Podsumowując, zoptymalizowane obrazy pomagają Twojej witrynie WordPress poprzez:

  • Zwiększenie zadowolenia użytkowników.
  • Poprawę różnych wskaźników ruchu, takich jak współczynnik odrzuceń, czas przebywania na stronie itp.
  • Podniesienie pozycji w rankingu SEO.
  • Przyczynianie się do zwiększenia konwersji (i sprzedaży).

Jak działa optymalizacja obrazu w WordPressie?

WordPress jest tak popularny, ponieważ jest to system CMS (system zarządzania treścią), który umożliwia każdemu budowanie, projektowanie i zarządzanie stroną internetową bez konieczności kodowania lub zaawansowanego doświadczenia technicznego. Zaawansowane funkcje można zainstalować za pomocą kilku kliknięć, dzięki wtyczkom, i rzadko trzeba dotykać kodu witryny, chyba że chce się wprowadzić jakieś unikalne modyfikacje.

Krótko mówiąc, korzystanie z systemu CMS takiego jak WordPress chroni Cię przed wieloma codziennymi technicznymi aspektami prowadzenia strony internetowej.

Optymalizacja obrazów w WordPressie: Co potrafi

Jak już wspomnieliśmy, jednym z głównych powodów, dla których WordPress jest tak popularny, jest fakt, że zajmuje się on wieloma technicznymi aspektami prowadzenia strony internetowej. Mając to na uwadze, wiele osób uważa, że WordPress powinien również automatycznie zająć się optymalizacją obrazu bez konieczności angażowania się w to w ogóle.

Niestety, w rzeczywistości tak nie jest.

To prawda, WordPress oferuje pewną wbudowaną optymalizację obrazu. Za każdym razem, gdy przesyłasz obraz do WordPressa, obecnie kompresuje on jego jakość do około 82% oryginału (od wersji 4.5).

W wersji 4.4 WordPress wprowadził również responsywną składnię obrazów za pomocą atrybutu srcset. Tworzy to cztery punkty przerwania dla każdego przesłanego obrazu zgodnie z domyślnymi rozmiarami obrazów WordPressa:

  • 150px kwadrat dla miniatur
  • 300px szerokości dla średnich obrazów
  • 768px maksymalna szerokość dla obrazów medium_large
  • 1024px max-width dla dużych obrazów.

Tutaj można zobaczyć przykład rzeczywistego kodu składni responsywnej generowanego przez WordPress:

W zależności od rozmiaru ekranu urządzenia, z którego użytkownik odwiedza Twoją stronę internetową, WordPress pozwoli przeglądarce wybrać obraz o najbardziej odpowiednim rozmiarze. Na przykład najmniejszą wersję dla wyświetlaczy mobilnych lub największą dla ekranów Retina 4K, takich jak te w komputerach Mac.

Choć może się to wydawać imponujące, jest to tylko ułamek tego, co można osiągnąć za pomocą odpowiedniego rozwiązania do optymalizacji obrazu, co pokażemy później.

Na koniec warto dodać, że od wersji 5.5 WordPress wprowadził domyślne leniwe ładowanie dla wszystkich obrazów.

Tak więc, krótko mówiąc, WordPress oferuje następujące wbudowane możliwości optymalizacji obrazów:

  • Kompresja jakości (ograniczona)
  • Składnia responsywna (do 4 punktów przerwania)
  • Leniwe ładowanie

Optymalizacja obrazów w WordPressie: Czego nie można zrobić

Istnieje wiele innych problemów związanych zarówno z implementacją kompresji obrazu, jak i składni responsywnej stosowanej przez WordPress. Prowadzi to do tego, że niektórzy użytkownicy nawet celowo dezaktywują wbudowaną optymalizację obrazu WordPressa, aby móc w pełni przejąć nad nią kontrolę samodzielnie.

Oto niektóre z powodów:

  • WordPress wykorzystuje bardzo podstawową formę kompresji jakości. Nie wykorzystuje zaawansowanych technologii, takich jak sztuczna inteligencja i algorytmy uczenia maszynowego, do kompresji obrazów przy zachowaniu maksymalnej jakości wizualnej. Jest to również kompresja stratna, więc jakość jest tracona na zawsze. Wyraźnie widać różnicę między oryginalnym obrazem w jakości HD a jego skompresowaną wersją utworzoną przez WordPress.
  • WordPress kompresuje większość obrazów tylko o 20%, natomiast zaawansowane narzędzia do optymalizacji obrazów mogą inteligentnie zmniejszyć rozmiary wszystkich obrazów nawet o 80%.
  • Składnia responsywna może zapewnić znaczną poprawę wydajności w porównaniu z prostym załadowaniem pojedynczego obrazu w jakości HD, który będzie wyświetlany na wszystkich urządzeniach i ekranach. Jednak nadal jest ona ograniczona do określonej liczby punktów przerwania (zwykle 3 lub 4). Ponieważ nie jest ona dynamiczna, nie jest tworzone ani wykorzystywane całe spektrum możliwych rozmiarów obrazów.
  • Kod składni responsywnej nie jest skalowalny i może szybko doprowadzić do powstania kodu, który jest rozdęty, niechlujny i trudny do odczytania.
  • WordPress nie przyspiesza dostarczania obrazów poprzez automatyczne buforowanie i serwowanie ich za pośrednictwem globalnej sieci CDN, chociaż można to zrobić za pomocą innych narzędzi.

Inną ważną funkcją optymalizacji, której nie ma WordPress, jest automatyczna konwersja do formatów plików graficznych nowej generacji. Różne formaty obrazów oferują różne korzyści w zakresie wydajności na różnych urządzeniach. Niektóre formaty umożliwiają także wyższy poziom kompresji przy zachowaniu wierności wizualnej.

Formaty nowej generacji, takie jak WebP, AVIF i JPEG-2000, są uważane za najbardziej optymalne dla kompatybilnych urządzeń. Na przykład do niedawna WebP był optymalnym wyborem w przeglądarkach Chrome, a JPEG-4000 w przeglądarkach Safari.

Jednak WordPress będzie po prostu serwował wszystkim odwiedzającym obrazy w tych samych formatach, w których zostały one pierwotnie przesłane.

Jak zmierzyć wydajność obrazów w witrynie WordPress?

Jako niekwestionowany król wyszukiwarek, większość naszych pomiarów wydajności będziemy opierać na wytycznych ustalonych przez Google.

Wraz z różnymi aktualizacjami wydajności Google udostępniło szereg wytycznych dla programistów, a także narzędzia do testowania i ulepszania witryn zgodnie z tymi wytycznymi.

Google wprowadziło Core Web Vitals jako podstawową miarę służącą do pomiaru wydajności strony internetowej i jej wpływu na wrażenia użytkownika. Core Web Vitals są określane jako "metryki wydajności zorientowane na użytkownika". Są one próbą zapewnienia programistom testowalnego i wymiernego sposobu mierzenia nieuchwytnej i abstrakcyjnej koncepcji, jaką jest "doświadczenie użytkownika".

W połączeniu z wieloma innymi czynnikami, wskaźniki Core Web Vitals stanowią główną część ogólnego sygnału doświadczenia użytkownika strony:

Pełne wprowadzenie do Core Web Vitals można znaleźć tutaj. Obecnie składają się one z trzech głównych wskaźników:

  • LCP (Largest Contentful Paint): Czas potrzebny na załadowanie największego elementu powyżej strony. Zazwyczaj jest to pełnowymiarowy obraz lub sekcja bohatera.
  • FID (First Input Delay): Opóźnienie od momentu, w którym użytkownik po raz pierwszy wejdzie w interakcję z elementem na stronie, do momentu, w którym stanie się on responsywny.
  • CLS (Cumulative Layout Shift - skumulowane przesunięcie układu): Stabilność wizualna, z jaką ładują się elementy na stronie.

Poniżej znajduje się ilustracja przedstawiająca sposób oceny tych metryk:

Chociaż są to trzy najważniejsze metryki do optymalizacji, nie są one jedyne. Google mierzy jeszcze inne wskaźniki, takie jak FCP (First Contentful Paint), SI (Speed Index), a także TTFB (Time to First Byte), TBT (Total Blocking Time) i TTI (Time to Interactive).

Na wiele z tych wskaźników bezpośredni wpływ mają obrazy używane na stronach internetowych. Na przykład LCP, FCP i SI są bezpośrednimi wskaźnikami szybkości ładowania zawartości strony internetowej i zależą od całkowitego rozmiaru bajtów strony. Jednak może to również pośrednio wpływać na FID poprzez utrzymywanie głównego wątku zajętego renderowaniem dużej ilości zawartości graficznej lub na postrzegany CLS poprzez opóźnienie czasu ładowania dużych obrazów.

Te wskaźniki mają zastosowanie do wszystkich stron internetowych, niezależnie od tego, czy są one tworzone na zamówienie, czy przy użyciu systemu CMS, takiego jak WordPress.

Podczas korzystania z narzędzi takich jak Lighthouse czy PageSpeed Insights, będziesz również punktowany na podstawie innych flag, które Google uznaje za ważne. Niektóre z nich dotyczą obrazów, np. właściwego doboru rozmiaru obrazów i podawania obrazów w formatach nowej generacji.

Jeśli używasz tylko wbudowanej optymalizacji obrazu WordPressa, zostaniesz oflagowany za następujące możliwości poprawy:

Niektóre z audytów, które jednak przejdzie, to odraczanie obrazów poza ekranem (leniwe ładowanie) i efektywne kodowanie obrazów (ze względu na kompresję):

Lepszy sposób na optymalizację obrazów w WordPressie: ImageEngine

Miliardy stron internetowych walczą o najlepsze miejsce w SERP-ach Google, a także o uwagę coraz bardziej wybrednej publiczności korzystającej z Internetu. Każdy centymetr ma znaczenie, jeśli chodzi o zapewnienie Twojej witrynie przewagi nad konkurencją.

Jak więc wyeliminować pozostałe błędy w wydajności i dostarczyć wysoce zoptymalizowane obrazy, które zadowolą zarówno odwiedzających, jak i Google?

Oczywiście, możesz ręcznie zoptymalizować obrazy za pomocą programów takich jak PhotoShop czy GIMP. Jednak w przypadku każdej nowej partii zdjęć zajmie Ci to wiele godzin. Dodatkowo, nie skorzystasz z żadnej automatycznej optymalizacji adaptacyjnej.

Bardziej rozsądnym rozwiązaniem w dzisiejszym szybko zmieniającym się klimacie jest użycie narzędzia stworzonego specjalnie do maksymalnej optymalizacji obrazów: Image CDN, takiego jak ImageEngine.

ImageEngine to zautomatyzowana, oparta na chmurze usługa optymalizacji obrazu wykorzystująca wykrywanie urządzeń, a także inteligentną kompresję obrazu wykorzystującą moc sztucznej inteligencji i uczenia maszynowego. Dzięki sieci CDN z rozproszonymi geograficznie punktami dostępowymi, ImageEngine może zmniejszyć obciążenie obrazów nawet o 80%, zachowując jednocześnie jakość obrazu i przyspieszając jego dostarczanie na całym świecie.

Dlaczego ImageEngine Image Optimization jest lepszy niż WordPress?

W porównaniu z innymi rozwiązaniami, oto powody, dla których ImageEngine może zapewnić lepszą wydajność:

  • Wykrywanie urządzeń: ImageEngine posiada wbudowaną funkcję wykrywania urządzeń. Oznacza to, że wykrywa urządzenie, z którego korzysta odwiedzający Twoją stronę i dostosowuje strategię optymalizacji do tego, co jest najlepsze dla danego urządzenia.
  • Podpowiedzi klienta: Dzięki obsłudze podpowiedzi klienta, ImageEngine ma dostęp do jeszcze większej ilości informacji o urządzeniu i przeglądarce, co pozwala na podejmowanie lepszych decyzji optymalizacyjnych.
  • Formaty nowej generacji: W oparciu o optymalne ustawienia, ImageEngine automatycznie konwertuje i serwuje obrazy w formatach następnej generacji, takich jak WebP, AVIF, JPEG2000 i MP4 (dla GIF-ów).
  • Nagłówek zapisanych danych: Gdy użytkownik Chrome ma włączony tryb oszczędzania danych, ImageEngine automatycznie kompresuje obrazy bardziej agresywnie, aby zaoszczędzić na transferze danych.
  • CDN z dedykowanymi serwerami brzegowymi: ImageEngine automatycznie buforuje i serwuje zoptymalizowane zasoby graficzne za pomocą globalnej sieci CDN. Każdy serwer brzegowy ma wbudowaną świadomość urządzeń, aby zmniejszyć opóźnienia i przyspieszyć dostarczanie. Możesz również wybrać priorytet dla określonych regionów.

Kluczową różnicą jest to, że ImageEngine może dostosować optymalizację obrazów do potrzeb każdego z odwiedzających. ImageEngine szczególnie dobrze radzi sobie z obsługą użytkowników mobilnych dzięki funkcji wykrywania urządzeń WURFL, która dynamicznie zmienia rozmiar obrazów w zależności od większości używanych obecnie urządzeń i rozmiarów ekranów. Jest to unikalna funkcja, której nie oferuje żaden z konkurentów.

Pozwala ona na znacznie lepszą i bardziej precyzyjną optymalizację niż uniwersalne podejście WordPressa do kompresji i składni responsywnej.

Jeśli chcesz, możesz wyłączyć składnię responsywną i kompresję WordPressa, a nadal będziesz doświadczać wzrostu wydajności za pomocą ImageEngine. Jednak ImageEngine również dobrze radzi sobie z responsywną składnią, więc nie jest to całkowicie konieczne, chyba że chcesz serwować obrazy o najwyższej wierności/niskim rozmiarze bajtów.

Jak działa ImageEngine z WordPressem?

Proces, który ImageEngine wykorzystuje do integracji z WordPressem, można podzielić na kilka prostych kroków:

  • Załóż konto ImageEngine: ImageEngine oferuje trzy plany cenowe w zależności od skali i funkcji, których potrzebujesz, a także niezobowiązującą 30-dniowa bezpłatna wersja próbna.
  • Określ pochodzenie obrazu: To mówi ImageEngine, gdzie znaleźć oryginalne wersje obrazów. W przypadku witryny WordPress możesz po prostu użyć swojej domeny, np, https://mywordpresswebsite.com. ImageEngine automatycznie pobierze obrazy, które zostały załadowane na witrynę WordPress.
  • Skopiuj adres dostawy: Po utworzeniu konta i określeniu źródła pochodzenia obrazu ImageEngine poda adres dostawy. Adres dostawy to Twój własny, unikalny adres, który będzie używany w znacznikach, aby wskazywać na usługę ImageEngine. Adresy dostawy mogą znajdować się we wspólnej domenie (imgeng.in) lub w domenie, której jesteś właścicielem. Adres dostawy zazwyczaj wygląda jak {random_string}.cdn.imgeng.in. Jeśli Twoje obrazy są przesyłane do domyślnego folderu WordPressa /wp-content/uploads/, możesz uzyskać dostęp do zoptymalizowanych obrazów z ImageEngine, po prostu zmieniając domenę witryny. Na przykład, wpisując {imageengine_domain}.cdn.imgeng.in/wp-content/uploads/myimage.jpg w przeglądarce, zobaczysz zoptymalizowaną wersję tego obrazu. Po prostu naciśnij przycisk kopiuj obok adresu dostawy i użyj go w następnym kroku konfigurowania wtyczki.
  • Zainstaluj wtyczkę wtyczkę ImageEngine Optimizer CDN: Wtyczka jest całkowicie darmowa i można ją zainstalować tak jak każdą inną wtyczkę z repozytorium WordPress.
  • Skonfiguruj i włącz wtyczkę ImageEngine Plugin w WordPress: Wystarczy przejść do wtyczki pod "ImageEngine" w głównym menu nawigacyjnym. Następnie skopiuj i wklej swój "Adres dostawy" ImageEngine, zaznacz pole wyboru "Włączone" i kliknij "Zapisz zmiany", aby włączyć ImageEngine:

Teraz wszystko, co robi ImageEngine, to zastępowanie domeny witryny WordPress w adresach URL obrazów nowym adresem dostawy ImageEngine. Dzięki temu jest to prosta, lekka i nieingerująca wtyczka, która świetnie współpracuje z większością innych wtyczek i motywów. Nie dodaje również niepotrzebnej złożoności ani wagi do stron witryny WordPress.

ImageEngine vs Wbudowana optymalizacja obrazu w WordPressie

Przejdźmy więc teraz do rzeczy, testując poprawę wydajności, jakiej można się spodziewać po użyciu ImageEngine do optymalizacji zasobów graficznych.

Aby przeprowadzić ten test, skonfigurowaliśmy podstawową stronę WordPressa zawierającą kilka obrazów wysokiej jakości. Następnie użyłem PageSpeed Insights i Kalkulatora Wydajności Lighthouse, aby uzyskać wyniki wydajności przed i po użyciu ImageEngine.

Co ważne, przeprowadziliśmy ten test z perspektywy mobile-first. Nie tylko ruch w Internecie mobilnym przewyższył globalnie ruch na komputerach stacjonarnych, ale także samo Google zobowiązało się do indeksowania mobile-first.

Poniżej znajduje się wynik PageSpeed przy użyciu kalkulatora Lighthouse dla WordPressa bez optymalizacji obrazu:

Jak widać, zarówno Core Web Vitals, jak i inne ważne metryki zostały oznaczone jako "wymagające poprawy". W szczególności LCP, FCP i TBT. W tym przypadku zarówno LCP, jak i FCP były wysokiej jakości wyróżnionymi obrazami na górze strony.

Jeśli przejdziemy do możliwości poprawy wskazanych przez PageSpeed, zobaczymy, skąd biorą się problemy. Moglibyśmy zaoszczędzić aż 4,2 s czasu ładowania dzięki odpowiedniej zmianie rozmiaru obrazów i kolejne 2,7 s dzięki podawaniu ich w formatach nowej generacji:

Zobaczmy więc teraz, jak bardzo ImageEngine może poprawić ten wynik.

Ten sam test przeprowadzony na mojej stronie WordPress przy użyciu ImageEngine dał następujące wyniki:

Jak widać, mamy teraz wynik 100 punktów PageSpeed. Zaoszczędziłem około 2,5 s na SI (~86%) oraz około 1,7 s na LCP (~60%). Niewielką poprawę odnotowano także w FCP.

Oznacza to nie tylko silniejszy sygnał doświadczenia strony od Google, ale także namacalną różnicę dla odwiedzających, jeśli chodzi o szybkość ładowania witryny. Różnica ta prowadzi do obniżenia współczynnika odrzuceń, zwiększenia zadowolenia użytkowników i zwiększenia liczby konwersji.

Odnotowano również 53% redukcję całkowitego ładunku obrazów. Jest to imponujące, biorąc pod uwagę, że jest to dodatek do wbudowanej kompresji WordPressa i składni responsywnej.

Wnioski

Co możesz z tego wynieść jako osoba posiadająca witrynę WordPress?

Cóż, po pierwsze, WordPress posiada pewne podstawowe funkcje optymalizacji obrazu. I choć nie jest to rozwiązanie idealne, powinno pomóc Ci zaoferować rozsądny poziom wydajności, nawet jeśli używasz dużej ilości treści graficznych.

Jednak zastrzeżeniem jest to, że WordPress stosuje agresywną, ogólną kompresję, co prowadzi do zauważalnego obniżenia jakości wizualnej. Jeśli używasz WordPressa do tworzenia dowolnego rodzaju strony internetowej, na której ważna jest wysoka jakość obrazów, jest to problem - na przykład jako portfolio fotograficzne, wystawa lub rynek obrazów, taki jak Shutterstock.

Korzystając z ImageEngine, możesz zmniejszyć ładunek obrazów i jeszcze bardziej przyspieszyć ich dostarczanie, nie obniżając przy tym zbytnio jakości wizualnej. Co więcej, technologia adaptacyjnej optymalizacji obrazu w ImageEngine zapewni większą poprawę dla większej liczby odwiedzających, niezależnie od urządzenia (urządzeń), z którego korzystają do przeglądania stron internetowych.

Niezależnie od tego, czy nadal chcesz korzystać z wbudowanych optymalizacji WordPressa, czy nie, ImageEngine zapewni znaczącą poprawę komfortu użytkowania, wskaźników ruchu, a nawet konwersji.

Ponadto, zgodnie z duchem WordPressa, jest on niezwykle prosty do skonfigurowania bez żadnych zaawansowanych ustawień. Wystarczy zarejestrować się w ImageEngine w 3 prostych krokach, zainstalować wtyczkę, zintegrować ImageEngine poprzez skopiowanie / wklejenie domeny obrazu i gotowe.

[To jest post sponsorowany w imieniu ImageEngine ]