WordPress(ワードプレス)の高速化プラグイン Page SpeedNinja の細かな設定と、不具合を回避!

WordPress

プラグインへ

  • 一般
  • トラブルシューティング
  • Avoid landing page redirects
  • Enable compression
  • Leverage browser caching
  • Reduce server response time
  • Minify CSS
  • Minify HTML
  • Minify JavaScript
  • Eliminate render-blocking JavaScript and CSS in above-the-fold content
  • Optimize images
  • Prioritize visible content
  • Avoid plugins
  • Configure the viewport
  • Size content to viewport
  • Size tap targets appropriately
  • Use legible font sizes

設定がありすぎますよね。。。しかも一つ一つの設定項目が多すぎのため、わからないことが。。。

1つ1つ解説するよ!

 

一般

  • HTMLの圧縮方法を変更できるよ!
  • PHPやApacheのでの圧縮方式を選択できる
  • Remote critical CSS generation (基本的にOFF設定でOK)
  • Send anonymous statistics (無名ファイルを一時的に保有し、高速化する) ON!!

 

※Apacheの場合は上記の設定を、ApacheでなければPHPのみの設定に

 

トラブルシューティング

  • キャッシュファイルの削除
  • データベースのごみを削除

正直これぐらいの機能しかありません。。。

 

Avoid landing page redirects これは基本的にONでOK!

 

Enable compression

  • Gzipの設定が可能
  • Apacheの場合は .htaccess を自動で編集してくれる機能が

基本的にすべてをONに

 

Leverage browser caching

  • ブラウザキャッシュの設定を変更する機能が。
  • Apacheの場合は .htaccess を自動で編集してくれる機能が
  • Image(写真)をキャッシュしてくれる
  • script(CSS,JavaScript)をキャッシュしてくれる

これも基本的にすべてONでOKです

 

Reduce server response time

  • キャッシュをしてくれます
  • DNS プリフェッチで読み込み速度を高速化してくれます

全てONでOKです

 

※ここから一番時間がかかる設定です

Minify CSS

  • Merge CSS files : ファイルを1つにまとめようとします (ON)
  • Merge embedded styles : <head>で読み込もうとします (Disableに設定しましょう)
  • Minify CSS Method : RESS + CSSTidyに設定しましょう
  • Minify style attributes : 容量を小さくしようとします。
  • Inline limit : 小さいファイルを埋め込もうとする
  • Cross-files optimization : クロスファイルを高速化します
  • Keep extra link tag attributes : とりあえずONでOKです
  • Keep extra style tag attributes : とりあえずONでOKです

上記の記載を 全てONに

 

Merge embedded stylesここをHeadにしてしまうと、広告を読み込まなかったりなど不具合が発生してしまうので

Disableに設定しましょう!

 

Minify HTML

この欄のものは全てONにしてください!

IEへの対応は無駄な負荷になるので IE への対応を削除しましょう。

 

Minify JavaScript

  • Merge script files : Fileを1つにまとめようとします
  • Merge embedded scripts : Disableに設定をしてください
  • Auto async : これはファイルを非同期化します
  • Skip initialization scripts : Skip Shortをします
  • Minify Javascript Method : JS Minに設定しましょう(圧縮方法)
  • Minify event attributes : イベントごとに圧縮します
  • Cross-files optimization : クロスファイルの最適化をします
  • Wrap to try/catch : とりあえず ON
  • Keep extra script tag attributes : とりあえず ON
  • Optimize integrations (Facebook. Google Plus, etc.) : SNS系の拡散系のボタンを設置しているサイトはONにすることで高速化されます
  • Optimize Emoji loading : 絵文字はMerge with other scriptsで高速化された絵文字を、Don’t Loadは読み込まないで高速化されるよ!

上記は全てONに

 

Eliminate render-blocking JavaScript and CSS in above-the-fold content

 

Non-blocking Javascript

✓ このNon-blocking Javascriptを有効にすることで、Google insightsでブロッキングのあるJavaScriptなどの項目をカットすることが可能です!

 

Non-blocking Javascript 以外はOFFに!

 

Prioritize visible content

  • Lazy Loadで画像を遅延して読み込み高速化できます

 

Lazy Load Images
Lazy Load Iframes
の2つのみ ONにしてください

後他はお好みで!

細かな調整はやはりテーマごとに変わってしまいますが、おおよその最適化はできるはずです。

不具合があれはTwitterか、ここのコメント爛にてお願いします!

コメント