#■Webページの読み込み速度改善
今回はWEBページの読み込み速度が遅かったので、速度改善を行いました。
その方法を紹介します。
##■WEBサイト解析ツール
今回のWEBページ速度改善に向けてPageSpeed Insightsを使用しました。
こちらのツールは読み込みたいWEBサイトのURLを入力し、解析することでスコア評価を色で分かりやすく分別することが可能です。
また、PC版とスマホ版の評価を確認することもできます。
例
90～100（緑） 速い
50～89（オレンジ） 平均
0～49（赤） 遅い
https://developers.google.com/speed/pagespeed/insights/?hl=ja
##■改善したいWEBサイトの解析
WEBページの解析を行いました。結果は下記の通りで、PC版は平均速度でしたが、スマホ版はレッドゾーンでした。
ページ速度が遅いとSEOにも影響が及ぶため、改善していきます。
ページ速度が遅い原因としては、画像が多いためだと考えられますので、画像関連の最適化を行います。
PC版
Mobile版
##■改善①画像のoptimize化
optimize化するために下記、ツールを使用しました。
https://imagecompressor.com/ja/
optimizeツールを使用することで、全画像11MBから2MBに抑えることができました。
##■改善②拡張子最適化
拡張子などの最適化も行いました。
- JPG/JPEG
写真など高画質かつ画像容量を下げて保存可能。 - Png
ロゴやイラストをサイズを下げて保存可能。
##■改善(その他)img要素にwidthとheight属性指定
こちらは、速度改善というよりSEO対策になります。
Googleが新しいアルゴリズム要素を発表したことで、
imgタグにはwidthとheightを直接設定する事はSEO上重要となりました。
下記の現象を持つWEBページは、改善をしなければ検索順位に影響する事になりました。
・画像レンダリングによる「文章コンテンツの移動」が発生する。
なので、下記のように設定することが望ましいです。
<img src="img/image.jpg" width="200" height="300" alt="画像の説明">
widthとheightを設定しない場合、
画像が読み込まれた後に、下のテキストなどの要素が大幅に変動します。
下記の記事をご参照ください。
https://parashuto.com/rriver/development/img-size-attributes-are-back
##結果
以上の改善を行い再度、ページ速度の評価を行いました。
評価がご覧の通り改善することができました。
■PC版
73→92
■SP版
49→67
PC版
SP版
以上、
ご覧頂きありがとうございました。
■参考記事
https://parashuto.com/rriver/development/img-size-attributes-are-back