音楽の楽しさを共有したいブログ

音楽の楽しさを共有したいブログ

作曲、ドラム演奏動画の投稿、そしてブログに手を出した人の雑記です

はてなブログが重いと感じるときに試してほしい5つのこと

f:id:chi_hama:20181220151619j:plain

 「最近やたらとブログが重いな」

とサイト診断をしてみたら、悲惨な結果になってしまいました。

 

「これは一大事!こんなことではページが読み込まれる前にユーザーが離脱してしまう!」

 

ということで、ここでははてなブログを軽くするために行った5つの対処法と、その結果についてお話します。

 

ご自身のサイト運営の助けになれば嬉しいです。

 

 

このブログの診断結果

後に出てくる「Test My Site」で診断した結果です。

5つの対処を行ったことによる効果の指標にしてください。

 

個人差があるので、あくまで参考程度に。

 

対処前

f:id:chi_hama:20181220151507j:plain

 

対処後

f:id:chi_hama:20181220151522j:plain

 

4秒縮みました!

本当はもっと早くなるのを期待しましたが、4秒の差は大きいですよね。

 

1.サイト診断

Googleアナリティクス

自分のサイトをGoogleアナリティクスに登録している方は、まずこちらで確認することをオススメします。

 

Googleアナリティクスのページで

 

[行動]⇒[サイトの速度]⇒[速度についての提案]とクリック。

 

期間を指定してやれば、その期間にアクセスのあった記事の「PageSpeedの提案」「PageSpeed スコア」を見ることができます。

 

「PageSpeed の提案」は、リンクをクリックすることで、具体的にどう対処すれば改善されるかを教えてくれるものです。

 

PageSpeed スコアは、ページの読み込み速度をどの程度改善できるかを示しています。このスコアが高いほど改善の余地が少なく、スコアが低ければ改善の余地が残っているといえます。つまり、スコアは速度の指標ではなく、速度の改善の余地を示すものですのでご注意ください。

スコアが 100 の場合、ページの分析は完了していますが、改善の提案はありません。

 

サイトの速度について - アナリティクス ヘルプ」より引用

 

具体的なスコアの範囲は書かれていませんが、この表記を見る限り0~100の間で評価されるのだと考えられます。

 

Test My Site

モバイルサイトの読み込み速度とパフォーマンスをテストする - Google

 

私が今回の診断に使用したサイトです。

自分のサイトのURLを入力し、サイトを診断しましょう。

 

 

2.トップページに表示する記事数の変更

はてなブログ無料版を使っていて、トップページに記事全体が表示されてしまう方は重要です。

 

はてなブログダッシュボードから

 

[設定]⇒[詳細設定]⇒[トップページの記事数(PC版)]

 

という項目があるので、なるべく少ない数にしましょう。

多いと、それだけ読み込みに時間がかかってしまいますからね。

 

1記事で十分だと思います。

私もそうしました。

 

【追記】

「なんだかんだスッキリしたトップページって、記事一覧が並んでるページじゃね?」

「記事の中身なんて興味なけりゃ見えなくてもよくね?」

 

という心の声が聞こえたので、現在は記事一覧表示に変更しています。

 

blog.wackwack.net

 

こちらの記事を参考に、

  • トップページにアクセス時、自動的にアーカイブ表示
  • 5記事目以降は非表示にし、「もっと表示する」ボタンを設置

といった変更を行いました。

 

なんともスマート!読み込み速度も良好ですよ!

 

3.デザインテーマの変更

www.fulogabc.net

 

こちらの記事で衝撃を受けたのですが、当ブログテーマ「Naked」は読み込み速度が遅い部類にいることが判明。

 

ぜひ一度ブログテーマを見直してみてください。

 

私はデザインCSSをいじくるのが面倒なのと、このデザインが気に入っているので変更せず。

その代わり、2,000KB近くあった背景画像を消しました。

 

4.はてなフォトライフの設定

そもそもはてなフォトライフが何なのかわからない方もいる(え、私だけ?)と思いますが、いつも記事編集で写真をアップロードしてるところです。

 

はてなフォトライフ - 無料・大容量、写真を共有できるウェブアルバム

 

とりあえずここにアクセスして、右上の[設定]をクリック。

 

f:id:chi_hama:20181220151550j:plain

ここに[画質]という項目があります。

デフォルトでは100%になっているので、ここの値をできるだけ小さくしましょう。

 

あんまり小さくしすぎると荒すぎて悲惨なことになるので、その辺はさじ加減で(笑)

私は70%にしておきました。

 

注意点

ここで注意点がひとつ。

この設定によって容量を抑えられるのはjpg形式の話です。

 

png形式でこれをやると、逆に容量が増えてしまうという怪奇現象が起こります。

 

ですので、元の画像がpng形式のものはjpg形式に変換してからアップロードしましょう。

あぁ・・・メンドクサ。

 

詳しく知りたい方はこちらを参考に。

www.foxism.jp

 

5.画像の圧縮

1~4だけでも画像の容量をかなり抑えることができますが

「やるなら徹底的に!」

という方はこれもやりましょう。

 

方法はさまざまですが、私は下のオンラインツールで画像を圧縮しました。

imagecompressor.com

 

注意点

上で紹介した画像圧縮ツールですが、画像を何枚も圧縮していると途中でページが固まって、更新するとページが読み込めなくなりました。

 

そうなってしまった場合は、1日ほど時間を空けて再度アクセスしましょう。

 

追求すれば他にも改善の余地はある

キャッシュがうんぬんとか、他にも軽くするための作業はあります。

ですが、ここでは取り掛かりやすく効果が期待できるものだけ紹介しました。

 

これによってGoogle先生の評価が上がればいいんですが・・・。

アクセス数が壊滅的なので、必死に策を練ってます。

まあ気長にやっていきましょ~。