映画ときどき海外ドラマ

映画のあらすじ、たま~に雑学

【コアウェブバイタル】はてなブログで出来る対策は?表示速度を改善するには?

スポンサーリンク

【コアウェブバイタル】はてなブログで出来る対策は?表示速度を改善するには?

2021年6月中旬から、Google検索のランキング要因にコアウェブバイタル(Core Web Vitals)が組み込まれます。ユーザー体験を損なうようなページは、検索順位が上がりにくくなるよ、という指標です。

この記事では、コアウェブバイタルについて説明したのち、はてなブログでできる対策についてご紹介します。

 

【コアウェブバイタル】3つの指標「LCP」「FID」「CLS」とは?

これまでのGoogle検索は、記事のクオリティ、被リンクの数、運用年数などが検索順位を決めるおもな指標になっていました。

2021年6月中旬からはこれらに加え、“ユーザーの使い勝手”に関わる指標もランキング要因に加わることになります。それが、コアウェブバイタル(Core Web Vitals)です。以下の3つの指標があります。

LCP(Largest Contentful Paint)とは?

意味は、「最大コンテンツの描画」。

そのページにおいて、メインとなるコンテンツが読み込まれるまでにかかる時間のことです。いわゆる表示速度のこと。

 

ページ読み込みから、2.5秒以内が“良好”とされます。この数値は、ページごとに採点されます。

 FID(First Input Delay )とは?

 意味は、「最初の入力までの遅延」。

ブログに訪問したユーザーが、クリック、スクロールなど、最初にキー入力を行なうまでの応答時間、を指します。

 

0.1秒未満が“良好”と判断されます。

CLS(Cumulative Layout Shift )とは?

意味は、「ページの視覚安定性」。

ページにアクセスすると、まず文章が表示され、おくれて画像が表示され、レイアウトにずれが生じることがあります。

あとから画像が出てきて、文章が移動して、押すつもりのない広告をクリックしてしまうこと、ありますよね。

こういったレイアウトのずれを数値化し、この値が0.1未満だと“良好”と判定されます。

はてなブログでできる対策とは?表示速度を改善するには?

Googleが提供する「Google PageSpeed Insights」(ページスピードインサイト)を使うと、webページの読み込み速度を計測することができます。

developers.google.com

「 PageSpeed Insights」で計測すると、コアウェブバイタル(LCP、FID、CLS)がどう評価されているか、も見ることができます。

 

【コアウェブバイタル】はてなブログで出来る対策は?表示速度、LCP、FID、CLS

 

黄緑が「良好」、黄色が「改善が必要」、が「低速」を示しています。何色がどのぐらいの割合を占めているかで、コアウェブバイタルの評価をチェックできます。

はてなブログは、デフォルトの表示速度がかなり遅め。少しでもスコア改善に役立つ対策を、いくつかご紹介します。

画像のファイルサイズを小さくする、画像を圧縮する

はてなブログの編集画面から「写真を投稿」すると、自動的に1200ピクセル(長辺)になってしまいます。1200ピクセルって、相当重たいです。

そこで、はてなフォトライフの設定をデフォルトの800ピクセル以下にして、はてなフォトライフ経由で画像をアップします。

 

(⇦ 当ブログの場合、フォトライフの設定を640ピクセルにして、640✕480のサイズでアイキャッチ画像を作っています。フォトライフにアップする前に、1回圧縮をかけています)

ブログ村パーツを外す、ツイッターのタイムラインを外す

外部サービスと連携していると、ページを読みこむ際に、外部ファイルを読み込むことになります。これは、大きく表示速度を減速させることになります。

「ブログ村パーツ」は、なるべくなら外すべき。ただし、「ブログ村パーツ」がないと集客が難しいという人は、せめて1個だけにします。

 

埋め込み機能を使って、自身の最新ツイートをサイドバーに表示させている人も見かけます。これも大きく表示速度を下げてしまいます。

 同様に、ブログ村のリアルタイムランキングを埋め込んでいる場合も、外します。

YouTubeの埋め込み動画は、なるべく使わない

YouTubeは、とても情報量の多いサービスです。ブログにYouTube動画を埋め込むと、それだけで「PageSpeed Insights」のスコアは、10~20点ちかく下がってしまいます。

 

なるべくなら、使わないほうがよいでしょう。どうしても埋め込みを使いたい場合は、ページが表示されるときに読みこむのではなく、クリックされてから読み込むカスタマイズを使います。

 

表示速度の改善には、「ABCウェブエンジニアblog」さんの方法がいちばん効果がありました。

webabc.hatenablog.jp

 

はてなブログで実装するための情報がやや不足しているので、少しだけ補足します。

コードは、「ABCウェブエンジニアblog」さんの記事の、「サムネイルのみ表示、クリックでYoutubeを読み込む方法」という箇所をご参照ください。

 

CSSのコードを、「デザイン」⇨「カスタマイズ」⇨「デザインCSS」に貼る。

HTMLのコードを、「編集見たまま」モードの「HTML編集」から、もともとの埋め込み動画があった場所に貼る。

 このとき、2行目のコードを書き換えなくてななりません。下記の黒字で示した部分は、YouTube動画固有のコードを貼る必要があります。

 <iframe data-src="https://www.youtube.com/embed/EweclzksFxo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

 

実際にYouTube動画を再生すると、画面上部に以下のようなコードが示されます。

 

 

【コアウェブバイタル】はてなブログで出来る対策は?表示速度をユーチューブの埋め込み、重い

 

 「https://www.youtube.com/watch?v=T0W4I0mt_fs

=以降の文字列が、その動画固有のコードです。「EweclzksFxo」を固有のコードに書き換え、HTMLコードを「HTML編集」から貼り付けます。

 

はてなブログで実装すると画像サイズは小さくなり、再生するためには2回のクリックが必要となります。でも、スコア改善のためには必要な措置です。

余計なカスタマイズ外し、使っていないCSSを削除する

「デザイン」⇨「カスタマイズ」⇨「デザインCSS」と進み、使っていないCSSを削除する。

 

使わずに済むカスタマイズは、できるだけ削除します。

たとえば、【日付の自動更新】。これは、「記事下」「デザインCSS」などにコードを書き込むことになります。でも、各記事のアイキャッチ画像の下に、手動で

“この記事は、2021年6月2日に更新しました”

のように入力すれば、更新をお知らせすることができます。

 

たとえば、【上に戻るボタン】。これも、「ヘッダ」「デザインCSS」にコードを貼るカスタマイズです。でも、PCの場合はスクロールバーやキーボードの[PageUp]で戻せます。スマホの小さな画面では、【上に戻るボタン】はむしろ邪魔です。

当ブログも以前は設置していましたが、必要ないと判断して削除しました。

シェアボタンを軽量化する

はてなブログの初期設定のシェアボタンは激重です。できるだけ外します。「はてなスター」に関しては後述します。

【コアウェブバイタル】はてなブログで出来る対策は?表示速度、シェアボタン、はてなスター、はてなブックマーク

以前、当ブログは以下のシェアボタンを使っていました。当ブログのデザインテーマ「Silence」の開発者さんが作ったシンプルなシェアボタンです。シンプルでデザインもかっちょいい!

【コアウェブバイタル】はてなブログで表示速度を改善するには?シェアボタンsilence

しかし、これは「Font Awesome」というWebアイコンで作られており、使用するためには外部ファイルを読み込まなくてはならないんです。やっぱり表示速度に影響するんですよね。

そこでたどり着いたのが、「つゆきのこさん」のシェアボタン。素晴らしいのは、はてなにもともと用意されている専用のWebアイコンを使っていること。これで外部ファイルを読み込まずに済み、速度を改善できます。

(※このページの記事本文下にあるシェアボタンです)

note.com

わたしの場合、サービスの利用人口の少ない「Facebook」と「poket」のアイコンを外し、さらに軽量化を図っています。

 

はてなスターを、トップページだけ外す

表示速度の関係で、はてなスターを外している運営者さんはよく見かけます。ただ、気軽に“いいね”の気持ちを伝えられるので、できれば残しておきたいんですよ。

 

そこで、個別の記事のはてなスターは残し、トップページのスターだけ消すコードを貼ります。「デザイン」⇨「カスタマイズ」⇨「デザインCSS」

.star-container {
display:none;
}

 これだけでも、だいぶ違ってきます。

 はてなのいらない機能を無効化する

「設定」⇨「詳細設定」⇨「ブログ表示」より、不必要な機能を無効化します。

【コアウェブバイタル】はてなブログで出来る対策は?コメント欄、キーワードリンク

 

  • トップページは「一覧形式」にチェックを入れる(PRO限定)。
  • トップページの記事数・・・少ないほうがアイキャッチ画像のぶんだけ軽くなります。ただ、少なすぎても読者さんが新着記事を探す手間がかかります。7~10記事がおすすめです。
  • キーワードリンク、はてなによる広告、ヘッダ、フッタを表示しないにチェック(PRO限定)。特にヘッダはFID(最初の入力までの遅延)にも関わってきますので、必ず非表示にします。
  • はてなブックマークのコメント・・・ここは好みによるでしょうが、当ブログではSEOで闘ってゆくために非表示にしています。

ブログカードは使わない、文字の装飾・拡大もできるだけ使わない

内部リンクを貼るときは、ブログカードの使用はおさえ、できるだけテキストリンクを使います。両者の違い、貼り方については下記の記事でくわしく解説しています。

HTMLに色をつけたり、HTMLを大きくすることも、それだけCPUに命令するタスクを増やすことになります。

 実際、大手のポータルサイトを読むと、文字の装飾・拡大はおこなってません。そもそも、色が派手だと読みづらいんですよ。私も、使うとしたら黒の太字ぐらいです。

 

【はてなブログ】コアウェブバイタルのCLS対策? 「Lazy Load」(画像の遅延読み込み)に対応!

コアウェブバイタルの中でも、はてなブログが特に低くなるのが、CLS(レイアウトのズレ)のスコアです。

 

 テキストに比べて情報量の多い画像は、読み込みに時間がかかります。そのため、テキストだけが先に表示され、画像は遅れて表示され、レイアウトにズレが生じます。

これを解消するのが、「Lazy Load」(画像の遅延読み込み)という技術です。

あらかじめ、画像の高さ・横幅を指定しておき、画像が入るスペースを確保しておこうという方法です。

【コアウェブバイタル】はてなブログで出来る対策は?表示速度、Lazy Load、画像の遅延読み込み

出典:https://staff.hatenablog.com/entry/2021/06/09/162329


はてなブログは、これまでシステム内に「Lazy Load」が実装されていませんでした。

 

でも、2021年6月9日、はてなの開発さんから大きな発表がありました。「Lazy Load」に対応し、レイアウトのズレを生じさせないような仕様になったのです。

 表示速度の改善に大きくつながる、うれしい発表です。

 

ただし、この仕様が適用されるのは、6月9日以降の記事のみとなります。

 はてなフォトライフ経由でアップした過去記事の画像については、運営者が修正する必要があります。

過去記事を「HTML編集」からひらき、imgタグに、

「 width="640" height="480" loading="lazy" 」

のような、画像のサイズ情報を示すwidth(横幅),height(高さ)の数値を指定する必要があるのです。

 

 

具体的な修正の方法を解説します。

過去記事をひらき、「HTML編集」から、imgタグをチェックします。

【修正前の画像タグ】

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/e/entafukuzou/20210526/20210526064918.jpg" alt="【はてなブログ】ブログカード(過去記事リンク)を,本文直下にベタ貼りすべきでない2つの理由とは?" title="" class="hatena-fotolife" itemprop="image" />

 

画像のサイズがわからない時は、自分のブログの過去記事を表示させ、

画像を右クリック ⇨ 「Googleで画像を検索」をクリック。

【コアウェブバイタル】はてなブログで出来る対策は?表示速度を改善、アイキャッチ画像のサイズ

すると、画面のように画像サイズが確認できます。width=”●●" の中に横幅、 height=”△△”の中に高さを入力し、以下のように付け足します。

 

 【修正後の画像タグ】

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/e/entafukuzou/20210526/20210526064918.jpg" alt="【はてなブログ】ブログカード(過去記事リンク)を,本文直下にベタ貼りすべきでない2つの理由とは?" width="640" height="427" loading="lazy" title="" class="hatena-fotolife" itemprop="image" />

 

記事数の多い人は、過去記事ぜんぶ修正するのは大変です。主力記事のみの修正に留めるか、できるときに少しずつ修正してゆくのがよいでしょう。

まとめ

WordPressでは特に対策をしなくても、「PageSpeed Insights」のモバイルスコアは、60点は越えます。

しかし、初期設定の表示速度が遅いはてなブログでは、対策をしないと20点を下回ることも珍しくありません。

  • 同じ趣味をもつブロガーさんと交流したい(コメント機能)
  • デザインを綺麗なものにしたい(カスタマイズ)
  • ブログ村ランキングで上位を取りたい(ブログ村パーツ)
  • たくさんの人に読んでもらいたい(シェアボタン)
  • 広告を貼って、収益を得たい(アドセンス広告、アフィリエイト広告)

はてなブログでは、すべての欲求を満たそうとすると、どうしても表示速度が遅くなってしまいます。それは、モバイルユーザーに大きな負担をかけることになります。

優先順位に合わせて、外せるブログパーツは外す。これが、はてなブログの表示速度を改善させるカギとなります。