MENU
  • プロフィール
  • Web制作パートナー募集
  • ブログ
WordPressサイト改善・SEO内部対策
SenriWeb
  • プロフィール
  • Web制作パートナー募集
  • ブログ
\ 無料相談受付中 /
サイト改善の相談をする
SenriWeb
  • プロフィール
  • Web制作パートナー募集
  • ブログ
  1. ホーム
  2. WordPress
  3. ページ読み込み速度改善(フォント変更&プラグイン削除&コンタクトフォームCSS読込ませない編)

ページ読み込み速度改善(フォント変更&プラグイン削除&コンタクトフォームCSS読込ませない編)

2022 7/09
WordPress
2021年4月17日 2022年7月9日

前回の続きです。

「レンダリングを妨げるリソースの除外」と出ているので、何かがレンダリングを妨げているらしい。

「レンダリング」は簡単に言うとWebサーバーから受け取ったデータをブラウザが見た目を整えること。

/css?family=… (fonts.googleapis.com)とあるのでどうやらフォント関係のよう。Webフォントは重いとか聞いたことあるしちょっと変更してみよう。

フォントはWebフォントのNotoSansJpを使用していたので、サンズセリフ(ゴシック体)に変更

すると、/css?family=… (fonts.googleapis.com)の項目が消えました。(他にアクセス解析系のタグが残ってる。その改善は後述。)

目次

フォントによる読み込み速度の違いを比較

今回使用しているテーマ「Snow Monkey」では標準のフォントが下の画像の通り。この中のゴシック体系のフォントを一通り試しました。結果、一番速いのはサンセリフ(ゴシック体)でした。

ゴシック系フォント測定結果
サンセリフ(ゴシック体)64
Noto Sans JP54
M PLUS 1p59
パフォーマンススコア測定結果(使用サイト:https://developers.google.com/)

オシャレなサイトというよりかは、みんなが読みやすいサイトになればうれしいので、「よく使われているフォント」且つ「表示が速い」サンセリフを採用することにしました。

プラグイン削除

他のレンダリングを妨げる要因はgoogletagmanagerの読み込み関係でした。管理画面からGoogleアナリティクスのような集計結果を確認できるMonsterInsightsというプラグインを消したところ…

最初の表示(First Contentful Paint)が3s切りましたね!

コンタクトフォーム用のCSSを読み込まないようにする

問い合わせページにはContact Form 7を使っていて、問い合わせページ以外でもコンタクトフォームのCSS読み込んでいるので、問い合わせページ以外では読み込まないようにしてみた。

下記のコードをfunctions.phpに記述すると成功する。

//Contact Form 7を問合せページのみに読み込ませる
add_action( 'wp', function() {
  if ( is_page( 'contact' ) ) return;
  add_filter( 'wpcf7_load_js', '__return_false' );
  add_filter( 'wpcf7_load_css', '__return_false' );
});

測定結果は…

90まで上がりました。他触ってもあまり変わらなさそうなのでこの辺にしておきます。

参考サイト

あわせて読みたい
Error 403 (Forbidden)|「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 403エラーページです。用語の意味を「ざっくりと」理解するためのIT用語辞典です。
あわせて読みたい
Google Fontsを使う限りPage Speedは上がらない | tm23forest.com technology and mathematics
AgoHack
[Contact Form 7] 必要なページのみCSSとJSを読み込む PageSpeed Insightsの「レンダリングを妨げるリソースの除外」という指摘に「Contact Form 7」のCSSが出てくる。「Contact Form 7」のCSS...
WordPress
よかったらシェアしてね!
SenriWeb 山田
ITエンジニア
学生時代にプログラミングを学び新卒で2年半メーカーに勤務。2020年にWeb業界でフリーランスエンジニアとして活動開始。目的を意識したWeb制作・改善を行っています。
資格:応用情報技術者
プロフィールを見る
人気記事
  • 【NumLockキー押し間違い対処法】BackSpaceに変換して解決【Win10】
  • YouTube埋め込みページを高速化する方法【Lite YouTube Embedでiframeの遅延読み込み】
  • 【SWELL高速化】SWELLの機能を活用して効率的に高速化!ページスピードの見方も解説
  • WordPressエラー「更新に失敗しました。 返答が正しい JSON レスポンスではありません。 」の対処事例
新着記事
  • 【SWELL高速化】SWELLの機能を活用して効率的に高速化!ページスピードの見方も解説
  • YouTube埋め込みページを高速化する方法【Lite YouTube Embedでiframeの遅延読み込み】
  • 【コピペ可能】TCDテーマAMOREで使えるCSSコード集【WordPressカスタマイズ】
  • 新着記事をショートコードで表示させる【swiper.jsでスライダー型に】
目次
目次