Jest już późno, napiszę więc krótko. Najprostszym sposobem na szybsze wczytywanie strony jest kompresja oraz zmuszenie przeglądarki do trzymania strony w pamięci podręcznej. Cały proces jest dosyć prosty i nie powinien stanowić większego problemu. Całość sprowadza się do ustawień w pliku .htaccess pod warunkiem, że odpowiednie moduły są włączone.
Kompresja
Kompresję można zorganizować na trzy sposoby. Pierwszy z nich umieszczenie skompresowanych plików na serwerze, ale takie rozwiązanie będzie dobre dla stron statycznych. Drugą opcją jest włączenie automatycznego kompresowania określonych plików. Rozwiązania dobre, ale obciążające serwer (gdy źle skonfigurowane). Trzecią opcją jest połączenie tych dwóch myśli. Tym tematem zajmę się w przyszłości.
Można sprawdzić swoją stronę pod kątem kompresji tutaj: checkgzipcompression.com
Do tego przykładu muszą być włączone moduły: mod_deflate.c oraz mod_filter.c. Odpowiada on za kompresję.
<IfModule mod_deflate.c>
<IfModule mod_filter.c>
# Kompresuj HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/map
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>
# Zabezpieczenie dla starych przeglądarek
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>
Jak zawsze warto się zabezpieczyć sprawdzając czy moduły są dostępne. Jak łatwo zauważyć jest tutaj podpięta kompletna kompresja dla praktycznie wszystkich typów plików z wyłączeniem obrazów *.jpg i *.png. Jest to związane z z tym, że pliki takie mogą dosyć dużo ważyć a to spowodowałoby duże obciążenie dla serwera.
Pamięć podręczna przeglądarki
Cache jest o tyle przydatny, że nie musimy takiej strony ściągać na swój dysk za każdym razem kiedy na nią wchodzimy. Typowa strona nawet dosyć często aktualizowana składa się z wielu elementów, które są modyfikowane stosunkowo rzadko. Skrypty, grafika czy style są elementami które będą się zmieniać może raz na rok lub nawet rzadziej. Grafiki zazwyczaj dochodzą nowe co spowoduje dodanie ich do cache’a. Dla takich plików zaleca się ustawienie czasu przechowywania na rok. Oczywiście dużo zależy od naszych potrzeb. Dla strony gotowej bezpiecznie można się trzymać tych wytycznych. A gdyby trzeba było coś zmienić na stronie to jak zmusić użytkowników do odświeżenia strony? Wystarczy prosty myk. Pliki trzeba podpisywać. W razie zmian plik uzyska nowy podpis. W najprostszej wersji są to numery wersji plików np styl_1.css -> styl_2.css lub podpis generowany automatycznie np. styl.css?376487243876243. Dla plików html nalezy zastosować odpowiednio krótki czas. Dla typowej strony może to być np. tydzień, dla bloga dzień, a dla strony z informacjami 10 min. Wszystko zależy od tego jak często strona będzie aktualizowana.
Poniższy kod jest przykładem konfiguracji. Do jego użycia jest potrzebny moduł: mod_expires.c
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|txt|html|x-html|php|css|xml|js|woff|ttf|svg|eot|map)(\.gz)?$">
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 week"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType application/x-shockwave-flash "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
Header unset Last-Modified
</IfModule>
</FilesMatch>
Na początek określamy jakie pliki przeglądarka będzie musiała wrzucić do pamięci podręcznej. Następnie trzeba włączyć funkcję oraz ustawić okresy domyślny i dla poszczególnych plików. Na koniec trzeba wyłączyć nagłówek ostatnich zmian.
Jest to jedno z dostępnych rozwiązań. Z drugim rozwiązaniem maiłem pewne problemy. W zależności od serwera działało częściowo, w całości lub wywalało błędy pomimo zabezpieczenia warunkiem. Jest to też rozwiązanie zalecane przez Google’a. Argumentują to tym, że większa ilość przeglądarek obsługuje „datę ważności” pliku.
Gotowe rozwiązania
Opisane rozwiązanie jest uniwersalne dla każdej strony opartej o dowolny CMS lub goły kod np. PHP. Dla popularnych systemów takich jak Joomla, WordPress czy Drupal na pewno są gotowe rozwiązania, które wystarczy dodać do projektu.