ブログ運営

【JINユーザ専用】PSIスコアアップの手順書

PSIスコアアップのアイキャッチ
本記事は、PCのキャプチャを多用しています。スマホでは見づらいので、PCからの閲覧を推奨します。

こんにちは、JINユーザのつるです。

本記事では、WordPressテーマ「JIN」を使用されている方向けに、僕がPSIのスコアを上げるために行っている全ての施策をお伝えします。

まず最初に、PageSpeed Insightsでご自身のサイトのスコアを診断してみてください。スマホとPC、それぞれのスコアを診断できます。

・・・さて、どうでしょうか。

目安として「モバイルスコアが50以下」だった方は、この記事を参考にして、スコアの向上に努めてもいいかもしれません。

この記事は、そんなあなたのために書きました。

一応、この記事の信頼性を示しておきます。
当サイト「ツルブログ」のスコアは下記の通りです。

psi-score左がモバイル、右がPCのスコア。2019/6/25 2:10時点。

モバイル91点、PC100点という結果です。

タイミングの問題もありますが、上記の通り。

信じられなければ、実際に僕のサイトのURLでお試しください。モバイル:87~92、PC:97~100くらいになるはず。

さて、本文に入る前に留意事項です。

留意事項。必ずお読みください
  • PSIのスコアと実際の速度は必ずしも比例しません。スコアは参考程度に留めてください。
  • 本記事の施策を全て実践しても、上記と同じスコアが出る保証はありません。それぞれの環境に差異があるため。
  • 全てのカスタマイズは自己責任です。いかなる不具合についても、苦情などは一切受け付けかねます。

画像をたくさん使ったり、デザインをこだわりまくってるサイトは、その分重くなるのは想像できますよね。

また、この記事に書いている内容は、あくまで「僕のサイトでの一例にすぎない」という点にご留意ください。

それでは行きましょう。

PSIスコアアップの事前準備

前提として、当サイト「ツルブログ」の基本スペックは下記の通りです。

スペック表(2019/06/22時点)
レンタルサーバエックスサーバー(PHP7.2.17)
※Xアクセラレータ Ver.2適用済み
WordPress
バージョン
5.2.2
JINバージョン2.060

全て、2019/06/22時点での最新バージョンです。

事前準備:各ツールのバージョン最新化

まず事前準備として、下記の最新化を実施しましょう。

  1. エックスサーバーのPHPを推奨バージョンにする(6/22時点では「7.2.17」)
  2. XアクセラレータVer.2を適用する
  3. WordPressのバージョンを「5.2.2」にする
  4. JINのバージョンを「2.060」にする
つる
つる
①と②は、エックスサーバー以外の方は無視してください

最新化の方法ですが、③WordPressと④JINについては、WordPressのダッシュボードからバージョンアップできます。

①と②がよくわからない方は、下記の記事を参考にしてください。

これで事前準備は完了です!

PSIスコアアップ対策の全体図

これから説明する対策の全体図は、下記の通り。

対策重要度
1.画像最適化
2.各種プラグイン
3.レンダリングを妨げるリソース
4.データベース最適化

最低でも、1.画像の最適化と2.各種プラグインの説明はご一読ください。3と4は余裕があれば。

さて、まずは画像に関する解説です。

スポンサーリンク

対策① 画像最適化の考え方

jin-speed-1
画像は、サイトが重くなる主要因の一つです。

そのため、「画像をいかに軽量化するか?」は非常に重要なポイント。

そこで、画像に関して僕が気を付けているポイントは、下記の通りです。

  • 画像はアップロード前に縮小・圧縮する
  • アイキャッチの画像は「横760px:縦428px」にする
  • 画像最適化プラグインを使用する
  • 画像読み込み遅延のプラグインを使用する

3つめ・4つめに関してはプラグインの項で説明するので、ここでは1つめと2つめについて解説します。

画像はアップロード前に縮小・圧縮する

画像は、必ずアップロード前に縮小・圧縮してください。

「画像最適化プラグインを使っているから」といって、スマホで撮った写真をそのままWordPressに放り込んでいませんか?

それではダメ。理由は下記の記事で詳しく解説しています。

ブログ画像最適化記事のアイキャッチ画像
ブログの画像は、アップロードする前に縮小・圧縮するべき理由ブログやサイトに載せる画像、最適化をプラグイン任せにしていませんか?実はアップロードする前にひと手間かけて、縮小・圧縮しておいた方が良い理由があります。この記事では、詳しい理由について解説しています。...

もう少し細かい話は次の項で。

アイキャッチの画像は「横760px:縦428px」にする

JINのアイキャッチは、横760px:縦428pxで作成しましょう。

つる
つる
公式サイト「JINマニュアル」でも言及されています

厳密に言えば、横760px:縦428pxが16:9にあたるので、これくらいの画像サイズで作成するとアイキャッチが綺麗にはまります。アイキャッチ画像の大きさはどれくらいが最適?(JINマニュアル公式サイト)

僕は、アイキャッチ及び見出し(h2下)に使う画像は、あらかじめ横760px:縦428pxにして、さらに圧縮をかけてからWordPressにアップロードしています。

具体的には、下記の通り。

  • スマホで撮った写真・・・いったんPCに取り込み、画像編集サイトiloveimgで横760px:縦428pxに編集
  • イラスト作成・・・Canvaで横760px:縦428pxサイズで作成し、iloveimgで圧縮

また、記事内に差し込む画像も、横760px以内に縮小しています。

例えば、

  • スマホのスクリーンショットは横400px
  • PCのスクリーンショットは横600px

といった感じ。

・・・ここまで読んで、「いやいや、メンドくさすぎるだろ」と思われたのではないでしょうか。

でも、画像に関してはこのくらい丹念にケアすべきです。それほどスコアに影響するということなので。

スマホから画像投稿する場合も、縮小だけはする

スマホでブログを書き、スマホから画像をアップロードされる方も多いと思います。

その場合でも、せめて画像の縮小だけはキッチリしてからアップロードしましょう。

つる
つる
無料で写真をリサイズできるアプリはいくらでもあるよ!
バッチリサイズ2 - 複数の写真/画像をまとめてリサイズ
バッチリサイズ2 – 複数の写真/画像をまとめてリサイズ
開発元:Koichi Otera
無料
posted withアプリーチ

さて、次はプラグインに関する解説です。

対策② プラグインのカスタマイズ

jin-speed-2
僕がインストールしているプラグインの一覧を、下記に示します。
全部で17個です。

プラグイン名説明
a3 Lazy Load画像表示遅延
Ad Inserter広告挿入
AddQuicktagよく使うタグの呼び出し
Akismet Anti-Spamコメント欄のスパム防止
AutoptimizeHTML,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つ変えても欠けてもダメ。

ちなみに、一覧中で赤字にしていたJetpack。スコア重視なら入れない方がいいです。僕は、統計データを取るためにやむなく入れています。

※注意※ プラグインは、カスタマイズするたびに表示の確認!

このあと各プラグインの設定内容を説明しますが、その前にひとつ。

プラグインは、インストールしたり設定を変えるたびに、必ずページに問題がないかを確認してください。

具体的には、

  • 表示がくずれていないか
  • 画像やアイコンが表示されているか

を、PCとスマホそれぞれでチェックしてください。

つる
つる
一気に色々カスタマイズしてしまうと、不具合が出た時、どのプラグインが元凶なのかがわからなくなってしまいます

それでは行きましょう。

1.a3 Lazy Loadの設定

a3-lazy-load引用:WORDPRESS.ORG

a3 Lazy Loadは、画像読み込み遅延用のプラグインです。

スマホでスクロールすると、一瞬「クルクル」ってなってから画像が出るサイト、よくありますよね。

ファーストビューで画像を全て読み込まず、表示されてから初めて読み込むので速くなる、というわけです。

さて設定。

基本的にデフォルト設定で良いですが、一か所だけ変更してください(下記の赤字箇所)

a3 Lazy Loadの設定
Plugin Framework Global Settings全てOFF
Lazy Load ActivationON
Lazy Load Images全てON
Lazy Load Videos and iframes全てON
Exclude by URI’s and Page Types全てOFF
Script Load OptimizationFOOTER
WordPress Mobile Template Plugins全てON
Effect & StyleSPINNER
Image Load Threshold400

一番最後のImage Load Thresholdだけ、「400」と入力します。

a3 Lazy Loadの設定画面
この値は、要するに「画像がどれだけゆとりを持って読み込まれるか」の設定です。

つる
つる
200とかだと、読み込みが追いつかなくてイラつく。。

画像読み込み遅延プラグインは、他に

  • Lazy Load
  • BJ Lazy Load

とかがあります。

僕の場合、この2つだとなぜか吹き出しの画像が表示されなくなってしまいました・・・

なので、不具合が出ない「a3 Lazy Load」を使用しています(JIN公式は「BJ Lazy Load」を推奨)。

2.Autoptimizeの設定

Autoptimize引用:WORDPRESS.ORG

Autoptimizeは、HTMLなどのソースコードを最適化し、ページ読み込みを速くしてくれるプラグインです。

難しい話になるので、仕組みは気にしないでください。

Autoptimizeの設定画面を開き、「JS,CSS & HTML」タブを選択。

以下の画面の通りにチェックしていきましょう。

Autoptimizeは、設定内容や他のプラグインとの干渉によって「表示が崩れる」「画像が表示されなくなる」などの不具合が起こる可能性があります。どう設定しても上手くいかない場合は、他のコード最適化プラグイン使用も検討してください。
Autoptimize(js)
JavaScript オプション
JavaScriptコードの最適化チェック
Aggregate JS-files?チェック
インラインのJSを連結チェックしない
<head>内へJavaScriptを強制チェックしない
Autoptimizeからスクリプトを除外seal.js, js/jquery/jquery.js
try-catchの折り返しを追加チェックしない
Autoptimize(css)
CSS オプション
CSSコードを最適化チェック
Aggregate CSS-files?チェック
インラインのCSSを連結チェック
データを生成:画像をURI化チェックしない
CSSのインライン化と遅延チェックしない
すべてのCSSをインライン化チェック
AutoptimizeからCSSを除外wp-content/cache/,
wp-content/uploads/,
admin-bar.min.css,
dashicons.min.css
Autoptimize(html)
HTML オプション
HTML コードを最適化チェック
HTML コメントを残すチェックしない
CDN オプション
CDNのベースURL空欄
Autoptimize(other)
その他オプション
3つともチェック

これで「JS,CSS & HTML」タブの設定はOK。

次に「追加」タブを選択します。

Autoptimize(add)
一番上の「Google Fonts」で、「webfont.js で非同期にフォントを結合して読み込む。」を選択。

これで、Autoptimizeの設定は完了!

3.EWWW Image Optimizerの設定

EWWW-image-optimizer引用:WORDPRESS.ORG

EWWW Image Optimizerは、画像最適化のプラグイン。

自動で画像圧縮などをしてくれるので、ページの負荷を減らすことができます。

設定は、特にありません。デフォルト設定でOK。

PSIのスコアには関係ありませんが、「Basic」タブの「Remove Metadata」にはチェックを入れておきましょう。

ちなみに、画像最適化ソフトはCompress JPEG & PNG imagesでも良いと思います。

詳細はみずーさん(@catwalk_mizoo)の記事を参照。

正直、EWWW Image OptimizerでもCompress JPEG & PNG imagesでも大差ありません。

僕のサイトにはEWWWの方が相性が良かっただけなので、ここはお好みでどうぞ。

どちらのプラグインを使うかより、前述したとおり、画像をWordPressにアップロードする前のひと手間が重要です

4.WP Super Cacheの設定

WP-super-cache引用:WORDPRESS.ORG

WP Super Cacheは、キャッシュ系のプラグイン。

ページの閲覧データをキャッシュに乗せることで、表示速度はあがるはず。

WP Super Cacheは、設定内容や他のプラグインとの干渉によって「表示が崩れる」「画像が表示されなくなる」などの不具合が起こる可能性があります。どう設定しても上手くいかない場合は、他のキャッシュ系プラグイン使用を検討してください。

さ、難しい話は置いといて、設定。

と言っても、僕は特に設定をいじっていません。下記画像の1か所のみ、忘れずに設定しましょう。

wp-super-cache-config
WP Super Cacheオプション
キャッシング「キャッシング利用(推奨)」
を選択

上記の箇所以外は、下手に触らない方がいいです。

キャッシュ系プラグインですと、他には

  • WP Fastest Cache
  • W3 Total Cache

とかがあります。

僕の環境ではWP Super Cacheが不具合なく動作しました。

5.Jetpackの設定

jetpack引用:WORDPRESS.ORG

Jetpackは、サイトの統計データ取得やSNS連携、セキュリティ保護など、豊富な機能を持ったプラグインです。

非常に多機能で便利ですが、その分、サイトに負荷をかける可能性があります。

スコアを重視するならば、統計データ取得以外の余計な機能はオフにするべき。

特に、下記の「パフォーマンス」タブに関する設定は必ず切ってください。

jetpack-config2
WordPress管理画面の左メニュー、JetPackの「設定」を選択し、「パフォーマンス」タブを選択します。

JetPack 「パフォーマンス」タブの設定
サイトアクセラレータを有効化オフ
画像の遅延読み込みを有効にするオフ

「パフォーマンス」タブ以外の設定はお好みで大丈夫ですが、よくわからなければ、本記事のコメント欄かTwitterのDM(@tsuru_1985)でお問合せください!

6.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」を両方入れない

といった具合です。

つる
つる
インストールするプラグインは、必要最小限に抑えましょう!
スポンサーリンク

対策③ 「レンダリングを妨げるリソースの除外」の対処

jin-speed-3
この項目は「function.php」に修正を加えます。少し難易度が高いので、読み飛ばしていただいても問題ありません。

PageSpeed Insightsの「改善できる項目」に出てくる「レンダリングを妨げるリソースの除外」。

おそらく9割以上の方が「レンダリングを妨げるリソース???」となるでしょう。もちろん僕もその1人でした。

細かい説明に関しては、下記の記事が参考になります。

この項目の対処を超ざっくり言うと、「ページの読み込みを邪魔する奴は、後回しで読み込ませる!」ということです。

さて対処方法ですが、「function.php」というファイルにコードを追記します。

つる
つる
JINの子テーマを適用している方は、WordPressのメニューから「外観→テーマエディター→(jin-child)を選択→テーマのための関数(function.php)」と進んでください
編集する前に、必ず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’);

下記画面のように貼れていればオッケーです。

function.phpのイメージ

これで「レンダリングを妨げるリソースの除外」の対処は完了です。

対策④ こまめにデータベース最適化・リビジョン削除を実施

jin-speed-4
WordPressでコンテンツを増やしていくと、だんだんデータベースが汚れてきたり、リビジョンが溜まっていきます。

つる
つる
「データベース」は記事などのデータが格納されている箱、「リビジョン」は記事の一時データと思ってください

そこで、先に紹介したプラグイン「WP-Optimize」を使って、こまめにゴミ掃除をしましょう。

  1. WordPressの左メニューから、「WP-Optimize」→「Database」を選択
  2. 「データベーステーブルの最適化」「すべての投稿リビジョンをクリーン」の2つに対して「最適化を実行」ボタンをクリック
wp-optimizeイメージ

上記2つ以外にも項目はありますが、誤差レベルなので無視でもオッケー。

実施するタイミングは、「記事を1本書いたらやる」くらいで良いでしょう。

なお僕は、いつもは「WP-Optimize」を無効化しておき、使う時だけ有効化しています。

普段使うプラグインではないので、少しでも負荷を下げるためです。

対策⑤ その他の細かい対処

jin-speed-5
その他、少しでもスコアを上げるため、下記を実施しましょう。

つる
つる
全て、WordPressメニューの「外観」→「カスタマイズ」の項目です
  • 「サイト基本設定」のフォント選択で「デフォルト(端末の標準フォント)」を選択
  • 「サイト基本設定」のアニメーション機能で「無効」を選択
  • 「その他設定」の「fontawesomeを読み込まない」にチェック

上記は、JINの公式サイトにも説明があります。

これで、僕が行っている「PSIスコアアップ施策」の説明は以上です!

つる
つる
お疲れさまでした!

最後に:自サイトの問題点を把握して、PSIスコアを改善しよう

今回は、僕が実施した施策を全てお伝えしました。

簡単におさらいを。

対策重要度
1.画像最適化
2.各種プラグイン
3.レンダリングを妨げるリソース
4.データベース最適化

今回の記事内容を全てを実践すれば、ある程度のスコア向上は見込めるはずです。

特にプラグイン周りの設定は、けっこうな試行錯誤を重ねて今のカスタマイズに辿たどりついたので、ぜひJINユーザの方には参考にしてほしいです。ある程度役に立つはず。

サイトは、遅いより速い方がいいに決まってます。

PSIスコアをアップし、訪問してくれるユーザの満足度を向上させ、ついでに「JINって遅いよなー」なんて言わせないようにしてしまいましょう!

つる
つる
なお、JINのマニュアルは「JIN MANUAL」、何か質問がしたければ「JIN Forum」を有効活用しましょう!

\JINの公式マニュアルサイト/
JIN MANUAL

\JINの質問フォーラム/
JIN Forum

--以上です!

POSTED COMMENT

  1. まいまい より:

    非常に参考になりました!有益な情報ありがとうございます!!

    ちなみに、GA上での読み込み時間はどのくらいになりますか?
    自分がやっているサイトは4〜5秒で遅いのかな?と思っています。

    • tsuruokahr より:

      まいまいさん、ありがとうございます!参考になれば嬉しいです!

      GAの読み込み時間は、だいたい3.1~3.3秒ってとこですね。そこまで速くないという・・・

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です