サイトの表示速度を爆速化する方法【はてなブログもOK】
※当サイトではアフィリエイト広告を利用しています。
SEO
2021.09.20
この記事は約15分で読めます。
- 対応策①画像の遅延ロードの使用
- 対応策②コードの圧縮
- 対応策③使っていないCSSを削除する
- 対応策④画像の圧縮
- 対応策⑤AMP対応
- 対応策⑥カスタマイズの変更
- 対応策⑦内部リンクの貼り方の見直し
- 対応策⑧アイコンの見直し
- 対応策⑨デザインの変更
- 対応策⑩CSSコードのインライン化
- 対応策⑪javascriptを使わない
- 対応策⑫jquery取得先の統一
では詳しく見ていきましょう。
対応策①画像の遅延ロードの使用
対応策の1つ目は、画像の遅延ロードの使用です。
画像の遅延ロードはその画像の場所に行くと読み込みを始めるというものでGoogle先生も推奨している方法です。
採用しているかどうかに関しては、ブログサービスによるところがあります。ちなみにはてなブログやWordpressは、遅延ロードを採用しています。
遅延ロードの仕方の詳しくは、記事画像の遅延読み込みについに対応!!【はてなブログ】にて詳しく解説していますので、ぜひお読みください。
対応策②コードの圧縮
対応策の2つ目は、コードの圧縮です。というのもコードのデータ量って半端ないからです。
例えば、文中の改行です。改行って人にとっては見えない存在なので、何のデータ量もないことになります。しかし、サーバー的にはデータ量が膨れ上がる理由になります。
データ量が多くなると、表示速度が遅くなりますから、なるべくならないほうがいいです。コードを圧縮をして、データ量を少なくしましょう。
コードのデータ量を下げる方法は、以下のものがあります。
CSSコードの圧縮
では詳しく、見ていきましょう。
CSSコードの圧縮
コードの圧縮の種類の3つ目は、CSSコードの圧縮です。これは優先度高めです。というのも、HTMLやCSSに比べると桁違いに行数が多いからです。
それに伴い、データ量も多くなってしまいますから圧縮するとけっこうな節約になります。かなりおすすめです。
CSSの圧縮ツールがあって、そちらにコードをコピペしたら簡単に圧縮できます。
圧縮ツールに関しては、クリックだけでOKのCSS圧縮ツールおすすめ5選【初心者向け】にて詳しく解説しています。ぜひお読みください。
対応策③使っていないCSSコードの削除
対応策の3つ目は、使っていないCSSコードの削除です。使っていないCSSコードは、削除すべきです。
例えば僕の場合は、あわせて読みたいに使う四角の囲みを使うことは少ないです。そのため、使用率から、必要のないコードと判断して、削除しました。
こういうコードはおいておくと、データ量が多くなってしまいます。そのために削除した方がいいです。
CSSの削除の方法に関しては、不要なCSSの削除の仕方【割り出しツールも紹介】にて詳しく解説しました。ぜひお読みの上やってみましょう。
対応策④画像の圧縮
対応策の4つ目は、画像の圧縮です。これも優先度高いです。というのも画像は、データ量があるからです。
例えば、最新のiPhone14で撮影された写真の解像度は、大きくなり今や、約4000px × 約3000pxになっています。その写真をそのまま貼ったら容量が大きすぎます。
データ量が大きすぎると、表示速度が遅くなってしまいます。Wordpressをお使いの場合は、プラグインを入れることができるので大丈夫ですが、ブログサービスの場合は、プラグインが入れられないです。画像の圧縮は、絶対しておく方がいいです。
画像の使い方には、特に注意が必要です。
使い方に関しては、無料で使える高画質な画像圧縮ツール7選【ブログ記事向き】にて詳しく解説していますので、参考にしてやってみましょう。
対応策⑤AMP対応
対応策の5つ目は、AMP対応することです。というのもAMP対応は表示速度が、最高で4倍になるからです。
AMPは、別のページとして、新しいページを作ってそこにアクセスするシステムです。そのために軽くなるのがいい点です。
とはいえ、新しい軽いページを作成することで重複コンテンツになることがあるので、注意は必要です。
AMPに関する詳細に関しては、はてなブログのAMP対応【基礎知識からやるべきかまで一挙解説】 にて解説しましたのでぜひお読みくださいね。
対応策⑥カスタマイズの変更
対応策の6つ目は、カスタマイズの変更です。小さいデータ量でできるカスタマイズを使いましょう。カスタマイズは以下の通り。
- ソーシャルボタンの変更
- スターを非表示にする
- コメントを非表示にする
では詳しく見ていきましょう。
ソーシャルボタンの変更
ソーシャルボタンの変更です。ソーシャルボタンって、データ量を食うものです。
ブログサービスの場合は、読者にどのくらいのフォローされているかを見えるように、Javascriptを使ってカウンタを載せているものがほとんどです。
でも、データ量も多くなってしまいます。ですからソーシャルボタンに関しては、カスタマイズして変更するほうがいいです。
ソーシャルボタンのカスタマイズは、SNSシェアボタンを設置する方法【はてなブログ】【コピペOKSNSシェアボタンを設置する方法【はてなブログ】【コピペOK】にて詳しく解説しているので、ぜひお読みください。
スターを非表示にする
スターの非表示ですね。これははてなブログのみのカスタマイズです。
スターボタンとは、SNSでいういいねみたいなものです。スターボタンは、画像を使っているので、データ量が大きくなります。
そのために表示しておくと、表示速度が遅くなりますね。
設定→詳細設定と進み、チェックを外しておいたほうがいいです。
コメントを非表示にする
コメントを非表示にすることも効果的です。というのもコメントには、なんでもかけるからです。
一時期、コメントにいっぱい書きこまれて、アフィリエイトをする人を刈る「アフィリエイター狩り」が流行りました。
コメントに書かれたことも、データ量に大きくかかわります。そのために重くなってしまいますから、コメントは設定から非表示にしたほうがいいです。
コメント欄に関する詳細は、はてなブログのコメントは非表示が一番【収益化を考えている初心者へ】 にて解説しています。ぜひお読みの上やってみましょう。
対応策⑦内部リンクの貼り方の見直し
対応策の7つ目は、内部リンクの貼り方の見直しです。簡単に言うと内部リンクに、ブログカードを使っていないかを見直しましょう。
というのもブログカードを使ってしまうと、どうしても画像を使ってしまうためにデータ量が大きくなります。
ブログカードは使わずに、テキストリンクを使うほうがデータ量も少なくクリック率も高くなるのでいいです。
内部リンクの貼り方に関しては、【初心者向け】内部リンクの貼り方【概要からコツまでばっちり解説】にて詳しく解説していますのでぜひ参考にやってみましょう。
対応策⑧Fontawesomeの削除
対応策の8つ目は、Fontawesomeの削除です。アイコンといえばFontawesomeという風潮があります。でも特にはてなブログを使っている場合は、Fontawesomeはやめておいたほうがいいです。
というのも、ブログ内に別のアイコンが埋め込まれているからです。そこにまたアイコンを入れるとデータ量が多くなってしまいます。使わないものがあるとデータ量が膨れちゃいますので、読み込みに時間がかかてしまいます。
Fontawesomeを使わない方法に関しては、Fontawesomeは使わないほうがいい話【初心者向け】 にて詳しく解説していますのでそちらをぜひお読みの上やってみましょう。
対応策⑨デザインテーマの変更
対応策の9つ目は、デザインテーマの変更です。デザインによって、表示速度が遅いものもあります。
なるべく軽いものに変更して、データ量を減らしましょう。
おすすめのデザインに関しては、はてなブログのテーマの選び方を解説【おすすめテーマもあり】にて詳しく解説しています。ぜひお読みの上、やってみましょう。
対応策⑩cssのインライン化
対応策の10個目は、CSSのインライン化です。CSSのインライン化とは、文章の中にCSSコードを書いて、表示速度を早くする方法です。
CSSは読み込みに行くときに全部の記事を回りますが、記事ごとに入れるなら、CSSはその記事だけを読み込めばいいので早く済みます。
デメリットは、その記事だけにしか反映されないことです。
インライン化の方法に関しては、CSSインライン化でブログの表示速度を上げる方法【はてなブログ】にて詳しく解説しているので、そちらをお読みの上やってみましょう。
対応策⑪Javacriptをなるべく使わない
対応策の11個目は、Javascriptをなるべく使わないことです。というのも表示速度が遅くなるからです。
Javascriptのコードが見つかれば、読みこみを開始するシステムになっていますが、読み込み方に問題があるんです。
JavaScriptのコードが見つかると一つ一つ読み込みを開始するシステムで、一つの処理が終わるまで、他のCSSコードの読み込みが一切出来ないんです。そのために使いすぎると、表示速度が遅くなります。
なるべくカスタマイズするときには、CSSでできるものを選ぶようにしておきましょう。
対応策⑫Jquery取得先の統一
対応策の12個目は、Jqueryの取得先の統一です。けっこう多いのが、Jqueryの読み込み先を分けているサイトです。
実はJqueryの読み込み先を分けてしまうと、設定した読み込み先を読み込みに行くために、表示速度が遅くなってしまいます。
ですから取得先の統一はしておくことが賢明です。
対策法をすべて試してみたら、効果が絶大だった話
対策法をすべて試してみたら、効果は絶大でした。このブログ一番最初のスペックは、以下の通り。
- テーマ:minimalism
- 当時のページスピード：パソコン→30、モバイル20
数値から見ると、超絶遅いですよね。しかし上記の方法を試してすべて終わったころには、以下のようになっていました。
- テーマ：smooth
- ページスピード：パソコン→91、モバイル：55
ものすごい上昇率です。ただモバイルに対する上昇率は悪いのが気になりましたが、もともとブログサービスはPC用に開発されていて、モバイル用は発達していないのが現状です。
しかもこれが終わってから、記事への流入率も高まり、読まれるようになりました。そのために、モチベーションが下がりにくくなりました。
ですから、絶対におすすめの方法なのです。
まとめ｜ブログは軽いほうが全然いい
お疲れさまでした。ここまでサイトの表示速度の上げ方をお話してきました。まとめると、以下の通り。
まとめ
- 結論から言うと表示速度が遅いページの価値が下がっている。というのも速く答えを知りたいから。
- ページの表示速度は3秒未満に納めないといけない。というのも離脱率が発生してしまうから。
- 表示速度が重要視される理由は以下の通り。
- ①スマホの急激な普及
- ②時代の流れはモバイルに変更した
- 表示速度が遅いデメリットは以下の通り。
- ①ユーザビリティの低下
- ②SEO評価に対する影響
- ③アクセスの低下
- ④コンバージョンの低下
- 表示速度を速くするための対応策に関しては以下の通り。
- 対応策①画像の遅延ロードの使用
- 対応策②コードの圧縮
- 対応策③使っていないCSSを削除する
- 対応策④画像の圧縮
- 対応策⑤AMP対応
- 対応策⑥カスタマイズの変更
- 対応策⑦内部リンクの貼り方の見直し
- 対応策⑧アイコンの見直し
- 対応策⑨デザインの変更
- 対応策⑩CSSコードのインライン化
- 対応策⑪Javascriptを使わない
- 対応策⑫Jquery取得先の統一
- 対策法をすべて試してみたら、効果が絶大でかなりおすすめ。
という感じですね。
スマホ時代の今、いつ検索をしたくなるかはわかりません。ですからスマホからでもサクサク動くこと表示速度の速いページがいいページと言われます。
速いに越したことはありません。一つ一つやってみて、速いサイトを目指しましょう。
今回は以上です。
Jouji
- デメリット①ユーザビリティの低下
- デメリット②SEO評価に対する影響
- デメリット③アクセスの低下
- デメリット④コンバージョンの低下
では詳しく見ていきましょう。
デメリット①ユーザビリティ(使い勝手)の低下
表示速度が遅いデメリットの1つ目は、ユーザビリティ(使い勝手)の低下です。というのも表示速度が遅いと、なかなかサイトにアクセスできません。
そのために悩みに対する答えを見つけることができないからです。するとアクセスする意味が、なくなります。
例えばブログで稼ぐ方法を知りたいのに、表示速度が遅いとなかなか文章や画像が表示されなくなります。すると答えを見つけるのが、遅くなりますよね。
だから表示速度が遅くなると、読者のユーザビリティが下がります。
デメリット②SEO評価に対する影響
表示速度が遅いデメリットの2つ目は、SEO評価に対する影響が出て来ることです。というのも検索して、遅いと読者はブラウザの戻るボタンを押します。
するとその行動はGoogle先生によって、サイトの満足度として記録されます。するとサイトのSEO評価になります。
遅くて、戻るボタンを多く押されるサイトを、検索エンジンが上位表示するかというと、答えはノーです。
例えば、アフィリエイトのやり方に関するブログを書いていて、表示速度が遅いと読者が離れます。そうなると検索エンジンは読者の反応を見ているので、上位表示されなくなるわけです。
ですから表示速度が遅くなると、SEO評価に対する影響があります。
デメリット③アクセス数の低下
表示速度が遅いデメリットの3つ目は、アクセス数の低下です。これは、SEOの評価に影響するからです。
SEOの評価に影響すると上位表示されなくなりますから、アクセス数の低下は当然です。
例えばあなたが、アフィリエイトの記事を書いていたとします。で表示速度が遅くなると、読者はブラウザの戻るボタンを押し、また別の記事に行きます。
読者は使い勝手の悪いものよりも、使い勝手のいいページを探しに行きます。するとSEO的に、順位が下がってアクセスが下がるという感じです。
表示速度が遅くなると、アクセス的にも低下しますね。
デメリット④報酬額の低下
デメリットの4つ目は、報酬額の低下です。というのも、アクセス数が低下するからです。
| 検索順位 |
クリック数 |
| 1位 |
13.94％ |
| 2位 |
7.52％ |
| 3位 |
4.68％ |
| 4位 |
3.91％ |
| 5位 |
2.98％ |
| 6位 |
2.42％ |
| 7位 |
2.06％ |
| 8位 |
1.78％ |
| 9位 |
1.46％ |
| 10位 |
1.32％ |
※引用元：2021 CTR Research Study: The Largest Ever for SEO
上記は検索順位別のCTRの表です。1位と2位の差はたった1つの差なのに、6.42ポイントも差があります。
アフィリエイトの報酬額は、掛け算です。そのためにアクセスが下がると、報酬額も下がります。
※詳しくは、アフィリエイトのCVRを上げるための7つの方法【初心者でも簡単】にて解説しているので、ぜひお読みくださいね。
表示速度が遅いと、報酬額の低下を引き起こします。
表示速度を速くするための対応策
じゃあどうしたら表示速度が上げられるのかというお話なんです。
対応策は、以下のとおり。
- 対応策①画像の遅延ロードの使用
- 対応策②コードの圧縮
- 対応策③使っていないCSSを削除する
- 対応策④画像の圧縮
- 対応策⑤AMP対応
- 対応策⑥カスタマイズの変更
- 対応策⑦内部リンクの貼り方の見直し
- 対応策⑧アイコンの見直し
- 対応策⑨デザインの変更
- 対応策⑩CSSコードのインライン化
- 対応策⑪javascriptを使わない
- 対応策⑫jquery取得先の統一
では詳しく見ていきましょう。
対応策①画像の遅延ロードの使用
対応策の1つ目は、画像の遅延ロードの使用です。
画像の遅延ロードはその画像の場所に行くと読み込みを始めるというものでGoogle先生も推奨している方法です。
採用しているかどうかに関しては、ブログサービスによるところがあります。ちなみにはてなブログやWordpressは、遅延ロードを採用しています。
遅延ロードの仕方の詳しくは、記事画像の遅延読み込みについに対応!!【はてなブログ】にて詳しく解説していますので、ぜひお読みください。
対応策②コードの圧縮
対応策の2つ目は、コードの圧縮です。というのもコードのデータ量って半端ないからです。
例えば、文中の改行です。改行って人にとっては見えない存在なので、何のデータ量もないことになります。しかし、サーバー的にはデータ量が膨れ上がる理由になります。
データ量が多くなると、表示速度が遅くなりますから、なるべくならないほうがいいです。コードを圧縮をして、データ量を少なくしましょう。
コードのデータ量を下げる方法は、以下のものがあります。
CSSコードの圧縮
では詳しく、見ていきましょう。
CSSコードの圧縮
コードの圧縮の種類の3つ目は、CSSコードの圧縮です。これは優先度高めです。というのも、HTMLやCSSに比べると桁違いに行数が多いからです。
それに伴い、データ量も多くなってしまいますから圧縮するとけっこうな節約になります。かなりおすすめです。
CSSの圧縮ツールがあって、そちらにコードをコピペしたら簡単に圧縮できます。
圧縮ツールに関しては、クリックだけでOKのCSS圧縮ツールおすすめ5選【初心者向け】にて詳しく解説しています。ぜひお読みください。
対応策③使っていないCSSコードの削除
対応策の3つ目は、使っていないCSSコードの削除です。使っていないCSSコードは、削除すべきです。
例えば僕の場合は、あわせて読みたいに使う四角の囲みを使うことは少ないです。そのため、使用率から、必要のないコードと判断して、削除しました。
こういうコードはおいておくと、データ量が多くなってしまいます。そのために削除した方がいいです。
CSSの削除の方法に関しては、不要なCSSの削除の仕方【割り出しツールも紹介】にて詳しく解説しました。ぜひお読みの上やってみましょう。
対応策④画像の圧縮
対応策の4つ目は、画像の圧縮です。これも優先度高いです。というのも画像は、データ量があるからです。
例えば、最新のiPhone14で撮影された写真の解像度は、大きくなり今や、約4000px × 約3000pxになっています。その写真をそのまま貼ったら容量が大きすぎます。
データ量が大きすぎると、表示速度が遅くなってしまいます。Wordpressをお使いの場合は、プラグインを入れることができるので大丈夫ですが、ブログサービスの場合は、プラグインが入れられないです。画像の圧縮は、絶対しておく方がいいです。
画像の使い方には、特に注意が必要です。
使い方に関しては、無料で使える高画質な画像圧縮ツール7選【ブログ記事向き】にて詳しく解説していますので、参考にしてやってみましょう。
対応策⑤AMP対応
対応策の5つ目は、AMP対応することです。というのもAMP対応は表示速度が、最高で4倍になるからです。
AMPは、別のページとして、新しいページを作ってそこにアクセスするシステムです。そのために軽くなるのがいい点です。
とはいえ、新しい軽いページを作成することで重複コンテンツになることがあるので、注意は必要です。
AMPに関する詳細に関しては、はてなブログのAMP対応【基礎知識からやるべきかまで一挙解説】 にて解説しましたのでぜひお読みくださいね。
対応策⑥カスタマイズの変更
対応策の6つ目は、カスタマイズの変更です。小さいデータ量でできるカスタマイズを使いましょう。カスタマイズは以下の通り。
- ソーシャルボタンの変更
- スターを非表示にする
- コメントを非表示にする
では詳しく見ていきましょう。
ソーシャルボタンの変更
ソーシャルボタンの変更です。ソーシャルボタンって、データ量を食うものです。
ブログサービスの場合は、読者にどのくらいのフォローされているかを見えるように、Javascriptを使ってカウンタを載せているものがほとんどです。
でも、データ量も多くなってしまいます。ですからソーシャルボタンに関しては、カスタマイズして変更するほうがいいです。
ソーシャルボタンのカスタマイズは、SNSシェアボタンを設置する方法【はてなブログ】【コピペOKSNSシェアボタンを設置する方法【はてなブログ】【コピペOK】にて詳しく解説しているので、ぜひお読みください。
スターを非表示にする
スターの非表示ですね。これははてなブログのみのカスタマイズです。
スターボタンとは、SNSでいういいねみたいなものです。スターボタンは、画像を使っているので、データ量が大きくなります。
そのために表示しておくと、表示速度が遅くなりますね。
設定→詳細設定と進み、チェックを外しておいたほうがいいです。
コメントを非表示にする
コメントを非表示にすることも効果的です。というのもコメントには、なんでもかけるからです。
一時期、コメントにいっぱい書きこまれて、アフィリエイトをする人を刈る「アフィリエイター狩り」が流行りました。
コメントに書かれたことも、データ量に大きくかかわります。そのために重くなってしまいますから、コメントは設定から非表示にしたほうがいいです。
コメント欄に関する詳細は、はてなブログのコメントは非表示が一番【収益化を考えている初心者へ】 にて解説しています。ぜひお読みの上やってみましょう。
対応策⑦内部リンクの貼り方の見直し
対応策の7つ目は、内部リンクの貼り方の見直しです。簡単に言うと内部リンクに、ブログカードを使っていないかを見直しましょう。
というのもブログカードを使ってしまうと、どうしても画像を使ってしまうためにデータ量が大きくなります。
ブログカードは使わずに、テキストリンクを使うほうがデータ量も少なくクリック率も高くなるのでいいです。
内部リンクの貼り方に関しては、【初心者向け】内部リンクの貼り方【概要からコツまでばっちり解説】にて詳しく解説していますのでぜひ参考にやってみましょう。
対応策⑧Fontawesomeの削除
対応策の8つ目は、Fontawesomeの削除です。アイコンといえばFontawesomeという風潮があります。でも特にはてなブログを使っている場合は、Fontawesomeはやめておいたほうがいいです。
というのも、ブログ内に別のアイコンが埋め込まれているからです。そこにまたアイコンを入れるとデータ量が多くなってしまいます。使わないものがあるとデータ量が膨れちゃいますので、読み込みに時間がかかてしまいます。
Fontawesomeを使わない方法に関しては、Fontawesomeは使わないほうがいい話【初心者向け】 にて詳しく解説していますのでそちらをぜひお読みの上やってみましょう。
対応策⑨デザインテーマの変更
対応策の9つ目は、デザインテーマの変更です。デザインによって、表示速度が遅いものもあります。
なるべく軽いものに変更して、データ量を減らしましょう。
おすすめのデザインに関しては、はてなブログのテーマの選び方を解説【おすすめテーマもあり】にて詳しく解説しています。ぜひお読みの上、やってみましょう。
対応策⑩cssのインライン化
対応策の10個目は、CSSのインライン化です。CSSのインライン化とは、文章の中にCSSコードを書いて、表示速度を早くする方法です。
CSSは読み込みに行くときに全部の記事を回りますが、記事ごとに入れるなら、CSSはその記事だけを読み込めばいいので早く済みます。
デメリットは、その記事だけにしか反映されないことです。
インライン化の方法に関しては、CSSインライン化でブログの表示速度を上げる方法【はてなブログ】にて詳しく解説しているので、そちらをお読みの上やってみましょう。
対応策⑪Javacriptをなるべく使わない
対応策の11個目は、Javascriptをなるべく使わないことです。というのも表示速度が遅くなるからです。
Javascriptのコードが見つかれば、読みこみを開始するシステムになっていますが、読み込み方に問題があるんです。
JavaScriptのコードが見つかると一つ一つ読み込みを開始するシステムで、一つの処理が終わるまで、他のCSSコードの読み込みが一切出来ないんです。そのために使いすぎると、表示速度が遅くなります。
なるべくカスタマイズするときには、CSSでできるものを選ぶようにしておきましょう。
対応策⑫Jquery取得先の統一
対応策の12個目は、Jqueryの取得先の統一です。けっこう多いのが、Jqueryの読み込み先を分けているサイトです。
実はJqueryの読み込み先を分けてしまうと、設定した読み込み先を読み込みに行くために、表示速度が遅くなってしまいます。
ですから取得先の統一はしておくことが賢明です。
対策法をすべて試してみたら、効果が絶大だった話
対策法をすべて試してみたら、効果は絶大でした。このブログ一番最初のスペックは、以下の通り。
- テーマ:minimalism
- 当時のページスピード：パソコン→30、モバイル20
数値から見ると、超絶遅いですよね。しかし上記の方法を試してすべて終わったころには、以下のようになっていました。
- テーマ：smooth
- ページスピード：パソコン→91、モバイル：55
ものすごい上昇率です。ただモバイルに対する上昇率は悪いのが気になりましたが、もともとブログサービスはPC用に開発されていて、モバイル用は発達していないのが現状です。
しかもこれが終わってから、記事への流入率も高まり、読まれるようになりました。そのために、モチベーションが下がりにくくなりました。
ですから、絶対におすすめの方法なのです。
まとめ｜ブログは軽いほうが全然いい
お疲れさまでした。ここまでサイトの表示速度の上げ方をお話してきました。まとめると、以下の通り。
まとめ
- 結論から言うと表示速度が遅いページの価値が下がっている。というのも速く答えを知りたいから。
- ページの表示速度は3秒未満に納めないといけない。というのも離脱率が発生してしまうから。
- 表示速度が重要視される理由は以下の通り。
- ①スマホの急激な普及
- ②時代の流れはモバイルに変更した
- 表示速度が遅いデメリットは以下の通り。
- ①ユーザビリティの低下
- ②SEO評価に対する影響
- ③アクセスの低下
- ④コンバージョンの低下
- 表示速度を速くするための対応策に関しては以下の通り。
- 対応策①画像の遅延ロードの使用
- 対応策②コードの圧縮
- 対応策③使っていないCSSを削除する
- 対応策④画像の圧縮
- 対応策⑤AMP対応
- 対応策⑥カスタマイズの変更
- 対応策⑦内部リンクの貼り方の見直し
- 対応策⑧アイコンの見直し
- 対応策⑨デザインの変更
- 対応策⑩CSSコードのインライン化
- 対応策⑪Javascriptを使わない
- 対応策⑫Jquery取得先の統一
- 対策法をすべて試してみたら、効果が絶大でかなりおすすめ。
という感じですね。
スマホ時代の今、いつ検索をしたくなるかはわかりません。ですからスマホからでもサクサク動くこと表示速度の速いページがいいページと言われます。
速いに越したことはありません。一つ一つやってみて、速いサイトを目指しましょう。
今回は以上です。
Jouji
- 理由①スマホの急激な普及
- 理由②時代の流れはモバイルに変更した
詳しく、見ていきましょう。
理由①スマホの急激な普及
理由の1つ目は、スマホの急激な普及です。今現在スマホの普及率は30代までで、96％を超えていて、10人いたら9人が持っている状態になっています。
中には検索をパソコンからするのではなく、スマホからするという人も多くなってきました。
そうなるとどうしてもスマホを使っている人が、マジョリティー(多数派)になります。そのため、スマホに合わせる必要が出てきます。表示速度が、問題になったのです。
理由②時代の流れはモバイルに変更した
理由の2つ目は、時代の流れがモバイルに変更したことです。
Google先生は2020年の9月から、モバイルファーストインデックスに移行し、スマホ版サイトの評価が優先されると発表しました。
そのためにスマホに合わせた表示速度が速いものを提供していかないといけなくなりました。
表示速度が遅いデメリット
表示速度が遅いデメリットは、具体的に以下のものがあります。
- デメリット①ユーザビリティの低下
- デメリット②SEO評価に対する影響
- デメリット③アクセスの低下
- デメリット④コンバージョンの低下
では詳しく見ていきましょう。
デメリット①ユーザビリティ(使い勝手)の低下
表示速度が遅いデメリットの1つ目は、ユーザビリティ(使い勝手)の低下です。というのも表示速度が遅いと、なかなかサイトにアクセスできません。
そのために悩みに対する答えを見つけることができないからです。するとアクセスする意味が、なくなります。
例えばブログで稼ぐ方法を知りたいのに、表示速度が遅いとなかなか文章や画像が表示されなくなります。すると答えを見つけるのが、遅くなりますよね。
だから表示速度が遅くなると、読者のユーザビリティが下がります。
デメリット②SEO評価に対する影響
表示速度が遅いデメリットの2つ目は、SEO評価に対する影響が出て来ることです。というのも検索して、遅いと読者はブラウザの戻るボタンを押します。
するとその行動はGoogle先生によって、サイトの満足度として記録されます。するとサイトのSEO評価になります。
遅くて、戻るボタンを多く押されるサイトを、検索エンジンが上位表示するかというと、答えはノーです。
例えば、アフィリエイトのやり方に関するブログを書いていて、表示速度が遅いと読者が離れます。そうなると検索エンジンは読者の反応を見ているので、上位表示されなくなるわけです。
ですから表示速度が遅くなると、SEO評価に対する影響があります。
デメリット③アクセス数の低下
表示速度が遅いデメリットの3つ目は、アクセス数の低下です。これは、SEOの評価に影響するからです。
SEOの評価に影響すると上位表示されなくなりますから、アクセス数の低下は当然です。
例えばあなたが、アフィリエイトの記事を書いていたとします。で表示速度が遅くなると、読者はブラウザの戻るボタンを押し、また別の記事に行きます。
読者は使い勝手の悪いものよりも、使い勝手のいいページを探しに行きます。するとSEO的に、順位が下がってアクセスが下がるという感じです。
表示速度が遅くなると、アクセス的にも低下しますね。
デメリット④報酬額の低下
デメリットの4つ目は、報酬額の低下です。というのも、アクセス数が低下するからです。
| 検索順位 |
クリック数 |
| 1位 |
13.94％ |
| 2位 |
7.52％ |
| 3位 |
4.68％ |
| 4位 |
3.91％ |
| 5位 |
2.98％ |
| 6位 |
2.42％ |
| 7位 |
2.06％ |
| 8位 |
1.78％ |
| 9位 |
1.46％ |
| 10位 |
1.32％ |
※引用元：2021 CTR Research Study: The Largest Ever for SEO
上記は検索順位別のCTRの表です。1位と2位の差はたった1つの差なのに、6.42ポイントも差があります。
アフィリエイトの報酬額は、掛け算です。そのためにアクセスが下がると、報酬額も下がります。
※詳しくは、アフィリエイトのCVRを上げるための7つの方法【初心者でも簡単】にて解説しているので、ぜひお読みくださいね。
表示速度が遅いと、報酬額の低下を引き起こします。
表示速度を速くするための対応策
じゃあどうしたら表示速度が上げられるのかというお話なんです。
対応策は、以下のとおり。
- 対応策①画像の遅延ロードの使用
- 対応策②コードの圧縮
- 対応策③使っていないCSSを削除する
- 対応策④画像の圧縮
- 対応策⑤AMP対応
- 対応策⑥カスタマイズの変更
- 対応策⑦内部リンクの貼り方の見直し
- 対応策⑧アイコンの見直し
- 対応策⑨デザインの変更
- 対応策⑩CSSコードのインライン化
- 対応策⑪javascriptを使わない
- 対応策⑫jquery取得先の統一
では詳しく見ていきましょう。
対応策①画像の遅延ロードの使用
対応策の1つ目は、画像の遅延ロードの使用です。
画像の遅延ロードはその画像の場所に行くと読み込みを始めるというものでGoogle先生も推奨している方法です。
採用しているかどうかに関しては、ブログサービスによるところがあります。ちなみにはてなブログやWordpressは、遅延ロードを採用しています。
遅延ロードの仕方の詳しくは、記事画像の遅延読み込みについに対応!!【はてなブログ】にて詳しく解説していますので、ぜひお読みください。
対応策②コードの圧縮
対応策の2つ目は、コードの圧縮です。というのもコードのデータ量って半端ないからです。
例えば、文中の改行です。改行って人にとっては見えない存在なので、何のデータ量もないことになります。しかし、サーバー的にはデータ量が膨れ上がる理由になります。
データ量が多くなると、表示速度が遅くなりますから、なるべくならないほうがいいです。コードを圧縮をして、データ量を少なくしましょう。
コードのデータ量を下げる方法は、以下のものがあります。
CSSコードの圧縮
では詳しく、見ていきましょう。
CSSコードの圧縮
コードの圧縮の種類の3つ目は、CSSコードの圧縮です。これは優先度高めです。というのも、HTMLやCSSに比べると桁違いに行数が多いからです。
それに伴い、データ量も多くなってしまいますから圧縮するとけっこうな節約になります。かなりおすすめです。
CSSの圧縮ツールがあって、そちらにコードをコピペしたら簡単に圧縮できます。
圧縮ツールに関しては、クリックだけでOKのCSS圧縮ツールおすすめ5選【初心者向け】にて詳しく解説しています。ぜひお読みください。
対応策③使っていないCSSコードの削除
対応策の3つ目は、使っていないCSSコードの削除です。使っていないCSSコードは、削除すべきです。
例えば僕の場合は、あわせて読みたいに使う四角の囲みを使うことは少ないです。そのため、使用率から、必要のないコードと判断して、削除しました。
こういうコードはおいておくと、データ量が多くなってしまいます。そのために削除した方がいいです。
CSSの削除の方法に関しては、不要なCSSの削除の仕方【割り出しツールも紹介】にて詳しく解説しました。ぜひお読みの上やってみましょう。
対応策④画像の圧縮
対応策の4つ目は、画像の圧縮です。これも優先度高いです。というのも画像は、データ量があるからです。
例えば、最新のiPhone14で撮影された写真の解像度は、大きくなり今や、約4000px × 約3000pxになっています。その写真をそのまま貼ったら容量が大きすぎます。
データ量が大きすぎると、表示速度が遅くなってしまいます。Wordpressをお使いの場合は、プラグインを入れることができるので大丈夫ですが、ブログサービスの場合は、プラグインが入れられないです。画像の圧縮は、絶対しておく方がいいです。
画像の使い方には、特に注意が必要です。
使い方に関しては、無料で使える高画質な画像圧縮ツール7選【ブログ記事向き】にて詳しく解説していますので、参考にしてやってみましょう。
対応策⑤AMP対応
対応策の5つ目は、AMP対応することです。というのもAMP対応は表示速度が、最高で4倍になるからです。
AMPは、別のページとして、新しいページを作ってそこにアクセスするシステムです。そのために軽くなるのがいい点です。
とはいえ、新しい軽いページを作成することで重複コンテンツになることがあるので、注意は必要です。
AMPに関する詳細に関しては、はてなブログのAMP対応【基礎知識からやるべきかまで一挙解説】 にて解説しましたのでぜひお読みくださいね。
対応策⑥カスタマイズの変更
対応策の6つ目は、カスタマイズの変更です。小さいデータ量でできるカスタマイズを使いましょう。カスタマイズは以下の通り。
- ソーシャルボタンの変更
- スターを非表示にする
- コメントを非表示にする
では詳しく見ていきましょう。
ソーシャルボタンの変更
ソーシャルボタンの変更です。ソーシャルボタンって、データ量を食うものです。
ブログサービスの場合は、読者にどのくらいのフォローされているかを見えるように、Javascriptを使ってカウンタを載せているものがほとんどです。
でも、データ量も多くなってしまいます。ですからソーシャルボタンに関しては、カスタマイズして変更するほうがいいです。
ソーシャルボタンのカスタマイズは、SNSシェアボタンを設置する方法【はてなブログ】【コピペOKSNSシェアボタンを設置する方法【はてなブログ】【コピペOK】にて詳しく解説しているので、ぜひお読みください。
スターを非表示にする
スターの非表示ですね。これははてなブログのみのカスタマイズです。
スターボタンとは、SNSでいういいねみたいなものです。スターボタンは、画像を使っているので、データ量が大きくなります。
そのために表示しておくと、表示速度が遅くなりますね。
設定→詳細設定と進み、チェックを外しておいたほうがいいです。
コメントを非表示にする
コメントを非表示にすることも効果的です。というのもコメントには、なんでもかけるからです。
一時期、コメントにいっぱい書きこまれて、アフィリエイトをする人を刈る「アフィリエイター狩り」が流行りました。
コメントに書かれたことも、データ量に大きくかかわります。そのために重くなってしまいますから、コメントは設定から非表示にしたほうがいいです。
コメント欄に関する詳細は、はてなブログのコメントは非表示が一番【収益化を考えている初心者へ】 にて解説しています。ぜひお読みの上やってみましょう。
対応策⑦内部リンクの貼り方の見直し
対応策の7つ目は、内部リンクの貼り方の見直しです。簡単に言うと内部リンクに、ブログカードを使っていないかを見直しましょう。
というのもブログカードを使ってしまうと、どうしても画像を使ってしまうためにデータ量が大きくなります。
ブログカードは使わずに、テキストリンクを使うほうがデータ量も少なくクリック率も高くなるのでいいです。
内部リンクの貼り方に関しては、【初心者向け】内部リンクの貼り方【概要からコツまでばっちり解説】にて詳しく解説していますのでぜひ参考にやってみましょう。
対応策⑧Fontawesomeの削除
対応策の8つ目は、Fontawesomeの削除です。アイコンといえばFontawesomeという風潮があります。でも特にはてなブログを使っている場合は、Fontawesomeはやめておいたほうがいいです。
というのも、ブログ内に別のアイコンが埋め込まれているからです。そこにまたアイコンを入れるとデータ量が多くなってしまいます。使わないものがあるとデータ量が膨れちゃいますので、読み込みに時間がかかてしまいます。
Fontawesomeを使わない方法に関しては、Fontawesomeは使わないほうがいい話【初心者向け】 にて詳しく解説していますのでそちらをぜひお読みの上やってみましょう。
対応策⑨デザインテーマの変更
対応策の9つ目は、デザインテーマの変更です。デザインによって、表示速度が遅いものもあります。
なるべく軽いものに変更して、データ量を減らしましょう。
おすすめのデザインに関しては、はてなブログのテーマの選び方を解説【おすすめテーマもあり】にて詳しく解説しています。ぜひお読みの上、やってみましょう。
対応策⑩cssのインライン化
対応策の10個目は、CSSのインライン化です。CSSのインライン化とは、文章の中にCSSコードを書いて、表示速度を早くする方法です。
CSSは読み込みに行くときに全部の記事を回りますが、記事ごとに入れるなら、CSSはその記事だけを読み込めばいいので早く済みます。
デメリットは、その記事だけにしか反映されないことです。
インライン化の方法に関しては、CSSインライン化でブログの表示速度を上げる方法【はてなブログ】にて詳しく解説しているので、そちらをお読みの上やってみましょう。
対応策⑪Javacriptをなるべく使わない
対応策の11個目は、Javascriptをなるべく使わないことです。というのも表示速度が遅くなるからです。
Javascriptのコードが見つかれば、読みこみを開始するシステムになっていますが、読み込み方に問題があるんです。
JavaScriptのコードが見つかると一つ一つ読み込みを開始するシステムで、一つの処理が終わるまで、他のCSSコードの読み込みが一切出来ないんです。そのために使いすぎると、表示速度が遅くなります。
なるべくカスタマイズするときには、CSSでできるものを選ぶようにしておきましょう。
対応策⑫Jquery取得先の統一
対応策の12個目は、Jqueryの取得先の統一です。けっこう多いのが、Jqueryの読み込み先を分けているサイトです。
実はJqueryの読み込み先を分けてしまうと、設定した読み込み先を読み込みに行くために、表示速度が遅くなってしまいます。
ですから取得先の統一はしておくことが賢明です。
対策法をすべて試してみたら、効果が絶大だった話
対策法をすべて試してみたら、効果は絶大でした。このブログ一番最初のスペックは、以下の通り。
- テーマ:minimalism
- 当時のページスピード：パソコン→30、モバイル20
数値から見ると、超絶遅いですよね。しかし上記の方法を試してすべて終わったころには、以下のようになっていました。
- テーマ：smooth
- ページスピード：パソコン→91、モバイル：55
ものすごい上昇率です。ただモバイルに対する上昇率は悪いのが気になりましたが、もともとブログサービスはPC用に開発されていて、モバイル用は発達していないのが現状です。
しかもこれが終わってから、記事への流入率も高まり、読まれるようになりました。そのために、モチベーションが下がりにくくなりました。
ですから、絶対におすすめの方法なのです。
まとめ｜ブログは軽いほうが全然いい
お疲れさまでした。ここまでサイトの表示速度の上げ方をお話してきました。まとめると、以下の通り。
まとめ
- 結論から言うと表示速度が遅いページの価値が下がっている。というのも速く答えを知りたいから。
- ページの表示速度は3秒未満に納めないといけない。というのも離脱率が発生してしまうから。
- 表示速度が重要視される理由は以下の通り。
- ①スマホの急激な普及
- ②時代の流れはモバイルに変更した
- 表示速度が遅いデメリットは以下の通り。
- ①ユーザビリティの低下
- ②SEO評価に対する影響
- ③アクセスの低下
- ④コンバージョンの低下
- 表示速度を速くするための対応策に関しては以下の通り。
- 対応策①画像の遅延ロードの使用
- 対応策②コードの圧縮
- 対応策③使っていないCSSを削除する
- 対応策④画像の圧縮
- 対応策⑤AMP対応
- 対応策⑥カスタマイズの変更
- 対応策⑦内部リンクの貼り方の見直し
- 対応策⑧アイコンの見直し
- 対応策⑨デザインの変更
- 対応策⑩CSSコードのインライン化
- 対応策⑪Javascriptを使わない
- 対応策⑫Jquery取得先の統一
- 対策法をすべて試してみたら、効果が絶大でかなりおすすめ。
という感じですね。
スマホ時代の今、いつ検索をしたくなるかはわかりません。ですからスマホからでもサクサク動くこと表示速度の速いページがいいページと言われます。
速いに越したことはありません。一つ一つやってみて、速いサイトを目指しましょう。
今回は以上です。
Jouji
- 表示速度が遅いページの価値が下がっている
- 表示速度が重要視される理由とは
- 表示速度が遅いデメリット
- 表示速度を速くするための対応策
- 対策法をすべて試してみたら、効果が絶大だった話
こんにちわ、Jouji(@jouji0720)です。
ブログを書いていて、「表示速度が遅いなあ」って感じてはいませんか?
今回は、サイトの表示速度を爆速化させる方法をご紹介していきましょう。
この記事を読めば、今の表示速度が遅いページの価値や表示速度が重要視されている理由、遅いサイトのデメリットから表示速度の爆速化させるための対応策案までまるっとばっちりわかっちゃいます。
この記事を書く僕は、ブログ運営歴4年目。
今ではアフィリエイトからの収益も伸びてきて、毎月5,000円ほどいただいています。
そんな僕もブログを作りたての頃は、表示速度のことまで頭が回らずどうやったら速くなるのかを知りませんでした。
でもインターネットである記事を読んで、やってみたら爆速化しました。
そんな方法なのでぜひ最後までお読みくださいね。
では行ってみましょう。
Here We Go!!
【結論】表示速度の遅いサイトは、価値が下がっている
結論から言うと表示速度が遅いウェブページは、価値が下がっています。というのも、みんな早く答えを知りたいからです。
Googleの調査によれば、3秒を超えるとアクセスした読者の53％の人が「もういいや」ってやめてしまうといいます。
ページの離脱率に関しては、以下の画像の通り。
引用元：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秒を超えてしまうと、離脱率が上がり始めてしまうからです。
ですから、表示速度を速くするための努力が必要です。
とはいえ、コンテンツの内容の充実が、大前提
とはいえ、コンテンツ内容の充実は、大前提です。というのも内容がしょぼかったら、Google先生に認識もしてもらえても、読者の満足度が上がらないからです。
内容が充実していないページは、穴の開いたコップに水を入れるようなものです。どんどん水を入れても、水がこぼれてしまうので意味がありません。
だからコンテンツ内容の充実は、大前提になるのです。
※コンテンツの充実をさせたいなら、アフィリエイトで稼げるブログの書き方【テンプレあります】にて詳しく、説明しているのでどうぞご覧ください。
表示速度が重要視される理由とは
どうしてそこまで表示速度が重要視されるのでしょうか。表示速度が重要視される理由とは、以下の通り。
- 理由①スマホの急激な普及
- 理由②時代の流れはモバイルに変更した
詳しく、見ていきましょう。
理由①スマホの急激な普及
理由の1つ目は、スマホの急激な普及です。今現在スマホの普及率は30代までで、96％を超えていて、10人いたら9人が持っている状態になっています。
中には検索をパソコンからするのではなく、スマホからするという人も多くなってきました。
そうなるとどうしてもスマホを使っている人が、マジョリティー(多数派)になります。そのため、スマホに合わせる必要が出てきます。表示速度が、問題になったのです。
理由②時代の流れはモバイルに変更した
理由の2つ目は、時代の流れがモバイルに変更したことです。
Google先生は2020年の9月から、モバイルファーストインデックスに移行し、スマホ版サイトの評価が優先されると発表しました。
そのためにスマホに合わせた表示速度が速いものを提供していかないといけなくなりました。
表示速度が遅いデメリット
表示速度が遅いデメリットは、具体的に以下のものがあります。
- デメリット①ユーザビリティの低下
- デメリット②SEO評価に対する影響
- デメリット③アクセスの低下
- デメリット④コンバージョンの低下
では詳しく見ていきましょう。
デメリット①ユーザビリティ(使い勝手)の低下
表示速度が遅いデメリットの1つ目は、ユーザビリティ(使い勝手)の低下です。というのも表示速度が遅いと、なかなかサイトにアクセスできません。
そのために悩みに対する答えを見つけることができないからです。するとアクセスする意味が、なくなります。
例えばブログで稼ぐ方法を知りたいのに、表示速度が遅いとなかなか文章や画像が表示されなくなります。すると答えを見つけるのが、遅くなりますよね。
だから表示速度が遅くなると、読者のユーザビリティが下がります。
デメリット②SEO評価に対する影響
表示速度が遅いデメリットの2つ目は、SEO評価に対する影響が出て来ることです。というのも検索して、遅いと読者はブラウザの戻るボタンを押します。
するとその行動はGoogle先生によって、サイトの満足度として記録されます。するとサイトのSEO評価になります。
遅くて、戻るボタンを多く押されるサイトを、検索エンジンが上位表示するかというと、答えはノーです。
例えば、アフィリエイトのやり方に関するブログを書いていて、表示速度が遅いと読者が離れます。そうなると検索エンジンは読者の反応を見ているので、上位表示されなくなるわけです。
ですから表示速度が遅くなると、SEO評価に対する影響があります。
デメリット③アクセス数の低下
表示速度が遅いデメリットの3つ目は、アクセス数の低下です。これは、SEOの評価に影響するからです。
SEOの評価に影響すると上位表示されなくなりますから、アクセス数の低下は当然です。
例えばあなたが、アフィリエイトの記事を書いていたとします。で表示速度が遅くなると、読者はブラウザの戻るボタンを押し、また別の記事に行きます。
読者は使い勝手の悪いものよりも、使い勝手のいいページを探しに行きます。するとSEO的に、順位が下がってアクセスが下がるという感じです。
表示速度が遅くなると、アクセス的にも低下しますね。
デメリット④報酬額の低下
デメリットの4つ目は、報酬額の低下です。というのも、アクセス数が低下するからです。
| 検索順位 |
クリック数 |
| 1位 |
13.94％ |
| 2位 |
7.52％ |
| 3位 |
4.68％ |
| 4位 |
3.91％ |
| 5位 |
2.98％ |
| 6位 |
2.42％ |
| 7位 |
2.06％ |
| 8位 |
1.78％ |
| 9位 |
1.46％ |
| 10位 |
1.32％ |
※引用元：2021 CTR Research Study: The Largest Ever for SEO
上記は検索順位別のCTRの表です。1位と2位の差はたった1つの差なのに、6.42ポイントも差があります。
アフィリエイトの報酬額は、掛け算です。そのためにアクセスが下がると、報酬額も下がります。
※詳しくは、アフィリエイトのCVRを上げるための7つの方法【初心者でも簡単】にて解説しているので、ぜひお読みくださいね。
表示速度が遅いと、報酬額の低下を引き起こします。
表示速度を速くするための対応策
じゃあどうしたら表示速度が上げられるのかというお話なんです。
対応策は、以下のとおり。
- 対応策①画像の遅延ロードの使用
- 対応策②コードの圧縮
- 対応策③使っていないCSSを削除する
- 対応策④画像の圧縮
- 対応策⑤AMP対応
- 対応策⑥カスタマイズの変更
- 対応策⑦内部リンクの貼り方の見直し
- 対応策⑧アイコンの見直し
- 対応策⑨デザインの変更
- 対応策⑩CSSコードのインライン化
- 対応策⑪javascriptを使わない
- 対応策⑫jquery取得先の統一
では詳しく見ていきましょう。
対応策①画像の遅延ロードの使用
対応策の1つ目は、画像の遅延ロードの使用です。
画像の遅延ロードはその画像の場所に行くと読み込みを始めるというものでGoogle先生も推奨している方法です。
採用しているかどうかに関しては、ブログサービスによるところがあります。ちなみにはてなブログやWordpressは、遅延ロードを採用しています。
遅延ロードの仕方の詳しくは、記事画像の遅延読み込みについに対応!!【はてなブログ】にて詳しく解説していますので、ぜひお読みください。
対応策②コードの圧縮
対応策の2つ目は、コードの圧縮です。というのもコードのデータ量って半端ないからです。
例えば、文中の改行です。改行って人にとっては見えない存在なので、何のデータ量もないことになります。しかし、サーバー的にはデータ量が膨れ上がる理由になります。
データ量が多くなると、表示速度が遅くなりますから、なるべくならないほうがいいです。コードを圧縮をして、データ量を少なくしましょう。
コードのデータ量を下げる方法は、以下のものがあります。
CSSコードの圧縮
では詳しく、見ていきましょう。
CSSコードの圧縮
コードの圧縮の種類の3つ目は、CSSコードの圧縮です。これは優先度高めです。というのも、HTMLやCSSに比べると桁違いに行数が多いからです。
それに伴い、データ量も多くなってしまいますから圧縮するとけっこうな節約になります。かなりおすすめです。
CSSの圧縮ツールがあって、そちらにコードをコピペしたら簡単に圧縮できます。
圧縮ツールに関しては、クリックだけでOKのCSS圧縮ツールおすすめ5選【初心者向け】にて詳しく解説しています。ぜひお読みください。
対応策③使っていないCSSコードの削除
対応策の3つ目は、使っていないCSSコードの削除です。使っていないCSSコードは、削除すべきです。
例えば僕の場合は、あわせて読みたいに使う四角の囲みを使うことは少ないです。そのため、使用率から、必要のないコードと判断して、削除しました。
こういうコードはおいておくと、データ量が多くなってしまいます。そのために削除した方がいいです。
CSSの削除の方法に関しては、不要なCSSの削除の仕方【割り出しツールも紹介】にて詳しく解説しました。ぜひお読みの上やってみましょう。
対応策④画像の圧縮
対応策の4つ目は、画像の圧縮です。これも優先度高いです。というのも画像は、データ量があるからです。
例えば、最新のiPhone14で撮影された写真の解像度は、大きくなり今や、約4000px × 約3000pxになっています。その写真をそのまま貼ったら容量が大きすぎます。
データ量が大きすぎると、表示速度が遅くなってしまいます。Wordpressをお使いの場合は、プラグインを入れることができるので大丈夫ですが、ブログサービスの場合は、プラグインが入れられないです。画像の圧縮は、絶対しておく方がいいです。
画像の使い方には、特に注意が必要です。
使い方に関しては、無料で使える高画質な画像圧縮ツール7選【ブログ記事向き】にて詳しく解説していますので、参考にしてやってみましょう。
対応策⑤AMP対応
対応策の5つ目は、AMP対応することです。というのもAMP対応は表示速度が、最高で4倍になるからです。
AMPは、別のページとして、新しいページを作ってそこにアクセスするシステムです。そのために軽くなるのがいい点です。
とはいえ、新しい軽いページを作成することで重複コンテンツになることがあるので、注意は必要です。
AMPに関する詳細に関しては、はてなブログのAMP対応【基礎知識からやるべきかまで一挙解説】 にて解説しましたのでぜひお読みくださいね。
対応策⑥カスタマイズの変更
対応策の6つ目は、カスタマイズの変更です。小さいデータ量でできるカスタマイズを使いましょう。カスタマイズは以下の通り。
- ソーシャルボタンの変更
- スターを非表示にする
- コメントを非表示にする
では詳しく見ていきましょう。
ソーシャルボタンの変更
ソーシャルボタンの変更です。ソーシャルボタンって、データ量を食うものです。
ブログサービスの場合は、読者にどのくらいのフォローされているかを見えるように、Javascriptを使ってカウンタを載せているものがほとんどです。
でも、データ量も多くなってしまいます。ですからソーシャルボタンに関しては、カスタマイズして変更するほうがいいです。
ソーシャルボタンのカスタマイズは、SNSシェアボタンを設置する方法【はてなブログ】【コピペOKSNSシェアボタンを設置する方法【はてなブログ】【コピペOK】にて詳しく解説しているので、ぜひお読みください。
スターを非表示にする
スターの非表示ですね。これははてなブログのみのカスタマイズです。
スターボタンとは、SNSでいういいねみたいなものです。スターボタンは、画像を使っているので、データ量が大きくなります。
そのために表示しておくと、表示速度が遅くなりますね。
設定→詳細設定と進み、チェックを外しておいたほうがいいです。
コメントを非表示にする
コメントを非表示にすることも効果的です。というのもコメントには、なんでもかけるからです。
一時期、コメントにいっぱい書きこまれて、アフィリエイトをする人を刈る「アフィリエイター狩り」が流行りました。
コメントに書かれたことも、データ量に大きくかかわります。そのために重くなってしまいますから、コメントは設定から非表示にしたほうがいいです。
コメント欄に関する詳細は、はてなブログのコメントは非表示が一番【収益化を考えている初心者へ】 にて解説しています。ぜひお読みの上やってみましょう。
対応策⑦内部リンクの貼り方の見直し
対応策の7つ目は、内部リンクの貼り方の見直しです。簡単に言うと内部リンクに、ブログカードを使っていないかを見直しましょう。
というのもブログカードを使ってしまうと、どうしても画像を使ってしまうためにデータ量が大きくなります。
ブログカードは使わずに、テキストリンクを使うほうがデータ量も少なくクリック率も高くなるのでいいです。
内部リンクの貼り方に関しては、【初心者向け】内部リンクの貼り方【概要からコツまでばっちり解説】にて詳しく解説していますのでぜひ参考にやってみましょう。
対応策⑧Fontawesomeの削除
対応策の8つ目は、Fontawesomeの削除です。アイコンといえばFontawesomeという風潮があります。でも特にはてなブログを使っている場合は、Fontawesomeはやめておいたほうがいいです。
というのも、ブログ内に別のアイコンが埋め込まれているからです。そこにまたアイコンを入れるとデータ量が多くなってしまいます。使わないものがあるとデータ量が膨れちゃいますので、読み込みに時間がかかてしまいます。
Fontawesomeを使わない方法に関しては、Fontawesomeは使わないほうがいい話【初心者向け】 にて詳しく解説していますのでそちらをぜひお読みの上やってみましょう。
対応策⑨デザインテーマの変更
対応策の9つ目は、デザインテーマの変更です。デザインによって、表示速度が遅いものもあります。
なるべく軽いものに変更して、データ量を減らしましょう。
おすすめのデザインに関しては、はてなブログのテーマの選び方を解説【おすすめテーマもあり】にて詳しく解説しています。ぜひお読みの上、やってみましょう。
対応策⑩cssのインライン化
対応策の10個目は、CSSのインライン化です。CSSのインライン化とは、文章の中にCSSコードを書いて、表示速度を早くする方法です。
CSSは読み込みに行くときに全部の記事を回りますが、記事ごとに入れるなら、CSSはその記事だけを読み込めばいいので早く済みます。
デメリットは、その記事だけにしか反映されないことです。
インライン化の方法に関しては、CSSインライン化でブログの表示速度を上げる方法【はてなブログ】にて詳しく解説しているので、そちらをお読みの上やってみましょう。
対応策⑪Javacriptをなるべく使わない
対応策の11個目は、Javascriptをなるべく使わないことです。というのも表示速度が遅くなるからです。
Javascriptのコードが見つかれば、読みこみを開始するシステムになっていますが、読み込み方に問題があるんです。
JavaScriptのコードが見つかると一つ一つ読み込みを開始するシステムで、一つの処理が終わるまで、他のCSSコードの読み込みが一切出来ないんです。そのために使いすぎると、表示速度が遅くなります。
なるべくカスタマイズするときには、CSSでできるものを選ぶようにしておきましょう。
対応策⑫Jquery取得先の統一
対応策の12個目は、Jqueryの取得先の統一です。けっこう多いのが、Jqueryの読み込み先を分けているサイトです。
実はJqueryの読み込み先を分けてしまうと、設定した読み込み先を読み込みに行くために、表示速度が遅くなってしまいます。
ですから取得先の統一はしておくことが賢明です。
対策法をすべて試してみたら、効果が絶大だった話
対策法をすべて試してみたら、効果は絶大でした。このブログ一番最初のスペックは、以下の通り。
- テーマ:minimalism
- 当時のページスピード：パソコン→30、モバイル20
数値から見ると、超絶遅いですよね。しかし上記の方法を試してすべて終わったころには、以下のようになっていました。
- テーマ：smooth
- ページスピード：パソコン→91、モバイル：55
ものすごい上昇率です。ただモバイルに対する上昇率は悪いのが気になりましたが、もともとブログサービスはPC用に開発されていて、モバイル用は発達していないのが現状です。
しかもこれが終わってから、記事への流入率も高まり、読まれるようになりました。そのために、モチベーションが下がりにくくなりました。
ですから、絶対におすすめの方法なのです。
まとめ｜ブログは軽いほうが全然いい
お疲れさまでした。ここまでサイトの表示速度の上げ方をお話してきました。まとめると、以下の通り。
まとめ
- 結論から言うと表示速度が遅いページの価値が下がっている。というのも速く答えを知りたいから。
- ページの表示速度は3秒未満に納めないといけない。というのも離脱率が発生してしまうから。
- 表示速度が重要視される理由は以下の通り。
- ①スマホの急激な普及
- ②時代の流れはモバイルに変更した
- 表示速度が遅いデメリットは以下の通り。
- ①ユーザビリティの低下
- ②SEO評価に対する影響
- ③アクセスの低下
- ④コンバージョンの低下
- 表示速度を速くするための対応策に関しては以下の通り。
- 対応策①画像の遅延ロードの使用
- 対応策②コードの圧縮
- 対応策③使っていないCSSを削除する
- 対応策④画像の圧縮
- 対応策⑤AMP対応
- 対応策⑥カスタマイズの変更
- 対応策⑦内部リンクの貼り方の見直し
- 対応策⑧アイコンの見直し
- 対応策⑨デザインの変更
- 対応策⑩CSSコードのインライン化
- 対応策⑪Javascriptを使わない
- 対応策⑫Jquery取得先の統一
- 対策法をすべて試してみたら、効果が絶大でかなりおすすめ。
という感じですね。
スマホ時代の今、いつ検索をしたくなるかはわかりません。ですからスマホからでもサクサク動くこと表示速度の速いページがいいページと言われます。
速いに越したことはありません。一つ一つやってみて、速いサイトを目指しましょう。
今回は以上です。
Jouji
ブログ初心者
「サイトの表示速度が遅いんだけど、どうしたらいいんだろう。
SEO的にも遅いのはダメだって聞くし、対策法とか知りたいな。
ついでに表示速度が遅いとどうなるのかデメリットとかどこまで上げればいいのかまで教えてくれるとうれしいな。」
こんなお悩みにお答えします。
今回の記事でわかること
- 表示速度が遅いページの価値が下がっている
- 表示速度が重要視される理由とは
- 表示速度が遅いデメリット
- 表示速度を速くするための対応策
- 対策法をすべて試してみたら、効果が絶大だった話
こんにちわ、Jouji(@jouji0720)です。
ブログを書いていて、「表示速度が遅いなあ」って感じてはいませんか?
今回は、サイトの表示速度を爆速化させる方法をご紹介していきましょう。
この記事を読めば、今の表示速度が遅いページの価値や表示速度が重要視されている理由、遅いサイトのデメリットから表示速度の爆速化させるための対応策案までまるっとばっちりわかっちゃいます。
この記事を書く僕は、ブログ運営歴4年目。
今ではアフィリエイトからの収益も伸びてきて、毎月5,000円ほどいただいています。
そんな僕もブログを作りたての頃は、表示速度のことまで頭が回らずどうやったら速くなるのかを知りませんでした。
でもインターネットである記事を読んで、やってみたら爆速化しました。
そんな方法なのでぜひ最後までお読みくださいね。
では行ってみましょう。
Here We Go!!
【結論】表示速度の遅いサイトは、価値が下がっている
結論から言うと表示速度が遅いウェブページは、価値が下がっています。というのも、みんな早く答えを知りたいからです。
Googleの調査によれば、3秒を超えるとアクセスした読者の53％の人が「もういいや」ってやめてしまうといいます。
ページの離脱率に関しては、以下の画像の通り。
引用元：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秒を超えてしまうと、離脱率が上がり始めてしまうからです。
ですから、表示速度を速くするための努力が必要です。
とはいえ、コンテンツの内容の充実が、大前提
とはいえ、コンテンツ内容の充実は、大前提です。というのも内容がしょぼかったら、Google先生に認識もしてもらえても、読者の満足度が上がらないからです。
内容が充実していないページは、穴の開いたコップに水を入れるようなものです。どんどん水を入れても、水がこぼれてしまうので意味がありません。
だからコンテンツ内容の充実は、大前提になるのです。
※コンテンツの充実をさせたいなら、アフィリエイトで稼げるブログの書き方【テンプレあります】にて詳しく、説明しているのでどうぞご覧ください。
表示速度が重要視される理由とは
どうしてそこまで表示速度が重要視されるのでしょうか。表示速度が重要視される理由とは、以下の通り。
- 理由①スマホの急激な普及
- 理由②時代の流れはモバイルに変更した
詳しく、見ていきましょう。
理由①スマホの急激な普及
理由の1つ目は、スマホの急激な普及です。今現在スマホの普及率は30代までで、96％を超えていて、10人いたら9人が持っている状態になっています。
中には検索をパソコンからするのではなく、スマホからするという人も多くなってきました。
そうなるとどうしてもスマホを使っている人が、マジョリティー(多数派)になります。そのため、スマホに合わせる必要が出てきます。表示速度が、問題になったのです。
理由②時代の流れはモバイルに変更した
理由の2つ目は、時代の流れがモバイルに変更したことです。
Google先生は2020年の9月から、モバイルファーストインデックスに移行し、スマホ版サイトの評価が優先されると発表しました。
そのためにスマホに合わせた表示速度が速いものを提供していかないといけなくなりました。
表示速度が遅いデメリット
表示速度が遅いデメリットは、具体的に以下のものがあります。
- デメリット①ユーザビリティの低下
- デメリット②SEO評価に対する影響
- デメリット③アクセスの低下
- デメリット④コンバージョンの低下
では詳しく見ていきましょう。
デメリット①ユーザビリティ(使い勝手)の低下
表示速度が遅いデメリットの1つ目は、ユーザビリティ(使い勝手)の低下です。というのも表示速度が遅いと、なかなかサイトにアクセスできません。
そのために悩みに対する答えを見つけることができないからです。するとアクセスする意味が、なくなります。
例えばブログで稼ぐ方法を知りたいのに、表示速度が遅いとなかなか文章や画像が表示されなくなります。すると答えを見つけるのが、遅くなりますよね。
だから表示速度が遅くなると、読者のユーザビリティが下がります。
デメリット②SEO評価に対する影響
表示速度が遅いデメリットの2つ目は、SEO評価に対する影響が出て来ることです。というのも検索して、遅いと読者はブラウザの戻るボタンを押します。
するとその行動はGoogle先生によって、サイトの満足度として記録されます。するとサイトのSEO評価になります。
遅くて、戻るボタンを多く押されるサイトを、検索エンジンが上位表示するかというと、答えはノーです。
例えば、アフィリエイトのやり方に関するブログを書いていて、表示速度が遅いと読者が離れます。そうなると検索エンジンは読者の反応を見ているので、上位表示されなくなるわけです。
ですから表示速度が遅くなると、SEO評価に対する影響があります。
デメリット③アクセス数の低下
表示速度が遅いデメリットの3つ目は、アクセス数の低下です。これは、SEOの評価に影響するからです。
SEOの評価に影響すると上位表示されなくなりますから、アクセス数の低下は当然です。
例えばあなたが、アフィリエイトの記事を書いていたとします。で表示速度が遅くなると、読者はブラウザの戻るボタンを押し、また別の記事に行きます。
読者は使い勝手の悪いものよりも、使い勝手のいいページを探しに行きます。するとSEO的に、順位が下がってアクセスが下がるという感じです。
表示速度が遅くなると、アクセス的にも低下しますね。
デメリット④報酬額の低下
デメリットの4つ目は、報酬額の低下です。というのも、アクセス数が低下するからです。
| 検索順位 |
クリック数 |
| 1位 |
13.94％ |
| 2位 |
7.52％ |
| 3位 |
4.68％ |
| 4位 |
3.91％ |
| 5位 |
2.98％ |
| 6位 |
2.42％ |
| 7位 |
2.06％ |
| 8位 |
1.78％ |
| 9位 |
1.46％ |
| 10位 |
1.32％ |
※引用元：2021 CTR Research Study: The Largest Ever for SEO
上記は検索順位別のCTRの表です。1位と2位の差はたった1つの差なのに、6.42ポイントも差があります。
アフィリエイトの報酬額は、掛け算です。そのためにアクセスが下がると、報酬額も下がります。
※詳しくは、アフィリエイトのCVRを上げるための7つの方法【初心者でも簡単】にて解説しているので、ぜひお読みくださいね。
表示速度が遅いと、報酬額の低下を引き起こします。
表示速度を速くするための対応策
じゃあどうしたら表示速度が上げられるのかというお話なんです。
対応策は、以下のとおり。
- 対応策①画像の遅延ロードの使用
- 対応策②コードの圧縮
- 対応策③使っていないCSSを削除する
- 対応策④画像の圧縮
- 対応策⑤AMP対応
- 対応策⑥カスタマイズの変更
- 対応策⑦内部リンクの貼り方の見直し
- 対応策⑧アイコンの見直し
- 対応策⑨デザインの変更
- 対応策⑩CSSコードのインライン化
- 対応策⑪javascriptを使わない
- 対応策⑫jquery取得先の統一
では詳しく見ていきましょう。
対応策①画像の遅延ロードの使用
対応策の1つ目は、画像の遅延ロードの使用です。
画像の遅延ロードはその画像の場所に行くと読み込みを始めるというものでGoogle先生も推奨している方法です。
採用しているかどうかに関しては、ブログサービスによるところがあります。ちなみにはてなブログやWordpressは、遅延ロードを採用しています。
遅延ロードの仕方の詳しくは、記事画像の遅延読み込みについに対応!!【はてなブログ】にて詳しく解説していますので、ぜひお読みください。
対応策②コードの圧縮
対応策の2つ目は、コードの圧縮です。というのもコードのデータ量って半端ないからです。
例えば、文中の改行です。改行って人にとっては見えない存在なので、何のデータ量もないことになります。しかし、サーバー的にはデータ量が膨れ上がる理由になります。
データ量が多くなると、表示速度が遅くなりますから、なるべくならないほうがいいです。コードを圧縮をして、データ量を少なくしましょう。
コードのデータ量を下げる方法は、以下のものがあります。
CSSコードの圧縮
では詳しく、見ていきましょう。
CSSコードの圧縮
コードの圧縮の種類の3つ目は、CSSコードの圧縮です。これは優先度高めです。というのも、HTMLやCSSに比べると桁違いに行数が多いからです。
それに伴い、データ量も多くなってしまいますから圧縮するとけっこうな節約になります。かなりおすすめです。
CSSの圧縮ツールがあって、そちらにコードをコピペしたら簡単に圧縮できます。
圧縮ツールに関しては、クリックだけでOKのCSS圧縮ツールおすすめ5選【初心者向け】にて詳しく解説しています。ぜひお読みください。
対応策③使っていないCSSコードの削除
対応策の3つ目は、使っていないCSSコードの削除です。使っていないCSSコードは、削除すべきです。
例えば僕の場合は、あわせて読みたいに使う四角の囲みを使うことは少ないです。そのため、使用率から、必要のないコードと判断して、削除しました。
こういうコードはおいておくと、データ量が多くなってしまいます。そのために削除した方がいいです。
CSSの削除の方法に関しては、不要なCSSの削除の仕方【割り出しツールも紹介】にて詳しく解説しました。ぜひお読みの上やってみましょう。
対応策④画像の圧縮
対応策の4つ目は、画像の圧縮です。これも優先度高いです。というのも画像は、データ量があるからです。
例えば、最新のiPhone14で撮影された写真の解像度は、大きくなり今や、約4000px × 約3000pxになっています。その写真をそのまま貼ったら容量が大きすぎます。
データ量が大きすぎると、表示速度が遅くなってしまいます。Wordpressをお使いの場合は、プラグインを入れることができるので大丈夫ですが、ブログサービスの場合は、プラグインが入れられないです。画像の圧縮は、絶対しておく方がいいです。
画像の使い方には、特に注意が必要です。
使い方に関しては、無料で使える高画質な画像圧縮ツール7選【ブログ記事向き】にて詳しく解説していますので、参考にしてやってみましょう。
対応策⑤AMP対応
対応策の5つ目は、AMP対応することです。というのもAMP対応は表示速度が、最高で4倍になるからです。
AMPは、別のページとして、新しいページを作ってそこにアクセスするシステムです。そのために軽くなるのがいい点です。
とはいえ、新しい軽いページを作成することで重複コンテンツになることがあるので、注意は必要です。
AMPに関する詳細に関しては、はてなブログのAMP対応【基礎知識からやるべきかまで一挙解説】 にて解説しましたのでぜひお読みくださいね。
対応策⑥カスタマイズの変更
対応策の6つ目は、カスタマイズの変更です。小さいデータ量でできるカスタマイズを使いましょう。カスタマイズは以下の通り。
- ソーシャルボタンの変更
- スターを非表示にする
- コメントを非表示にする
では詳しく見ていきましょう。
ソーシャルボタンの変更
ソーシャルボタンの変更です。ソーシャルボタンって、データ量を食うものです。
ブログサービスの場合は、読者にどのくらいのフォローされているかを見えるように、Javascriptを使ってカウンタを載せているものがほとんどです。
でも、データ量も多くなってしまいます。ですからソーシャルボタンに関しては、カスタマイズして変更するほうがいいです。
ソーシャルボタンのカスタマイズは、SNSシェアボタンを設置する方法【はてなブログ】【コピペOKSNSシェアボタンを設置する方法【はてなブログ】【コピペOK】にて詳しく解説しているので、ぜひお読みください。
スターを非表示にする
スターの非表示ですね。これははてなブログのみのカスタマイズです。
スターボタンとは、SNSでいういいねみたいなものです。スターボタンは、画像を使っているので、データ量が大きくなります。
そのために表示しておくと、表示速度が遅くなりますね。
設定→詳細設定と進み、チェックを外しておいたほうがいいです。
コメントを非表示にする
コメントを非表示にすることも効果的です。というのもコメントには、なんでもかけるからです。
一時期、コメントにいっぱい書きこまれて、アフィリエイトをする人を刈る「アフィリエイター狩り」が流行りました。
コメントに書かれたことも、データ量に大きくかかわります。そのために重くなってしまいますから、コメントは設定から非表示にしたほうがいいです。
コメント欄に関する詳細は、はてなブログのコメントは非表示が一番【収益化を考えている初心者へ】 にて解説しています。ぜひお読みの上やってみましょう。
対応策⑦内部リンクの貼り方の見直し
対応策の7つ目は、内部リンクの貼り方の見直しです。簡単に言うと内部リンクに、ブログカードを使っていないかを見直しましょう。
というのもブログカードを使ってしまうと、どうしても画像を使ってしまうためにデータ量が大きくなります。
ブログカードは使わずに、テキストリンクを使うほうがデータ量も少なくクリック率も高くなるのでいいです。
内部リンクの貼り方に関しては、【初心者向け】内部リンクの貼り方【概要からコツまでばっちり解説】にて詳しく解説していますのでぜひ参考にやってみましょう。
対応策⑧Fontawesomeの削除
対応策の8つ目は、Fontawesomeの削除です。アイコンといえばFontawesomeという風潮があります。でも特にはてなブログを使っている場合は、Fontawesomeはやめておいたほうがいいです。
というのも、ブログ内に別のアイコンが埋め込まれているからです。そこにまたアイコンを入れるとデータ量が多くなってしまいます。使わないものがあるとデータ量が膨れちゃいますので、読み込みに時間がかかてしまいます。
Fontawesomeを使わない方法に関しては、Fontawesomeは使わないほうがいい話【初心者向け】 にて詳しく解説していますのでそちらをぜひお読みの上やってみましょう。
対応策⑨デザインテーマの変更
対応策の9つ目は、デザインテーマの変更です。デザインによって、表示速度が遅いものもあります。
なるべく軽いものに変更して、データ量を減らしましょう。
おすすめのデザインに関しては、はてなブログのテーマの選び方を解説【おすすめテーマもあり】にて詳しく解説しています。ぜひお読みの上、やってみましょう。
対応策⑩cssのインライン化
対応策の10個目は、CSSのインライン化です。CSSのインライン化とは、文章の中にCSSコードを書いて、表示速度を早くする方法です。
CSSは読み込みに行くときに全部の記事を回りますが、記事ごとに入れるなら、CSSはその記事だけを読み込めばいいので早く済みます。
デメリットは、その記事だけにしか反映されないことです。
インライン化の方法に関しては、CSSインライン化でブログの表示速度を上げる方法【はてなブログ】にて詳しく解説しているので、そちらをお読みの上やってみましょう。
対応策⑪Javacriptをなるべく使わない
対応策の11個目は、Javascriptをなるべく使わないことです。というのも表示速度が遅くなるからです。
Javascriptのコードが見つかれば、読みこみを開始するシステムになっていますが、読み込み方に問題があるんです。
JavaScriptのコードが見つかると一つ一つ読み込みを開始するシステムで、一つの処理が終わるまで、他のCSSコードの読み込みが一切出来ないんです。そのために使いすぎると、表示速度が遅くなります。
なるべくカスタマイズするときには、CSSでできるものを選ぶようにしておきましょう。
対応策⑫Jquery取得先の統一
対応策の12個目は、Jqueryの取得先の統一です。けっこう多いのが、Jqueryの読み込み先を分けているサイトです。
実はJqueryの読み込み先を分けてしまうと、設定した読み込み先を読み込みに行くために、表示速度が遅くなってしまいます。
ですから取得先の統一はしておくことが賢明です。
対策法をすべて試してみたら、効果が絶大だった話
対策法をすべて試してみたら、効果は絶大でした。このブログ一番最初のスペックは、以下の通り。
- テーマ:minimalism
- 当時のページスピード：パソコン→30、モバイル20
数値から見ると、超絶遅いですよね。しかし上記の方法を試してすべて終わったころには、以下のようになっていました。
- テーマ：smooth
- ページスピード：パソコン→91、モバイル：55
ものすごい上昇率です。ただモバイルに対する上昇率は悪いのが気になりましたが、もともとブログサービスはPC用に開発されていて、モバイル用は発達していないのが現状です。
しかもこれが終わってから、記事への流入率も高まり、読まれるようになりました。そのために、モチベーションが下がりにくくなりました。
ですから、絶対におすすめの方法なのです。
まとめ｜ブログは軽いほうが全然いい
お疲れさまでした。ここまでサイトの表示速度の上げ方をお話してきました。まとめると、以下の通り。
まとめ
- 結論から言うと表示速度が遅いページの価値が下がっている。というのも速く答えを知りたいから。
- ページの表示速度は3秒未満に納めないといけない。というのも離脱率が発生してしまうから。
- 表示速度が重要視される理由は以下の通り。
- ①スマホの急激な普及
- ②時代の流れはモバイルに変更した
- 表示速度が遅いデメリットは以下の通り。
- ①ユーザビリティの低下
- ②SEO評価に対する影響
- ③アクセスの低下
- ④コンバージョンの低下
- 表示速度を速くするための対応策に関しては以下の通り。
- 対応策①画像の遅延ロードの使用
- 対応策②コードの圧縮
- 対応策③使っていないCSSを削除する
- 対応策④画像の圧縮
- 対応策⑤AMP対応
- 対応策⑥カスタマイズの変更
- 対応策⑦内部リンクの貼り方の見直し
- 対応策⑧アイコンの見直し
- 対応策⑨デザインの変更
- 対応策⑩CSSコードのインライン化
- 対応策⑪Javascriptを使わない
- 対応策⑫Jquery取得先の統一
- 対策法をすべて試してみたら、効果が絶大でかなりおすすめ。
という感じですね。
スマホ時代の今、いつ検索をしたくなるかはわかりません。ですからスマホからでもサクサク動くこと表示速度の速いページがいいページと言われます。
速いに越したことはありません。一つ一つやってみて、速いサイトを目指しましょう。
今回は以上です。
Jouji
タイトルとURLをコピーしました
