【はてなブログ】「CLS に関する問題: 0.1 超（モバイル）」を改善するのに行ったこと

「CLS に関する問題: 0.1 超（モバイル）」を改善した話

Googleサーチコンソールのページエクスペリエンス内にある、ウェブに関する主な指標の中で「CLS に関する問題: 0.1 超（モバイル）」が発生していました。

そのため、今回はCLSの改善と同時にページの表示スピードも改善する取り組みを行いました。

ここでは、それらの改善についてまとめてご紹介します。

こんな弱小ブログでも少しづつアクセス数も増えてきていた5月。

最近アクセス数が微妙に減っていることに気付いたので、サーチコンソールをよく見てみると、４月中旬頃から「CLS に関する問題: 0.1 超（モバイル）」が発生していました。

さらに「PageSpeed Insights」も確認してみると、パフォーマンスも30程度まで低下。

表示速度が遅いのはユーザー体験にもマイナスで、サイトから離脱する原因になるため早急に改善が必要です。

そもそもCLSとは何かというと「Cumulative Layout Shift」の略で、Googleが2021年から重要なウェブサイトのランキング要素として採用することを発表したものです。

CLSは、ウェブページを閲覧する際のレイアウトのズレを数値化したもので、サイトのSEO評価に大きな影響を与える問題です。

つまり、CLSが大きいほどサイトの評価が低下します。CLSの改善は重要な課題となっています。

ブログのカスタマイズを始めたころは、jQueryライブラリを「設定→詳細設定→headに要素を追加」に配置していました。

今回、CLSを改善する中で「GTmetrix」での測定結果のよると、表示の遅い原因が最初にjQueryライブラリが読み込まれることだとわかりました。

そこで「デザイン→カスタマイズ→ヘッダ→タイトル下」にjQueryライブラリの配置位置を移動すると、CLSと表示速度が劇的に改善されました。

また、はてなブログではもともとjQueryライブラリが組み込まれているのですが、そのバージョンが古くて読み込みが遅いため、別途最新バージョンのものを設定しています。

ただし、この配置位置の移動により、グローバルメニューが開かないなどの問題も発生することもあるため、配置位置をいろいろ試してみるといいですね。

jQueryと同じく、Font Awesomeの読み込みも表示速度が遅くなる原因となっていましたので、Font Awesomeの使用をやめることにしました。

そもそも記事の更新日時の表示のためだけにFont Awesomeを使っていたので、代わりにはてなブログに組み込まれているブログアイコンを使用することにしました。

はてなブログが提供しているソーシャルボタンが表示速度の遅さの原因となっていたため「デザイン→カスタマイズ→記事」のシェアボタンをすべてオフにしました。

その代わりにFont Awesomeを使わない軽量なソーシャルボタンを設置しました。

ちなみに、Twitterのシェア機能がうまく動作していなかったのですが、原因はタイトルに使用していた半角の「|」記号でした。

全角の「｜」記号に変更したところ、Twitterのシェアボタンが正常に機能するようになりました。

はてなスターも表示スピードが著しく遅くなる原因となっていました。

そこで、ブログトップページと一覧ページでは表示を削除し、記事ページでのみ表示されるようにカスタマイズしてみました。

はてなブログではカテゴリの階層化して表示する機能がなかったため、カスタマイズして表示していました。

しかし、このカスタマイズがレイアウトの崩れる原因となっていたため、カテゴリを整理して階層化のカスタマイズをやめることにしました。

CLS検証合格

いくつかの変更を試してみた結果「PageSpeed Insights」の結果も改善し、サーチコンソールでの検証も、5月末にみごと合格することができました！

...が、その後Googleアドセンスを少しいじった後、6月初めに再び「CLS に関する問題: 0.1 超（モバイル）」が表示される事態に。

現在もCLSの値は0.001と低い数値ですが「改善が必要なURL」になったまま。

CLSとの戦いはまだまだ続くようです...

この記事を書いた翌日に、ウェブに関する主な指標が問題なく回復しました！

「改善が必要なURL」が表示されると明らかに表示回数が減少するため、これからも慎重に対策を行っていく予定です。