月収が12万しかないので、お金稼いでみた

超初心者のアフィリエイト実践記

月収が12万しかないので、お金稼いでみた

はてなブログを軽くする3つの方法やってみたら、劇的に速くなりました

f:id:sibalove:20170922004540j:plain

 

こんにちは!しばらぶです。

 

少し前から自分のブログについて感じていたことがあります。

 

それは・・・

 

「表示されるの遅すぎじゃない??」

 

ということです。

f:id:sibalove:20170921225728j:plain

「マダカナ―」

あれ、通信規制掛かってる?」っていうくらい遅いので、ちょっとこれは何とかしないといけないと思いました。

 

というわけで、今回はこのブログの表示速度をできる限り速くしていきたいと思います!

 

 

現状の速度を調べてみる

まずは今どれくらい遅いのかを調べてみましょう。

 

sonoyama.org

こちらのサイト様に紹介されていたPageSpeed Insights(ページスピードインサイト)という無料のツールで調べることができるようです。

PageSpeed Insightsを使ってみる

使い方は簡単でした。

調べたいサイトのURLを入力して分析ボタンをクリック!

f:id:sibalove:20170921202019p:plain

 

モバイルとパソコンの両方の分析ができるようです。

まずはモバイルの結果がこちら。

f:id:sibalove:20170921202347p:plain

55でした。

やっぱり遅いみたいです。

いろいろと速くするためのアドバイスも表示されました。

 

そして、PCの結果がこちら。

f:id:sibalove:20170921202716p:plain

 

まさかのゼロ!!(笑)

f:id:sibalove:20170921204237j:plain

「なんてこった・・・」

酷いだろうとは思っていましたが、やっぱり酷いですね。これは非常にまずい。

早くなんとかせねばっ!

 

遅くなっている原因

画像が多い

先ほどの分析結果にも出ていましたが、大きな原因として自分でも予想がついていたのが、画像の多さです。

 

今読んでいただいているこの記事もそうなのですが、このブログ、とにかく画像の数が多いです。ひとつの記事に付き10枚くらい平気で載せています。

これを読み込むときに時間がかかっているのでしょう。

 

改善方法

私が行なった方法としては2つあります。

まず1つ目は

www.mochi-mochi-kun.com

 

こちらのサイト様を参考に、はてなフォトライフの設定から画質を80%にする方法。

 

f:id:sibalove:20170921214032p:plain

これで画質が落とされた画像に一つずつ貼り換えていきます。

 

2つ目は先ほどのPageSpeed Insightsから最適化された画像をダウンロードする方法。

f:id:sibalove:20170921213358p:plain

ダウンロードするとこんな感じ。

f:id:sibalove:20170921213624p:plain

 

こちらも記事の編集から貼り換えていきます。

 

どちらの方法がいいかというと、まずははてなフォトライフで大きすぎない画像にしておいて、それでも大きい画像についてはPageSpeed Insightsで最適化されたものを使えばいいかなと思います。

 

しかし、そもそも記事を書くときに気を付けていればいい話なのですが、筆者はファイルサイズなど、あまり考えたことがなかったので、すでに使えるツールがあるなら使わせてもらおう!というスタンスです(笑)

 

さあ、頑張って画像を貼り換えていきましょう。

 

結果

頑張って画像を貼り換えてきました。

改めて分析しなおしてみると、

f:id:sibalove:20170921231831p:plain

 

モバイル 5559

f:id:sibalove:20170921231844p:plain

 パソコン 03

 

このような結果になりました。

正直、思っていたより改善できてなくてガッカリ感が半端ないです。

 

この結果を見る限り、どうやらそもそもの原因は表示されている記事の多さなのかもしれません。

 

記事の多さ

モバイルとパソコンで約50の違いがあることからも推測できますが、パソコンでブログのトップ画面を開くと、最近の記事が7件開かれるようになっています。

それぞれの記事に本文、画像、はてなスター、コメント、ブクマボタンetc...が追加されているため、読み込みに時間がかかっているような気がします。

 

改善方法

とりあえず、ブログのトップで表示される記事の数を1つにしようと思います!

 

どこから設定すればいいのか不安でしたが、普通に設定の画面からできました(笑)

設定→詳細設定にトップページの記事数の欄があるので、そこを1にするだけです。

 

f:id:sibalove:20170921234428p:plain

 結果

 モバイルの方は変化がなかったので割愛しますが、

たったこれだけのことで、パソコンの方は

f:id:sibalove:20170921234645p:plain

 

なんと、355!!

モバイルとほぼ同じくらいまで改善されました(笑)

 

 重くなっていた一番の原因は記事の多さだったようですね。

 

しかしまだ45ほど改善の余地が残っています。

考えられることを解消していきましょう。

 

そもそも記事を表示しないようにする(アーカイブ形式)

「はてなブログ 軽くする」で検索してみると、こちらのサイト様がみつかりました。

lovdiv.hatenablog.com


そもそも記事を表示するのではなく、アーカイブ形式にしちゃおう!というわけですね。

 

改善方法

さっそく上記のサイト様の手順でやってみます。

 

設定→詳細設定→headに要素を追加の欄にコードをコピーして貼りつける。(コードの内容は上記サイト様参照)

あとは変更するボタンをクリック!

f:id:sibalove:20170922001732p:plain

無事にトップ画面をアーカイブ形式にすることができました!

(若干空白があるのは広告が表示されるスペースだからです。)

 

結果

パソコンの方が5557になりました。

期待していましたが、これもそこまで大きな変化ではありませんでしたね…。

しかし、トップらしい画面にはなったので良しとしておきましょう。

 

まとめ

今回はブログのトップ画面の表示速度が上がる方法を3つ試してみました。

結果としてはモバイルの方はあまり変わりませんでしたが、パソコンの方は057と、最初に比べたらかなり改善することができました。

 

PageSpeed Insightsでは他にも改善する手立てを教えてくれようとしていましたが、これ以上は今の筆者には少しレベルが高いと感じたので、ひとまずこれでよしとしておこうと思います(笑)

 

実際に作業中に自分のブログを開いてみても「速くなった!」という実感があったので、筆者としては満足しています。

 

とはいえ、もっと良くしていくことができるというのもわかったので、今後も読み込みが速くなるような方法があれば試していきたいと思います。

 

それでは、また別の記事でお会いしましょう!

 

f:id:sibalove:20171013193546p:plain