一回折れた人

日々の出来事をつらつらと

ファイルを圧縮して表示速度を改善

apache IT Linux WordPress

お手軽にページの描写速度を改善出来そうだったので、設定しました。 ページの最適化をチェックするには、PageSpeed Insightsを使えば改善点を教えてくれます。 修正前は・・・

f:id:hpptms:20170921222046p:plain

f:id:hpptms:20170921222136p:plain

真っ赤ですね・・・。 改善案はこんな感じで表示されます。

という訳でファイルを圧縮して送信するようにします。

WordPressのプラグインでもある？かもしれませんが、今回はapache(webサーバ)側で対応しちゃいます。 ファイルの圧縮というとなんだかめんどくさそうですが、実際はアパッチの設定を少し直すだけです。

その設定を行うには、「.htaccess」というファイルを修正してapacheを再起動する必要があります。 その「.htaccess」を修正する前にやる事があります。 apacheのコンフィグファイル「httpd.conf」というファイルを修正して、「.htaccess」を適用させる設定を行います。 ファイルの場所は僕の場合は「/etc/httpd/conf」の中にありました。

<Directory "/var/www/html">
---省略
#
# AllowOverride controls what directives may be placed in .htaccess files.
# It can be "All", "None", or any combination of the keywords:
#   Options FileInfo AuthConfig Limit
#
    AllowOverride None　←をAllに変更

Allにすると、「.htaccess」を適用させる準備が出来たので、「.htaccess」を編集します。 「.htaccess」の場所は、僕の場合は「/var/www/html/wp/wordpress」にありました。 少し補足すると、「.htaccess」ファイルはhttpd.confをディレクトリごとに制御できる個別ファイルみたいな存在です。 なので、「.htaccess」ファイルは、おそらくwordpressの本体ファイルと同じ階層に存在します。

肝心の「.htaccess」ファイルの中身ですが、ネットの設定例から拝借させて頂きました。

AddType image/x-icon .ico
 
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
#DeflateCompressionLevel 4
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>
 
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
</ifModule>
 
FileETag none
 
<FilesMatch "^(wp-config\.php|wp-mail\.php|install\.php|\.ht)">
order allow,deny
deny from all
</FilesMatch>
 
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !\.(html?|xml|xsl|js|css|jpe?g|png|gif|ico)$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
 
# END WordPress

圧縮出来るファイルはほぼ全て圧縮して送信する設定みたいです。 設定ファイルが完成したら、apacheを再起動します。

service httpd restart

先ほどテストしたPageSpeed Insightsでもう一度速度を測ってみます。

f:id:hpptms:20170921222231p:plain

f:id:hpptms:20170921222303p:plain

劇的には変わりませんが、30分くらいで設定出来てそれなりに効果があるようなので、 速度に困っていて、まだ未設定だったらやってみる価値はありますね。