THE THORで「レンダリングを妨げるリソースの除外」を改善する方法(GoogleFontsの非同期読み込みetc)

いっぬ
PageSpeed Insightsで「レンダリングを妨げるリソースの除外」をどうにかしたい…。

 

よわこ
こんにちは、よわこ(@yowaco_dayo)です!
そのお悩み解決します。

 

PageSpeed Insights(ページスピードインサイト)で

「レンダリングを妨げるリソースの除外」の項目がスコアを大きく低下させてるこの状態。

THE THOR(ザ・トール)なら対処法はとっても簡単です

なぜならTHE THORにはSEOを最適化する設定が標準搭載されていて、レンダリングブロックを改善する機能があるから。今日はその対処法を紹介していきますよ~。

31_001_レンダリングブロック

ページスピードの重要性

「ページスピード=サイトのページを読み込む速度」

Google・Yahoo!などで検索上位を狙うためのSEO対策としてサイトの高速化は重要ポイントの1つ。

読み込みが遅いとユーザーストレスにつながり離脱率(サイトから離れてしまう)を高め、収益性の低下にもつながる。Google公式からもページ表示に3.0秒以上かかると約53%のユーザーが離脱するという報告もあります。

 

 

 

【THE THOR】レンダリングを妨げるリソースの除外(PageSpeed Insights)を改善する方法

THE THORの搭載機能を使えば3分で完了するよ。

レンダリングブロック解消の手順

  1. WordPress管理画面で外観カスタマイズを開く
  2. SEO設定で「CSS非同期読み込み設定」を開く
  3. GoogleFontsやその他CSSにチェックを入れる

STEP0:改善前の状況からチェック

改善前のスコアはこんな感じ。

31_002_モバイル_改善前
31_003_PC_改善前
いっぬ
モバイル「21」はさすがにやばい(笑)

いちばんスピード低下の要因になっている「レンダリングを妨げるリソースの除外」の詳細をみると・・・

GoogleFontsの「Noto Sans JPのCSS(以下)」がかなり邪魔をしている様子。これをなんとかしたいわけです。

/css?family=Noto+Sans+JP:100,200,300,400,500,600,700,800,900(fonts.googleapis.com)

ついでにTHE THORでは「swiper.min.css(以下)」も対処できるので

…css/swiper.min.css(自ブログドメイン.com)

この2つのレンダリングブロックを解消していくよ!

31_004_レンダリングブロックの詳細

STEP1:WordPress管理画面で外観カスタマイズを開く

まずはWordPressダッシュボードで「外観」>「カスタマイズ」を開こう

31_005_WordPressカスタマイズ設定

STEP2:SEO設定で「CSS非同期読み込み設定」を開く

カスタマイズ項目からSEO設定を開いてCSS非同期読み込み設定を選択する

31_006_SEO設定2

STEP3:GoogleFontsやその他CSSにチェックを入れる

CSS非同期読み込み設定では、デフォルトで既にチェックされていると思うんですが、

今回は未選択の以下の項目を追加でチェックしましょう!

  • GoogleフォントCSS(Noto Sans JP)を非同期読み込みにする
  • SwiperCSS(swiper.min.css)を非同期読み込みにする
31_007_CSS非同期設定

チェックを入れたら公開ボタンを押して「保存」

これで作業は完了です

 

レンダリングブロックが改善されているか確認してみよう

再度PageSpeed Insightsで計測してみると、スコアが改善されているのがわかります!

31_008_モバイル_改善後
31_009_PC_改善後

項目をみると「レンダリングを妨げるリソースの除外」でかかっている時間も減っています。

31_010_モバイル_改善できる項目

 

さらに項目の内訳をみると、GoogleFonts(Noto Sans JP)とSwiperCSSが消えています。

いっぬ
おおお~ちょっとうれしい!
31_011_モバイル_レンダリングブロック(Google Fontsなくなってる)

 

こんなふうに簡単にレンダリングブロックを改善することができました~!

各CSSを非同期で読み込むことによってページを表示する際の無駄が省けたわけですね。

このようにTHE THORでは主要のCSS読み込みの同期あり・なしを設定できるようになっています。

とっても簡単で便利なので試してみてくださいね


 

\国内シェアNO.1の高品質

エックスサーバー公式サイト

-4/7まで実質半額!10日間無料お試しも-

Sponsored Link
31_アイキャッチ_【THE THOR】GoogleFontsの非同期読み込みでレンダリングを妨げるリソースの除外を改善する方法
最新情報をチェックしよう!

最強のWordPressテーマ「THE THOR」

本当にブロガーさんやアフィリエイターさんのためになる日本一のテーマにしたいと思っていますので、些細なことでも気が付いたのであればご報告いただけると幸いです。ご要望も、バグ報告も喜んで承っております!

CTR IMG