ページの読み込み時間が増えるとユーザの満足度が下がるようで、一説ではAmazonは「ページ読み込み時間が1秒増えると、ユーザーの満足度が16%減少する」などとも言われているようです。
このブログは個人メモみたいな記事ばかりでアレなんですが、せめてページ表示速度くらいは快適にならないかなと、ページ表示速度改善に向けチャレンジしてみました。
ちなみにブログサービスはBloggerを利用しているのですが、基本的にはその他の無料ブログでも同じようなことをすればページ表示速度が改善できるんじゃないかなと思います。
他のブログサービス使った事ないのでちょっと分からないんですけどね。
とりあえず対策前のページ表示速度を「GTmetrix」というサイトで調べてみたところ以下のような感じに。
トップページのページ表示速度を確認してみたんですが「８．６秒」ということで流石にこれは遅すぎるのか？と思ったんですが「GTmetrix」のデータでは平均６秒くらいのようですね。
まあページを表示し終わる時間が８．６秒ということなので、そこまで待たないと何も見えない訳ではなかったのですが、平均以下は流石に良くないなということで気合を入れていろいろ見直してみました。
見直したといっても「Googleページスピードインサイト」の結果を見て無料ブログ(Blogger)でも出来そうな対策を行なったというだけなんですけどね。
ページ表示速度が遅い原因をザックリと分類分けすると、
きっと「ブログを閲覧する端末と利用サーバ」、「利用サーバと外部サーバ」、「利用サーバ内の処理時間」についてそれぞれの通信量や接続回数を減らすとページ表示速度は速くなるということなんでしょう。
レンタルサーバなどお金をかけると、いろいろなウェブ技術を活用してページ表示速度を改善させることも出来るようですが、残念ながら無料ブログだし簡単に出来ることを頑張ることにしました。
とりあえずページ表示速度を改善させるには、
ということでそれぞれ改善に向けていろいろやってみました。
画像データは圧縮したとしてもテキストデータと比べ結構なデータ量となってしまいます。
記事ページなどは記事の内容によっては画像が必要な場合もあるんですが、トップページなど記事一覧を表示する画面では必ずしも必要ではないだろうと思い、いわゆるアイキャッチ画像を表示しないようにしました。
見た目ちょっと寂しくなったんですが、アイキャッチ画像を無くすのはページ表示速度の改善に向けそこそこ効果的でした。
振り返ってみるとこれが一番時間がかかっていた外部サーバのスクリプト利用です。
前はサイドバーが少し寂しかったので楽天やアマゾンの商品を表示させるウィジェットをサイドバーに設置していたんですが、これがほんとに時間がかかっている事が分かったので設置をやめる事に。
で、設置をやめるととサイドバーが寂しくなったのでサイドバーも削除しワンカラム構成に変更しました。
確かこれだけで２秒近くはページ表示速度が速くなったような気がします。
その他のどうしても必要な外部スクリプトは可能な限りインライン化し外部のサーバとの通信を減らすようにしました。
ちなみにBloggerでは外部スクリプトをいろいろ見ていくと「widgets.js」やら「plusone.js」など、いまいち良く分からないスクリプトを読み込んでいることに気が付くんですが、こちらのサイトを参考に読み込まないよう変更しました。
Bloggerの読み込み遅延の元凶「widgets.js」「plusone.js」を削除して高速化する
記事元でも「非推奨」と書かれていますが、もし実施する場合は自己責任でお願いします。
自分はページ表示速度がどこまで上がるのかという興味に勝てず実施してみました。
無料テンプレートは便利なんですがある程度汎用的に作られているので細かく見ていくとあまり必要でないコードも結構あります。
自分のブログで利用するにあたって必要なものと不要なものを確認してコードを見直すことにしました。
コードをすっきりさせることはメンテナンスもやり易くなるというメリットもあるのですが、手間の割にページ表示速度の改善という意味ではそこまでの効果を感じませんでしたので、良く分からない場合はやらなくてもいいと思います。
コードまで修正しなくても「無駄なデータを減らす」、「外部スクリプト利用を減らす」この２つでページ表示速度はかなり速くなります。
ちょっと長くなりましたが「結局どれくらいページ表示速度が速くなったの？」という話です。
結果としては以下のような感じになりました。
これはベストタイムなんですが、だいたい１．５～３．０秒くらいでトップページが表示できるようになり、平均が６秒程と考えると十分なページ表示速度になったのかなと思います。
意地になって何度かチェックしたんですがどうしても１秒を切る事は出来ませんでしたね。
ついでに「PageSpeedInsights」の結果も。
とりあえず無料ブログでもそこそこの数値まではいけるようですね。
まだまだCSSを見直したりウェブフォント(Font Awesome)を違う方法にしたりと改善の余地はあるのですが、時間切れのため一先ずこの辺までにしておきたいと思います。
また今回はトップページだけ見てみたんですが、トップページのように情報を探すページと記事ページのようにじっくり読み込むページでは、ページ表示速度の意味合いも違ってくるのかなと思います。
記事ページなどはページ表示速度がそこまで早くなくても、人間が文字を読み込むスピードと比べると十分に速いので画像データなんかも必要ならどんどん使っていけばいいんだろうと思います。
まあどこまで対応するかはかける手間との兼ね合いでしょうかね。
リオオリンピック(主に陸上短距離競技)に影響されて、約２ヶ月間に渡り細々とページ表示速度の改善に向けて頑張ってきたんですが、個人的にはそれなりに納得できる結果を出すことが出来ました。
１秒を切るのはちょっと無理だったんですが、これからのウェブ技術の進歩と個人的な知識向上により東京オリンピックの頃には１秒を切る事が出来ていればいいなという感じでしょうかね。
で、ページ表示速度が改善して何か良い事があったのかというと、トップページが味気なくなったせいか気持ちアクセスも減った印象でコレといってあまり良い事もないのですがストレスなく閲覧できるようになったんだろうという事で良しとしましょう。
しかし0.1秒を縮めるというのは非常に難しく、日々自己記録にチャレンジするスポーツ選手はホントに見習わないといけないよなあという気持ちになりました。
ということで体育の日にちなんで最後だけはスポーツのお話でした。
このブログは個人メモみたいな記事ばかりでアレなんですが、せめてページ表示速度くらいは快適にならないかなと、ページ表示速度改善に向けチャレンジしてみました。
ちなみにブログサービスはBloggerを利用しているのですが、基本的にはその他の無料ブログでも同じようなことをすればページ表示速度が改善できるんじゃないかなと思います。
他のブログサービス使った事ないのでちょっと分からないんですけどね。
遅すぎる表示速度
とりあえず対策前のページ表示速度を「GTmetrix」というサイトで調べてみたところ以下のような感じに。
トップページのページ表示速度を確認してみたんですが「８．６秒」ということで流石にこれは遅すぎるのか？と思ったんですが「GTmetrix」のデータでは平均６秒くらいのようですね。
まあページを表示し終わる時間が８．６秒ということなので、そこまで待たないと何も見えない訳ではなかったのですが、平均以下は流石に良くないなということで気合を入れていろいろ見直してみました。
見直したといっても「Googleページスピードインサイト」の結果を見て無料ブログ(Blogger)でも出来そうな対策を行なったというだけなんですけどね。
ページ表示速度が遅くなる原因
ページ表示速度が遅い原因をザックリと分類分けすると、
- 画像などのデータサイズが大きい
- 外部サーバのスクリプト利用が多い
- 無駄なコードが多い
きっと「ブログを閲覧する端末と利用サーバ」、「利用サーバと外部サーバ」、「利用サーバ内の処理時間」についてそれぞれの通信量や接続回数を減らすとページ表示速度は速くなるということなんでしょう。
レンタルサーバなどお金をかけると、いろいろなウェブ技術を活用してページ表示速度を改善させることも出来るようですが、残念ながら無料ブログだし簡単に出来ることを頑張ることにしました。
ページ表示速度改善に向けてやったこと
とりあえずページ表示速度を改善させるには、
- ページ上のデータ量を減らす
- 外部サーバのスクリプト利用を減らす
- 無駄なコードをなくす
ということでそれぞれ改善に向けていろいろやってみました。
ページ上のデータ量を減らす
画像データは圧縮したとしてもテキストデータと比べ結構なデータ量となってしまいます。
記事ページなどは記事の内容によっては画像が必要な場合もあるんですが、トップページなど記事一覧を表示する画面では必ずしも必要ではないだろうと思い、いわゆるアイキャッチ画像を表示しないようにしました。
見た目ちょっと寂しくなったんですが、アイキャッチ画像を無くすのはページ表示速度の改善に向けそこそこ効果的でした。
外部サーバのスクリプト利用を減らす
振り返ってみるとこれが一番時間がかかっていた外部サーバのスクリプト利用です。
前はサイドバーが少し寂しかったので楽天やアマゾンの商品を表示させるウィジェットをサイドバーに設置していたんですが、これがほんとに時間がかかっている事が分かったので設置をやめる事に。
で、設置をやめるととサイドバーが寂しくなったのでサイドバーも削除しワンカラム構成に変更しました。
確かこれだけで２秒近くはページ表示速度が速くなったような気がします。
その他のどうしても必要な外部スクリプトは可能な限りインライン化し外部のサーバとの通信を減らすようにしました。
ちなみにBloggerでは外部スクリプトをいろいろ見ていくと「widgets.js」やら「plusone.js」など、いまいち良く分からないスクリプトを読み込んでいることに気が付くんですが、こちらのサイトを参考に読み込まないよう変更しました。
Bloggerの読み込み遅延の元凶「widgets.js」「plusone.js」を削除して高速化する
記事元でも「非推奨」と書かれていますが、もし実施する場合は自己責任でお願いします。
自分はページ表示速度がどこまで上がるのかという興味に勝てず実施してみました。
無駄なコードをなくす
無料テンプレートは便利なんですがある程度汎用的に作られているので細かく見ていくとあまり必要でないコードも結構あります。
自分のブログで利用するにあたって必要なものと不要なものを確認してコードを見直すことにしました。
コードをすっきりさせることはメンテナンスもやり易くなるというメリットもあるのですが、手間の割にページ表示速度の改善という意味ではそこまでの効果を感じませんでしたので、良く分からない場合はやらなくてもいいと思います。
コードまで修正しなくても「無駄なデータを減らす」、「外部スクリプト利用を減らす」この２つでページ表示速度はかなり速くなります。
どれくらいページ表示速度は速くなったのか
ちょっと長くなりましたが「結局どれくらいページ表示速度が速くなったの？」という話です。
結果としては以下のような感じになりました。
これはベストタイムなんですが、だいたい１．５～３．０秒くらいでトップページが表示できるようになり、平均が６秒程と考えると十分なページ表示速度になったのかなと思います。
意地になって何度かチェックしたんですがどうしても１秒を切る事は出来ませんでしたね。
ついでに「PageSpeedInsights」の結果も。
まだまだCSSを見直したりウェブフォント(Font Awesome)を違う方法にしたりと改善の余地はあるのですが、時間切れのため一先ずこの辺までにしておきたいと思います。
また今回はトップページだけ見てみたんですが、トップページのように情報を探すページと記事ページのようにじっくり読み込むページでは、ページ表示速度の意味合いも違ってくるのかなと思います。
記事ページなどはページ表示速度がそこまで早くなくても、人間が文字を読み込むスピードと比べると十分に速いので画像データなんかも必要ならどんどん使っていけばいいんだろうと思います。
まあどこまで対応するかはかける手間との兼ね合いでしょうかね。
リオオリンピック(主に陸上短距離競技)に影響されて、約２ヶ月間に渡り細々とページ表示速度の改善に向けて頑張ってきたんですが、個人的にはそれなりに納得できる結果を出すことが出来ました。
１秒を切るのはちょっと無理だったんですが、これからのウェブ技術の進歩と個人的な知識向上により東京オリンピックの頃には１秒を切る事が出来ていればいいなという感じでしょうかね。
で、ページ表示速度が改善して何か良い事があったのかというと、トップページが味気なくなったせいか気持ちアクセスも減った印象でコレといってあまり良い事もないのですがストレスなく閲覧できるようになったんだろうという事で良しとしましょう。
しかし0.1秒を縮めるというのは非常に難しく、日々自己記録にチャレンジするスポーツ選手はホントに見習わないといけないよなあという気持ちになりました。
ということで体育の日にちなんで最後だけはスポーツのお話でした。