ライターアテナミの頭の中

ライターのお役立ち情報、転職活動、英語学習お役立ちコラムを掲載中 海外在住生活について書いています

はてなブログのカスタマイズ:高速化でやったこと7つ

夫のサイトを運営しています。

bokuranocarp.hatenablog.jp

開始1ヶ月で月20,000PVのちょっとした人気サイトになっていました。ある日、夫にブログの読み込みが10秒くらいかかるんだけど・・・と言われ大慌てしました。

HPのレイアウトを勢いで作ったままにし、そこにアドセンスを盛りだくさん貼っていました。当たり前ですが読み込み速度がトップページで8秒、重い記事ページだと10秒かかるという不親切設計です。読者も増えたことだし、テコ入れをすることにしました。普段の読み込み時間はgoogle analycsで平均値を確認していますが、今回の計測はGTmetrixを使いました。

gtmetrix.com

はてなブログは読み込みが遅い

散々いろいろな人が言っていたことですが、はてなブログはとかく読み込みが遅く、はてなのテンプレートを使用するとwordpressほど速度対策ができないのがネックです。読み込みが4秒以上かかると離脱率が一気に上がるということで、なんとか対策したいところ。あまり出来ることはないのですが、最大限、頑張ってみました。

トップページ対策

・ヘッダーの画像を圧縮

600KBから400KBへ

・一画面で表示される記事の量を調整

元々 一画面毎の記事表示数を 10にしていました。表示される記事ごとに 要素が増えますし、野球ブログは基本は最新のゲームのみを見る人が多いので5まで減らしました

・フッターとヘッダーを消す

はてなブログのフッターとヘッダーについて、あまり気にしていなかったのですが、少しでもサイトを軽くしたかったので削除

・サイドバーのいらない項目を減らす

新規記事、注目記事、過去記事などやたら記事の紹介をしていましたが、野球サイトの性質上、あまり過去の試合のことは見ないらしい(google analycsより)ので、注目記事のみ残すことにしました。アドセンスもサイドバーのものはほとんどクリックされないので思い切って無くしました。

各記事の対策

はてなスターの表示をなくす

はてなスターがあると表示が遅くなるというのはよく聞いていたので、あまりはてな内に読者がいないブログだったので、思い切って無くしました。はてなブログの意味!!!

・フッタに記述する

ブログ全体で動作するブログパーツスクリプトは、なるべくページの下部で読み込まれるように、フッタに記述し直しました。例えばブログ全体のデザインなどです。紹介ページでは記事のHTMLに入れてと書いてあったりしますが、そこに入れる必要は特にないようです。

アドセンス広告を削る

この1ヶ月でクリック数が少なかったタイトル下の2つ、フッター上の2つは思い切って削りました。ページが重くてユーザーが離脱したら元も子もないですからね。

結果

トップページ:8.6秒→4.8秒

記事ページ:11.5秒→5.8秒

かなり高速化ができました!!!しかし、スクショを忘れていました。。。痛恨のミス!

一番効果があったのはアドセンス広告を削ったことだと思われます。あれ、相当読み込むのが大変なんですね。夫のブログがもっと人気が出たらwordpressに移動させようと思います。 他の方のweb作成方法も載っています

ぜひ参考にしてみてください⇩

とってもいろいろな情報があります♪