Jetpack: Photon, czyli darmowy CDN dla obrazków

JetpackO tym, jak ważny jest czas ładowania strony, nie trzeba nikomu przypominać. Photon to moduł Jetpacka, który ma na celu przyśpieszenie ładowania zdjęć i innych grafik umieszczonych w treści wpisów.

Photon robi dwie rzeczy. Po pierwsze, przechowuje wszystkie obrazki na szybkich i ulokowanych w różnych częściach świata serwerach WordPress.com. Po drugie, optymalizuje i skaluje obrazki, tak aby ich rozmiar był jak najmniejszy. To wszystko powoduje, że czas ładowania zdjęć może zauważalnie się skrócić.

Ten wpis jest częścią cyklu poświęconego wtyczce Jetpack.

Photon nie posiada żadnej konfiguracji – po prostu aktywujemy moduł w ustawieniach Jetpacka i na tym nasza rola się kończy. Cała magia dzieje się bez naszego udziału, ale jednocześnie (co może być dla niektórych problemem) bez naszej kontroli.

Moduł przetwarza w tle treść wpisów, poszukując w nich obrazków (znacznik img). Pobiera z nich informacje o rozmiarze obrazka, a jeśli ich nie znajdzie, to stara się określić wymagany rozmiar na podstawie rozmiaru elementu, w którym ten obrazek się znajduje. Następnie zamienia oryginalny kod HTML obrazka na swój, różniący się adresem URL zdjęcia, które od tej pory jest pobierane z serwerów WordPress.com (domena wp.com). Co ważne, obrazek jest pobierany w takim rozmiarze, jaki jest potrzebny – serwery usługi automatycznie go skalują i optymalizują.

Warto dodać, że moduł podmienia adresy obrazków „w locie”, nie modyfikując wpisów w bazie danych, tak więc po dezaktywacji Photona wszystko wróci do stanu sprzed jego włączenia.

Photon obsługuje również pliki w nowym formacie WebP. Format ten w porównaniu do formatu JPEG charakteryzuje się o około 30% mniejszym rozmiarem plików przy zachowaniu zbliżonej jakości obrazu. WebP jest w tej chwili wspierany tylko przez przeglądarki Chrome i Opera – Photon sprawdza więc przeglądarkę, z jakiej korzysta użytkownik i dostarcza mu zdjęcie w odpowiednim formacie. Porównania jakości i rozmiaru zdjęć w formacie JPEG i WebP można znaleźć tutaj.

Bardziej zaawansowani użytkownicy mogą skorzystać z API Photona do modyfikacji plików graficznych. Poza zmianą rozmiaru obrazka możliwe jest również jego przycinanie, modyfikowanie jasności i kontrastu, a także nakładanie filtrów.

Photon nie jest jednak rozwiązaniem bez wad. Przede wszystkim wszystkie nasze pliki graficzne zostają przesłane na serwery WordPres.com i nie ma możliwości ich modyfikacji ani usunięcia. Jeśli zmodyfikowaliśmy zdjęcie w naszym serwisie, musimy zmienić nazwę pliku, tak aby Photon przesłał nową jego wersję na swoje serwery. Jeśli usuniemy zdjęcie z naszej strony, to nie zostanie ono automatycznie usunięte z serwerów usługi. Ten całkowity brak kontroli nad naszymi treściami jest główną wadą Photona i najczęściej wyciąganym argumentem przeciwko korzystaniu z tej usługi.

Bezpośredni link

  • CDN i optymalizacja obrazów ładnie brzmi w jednym zdaniu ale jestem ciekaw jak to się ma np. do testów typu pagespeed(google, czy jakichkolwiek innych) oraz czy jest sens korzystać z tego, jeśli nie używamy serwera współdzielonego.

    Poza tym jestem ciekaw jak wyglądają obrazki po optymalizacji – testowałem wiele różnych opcji ale wiele z nich potrafi naprawdę oszpecić zdjęcia. Nie mówię, że tutaj jest podobnie ale przydałoby się porównanie.

    • Jeśli chodzi o testy, to korzystanie z CDN (jakiegokolwiek) zwykle wychodzi na plus.

      Photon domyślnie ma dość wysokie ustawienia jakości (90% dla JPEG i 80% dla PNG), ale można ten parametr zmodyfikować (szczegóły w dokumentacji API). Oczywiście, końcowy efekt może być różny dla różnych zdjęć i najlepiej samemu poeksperymentować i sprawdzić jak Photon sobie z tym radzi.

  • u-cheese

    Cześć, mam pytanie trochę z innej beczki. Czy WordPress bez żadnych wtyczek będzie normalnie działał, będzie indeksowany przez Google i tak dalej?

  • Osobiście po testach zdecydowanie lepiej wykorzystać CloudFlare szczególnie po tym jak zmienili protokoły http z 1.1 na 2 i strony na prawdę chodza 2* szybciej (darmowe konto) – nie wiem jak u Was ale na moich blogach (zaplecza, klientów itp) bardzo duży kawałek ruchu to Google Images – włączając jetpacka można o tych ruchu tylko pomarzyć bo go po prostu nie będzie ;)

    • Zdjęcia z Photona trafiają do Google Images, ale ich URLe prowadzą do serwerów wp.com (ale użytkownicy mogą przejść na Twoją stronę przez link ‚Odwiedź stronę’).

  • Czyli używając Photona nie mamy wejść z Google Image? Mam ostatnio straszne problemy ze stroną. Nic nie zmieniałem od miesiąca, a nagle mój operator hostingu twierdzi, że strona obciąża CPU, przez co znacznie zwolniła. Teraz sytuacja wróciła do normy, ale nadal pozostaje pytanie co to było? Podobno ataków na stronę nie było, mam zabezpieczenia przed włamaniami na wp-login.

    Czy użycie Photona wpłynie na ilość request? Chciałbym je zmniejszyć.

    • Twoje zdjęcia trafią do Google Images, ale ich URLe będą prowadziły do serwerów wp.com (ale użytkownicy wciąż będą mogli przejść do Twojej strony przez link ‚Odwiedź stronę’).

      Użycie Photona (podobnie jak każdego innego CDNa) zmniejszy ilość żądań do strony, aczkolwiek nie jestem pewien czy zmniejszy znacząco obciążenie serwera.

      • Może przetestuje Photona. Gdybym z niego rezygnował po np. miesiącu wszystko samo wróci do normy? Nie ma wtedy komplikacji?

        • Nie będzie żadnych komplikacji. Tak jak napisałem we wpisie, wyłączenie Photona powoduje, że obrazki są znowu pobierane z Twojego serwera. Jeśli korzystasz z jakiejś wtyczki cache, to pamiętaj o wyczyszczeniu cache zarówno po aktywacji, jak i po dezaktywacji modułu.

  • Hm, a a chyba nie można zrealizować synchronizację?

    • Nie bardzo rozumiem…

      • Tak aby obrazki osuwali się z serwera wtyczki, kiedy ty ich usuwasz w WordPress. O to mnie chodziło.

        • Zgadza się – to największy problem Photona. W sumie wystarczyłoby, aby pliki na ich serwerach miały „datę ważności” albo sprawdzały co jakiś czas czy pliki na serwerze źródłowym (naszym) się zmieniły. Może kiedyś to wprowadzą. ;)

  • Ciekawy artykuł. Wlaśnie rozgryzam WordPressa i zainstalowałam wtyczkę Jetpack. Nawet nie zauważyłam, że jest w niej Photon :-) Nawiasem mówiąc, zastanawiam się, dlaczego na Wordpress strona ładuje mi się znacznie dłuzej niż na bloggerze? Czy to sprawka innego hostingu?

    • Na Bloggerze o hosting, tuning i optymalizację wszystkiego martwił się Google. W przypadku WordPressa postawionego na własnym serwerze wszystkim musisz zająć się sama. Poza tym Google ma zamknięte oprogramowanie i własną, potężną infrastrukturę – Ty masz pewnie jakiś serwer współdzielony. ;) A to wszystko niestety przekłada się na prędkość działania strony.
      Poczytaj o cache (https://wpzen.pl/przyspieszanie-strony-za-pomoca-wtyczki-wp-super-cache/ ) i generalnie o zagadnieniach związanych z wydajnością WordPressa.

      • Dziękuję! Tak to jest z tą zamianą na lepsze. Lepsze wrogiem dobrego, mawia moja druga połowa :-) Poczytam ten artykuł który podlinkowałeś i coś pokombinuję.