Jak poprawiliśmy parametry techniczne Wordpress i zwolniliśmy 100GB miejsca na serwerze.

Pracę nad portalem rozpoczęliśmy po rozpoczęciu konsultacji z redakcją WhiteMad. Zgłaszany z hostingu problem z portalem informował o zbyt dużej liczbie powierzchni jaką zajmują pliki graficzne szablonu Wordpress.

Szablon 15zine Wordpress

Dodatkowym problemem był szablon 15zine gdyż każde zdjęcie, które załadowane zostało do Mediów Wordpress generowało ponad 20 różnych formatów nieużywanych na portalu.

‍

Od czego zaczęliśmy prace optymalizacyjne ?

Zaczęliśmy od sprawdzenia zastosowanych w szablonie rozmiarów obrazków. Okazało się że mamy ponad 15 dodatkowych (oprócz domyślnych z Wordpressa) rozmiarów, w tym kilka większych (powyżej 1024px).

Obrazki w tych większych rozmiarach ważyły często ok 300-500kB każdy, co przy ponad 100 000 wgranych zdjęć dawało dodatkowo ponad 50GB plików.

‍

Wyłączenie nieużywanych rozmiarów zdjęć

‍

Pierwszym pomysłem było wyłączenie nieużywanych rozmiarów zdjęć, jednak po przejrzeniu strony okazało się, że właściwie każdy z nich jest używany w różnych miejscach na stronie (głównie siatka artykułów). Realistycznie możliwe było wyłączenie może 3-4 rozmiarów, co nie przyniosłoby dużych korzyści.

‍

Świadczymy obsługę stron na Wordpress

Zobacz usługę opieka Wordpress i optymalizacja stron Wordpress.

‍

Wtyczka Fly Dynamic Image Resizer

‍

Zdecydowaliśmy się na inne podejście - przy użyciu wtyczki „Fly Dynamic Image Resizer” możliwe jest wyłączenie generowania przez Wordpress alternatywnych rozmiarów obrazków podczas wgrywania zdjęć do biblioteki mediów.

Zamiast tego obrazki generowane są dopiero wtedy, gdy są potrzebne na front endzie. W naszym przypadku takie działanie znacząco zmniejszy zajętość dysku FTP, gdyż wszystkie rozmiary obrazków wykorzystywanych w siatkach artykułów dotyczą tylko zdjęcia głównego wpisu, a nie zdjęć z jego treści. Sumarycznie więc tylko ok. 10% wszystkich obrazków będzie posiadało wygenerowane alternatywne rozmiary, a pozostałe 90% będzie występować jedynie w kilku domyślnych wersjach.

‍

'Add image size' i ręczne usunięcie zarejestrowanych rozmiarów zdjęć w Wordpress

Jednak samo włączenie wtyczki nie wystarczy, gdyż nie zastępuje ona domyślnego działania generatora rozmiarów Wordpress. Wtyczka oczekuje, że podczas rejestrowania rozmiarów w szablonie, zamiast domyślnego „add_image_size()” użyjemy „fly_add_image_size()”, a podczas wyświetlania obrazków, zamiast „wp_get_attachment_image()” i „wp_get_attachment_image_src()” użyjemy odpowiednio „fly_get_attachment_image()” i „fly_get_attachment_image_src()”.

Portal internetowy na którym pracowaliśmy używał gotowego szablonu Wordpress 15zine, więc nie było możliwość podmiany tych funkcji bezpośrednio w kodzie szablonu. Zamiast tego, konieczne było ręcznie usunięcie wcześniej zarejestrowanych rozmiarów za pomocą „”remove_image_size()”, a następnie wpięcie się do filtra „wp_get_attachment_image” i podmianę logiki działania tej funkcji tak, aby automatycznie pobierała obrazki za pomocą „fly_get_attachment_image()”.

Po całej operacji należało jeszcze usunąć wszystkie wcześniej wygenerowane rozmiary obrazków, aby zwolnić miejsce na FTP.

Jedynym minusem użycia wtyczki „Fly Dynamic Image Resizer” jest fakt, że dla pierwszej odwiedzającej stronę po dodaniu nowych zdjęć osoby będzie nieco wydłużony czas jej ładowania (przed wyświetleniem muszą się wygenerować potrzebne rozmiary zdjęcia). W przypadku tradycyjnego rozwiązania, ta operacja wykonywana jest przez administratora już podczas wgrywania nowych zdjęć do biblioteki mediów.