IT系女子ログ

Webデザイナー目線のあれこれ話。デザインもコーディングも勉強中。

このサイトの表示が遅かったので、軽量化してみました。

最近スマホで記事を投稿していたのですが、
サイトの表示速度が遅く、全然読み込まれない…。
イライラするのでサイトのデータを軽量化してみました。
f:id:tosssaurus:20150210142128p:plain

設定を最適化する

まず見直したのが、スマホでサイトを見たときでもPC用のデザインがそのまま表示される設定になっていたので、スマホではスマホ用のデザインを表示するよう設定し直しました。

Hatenaのダッシュボードから

デザイン > スマートフォン > 詳細設定 > レスポンシブデザインのチェックを外す

これでOKです。
表示速度を計り、比べてみると、

  • PC用デザインをそのまま表示…2分46秒
  • スマホ用デザインを表示…8秒

なんと、この設定だけで約95%も軽量化できました!

それもそのはず、PC用では1ページに最大7つの記事詳細を全て表示しているのに対し、スマホ用では記事詳細ではなく、記事一覧(記事の冒頭部分だけ)の表示になっていました。
また、PC表示で背景画像を設定しているのですが、スマホでは無効化されていました。

画像を最適化する

現在、1記事に数枚ずつ画像を挿入しています。
スマホで撮影したものをそのままアップしていたのですが、サイズを確認するとものすごく大きいサイズでビックリしました。Retina (高解像度)だから、少し考えるとファイルサイズが大きいのは当然ですよね。
しかも線画なのにJPEGデータ…。(チーン)
とにかく更新したかったので、画像サイズなど気にかけていなかったのです。Webデザイナーなのにお恥ずかしい限りです。

すぐに線画のものはJPEGデータからPNGデータに書き出ししました。また、画像サイズも2000pxとかだったので、500pxくらいにリサイズして小さくしました。
挿絵のつもりなので、これくらいで十分です。
f:id:tosssaurus:20150210144747p:plain
そうすると、1枚あたり約50%も軽量化できました!
JPFGデータ14枚を調整し、PNGデータ10枚に減らしましたので、かなり軽量化されたはずです。ガリガリダイエットですね。

これからはスマホで記事を投稿する際は、気をつけたいと思います…。
(けど便利なんですよね…スマホ投稿…。)

参考サイトです。

初心者でもわかる!Webサイトの高速化を検証しながらやってみた | ホームページ制作 Webデザイン事務所 ハイファイブクリエイト
正直ここまでガッツリ検証していませんが、
機会があれば一度行ってみたいです。