はたらきアリ新聞~会社員×副業で生き抜く時代~

会社員が抱えるお金の悩みを解決するブログ

はたらきアリ新聞

【年収別】会社員の給料明細
【良いとこどり】会社員×副業
【スマホ1台】会社員が取り組む副業とは?
【忘れてはいけない】会社員の確定申告

はてなブログの読み込み速度を劇的に改善させる方法【不要なコードの徹底削除】

スポンサーリンク

スポンサーリンク

f:id:finana:20190810150217j:plain

 ブログサイトの読込速度が遅い問題は問題です。

その根拠は以下の通りです。

 

グーグル先生が述べていることを簡単に説明しますと、

『高いコンテンツであればサイトの読込速度は関係ありませんが、検索ユーザーは少しでも早く質問に対する答えを見つけたいと思っています。その意図に反するサイトはユーザーファーストではないため、サイトを評価するうえでの指標になります。』

(参照:Google ウェブマスター向け公式ブログ

 

遠回しでややこしいですね。

もっとストレートに言うと、【サイトの読込速度が遅かったら検索で上位に表示させないよ】ということでいいと思います。

 

ブログサイトのSEO対策を行ううえで重要な要素は以下の通りです。

 

・コンテンツの質(最重要)
・キーワードの適切な選定
・サイトデザイン
・サイトの読込速度
・サーバーの処理速度

 

などが挙げられます。

つまりグーグルが決めるサイトの評価とは複数の要素から複合的に決まってくるのです。

 

なので『検索』で少しでも上位を目指そうと思うのであればすべての要素を満たす必要があるのです。

 

サイトの読込速度が解決できないと前回の記事に書きました。

この問題が処理できないのであれば、はてなブログを継続するのが難しいとも思っていました。

www.worker-ant0818.work

しかし、今回サイトを運営するうえで不必要なパーツはないかを再検討しました。

要らないものは徹底排除!

特に必要ないなと思うものをサイトから削除していったことによりサイトスピードが改善することができました!

 

その方法を記すとともに、はてなブログとワードプレスの読込速度の比較を行いたいと思います。

 

 

読込速度改善のための『ブログ』ダイエット

 

 前回の記事でははてなブログでは解決が難しい問題として【ブログの読込速度が遅い】と指摘しました。

 

それは読込速度を表す数値にはっきりと表れています。

(パソコン)

f:id:finana:20190810091215j:plain

(モバイル)

 f:id:finana:20190810091228j:plain

これらを改善するにはカスタマイズしていたサイトのパーツを外すしかありませんでした。

サイトをダイエットさせて速度の数値を改善しようと考えたのです。

 

ダイエット項目は次の通りです。

 

・タイトル下に設置していたスライダーの削除
・アドセンス広告を3つ削除
・サイドバーの記事削減(※関連記事5記事➡︎3記事)
・サイドバーのアーカイブ削除
・不要になったHTMLやCSSの削除

 

その他、削除するうえで参考にした記事はこちらです。

(参照:はてなブログの読み込みを速くするために行ってきたことまとめ | SHIROMAG

 

以上をサイト上は不要と判断しました。

特に大きいのはスライダーです。

スライダーがサイトにあればカッコいい!

と設置したものだったのですが、読込に時間がかかっていたのは明白でした。

スライダーは最近のブログサイトのトレンドで憧れていましたが今回、思い切って削除します。

 

⇓スライダー設置記事 

www.worker-ant0818.work

 

今まではしたくないと思って避けてきた読込速度アップ方法でしたが仕方ありません。

 

はてなブログでは、カスタマイズは自分でHTMLとCSSを入力するのですが、今回は削除です。

 

それにしても面倒です。

 

CSSは600行を超えるコードが入っていたため、該当するコードを探し出すだけで一苦労なのです。

 

不要なコードを徹底削除|その効果は?

 

論より証拠です。

今回は多くのカスタマイズコードを削除し、いわゆるデフォルト状態に近づけましたのでスピードアップが確認できました。

 

(パソコン)

f:id:finana:20190813023852j:plain

(モバイル) 

f:id:finana:20190813023911j:plain

パソコン:54➡︎89
モバイル:26➡︎51

 

という結果になりました。

ほぼ【倍速】になったといってもいいでしょう。 

 

前回から大きく速度アップと言えます

 

しかしながらモバイルにおけるグーグルの評価は依然、低評価。

手放しで喜べません。


グーグルは特にモバイルファーストの姿勢を鮮明にしているので、モバイル速度は一番気にしなければなりません。

 

改善項目を解説

 

  1. タイトル下に設置していたスライダーの削除
    スライダーの設置のためのHTMLとCSSコードを削除しました。実はHTMLとCSSを削除しただけでは速度は上がりませんでした。
    結論としては、<script>で呼び出していたjqueryを「設定」➡「headに要素を追加」から削除する必要がありました。
    すべて削除しないと、結局読込作業を行ってしまうためスピードが上がらなかったのです。

  2. サイドバーのアドセンス広告を削除
    これも<script>から広告を呼び出していたため、読込時間に影響を与えていました。広告を6つから3つに減らすことで、少しはサイト負担の軽減に寄与したと思います。
    削除するにあたり、アドセンスのデータ管理よりクリック率が低い広告を外しました。

  3. サイドバーの記事削減(※合計8記事減)
    記事のアイキャッチ画像もすべて読込作業です。合計8つ減らすことによって、負担軽減となります。

  4. サイドバーのアーカイブ削除
    アーカイブは正直、あってもなくても良かったので要らないものは削除しました。

  5. 不要になったHTMLやCSSの削除
    編集中に不要となったもの、重なっていて削除してもサイトに影響を与えないコードを探してすべて削除しました。

 

HTMLやCSSはコードを入力すればするほど、読込時間に影響を与えます。

つまり、サイトのデザインを充実させるほど読込時間がかかるようになります。

これは仕方のないことですが、『不要なデザインは削除する』という基本を見直すきっかけとなりました。

 

有名ブログサイトは速いのか?

 

ここで一つの疑問が浮かびました。

有名なブログサイトはどれも最速なのだろうか?

という疑問です。

 

気になったので思い切って調べることにしました。

 

以下に有名ブログサイトの速度を測定してその結果を記録しました。

 

(マナブログ)

manablog.org

パソコン:69

モバイル:28

使用テーマ:minimal

 

(ブログ部)

ebloger.net

パソコン:100

モバイル:96

使用テーマ:WING(AFINGER5)

 

 

(今日はヒトデ祭りだぞっ!)

www.hitode-festival.com

パソコン:93

モバイル:61

使用テーマ:JIN

 

(クロネのブログ講座)

kurone43.com

パソコン:95

モバイル:52

使用テーマ:JIN

 

(マクリン)

makuring.com

パソコン:99

モバイル:82

使用テーマ:SANGO

 

 (ひつじアフィリエイト)

hituji-affiliate.com

パソコン:92

モバイル:39

使用テーマ:JIN

 

 

 

以上6つのサイトを参考にさせていただきました。

 

いずれもブログをやっているならば誰でも知っているくらい有名なサイトばかりです。

 

結論

 

サイトの速度を平均すると

 

パソコン:70程度
モバイル:60程度

 

が平均と言われています。

 

以上のことから上の6つのサイトは

『基本的に早い』

 

ということが言えると思います。

 

特に【ブログ部】は驚異的な速度です。

 

モバイルはパソコンに比べ速度が遅いため平均しても60前後が平均のなか、驚異の『96』!

一体どうやったらその数値が出るんだろう…(;^ω^)

 

使用テーマに注目!

 

ここで使用テーマに関して注目してほしいのですが、ワードプレスでの人気テーマと言えば、以下の4つがよく候補に挙げられます。

 

・JIN
・SANGO
・AFINGER
・STORK

 

パソコンでの読込速度はどのテーマも遜色ありませんが、注目すべきはモバイルでの読込速度です。

グーグルの検索エンジンはモバイルファーストを掲げていることを忘れてはいけません。

そして実際に検索される方法ではパソコンよりモバイルからが多い事実から、モバイルでの速度を重視しなければならないのですが、その場合は【AFINGER】一択になります。

 

わたしははてなブログで運営していますが、ワードプレステーマに関してはずっと注目しています。

詳しい説明は割愛しますが、内部SEOや速度表示に関しては頭一つ抜けているといった印象を持っていたのが【AFINGER】です。

 

今回はその印象を確証に変えた調査となりました。

読込速度はあくまでSEO対策の一部でしかありませんが、コンテンツ以外で足を引っ張られたくはありませんので、やはり重要なポイントだということになります。

 

このようにモンスター級の速度のサイトもあるのですが、やはり平均すると

 

パソコン:70程度
モバイル:60程度

 

を目安に速度アップを考えるべきだと思います。

 

私に関しては、これ以上の速度アップは今のところ思いつかないので、このまま運営したいと思います。

 

パソコン:54➡89
モバイル:26➡51

 

という結果から、論外からギリギリ『ストライク』になったかな思います。

 

読込速度ばかり気を付けても仕方ないので、また記事の執筆を頑張っていきます。

 

【はてなブログ】読込速度を高速化するために画像をすべて圧縮して検証
【はてなブログ】読込速度アップのため画像の圧縮処理の前に済ませること