内部SEO対策としてWordPressの高速化する方法をご紹介【画像編】

2016/4/12更新

前回は【CSS編】【Javascript編】をご紹介しました。最後に【画像編】ということで、画像の読み込みを高速化(軽量化)させる方法をいくつかご紹介します。

1, EWWW Image Optimizerプラグイン

WordPressは多くのコンテンツ(投稿)を扱うので、画像は自然と増えていきますよね。1ページに扱う画像が多ければ多いほど読み込みには時間がかかってしまいます。かと言って画像を減らすことでコンテンツの質が下がってしまったら元も子もない。

EWWW Image Optimizerはアップする画像を自動で圧縮してくれたり、すでにアップした画像を検出して、一括で圧縮してくれる便利なプラグインです(使い方は他のサイトで紹介されているので、本稿では割愛します)

2, 画像圧縮サイトを使う

EWWW Image Optimizerはアップした画像を自動で圧縮してくれる便利なプラグインですが、よく見ると圧縮率はそんなに高くはないんですよね。

画像圧縮率

上の画像は当サイトの画像を圧縮した時に値ですが、全部10%以下(圧縮無しよりはマシですが)
すでにアップされた画像は難しいですが、画像圧縮サイトを使うとかなり圧縮が出来ます。

tiny png

tiny png

https://tinypng.com/

こちらのサイトは5MBのJPG・PNGだけですが、かなり圧縮してくれます。場合によっては90%ぐらい圧縮してくれる時もあります。

tiny png 圧縮後

5MB以上の画像を圧縮したい場合はこちらのサイトがおすすめです。

optimizilla

http://optimizilla.com/ja/

3, GIF画像を使う

Webデザイナーの人は皆知っていると思いますが、JPEG画像と比べるとGIF画像は圧倒的に軽いのでおすすめです。
GIF画像はJPEG画像と比べて扱うことの出来る色数がかなり少ないので、その分軽くなります。

gif
jpeg

ただ扱うことの出来る色数が少ないので、色の少ないイラストには向いてますが、写真やグラデーションなどを使ったイラスト、スケッチには不向きなので注意してください。

  • JPEG → 1670万色
  • GIF → 256色

JPEGをGIFに変換する

こちらのサイトで変換することが出来ます

BannerKoubou

BannerKoubou.com
http://www.bannerkoubou.com/photoeditor/conversion

4, CSSスプライトを使ってHTTPリクエスト数を減らす

CSSスプライトとは、複数の画像を一枚にまとめてCSSのpositionでイメージの一部だけを表示させる手法です。
例えば一つのページでアイコンを6種類使っていた場合、通常6枚の画像を用意します。

sprite

上の画像のように6種類のアイコンを一枚の画像にまとめてしまうことでHTTPのリクエスト数が減らすことが出来ます。ただ画像をまとめ過ぎて、まとめた画像そのものの容量が大きくなると逆に読み込みに時間がかかってしまうので、例えば同じ色のアイコンをGIFでまとめたり、GIFの色数を超えない程度にまとめるのがベストだと思います。

5, ブラウザのキャッシュを使う

PageSpeed Insightsの提案の中に「ブラウザのキャッシュを活用する」というのがあります。

静的リソースの HTTPヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザが以前にダウンロードしたリソースをネットワークからではなくローカルディスクから読み込むようになります。

キャッシュを利用するには.htaccessにディレクティブを追加することで利用できます。

(CSS、javascript、gif、jpg、pngのキャッシュを5日保持する設定です)

CSSやjavascriptを頻繁に更新するようであればキャッシュは短めに設定してあげる方がいいです。

まとめ

いかがでしたでしょうか。
CSS、javascript、画像、どれもそうですが、高速化(軽量化)はけっこう手間のかかる工程ばかりです。特にCSSスプライトは画像を用意するのはかなり面倒な作業だと思います。その手間があるか無いかで、表示スピードを0.1秒改善することが出来るかもしれない。0.1秒早く表示されることで、何人かのユーザが「戻る」ボタンを押さなくて済むかもしれない。地味だけど、ユーザビリティ向上に繋がるの重要なことだと思うので、愛情持って手間をかけてあげてください。

ご紹介した以外にも高速化の方法はたくさんありますので、今後もご紹介できればと思う所存です。

ご不明な点があればお気軽にコメントください( ˘ω˘)

タイムチケットやってます!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


トラックバック:https://recost-design.com/1936.html/trackback