Poniżej przedstawiam case z optymalizacji obrazków na stronie internetowej i4a.pl – a wszystko po to, by oczywiście zwiększyć szybkość ładowania się strony. Zobacz krok po kroku jak przyśpieszyć swoją stronę optymalizując grafikę bez straty jakości.
Na początek sprawdzam jak szybko ładuje się strona. Użyłem do tego korporacyjnego narzędzia: PageSpeed Insights.
Wyniki testu szybkości dla strony i4a.pl:
Postaram się teraz zwiększyć prędkość. Operacja jest bardzo prosta i zajmuje nie więcej niż 5 minut.
Krok pierwszy. Ściągam z serwera wszystkie obrazki. Mam wszystkie obrazki w jednym folderze, więc biorę cały folder na dysk.
Pobranie programu. Ściągam teraz program, który praktycznie całą robotę odwali za mnie. Strona internetowa: http://pngquant.org/. Klikam tam „PNGoo — Windows GUI for batch conversion” i zapisuję na dysk. Po zapisaniu (mały plik) otwieram program.
Optymalizacja obrazków. Program jest prosty w obsłudze. Zaznaczam opcję „output to same directory”, dzięki temu pomniejszone pliki zostaną nadpisane, a te, których nie udało się powiększyć zostaną bez zmian. Wskazuję jeszcze tylko obrazki do zoptymalizowania i klikam „Go!”.
Podmiana obrazków. Teraz tylko wystarczy podmienić obrazki na serwerze.
No i sprawdzam ponownie szybkość:
Jak widać prostym sposobem udało się poprawić prędkość o 4 punkty dla komputerów, dla komórek bez zmian. Oczywiście postęp zależy tu głównie od nasycenia strony grafiką no i jakości wcześniejszej optymalizacji.
dzięki, ostatnio zmagam się ze stroną fotografa, która miała bardzo dużo zdjęć w wysokiej rozdzielczości. program bardzo przyspieszy mi pracę
Fajne rozwiązanie, na pewno skorzystam z niego :)A powiedz mi czy na stronach wordpress z wtyczką smush it też trzeba optymalizować obrazki? W końcu ta wtyczka działa w podobny sposób.
Program fajnie działa na plikach png a znasz może jakiś co będzie przerabiał masowo pliki jpg ?
Teraz zasadnicze pytanie: Czy im większa wartość w tym narzędziu tym nasza strona może liczyć na wyższe pozycje w wyszukiwarce? Czy ma to jakiś wpływ, czy raczej to taki subiektywny wskaźnik dla webmastera, że strona działa dobrze.
Optymalizację jpegów widziałen na nacie, jest tego pełno szukając w googlu po „jpeg optimizer”.
Nie znam tej wtyczki smush, więc nic nie napiszę. Ale możesz zrobić test z włączoną wtyczką i z wyłączoną.
Pozycja a prędkość ładowania strony. Na pewno kilka oczek w tym teście nie ma zbytniego wpływu na pozycję. Trzeba by sprawdzić pozycje przy większych różnicach – zachęcam do przetestowania.
Poszukałem i znalazłem programik, który optymalizuje pliki jpg jak i png 🙂
http://download.criosweb.ro/download.php?sid=R&type=installer
@zenjo
Obecnie tak, bo Yahoo wyłączyło free wersję tej usługi o czym zostałeś poinformowany, chyba, że nie korzystasz z najnowszej wersji 😉 Ale są inne wtyczki i wówczas co chyba oczywiste nie trzeba. Bo po co się bawić w takie pobieranie obrazków, jak są bez naszej fatygi optymalizowane. Dla wcześniej wgranych odpala się masowe działania i wuala.
====
@okazwłoka może jakieś zestawienie tego typu usług/narzędzi? Dla właścicieli stron statycznych lub innych pod które z jakiejś przyczyny nie można podpiąć narzędzia/usługi optymalizującej automatycznie obrazki, by się przydało 😀
PS popraw sobie dodawanie komentarzy – brak przekierowania i wywala ci nagłówek http://prntscr.com/6l516a
dzięki za info, ale nie mogę jakoś tego błędu wywołać 🙂
Przydałoby się jeszcze dodatkowo sprzwdzenie tych parametrów dla obrazków złączonych w całość (tych małych, ikon i np. jakichś miniatur) i tylko odpowiednio pozycjonowanych za pomocą CSS.
Wiadomo, że to się sprawdza tylko dla statycznych stron, ale im mniej żądań, tym lepiej. Warto byłoby wiedzieć, czy ma to sens, czy jest to pomijalne.
Atrybut alt= to podstawa 🙂
Bardzo interesujący ten program , przeanalizuje go sobie.