2019.08.16
この記事は約4分で読めます。
Webフォント軽量化、画像軽量化に引き続き3回目はテキストの圧縮(★印)。次がCSSになります。先に書きますが下記の9番目はよくよく調べると画像の最適化が最も有効になるということで、今回の記事から解決済みとしました。
正直テキストの圧縮は今のようにモバイルファーストが言われるまでは、そこまで気にもしなかった内容です。個人的な感想で言えば、見やすいソース、なるべく複雑にならないCSSは目指してきましたが、それ以外にこんなことも必要になってくるとは…。
検索して調べ、幾つかのページを見て結論としてはhtaccessに以下を記述しました。
<IfModule mod_deflate.c> SetOutputFilter DEFLATE BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html Header append Vary Accept-Encoding env=!dont-vary # 画像は再圧縮しない SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary # 圧縮設定 AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/js AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/atom_xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-httpd-php </IfModule>
gzip圧縮をしています。
gzip圧縮とはHTMLやCSSなどをgzipというものによって圧縮する方法のことです。
サイトにアクセスした際、ファイルサイズが小さくなることでデータ転送速度が速くなります。
2通りあるようです。
検索した際多かったのはmod_deflateモジュールで設定のパターンでした。
私も実際そちらを採用しています。mod_rewriteモジュールで設定する方法は検索したら出てきました。紹介のためにリンクを貼っておきます。
「gzip圧縮」でWebサイトを高速化しよう!【mod_rewrite編】
ただしこのサイトでも利用しているさくらインターネットでは、mod_deflateモジュールは非公開機能だという話もありました。.htaccessファイルは書き間違えるとトラブルの素にもなる(実際やらかした過去)ので、実際はサポートされている方法がいいと思うのですが、結果圧縮有効になったので現時点では大丈夫かな、と思います。
これでテキスト圧縮されているかどうかを見るには、開発者ツールを使って確認できます(一応こちらでも確認して問題ありませんでした)。
が、オンラインで確認できるサイトがあります。
便利ですね~。
注意項目から該当項目の注意はなくなりました。ただ消えた項目が再度出てきているというのもあって、キャッシュによるものかなという気もします。結果にとらわれず実験的に残りのCSSも進めていきます。
コメントをどうぞ