Change Forward

「かわる」をアシストする

はてなブログの表示速度は遅い!早くする裏技とは

 

はてなブログの表示速度は遅い!早くする裏技とは

 

はてなブログの表示速度は遅い!早くする裏技とは

 

WordPressに比較すると、ブログサービスの1つであるはてなブログは表示速度が遅くなりがちといわれています。 

 

自分で設定をカスタマイズできる範囲が少なく、無駄な処理がされてしまっているところが主な原因であり、対策に頭を悩ませている方も多いかと思います。

 

表示速度はSEO(検索で上位に表示するための技術)でも重要視されており、表示に時間がかかってしまうと、他のサイトよりも検索順位が低くなってしまいます。

 

そこではてなブログの画面表示速度を上げる裏技をご紹介します。

 

【この記事を読むメリット 】

  • あまり知られていない方法で速度改善ができる
  • SEOの順位が上がる

 

人と同じレベルでは差別化できない。人よりも上を。

 

それでは今回のコンテンツです。

 

   

前提:WEBページの表示方法

※ここの内容はわからなくても、設定はできます。

軽く目を通していただくだけで大丈夫です。

 

ブログを含むWEBページは、2つのファイルに情報を分け、HTMLファイル・CSSファイルをそれぞれ別に作ることが一般的です。HTMLを読み込む際にCSSを参照することで、ページを表示します。

 

専門用語を簡単に説明すると、それぞれ

 

  • HTMLファイル・・・記事の文章やブログのタイトル名など、内容に関する情報
  • CSSファイル・・・文章の配置やデザインに関する情報

 

となります。

 

私たちがWEBページを見る際には、裏でこの2つのファイルが読込まれていて、画面が表示されていると言えます。

 

↓詳しく知りたい方はこちら↓

【画像でわかる】HTMLとCSSの役割

CSSを編集するときの書き方入門

 

はてなブログのつくりも同様です。

 

私たちの書いている記事(HTML)を画面に表示する際に、デザイン(CSS)の情報を読み込んで、配置や色などを整えているわけです。

 

 

無駄な通信を減らそう

実はここで1つ、表示が遅くなる問題が発生しています。

 

はてなブログの標準デザイン(CSS)読込みは、ひとつ余計な通信をしているのです。

 

今回の対策でこの余計な通信をなくし、表示の速度を高速化します。

 

  1. 自分のブログのCSSファイルを知る
  2. CSSファイルの中身をコピーする
  3. HTMLのヘッダーに張り付ける

 

わざわざ通信をして読込んでいたCSSのデザイン情報を、HTML側に書き込んでしまうやり方です。

 

極限まで効率的に!

 

 

1.自分のブログのCSSファイルを知る

まずは、いつも自分のサイトが読み込んでいるCSSファイルを調べます。

 

 「デザイン」から「カスタマイズ」⇒「デザインCSS」をクリックし、「@import」のあとのURLをコピーします。

 

はてなブログの表示速度は遅い!早くする裏技とは

 

smoothのデザインの場合、下記の部分です。

 

/* <system section="theme" selected="smooth"> */
@import "/css/theme/smooth/smooth.css";
/* </system> */

 

これを「https://blog.hatena.ne.jp」のうしろにつなげてください。

 

https://blog.hatena.ne.jp/css/theme/smooth/smooth.css

 

となります。

 

 

2.CSSファイルの中身をコピーする

先程のURLで検索してください。CSSファイルの中身が表示されます。

 

はてなブログの表示速度は遅い!早くする裏技とは

 

これをctrlキー + aキーで全選択し、コピーしてください。

 

 

3.HTMLのヘッダーに張り付ける

先ほどコピーしたCSSのコードの前に

 

<style>

 

 

をつけ、うしろに

 

</style> 

 

を付けます。下記のようなコードになります。

 

<style>
(手順2でコピーしたCSSのコード)

(これまで自分で編集してきたCSSコード)
</style>

 

青字は自分でCSSを編集していた場合のみ記載してください。

 

最後に、このコードを「デザイン」⇒「カスタマイズ」⇒「ヘッダ」のHTMLとして貼り付ければ完了です。

 

はてなブログの表示速度は遅い!早くする裏技とは

 

※レスポンシブ対応の場合は、デザインCSSに

 

/* Responsive:yes */

 

だけ記載しておいてください。

 

簡単、便利。

 

 

速度改善は重要

今回の速度改善は、標準ではCSSのデザイン情報を参照するために1つ余計な通信をしているところを、HTML側にもってきてしまうことでなくすという対応でした。

 

表示速度は閲覧者が画面を見るときにも重要であり、また検索の表示順位を上げるためにも有効な方法となっています。

 

動作環境・ 設定により結果に差はあるようですが、トライしてみて頂ければと思います。

 

2019.7.27 公開