Optymalizacja stron WWW, Joomla!, WordPress cz.2

gauntlet_shadow-ce07480dOptymizacja strony www poprzez kompresję plików graficznych na serwerze. Programy typy Photoshop, Gimp itp. mają możliwość zapisu i optymizacji grafiki na potrzeby stron www, niestety nie robią tego  dość sprawnie. Zobaczymy jakich programów używać, żeby jeszcze bardziej zmniejszyć rozmiar naszych grafik na serwerze.

Programy kompresujące do zmniejszania wielkości grafiki

Jest tego sporo. Ja przedstawię kilka z nich, działających pod systemem Windows. Pierwszym z nich będzie:

PNGGauntlet – kompresuje i dokonuje konwersji z  JPG, GIF, TIFF, oraz BMP na PNG. Używa do tego PNGOUT, OptiPNG, oraz DeflOpt.

pnggauntlet

Wyniki pracy PNGGauntlet. Różnicy w jakości nie widać, jednak plik po kompresji jest mniejszy o 10,99 KB.

Grafika po kompresji Oryginalna grafika

RIOT (Radical Image Optimization Tool) – kolejny program kompresujący, którego używam. Może działać także jako wtyczka w IrfanView lub GIMP. Screenshots na stronie programu RIOT.

To są programy, których używam do optymalizacji grafik pod systemem Windows. Jakich programów Wy używacie? Napiszcie o nich w komentarzach.

Nie zapomnijcie przeczytać pierwszej części na temat optymalizacji stron internetowych.

Optymalizacja stron WWW, Joomla!, WordPress

yslow-speedometerOptymalizacja stron internetowych to nie jest moja mocna strona. Chodzi o maksymalne przyśpieszenie działania strony internetowej. Wszystko co napiszę na ten temat, znalazłem w internecie. W większości treść tego wpisu powstało na podstawie wypowiedzi Dominika Kucharskiego, który przedstawiał rozwiązania dla CMS Joomla! podczas Joomla! Day Polska 2012

Przyśpieszamy stronę internetową

Na początku przygotujmy sobie narzędzia. YSlow jest to rozszerzenie dla Google Chrome, działa też jako dodatek do Firebug. Pozwala przetestować stronę oraz wyświetlić jej ocenę. Oceny przydzielane są od A do E. A to najlepsza ocena.

Gzip – kompresja strony

kod, który wklejamy do pliku .htaccess

Expires – nagłówek informujący przeglądarkę internetową jak długo może trzymać element strony na dysku twardym komputera (pamięci przeglądarki) i wykorzystywać go, zamiast ponownie pobierać go z serwera.

Kod 1 i 2 wklejamy do naszego pliku .htaccess. Źródło pochodzi od [HTML5 Boilerplate](http://html5boilerplate.com).

Kolejnym razem zajmiemy się optymalizacją grafiki na naszych serwerach. Podziel się swoimi sposobami optymalizacji.

Grafika poniżej przedstawia wyniki naszej pracy. Na pierwszym wykresie widać ile plików pobiera przeglądarka podczas pierwszej wizyty a ile podczas drugiej. Różnice sąznaczne, podczas pierwszej wizyty pobieranych jest 31 plików, podczas drugiej są to tylko dwa pliki. Wielkość pobranych danych też pokazuje znaczne różnice 512.5 kb – 7.2 kb

optymalizacja_001