Q&A
そのまえに、その双方を切った場合、あなたの思惑通り高速になるんでしょうか
前提・実現したいこと
現在、サイトを一つ完成させ、その軽量化にいそしんでおります。
pagespeed insightsで計測したところ、結果はびっくりの5…
問題点は分かっています
・埋め込みYouTube
・Googleフォント
の二点のようです。
実機でそのつどキャッシュを削除して確認しているのですが、
体感としてはそこまでストレスではないものの、スコアが低すぎて気になるので質問させて頂きました。
発生している問題・エラーメッセージ
埋め込みYouTubeについて
こちらは、ただ埋め込みをしていたので、
iframe内に、loading="lazy"
HTML
1<iframe loading="lazy" src="https://www.youtube.com/embed/53-NjdnXXXcontrols=0?&rel=0&?showinfo=0" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
このようにし、キャッシュを削除してからもう一度実機で確認したところ、体感速度としてはそこまで気にならなくなりました。
しかしスコアは低評価のままでした。
Googleフォントについて
こちらは、GoogleコンソールのShow Coverageで確認したところ、
文中のテキストに用いている、Notoが、
こんな感じでなんだかむだに読みこまれているのは分かったのですが、これを防ぐ策はあるのでしょうか？
この 120個のunicode-rangeです。
head内には、このように記述しています。
HTML
1<!-- Noto --> 2 <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;900&display=swap" rel="stylesheet">
ここまで色々調べたのですが、
Insightsスコアの両立は諦めようという見解とそうでないものと
堂々巡りだったような気もするのですが、
まずは
埋め込みYouTubeについて
→これで記載した遅延読み込みは書き方は合ってるはずなのにスコアが改善しないのは認知されていないからでしょうか。それとも書き方が悪い…？
Googleフォントについて
→ただ使えばいいと思っていたGoogleフォントですが、皆さん何かこれに対して対策はしていますか？
何かヒントだけでも頂けますと幸いです。。
よろしくお願いします。
2021/03/29 10:27追記
- ご指摘いただいた通り、この問題点二個を消すと
こんな感じでこれ以上の数値が何回か出ました
しかし実際またもとに戻して、キャッシュを削除して
またInsightsスコアでみたところ
でした。
しかし、
今度F12の検証のほうでみてみると
早いんですがこっちをみて安心するなというPageSpeed Insightsさんからのメッセージでしょうか
～～～～～～
- ラボデータがこちらです。
- 改善できる項目で一番大きかったのがNotoです。
- YouTubeも相当かかっていることを教えてくれています
- こちらも10秒もかかっているのですが、まずは徐々に問題を解決していこうとおもって、ここは保留にしました
5って相当低いですけどpagespeed insightsって同じ物を計測してもスコア変動したりしますけど数回思考して全て5以下だったんでしょうか。
指摘された項目はどのようなものですか？
y_waiwaiさん
ありがとうございます。追記させて頂きました。
スコアは、60点～70点以上になったのですが、開発者画面では、1秒くらいしかかかっておらず、ぜひそっちを信じたいところなのですがどっちを信じて良いか分からないのとスコアが低すぎて心配になっておるところです…
K_3578さん
ありがとうございます。数回やったら今度4という驚愕の数字をたたき出しました。
やっぱり、YouTubeの埋め込み、Notoフォント、ほかにも、原因があるのかもしれません。が…全部考えると絶望するので徐々に、順番に、やっていこうという魂胆です。
maisumakunさん
ありがとうございます。指摘された項目を、画像で追記させて頂きました。
やはり主に、
「フォント表示の CSS 機能を使用して、Web フォントの読み込み中にユーザーがテキストを読めるようにしてください。」ということと
「第三者コードの影響を抑えてください 第三者コードによってメインスレッドが 3,210 ミリ秒間ブロックされました」でYouTubeのことが
メインで、あとは
「JavaScript の実行にかかる時間の低減 5.0 秒
JavaScript の解析、コンパイル、実行にかかる時間の短縮をご検討ください。配信する JavaScript ペイロードのサイズを抑えると効果が見込めます。」
ということが原因のようです。
Youtubeの埋め込みに関しては遅延読み込みの他によく使われるのは予め代替画像を用意しておき、
クリックして初めて動画を読み込むような方式が軽量化策として使われてると思います。
調べれば出てくるので一度試してみては。
K_3578さん
ありがとうございます。代替画像clickで読みこみのscriptをいれたところ、
40点ほどになりました。
@質問者さん
おー、思ったよりマシになりましたね。
とは言え、自分はこういう方面は大した知識ないのでmiyabi_takatsukさんの回答を
参考にされた方がよろしいと思います。
回答1件
0
ベストアンサー
まず、
PageSpeed Insightsはかなり厳しめの採点です。
100点を取るのは至難の業です。
また、方針や考え方の回答になってしまうことはご承知おきください。
さて、
今回質問に上がっている問題に関してですが、
基本的に、読み込み遅延が有効な手段となりそうです。
YouTube埋め込み
これは、iframeに属性をつけようがなにかろうが、
src属性に、リソースのパスを記載した時点で、読み込みが走ります。
なので、
JavaScriptによって、
ページのリソースが全て読み込まれた上で、そのYouTubeブロックがビューに入った時点で、
DOMツリーにiframeを挿入する、といった、
コンテンツ自体の読み込み遅延というか、必要な時に初めて表示させる、といった工夫が必要になるかと。
そうしないと、PageSpeed Insightsの注意を除くことはできないものと思われます。
Webフォント
これに関しては、かなり対応は難しいものとなります。
究極を言うと、使っている文字以外はフォントに含めるなとの注意が出ているかと思います。
これが、ローマ字や数字に限定されているなら、可能ですが（Googleフォントでは、文字を限定したフォントファイルを出力してくれるAPIが提供されています）、
流す日本語文字でそれをやるのはそれは不可能です現実的ではありません。
ただ、見出しやタイトルなど、決まった文字に使うという状況であれば、その限りではありません。
Googleフォントであれば、上記APIにて、限定した日本語文字のみのフォントを出力すればいいです。
Googleフォント外の日本語フォントであっても、自分でサブセット化した専用フォントを作っておいておくという方法もあります。
また、有料のフォント配信サービスではテキストを読み込んで、数を削ったフォントを取得できる方法もあるようです。
（maisumakunさん、情報ありがとうございます）
ただし、いずれも、有料サービスであったり、GoogleのAPIで、日本語の決まった文字のフォントを取得するよう、スクリプトを組まねばならない、フォントファイルを改めて自身で作成しなければならない、など、ハードルは格段に上がるでしょう。
以上を踏まえた時、なので、これに関しては、
PageSpeed Insightsで減点されないためには、そもそもWebフォントを使わないのが一番アンパイとなります。
なので、どうしても日本語付きWebフォントを使うなら、
その減点は泣き寝入りするか、
頑張って、上記の施策をするしかないかと。
もしくは、YouTube同様、読み込み遅延を行うか、です。
ただし、読み込み遅延なので、一瞬、フォントが適用されていない瞬間がどうしても見えてしまうでしょう。
（読み込み前は、透明とかにしておいて、フォントが読み込まれたら、通常表示にする、などの工夫はあり）
投稿2021/03/29 01:40
編集2021/03/29 02:33
総合スコア9528
> 日本語ではそれは不可能です。
有料のフォント配信サービスではテキストを読み込んで削る例もありますし、タイトルで数文字しか使わないのであれば自分でサブセット化した専用フォントを作っておいておくのもありです。
コメントありがとうございます。
そのことも踏襲させていただきます。
皆さんありがとうございます。
NotoJSは、全体的にpタグに使っているので、いるものだけ残すというのは、確かに現実的ではありませんでした。
動画に関しては、代替テキストを置いておいて、それをクリックしてもらって、動画が再生されるようにしたところ、こちら40点から50点代をたたき出してくれるようになりました。
皆さん、今回は大変勉強になりました。
学びとさせて頂きます。ありがとうございます。
あなたの回答
tips
プレビュー
