WordPressを高速化するためのプラグイン
- : WordPress
- : Performance / Plugin
- :
Webサイトを作る場合、迷わずインストールしているWordPress。それとセットでプラグインも殆どの場合利用するモノがいくつか有る。私の場合の代表例はContact form 7やAdvanced Custom Fieldsなどなど。今回はテーマのCSSやJSファイルは何らかのツールで圧縮済みを前提に、当サイトで高速化する為に導入(2016年7月時点)しているオススメのWordPressプラグインをいくつか紹介。
プラグインの選定には、安定(継続的なメンテナンス)と人気(アクティブインストール数)がある程度有ることを条件にしている。その結果これから紹介するプラグインは、タイトルの通り有名所が多くなってしまっている。ただ、有名なプラグインだけあり、これらを導入後、当サイトの場合PageSpeed Insightsでの点数が20〜30点アップした。が、2016年7月時点でモバイル73点、desktop78点とまだまだ改善の余地有り。
WP Fastest Cache
キャッシュ+パフォーマンス管理のプラグイン。
上の表に有るように無料でも基本的な機能は使う事が出来る。他にキャッシュ系プラグインで有名なのは、Automattic製のWP Super Cache
があるが、それはキャッシュを有効にする事に特化していて、以前はそれを導入していたが、以下の理由で最近は WP Fastest Cacheを導入中。
- ブラウザキャッシュを有効にしてくれる。
- Gzipを有効にしてくれる。
- 設定が日本語化されている。
有料版があり、$39支払うことで更にパフォーマンス改善に繋がるオプションを利用することが出来る。
EWWW Image Optimizer
画像圧縮のプラグイン。
テーマで利用する画像はテーマ開発時にGulp-imageなど様々なツールを使って圧縮する事は可能だが、Uploadsフォルダに保存される画像(ダッシュボードのメディアで管理している画像)無圧縮の状態で保存されていき、それらの画像がPageSpeed Insights等のサイトパフォーマンスチェックで引っかかる。
当プラグインはUploadフォルダの画像やテーマフォルダ内の画像を探して圧縮してくれる。ただ画像が荒れてしまう場合があるので、実行する前にUploadフォルダの画像はバックアップしたほうが良さそう。$10支払うことで、png画像などを更に最適化することが出来る。
設定項目は色々あるが、基本的にはデフォルトのまま使うことが出来る。ダッシュボードの「メディア」メニューに「Buik Optimaize」と「Unoptimaized Images」が増えるので、「Buik Optimaize」から過去にアップロードした画像も圧縮してくれる。
Photon by Jetpack by WordPress.com
画像をキャッシュしてCDNから配信してくれるプラグイン。
言わずと知れた「Jetpack」。機能が沢山あり全て使うことは無いのですが、目玉機能の一つ「Photon」には、パフォーマンスの改善のためにお世話になりっぱなし。導入するには「Jetpack」に登録が必要。
Async JavaScript
script
タグにasync
または、defer
属性を追加してくれるプラグイン。
外部JSファイルを普通にヘッダーで読み込むと、PageSpeed Insightsでは、このように怒られる。
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
JavaScriptの場合、</body>
の上で外部JSファイルを読みこめば解決する。ただWordPressの場合、header
タグ内にプラグインが使っている外部JSを読み込む物があると前述の様に怒られる。header内で読み込む場合には、script
タグにdefer
属性を追加することで解決するが、SyntaxHighlighter Evolved
やページの途中にsccript
タグがあるとエラーになるので、運用中に導入するには十分な確認が必要。
当プラグインは設定画面の「Script Exclusion」とういう項目で、属性を追加しないファイルを指定できるので、SyntaxHighlighter Evolved
の場合には、「shCore.js」を「Exclusions」に追加すればエラーは無くなるはず。
Autoptimize
JSとCSSとhtmlの最適化に特化したプラグイン。
テーマやプラグインが読み込むCSSとJSを圧縮したり、1ファイルに纏めてくれるプラグイン。設定画面のExcludeの項目でファイルを指定することが出来るので個別にファイルを分ける事も可能。
Theme Check
その名の通り、テーマをテストしてくれるプラグイン。
高速化と直接の関係はないが、WordPressのアップデートにより非推奨となった関数やテーマ内のエラーなども教えてくれるので、自作のテーマ開発時には導入するようにしている。
Disable Emojis
emojiをオフにするプラグイン。デフォルトではheader
タグ内にemojiを使うためのスクリプトが挿入されるので、使わない場合はこのプラグインでオフにすることで挿入されなくなる。