そのお悩み解決します。
PageSpeed Insights(ページスピードインサイト)で
「レンダリングを妨げるリソースの除外」の項目がスコアを大きく低下させてるこの状態。
THE THOR(ザ・トール)なら対処法はとっても簡単です/
なぜならTHE THORにはSEOを最適化する設定が標準搭載されていて、レンダリングブロックを改善する機能があるから。今日はその対処法を紹介していきますよ~。

ページスピードの重要性
「ページスピード=サイトのページを読み込む速度」
Google・Yahoo!などで検索上位を狙うためのSEO対策としてサイトの高速化は重要ポイントの1つ。
読み込みが遅いとユーザーストレスにつながり離脱率(サイトから離れてしまう)を高め、収益性の低下にもつながる。Google公式からもページ表示に3.0秒以上かかると約53%のユーザーが離脱するという報告もあります。
【THE THOR】レンダリングを妨げるリソースの除外(PageSpeed Insights)を改善する方法
THE THORの搭載機能を使えば3分で完了するよ。
レンダリングブロック解消の手順
- WordPress管理画面で外観カスタマイズを開く
- SEO設定で「CSS非同期読み込み設定」を開く
- GoogleFontsやその他CSSにチェックを入れる
STEP0:改善前の状況からチェック
改善前のスコアはこんな感じ。


いちばんスピード低下の要因になっている「レンダリングを妨げるリソースの除外」の詳細をみると・・・
GoogleFontsの「Noto Sans JPのCSS(以下)」がかなり邪魔をしている様子。これをなんとかしたいわけです。
ついでにTHE THORでは「swiper.min.css(以下)」も対処できるので
この2つのレンダリングブロックを解消していくよ!

STEP1:WordPress管理画面で外観カスタマイズを開く
まずはWordPressダッシュボードで「外観」>「カスタマイズ」を開こう

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

STEP3:GoogleFontsやその他CSSにチェックを入れる
CSS非同期読み込み設定では、デフォルトで既にチェックされていると思うんですが、
今回は未選択の以下の項目を追加でチェックしましょう!
- GoogleフォントCSS(Noto Sans JP)を非同期読み込みにする
- SwiperCSS(swiper.min.css)を非同期読み込みにする

チェックを入れたら公開ボタンを押して「保存」
これで作業は完了です/
レンダリングブロックが改善されているか確認してみよう
再度PageSpeed Insightsで計測してみると、スコアが改善されているのがわかります!


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

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

こんなふうに簡単にレンダリングブロックを改善することができました~!
各CSSを非同期で読み込むことによってページを表示する際の無駄が省けたわけですね。
このようにTHE THORでは主要のCSS読み込みの同期あり・なしを設定できるようになっています。
とっても簡単で便利なので試してみてくださいね/