技術者ブログとして日ごろ取り組んでいる学習内容をご紹介します。
今回はＷＥＢデザインをテーマにしている第0ユニットです。
第0ユニットでは、ダンデライオンズで公開している各種サイトの管理をしております。
最近「初歩的すぎる…」となった出来事をご紹介します。
とある日、うちの代表より「オフィシャルサイトの読み込みが遅いんだけど？」と突っ込みをいただきました。
第0ユニットメンバーで原因を探るため使ったのが「Google PageSpeed Insights」です。
Google PageSpeed Insightsとは…
その名もずばりですが、サイトの読み込み速度をスコア測定してくれるサイトになります。
結果を3段階評価(Good、Medium、Low)してくれて、割と細かく問題を教えてくれるとても頼りになるサイトとなります。
早速URLを入力し計測したとところ、まさかのLow…orz
早速問題を確認したころ、MB越えの画像がありました。
なんと初歩的…
経験者さんであればご存知だと思いますが、画像の容量が大きければ大きいほどサイトの読み込み速度は遅くなります。
Windowsでも大きな写真を開こうとすると、読み込みに時間が掛かりますよね。
それと同じです。
実際作っているときは見た目重視になってしまっており、全く画像サイズを確認しておらず。
対象の画像はGIFになっておりキラキラと動いておりました。
対応としては、今回は静止画かつ軽量化した画像に変更しました。
他にも大きい画像をCSSで無理やり小さくしている箇所もあり、ソースレビューって大切だなと実感しました。
他にも使用されていないCSSについてやテキスト圧縮など細かいところまで指摘してくれていました。とても便利ですね。
本来論とすれば、リリースするタイミングで「Google PageSpeed Insights」で確認をするべきなので今後は取り入れていきたいと思います。
次回の更新もお楽しみに。