BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。
今回はSEO対策です。
サイトの表示速度は、SEOの一つの要素として検索エンジンからの評価の一要因として扱われています。
特にモバイル検索においては検索順位結果に影響を与えるものとして重要視されているんです。

ページの応答速度は、検索結果の順位への影響だけでなく、実際ホームページに訪れるユーザーの閲覧性向上、ページ離脱回避のためにも、なるべくページの表示速度を向上させる必要があります。

表示速度を測定できるツール

Pagespeed Insights


サイトの速度はGoogleの「PageSpeedInsight」で計測できます。
PageSpeedInsight
自分のサイトを100点満点で評価し、改善のためのポイントを挙げてもらえるので、「画像の容量が大きい」や「jsなどを圧縮してください」など必要な箇所のみ、効率良く改善することが可能になります。

「画像の容量が大きい」がサイト速度低下の大体の原因

現代のサイトでは画像が大量に使われます。
またRetinaディスプレイスマホの登場により解像度が大きく向上し、画像の大きさも大きくなり、容量が重くなります。
サイト速度低下の原因になりますので、第一に改善していきましょう!

PNGは使わない


画像ファイルやデータには、「JPEG」や「PNG」といった拡張子が必ず付いています。
主に「JPEG」「GIF」「PNG」「SVG」の種類がWEBサイトでは使われます。
ここで注意してほしいのは各拡張子にはメリットデメリットがあるということです。

種類 メリット デメリット
JPEG ・色数の多い画像に適している
・ファイルサイズを小さくできる
・不可逆圧縮を行うため、画質が劣化してしまう
GIF ・データ容量が小さい
・アニメーションを作ることができる
色数に制限があるので、風景写真など多彩な色は不向き
PNG ・透明色を用いることが可能
・圧縮でデータを失わない
・容量が大きくなる
SVG ・解像度の異なる環境や印刷において高品質。
・テキストエディタで開くことができ、画像編集アプリケーションを使用しなくても書き換えが可能。
・写真のような沢山の画素を持つものには不向き

圧縮ツールを使う


圧縮ツールはオンラインサービスが便利です。

特にオススメ【TinyPNG】

https://tinypng.com/
JPG、PNG両ファイル形式に対応しています。
画像の大きさはそのままに、透明性を維持しながら画像を圧縮するWebサービスです。
ブラウザにドラッグ&ドロップするだけで70%~80%ほど圧縮することができます。

開発環境で画像を圧縮する方法もありますが、フロントエンド知識がないとできないので、誰でも簡単に圧縮できるオンラインサービスがオススメです。

ローディング画面をつけよう


画像圧縮やPNGをJPEGなどに変えて軽量化をはかったけどこれ以上無理っていう場合は
「ローディング画面」を実装しましょう。
正常に表示されるまでい起こる表示崩れによってユーザーを逃す…という機会を減少させる効果があるので、重たい画像があるTOPページなどは実装していきましょう。

まとめ

サイトに訪問してくれる方にストレスなく画像を見られるように圧縮し、ページの表示速度も上げてみましょう!
Googleもページ速度が順位に関係しないとしても可能な限りの範囲で速くすることは望ましいことであると発言していますので、出来る範囲で改善できる箇所は改善していきましょう。