2016.07.22

957

パフォーマンス向上! SEOにも効く!?画像最適化方法

このエントリーをはてなブックマークに追加

こんにちはバックエンド林田です。
今日は画像を最適化するだけでサイトパフォーマンスを向上かつ、
SEOにも有益な一石二鳥の施策をお伝えします。

ただ画像を最適化してFTPをアップするだけですので
誰にでもできてリスクのすくないお手軽施策です。

手順1.最適化すべき画像を探す

  1. Googleが提供するツール「PageSpeed Insights」にアクセスします
    https://developers.google.com/speed/pagespeed/insights/?hl=ja
  2. 更新したいページのURLを記入して検索
  3. 検索結果画面に「画像を最適化する」という項目があります
    「修正方法を表示」をクリックすると最適化すべき画像のURLが書いてあります。
    この画像を最適化しましょう。

手順2.サイト内画像を最適化する

  1. 無料画像最適化サイト「TinyPNG」にアクセス
    https://tinypng.com/
  2. 画像をドロップするとあっという間に画像を最適化してくれます
  3. あとは最適化した画像をFTPでアップすればOK
  4. PageSpeed Insightsページを再読み込みして、アップした画像のURLが消えて入れば作業完了です

注意点とハマリ回避

▼注意点
最適化した画像をもう一度最適化させると画像が荒れます。
最適化前の画像をきっちりバックアップで取っておきましょう。


▼ハマリ回避
よくあるハマリとして「最適化した画像をアップしたのに、何度やっても最適化リストに表示される」があります。
どうやらCSSや画像タグで、画像幅/高さを指定して縮小表示している画像は、最適化するだけじゃダメみたいです。
解決方法としては、適正なサイズにリサイズすればOKでしたので、手間ですがリサイズをお試しください。

このエントリーをはてなブックマークに追加

株式会社ヘノブファクトリー|バックエンド
この記事の投稿者:

次