くうかんしんぷるライフ

賃貸2LDKのおうちでも快適に、シンプルに暮らしたい

- Pickup -

エコ洗剤活用術
メゾネットのメリットデメリット
2LDK
無印おすすめ

はてなブログ表示速度改善策まとめ。モバイルが大幅改善!

f:id:ku-kahan:20191202130513p:plain

こんにちは、くうかです!

 

ブログの表示速度が気になり、マイペースに改善に取り組んできました。
そしてこの度ひと段落しましたので、実際に行ったことをまとめておこうと思います。

 

問題だったモバイルの速度が大幅に改善されましたヾ(*´∀`*)ノ

 

 

速度改善後のスピードをまずお見せします!

まず先にPageSpeed Insightsで、改善策を施した後にどの程度速度が変わったかをお見せします!

 

パソコン版は【88】だったのが、

f:id:ku-kahan:20191202132300p:plain

【90】になりました。
さほど変わりはありませんね(笑)
12月以降、数値は安定していませんでしたが、改善後は安定しています。

 

目に見えて遅かったのがモバイル版です。改善前は【25】でとっても遅い判定だったのが、

f:id:ku-kahan:20191202132304p:plain



なんと【54】まで改善されました!

 

やっと平均速度になってくれたぁぁぁ!!感無量!!
このあと実際におこなったことを挙げていきます。

 

はてなブログ表示速度改善まとめ

こちらの記事で、やったこと&これからやることをまとめてあります。

www.kurasitotonoe.com

大まかに言うと、

  • 画像の圧縮
  • はてなフォトライフの設定&アップロード
  • 重くなりそうな余計な機能を外す 

この3つに取り組みました。
赤字項目は当ブログの重要課題としました。

 

上記の項目と、新たに行った項目を書き出してみます。

 

画像を圧縮し、はてなフォトライフにアップロード

画像圧縮サイトにて圧縮後、画像サイズ・画質設定済のはてなフォトライフへアップロード。(詳しくは先程ご紹介したこちらの記事を参考にしてください)
これにより50KB以下に減らすことができます。

 

そして今までの記事に画像を貼り直しました。
(記事数が多いのでこれが1番大変でした。汗)

 

かなりマイペースに進めていたので3カ月もかかってしまいました(笑)

 

重くなりそうな余計な機能を外す

以前の記事と重複した内容になりますが、今回新たに加えたことと一緒に再度まとめておきます。

 

シェアボタンを軽いボタンにカスタマイズする

ブクマ数などを表示させるボタンはずっとくるくる回っていて数字がなかなか出てこないんですよね・・・。
当ブログではブクマ数はなくてもいいだろうと判断し、軽いボタンにしています。

 

WEBフォントのアイコンは、置き換えられるものははてなブログアイコンへ

ブログでよく使われている【Font Awesome】を使うと、head内に読み込みの記述を入れなければならなくなり、多少遅くなります。

 

しかし似たようなアイコンがはてなブログにデフォルトで用意されているのです。
これを使えば読み込みの記述は省くことができるということで、代替できる部分はデフォルトのものに変更しました。

 

デザイン>カスタマイズでアイコンを使う場合は、以下の記述でおうちの形のアイコンが出せます。(私もグローバルメニューやシェアボタンに利用しています)

<i class="blogicon-home"></i>

↓こんな感じで出ます。

 

使い方はこちらの記事に詳しく書かれていて大変参考になります。
CSSでの書き方も書かれていますよ♪

shirokai.hatenablog.com

 

トップページ・サイドバーでJavascriptを読み込まない

画像圧縮の次に速度に影響があったのがこれです。
トップページとサイドバーでJavascriptを読み込まないようにすること。

 

トップページとサイドバーでJavascriptを読み込んでしまうと、どのページを開く場合にも読み込みが行われてしまうんですよね。
遅くなる大きな原因となります。
具体的に行ったことを記載しておきます。

 

アドセンスの自動広告を外す

これはかなり勇気のいることです(笑)
自動広告を外してしまうと、アンカー広告やポップアップ広告も出なくなりますからね。
外すかどうかはご自分の判断でっ(; ・`д・´)

 

しかし記事内に広告をまとめたことにより、トップページの読み込みがかなり速くなりました!

www.kurasitotonoe.com

今のところ数か月外したままですが、今後気が変わる可能性はあるかも?( *´艸`)

 

サイドバーにもJavascriptを入れない

サイドバーもどのページの読み込みにも関係してくるのでJavascriptを外しました。
私が入れていたサイドバーのJavascriptは、

  • 楽天モーションウィジェット
  • ブログ村へのリンク

です。
楽天アフィリエイトのモーションウィジェットは、割とクリック率が高く、完全に外したくはありませんので、楽天に関する記事内に貼り付けるようにしました。

 

次にブログ村のPVランキングに参加するためにはブログパーツを貼らなければいけませんが、こちらのパーツならただのリンクなので安心です^^
※ランキングが表示されるパーツはJavascriptを使っています。

PVアクセスランキング にほんブログ村

なんか、大きさが押しやすくて好きなボタンです(笑)

 

jQueryもできれば読み込まない

jQueryってなんぞや?というレベルなのですが(-_-;)

 

よく『トップに戻るボタン』をページの右下に表示させているブログも多いかと思います。
このボタンを入れるためにjQueryを読み込んでいますよね。

 

このような、動きのあるページを作るためにjQueryを使うそうなんです。
中身はJavascriptってことでいいですかね(; ・`д・´)←あまりわかってない

 

私はぶっちゃけこのボタンを押したことがありません。
記事を読んでいる途中に誤って押してしまったことはあります。
しかし読んでいる途中なのにトップに戻されてしまっては切ない(/ω\)
ということもあり、読み込みも遅くなるのならと私は外してしまいました。
(見た目はとてもかっこいいんですけどね・・・)

 

最後に

モバイルの速度がようやく平均になり、ここまで上がれば私的には大丈夫かなと思います。
これ以上はやりすぎ感がある気がしますし、満足したので速度改善の巻はこれにて終了します(*^^)v

 

はてなブログは元々が遅めらしいので、少しでも離脱されないようにする対策は、多少はしておくといいのかなと個人的に思います。

 

本日も最後までご覧いただき、ありがとうございました。

 

こんな記事もあります

www.kurasitotonoe.com

www.kurasitotonoe.com

www.kurasitotonoe.com