Odpowiednia optymalizacja strony internetowej to między innymi zadbanie o jej szybkość ładowania i prędkość działania. Wolne witryny nie tylko są nieprzyjemne w obsłudze dla użytkowników, którzy jeśli muszą czekać dłużej niż 4 sekundy na załadowanie się strony zaczynają odczuwać frustrację, ale również zdobywają gorszą reputację w wyszukiwarce.

Jako kilka głównych kryterium ewaluacji jakości strony wg Google są m.in. renderowanie treści, czas do pełnej interaktywności strony oraz wykorzystanie pamięci podręcznej do przechowywania zasobów w cache przeglądarki.

W poniższym wpisie pokażemy Wam jak w prosty i szybki sposób za pomocą pliku .htaccess dokonać podstawowej optymalizacji strony, podnoszącej jej indeks prędkości, co sami będziecie mogli łatwo ocenić przy użyciu narzędzia Google – PageSpeed Insights albo GTMetrix.

przyspieszenie-strony-z-htaccess-wynik

Kompresja danych g-zip

G-Zip to forma bezstratnej kompresji danych, które przeglądarka odbiera od serwera, po wysłaniu zapytania ze strony internetowej. W skład danych, które są niezbędne do wyświetlenia witryny wchodzą grafiki, skrypty, pliki html, css czy xml. Im więcej danych, tym większe żądanie musi zostać przesłane przez serwer, co wydłuża proces ładowania strony.

Aby zastosować kompresję g-zip, należy umieścić odpowiednią dyrektywę w pliku htaccess. Reguła deflate opiera się na mod_deflate, który z reguły jest włączony na większości serwerów i bez problemu współpracuje z nowymi wersjami przeglądarek.

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE application/json
</IfModule>

W przypadku gdy na serwerze nie ma mod_deflate lub wersja przeglądarki nie obsługuje dyrektywy deflate można zastosować starszą metodę g-zip.

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

Przechowywanie zasobów w pamięci podręcznej

Aby usprawnić wczytywanie się witryny www, dane statyczne czyli takie, które rzadko ulegają zmianie (np. grafiki, pliki css) przechowuje się w pamięci podręcznej.

Pamięć podręczna, czyli cache, służy do magazynowania tych zasobów zarówno po stronie serwera jak i przeglądarki użytkownika. Aby zmniejszyć obciążenie serwera i czas ładowania zasobów w przeglądarce możemy zdefiniować, które z nich mają być przechowywane oraz jak długo. W wielu przypadkach nie ma sensu wielokrotne i każdorazowe pobieranie ładunków sieciowych, które tylko spowalniają proces ładowania strony czy sklepu internetowego i zaniżają naszą punktację w testach wydajnościowych.

przyspieszenie-strony-z-htaccess

Moduł w pliku htaccess, która odpowiada za przygotowanie zawartości strony po stronie serwera i przechowywanie zasobów po stronie przeglądarki, to mod_expires. Poniżej znajduje się dość obszerny kod, który odpowiada za prawidłowe przygotowanie przesyłanych nagłówków.

<IfModule mod_mime.c>
AddType text/css .css
AddType text/x-component .htc
AddType application/x-javascript .js
AddType application/javascript .js2
AddType text/javascript .js3
AddType text/x-js .js4
AddType text/html .html .htm
AddType text/richtext .rtf .rtx
AddType image/svg+xml .svg
AddType text/plain .txt
AddType text/xsd .xsd
AddType text/xsl .xsl
AddType text/xml .xml
AddType video/asf .asf .asx .wax .wmv .wmx
AddType video/avi .avi
AddType image/bmp .bmp
AddType application/java .class
AddType video/divx .divx
AddType application/msword .doc .docx
AddType application/vnd.ms-fontobject .eot
AddType application/x-msdownload .exe
AddType image/gif .gif
AddType application/x-gzip .gz .gzip
AddType image/x-icon .ico
AddType image/jpeg .jpg .jpeg .jpe
AddType image/webp .webp
AddType application/json .json
AddType application/vnd.ms-access .mdb
AddType audio/midi .mid .midi
AddType video/quicktime .mov .qt
AddType audio/mpeg .mp3 .m4a
AddType video/mp4 .mp4 .m4v
AddType video/mpeg .mpeg .mpg .mpe
AddType video/webm .webm
AddType application/vnd.ms-project .mpp
AddType application/x-font-otf .otf
AddType application/vnd.ms-opentype ._otf
AddType application/vnd.oasis.opendocument.database .odb
AddType application/vnd.oasis.opendocument.chart .odc
AddType application/vnd.oasis.opendocument.formula .odf
AddType application/vnd.oasis.opendocument.graphics .odg
AddType application/vnd.oasis.opendocument.presentation .odp
AddType application/vnd.oasis.opendocument.spreadsheet .ods
AddType application/vnd.oasis.opendocument.text .odt
AddType audio/ogg .ogg
AddType application/pdf .pdf
AddType image/png .png
AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
AddType audio/x-realaudio .ra .ram
AddType image/svg+xml .svg .svgz
AddType application/x-shockwave-flash .swf
AddType application/x-tar .tar
AddType image/tiff .tif .tiff
AddType application/x-font-ttf .ttf .ttc
AddType application/vnd.ms-opentype ._ttf
AddType audio/wav .wav
AddType audio/wma .wma
AddType application/vnd.ms-write .wri
AddType application/font-woff .woff
AddType application/font-woff2 .woff2
AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A31536000
ExpiresByType text/x-component A31536000
ExpiresByType application/x-javascript A31536000
ExpiresByType application/javascript A31536000
ExpiresByType text/javascript A31536000
ExpiresByType text/x-js A31536000
ExpiresByType text/html A3600
ExpiresByType text/richtext A3600
ExpiresByType image/svg+xml A3600
ExpiresByType text/plain A3600
ExpiresByType text/xsd A3600
ExpiresByType text/xsl A3600
ExpiresByType video/asf A31536000
ExpiresByType video/avi A31536000
ExpiresByType image/bmp A31536000
ExpiresByType application/java A31536000
ExpiresByType video/divx A31536000
ExpiresByType application/msword A31536000
ExpiresByType application/vnd.ms-fontobject A31536000
ExpiresByType application/x-msdownload A31536000
ExpiresByType image/gif A31536000
ExpiresByType application/x-gzip A31536000
ExpiresByType image/x-icon A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType image/webp A31536000
ExpiresByType application/json A31536000
ExpiresByType application/vnd.ms-access A31536000
ExpiresByType audio/midi A31536000
ExpiresByType video/quicktime A31536000
ExpiresByType audio/mpeg A31536000
ExpiresByType video/mp4 A31536000
ExpiresByType video/mpeg A31536000
ExpiresByType video/webm A31536000
ExpiresByType application/vnd.ms-project A31536000
ExpiresByType application/x-font-otf A31536000
ExpiresByType application/vnd.ms-opentype A31536000
ExpiresByType application/vnd.oasis.opendocument.database A31536000
ExpiresByType application/vnd.oasis.opendocument.chart A31536000
ExpiresByType application/vnd.oasis.opendocument.formula A31536000
ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
ExpiresByType application/vnd.oasis.opendocument.text A31536000
ExpiresByType audio/ogg A31536000
ExpiresByType application/pdf A31536000
ExpiresByType image/png A31536000
ExpiresByType application/vnd.ms-powerpoint A31536000
ExpiresByType audio/x-realaudio A31536000
ExpiresByType image/svg+xml A31536000
ExpiresByType application/x-shockwave-flash A31536000
ExpiresByType application/x-tar A31536000
ExpiresByType image/tiff A31536000
ExpiresByType application/x-font-ttf A31536000
ExpiresByType application/vnd.ms-opentype A31536000
ExpiresByType audio/wav A31536000
ExpiresByType audio/wma A31536000
ExpiresByType application/vnd.ms-write A31536000
ExpiresByType application/font-woff A31536000
ExpiresByType application/font-woff2 A31536000
ExpiresByType application/vnd.ms-excel A31536000
ExpiresByType application/zip A31536000
</IfModule>

Cache Control – data wygaśnięcia przechowywanych zasobów

Funkcja cache control określa maksymalny wiek zasobów statycznych, które będą przechowywane przez przeglądarkę użytkownika. Warto pamiętać aby pliki css/js/php określać jako ‘private’, pozostałe zasoby, np. zdjęcia, ikony, grafiki można ustawić jako publiczne.

<FilesMatch „\.(css|htc|less|js|js2|js3|js4|CSS|HTC|LESS|JS|JS2|JS3|JS4)$”>
FileETag MTime Size
<IfModule mod_headers.c>
Header set Pragma „public”
Header append Cache-Control „max-age=2628000, private”
Header unset Set-Cookie
</IfModule>
</FilesMatch>
<FilesMatch „\.(html|htm|rtf|rtx|svg|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|TXT|XSD|XSL|XML)$”>
FileETag MTime Size
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
Header set Pragma „public”
Header append Cache-Control „max-age=2628000, public”
</IfModule>
</FilesMatch>
<FilesMatch „\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|webp|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|webm|mpp|otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|_ttf|wav|wma|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|DOCX|EOT|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|WEBP|JSON|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|WEBM|MPP|OTF|_OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SVG|SVGZ|SWF|TAR|TIF|TIFF|TTF|TTC|_TTF|WAV|WMA|WRI|WOFF|WOFF2|XLA|XLS|XLSX|XLT|XLW|ZIP)$”>
FileETag MTime Size
<IfModule mod_headers.c>
Header set Pragma „public”
Header append Cache-Control „max-age=31536000, public”
Header unset Set-Cookie
</IfModule>
</FilesMatch>

Te kilka dyrektyw może znacznie poprawić wynik Waszych stron w narzędziach sprawdzających ich wydajność, np. Google PageInsights czy GTMetrix. Na pierwszy rzut oka możecie nie zobaczyć realnej zmiany w efektywności działania strony jednak korzyści ze stosowania ww. rozwiązań są niepodważalne.

Odwiedź nas na Facebooku i Instagramie,
-BSIDEWORK Team #innowacjewpraktyce