サイトアクセス速度最適化

ホームページ
2017.06.06

本ページは広告が含まれています。気になる広告をクリック頂けますと、サーバ運営費になります(^^

遅いサイト表示速度

スマホで撮影した写真をそのままアップして作ったサイトです。表示速度が遅いのは気になっていました。
http://life.live-on.net/archives/294
life.live-on.net

PageSpeed Insightsを利用して点数を出してみます。

そのまんまだと点数は0点　poor評価です。最悪の状態って事で、これだとSEO的にもうまくない状態です。

pagespeed01.jpg

Imsanity を使って巨大な画像のアップロードを自動的にサイズ変更する

アップロード時に画像ファイルを自動的にリサイズするプラグイン
Imsanity このプラグインかなり秀逸です。 幅や高さを指定しておけば、それを上限にしてアップロード時に自動的にサイズを小さくしてくれます。 スマホで撮影したままのファイルをアップされるとかなりサイズが大きかったりして非常に困る事があり
techlive.tokyo

ちょっと怖いアイコンだけど、Imsanityはとても便利なプラグインです。アップが終わっている大きい画像を小さくしてくれるし、アップする時に誤って大きい画像をアップしちゃったときもその場でリサイズしてくれます。

元々300KB以上あった画像のプロパティです。

pagespeed02.jpg

一括で1000px幅に変換してみます。

 

あれ、エラー出ました。

200/200 >> エラー: /var/www/wp03/wp-content/uploads/2017/05/wp-1496209437488.jpg (エディターを選択できませんでした。)

あれ、うまくいかない。このエラーが出るのはphp-gd がインストールされていないせいです。恐らくレンタルサーバなどでは特にこのようなエラーが出る事はないと思いますが、もし同じエラーがでたら諦めるしかないかな。

Debianでは以下のように設定してインストールします。

apt-get update
apt-get install php5-gd
/etc/init.d/apache restart

これを行う事で、gdが有効になり、一括変換できます。

一括返還後の画像をダウンロードしてプロパティを表示すると

pagespeed04.jpg

画像サイズは180KBまで落ちました。約半分の大きさになっています。テストは50点になりました。

pagespeed03.jpg

 

CDN目的でJetpackを入れてみる。

Jetpack by WordPress.com
https://ja.wordpress.org/plugins/jetpack/

[無料] 画像の高速 CDN
これが使いたいわけです。

インストールすると、エラーが出ました

エラー詳細: The Jetpack server was unable to communicate with your site http://life.live-on.net [HTTP 403]. Ask your web host if they allow connections from WordPress.com. If you need further assistance, contact Jetpack Support: http://jetpack.com/support/

 

携帯IPアドレスからしか、WordPressアプリからのアップロード許可していないのがいけないらしいのでいったんコメントアウトか、削除します。

order deny,allow
deny from all
allow from 192.168.12.0/24
allow from 192.168.11.0/24
allow from 1.66.96.0/21
allow from 1.66.104.0/23
allow from 1.72.0.0/21
allow from 1.72.8.0/23
allow from 1.72.10.0/24
allow from 1.75.0.0/21
allow from 1.75.8.0/22
allow from 1.75.12.0/23
http://loadpiece.xyz/blog/wrodpress-plugin-jetpack-connect-error/

連携できたら無料で開始
おすすめの機能を有効化したら
Photon（画像CDN機能）も有効になりました。

pagespeed05.jpg

うーん、JetPack入れたらちょっと遅くなったようです。点数は47点になりました。

キャッシュ系の設定をプラグインを利用する

WP Fastest Cache
最もシンプルで速いWP キャッシュシステム
ja.wordpress.org

キャッシュの設定をすると、.htaccessの値変更を求められるので変更します。ルールは参考テキストが表示されるのでそれを反映します。私の環境では、元々”xmlrpc.php”へのアクセス制限（ドコモからしか受け付けない）が入っているのでちょっと長めになっていますが、ルール参考テキストにもちゃんと反映されていたのでコピペするだけでＯＫです。

# BEGIN WpFastestCache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^www.life.live-on.net [NC]
RewriteRule ^(.*)$ http\:\/\/life\.live\-on\.net\/$1 [R=301,L]
# Start WPFC Exclude
# End WPFC Exclude
RewriteCond %{HTTP_HOST} ^life.live-on.net
RewriteCond %{HTTP_USER_AGENT} !(facebookexternalhit|WhatsApp|Mediatoolkitbot)
RewriteCond %{REQUEST_METHOD} !POST
RewriteCond %{HTTPS} !=on
RewriteCond %{REQUEST_URI} !(\/){2}$
RewriteCond %{QUERY_STRING} !.+
RewriteCond %{HTTP:Cookie} !comment_author_
RewriteCond %{HTTP:Cookie} !wp_woocommerce_session
RewriteCond %{HTTP:Cookie} !safirmobilswitcher=mobil
RewriteCond %{HTTP:Profile} !^[a-z0-9\"]+ [NC]
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/all/$1/index.html -f [or]
RewriteCond /var/www/wp03/wp-content/cache/all/$1/index.html -f
RewriteRule ^(.*) "/wp-content/cache/all/$1/index.html" [L]
</IfModule>
<FilesMatch "index\.(html|htm)$">
AddDefaultCharset UTF-8
<ifModule mod_headers.c>
FileETag None
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Mon, 29 Oct 1923 20:30:00 GMT"
</ifModule>
</FilesMatch>
# END WpFastestCache
# BEGIN GzipWpFastestCache
<IfModule mod_deflate.c>
AddType x-font/woff .woff
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/opentype font/ttf font/eot font/otf
</IfModule>
# END GzipWpFastestCache
# BEGIN LBCWpFastestCache
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|webp|js|css|swf|x-html|css|xml|js|woff|woff2|ttf|svg|eot)(\.gz)?$">
<IfModule mod_expires.c>
AddType application/font-woff2 .woff2
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/webp A2592000
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType image/svg+xml A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000
ExpiresByType application/javascript A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType application/font-woff2 A2592000
</IfModule>
<IfModule mod_headers.c>
Header set Expires "max-age=2592000, public"
Header unset ETag
Header set Connection keep-alive
FileETag None
</IfModule>
</FilesMatch>
# END LBCWpFastestCache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
<Files "xmlrpc.php">
order deny,allow
deny from all
allow from	192.168.12.0/24
allow from	192.168.11.0/24
allow from	1.66.96.0/21
allow from	1.66.104.0/23
allow from	1.72.0.0/21
allow from	1.72.8.0/23
allow from	1.72.10.0/24
allow from	1.75.0.0/21
allow from	1.75.8.0/22
allow from	1.75.12.0/23
allow from	1.75.14.0/24
allow from	1.75.16.0/20
allow from	1.75.152.0/21
allow from	1.75.196.0/22
allow from	1.75.208.0/21
allow from	1.75.224.0/19
allow from	1.78.0.0/19
allow from	1.78.32.0/21
allow from	1.78.40.0/22
allow from	1.78.64.0/19
allow from	1.78.96.0/22
allow from	1.79.6.0/23
allow from	1.79.8.0/21
allow from	1.79.16.0/21
allow from	1.79.24.0/22
allow from	1.79.28.0/23
allow from	1.79.30.0/24
allow from	1.79.32.0/21
allow from	1.79.66.0/23
allow from	1.79.68.0/22
allow from	1.79.72.0/21
allow from	1.79.80.0/20
allow from	1.79.96.0/21
allow from	1.79.176.0/21
allow from	49.96.0.0/18
allow from	49.96.216.0/21
allow from	49.96.224.0/21
allow from	49.96.242.0/23
allow from	49.96.244.0/23
allow from	49.97.1.0/24
allow from	49.97.2.0/23
allow from	49.97.4.0/24
allow from	49.97.16.0/22
allow from	49.97.31.0/24
allow from	49.97.32.0/23
allow from	49.97.34.0/24
allow from	49.97.39.0/24
allow from	49.97.40.0/23
allow from	49.97.42.0/24
allow from	49.97.47.0/24
allow from	49.97.48.0/23
allow from	49.97.50.0/24
allow from	49.97.55.0/24
allow from	49.97.56.0/21
allow from	49.97.64.0/20
allow from	49.97.88.0/22
allow from	49.97.92.0/22
allow from	49.97.96.0/19
allow from	49.98.7.0/24
allow from	49.98.8.0/21
allow from	49.98.16.0/23
allow from	49.98.32.0/19
allow from	49.98.64.0/18
allow from	49.98.128.0/17
allow from	49.104.0.0/18
allow from	49.104.64.0/20
allow from	49.104.80.0/21
allow from	49.106.200.0/21
allow from	49.106.208.0/20
allow from	49.106.224.0/22
allow from	49.106.228.0/23
allow from	110.163.6.0/23
allow from	110.163.8.0/22
allow from	110.163.12.0/23
allow from	110.163.216.0/21
allow from	110.163.224.0/22
allow from	183.74.0.0/21
allow from	183.74.8.0/23
allow from	183.74.192.0/20
</Files>

最大限キャッシュが効くように、このように設定してみました。

このプラグインの解説

Screenshot of www.wpfastestcache.com

無料で利用できるのは、デスクトップキャッシュと書いてあるのでPCでのアクセスだけはキャッシュされるようです。モバイルキャッシュはできないのですね。

注意事項として、Preload Settingsを利用する場合、サーバリソースを消費するため、あまり短い回間隔で複数ページ（ページ数を多く）を作成する設定にはしない方が良いです。さらに、キャッシュが削除されたら動作する設定になっています。新しい投稿や、更新が入った都度キャッシュファイルを削除する設定だと、短い時間に頻繁に投稿が入るサイトでサーバサイドの負荷を減らしたい場合、この設定は逆効果になってしまう可能性があります。

設定詳細はこちらのサイトを参考にいたしました。

【プラグイン】 キャッシュ制御 WP Fastest Cacheの設定と使い方
WordPressのキャッシュを管理・削除できるプラグイン・ WP Fastest Cacheの設定方法などをご紹介します。 キャッシュプラグインとは WordPressで記事を書いていると、ふとページの表示速度が遅いような…なんか読み込み
pc-pier.com

めでたく点数は、61点まで上がりました。

これで検索順位上がってくれればいいんですけど。どうでしょう。

タイトルとURLをコピーしました