2015年8月28日

WordPress高速化。PageSpeedがまさかの60点以下、要改善。Bloggerはやっぱりスゴイ。

スポンサードリンク

 WordPressはサクサクページが開くし、
さぞ軽量化しているのだろうと思ったら、意外にもページ速度は遅かった。

見た目とは違い、ロボットにはそう判断されているようですね。

キャッシュのプラグインは誤作動が多いので、使いません。
キャッシュさせる指示を.htaccessに追加しました。

Bloggerは楽勝で軽量化サイトになってた


 もう一つ運営している美容ブログをBloggerからWordPressに移行して、
そこそこサイトが完成しました。

一度GoogleウェブマスターツールのGoogleDeveloper、

「PageSpeed Insights」

を使ってページ速度をチェックしました。


 これがまさかの、50点台。
低いですね。

この50点を、今回70点弱まで改善させることに成功しました。

まだまだ低いですが、
今後もメンテナンスしていって、より高い点を目指します。



 ちなみに今ご覧の当ブログはBloggerです。

PageSpeed Insightsはモバイル・PCともに80点位。
ユーザー エクスペリエンスは99~100点という、
なんとも優秀な結果に。


 もちろん、色々改善したり修正したりしました。

ただ、同じ事をWordPressでもしています。
しかしこれだけの差が出るのです。

やっぱりBloggerはGoogleのブログなだけあり、
とても優秀。

WordPressとは別に
サブブログを作りたい方は是非Bloggerをどうぞ。

当ブログに色々カスタマイズ情報もありますよってに探して下さい。

WordPressを高速化する為に、キャッシュの設定


【重要事項】


 これから.htaccess(ドットエイチティーアクセス)を触ります。
十分に注意して下さい。


 初心者は失敗するとサイトが真っ白になりますのでご注意を。

絶対に全てのファイル、データ、もちろん元々ある.htaccessも
バックアップを取っておきましょう。

.htaccessは慎重にカスタムします。
下手をすればサイトにアクセス不可になります。(自分さえも)


 仮にサイトが壊れたら、素人が元に戻すのは困難です。
私も気持ち的には何とかしてあげたいけど無理です。

わからないので、
プロに聞いて下さいとしか言えません。


 完全な自己責任ですが、
うまく使うとキャッシュプラグインより安定してるし軽いので
おすすめはおすすめですね。


 ここまで怖いことを言われると、やる気がなくなりましたか?
そんな事はお構いなしに、では始めます。

.htaccessを探す、無ければ作る


 実は.htaccessは、お使いのテーマによって複数ある事があります。
違うディレクトリにいくつか存在します。

また、レンタルサーバーによっては元々.htaccessファイルがあるとか。
つまり、とにかく複数あります。(無い事もある)


 今回、.htaccessで何をするかと言うと、
サイトにアクセスして来た人が、
キャッシュをもとにサクサクサイトを見られるようにするわけですよね。

つまり、サイトの一番上、
一番最初に.htaccessを設置して機能させる必要があります。

ルートの位置に.htaccessを置くのです。

.htaccessはテキストエディタでOK。
ファイル名は.htaccessです。


 レンタルサーバーによりますが、
保存する位置はこんな感じだと思います。

/yourdomain.com/ wpとか、blogとか /public_html/.htaccess ←この中に記入する


 ルートが分からない方は、途中で間違いそうなので、
今はカスタムするのをおすすめしません。

慣れてからでも全然大丈夫です。

.htaccessはリダイレクトの時に活用される



 301リダイレクトを.htaccessでされている方も多いでしょう。
こちらもプラグインより、.htaccessの方がおすすめです。

なぜならメンテナンスが楽だから。

プラグインは更新の度に、サイトに影響が出ないか、
データは傷つかないか不安です。

でも、.htaccessはサイトが乗っ取られない限りは
大きな影響を受けません。

多分。


 何らかの更新で.htaccessが書き換わる可能性も
ゼロではないので、
常に最新バックアップは取っておきましょう。

テキストエディタにコピペしておくだけでもOKです。


 で、その301リダイレクトを.htaccessに入力した時と同じ.htaccessです。
今回キャッシュのコードを同じファイルに入力します。

.htaccessを普段から活用されている方にはどうって事ない話ですね。


 301リダイレクトのコードより上に、
キャシュさせるコードを記入して下さい。

データは基本的に上から読み込まれていくので、
どちらが先に読み込まれるべきかというと、
キャッシュだろうとの判断が理由です。(私の見解ですが)


 もちろん、元々書いてある301リダイレクトや、
WordPress固有のコード、レンタルサーバー固有のコードは

絶対に消してはいけません。



 超重要なので大文字にしました。
ますます、.htaccessが怖くなってきましたね。

でも大丈夫ですよ、初心者の私でも何とかなりました。


キャッシュさせてブログを高速にする.htaccessコード


 要は、元々あるコードを残したまま、
今回キャッシュのコードを追加すればいいのです。

(このままコピーしないで下さい。UTF-8Nに変換して下さい。)


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)$
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress



参考にしたのはこちらのサイトです。

WordPressサイト用の.htaccess例


 かなり詳しく説明も載せてくれています。
本当に助かりました。

この通りにすればOK。

ただし、私の環境ではちょっと改変したので、それは以下で記述します。


 キャッシュさせる時間等も変えられるみたいなのですが、
難しくてまだ訳がわからないので、今のところこのまま
使わせてもらっています。

.htaccessはまだ勉強不足なので、
今後はもっと学んでいきたいですね。

Apacheを有効活用させているが注意点もある


 Bloggerや他無料ブログサービスから移行した方は注意。

上記コードのままではダメです。
Blogger等では、URL末尾に.htmlがつきますよね。
当ブログも今、ついています。


 上記コードでは、.htmlをアクセス除外させる
(WordPressを動かさずApacheで404にアクセスさせる)
ようになっています。

存在しないフォルダを探してページ読み込みが遅くならないためと、
余計な負担をサーバーにかけないためです。


 .htmlのURLが旧サイトからリダイレクトで存在している、
または.htmlのURLをWordPressでも使っている場合は、

.htmlにアクセス出来るようにコードを改変させます。


 WordPressでも.htmlを使っているというのは、
パーマリンクをWordPressで引き継いでいる場合ですね。

引き継いでいなくても、
旧ブログから301リダイレクトさせている方もいると思います。

そのような場合は以下をご覧ください。


 さらに、サイトマップをGoogleに送信している方は、
.xml形式で送信していると思います。

よって、.xmlにもアクセス出来るようにしておく必要があります。


旧URLも自分のサーバーにアクセス可能にしておく


 先ほど上記に載せたコードから.html と.xml を削除して下さい。
削除するのは以下のコード内。

完成したのがこちらのコード。

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !\.(xsl|js|css|jpe?g|png|gif|ico)$
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress


 これだけです。
が、コードを間違わないように気を付けて下さい。


最重要!元々サーバーに存在していたコードは消さない



 私の使っているレンタルサーバーでは、
元々サーバー固有のコードと
WordPressインストールで追加されたコードの入った.htaccessがありました。

これは絶対に消してはいけません。


suPHP_ConfigPath /home/サーバーID名/yourdomain.com/サーバー_php/
~なんたらかんたら
FCGIWrapper "/home/サーバーID名/yourdomain.com/サーバー_php/~なんたらかんたら /home/サーバーID名/yourdomain.com/サーバー_php/~なんたらかんたら
FCGIWrapper "/home/サーバーID名/yourdomain.com/サーバー_php/~なんたらかんたら /home/サーバーID名/yourdomain.com/サーバー_php/~なんたらかんたら

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress



 なんたらかんたらは、サーバーの説明で、重要なコード。
これは絶対に消さないでください。

そして.htaccessの一番上に残しておきます。



 今回、.htaccessを使ってキャッシュさせるコードを追加しました。

# BEGIN WordPress
<IfModule mod_rewrite.c>から始まり、

Rewrite ~  ここに追加します

</IfModule>
# END WordPressで終わるコードです。


 元々似たようなコードがサーバー.htaccessにあったので、
間に一文だけ追加しました。

RewriteCond %{REQUEST_FILENAME} !\.(xsl|js|css|jpe?g|png|gif|ico)$


ですね。
他は元々あったコードをそのまま残しています。

というか、
RewriteCond %{REQUEST_FILENAME} !\.(xsl|js|css|jpe?g|png|gif|ico)$
以外は同じですね。



 もし失敗しそうであれば止めておきましょう。
可能ならローカル環境で試して下さい。

無理なら、
失敗してもすぐ戻せるように全てのバックアップを取っておきます。
.htaccess以外のファイルも全てです。

そしてアクセスの少ない夜中とかに試します。


 これが意外にも一発で成功すると、
あれ?思ったより簡単だったじゃん、って思う訳です。



 こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。


 当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。

必ずデータは最新のバックアップを取っておいて下さい。


 WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。

当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。

詳細はWordPressヘルプを参照下さい。


 ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
(わからんから)


スポンサードリンク