2019年7月20日Stinger8からJINに変えて、リッチなブログを書けるようになって、満足はしてるんだけど唯一不満な点があります。それは、モバイル版のサイトの読み込み速度が遅いこと。InsightsのMobileの結果は「97」。Insights「45」ってページの読み込み時間がSEOに影響する現在に於いて、これは致命的。そこで、どうにかして90点第まで引き上げる為に色々とやってみました。公式にアナウンスされている対応の中から効果のあるものを行い、それだけでも90点台までいきました。その後、荒技的な方法を試して、結果的には97点までいきました。やってみた結果まず、公式でお勧めされていることを全部試して、どれくらいの速度になるか検証してみます。https://jin-theme.com/manual/speed-up/下記、2019年7月8日現在、公式で発表されている高速化手法です。JINを最新版にアップデートFontAwesomeをOFFにする画像は圧縮してアップロードアニメーションをOFFにする標準フォントを利用する高速化プラグインを活用するXアクセラレーターを活用する一つづつやっていきます。JINを最新版にアップデート公式によると2019年7月8日現在、JINの最新バージョンは2019年5月13日にリリースされたVer2.05ということです。僕がJINのテーマを購入したのが、6月の中旬くらいで、既に最新版にはなっているのでこれは問題なしです。ここで不満に思ったことが一つ。バージョンの確認方法が分からなかったので、せめてソースコードの一番上とかに、コメントで最新バージョンを書いてくれていると助かるのにと思いました。WordPressのテーマを作った事が無いから、実際にコメントを挿入できるのかは分からないけど、バージョンはどこかで確認できると嬉しいですね。FontAwesomeをOFFにするこれをONにしていると、下記ページのアイコンがHTML内で使えるというものです。https://fontawesome.com/icons?d=gallery&m=free僕は使っていないし、今後も使う予定は無いので、必要なしだと判断しオフにしました。これは結構効果ありで、結果は「65」まで改善しました!画像をリサイズ&圧縮してアップロードする画像は最適化されていなと、容量がかなり重いことがあるので、これは必要ですね。言え、僕は元々やっていたので問題ありませんでした。方法は、下記公式ページ内に記載してあるので、参考にしてみて下さい。https://jin-theme.com/manual/speed-up/アニメーションの無効化これを無効にすると、アニメーションが動かなくなるので、高速化されるとのことです。自分はブログサイトにアニメーションは必要ないと思っているので、無効化することに抵抗は無かったです。アニメーションありでリッチにサイトを表示させたいと思っている人は無効化できなので、この対応しないと早くならないのは正直微妙だと思いますね。結果は71まで改善しました。標準フォントを利用するこれは最初からデフォルトの標準フォントを使用していたので、変更の必要はありませんでした。方法は、こちらも下記公式ページ内に記載してあるので、参考にしてみて下さい。https://jin-theme.com/manual/speed-up/高速化プラグインを活用するおすすめされていた下記のプラグインを入れて試してみました。Cache上記をすべて試した結果、最終的に自分がインストールしたのはAutoptimizeのみになります。LoadプラグインはAutoptimizeに含まれれいたのでそちらを使いました。Cacheは設定しても効果が無かったので、アンインストールしました。Autoptimizeの設定このプラグインは設定項目が色々ありますが、自分がの設定画面のスクリーンショットを添付するので参考にして下さい。上記設定をすることで、「94」まで改善しました。一応ここまでで、JINの公式に書いている全ての項目を試した事になります。Insightsの診断結果によると、画像が大きすぎたり、無駄なcss、JavaScriptファイルが読み込まれているとの警告が確認できたので、JINのソースコードをトレースし、そちらも対応してみました。ここからの方法はWordPressに詳しい人以外はあまりオススメしません、やるのであれば自己責任でお願いします!phpファイルをガッツリ弄るので、sshもしくはftpソフトの使用が必須です。ファイルを修正する際はバックアップを取ってから修正するようにしましょう!主に対応する内容としては下記です。無駄なcss、jsの読み込みを削除それぞれ説明していきます。自分のブログの場合は、トップページに出ている画像は下記の2箇所です。記事の一覧のサムネイル画像ピックアップコンテンツのサムネイル画像この画像がモバイル版にしては大きすぎるので最適化していきます。これを改善するために読み込まれる画像を強制的に小さいものに変えます。get_page($page_id);これにより、PC版の画像も小さいものに変わりますが、小さい画像でも横幅は320pxあるので充分だと思います。この修正はJINの親テーマを修正してるので、JINを更新した場合はロールバックされてしまうので再度修正が必要になります。サムネイル画像が汚い等気になる点があったら、上記設定はしない方が良いと思います。);尚、これはレスポンシブイメージを無効にする設定です。レスポンシブイメージとは、簡単には下記が分かりやすいかと思います。レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。主な特徴は次の通りです。・CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り扱える・デバイスに応じた最適な「大きさ」の画像を表示できる・デバイスに応じた最適な「見た目」の画像を出し分けできるhttps://ics.media/entry/13324/今回はこれは必要ないと判断し、オフにしました。必要ないと判断した理由は、実際にサーバーのアクセスログを見て調べたところ、モバイル版のサムネイル画像として横幅640pxの大きい画像が読み込まれている事が確認できたからです。横幅640pxはモバイル版にしては大きすぎると思います。レスポンシブイメージを無効にすることで、モバイルの場合は横幅320pxのサムネイル画像が読み込まれるようになります。サムネイル画像が汚い等気になる点があったら、ピックアップコンテンツの画像同様に上記設定はしない方が良いと思います。無駄なcss、jsの読み込みを削除するこれは改善できる人と改善できない人がいるので、注意が必要です。トップページ設定のピックアップコンテンツのタイプ選択を「記事タイプ」にしている人は、この最適化はできません。この最適化は「記事タイプ」用で読み込まれていたJavaScriptとcssファイルを読み込まないようにする設定だからです。自分は「メニュータイプ」にしているので、それ用のファイルは不要なので、読み込まないようにしました。11);以上で、対応は全て完了です。これを全て対応すると、PageSpeedInsightsのモバイルのスコアは「97」まで改善しました。一応満足できるレベルまでなったので、今回はこれで終了にします。PCは「100」です。まとめ今回色々と対応してみて、最終的にはモバイル版97、パソコン版100までなったので満足です。Twitter等でJINが遅いと嘆いている方達が沢山見受けられましたので、この記事がその人たちの助けになれば嬉しいです。っ越し業者、アパレル販売員等を得て、web系のエンジニアに落ち着く。その後海外で3年ほど働き、帰国後日本でエンジニアを行いつつ、フリーランスになる機会を伺っている。