Jak przyspieszyć pobieranie witryn przez przeglądarki

W celu przyspieszenia pobierania witryn webowych można wykonać kilka optymalizacji po stronie serwera apache oraz w plikach witryny.

Potrzebne narzędzia

Za pomocą własnego repozytorium pakietów należy zainstalować w systemie:

pkg install -y graphics/jpegoptim graphics/optipng devel/py-jsmin www/py-cssmin

Oprogramowanie służy do optymalizacji odpowiednio:

plików graficznych (jpg, png)
skryptów JavaScript
plików CSS

Optymalizacja plików graficznych

Poniżej sposób użycia narzędzi do optymalizacji plików.

jpegoptim

find ./ -name '*.jpg' -exec jpegoptim -spP {} \;

optipng

find ./ -name '*.png' -exec optipng -strip all -preserve -o4  {} \;

Optymalizacja kodu JS

Narzędzie nie potrafi zrobić optymalizacji "w locie", tak więc trzeba pliki oryginalne przekopiować na nazwy tymczasowe i utworzyć pliki na nowo:

for f in `ls *.js`; do cp -p $f ${f}.orig; python -m jsmin ${f}.orig > $f; done

Optymalizacja plików CSS

Narzędzie nie potrafi zrobić optymalizacji "w locie", tak więc trzeba pliki oryginalne przekopiować na nazwy tymczasowe i utworzyć pliki na nowo:

for f in `ls *.css`; do cp -p $f ${f}.orig; cssmin < ${f}.orig > $f; done

Optymalizacja kodu HTML

Na bazie własnych doświadczeń:

Wszelkie obiekty "blokujące" jak JavaScript czy CSS należy przenieść na konic pliku HTML (patrz dokumentacja Page Speed)
Odwołania do CSSów związanych z czcionkami zapisać na końcu HTMLa (po znaczniku zamykającym).
TBA

Konfiguracja po stronie serwera www

Po stronie serwera apache do wykorzystania są następujące moduły:

mod_deflate

Moduł służący kompresji danych. Należy tylko uważać rozważnie w przypadku witryn z szyfrowaniem (bezpieczeństwo). Konfiguracja umieszczana jest w następujących sekcjach:

Sekcja Directory

<Directory ...>
    <IfModule mod_deflate.c>
        AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
    </IfModule>
</Directory>

Sekcja VirtualHost

W konfiguracji serwera wirtualnego należy umieścić następującą konfigurację (z wykorzystaniem mod_headers):

      <IfModule mod_headers.c>
          <IfModule mod_deflate.c>
              # Serve gzip compressed CSS files if they exist
              # and the client accepts gzip.
              RewriteCond "%{HTTP:Accept-encoding}" "gzip"
              RewriteCond "%{REQUEST_FILENAME}\.gz" -s
              RewriteRule "^(.*)\.css" "$1\.css\.gz" [QSA]

              # Serve gzip compressed JS files if they exist
              # and the client accepts gzip.
              RewriteCond "%{HTTP:Accept-encoding}" "gzip"
              RewriteCond "%{REQUEST_FILENAME}\.gz" -s
              RewriteRule "^(.*)\.js" "$1\.js\.gz" [QSA]

              # Serve correct content types, and prevent mod_deflate double gzip.
              RewriteRule "\.css\.gz$" "-" [T=text/css,E=no-gzip:1]
              RewriteRule "\.js\.gz$" "-" [T=text/javascript,E=no-gzip:1]

              <FilesMatch "(\.js\.gz|\.css\.gz)$">
                  # Serve correct encoding type.
                  Header append Content-Encoding gzip

                  # Force proxies to cache gzipped &
                  # non-gzipped css/js files separately.
                  Header append Vary Accept-Encoding
              </FilesMatch>
          </IfModule>

mod_expires

Moduł ustawia czas życia obiektów w lokalnym cache przeglądarki. Konfiguracja do wykonania w ramach sekcji Directory:

<Directory ...>
    <IfModule mod_expires.c>
        Header set cache-control: public
        ExpiresActive on
        ExpiresDefault "access plus 1 month"
        ExpiresByType text/html             "access plus 1 hour"
        ExpiresByType application/rss+xml   "access plus 1 hour"
        ExpiresByType image/png             "access plus 3 month"
        ExpiresByType image/jpg             "access plus 3 month"
        ExpiresByType image/jpeg            "access plus 3 month"
        ExpiresByType video/ogg             "access plus 3 month"
        ExpiresByType audio/ogg             "access plus 3 month"
        ExpiresByType video/mp4             "access plus 3 month"
        ExpiresByType image/x-icon          "access plus 1 year"
        ExpiresByType font/ttf              "access plus 1 year"
        ExpiresByType image/svg+xml         "access plus 1 year"
    </IfModule>
</Directory>

mod_headers

Potrzebny w celu uruchomienia optymalizacji kompresji dla mod_deflate.

Dodatkowo w konfiguracji dla VirtualHost należy ustawić:

      <IfModule mod_headers.c>
          # roczne cache obrazk/ow (g/l/ownie chodzi o gravatar.com)
          <FilesMatch "\.(ico|gif|jpg|jpeg|png|flv|pdf)$">
              Header set Cache-Control "max-age=29030400"
          </FilesMatch>
      </IfModule>
   </VirtualHost>