Google Fontsが原因で起こるサイトの表示スピードの改善方法について

Question

WordPressについて質問です

WP(WordPress)で作ったブログサイトをPageSpeed Insightsで計測した所、使用していないCSSの削減という項目で、モバイルでのサイト表示が遅くなっているとのことでした。

したいこと:

一番影響度の高い上記のCSSを削除して、ページ改善がしたいです。

行ったこと:

1.Googleサーチコンソール>ページエクスペリエンスのLCP（モバイル）で不良が出ました。（4s超）

2.PageSpeed Insightsで調べた結果、使用していないCSSの削減という項目がでたので、これが不良の原因でないかと思い3を実行しました。（※画像系の圧縮などは完了済み）

3.以下参照して、WPのプラグイン(Autoptimizer)からGoogle fontsの使用を解除しました。(https://satopi72.com/erase-google-fonts/)

結果:

• PageSpeed Insightsで変わらず同じCSSの箇所が指摘される

わからないこと:

• ブラウジングされる際にHTML/CSSがどのように読み込まれているか

備考:

• XServer上にWPをインストールしてブログを作成している。
• XServerへの接続権限はなく、操作出来るのはWPのみ。

質問

上記踏まえてサイトを改善する方法ご存知の方いましたら、教えていただけますでしょうか？

また以下、別途質問になります。

• ブラウジングされる際に使われていないCSSが読み込まれているか
• 使われていないCSSファイルを削除する必要がある場合にXserverからでなく、WPから削除できるか

Comments

[CHERRY]

質問の情報が少ないので、コードを見ていない第三者の判断は難しいと思います。

まずは、Webブラウザに表示されているHTML ソースコードを確認するところから始めましょう。

たとえば、https://www.site-convert.com/archives/1507 のように Google Chrome のデベロッパーツールでレスポンシブを有効にするとモバイル画面が確認できます。
この状態でどのようなCSS やJavascript を読み込んでいるのか確認できると思います。

Answer 1

わからないこと:

ブラウジングされる際にHTML/CSSがどのように読み込まれているか

Chromeのdev toolsのネットワークタブを開きますと、
リクエストされたリソースが順番にダウンロードされている様子が見れます。

基本的には、
HTMLで書かれた順番に、外部ファイルがダウンロードされて、ブラウザはそれを表示していきます。

詳しく言うと
外部ファイルのダウンロードと

あとは、ブラウザがHTMLの構造を解釈して、表示する準備がととのったら、
今度はスタイルシートを解釈して、表示していく感じです。（ざっくりすぎてすみません）

また、
お困りなのは、グーグルフォントの読み込みだと思いますが、
これは読み込みタイミングをずらすことができるかと思います。

@import をつかって、スタイルシートの中でグーグルフォントのスタイルシートを読み込むよりも、
link要素で、 rel="preload" as="style"　という記述で、

preloadの記述がある現在のページでレンダリングブロックを発生させずに非同期で読み込む

ことができるようです。

参考サイト：

Webフォント「Google Fonts」非同期で読み込んでページ表示を速くする方法

また、
警告が出ているそもそもの原因というのは、
「ページが最初に表示される範囲に、そのフォントが使用されているテキストがないから」このリソースは「初期表示には必要がない」という扱いになってしまっているんだと思います。

逆転の発想なのですが、
初期表示で表示される範囲に、そのフォントを使う場合、この警告は出なくなる可能性があります。

つらつらと書きましたが、いかがでしょうか。