紅蓮ブログ

アフィリエイトのことが全く分からないあなたに超簡単に詳しく、実戦形式でお話していくブログです

サイトの表示速度を爆速化する方法【はてなブログもOK】

f:id:slash1196:20210918140154j:plain

サイトの表示速度が遅いんだけど、どうしたらいいんだろう。

SEO的にも遅いのはダメだって聞くし、対策法とか知りたいな。

ついでに表示速度が遅いとどうなるのかデメリットとかどこまで上げればいいのかまで教えてくれるとうれしいな。

 

こんなお悩みにお答えします。

 

今回の記事でわかること

  • 表示速度が遅いページの価値が下がっている
  • 表示速度が重要視される理由とは
  • 表示速度が遅いデメリット
  • 表示速度を速くするための対応策
  • 対策法をすべて試してみたら、効果が絶大だった話

 

こんにちわ、紅蓮です。

 

ブログを書いていて表示速度がもっさりしているということはありませんか?

 

今回はサイトの表示速度を爆速化させる方法をご紹介していきましょう。

 

この記事を読めば、今の表示速度が遅いページの価値や表示速度が重要視されている理由、遅いサイトのデメリットから表示速度の爆速化させるための対応策案までまるっとばっちりわかっちゃいます。

 

この記事を書く僕はブログ運営歴は3年目。

 

今ではアフィリエイトからの収益も伸びてきて、毎月3000円ほどいただいています。

 

そんな僕も現在ではブログを作りたての頃は、表示速度のことまで頭が回らずどうやったら速くなるのかを知りませんでした。

 

でもインターネットである記事を読んで、やってみたら爆速化しました。

 

そんな方法なのでぜひ最後までお読みくださいね。

 

では行ってみましょう。

 

Here We Go!!

 

表示速度が遅いページの価値が下がっている

f:id:slash1196:20210918140213j:plain

結論から言うと表示速度が遅いウェブページは、価値が下がっていますよね。

 

というのも、みんな早く答えを知りたいからなんです。

 

Googleの調査によれば、3秒を超えるとアクセスしてくれた読者の53%もの人がもういいやってやめてしまうっていうんですよね。

 

ページの離脱率に関しては、以下の画像の通り。

 

f:id:slash1196:20210916021232j:plain

引用元:Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed

 

3秒を超えると1秒の時と比べると離脱率が32%上昇し、5秒になると1秒よりも離脱率が90%上昇します。

 

そして、6秒になるとなんと106%になり、つまり読む人がいなくなることがわかりますよね。

 

ページの表示速度は3秒未満に納めないといけない

上記のデータから見るとページの表示速度は3秒未満に納めないといけないということです。

 

というのも3秒を超えてしまうと、離脱率が上がり始めてしまうからですね。

 

ですからなるべく、表示速度を速くするための努力が必要なのです。

 

表示速度が重要視される理由とは

f:id:slash1196:20210831233721j:plain

どうしてそこまで表示速度が重要視されるのでしょうか。

 

表示速度が重要視される理由とは、以下の通り。

 

  • 理由①スマホの急激な普及
  • 理由②時代の流れはモバイルに変更した

 

では詳しく見ていきましょう。

 

理由①スマホの急激な普及

理由の1つ目は、スマホの急激な普及ですよね。

 

今現在スマホの普及率は30代までで96%を超えていて、10人いたら9人が持っている状態になっています。

 

中には検索をパソコンからするのではなく、スマホからするという人も多くなってきたんですよね。

 

そうなるとどうしてもスマホを使っている人がマジョリティー(多数派)になりますので、スマホに合わせる必要が出てきたんですよね。

 

だから表示速度が、問題になったのです。

 

理由②時代の流れはモバイルに変更した

理由の2つ目は、時代の流れがモバイルに変更したことですね。

 

検索エンジンのGoogle先生は2020年の9月から、モバイルファーストインデックスに移行しスマホ版サイトの評価が優先されることを発表しました。

 

そのためにもスマホに合わせた表示速度が速いものを提供していかないといけなくなりました。

 

表示速度が遅いデメリット

f:id:slash1196:20210918140315j:plain

表示速度が遅いデメリットは具体的にはどういったものがあるのでしょうか。

 

デメリットは、以下の通り。

 

  • デメリット①ユーザビリティの低下
  • デメリット②SEO評価に対する影響
  • デメリット③アクセスの低下
  • デメリット④コンバージョンの低下

 

では詳しく見ていきましょう。

 

デメリット①ユーザビリティの低下

デメリットの1つ目は、ユーザビリティの低下ですね。

 

というのも表示速度が遅いと、なかなか悩みに対する答えを見つけることができないからですね。

 

そうなると何のために見るのかが、わからなくなるんですよね。

 

例えばブログで稼ぐ方法を知りたいのに、表示速度が遅いとなかなか文章や画像が表示されなくなります。

 

そうなると答えを見つけるのが、遅くなりますよね。

 

だから表示速度が遅くなると確実に、ユーザビリティが下がるんですよね。

 

デメリット②SEO評価に対する影響

デメリットの2つ目は、SEO評価に対する影響が出て来ることですね。

 

というのも検索して、遅いと読者にとって使いにくいサイトになるんです。

 

そんなサイトを検索エンジンが上位表示するかというと、答えはノーですよね。

 

例えば、アフィリエイトのやり方に関するブログを書いていて表示速度が遅いと読者が離れます。

 

そうなると検索エンジンは読者の反応を見ているので、上位表示されなくなるという感じですね。

 

ですから表示速度が遅くなると、SEO評価に対する影響が出ますね。

 

デメリット③アクセスの低下

デメリットの3つ目は、アクセスの低下ですね。

 

これは、SEOの評価に影響するからなんですよね。

 

上位表示されなくなってしまうのですから、アクセスが落ちるのは当然なんですよね。

 

例えばあなたがアフィリエイトの記事を書いていたとしますよね。

 

で表示速度が遅くなると、実は使い勝手が悪くなるんです。

 

すると読者は使い勝手の悪いものよりもほかの使い勝手のいいページを探しに行きますよね。

 

するとSEO的にもよくなくなり、順位が下がってアクセスが下がるという感じですね。

 

ですから表示速度が遅くなると、アクセス的にも低下しますね。

 

デメリット④報酬額の低下

デメリットの4つ目は、報酬額の低下ですね。

 

というのも、アクセス数が低下するからなんですね。

 

アフィリエイトの報酬額は、掛け算なんですよね。

 

そのためにアクセスが下がると、報酬額も下がります。

 

※詳しくは、アフィリエイトのCVRを上げるための7つの方法【初心者でも簡単】にて解説しているので、ぜひお読みくださいね。

 

表示速度が遅いと報酬額の低下を引き起こしますね。

 

表示速度を速くするための対応策

f:id:slash1196:20210906211301j:plain

じゃあどうしたら表示速度が上げられるのかというお話なんです。

 

対応策は、以下のとおり。

 

  • 対応策①画像の遅延ロードの使用
  • 対応策②コードの圧縮
  • 対応策③使っていないCSSを削除する
  • 対応策④画像の圧縮
  • 対応策⑤AMP対応
  • 対応策⑥カスタマイズの変更
  • 対応策⑦内部リンクの貼り方の見直し
  • 対応策⑧アイコンの見直し
  • 対応策⑨デザインの変更
  • 対応策⑩CSSコードのインライン化
  • 対応策⑪javascriptを使わない
  • 対応策⑫jquery取得先の統一

では詳しく見ていきましょう。

 

対応策①画像の遅延ロードの使用

対応策の1つ目は、画像の遅延ロードの使用ですね。

 

画像の遅延ロードはその画像の場所に行くと読み込みを始めるというものでGoogle先生も推奨している方法ですね。

 

採用しているかどうかに関しては、ブログサービスにも寄りますね。

 

ちなみにはてなブログに関しては遅延ロードを採用していますね。

 

詳しくは、記事画像の遅延読み込みについに対応!!【はてなブログ】にて詳しく解説していますのでぜひお読みくださいね。

 

対応策②コードの圧縮

対応策の2つ目は、コードの圧縮ですね。

 

というのも改行って人にとってはたいしたことではないんですけど、データ量が膨れる理由になるんですよね。

 

だから、なるべくないほうがいいんです。

 

コードを圧縮をして、データ量を少なくしましょう。

 

  • ①HTML圧縮 
  • ②Javascriptの圧縮
  • ③CSSコードの圧縮 

 

では詳しく、見ていきましょう。

 

①HTML圧縮

まずHTMLの圧縮ですね。

 

HTMLって基本的には忘れそうなんですけどけっこうなデータ量があるんです。

 

ですからなるべく少ないほうがいいですよね。

 

なおHTMLの圧縮の仕方に関しては、HTMLコードを圧縮する方法【カスタマイズ初心者必見】にて詳しく解説しているのでぜひお読みくださいね。

 

ちなみにHTMLを圧縮しても元に戻ってしまうブログサービスもあるので、注意は必要ですね。

 

ですがここぞというときには、おすすめの方法ですね。

 

②Javascriptの圧縮

次にJavascriptの圧縮ですね。

 

Javascriptは改行を伴うのでこれも結構なデータ量になります。

 

圧縮しておいて、損はないですね。

 

Javascriptの圧縮方法に関しては、Javascriptを圧縮する方法【はてなブログOK】にて詳しく解説していますのでぜひお読みください。

 

③CSSコードの圧縮

次にCSSコードの圧縮ですね。

 

これはけっこう優先度高いです。

 

というのも、HTMLやCSSに比べると行数が多いから。

 

そのためにデータ量も多くなってしまいますから圧縮するとけっこうな節約になりますので、かなりおすすめですね。

 

CSSの圧縮ツールがあって、そちらにコードをコピペしたら簡単に圧縮できますね。

 

圧縮ツールに関しては、クリックだけでOKのCSS圧縮ツールおすすめ5選【初心者向け】にて詳しく解説していますね。

 

対応策③使っていないCSSコードの削除

対応策の3つ目は、使っていないCSSコードの削除ですね。

 

使っていないCSSコードは、削除すべきです。

 

例えば僕の場合は、あわせて読みたいに使う四角の囲みを使うことって少ないんですよね。

 

ですから使用率からすると、必要のないコードになるんです。

 

こういうコードはおいておくと、データ量が多くなってしまいますので表示速度が遅くなりますね。

 

CSSの削除の方法に関しては、不要なCSSの削除の仕方【割り出しツールも紹介】にて詳しく解説しましたのでぜひお読みの上やってみましょう。

 

対応策④画像の圧縮

対応策の4つ目は、画像の圧縮ですね。

 

画像って、けっこうデータ量があるからなんですね。

 

データ量が大きすぎると、表示速度が遅くなってしまいます。

 

ですから画像の圧縮は、絶対しておくのがいいですね。

 

画像の使い方には、特に注意したいですよね。

 

使い方に関しては、無料で使える高画質な画像圧縮ツール7選【ブログ記事向き】にて詳しく解説していますので、参考にしてやってみましょう。

 

対応策⑤AMP対応

対応策の5つ目は、AMP対応することですね。

 

AMP対応は表示速度が、最高1/4になるために非常におすすめですね。

 

AMP対応にしておくと、速くなるのでいいですね。

 

AMPに関する詳細に関しては、はてなブログのAMP対応【基礎知識からやるべきかまで一挙解説】 にて解説しましたのでぜひお読みくださいね。

 

対応策⑥カスタマイズの変更

対応策の6つ目は、カスタマイズの変更ですね。

 

カスタマイズは以下の通り。

 

  • ソーシャルボタンの変更
  • スターを非表示にする
  • コメントを非表示にする

 

では詳しく見ていきましょう。

 

ソーシャルボタンの変更

ソーシャルボタンの変更ですね。

 

ソーシャルボタンって、実はけっこうなデータ量を食うんですよね。

 

ブログサービスの場合って読者にどのくらいのフォローされているかを見えるかするためにJavascriptを使っていたりするんですよね。

 

そのために、データ量も多くなってしまったりしますね。

 

ですからソーシャルボタンに関しては、カスタマイズして変更するほうがいいですね。

 

ちなみにソーシャルボタンのカスタマイズはSNSシェアボタンを設置する方法【はてなブログ】【コピペOK】にて詳しく解説しているので、ぜひお読みくださいね。

 

スターを非表示にする

スターの非表示ですね。

 

スターボタンも実は画像を使っているので、データ量が大きくなるんですよね。

 

そのために表示しておくと、基本的には表示速度が遅くなりますね。

 

設定→詳細設定と進み、チェックを外しておいたほうがいいですね。

 

コメントを非表示にする

コメントを非表示にすることも効果的ですね。

 

というのもコメントには、なんでもかけるからなんですよね。

 

そしてコメントに書かれたことも、データ量に大きくかかわります。

 

そのためにけっこう重くなってしまいますから、コメントは設定から非表示にしたほうがいいですね。

 

コメント欄に関する詳細は、はてなブログのコメントは非表示が一番【収益化を考えている初心者へ】 にて解説しています。

 

ぜひお読みの上やってみましょう。

 

対応策⑦内部リンクの貼り方の見直し

対応策の7つ目は、内部リンクの貼り方の見直しですね。

 

簡単に言うと内部リンクに、ブログカードを使っていないかを見直しましょう。

 

というのもブログカードを使ってしまうと、どうしても画像を使ってしまうためにデータ量が大きくなります。

 

そのためにブログカードを使わずに、テキストリンクを使うほうがよさそうですね。

 

内部リンクの貼り方に関しては、【初心者向け】内部リンクの貼り方【概要からコツまでばっちり解説】にて詳しく解説していますのでぜひ参考にやってみましょう。

 

対応策⑧Fontawesomeの削除

対応策の8つ目は、Fontawesomeの削除ですね。

 

アイコンといえばFontawesomeという感じの人って多いと思いますが、Fontawesomeはやめておいたほうがいいです。

 

というのも使わないものが、多すぎるからですね。

 

使わないものがあるとデータ量が膨れちゃいますので、読み込みに時間がかかっちゃいます。

 

Fontawesomeを使わない方法に関しては、Fontawesomeは使わないほうがいい話【初心者向け】 にて詳しく解説していますのでそちらをぜひお読みの上やってみましょう。

 

対応策⑨デザインテーマの変更

対応策の9つ目は、デザインテーマの変更ですね。

 

デザインによって、表示速度が遅かったりするものもあるんですよね。

 

なるべく軽いものに変更して、データ量を減らしましょう。

 

おすすめのデザインに関しては、はてなブログのテーマの選び方を解説【おすすめテーマもあり】にて詳しく解説しています。

 

どうぞご覧くださいね。

 

対応策⑩cssのインライン化

対応策の10個目は、CSSのインライン化ですね。

 

文章の中にCSSを入れてインライン化することによって、速くなりますね。

 

インライン化の方法に関しては、CSSインライン化でブログの表示速度を上げる方法【はてなブログ】にて詳しく解説しているので、そちらをお読みの上やってみましょう。

 

対応策⑪Javacriptをなるべく使わない

対応策の11個目は、Javascriptを使わないことですね。

 

というのもJavascriptって、その場所に行くと一回一回読みにいかないといけないんですよね。

 

そして処理が終わるまで、CSSの読み込みなどのほかの処理が出来ないんです。

 

そのために使いすぎると、表示速度が遅くなりますね。

 

なるべくカスタマイズするときには、CSSでできるものを選ぶようにしておくのがいいですね。

 

対応策⑫Jquery取得先の統一

対応策の12個目は、Jqueryの取得先の統一ですね。

 

けっこう多いのが、Jqueryの読み込み先を分けているサイトなんですよね。

 

実はJqueryの読み込み先を分けてしまうと、読み込み先のすべてに確認に行くようになり表示速度が遅くなります。

 

ですから取得先の統一はしておくのがいいですね。

 

やり方に関しては、Jqueryの読み込み先は統一する方法【初心者は要注意】にて詳しく解説しているので、ぜひどうぞ。

 

対策法をすべて試してみたら、効果が絶大だった話

f:id:slash1196:20210911234844j:plain

対策法をすべて試してみたら、効果は絶大でしたね。

 

実はこのブログ一番最初のスペックは、以下の通り。

 

  • テーマ:minimalism
  • 当時のページスピード:パソコン→30、モバイル20

 

めちゃめちゃ遅かったんですよね。

 

しかし上記の方法を試してすべて終わったころには、以下のようになっていました。

 

  • テーマ:smooth
  • ページスピード:パソコン→91、モバイル:55

 

ものすごい上昇率ですよね。

 

しかもこれが終わってからですが読まれるようになりましたので、モチベーションが下がりにくくなりましたね。

 

ですから、絶対におすすめの方法なのです。

 

まとめ|ブログは軽いほうが全然いい

お疲れさまでした。

 

ここまでサイトの表示速度の上げ方をお話してきました。

 

まとめると、以下の通り。

 

まとめ
  • 結論から言うと表示速度が遅いページの価値が下がっている。というのも速く答えを知りたいから。
    • ページの表示速度は3秒未満に納めないといけない。というのも離脱率が発生してしまうから。
  • 表示速度が重要視される理由は以下の通り。
    • ①スマホの急激な普及
    • ②時代の流れはモバイルに変更した
  • 表示速度が遅いデメリットは以下の通り。
    • ①ユーザビリティの低下
    • ②SEO評価に対する影響
    • ③アクセスの低下
    • ④コンバージョンの低下
  • 表示速度を速くするための対応策に関しては以下の通り。
    • 対応策①画像の遅延ロードの使用
    • 対応策②コードの圧縮
    • 対応策③使っていないCSSを削除する
    • 対応策④画像の圧縮
    • 対応策⑤AMP対応
    • 対応策⑥カスタマイズの変更
    • 対応策⑦内部リンクの貼り方の見直し
    • 対応策⑧アイコンの見直し
    • 対応策⑨デザインの変更
    • 対応策⑩CSSコードのインライン化
    • 対応策⑪Javascriptを使わない
    • 対応策⑫Jquery取得先の統一
  • 対策法をすべて試してみたら、効果が絶大でかなりおすすめ。

 

という感じですね。

 

スマホ時代の今、いつ検索をしたくなるかはわかりません。

 

ですからスマホからでもサクサク動くことが求められています。

 

速いに越したことはありません。

 

一つ一つやってみて、速いサイトを目指しましょう。

 

ってことで今回は以上です。

 

また次回に。