51
53

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Wordpress高速化に使ったプラグインとテクニック(2014年8月時点)

Last updated at Posted at 2014-08-11

ワードプレスにおいては下記プラグインの導入&テクニックで、高速化はだいたい網羅していると思われます。ただ初心者の方には難しいものもありますので、取り入れるかどうかは難易度を参考に、自分の理解度にあわせてご利用ください。

自分のサイトがどの程度最適化出来ているかについてはGoogle PageSpeed Insightでチェックできます。
https://developers.google.com/speed/pagespeed/insights/

#nginxのリバースプロキシ
難易度:★★★★★
これが何よりも強力に高速化されます。個人ブログを高速化するのであれば、nginxのリバースプロキシを使うだけで十分高速になると思いますし、商用利用で、アクセス数のあるサイトを運用するのであればもはや必須かと思います。
方法については、多くの記事が上がっているので、検索してみてください。

googleで「wordpress nginx」を検索

#Amazon S3 and CloudFront
難易度:★★★★
アップロードした画像をAmazon S3へ保管とCloudfrontから配信出来る様になります。Expireヘッダーを10年先にするといった設定もあり、高速化に役立ちます。AWSを使ってる人はぜひ。少し難しいので、AWSにあまり詳しくない人は使用しないほうがいいでしょう。
http://wordpress.org/plugins/amazon-s3-and-cloudfront/
このプラグインを使うには、もうひとつこちらのプラグインも必要です。
http://wordpress.org/plugins/amazon-web-services/

#Async JS and CSS
難易度:★★
「Google PageSpeed insight」で「レンダリングブロックjavascript/cssを排除する」といった警告がでるので、それをやっつけるためのプラグイン。
jsを非同期にしてくれて、cssをインラインに吐いてくれるように出来ます。
CSS loading methodの設定は、「 (default)Inserting all CSS styles inline into the document HEADER」を使っています。あとはデフォルトです。javascriptの非同期にすることで、動作がちゃんとしない場合がありますので、ご注意ください。
http://wordpress.org/extend/plugins/asyncJSandCSS/

#EWWW Image Optimizer
難易度:★★★
画像の最適化プラグインです。これも「Google PageSpeed insight」で画像の最適化について警告されるので入れておくとよいでしょう。google推奨のjpegtranやoptipngで最適化してくれるようです。設定はデフォルトでOK。場合によってはサーバー設定も必要。
http://wordpress.org/plugins/ewww-image-optimizer/

#Head Cleaner
難易度:★(いれるだけ!)
head部分の余計な部分をきれいにしてくれます。いれるだけ。
http://wppluginsj.sourceforge.jp/head-cleaner/

#Image Lazy Load (Unveil.js)
難易度:★(いれるだけ!)
Lazy loadは有名ですが、なぜこれが良いかというと、Mobileは使わないという設定ができます。スマホの場合、スクロールしている最中はJQueryが効かないのでLazy Loadすると微妙になりますので。
http://www.wpcube.co.uk/plugins/image-lazy-load

#Quick Cache
難易度:★★★
キャッシュはもっとも重要な高速化プラグインです。ただ、スマホとPCを切り分けてキャッシュするならばこのプラグインです。ただし旧版(無料)か新版Pro(有料)を使う必要があります。レスポンシブの方は新版で問題ないでしょう。
下記のサイトがとても詳しく旧版の使い方を教えてくれます。
http://www.hirok-k.com/blog/796.html
プラグインはこちら
http://www.primothemes.com/post/product/quick-cache-plugin-for-wordpress/

#WP-HTML-Compression
難易度:★(いれるだけ!)
htmlをminifyできるプラグインです。htmlの圧縮は「Google PageSpeed insight」でも指摘される内容ですので、入れておくと高得点に寄与できます。

#.htaccessの設定(圧縮とブラウザキャッシュ)
難易度:★★★
ワードプレスの.htaccessへ下記を追加します。どこかのサイトを参考にした情報であまり詳しく検討していないのでこの設定が最適化どうかはご自身で判断くださいね。

.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 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
</ifModule>
FileETag none

#とにかくリクエスト数を減らす様にする
高速化のもっとも基本的な考えかたですが、httpリクエストを出来るだけ減らす事は高速化に役立ちます。アイコンやボタン画像などをCSSやdata URI schemeに変更したり、リクエストの数を減らす努力をしましょう。自分のサイトのリクエスト数を調べるにはChrome Developer ToolsのNetworkタブを見るとよいでしょう。

以上、参考になれば幸いです。ほかにもテクニックがあればコメントお願いします。

51
53
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
51
53

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?