こんにちは、JINユーザのつるです。
本記事では、WordPressテーマ「JIN」を使用されている方向けに、僕がPSIのスコアを上げるために行っている全ての施策をお伝えします。
まず最初に、PageSpeed Insightsでご自身のサイトのスコアを診断してみてください。スマホとPC、それぞれのスコアを診断できます。
・・・さて、どうでしょうか。
目安として「モバイルスコアが50以下」だった方は、この記事を参考にして、スコアの向上に努めてもいいかもしれません。
ただ、スコアを上げるためのアレコレに時間を使いすぎないでくださいね。
PSIのスコアを上げるより、記事を書く方が100倍重要です（自戒）
一応、この記事の信頼性を示しておきます。
当サイト「ツルブログ」のスコアは下記の通りです。
左がモバイル、右がPCのスコア。2019/6/25 2:10時点。モバイル91点、PC100点という結果です。
さて、本文に入る前に留意事項。
- PSIのスコアは速度ではなく、あくまで速度の改善指標です。スコアと実際の速度は必ずしも比例しません。
- 本記事の施策を全て実践しても、上記と同じスコアが出る保証はありません。それぞれの環境に差異があるため。
- 全てのカスタマイズは自己責任です。いかなる不具合についても、苦情などは一切受け付けかねます。
また、この記事に書いている内容は、あくまで「僕のサイトでの一例にすぎない」という点にご留意ください。
それでは行きましょう。
PSIスコアアップの事前準備
前提として、当サイト「ツルブログ」の基本スペックは下記の通りです。
| スペック表（2019/06/22時点） | |
| レンタルサーバ | エックスサーバー（PHP7.2.17） ※Xアクセラレータ Ver.2適用済み |
| WordPress バージョン |
5.2.2 |
| JINバージョン | 2.060 |
全て、2019/06/22時点での最新バージョンです。
事前準備：各ツールのバージョン最新化
まず事前準備として、下記の最新化を実施しましょう。
- エックスサーバーのPHPを推奨バージョンにする（6/22時点では「7.2.17」）
- XアクセラレータVer.2を適用する
- WordPressのバージョンを「5.2.2」にする
- JINのバージョンを「2.060」にする
最新化の方法ですが、③WordPressと④JINについては、WordPressのダッシュボードからバージョンアップできます。
①と②がよくわからない方は、下記の記事を参考にしてください。
- PHPの最新化・・・エックスサーバーのPHPを最新の推奨バージョンに変更する方法（外部サイト）
- Xアクセラレータ・・・Xアクセラレータ Ver.2が運用開始！ XサーバーのWPが高速になった！？（外部サイト）
これで事前準備は完了です！
PSIスコアアップ対策の全体図
これから説明する対策の全体図は、下記の通り。
| 対策 | 重要度 |
| １．画像最適化 | |
| ２．各種プラグイン | |
| ３．レンダリングを妨げるリソース | |
| ４．データベース最適化 |
最低でも、１．画像の最適化と２．各種プラグインの説明はご一読ください。３と４は余裕があれば。
さて、まずは画像に関する解説です。
対策① 画像最適化の考え方
画像は、サイトが重くなる主要因の一つです。
そのため、「画像をいかに軽量化するか？」は非常に重要なポイント。
そこで、画像に関して僕が気を付けているポイントは、下記の通りです。
- 画像はアップロード前に縮小・圧縮する
- アイキャッチの画像は「横760px：縦428px」にする
- 画像最適化プラグインを使用する
- 画像読み込み遅延のプラグインを使用する
3つめ・4つめに関してはプラグインの項で説明するので、ここでは1つめと2つめについて解説します。
画像はアップロード前に縮小・圧縮する
画像は、必ずアップロード前に縮小・圧縮してください。
「画像最適化プラグインを使っているから」といって、スマホで撮った写真をそのままWordPressに放り込んでいませんか？
それではダメ。理由は下記の記事で詳しく解説しています。
https://tsuru-blog.com/image-optimisation
もう少し細かい話は次の項で。
アイキャッチの画像は「横760px：縦428px」にする
JINのアイキャッチは、横760px：縦428pxで作成しましょう。
厳密に言えば、横760px：縦428pxが16:9にあたるので、これくらいの画像サイズで作成するとアイキャッチが綺麗にはまります。アイキャッチ画像の大きさはどれくらいが最適？（JINマニュアル公式サイト）
僕は、アイキャッチ及び見出し（h2下）に使う画像は、あらかじめ横760px：縦428pxにして、さらに圧縮をかけてからWordPressにアップロードしています。
具体的には、下記の通り。
また、記事内に差し込む画像も、横760px以内に縮小しています。
例えば、
- スマホのスクリーンショットは横400px
- PCのスクリーンショットは横600px
といった感じ。
・・・ここまで読んで、「いやいや、メンドくさすぎるだろ」と思われたのではないでしょうか。
でも、画像に関してはこのくらい丹念にケアすべきです。それほどスコアに影響するということなので。
スマホから画像投稿する場合も、縮小だけはする
スマホでブログを書き、スマホから画像をアップロードされる方も多いと思います。
その場合でも、せめて画像の縮小だけはキッチリしてからアップロードしましょう。
さて、次はプラグインに関する解説です。
対策② プラグインのカスタマイズ
僕がインストールしているプラグインの一覧を、下記に示します。
全部で17個です。
| プラグイン名 | 説明 |
| a3 Lazy Load | 画像表示遅延 |
| Ad Inserter | 広告挿入 |
| AddQuicktag | よく使うタグの呼び出し |
| Akismet Anti-Spam | コメント欄のスパム防止 |
| Autoptimize | HTML,CSS,JavaScript圧縮 |
| BackWPup | バックアップ作成 |
| Classic Editor | テキストエディタ使用のため |
| Contact Form 7 | お問合せフォーム |
| Easy Table of Contents | 目次の自動作成 |
| Edit Author Slug | ユーザ名流出防止 |
| EWWW Image Optimizer | 画像最適化 |
| Google XML Sitemaps | サイトマップ送信 |
| Jetpack by WordPress.com | 統計データ取得 |
| Rinker | 商品リンク作成 |
| WP Multibyte Patch | マルチバイト文字対応用 |
| WP Super Cache | キャッシュ利用 |
| WP-Optimize |
DB最適化・リビジョン削除 |
赤字のプラグインが、スコアに直接関わっているものです。後で各プラグインの設定内容を記載します。
黒字のものはスコアには関係ないはずですが、間接的にプラグイン干渉している可能性もあるので、一応載せました。
JINに導入するプラグインについては、JINの公式サイトも合わせて参考にしてみてください。
【公式】WordPressテーマ「JIN」に入れておきたいプラグイン（外部サイト）
さて改めて、スコアに直結するプラグインだけ抜粋します。
- a3 Lazy Load
- Autoptimize
- EWWW Image Optimizer
- WP Super Cache
色々と試行錯誤した結果、僕はこの組み合わせで最高スコアとなりました。どれか1つ変えても欠けてもダメ。
※注意※ プラグインは、カスタマイズするたびに表示の確認！
このあと各プラグインの設定内容を説明しますが、その前にひとつ。
プラグインは、インストールしたり設定を変えるたびに、必ずページに問題がないかを確認してください。
具体的には、
- 表示がくずれていないか
- 画像やアイコンが表示されているか
を、PCとスマホそれぞれでチェックしてください。
それでは行きましょう。
a3 Lazy Loadの設定
a3 Lazy Loadは、画像読み込み遅延用のプラグインです。
スマホでスクロールすると、一瞬「クルクル」ってなってから画像が出るサイト、よくありますよね。
ファーストビューで画像を全て読み込まず、表示されてから初めて読み込むので速くなる、というわけです。
さて設定。
基本的にデフォルト設定で良いですが、一か所だけ変更してください（下記の赤字箇所）。
| a3 Lazy Loadの設定 | |
| Plugin Framework Global Settings | 全てOFF |
| Lazy Load Activation | ON |
| Lazy Load Images | 全てON |
| Lazy Load Videos and iframes | 全てON |
| Exclude by URI’s and Page Types | 全てOFF |
| Script Load Optimization | FOOTER |
| WordPress Mobile Template Plugins | 全てON |
| Effect & Style | SPINNER |
| Image Load Threshold | 400 |
一番最後のImage Load Thresholdだけ、「400」と入力します。
この値は、要するに「画像がどれだけゆとりを持って読み込まれるか」の設定です。
画像読み込み遅延プラグインは、他に
- Lazy Load
- BJ Lazy Load
とかがあります。
僕の場合、この2つだとなぜか吹き出しの画像が表示されなくなってしまいました・・・
なので、不具合が出ない「a3 Lazy Load」を使用しています（JIN公式は「BJ Lazy Load」を推奨）。
Autoptimizeの設定
Autoptimizeは、HTMLなどのソースコードを最適化し、ページ読み込みを速くしてくれるプラグインです。
難しい話になるので、仕組みは気にしないでください。
Autoptimizeの設定画面を開き、「JS,CSS & HTML」タブを選択。
以下の画面の通りにチェックしていきましょう。
| JavaScript オプション | |
| JavaScriptコードの最適化 | チェック |
| Aggregate JS-files? | チェック |
| インラインのJSを連結 | チェックしない |
| <head>内へJavaScriptを強制 | チェックしない |
| Autoptimizeからスクリプトを除外 | seal.js, js/jquery/jquery.js |
| try-catchの折り返しを追加 | チェックしない |
| CSS オプション | |
| CSSコードを最適化 | チェック |
| Aggregate CSS-files? | チェック |
| インラインのCSSを連結 | チェック |
| データを生成：画像をURI化 | チェックしない |
| CSSのインライン化と遅延 | チェックしない |
| すべてのCSSをインライン化 | チェック |
| AutoptimizeからCSSを除外 | wp-content/cache/, wp-content/uploads/, admin-bar.min.css, dashicons.min.css |
| HTML オプション | |
| HTML コードを最適化 | チェック |
| HTML コメントを残す | チェックしない |
| CDN オプション | |
| CDNのベースURL | 空欄 |
| その他オプション | |
| 3つともチェック |
これで「JS,CSS & HTML」タブの設定はOK。
次に「追加」タブを選択します。
一番上の「Google Fonts」で、「webfont.js で非同期にフォントを結合して読み込む。」を選択。
これで、Autoptimizeの設定は完了！
EWWW Image Optimizerの設定
EWWW Image Optimizerは、画像最適化のプラグイン。
自動で画像圧縮などをしてくれるので、ページの負荷を減らすことができます。
設定は、特にありません。デフォルト設定でOK。
PSIのスコアには関係ありませんが、「Basic」タブの「Remove Metadata」にはチェックを入れておきましょう。
ちなみに、画像最適化ソフトはCompress JPEG & PNG imagesでも良いと思います。
詳細はみずーさん（@catwalk_mizoo）の記事を参照。
正直、EWWW Image OptimizerでもCompress JPEG & PNG imagesでも大差ありません。
僕のサイトにはEWWWの方が相性が良かっただけなので、ここはお好みでどうぞ。
どちらのプラグインを使うかより、前述したとおり、画像をWordPressにアップロードする前のひと手間が重要です。
WP Super Cacheの設定
WP Super Cacheは、キャッシュ系のプラグイン。
ページの閲覧データをキャッシュに乗せることで、表示速度はあがるはず。
さ、難しい話は置いといて、設定。
と言っても、僕は特に設定をいじっていません。下記画像の1か所のみ、忘れずに設定しましょう。
| WP Super Cacheオプション | |
| キャッシング | 「キャッシング利用（推奨）」 を選択 |
上記の箇所以外は、下手に触らない方がいいです。
キャッシュ系プラグインですと、他には
- WP Fastest Cache
- W3 Total Cache
とかがあります。
僕の環境ではWP Super Cacheが不具合なく動作しました。
Jetpackの設定
Jetpackは、サイトの統計データ取得やSNS連携、セキュリティ保護など、豊富な機能を持ったプラグインです。
非常に多機能で便利ですが、その分、サイトに負荷をかける可能性があります。
スコアを重視するならば、統計データ取得以外の余計な機能はオフにするべき。
特に、下記の「パフォーマンス」タブに関する設定は必ず切ってください。
WordPress管理画面の左メニュー、JetPackの「設定」を選択し、「パフォーマンス」タブを選択します。
| JetPack 「パフォーマンス」タブの設定 | |
| サイトアクセラレータを有効化 | オフ |
| 画像の遅延読み込みを有効にする | オフ |
「パフォーマンス」タブ以外の設定はお好みで大丈夫ですが、よくわからなければ、本記事のコメント欄かTwitterのDM（@tsuru_1985）でお問合せください！
All in One SEO Packは不要
All in One SEO Packをインストールしている方は、今すぐ削除していただいた方がよいです。
【公式】WordPressテーマ「JIN」に入れておきたいプラグイン（外部サイト）でも説明されていますが、JINにAll in One SEO Packは必要ありません。
なぜなら、JINに必要な機能は網羅されているからです。
無駄にサイトを重くするだけなので、All in One SEO Packは消してしまいましょう。
プラグインまとめ
ここで一度、直接スコアに関わるプラグインをおさらいします。
- a3 Lazy Load（画像読み込み遅延）
- Autoptimize（ソースコード最適化）
- EWWW Image Optimizer（画像最適化）
- WP Super Cache（キャッシュ利用）
1つ注意点ですが、プラグインは入れれば入れるほどサイトが重くなります。
むやみにアレもコレもとインストールしないようにしてください。
特に速度に関わるプラグインは、それぞれの目的に対して、必ず1つずつにすること。
例えば、
- 画像遅延系なら「a3 Lazy Load」「BJ Lazy Load」を両方入れない
- キャッシュ系なら「WP Super Cache」「WP Fastest Cache」を両方入れない
といった具合です。
対策③ 「レンダリングを妨げるリソースの除外」の対処
PageSpeed Insightsの「改善できる項目」に出てくる「レンダリングを妨げるリソースの除外」。
おそらく9割以上の方が「レンダリングを妨げるリソース？？？」となるでしょう。もちろん僕もその1人でした。
細かい説明に関しては、下記の記事が参考になります。
この項目の対処を超ざっくり言うと、「ページの読み込みを邪魔する奴は、後回しで読み込ませる！」ということです。
さて対処方法ですが、「function.php」というファイルにコードを追記します。
「バックアップのやり方がわからない」という方は、サルワカさんの記事（【FileZillaの使い方】WordPressでFTPソフトを使おう）を参考にしてください。
子テーマを使っている場合、function.phpは「/自サイトのドメイン/public_html/wp-content/themes/jin-child」にあります。
子テーマを使っていなければ、「/自サイトのドメイン/public_html/wp-content/themes/jin」です。
バックアップが取れたら、function.phpに下記のコードを追記します。
// ヘッダーで読み込まれるスクリプトをフッターに移動
function my_init_action() {
remove_action(‘wp_head’,’wp_print_head_scripts’,9);
add_action(‘wp_footer’,’wp_print_head_scripts’,5);
remove_action(‘wp_head’, ‘print_emoji_detection_script’, 7);
remove_action(‘admin_print_scripts’, ‘print_emoji_detection_script’);
remove_action(‘wp_print_styles’, ‘print_emoji_styles’ );
remove_action( ‘wp_head’, ‘wp_generator’ );
remove_action( ‘wp_head’, ‘wlwmanifest_link’ );
remove_action( ‘wp_head’, ‘rsd_link’ );
remove_action( ‘wp_head’, ‘parent_post_rel_link’, 10, 0 );
}
add_action(‘init’,’my_init_action’);
下記画面のように貼れていればオッケーです。
これで「レンダリングを妨げるリソースの除外」の対処は完了です。
対策④ こまめにデータベース最適化・リビジョン削除を実施
WordPressでコンテンツを増やしていくと、だんだんデータベースが汚れてきたり、リビジョンが溜まっていきます。
そこで、先に紹介したプラグイン「WP-Optimize」を使って、こまめにゴミ掃除をしましょう。
- WordPressの左メニューから、「WP-Optimize」→「Database」を選択
- 「データベーステーブルの最適化」「すべての投稿リビジョンをクリーン」の2つに対して「最適化を実行」ボタンをクリック
上記2つ以外にも項目はありますが、誤差レベルなので無視でもオッケー。
実施するタイミングは、「記事を1本書いたらやる」くらいで良いでしょう。
なお僕は、いつもは「WP-Optimize」を無効化しておき、使う時だけ有効化しています。
普段使うプラグインではないので、少しでも負荷を下げるためです。
対策⑤ その他の細かい対処
その他、少しでもスコアを上げるため、下記を実施しましょう。
- 「サイト基本設定」のフォント選択で「デフォルト（端末の標準フォント）」を選択
- 「サイト基本設定」のアニメーション機能で「無効」を選択
- 「その他設定」の「fontawesomeを読み込まない」にチェック
上記は、JINの公式サイトにも説明があります。
これで、僕が行っている「PSIスコアアップ施策」の説明は以上です！
最後に：自サイトの問題点を把握して、PSIスコアを改善しよう
今回は、僕が実施した施策を全てお伝えしました。
簡単におさらいを。
| 対策 | 重要度 |
| １．画像最適化 | |
| ２．各種プラグイン | |
| ３．レンダリングを妨げるリソース | |
| ４．データベース最適化 |
今回の記事内容を全てを実践すれば、ある程度のスコア向上は見込めるはずです。
特にプラグイン周りの設定は、けっこうな試行錯誤を重ねて今のカスタマイズに辿りついたので、ぜひJINユーザの方は参考にしていただければと思います。
＼JINの公式マニュアルサイト／
JIN MANUAL
＼JINの質問フォーラム／
JIN Forum
－－以上です！
低糖質レシピから罪深いアレンジレシピまで「リュウジ式 悪魔のレシピ」
使う食材がとにかく少なくて簡単！レンジで作るパスタ集は必見「魔法のてぬきごはん」
冷蔵・冷凍保存の目安や献立の決め方など、ご飯づくりの参考書に最適「Yuuのラクうま晩ごはん」
非常に参考になりました！有益な情報ありがとうございます！！
ちなみに、GA上での読み込み時間はどのくらいになりますか？
自分がやっているサイトは4〜5秒で遅いのかな？と思っています。
まいまいさん、ありがとうございます！参考になれば嬉しいです！
GAの読み込み時間は、だいたい3.1～3.3秒ってとこですね。そこまで速くないという・・・
非常に参考になりましたが、レンダリングを妨げるリソースの除外コードを這ったのですが、
ヘッダーに「Warning…」との記述が出るようになってしまいました。
記述を要約すると、
未定義の定数「init」の使用-想定される「init」（これはPHPの将来のバージョンでエラーをスローします）
「my_init_action」（これはPHPの将来のバージョンでエラーをスローします）と見なされます
このような感じでした。
コード最後の、
add_action(‘init’,’my_init_action’);
が原因らしいのですがどうすればいいのか分かりません。
教えていただけないでしょうか。
ゆずさん
コメントありがとうございました。
すみません、私の方でも調べてみましたが、有用な解決策は見つかりませんでした…
ゆずさんの環境やツールなどに依存しているかもしれませんので、ひとまず追記したコードを削除いただいた方がよいかもしれません。