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

# ------------------------------------------------------------------------------
# | Compression                                                                |
# ------------------------------------------------------------------------------

<IfModule mod_deflate.c>

    # Force compression for mangled headers.
    # http://developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping
    <IfModule mod_setenvif.c>
        <IfModule mod_headers.c>
            SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
            RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
        </IfModule>
    </IfModule>

    # Compress all output labeled with one of the following MIME-types
    # (for Apache versions below 2.3.7, you don't need to enable `mod_filter`
    #  and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines
    #  as `AddOutputFilterByType` is still in the core directives).
	
	
    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE application/atom+xml \
                                      application/javascript \
                                      application/json \
                                      application/rss+xml \
                                      application/vnd.ms-fontobject \
                                      application/x-font-ttf \
                                      application/x-web-app-manifest+json \
                                      application/xhtml+xml \
                                      application/xml \
                                      font/opentype \
                                      image/svg+xml \
                                      image/x-icon \
                                      text/css \
                                      text/html \
                                      text/plain \
                                      text/x-component \
                                      text/xml
    </IfModule>

</IfModule>

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.

<IfModule mod_expires.c>

    ExpiresActive on
    ExpiresDefault                                      "access plus 1 month"

  # CSS
    ExpiresByType text/css                              "access plus 1 year"

  # Data interchange
    ExpiresByType application/json                      "access plus 0 seconds"
    ExpiresByType application/xml                       "access plus 0 seconds"
    ExpiresByType text/xml                              "access plus 0 seconds"

  # Favicon (cannot be renamed!)
    ExpiresByType image/x-icon                          "access plus 1 week"

  # HTML components (HTCs)
    ExpiresByType text/x-component                      "access plus 1 month"

  # HTML
    ExpiresByType text/html                             "access plus 0 seconds"

  # JavaScript
    ExpiresByType application/javascript                "access plus 1 year"

  # Manifest files
    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
    ExpiresByType text/cache-manifest                   "access plus 0 seconds"

  # Media
    ExpiresByType audio/ogg                             "access plus 1 month"
    ExpiresByType image/gif                             "access plus 1 month"
    ExpiresByType image/jpeg                            "access plus 1 month"
    ExpiresByType image/png                             "access plus 1 month"
    ExpiresByType video/mp4                             "access plus 1 month"
    ExpiresByType video/ogg                             "access plus 1 month"
    ExpiresByType video/webm                            "access plus 1 month"

  # Web feeds
    ExpiresByType application/atom+xml                  "access plus 1 hour"
    ExpiresByType application/rss+xml                   "access plus 1 hour"

  # Web fonts
    ExpiresByType application/font-woff                 "access plus 1 month"
    ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
    ExpiresByType application/x-font-ttf                "access plus 1 month"
    ExpiresByType font/opentype                         "access plus 1 month"
    ExpiresByType image/svg+xml                         "access plus 1 month"

</IfModule>

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