【JIN】サイトを表示速度30→96に改善した方法【高速化】

こんにちは、みゆです。

今回は、Wordpressのテーマ「JIN」で作成したサイトの表示速度を30→96に改善した方法についてご紹介します。

ページの表示速度を調べたところ、スコアがPC・モバイル共に「30点代」でした。

Googleからの評価が悪くなるのではないかと感じ色々と調べ対策を行い、無事に「96点（PC）」までスピードをアップする事ができました。

私が実際に行った方法をご紹介しますので、サイトの表示速度で悩んでいる方はぜひお試しください。

サイトの表示速度ってどうやって測るの？

サイトの表示速度は、Googleが提供している「PageSpeedInsights」という無料のツールを使用しました。

使い方はとても簡単で検索窓に自分が調べたいサイトのURLを入力するだけです。

20秒くらい経過すると、下記の画像のような結果画面に変わります。
PCでの表示速度は「95点」でした。

モバイルの速度は「73点」です。

サイト改善前はPC・モバイル共に「30点代」だったので、かなりスピードアップができたかと感じています。

表示速度の確認方法の説明が終わったので、次は私が実際に行った改善方法についてご紹介します。

サイトの表示速度を改善した方法①フォントをデフォルトに変更

①WordPressの編集画面から「外観→カスタマイズ→サイト基本設定」を選択します。

②サイト基本設定の中に「フォント選択」という項目があるので、デフォルトへ変更。

元々角ゴシックフォントを使用していたのですが、フォントの読み込みには時間がかかり速度に影響するようなので、デフォルトに変更しました。

サイトの表示速度を改善した方法②FontAwesomeをオフにした

~~モバイルで当サイトを見ていただくと、下部にモバイル用のメニューが表示されるように設定をしています。~~（2021年３月６日現在モバイルメニューを削除しました）

FontAwesomeのアイコンを使用していましたが、高速化の為にJINオリジナルアイコンへ変更する事にしました。

FontAwesomeをオフにする方法

①WordPressの編集画面から「外観→カスタマイズ」を選択します。

②下の方にある「その他設定」を選択し、「fontawesomeを読み込まない」にチェックを入れる。

FontAwesomeをJINオリジナルアイコンへ変更する方法

①WordPressの編集画面から「外観→メニュー」を選択します。

②メニュー画面が表示されたら、ご自身が編集したいメニューを選択してください。
私は「スマホ固定フッターメニュー」にアイコンを設定していたので、そちらを選択しています。

③編集したい部分を選択し、JINオリジナルアイコンからアイコンを選ぶ。
私はこの家のアイコンに変更しました。

④説明の部分にアイコン名の入力を行います。

これでFontAwesomeからJINオリジナルアイコンに変更する事ができます。

サイトの表示速度を改善した方法③JavaScriptの読み込み遅延処理を加える

複雑そうですが何をするかというと、JavaScriptのファイル読込みを後にして、サイトの表示処理を優先させるという事だそうです。

~$YUKI.WORLD様の【JINモバイル高速化】スコア47点から85点に上げた方法まとめの記事を参考にして処理を行いました。

テーマエディターに変更を加える為、表示に不具合が出る場合などがあります。
万が一に備えて、あらかじめバックアップをとる事をオススメします。

参考記事のリンクを貼っておきます。

・【初心者も安心】WordPressのバックアップを取る方法とおすすめプラグイン３選

①WordPressの編集画面から「外観→テーマエディター」を選択します。

②編集するテーマで「JIN」を選択し、次に「テーマのための関数（function.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 );
}

④コピーしたソースコードをエディターの1番下の行に貼り付ける。（自分で分かりやすくする為に、1番下にコードを貼りました）