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

 こんばんわ。はたらきアリです。@hatarakiari0818

はてなブログで毎日ブログを書き始めて早くも３か月が過ぎました！

毎日、記事を書いていくことは最低限のノルマを自分に課したのですが、それとは別にブログを始めて以降に知ったことが多くありました。

1. 有料・無料がある
2. 有料になると色々と詳細な設定ができる
3. 有料のテーマがある
4. 収益化するには有料の独自ドメインが必要
5. テーマをＨＴＭＬとＣＳＳでカスタマイズできる
6. アドセンスという広告媒体がある
7. アナリティクスやサチコといった分析ツールがある

などなど

まったくの無知からのスタートですと、知らないことばかりなので毎日が発見の日々でした。

記事を書きながら、勉強して少しは理解を深めることができました。

テーマにあっては【ＺＥＮＯ－ＴＥＡＬ】を利用しています。

カード型デザインで、多くの記事が目につくように設計されています。

そして、どんどん欲は深くなりインターネットでググりまくって、デザインのカスタマイズに没頭しました。

楽しかった～

しかしです。。

今のブログデザインに満足しているのですが、その時に気づきました。

ブログの読み込みが遅い！

それが問題なんだと知るのに３か月かかりました。

しかもカスタマイズ終わったあたりに。。

さてどうしたものか。

ブログの読み込みが遅い問題点

なんと、ブログの読み込みが遅いと

• ＳＥＯ的にダメ
• ユーザーが離脱する
• アフィリエイトなら収益が下がる

など

と読込みが遅いことは

百害あって一利なし

でした。。

ちなみに読込速度を数値的に何点か測ることも出来ます。

developers.google.com

グーグルが提供しているサイトのスピードメーターです。

検索の王様、グーグルが提供しているスピードメーターなのでここで低い点数が出るということは、

検索では後回しにされる可能性が高いことを意味してます。

ブログでＰＶ数を伸ばしたいのであれば、検索で上位にランキングしなければ不可能です。

\ \ 上位にランキングされるための条件 / /

• 記事内容（有益かどうか）
• ＳＥＯ対策
• 内部リンク
• 外部リンク
• リライト（記事の更新がされているか）
• ブログデザイン
• 読込速度

です。

上位に検索されるためには多くの条件がありますが、どれか一つでも足を引っ張れば下位に下がる要因になります。

それはサイト運営者にとって死活問題となるのです。

読込速度を早くする改善点は？

そんな状況を放っておくわけにはいきません。

PageSpeed Insightsに自分のサイトＵＲＬを入力すると何が問題なのか一目瞭然となります。

なんと驚愕の２４点！

まったく笑えません。

しかし、同時にこのページではどうやって改善すればいいのかを教えてくれます。

私の場合では圧倒的に画像が重いと指摘されています。

画像関連で実に１８．４５秒の損失。

問題と指摘された理由の８７％にあたります。

つまり画像を軽くすれば速度は速くなると結論付けしてくれました。

画像を軽くしなければならない

ブログを開始して、ブログをどうやって運営しなければならないかも分からなかったものですから画像をオリジナルのまま記事に載せてしまっていました。

今日で９０記事目。

気持ちが折れそうです。

が

全部、画像を圧縮して貼り直します！

⇓圧縮するためのサイトはこちらが便利です⇓

www.iloveimg.com

９０記事ありますので、少し時間がかかります。

画像をすべて圧縮したビフォー・アフターの記事は後日掲載しようと思っているのです。

画像圧縮以外で高速化するためのポイント

画像の圧縮以外にするべきことを以下にまとめます。

1. 「設定」➡「詳細設定」のheadに要素を追加で無駄な呼び出しをしていないか？
2. 「設定」➡「詳細設定」のＡＭＰにチェックが入っているか？
3. カスタマイズした結果、不要なものはないか？
4. コメント欄が必要か？
5. サイドバーのメニューは適切か？
6. ＣＳＳで不要なコードが残っていないか？

これは全て私が出来ていなかった項目です。

高速化するために何ができるかをググった結果、

一番は画像圧縮なのですが、他にもいろいろと要素はありその中で私が気づいてすぐに対応した項目なのです。

特に１と２は効果がありました。

体感レベルで早くなったと感じます。

１についてはheadに要素で、カスタマイズを重ねるうえでjQueryのコードを読み込むうえで何度か、コードを貼り付けていました。

それは本来なら、一度貼り付けてしまえば同じコードは要らないにも関わらず、何度も張り付けてしまっていました。

外部からのデータを読み込むためのコードなので通信しなければなりません。

読み込む間の時間はそのままロスになりますので、要らないコードはすぐに消しておくべきです。

２にあっては、

AMP？なにそれ？よく分からない

と放置してしまっていました。それが調べてみると

スマートフォンからのアクセスの場合、読込速度が速くなります。

とのこと。

とてつもなく重要な項目をずっと放置してしまっていました。。

スマホからのアクセスが半分以上を占めるなか、どれだけの機会損失をしてしまっていたのか。

残念過ぎますが、今回気づけて本当に良かったです。

１と２を改善後のアクセススピードは体感でまったく違いました。

まだ画像関連はこれからなので、すべての画像を圧縮できたあかつきには、どれだけの点数を取ることが出来るのか今から楽しみです。

画像圧縮編は近日中に記事を書きますのでお楽しみにしておいてください。

※追記

⇩このサイトにおける【ZENO-TEAL】カスタマイズを総まとめした記事はこちら

www.worker-ant0818.work