はてなブログの表示速度は遅い！早くする裏技とは
WordPressに比較すると、ブログサービスの１つであるはてなブログは表示速度が遅くなりがちといわれています。
自分で設定をカスタマイズできる範囲が少なく、無駄な処理がされてしまっているところが主な原因であり、対策に頭を悩ませている方も多いかと思います。
表示速度はSEO（検索で上位に表示するための技術）でも重要視されており、表示に時間がかかってしまうと、他のサイトよりも検索順位が低くなってしまいます。
そこではてなブログの画面表示速度を上げる裏技をご紹介します。
【この記事を読むメリット 】
- あまり知られていない方法で速度改善ができる
- SEOの順位が上がる
人と同じレベルでは差別化できない。人よりも上を。
それでは今回のコンテンツです。
前提：WEBページの表示方法
※ここの内容はわからなくても、設定はできます。
軽く目を通していただくだけで大丈夫です。
ブログを含むWEBページは、2つのファイルに情報を分け、HTMLファイル・CSSファイルをそれぞれ別に作ることが一般的です。HTMLを読み込む際にCSSを参照することで、ページを表示します。
専門用語を簡単に説明すると、それぞれ
- HTMLファイル・・・記事の文章やブログのタイトル名など、内容に関する情報
- CSSファイル・・・文章の配置やデザインに関する情報
となります。
私たちがWEBページを見る際には、裏でこの２つのファイルが読込まれていて、画面が表示されていると言えます。
↓詳しく知りたい方はこちら↓
はてなブログのつくりも同様です。
私たちの書いている記事（HTML）を画面に表示する際に、デザイン（CSS）の情報を読み込んで、配置や色などを整えているわけです。
無駄な通信を減らそう
実はここで１つ、表示が遅くなる問題が発生しています。
はてなブログの標準デザイン（CSS）読込みは、ひとつ余計な通信をしているのです。
今回の対策でこの余計な通信をなくし、表示の速度を高速化します。
- 自分のブログのCSSファイルを知る
- CSSファイルの中身をコピーする
- HTMLのヘッダーに張り付ける
わざわざ通信をして読込んでいたCSSのデザイン情報を、HTML側に書き込んでしまうやり方です。
極限まで効率的に！
１．自分のブログのCSSファイルを知る
まずは、いつも自分のサイトが読み込んでいるCSSファイルを調べます。
「デザイン」から「カスタマイズ」⇒「デザインCSS」をクリックし、「@import」のあとのURLをコピーします。
smoothのデザインの場合、下記の部分です。
/* <system section="theme" selected="smooth"> */
@import "/css/theme/smooth/smooth.css";
/* </system> */
これを「https://blog.hatena.ne.jp」のうしろにつなげてください。
となります。
２．CSSファイルの中身をコピーする
先程のURLで検索してください。CSSファイルの中身が表示されます。
これをctrlキー ＋ aキーで全選択し、コピーしてください。
３．HTMLのヘッダーに張り付ける
先ほどコピーしたCSSのコードの前に
<style>
をつけ、うしろに
</style>
を付けます。下記のようなコードになります。
<style>
(手順２でコピーしたCSSのコード)(これまで自分で編集してきたCSSコード)
</style>
青字は自分でCSSを編集していた場合のみ記載してください。
最後に、このコードを「デザイン」⇒「カスタマイズ」⇒「ヘッダ」のHTMLとして貼り付ければ完了です。
※レスポンシブ対応の場合は、デザインCSSに
/* Responsive:yes */
だけ記載しておいてください。
簡単、便利。
速度改善は重要
今回の速度改善は、標準ではCSSのデザイン情報を参照するために１つ余計な通信をしているところを、HTML側にもってきてしまうことでなくすという対応でした。
表示速度は閲覧者が画面を見るときにも重要であり、また検索の表示順位を上げるためにも有効な方法となっています。
動作環境・ 設定により結果に差はあるようですが、トライしてみて頂ければと思います。
