こんにちは。
みゆ（＠yun_design_）です。
今回は、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番下にコードを貼りました）
④ファイルを更新をクリックし、「ファイルの編集に成功しました」という表記が出れば完了です。
JavaScriptの読み込み遅延処理を加える方法については以上です。
まとめ
WordPressのテーマ「JIN」で作成したサイトの表示速度を30→96に改善した方法についてご紹介しました。
今回の記事内容をまとめておきます。
- フォントをデフォルトへ変更する
- FontAwesomeをオフにする
- JavaScriptの読込み処理を遅延させる
サイトの表示速度が変わらないようでしたら、JIN公式サイトのJINの高速化方法を全まとめ！表示速度が遅い時の対処法は？というページも確認していただくのが良いかと思います。
miyublogではブログ運営について他にも記事を書いています。
ご覧になっていただけると幸いです。
