WordPress

WordPressのテーマJINを高速化してみました

  /

Stinger8からJINに変えて、リッチなブログを書けるようになって、満足はしてるんだけど唯一不満な点があります。

それは、モバイル版のサイトの読み込み速度が遅いこと。

Stinger8の頃のGoogleのPageSpeed InsightsのMobileの結果は「97」。

Stinger8の頃のPageSpeed Insights

そして、JINに変更した直後は下記の状態

JINの最適化前のPageSpeed Insights

「45」ってページの読み込み時間がSEOに影響する現在に於いて、これは致命的。。。

そこで、どうにかして90点第まで引き上げる為に色々とやってみました。

公式にアナウンスされている対応の中から効果のあるものを行い、それだけでも90点台までいきました。

また、その後、荒技的な方法を試して、結果的には97点までいきました。

荒技的な方法はWordPressの初心者さんにはお勧めはできませんが、貪欲に速さを求めるのであれば、（自己責任で）挑戦してみて下さい！

JIN公式推奨高速化方法をやってみた結果

まず、公式でお勧めされていることを全部試して、どれくらいの速度になるか検証してみます。

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/

高速化プラグインを活用する

おすすめされていた下記のプラグインを入れて試してみました。

  • Autoptimize
  • Lazy Load
  • WP Super Cache

上記をすべて試した結果、最終的に自分がインストールしたのはAutoptimizeのみになります。

Lazy LoadプラグインはAutoptimizeに含まれれいたのでそちらを使いました。

また、WP Super Cacheは設定しても効果が無かったので、アンインストールしました。

Autoptimizeの設定

このプラグインは設定項目が色々ありますが、自分がの設定画面のスクリーンショットを添付するので参考にして下さい。

上記設定をすることで、「94」まで改善しました。

一応ここまでで、JINの公式に書いている全ての項目を試した事になります。

JINのソースをトレースし改善する（上級者向け）

ただ、PageSpeed Insightsの診断結果によると、画像が大きすぎたり、無駄なcss、JavaScriptファイルが読み込まれているとの警告が確認できたので、JINのソースコードをトレースし、そちらも対応してみました。

ここからの方法はWordPressに詳しい人以外はあまりオススメしません、やるのであれば自己責任でお願いします！

phpファイルをガッツリ弄るので、sshもしくはftpソフトの使用が必須です。

また、ファイルを修正する際はバックアップを取ってから修正するようにしましょう！

主に対応する内容としては下記です。

  • 一覧用のサムネイル画像を最適化
  • 無駄なcss、jsの読み込みを削除

それぞれ説明していきます。

一覧用のサムネイル画像を最適化

自分のブログの場合は、トップページに出ている画像は下記の2箇所です。

  • 記事の一覧のサムネイル画像
  • ピックアップコンテンツのサムネイル画像

この画像がモバイル版にしては大きすぎるので最適化していきます。

これを改善するために読み込まれる画像を強制的に小さいものに変えます。

ピックアップコンテンツのサムネイル画像を小さい画像にする

修正ファイル
wp-content/themes/jin/include/pickupstyle/pickup-contents-menu-type.php

下記を修正

pickup-contents-menu-type.php
20 $thumbnail_id = get_post_thumbnail_id($page_id);
// small_size から cps_thumbnails に変更
21 $image_attributes = wp_get_attachment_image_src($thumbnail_id,'cps_thumbnails');
22 $content = get_page($page_id);

これにより、PC版の画像も小さいものに変わりますが、小さい画像でも横幅は320pxあるので充分だと思います。

尚、この修正はJINの親テーマを修正してるので、JINを更新した場合はロールバックされてしまうので再度修正が必要になります。

また、サムネイル画像が汚い等気になる点があったら、上記設定はしない方が良いと思います。

記事の一覧のサムネイル画像を小さい画像にする

修正ファイル
wp-content/themes/jin-child/functions.php

下記をfunctions.phpの一番下に追加

functions.php
add_filter( 'wp_calculate_image_srcset', '__return_false' );

尚、これはレスポンシブイメージを無効にする設定です。

レスポンシブイメージとは、簡単には下記が分かりやすいかと思います。

レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年11月に勧告されたHTML 5.1の新仕様です。主な特徴は次の通りです。

・CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り扱える
・デバイスに応じた最適な「大きさ」の画像を表示できる
・デバイスに応じた最適な「見た目」の画像を出し分けできる

https://ics.media/entry/13324/

今回はこれは必要ないと判断し、オフにしました。

必要ないと判断した理由は、実際にサーバーのアクセスログを見て調べたところ、モバイル版のサムネイル画像として横幅640pxの大きい画像が読み込まれている事が確認できたからです。正直、横幅640pxはモバイル版にしては大きすぎると思います。

レスポンシブイメージを無効にすることで、モバイルの場合は横幅320pxのサムネイル画像が読み込まれるようになります。

ただ、サムネイル画像が汚い等気になる点があったら、ピックアップコンテンツの画像同様に上記設定はしない方が良いと思います。

無駄なcss、jsの読み込みを削除する

これは改善できる人と改善できない人がいるので、注意が必要です。

トップページ設定のピックアップコンテンツのタイプ選択を「記事タイプ」にしている人は、この最適化はできません。

何故なら、この最適化は「記事タイプ」用で読み込まれていたJavaScriptとcssファイルを読み込まないようにする設定だからです。

自分は「メニュータイプ」にしているので、それ用のファイルは不要なので、読み込まないようにしました。

修正ファイル
wp-content/themes/jin-child/functions.php

下記をfunctions.phpの一番下に追加

functions.php
function my_remove_enqueue_style() {
    wp_dequeue_style('swiper-style');
    wp_dequeue_script('cps-swiper');
}
add_action( 'wp_enqueue_scripts', 'my_remove_enqueue_style', 11);

以上で、対応は全て完了です。

これを全て対応すると、PageSpeedInsightsのモバイルのスコアは「97」まで改善しました。

一応満足できるレベルまでなったので、今回はこれで終了にします。

尚、PCは「100」です。

まとめ

今回色々と対応してみて、最終的にはモバイル版97、パソコン版100までなったので満足です。

Twitter等でJINが遅いと嘆いている方達が沢山見受けられましたので、この記事がその人たちの助けになれば嬉しいです。

JINのテーマはデザインが凄く良いので、なるべくなら他のテーマに変えたくないと思いますので、頑張って高速化していきましょう！

RELATED POST