ブログ

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

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

こんにちは。
みゆ(@yun_design_)です。

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

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

ページ速度を改善する前のデータ
改善前

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

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

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

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

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

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

PageSpeedinsightsのPCの結果

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

PageSpeedinsightsのモバイルの結果


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

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

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

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

ワードプレスの管理画面

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

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

JINのカスタマイズ画面

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

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

miyublogのモバイル時のフッター画面

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

FontAwesomeをオフにする方法

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

ワードプレスの管理画面

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

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


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

ワードプレスの管理画面

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

スマホ固定フッターメニューの写真

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

JINオリジナルアイコンの画像

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

スマホ固定フッターメニューに、JINオリジナルアイコンを貼り付けている画像

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

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

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

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

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


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

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

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

ワードプレスの管理画面

②編集するテーマで「JIN」を選択し、次に「テーマのための関数(function.php)」をクリック。

JINのテーマエディターの画像

③以下のソースコードをコピーします。

以下のコードを全てコピーしてください

// 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番下にコードを貼りました)

JINのテーマエディターにコードを貼る画像

④ファイルを更新をクリックし、「ファイルの編集に成功しました」という表記が出れば完了です。


JavaScriptの読み込み遅延処理を加える方法については以上です。

まとめ


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

今回の記事内容をまとめておきます。

  1. フォントをデフォルトへ変更する
  2. FontAwesomeをオフにする
  3. JavaScriptの読込み処理を遅延させる


サイトの表示速度が変わらないようでしたら、JIN公式サイトのJINの高速化方法を全まとめ!表示速度が遅い時の対処法は?というページも確認していただくのが良いかと思います。


miyublogではブログ運営について他にも記事を書いています。
ご覧になっていただけると幸いです。