最近、自分のはてなブログの表示の遅さが気になっていました。文章は問題無くても画像が遅いとか、一番上の「記事を書く」ボタンがなかなか表示されないとか。
どうしてかなと調べてみたら、やはりたくさんの方が教えて下さいました。同じことで悩む人がいるんですね。
まずは表示速度を測ってくれる「PageSpeed Insights」で自分のブログを測ってみました・・速くはない。パソコンのスコアは 54 でした。平均スコアの中に入ってますが、平均の下ってところです。何回か試しましたが、その都度違う。なんで？
スコアは毎回変動するそうです。広告などによって違ってくるそうで、そのため、最低5回くらい試して、その平均を見る必要があるのだそうです。
表示速度を早くするために出来ることはたくさんありました。例えば、ブログのデザインテーマでも違いが出るそうです。デザインテーマを変えるつもりはないし、私の技量では難しいことは無理なので、簡単にできそうなことを２つだけやってみました。
- 画像の圧縮＝画像ファイルの圧縮
画像ファイルの保存容量を小さくする事。記事中に写真を入れたいときには「写真を投稿」から行いますが、見たままモードで画像のサイズを変更できます。でもこれはアップした画像自体を小さくしたわけではないので、大きな画像の場合は可能なら保存の段階で小さく（圧縮）しておいたほうがいいですね。私も実際にはてなフォトライフでいままで使った画像を確認したらすごく大きい画像がありました。すでにブログに載せている画像の場合は次のやり方で圧縮できます。
利用中のサービス→はてなフォトライフ→HatenaBlog で使った写真が出ます。
写真をクリック→右下の画像を編集クリック→画像サイズを変更
殆どの先生はこのサイズを600にしているようです。私は画像を幅いっぱいに載せることはないので500にしてみました。
はてなフォトライフには縮小した画像の他に、元の大きな画像も残りますので、私は大きい方は削除しました。この方法だと記事中には縮小された画像が使われますので、改めて差し替えなどは必要はないようです。 - 使用頻度の少ないCSSは削除
実は先日「目次」に挑戦し、ちょっと見栄え良くしたいと思って、デザインを変えるために「コピペだけで使えるCSS」を使いました。上手く行って大満足だったのですが、この先目次を使うこともないだろうと思い削除しました。素人のくせにあれこれいじりたくてコピペCSSするのですが、今見ると「これなんだっけ？」としばらく考えてしまいます。今回は目次デザインだけ削除。
上記の2つだけ実行した結果、表示速度のスコアはPCで74になりました。大きい画像が結構あったので、それでだいぶ変わったのだと思います。
私ができるのはこのくらい。スコアはまだ平均の枠をでていないのですが少し良くなったので満足です。
こういうことがサクサク出来る人はすごいなぁ。
