Przyspieszanie strony w Pagespeed Insight - pomniejszanie zdjęć w Photoshopie

Przyspieszanie strony w Pagespeed Insight – pomniejszanie zdjęć w Photoshopie

Czynnikiem, który ma coraz większe znaczenie w pozycjonowaniu jest szybkość ładowania strony. Szybsza strona oznacza wyższe pozycje – google uznaje za istotną rolę użyteczności stron dostarczanych użytkownikom, zwłaszcza przy coraz częstszych wyszukiwaniach mobilnych. Szybkość swojej strony można sprawdzić narzędziami:

Przyspieszanie strony

Kompresja i wymiarowanie zdjęć

Co najbardziej zwalnia stronę? Oczywiście zdjęcia. Miałem przypadek że strona miała 22/100 w skali Pagespeed Insights, po optymalizacji jedynie zdjęć strona przyspieszyła do 77/100. Często właściciele stron wrzucają bezładnie obrazki na swoje strony nie zdając sobie sprawy jakie to ma konsekwencje. A według badań wolniejsze ładowanie strony nawet o sekundę znacznie zmniejsza liczbę wejść na stronę

Skalowanie zdjęć

Jedną z pierwszych rzeczy, które należy zrobić to wyłapanie zdjęć na stronie, które mają większe źródła niż rozmiar na stronie – pomoże tu gtmetrix, który przekazuje informację: Serve scaled images. W tej zakładce otrzymamy listę zdjęć, które możemy pomniejszyć i tym samym otrzymać bezstratnie tą samą jakość zdjęcia przy mniejszym rozmiarze.

Kompresja zdjęć za pomocą WP Smush

Popularną wtyczką do WordPressa, która pomoże w bezstratnej kompresji zdjęć jest WP Smush. Możemy dzięki niemu skompresować zdjęcia które mają poniżej 1 mb w wersji bezpłatnej, do większych potrzebna wersja WP Smush Pro. To co jest dobre w tej wtyczce, to możliwość przeglądu wszystkich już załadowanych zdjęć jednym kliknięciem – program zmniejsza wszystkie już istniejące zdjęcia. Jednocześnie wszystkie wysyłane za pomocą wordpressa autmatycznie są optymalizowane.

Kompresja za pomocą Photoshopa

Jednym ze sposobów na pomniejszenie zdjęć jest użycie popularnego Photoshopa. Opiszę tu dość szybką ręczną metodę pomniejszania zdjęć, niestety oznaczającą spadek jakości, nie koniecznie będzie on jednak widoczny – wszystko zależy od nas.

  1.  Uruchamiamy Pagespeed Insights, znajdujemy  i rozwijamy zakładkę: Zoptymalizuj obrazy. Jest w niej lista zdjęć, które można poprawić
  2. Przesuwamy kursor nad adres pliku, np. Kompresja bezstratna https://www.grafpa.pl/…lad-ksiazki-i-ebooka-okladka-204×124.jpg pozwoliła zredukować rozmiar o 8,9 KB (57%).
  3.  Pojawia się ścieżka do pliku a beżowym tle w którą klikamy dwukrotnie lewym przyciskiem by zaznaczyć ścieżkęZaznaczanie zdjęcia do przyspieszenia
  4. Klikamy prawym przyciskiem i zapisujemy obiekt docelowy jako na dysku w odpowiednim folderze – używanym jako kopia oryginałów. Ważne jest by zachować na wszelki wypadek kopie oryginałów (można również ściągnąć ze serwera całość mediów i zachować je osobnym miejscu)
  5. Otwieramy zdjęcie i zapisujemy do weba (ctrl+shift+alt+s) ustawiając: typ: JPG, Quality (Jakość – najważniejsza opcja w skali od 0-100) – tutaj możemy ustawić skalę od 10 do 50 – konieczne sprawdzając ile stracimy na jakości – od tego zależy jak daleko się możemy posunąć zmniejszając rozmiar pliku. Przy czym 10 oznacza sporą degradację zdjęcia. Zaklikujemy dodatkowo opcję Optimized – Zoptymalizowane. Wszystko to można jeszcze przyspieszyć ustawiając odpowiednią akcję w Photoshopie i skrót do niej.
  6. Zapisujemy zdjęcie w osobnym folderze przeznaczonym do załadowania na serwer strony zdjęcie pamiętając by zachować tą samą nazwę. Uwaga – zdjęcia o rozszerzeniu .jpeg zostaną zapisane jako .jpg. Należy wtedy ręcznie zmienić nazwę pliku na .jpeg
  7. Otwieramy klienta ftp i podmieniamy obrazek na serwerze.

Działając w ten sposób można w dość krótkim czasie ściągnąć i zmniejszyć wiele zdjęć, co zaskakująco podniesie szybkość ładowania strony.

Sprawdź ofertę na pozycjonowanie stron www.

Zapisz

Zapisz

Zapisz

Skomentuj

Przeczytaj poprzedni wpis:
Agenda SEM KRK w 2016 r.
SEMKRK – podsumowanie spotkania pasjonatów marketingu internetowego w Krakowie

Przedstawiciel Studio Grafpa miał okazję zawitać na trzecim spotkaniu pasjonatów marketingu internetowego organizowanym przez DEVA GROUP w Krakowie. […]

Zamknij