【JINモバイル高速化】スコア47点から85点に上げた方法まとめ
JINをテーマに使って運営しているサイトをGoogle PageSpeed Insightsでスキャンしたら、モバイル表示のスコアが思った以上に低くかった・・・。
そんな時に実際に行った施策をまとめました。
今回実行したことは以下４つです。
- プラグイン「a3 Lazy Load」をインストール・有効化
- JINのアニメーションを無効化
- プラグイン「Autoptimize」をインストール・有効化
- function.phpへJavaScriptの読み込み遅延処理を追加
★このうち、最終的に採用したのは①④だけです
一つずつ実行→確認と繰り返しても10分ほどでできると思います。④だけはPHPのソースコードをいじるので注意が必要。
JINユーザーで「スコアが低くてなんとかしたい」という方は参考にしてみてください。
ー もくじ ー
JINのモバイル高速化対策 ビフォーアフター
施策を行った結果、Google PageSpeed Insightsの数字がどう改善されたかを先に書いておきます。
モバイルのスコアの結果
BEFORE：47
AFTER：85
38ポイントも改善されました！
ちなみに、PCのスコアも86から95へ向上しました。
PCはまぁ元からそこそこ高いし良いかな、と思っていたので今回はフォーカスしません。以降載せているキャプチャは全てモバイルに対するスコアとなります。
"改善できる項目"の結果
Google PageSpeed Insightsの数字の下に表示される項目がどうなったか。
BEFORE：赤いバーが目立つ
AFTER：赤いバーがなくなった
赤くなくなったので、なんとなく満足しました。
それでは、以下施策を一つ一つ実施していったらスコアがどうなったかを書いていきます。
- プラグイン「a3 Lazy Load」をインストール・有効化
- JINのアニメーションをオフ
- プラグイン「Autoptimize」をインストール・有効化
- function.phpへJavaScriptの読み込み遅延処理を追加
JINにプラグイン"a3 Lazy Load"を導入したら
スコアが47 → 77に
一番効果が大きかったのはこのa3 Lazy Loadで、いきなりスコアが30点も改善。
やったことは、プラグインをインストール・有効化しただけのデフォルト設定です。
このプラグインは設定画面を見るととても多くの設定項目があるので圧倒されます。なので僕は設定を一切変えませんでした。
この「Lazy Load」はその名の通り「読み込みを怠ける(遅らせる)」プラグインです。
今表示しているページの画面外の動画や画像は読み込まず、画面スクロールされて画面範囲内と判定されたタイミングで初めて読み込まれる＝その分、ページにアクセスした瞬間の読み込み速度が早まる、という仕組み。
有効化するだけで大きく改善したのでおすすめ。
JINのアニメーションを無効化したら
スコアが77 → 変わらず
体感的には「パッと」表示されるようになったので、スコアも改善されるかと思いきや変わらず。
しかも、表示直後のピックアップコンテンツの描画に違和感が出たので、「数字が変わらんなら余計なことしなくていいや」ということでアニメーションは有効化しておくことに。
以下、JINアニメーション設定変更方法のキャプチャを置いておきます↓
「外観」→「カスタマイズ」
「サイト基本設定」
「サイト基本設定」で開いたウインドウ内に「アニメーション機能」項目があります。
JINにAutoptimizeを導入したら
スコアが77 → 78
やったことは、プラグインをインストール・有効化しただけのデフォルト設定です。
結果、たったの１ポイント改善...。
Autoptimizeは、速度改善関連のプラグインの中ではかなりメジャーです(記事がたくさんヒットする)。
そのぶん効果も期待していたんですが、ガッカリでした。
Autoptimizeは何をしているかを一言で表すのは困難なのですが、「HTML, CSSなどソースコードや画像を圧縮して軽くする」などしてくれます。
その他にもいろっっいろな機能があるようですが、複雑怪奇で素敵な処理全てを差して「表示スピードを最適化」するプラグインということらしいです。
「ソースコードの圧縮」とはなんなのか？について。たとえば、
a, b, c, d, e(改行)
f, g, h, i, j
というソースコード(例なのでここでは意味のないただの文字列)があったとして、Autoptimizeが圧縮してくれると、
a,b,c,d,e,f,g,h,i,j
というふうに「半角スペース」「改行」などを取り除いて連結した状態になります。これを「圧縮」といいます。
人間が読みやすいように入れる半角スペースや改行文字なども、機械にとっては読み込んで解釈する必要のある文字と変わらないので、機械が読み込む前に圧縮して処理に必要な文字列だけにしてくれる＝結果的に読み込みに掛かる負担が軽くなる、という感じです。
Autoptimizeは使わない方が良い
個人的にAutoptimizeはやめておいた方がいいかな...という印象ですね。
使わない方がいいと思った根拠
- 設定項目が多すぎ・複雑すぎて"この設定を変えるとどういう結果になるのか"が分からない
- その結果、どのページでどんな表示崩れが起きるのか分からない
①に関しては、いちど実際にインストール・有効化して設置ページを見てみるといいです。
「●●を最適化する」「▲▲を最適化する」「さらに最適化する！」とか何やねんそれ！！意味分からんわ！とつっこみたくなると思うので。
デフォルト設定で行くにしても、何をどう「最適化」してくれて結果どう改善されているのかよく分かりません。
②に関しては、僕はアフィブログを始めたばかりの2018年始当時、Autoptimizeで以下トラウマを経験しています。
- Autoptimizeプラグインをインストール、有効化した
- 何が改善されたか分からんけど、「良い」っていろんな記事で書いてあるからとりあえず有効化のまま放置
- ある日、スマホ表示でのみありえないレベルの表示崩れが発生しているページがあることに気づく(＝これまでの読者、大混乱だったはず)
- Autoptimizeを無効化して表示崩れが直った(半ギレ)
こういう「表示を最適化する系」のプラグインは、様々複雑な処理をしてくれているぶん「どこにどんな表示崩れが出るか分からない」というデメリットがあるので注意が必要です(まだサイト全体がダウンして表示されない方がすぐ気付けてマシなレベル)。
もしAutoptimizeを導入するときは「有効化直後 or 設定変更直後に全てのページをPCとスマホで閲覧して確認する」くらいの注意深さを持っておいて損はしません。表示不具合に気付かず放置→知らない間に読者に嫌われるとかリスクが大きすぎます。
「Autoptimize 設定」でググると最適な設定を説明してくれる記事がヒットしますが、各個人のWordPressの環境によって「その設定を変えたらどうなるか」は異なるので注意してください。
今回は「表示速度改善」が目的で、Autoptimizeでは改善されなかったため今回も問答無用で停止・アンインストール行きでした。
・・・・・・・・
いったん、ここまでで自分で手軽にできそうな施策は終わりかな？と思い、改善できそうな項目はあるか確認してみました。
すると、真っ赤になっている「レンダリングを妨げるリソースの除外」が気になり。
改善できないか調べたところ、PHPコードを追加することで対処できそうなことを発見。というわけで次は最後に試した施策です。
JINのfunction.phpへJavaScriptの読み込み遅延処理を加えたら
スコアが77 → 85へ
これも手間がかからない割りにスコアが改善されました。このまま採用！
「JavaScriptという最初に読み込まなくても良いファイルをあとで読み込むようにして表示の処理を優先する」というような処理を加えています。
方法は以下を参考にさせてもらいました。「遅延でリソースを除外する」の項目です。
"Webログ"さん: レンダリングを妨げるリソースの除外を行ってサイトスピード改善！！
追記上記Webサイトが閉鎖？してしまったようなので、以下手順と、僕のJINのサイトで実際に書いているコードを記載しておきます。
この操作は、WordPressの「functions.php」というPHPのソースコードファイルを直接編集することになるため、最悪の場合(コピペとはいえ)1文字でも間違いがあるとWebサイト全体が表示されなくなりWordPress管理画面へのログインもできなくなってしまう可能性があります。
- WordPressのバックアップ、リストアができる
- ご自身で契約しているレンタルサーバ会社の管理画面で提供される「ファイルマネージャー」等から直接PHPファイルの内容を修正できる
↑これら操作ができるのであれば大丈夫ですが、もし「何のことか分からない」という方は作業を控えるか、捨てサイトなどで事前に試すなどしてください。
以下、スマホではなくパソコンから作業してください。
↓「外観」＞「テーマエディター」
↓画面右「テーマのための関数」
↓以下ソースコードをコピーする
// js 非同期読み込み
if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url; //.js以外は対象外
if ( strpos( $url, 'jquery.min.js' ) ) return $url; //'jquery.min.js'は、asyc対象外
return "$url' async charset='UTF-8"; // async属性を付与
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}↓エディターの最後の行にある「 ?> 」の上の行にカーソルを合わせ、ソースコードを貼り付ける(最後の行でなくても良いのですが、自分でカスタマイズした部分と分かりやすいかと思うので)
「ファイルの更新」をクリック
「成功」と出ればOK
もし、この作業内容を取り消したい場合はコピペした部分を消して再度更新すればOKです。消す時も十分に注意してください。
JavaScriptは「クリックしたりスクロールなど動きに反応して画面を動かす」という処理を担当します。この遅延読み込み設定をしたことによって、たとえば「クリックして展開されるはず部分が展開されない」「スクロールすると表示されるものが表示されない」などの不具合が出る可能性があります。
典型的な例だと、スマホ表示でよくあるハンバーガーメニューなどをクリックしても反応しない、などです。
クリックで動くかチェック！
かならずブログ内でクリックによる動きがある部分の動作を確認してください。
JINモバイル表示を速くする施策 まとめ
以下1点目、2点目だけで38ポイント改善されました、というお話でした。
- a3 Lazy Loadを有効化するだけでも相当な改善が見られたので、試す価値あり
- JavaScript遅延読み込みも、作業可能ならおすすめ
- Autoptimizeはおすすめしない(仮にスコアが改善されたとしても)
以上、長い記事を読んでいただきありがとうございますm(_ _)m
