こんにちは、カワルンです。
このブログで2度にわたり書いてきたサイトスピードの改善方法。
3カ月間いろいろ試してきましたが、簡単には改善しません。
そこでまずは指標の一つであるCLSを改善することにしました。
今回はやっとCLSのスコアが良好になったので紹介します。
CLSとは
CLS(Cumulative Layout Shift)とは「累積レイアウト変更」という意味で、レイアウトのずれを表します。
例えばサイトを訪問したときに、広告や画像が後から読み込まれてガクッとレイアウトがずれる体験をしたことはありませんか?
私はまとめサイトでよく見かけるのですが、誤クリックをしてしまうなど煩わしさを感じています。
たとえ意図せずともCLSが発生していることもあり、CLSのスコアでチェックできます。
スコアがゼロに近いほどズレが少なく良いことになります。判定基準は以下の通りです。
CLSのスコアをチェックする方法
CLSのスコアはPageSpeedInsightsやGoogleSearchConsoleでチェックできますよ!
私のブログではPCは大丈夫なのですが、モバイル版でCLSが多く発生しており『要改善』となっていました。
実は以前、このブログのCLSの数値は1.7でした。
画像ひとつひとつに幅と高さを設定したことで、ずいぶん改善されました。
画像に幅と高さを指定することで、画像が読み込まれるまでスペースを確保してくれるのです。
しかしあともう一息がなかなか改善できず。試行錯誤してみました。
CLSが発生する原因
もう一度私のサーチコンソールの表示をチェックしてみましょう。
すべてのページにおいて結果が「改善が必要」になっています。
他の方のサーチコンソールの画面をチェックしたところ「良好」「改善が必要」「不良」が混じっている方が多かったです。
ということはブログデザインに問題があるのでは?と思うようになりました。
そこでPageSpeedInsightsでコンテンツが表示されるまでの過程をチェックしてみました。
ヘッダー画像が遅れて読み込まれており、ガクッとレイアウトがずれているのを発見しました。
CLSの改善方法
先ほども書いたように、CLSの改善策のひとつとして画像に幅と高さを設定する方法があります。
つまりヘッダー画像の幅と高さを指定すれば解消するのではと考えました。
はてなブログ向けヘッダー画像の高さ指定
ここからは「はてなブログ」の方向けの対処方法です。
ヘッダー画像の高さ指定をしたのですが、上手に設定できませんでした。
ということでdisplay:noneを使って一旦、ヘッダー画像を非表示にしてから新たにヘッダー画像を設置することにしました。
はてなブログ管理画面の「デザイン」⇒「スマートフォン」⇒「ヘッダ」⇒「タイトル下」に以下のコードを入力しました。
(ブログURL)(ヘッダー画像のURL)(ヘッダー画像の高さ)はそれぞれ入力してください。
<style type="text/css"> .header-image-wrapper { display: none; }</style> <h1 class="headernew"> <a href="(ブログURL)"> <img src="(ヘッダー画像のURL)" height="(ヘッダー画像の高さ)px" alt="ブログタイトル" width="100%"> </a> </h1>
上記のコードでもうまく高さ指定できない場合は、設定画面デザインの「タイトル画像」⇒「PCと同じ画像を表示する」にチェックを入れると解決しました。
PageSpeedInsightsで再度チェックしてみました。ヘッダー部分が読み込まれるまで、ヘッダー画像のスペースを確保しているのがわかります。
PageSpeedInsightsのスコアもチェックしてみます。28日間の集計結果なのですぐに数値が改善されるわけではありません。
数日たってから確認したところ、『良好』と判定されました。
おわりに
今回はCLSの数値が改善した報告でした。
ブログを更新しながらメンテナンスをしていくのはなかなか大変です。
しかしまだFCPの数値は要改善なので、ゆっくり記事更新しながらサイトの表示速度の改善を引き続き行う予定です。
サイトの表示速度を上げるために私が行った方法は、以下の記事を読んでみてくださいね!