WebP jest formatem kompresji grafik i obrazów, który od kilku lat rozwijany jest przez Google. Format WebP zachowując jakość porównywalną do JPEG może ważyć ponad połowę mniej. Jego lekkość oraz wysoka jakość skraca czas ładowania się strony bez utraty jakość, dlatego format ten cieszy się dużym uznaniem. Wykorzystując format WebP osiągniesz wyższe wyniki w Google Page Speed, Lighthouse oraz GTMetrix. Twój sklep będzie ładować się po prostu szybciej. W tym wpisie dowiesz się, jak zaimplementować format WebP (oraz technikę Lazy Load) w swoim sklepie PrestaShop....





Google WebP & Lazy Load - optymalizacja obrazków i zdjęć
- Skróć czas do pełnej interaktywności strony
- Konwersja zdjęć do lekkiego formatu WebP
- Poprawa wyniku Google Page Speed, Lighthouse oraz GTMetrix
- Przyśpieszenie ładowania strony mobilnej
- Optymalizacja wszystkich zdjęć na stronie - galerie, blogi, strony CMS, zdjęcia w opisach produktów
- Zgodny ze standardami SEO i wytycznymi Google
PrestaShop & WebP
WebP to format kompresji obrazów rozwijany przez Google. WebP przy mniejszym nawet o 85% rozmiarze zachowuje porównywalną jakość zdjęcia z formatem JPEG. Format ten jest promowany przez wyszukiwarkę Google i coraz szerzej wykorzystywanym w Internecie. Wykorzystując format WebP osiągniesz wyższe wyniki w Google Page Speed, Lighthouse oraz GTMetrix.
WebP obsługiwany jest przez przeglądarki: Google Chrome, Firefox, Opera, Edge, GNOME Web, Midori, Falkon, Pale Moon oraz Waterfox.
Jeśli przeglądarką klienta nie obsługuje formatu WebP - moduł wyświetli standardowe zdjęcia jpeg/png.
Konwersja zdjęć produktów do formatu WebP
Zwiększ szybkość ładowania sklepu konwertując zdjęcia do formatu WebP. Optymalizuj zdjęcia produktów, kategorii, obrazki w opisach produktów i na stronach CMS. Konwersja obejmie również obrazki wyświetlane przez moduły bloga, galerii i innych. Zmniejsz czas ładowania sklepu na urządzeniach mobilnych i podnieść wynik SEO!
Moduł konwertuje w locie wszystkie zdjęcia w Twoim sklepie. Do formatu WebP przekonwertowane zostaną:
- zdjęcia produktów, zdjęcia na listach produktów oraz w opisach produktów
- zdjęcia na stronach CMS, stronie głównej, stronie kontaktu, itp.
- zdjęcia wyświetlane przez zewnętrzne moduły takie, jak Blogi, Galerie, Banery czy Slidery.
Zainstaluj i korzystaj
Wystarczy zainstalować moduł i włączyć konwersje do formatu WebP. Wszystkie zdjęcia w Twoim sklepi, które wgrywasz w formacie JPEG lub PNG będą konwertowane w locie do formatu WebP. Wszystkie zdjęcia, które znajdują się już w Twoim sklepie również zostaną konwertowane na WebP! Zaoszczędzi to wiele danych, nie obciąży serwera oraz skróci czas ładowania się sklepu.
Aby konwersja do WebP działała w locie, tj. gdy klient wczytuje grafikę w swojej przeglądarce,, na Twoim serwerze musi być zainstalowana jedno dowolne z rozszerzeń:
- Gd PHP extension
- Imagick PHP extension
- Gmagick PHP extension
- WebP (wymagana odblokowana funkcja PHP exec())
- ImageMagick (wymagana odblokowana funkcja PHP exec())
- GraphicsMagick (wymagana odblokowana funkcja PHP exec())
PrestaShop & Lazy Load
Aby skrócić czas do pełnej interaktywności strony, warto skorzystać z leniwego ładowania. Dzięki temu najpierw będą ładowane wszystkie zasoby kluczowe, a dopiero potem obrazy znajdujące się poza ekranem. Obrazy zostaną załadowane dopier, gdy użytkownik będzie je przeglądać przewijając stronę. Dzięki temu zwiększy się szybkość do pełnej interaktywności oraz zredukuje się transmisja danych dla urządzeń mobilnych z ograniczonym Internetem lub wolnym połączeniem.
Lazy Load Przyjazny SEO
Twoje obrazki będą widoczne dla robotów internetowych. Linki URL do zdjęć i obrazów są cały czas w kodzie strony. Nasz moduł został przygotowany zgodnie z dobrymi praktykami SEO wg. wtycyznych Google i pozytywnie wpłynie na wyniki testów Google Page Speed, Lighthouse oraz GTMetrix Twojego sklepu PrestaShop.
Zainstaluj i korzystaj
Wszystko, co musisz zrobić, to zainstalować moduł i wybrać efekt zastępczy dla ładowania obrazków w trybie Lazy Load. Moduł zrobi za Ciebie resztę.
==========
pre-release
-----
* prevent w3c errors
v2.5 - 2020.03.27
-----
* fixed bugs
v2.4 - 2020.03.27
-----
* improved WebP conversion
* fixed bugs
v2.3 - 2020.03.12
-----
* from now module support converting images to WebP format on-the-fly
v2.2 - 2019.07.25
-----
* in case of error, try to lazy load without placeholder
v2.1 - 2019.07.24
-----
* improved placeholder generator
* errors will be logged in /var/logs/*_pshowlazyimg.log
* other small fixes
v2.0 - 2019.07.18
-----
* changed way of loading images
v1.14 - 2019.03.08
-----
* fixed a problem with replacing urls for photos with null
* fixed a problem with update of module
v1.13 - 2019.01.29
-----
* bugs fixes
v1.12 - 2019.01.18
-----
* shop logo as default loading image
* fix for dynamically loaded content
v1.11 - 2019.01.02
-----
* bugs fixes
v1.1 - 2019.01.01
-----
* simplificated photos uploading
* added translations
* added the ability to upload own loading pictures
* bugs fixes
v1.0
-----
* first version of the module
- Serwer Nginx lub Apache
- PHP > 7.1. Dla maksymalnej wydajność i bezpieczeństwa zalecamy PHP 7.3
- Roszerzenie ionCube
- MySQL >= 5
- Opcjonalne rozszerzenia optymalizujące wydajność: mcrypt, openssl, zip, curl, gd, pdo, varnishd, mod_pagespeed, memcached, apc
- Tylko moduł PShowImporter: wymagane rozszerzenie PHP libxml > 2.9.3
Więcej na ten wymagań oraz wynikających z nich korzyści przeczytasz w naszej bazie wiedzy.
Wraz z modułem otrzymujesz gwarancję w postaci 3-miesięcznego wsparcia technicznego, obejmującego pomoc naszych specjalistów na helpdesk.prestashow.pl HelpDesk oraz dostęp do aktualizacji modułu. Po wygaśnięciu wsparcia technicznego będziesz mógł nadal korzystać z modułów, jednak dostęp do wsparcia i aktualizacji nie będzie możliwy. W każdej chwili możesz odnowić wsparcie techniczne korzystając z dostępnych pakietów.
Korzyści z posiadania aktywnego wsparcia technicznego
Pomoc na helpdesk.prestashow.pl
- Możesz zadawać pytania i zgłaszać problemy, które zawsze rozwiążemy.
- Gwarancja poprawnego działania modułu w Twoim sklepie.
- Pomoc w instalacji i obsłudze modułów.
- 67% zgłoszeń na HelpDesk realizujemy poniżej 24h, pon-pt.
- Możliwość odpłatnej rozbudowy i dopasowania modułów do Twoich potrzeb.
- Na HelpDesk możesz zamówić dowolne prace programistyczne i optymalizacyjne dla Twojego sklepu i serwera.
- Dodatkowe prace wyceniamy z góry i wdrażamy w umówionym terminie.
Aktualizacje modułów
- Nowe funkcjonalności, poprawki i zabezpieczenia.
- Moduły poinformują Cię o dostępnych aktualizacjach i nowościach.
- Aktualizację modułu wykonasz 1 kliknięciem.
- Moduł przed aktualizacją wykona backup swoich plików. W razie problemów sprawnie przywrócisz poprzednią wersję i skorzystasz z pomocy HelpDesk
Baza wiedzy
W Bazie Wiedzy znajdziesz odpowiedzi na najczęściej zadawane pytania. W razie potrzeby dalszej pomocy załóż zgłoszenie na HelpDesk.
- Wszystkie moduły bez ograniczeń możesz przetestować w sklepie demo.prestashow.pl
- Każdy moduł działa i wygląda tak samo w każdej wersji PrestaShop, z którą współpracuje
- Sklep demo zostanie wygenerowany tylko dla Ciebie
- Wszystkie moduły znajdziesz w zakładce PrestaShow Modules w lewym menu sklepu demo
- Możesz zmienić język panelu admina na polski lub angielski
- Sklep demo zostanie automatycznie usunięty po 48 godzinach od ostatniej aktywności w nim
Przejdź do sklepu demo: demo.prestashow.pl
Login i hasło: demo@prestashow.pl
Po zalogowaniu możesz zmienić język panelu admina edytując konto (prawy górny róg)
Szczegółowe informacje nt. licencji znajdziesz na tej stronie. Poniżej znajdują się najważniejsze informacje dotyczące użytkowania naszych modułów i licencji:
- Moduł możesz użytkować bez ograniczeń czasowych w jednym sklepie: 1 moduł = 1 licencja = 1 domena.
- Przypisanie modułu do domeny wykonasz samodzielnie po zalogowaniu się do Twojego Konta w sklepie prestashow.pl
- Moduł możesz również użytkować w sklepie testowym: dev.domena.pl, test.domena.pl, beta.domena.pl.
- Zmiana domeny dla licencji jest możliwa. W tym celu prosimy o kontakt pod adresem kontakt@prestashow.pl
- Możesz modyfikować kod źródłowy modułów w plikach tpl i css. Modyfikacja silnika (core) modułu wiąże się z utratą gwarancji.
Coraz więcej firm przenosi swoje usługi i działalność stacjonarną do sieci. Rozwiązanie to pozwala dotrzeć do większego grona odbiorców oraz zadbać o rozwój działalności. Wsparciem w tych działaniach może być PrestaShop – elastyczne narzędzie modułowe przeznaczone do budowy sklepów internetowych....
Polecam -wyniki w gtmetix poprawiły się
Work good but make sure you have installed one of mentioned extensions on your server if you want to use webp format.
OK
Dziękuję za ustawienie serwera. To on był u nas problemem.
Efekt podobny z 67 na 81. Dobry moduł
great module: webp + 12 point, lazy load + 7 points page speed
Moduł robi co ma robić. Wynik page speed desktop 72 do 81, mobile 44 do 55. Polecam.
Wide Print - najszybsza metoda dla czasu ładowania sklepu to "Load lazily without placeholder". Dla zdjęć i obrazków możesz wybrać jedną z następujących metod:
1. Load normally (ładowanie bez lazyload)
2. Load lazily without placeholder (fastest) (lazyload bez obrazka zastępczego)
3. Load lazily and use original image with low resolution as placeholder (looks nice) (lazyload z powolnym ładowaniem)
4. Load lazily and use shop logo with low resolution as placeholder (compromise between options 2 and 3) (lazyload z obrazkiem-zaślepką)
Po ostatniej aktualizacji można ustawić metodę lazyload dla zdjęć produktów i dla pozostałych zdjęć w sklepie niezależnie. Która metoda jest najlepsza dla tych zdjęć?
Moduł działa po prostu dobrze, dokładniej, strona w trakcie ładowania wygląda ładnie. Dzięki!