PageSpeed Ninja：Google Pagespeed Insights での問題点をワンクリックで修正

2017年11月14日2019年11月29日

Google Pagespeed Insights で指摘された問題点を簡単に修正したい。
そのような時に便利な WordPress 用プラグインがあります。
それは「PageSpeed Ninja」です。
そのインストール手順から日本語化・使い方と設定などを解説していきます。

10銘柄52袋入り【10gコーヒーお試しセット】
1冊ですべて身につくWordPress入門講座

PageSpeed Ninja

PageSpeed Ninja は、
Google Pagespeed Insights で指摘された問題点を 1 クリックで簡単に修正できます。
全ての項目をまとめて修正するのではなくて修正したい項目だけを改善できます。
1 クリックで簡単に修正できますが、詳しい方向けに高度な設定を行うこともできます。

以下の項目を修正することができます。

• GZIP 圧縮を有効
• CSS と JavaScript のレンダリングブロック
• CSS のクリティカルレンダリングパスに関する箇所を改善
• HTML、JavaScript、および CSS ファイルを圧縮
• Javascript と CSSを結合してインライン化
• Javascript と CSSの読み込み遅延化
• スタイル/スクリプトの順序を最適化
• すべての画像を圧縮してサイズを最適化
• 低品質画像で置き換えることで添付画像の読み込み遅延化
• ブラウザキャッシングとサーバーサイドキャッシングの活用

PageSpeed Ninja プラグインをアンインストールすると、
サイトの全ての設定が PageSpeed Ninja インストール前の状態に自動的に戻ります。

最適化された全てのイメージを復元し、
最適化された JS ファイルと CSS ファイルを含むディレクトリを削除します。
また、.htaccess ファイルの全ての変更が元に戻ります。
他のプラグインが上記のファイルを動的に編集・削除など行っていたり、
他のプラグインと競合している場合は、100% 復元されるない可能性ががあります。

記事を作成もしくは更新時点でのバージョン：v 0.9.21
マルチサイトでの利用:可

インストール手順

下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化するか
PageSpeed Ninja – WordPress.org

もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面から入手できます。

ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「PageSpeed Ninja」と入力します。

検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。

プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。

WordPressプラグインのインストール手順を解説 – WordPress活用術

日本語化

PageSpeed Ninja を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。

WordPress と関連プロジェクト（テーマ・プラグイン）用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。

※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。

日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。

WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術

専用テーブル

下記のテーブルを PageSpeed Ninja 専用のテーブルとして作成し利用します。
テーブル作成時に $wpdb->prefix も使用しているので、マルチサイトにも対応。

class-pagespeedninja-activator.php から CREATE TABLE 文を抜粋（記事用に一部修正）。

CREATE TABLE IF NOT EXISTS wp_psninja_urls (
`url` varchar(4096) NOT NULL,
`hash` binary(20) NOT NULL,
`time` datetime NOT NULL,
`type` tinyint NOT NULL,
PRIMARY KEY(`hash`)
);

有効化すると

プラグインを有効化すると、下記のような画面が表示されます。

必要に応じてチェックを外して「Save」ボタンをクリックします。

専用メニュー

ダッシュボードの「設定」メニューの中に追加されています。

使い方

設定画面に移動して必要な設定をします。

一般設定

Desktop・Mobile

• Avoid landing page redirects
  リンク先ページのリダイレクトを無効にする。
• Enable compression
  GZIP 圧縮を有効にする。
• Leverage browser caching
  ブラウザーのキャッシュを利用する。
• Reduce server response time
  サーバーの応答時間を短縮する。
• Minify CSS
  CSS を圧縮する。
• Minify HTML
  HTML を圧縮する。
• Minify JavaScript
  JavaScript を圧縮する。
• Eliminate render-blocking JavaScript and CSS in above-the-fold content
  レンダリングをブロックする JavaScript と CSS を除去する。
• Optimize images
  画像を最適化する。
• Prioritize visible content
  可視コンテンツの優先順位付け。

Usability

• Avoid plugins
  Flash/ ActiveX/ Silverlight/ などの埋め込みプラグインを除去する。
• Configure the viewport
  ビューポートを設定する。
• Size content to viewport
  ビューポートへのコンテンツサイズ。
• Size tap targets appropriately
  適切にタップターゲットのサイズを決める。
• Use legible font sizes
  読みやすいフォントサイズを使用する。

詳細設定

各項目の設定値を選択したオプションに応じたものに自動的に設定できます。

一般

• HTML Parser
  使用する HTML パーサーを選択します。
• Distribute method
  分散メソッドを選択します。
• Static files directory
  JavaScript ファイルと CSS ファイルを結合したファイルの保存先ディレクトリを指定します。
• HTTP/2 Server Push
  。
• Support badge
  。
• Remote critical CSS generation
  。
• Send anonymous statistics
  。

トラブルシューティング

• Error logging
  。
• Cache
  。
• AMDD Datebase
  。

• Manage Javascript URLs
  除外する JavaScript ファイルを選択します。
• Manage CSS URLs
  除外する CSS ファイルを選択します。

Avoid landing page redirects

設定できる項目なし

Enable compression

• Gzip compression
  GZIP 圧縮を有効化。
• Gzip compression in .htaccess
  .htaccess で GZIP 圧縮を有効化。
• Reorder attributes
  属性の並び替え。

Leverage browser caching

• Caching in .htaccess
  .htaccess でキャッシュ設定を行います。
• Load external files
  。

Reduce server response time

• Caching
  .htaccess でキャッシュ設定を行います。
• Caching time-to-live
  キャッシュ保存期間を設定します。
• DNS Prefetch
  。

Minify CSS

• Merge CSS files
  。
• Exclude files list
  。
• Merge embedded styles
  。
• Minify CSS Method
  。
• Minify style attributes
  。

• Inline limit
  。
• Cross-files optimization
  。
• Load external URLs
  。
• Keep extra link tag attributes
  。
• Keep extra style tag attributes
  。

Minify HTML

• Merge whitespaces
  。
• Remove comments
  。
• Minify URLs
  。
• Remove default attributes
  。
• Remove IE conditionals
  。

Minify JavaScript

• Merge script files
  。
• Exclude files list
  。
• Merge embedded scripts
  。
• Auto async
  。
• Minify Javascript Method
  。
• Minify event attributes
  。

• Inline limit
  。
• Cross-files optimization
  。
• Load external URLs
  。
• Wrap to try/catch
  。
• Keep extra script tag attributes
  。
• Optimize integrations (Facebook. Google Plus, etc.)
  。
• Optimize Emoji loading
  。

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

• Above-the-fold CSS
  。
• Above-the-fold CSS cookie
  。
• Local above-the-fold generation
  。
• Above-the-fold CSS styles
  。
• Auto update Above-the-fold CSS
  。
• Google Fonts loading
  。
• Non-blocking Javascript
  。

Optimize images

• Optimization
  。
• Images handler
  。
• JPEG quality
  。
• Scale large images
  。
• Template width (reference)
  。
• Wrap wide images
  。
• Wide image wrapper class
  。

Prioritize visible content

• Lazy Load Images
  。
• Lazy Load Iframes
  。
• Low-quality image placeholders
  。
• Vertical lazy loading threshold
  。
• Skip first images
  。
• Noscript position
  。

Avoid plugins

• Remove embedded plugins
  。

Configure the viewport

• Viewport width
  。

Size content to viewport

設定できる項目なし

Size tap targets appropriately

設定できる項目なし

Use legible font sizes

設定できる項目なし

URL

PageSpeed Ninja – WordPress.org