趣味の木工DIY・くまねこ工房

趣味の木工DIY・くまねこ工房

くまねこ工房は、趣味のDIYを中心としたサイトです。まだまだアトリエと言うにはほど遠いと思いますが、作品の紹介だけではなく、同好の士に有益な情報もできるだけ発信していきたいと思っています。個人で運営する趣味のサイトですから更新も頻繁にできず内容が充実するまでには、時間がかかるとは思いますが、末永くお付き合いくださいますようお願い申し上げます。

WordPressの表示速度向上のために行ったこと

WordPressの最大の弱点は、表示スピードの問題だと思います。それが唯一と言ってよいかと思います。それでもなんとか2秒台の表示を目指して頑張ってみました。GTMETRIXでは、なんとか94点を確保することができたので、備忘録として残しておこうと思います。 まず。サーバー環境ですが、レンタルサーバーの中で、PHP7が使えること、FastCGI、Mod_speedも使えると言うことでXサーバーを選びました。他の選択肢として、WPXも考えましたが、何かと制約が多くてXサーバーの方が使いやすそうなのと、wordpress以外のアプリケーションもも使用することがあるかもしれない。そういう理由からXサーバーに決めた次第です。

サーバー設定でやること

php7を選択する。

WordPressはphp7で問題なく動作します。これだけで表示速度が速くなることが体感できます。wordpressを動かすなら、php7の使えるサーバーは必須ではないかと思います。Xサーバーでは、コントロールパネルで選択するだけだけです。php7を選択することで自動的にFastcgiも有効になります。これで、Fastcgiの環境もできます。

mod_pagespeed

これもONで問題ないと思います。キャッシュ系の機能なので、スタイルシートや初期の設定が済んでから、ONにした方がよいかもしれません。しかし、はじめにONにしたからといって特に不具合が出るというものでもありません

htaccessファイルに書き足す。

Xサーバーの場合は、コントロールパネルから、.htaccessファイルを編集することができます。一々、FTPソフトを使う必要が無いので、地味ですが、便利な機能だと思います。

Gzip圧縮の有効化

Apacheのdeflateというモジュールを使用して、htmlファイルはじめcss,fontなどを圧縮してブラウザに送る機能です。これを使わない手はありません。レンタルサーバーですから.htaccessファイルを利用してモジュールを有効にして、圧縮するMIMEtypeを指定します。私の場合はこのように記述しました。

<IfModule mod_deflate.c>
 SetOutputFilter DEFLATE
 # Mozilla4系などの古いブラウザで無効、しかしMSIEは除外
 BrowserMatch ^Mozilla/4\.0[678] no-gzip
 BrowserMatch ^Mozilla/4 gzip-only-text/html
 BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
 # gifやjpgなど圧縮済みのコンテンツは再圧縮しない
 SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
 SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
 # htmlやcssなどは圧縮
 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
 AddOutputFilterByType DEFLATE application/x-font-woff
 AddOutputFilterByType DEFLATE image/svg+xml
</IfModule>

上記を#END wordpressの下に書き足します。

ブラウザキャッシュの設定

以下の記述を.htaccessに書き足します。MIMEtypeが追加されていないと、Expiresが無視されるそうなので、念のためデフォルトで指定されていなさそうなものを追加しています。

#ブラウザキャッシュの設定
#MIMEタイプの追加
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg
<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
#フォントの追加
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
</ifModule>

プラグインでCSS、JS、HTMLの結合と圧縮

プラグイン「Autoptimize」

ファイルの圧縮、結合のプラグインです。「Head cleaner}が有名ですが、設定も難しいし、不具合がでたのでこちらに変えてみました。今のところ問題なく動作していると思います。設定は非常に簡単で、基本的にチェックボックスをオンにするだけでいいみたいです。 advancedsettingでGoogleフォントを使用しないというところと、JSのインライン化をOffにしました。

Wp Fastest Cache

キャッシュ系プアグインは、表示が崩れるなど注意が必要ですが、速度アップには魅力的なアイテムです。このプラグインは設定も簡単で今ところ不具合はでていません。ただ、有料版では、モバイル用のテーマもキャッシュする機能がついてくるのですが、それをオンにするとMicrosoft Edgeでは、パソコンでもモバイルテーマが表示されてしまいました。chromeやFirefoxでは、そういう現象は起きなかったのですが、今のところモバイルテーマのキャッシュはオフにして使っております。つまり、有料版は必要ありません。 設定は、非常に簡単で、チェックをするだけ。CSS,JS,HTMLの圧縮結合は、「Autoptimize」の方でやっていますのですべてオフです。このプラグインだけでできてしまうのですが「Autoptimize」のほうが、綺麗にはき出してくれるようなので、そうしました。キャッシュの期限はお好みでいいのですが、私は1年にしております。必要があればいつでもクリアできますし、新しい投稿があれば自動的にクリアしてくれるわけですから、特に期限を設定する必要も無いのでは無いかと思います。プリロードについては、カテゴリーページ以外はオンにしています。通常キャッシュは、ページがロードされたときにキャッシュが作られますが、この機能はその前にあらかじめキャッシュを作っておくというものなので初めて開くページも速くなると言うものです。この機能を特にオフにする必要は無いと思います。ただ、サーバーに負担を掛けることは間違いないので、プリロードを作っている間、極端に表示が遅くなると言うような現象が起きればオフにするべきだと思います。

日本語翻訳の圧縮

プラグイン「001 Prime Strategy Translate Accelerator」

WordPress本体hは英語でできているので、すべて日本語に翻訳して表記されているわけです。その翻訳をキャッシュしてくれるプラグインです。他にもいくつかあるのですが、あのkusanagiのプライムストラジー社製ということでこれにしました。 設定は非常に簡単。キャッシュをオンにするだけで大丈夫です。後はお好みでという感じです。

画像系プラグイン

画像のダウンロード遅延(Lazy load系)

最もポピュラーなのは「lazy load」だと思いますが、かえって表示が遅くなると言う現象があったので、「Image Lazy Load」というプラグインを使ってみました。うちのサイトでは問題なく機能しているようです。基本的に有効化するだけで使えます。ポジションの設定はデフォルトのままで使用しています。遅いと感じたら設定画面からピクセル単位で指定できるようです。

EWWW Image Optimizer

画像の非可逆圧縮を行ってくれるプラグイン。設定は多少複雑な面もありますが、ほとんど初期設定のままで大丈夫だと思います。アップロードの時に圧縮処理をしてくれますが、その後で再圧縮することも可能です。

アイキャッチ画像の縮小

アイキャッチ画像をどの様に利用するかは、人それぞれだろうと思うのですが、このサイトのテーマの場合は、記事のトップに表示するかしないかを選択できるの代わりに、トップページなどに表示するサムネイルの画像がwordpressの生成するサムネイルではなく中サイズや大サイズが使われてしまうようです。それで記事の先頭に表示するのはやめて、アイキャッチ画像ははじめから320PXサイズに縮小して最適化もしてから、アップロードしました。それで、サムネイルに関しては320PX以上のサイズは表示されません。 このような事でなんとかGTMETRIXでは90点以上確保できました。表示速度もなんとか2秒台を確保できたようです。gtmet_0620

コメントをどうぞ

*
*
* (公開されません)

Return Top