WordPress レンタルサーバー

WordPressの画像の最適化と圧縮ができるプラグインのご紹介

プロモションを含みます

画像ファイルを圧縮・最適化でサイト表示スピードを向上

WorldPressでサイトを作っていきますと、次第にサイトデーターの容量が多くなりサイト自体が重くなる事で、表示速度を下げてしまいます。
サイトの中で、特にデーター容量の多いファイルはやはり画像です。

画像圧縮・最適化する事でかなりサイトの表示速度が向上します。
便利がプラグインがありますので、是非使用してみてください。

Smush – Compress, Optimize and Lazy Load Images

Smush

Smushは画像圧縮プラグインでは、最も有名なプラグインです。
100万以上のインストール歴と5000を超えるレビューで★5とかなり優秀です。

最大5Mまでの全ての画像を圧縮・最適化していくれます。
メディアライプラリー以外に置いてあるFTPでアップした画像も対象になります。

更に画像のアップ時にも自動で圧縮・最適化をしてくれます。
ワンクリックで50個まで画像を圧縮・最適化できます。

50個の制限を外したい場合には、「Disable Bulk Smush Limit of WP Smushit-wordpress.org」と言うプラグインを入れますと制限が無くなります。
マルチサイトで利用できます。

全ての画像の圧縮・最適化と遅延ロードの設定がクリックするだけで全てできます。
まずは、プラグインの新規追加から、「Smush」をインストールし有効化します。

有効化しますと自動で、日本語化になりますがまだ一部のみ日本語になっているだけです。
Snushインストール

有効化しますと、WordPressのダッシュボードに「Smush」が出てきますので、クリックして「Dashboard」に入ります。
最初に説明がありますが、読む必要はないので下の部分に表示される「SKIP」で消しましょう。

smush-dashboad

使用方法は実に簡単で、ダッシュボードにある「bulk-smush-now」をクリックするだけ圧縮・最適化可能なファイルを全て処理してくれます。
制限を外したい場合には、事前に「Disable Bulk Smush Limit of WP Smushit-wordpress.org」をプラグインしておきましょう。bulk-smush-now

処理が始まりますと、下記の画面になります。

BULK SMUSH NOW-process

処理が終了しますと、下記の画面になります。

BULK SMUSH NOW-complete

設定は下記でOKです。

※事前に「Disable Bulk Smush Limit of WP Smushit-wordpress.org」を入れておきますと、50個圧縮しますと、一旦止まりますが画面の再読み込みでまた50個圧縮できます。

画像サイズ-すべて
Automatic compression(画像をアップロードすると自動で圧縮・最適化)-on
Metadata(画像の説明にある撮影場所、時間、大きさ、などのデータ)を削除-on

 

BULK SMUSH NOW-設定

あと何点か設定をしておくと便利なものがあります。
最初にの「Lazy Load」(画像遅延ロード)をクリックします。

Lazy Loadは、サイトを閲覧した時に見える部分の画像のみ表示します。
見えていない部分の画像は、スクロールなどして出てきたら読み込んで表示する設定です。

最初にサイトが表示される時に、全部の画像を表示させないのでサイトの表示が速くなります。

bulk smush設定

設定はデフォルトのままでいいので、クリックしたらそのまま下までスクロール。
「UPDATE SETTINGS」をクリックして設定完了です。

updatesetteing

次にの「設定」をクリックします。
「データ」の部分のプラグインをアンインストールした時の設定を保存するかどうかの選択ができます。

余計な設定が残っていてもゴミになるだけですので、ここは削除にしておきましょう。

データセッチング

設定が終わったら、と同様に下にスクロールして、
「UPDATE SETTINGS」をクリックして設定完了です。

updatesetteing

設定は以上になります。(^^♪

「Smush」には、圧縮・最適化する画像のサイズ制限があります。
その場合には、有料版(Pro)が必要になりますが、通常の使用ではほとんどありませんので、そのまま使えます。(^^♪

EWWW Image Optimizer

EWWW Image Optimizer

プラグインの新規追加で、「EWWW Image Optimizer 」と入れてインストールしましょう。
インストールしたら「有効化」します。

※「EWWW Image Optimizer Cloud 」と言う似たプラグインも出てきますが、こちらは違いますので注意してください。

ダッシュボードの「設定」から、「EWWW Image Optimizer 」をクリックして詳細を設定し舞す。

EWWW Image Optimizerの設定

「基本」の部分の「メタデータを削除」にレ点が入っているか確認しましょう。
メタデータとは画像に付いているデーターで、コメント、カラープロファイル、撮影場所、撮影時刻、カメラ情報などの事を言います。

このデーターは不要ですのでレ点を入れておく事で削除します。

EWWW Image Optimizerメタデータの削除

「EWWW Image Optimizer 」はWordPressを作った最初に入れておきますと、後は自動で画像を圧縮してくれますので、何もする事はありません。
この記事を読んで途中でインストールした場合には、ダッシュボードのメディアにある「一括最適化」ですでにアップロードした画像を全部最適化してくれます。

EWWW Image Optimizer一括最適化

 

「EWWW Image Optimizer 」と「Smush」を同時に使用してもいいのか気になると思います。
同時に使用してもメディアライブラリーを見に行きますと、下記の①②のようにどちらも効果を発揮してくれますのでつかえます。
※画像をアップロードする時に両方のプラグインで圧縮が行われますので、少し時間が掛りますが、異常ではありません。(^^♪

いろいろとサイトの表示速度を早くする方法の中で、画像の圧縮は一番簡単にできて効果の高い方法になります。

WordPressの画像圧縮

 

PageSpeed Insights

圧縮作業をして実際にサイトの表示が速くなったのかを知りたい時には下記のサイトを使いましょう。
Googleが用意しているサイトの読み込み速さを計測するサイトです。

ここで評価されるのが確実ですので、圧縮前と圧縮後のスピードを計測してみましょう。
スマホとPCでの速さが計測されます。

問題点も詳細に渡って表示されますので、対応しましょう。(^^♪

speedpagespeedinsights

PageSpeed Insights

-WordPress, レンタルサーバー