ブログ

ブログ表示スピードが遅い( ゚Д゚)超初心者が改善に奮闘した話

ブログの表示スピードが遅い!

やほ☆ブログデビューして、1か月半のしばづけだよ!

今回はブログ表示スピードについてお勉強したよ!

お勉強した理由は、当ブログに遊びに来てくれた方へ

『最大限のおもてなし』をするためだよ!

O MO TE NA SI (/ω\)

滝川クリステール(∩´∀`)∩←ちょっと古い

【この記事がオススメな人】

・ワードプレスの方

・ブログ初心者

・画像圧縮?何それ?

・表示スピード?何それ?

・良く分かんないまま記事を書いてる方(私の事だ!)

要は、私がやった事を皆に共有したいのさ(´_ゝ`)

【表示スピードを上げる為に】

  1. 画像圧縮
  2. 読み込みの範囲を設定
  3. キャッシュの設定
  4. 余分なウィジェットを減らす

1.表示スピードは、早い方が良いけど、、、理由は?

ブログの表示スピードが遅いとだめな理由

ネットサーフィン中に表示が遅いサイトに出会ったことありますか?

この『一人に一台スマホ』のご時世!

きっと表示スピードが遅くてイライラしたが事が一度はあるでしょう

読者の場合は『もー、おっそいなー(-“-)』で終わりですが

ブログ管理者としは、最低なんです( ゚Д゚)

具体的な数値で見ていきましょう!出典:AIアナリストブログより

『離脱率が上がる!』

ユーザの約50%が2秒以内のページ表示を期待し、読み込み速度が3秒以上かかると40%のユーザが離脱する

『直帰率が上がる!』

操作開始時間が3秒のサイトは1秒のサイトに比べ、コンバージョン率は38%低下、直帰率は50%上昇する

ひ、ひぇ~( ;∀;)

一生懸命、記事書いても表示スピードだけで半数近く離脱、直帰してしまうんです!

『待って~!良い記事あるから帰ってきてー!お願いー!』と言う心の叫びはネット上では届かないのですね、、、か、悲しい( ;∀;)

そんな悲しみを味合わないように

レッツ!表示スピード改善!

スポンサーリンク


2.まず、自分のブログの表示スピードを知ろう!

表示スピードをチェックする方法を2つご紹介!

どちらも無料でつかえます!

  1. Google PageSpeed Insights
  2. Googleアナリティクス

Google PageSpeed Insights

URLを自分で入力するチェック方法!

基本ブログは記事数が多いので、トップページを診断してみよう

『Google PageSpeed Insights』へ

【実際に診断してみた!】

当ブログ『猫にしばづけ』のトップページで診断!

モバイル版のチェック!

100点中『87点』まぁまぁですね!

表示スピードチェック!!モバイル

お次はパソコン版!

100点中『43点』( ゚Д゚)

おう!まさかの!ダメじゃん!

表示スピード!デスクトップ

ぐぐぐ、、、!

次はアナリティクスで診断してみよう!

Googleアナリティクス

Googleアナリティクスって何?って方は有名ブロガー『ヒトデさん』の

 完全初心者のためのブログの始め方『hitodeblog』を参考にしてください

では、Googleアナリティクスのどこを見れば良いのか?

①平均読み込み時間をチェック!

アナリティクスにログイン

『行動』⇒『サイト速度』⇒『概要』

実際のしばづけは『7秒越え!』

ダメじゃーん!( ;∀;)

②ページ単位でチェックする場合!

『行動』⇒『サイト速度』⇒『速度についての提案』

『PageSpeed スコア』と言う物を教えてくれます!

スコアは高ければ、高い方が良いです!

しばづけは『平均50点』

もう、居残り勉強!確定レベルだ!

もうダメダメじゃん(´_ゝ`)

もうダメダメじゃん(´_ゝ`)

ダメじゃん(´_ゝ`)

(´_ゝ`)

2.表示スピードを上げよう!具体策!

ブログの表示スピードを速めよう

さて、気を取り直して対策していくぜ!

【今回、表示スピードを上げる為にやったこと】

  1. 画像圧縮
  2. 読み込みの範囲を設定
  3. キャッシュの設定
  4. 余分なウィジェットを減らす

一個づつ詳しく見ていきましょう!

画像圧縮&読み込み範囲の設定

画像圧縮&読み込み範囲の設定に関しては、『ひつじアフィリエイト』の『【2018年版】WordPressのおすすめプラグイン10選を参考にしました!

①画像圧縮について

プラグイン『EWWW Image Optimizer』を有効化!

特徴は、何より簡単!!

初心者にとって『簡単』は外せない(゚∀゚)

設定については、ひつじさんの

【EWWW Image Optimizerの設定方法&使い方!画像圧縮でサイト軽量化を!】通り進めてください(∩´∀`)∩超分かりやすい!

②読み込み範囲の設定

プラグイン『Lazy Load』を有効化

【高速化プラグイン『Lazy Load』の使い方&初期設定は?】

こちらはひつじさんの書いてある通りだと、

私レベルの超初心者は設定中に『ポカン( ゚д゚)?』となるかも!?

ひつじさんの記事でつまずいた方は、

私がつまずいたポイントを【超初心者の目線】でまとめたよ!

プログラムコードって何!?怖い( ゚Д゚)方は読んでくださいね~

プラグイン!Lazy Load 入れてみた!
超初心者|プラグイン『Lazy Load』を有効化に兆戦!ちゃお☆ブログ歴約二か月のしばづけだよ! 今回はWPの便利機能! 前作の続き!ブログ表示スピード改善に役立つ!『Lazy L...

キャッシュの設定

ひつじさんの【WP Super Cacheの設定方法|キャッシュでサイトを高速化!】に詳しく説明がありますが、たまに不都合が出るらしい、、、

うーむ(´_ゝ`)

初心者の我々には、不都合が出た時にパニックになるので今回はパス!笑

もう少しレベルが上がったら挑戦しようかな(゚∀゚)

興味がある人はやってみてください(/ω\)

余分なウィジェットを減らす

『ウィジェットって何さ?』ってなるよね~

▽ブログに自分で設定できる便利機能▽

今回は2個のウィジェットを消しました!

  1. アーカイブ
  2. 検索欄
ウィジェット消した!サイト軽量化!

消した方がすっきりしていい感じだ(゚∀゚)

3.では、実際に表示スピードは上がったのか!?

こちらは設定、約3日間後に反映されるらしい!

反映された結果は、また追記します!

しばらくお待ちください(/ω\)

カミングスーン!ってやつだ!

(現在2018.6.22⇒6/25日UP予定)

楽しみだ(∩´∀`)∩

4.まとめ、読者に最大限のおもてなしを!

【今回のまとめ】

  1. 画像圧縮
  2. 読み込みの範囲を設定
  3. キャッシュの設定
  4. 余分なウィジェットを減らす

①②④は簡単だから、すぐにやってみてくださいね(゚∀゚)

ただ、初心者のうちに何か変更する前は

『必ずバックアップを取りましょう!』

お約束ですよ!d(゚∀゚)

5.あとがき~予定外だったのだ~

※ここからは有益な情報はありません。笑

 

しばづけは、この記事を書く前に【画像の圧縮】だけ実践してました!

そして、あまりにも簡単に【画像の圧縮】が出来たから

これは初心者に広めよう!記事書こう!と始めました!

書く前の記事の構成としては

①画像圧縮してみた。

②実際にスピード計測してみた。数値が良い!

③では、実際に私がやったこと―!と

画像圧縮を紹介するつもりだったんですが!

 

実際に表示スピードを測るとダメダメ(笑)

急遽、改善案を増やして今に至ります(笑)

この記事書いてよかったー(´_ゝ`)

記事書かなかったら、速度遅いままでした☆

ちゃんちゃん☆

ちょっとブログレベルが

アップしたしばづけより

ブログ運営について
【ブログ運営1か月目】本当に全くの「初心者がブログ開設」した話ちゃお☆ブログ初めて約1か月半が経ちます!しばづけです! 今回は初めての【ブログ運営】に関して書いていきます! 某有...
プラグイン!Lazy Load 入れてみた!
超初心者|プラグイン『Lazy Load』を有効化に兆戦!ちゃお☆ブログ歴約二か月のしばづけだよ! 今回はWPの便利機能! 前作の続き!ブログ表示スピード改善に役立つ!『Lazy L...
ABOUT ME
しばづけ
しばづけ
委託給食会社で10年働いた管理栄養士。 ブログ『猫にしばづけ』にて栄養士あるあるを綴っています。 栄養士がもっと自由で輝く為の情報を発信中! 自身が実際に体験したお得情報も随時UP!