• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / WordPress / Smush Proのインストールと設定方法

Smush Proのインストールと設定方法

池田祐太郎 | 2020年2月2日 更新 | 2019年11月4日 公開

PageSpeed Insightsで99点をマークした記事の中で、画像圧縮プラグインとしてWPMU DEVが提供するSmush Proをご紹介しました。そのSmush Proプラグインの無料版と有料版の違いやメリット、インストール方法から各種設定項目の説明、最適な設定方法までお伝えします。

目次

  • 1 Smush Proとは
    • 1.1 メリット・デメリット
      • 1.1.1 メリット
      • 1.1.2 デメリット
  • 2 インストール方法
  • 3 初期設定
  • 4 Smush Pro各項目の説明
    • 4.1 1. どの画像サイズに対して圧縮を有効にするか
    • 4.2 2. アップロードされた画像に対して自動圧縮をするかどうか
    • 4.3 3. Super-Smushを有効にするかどうか
    • 4.4 4. 画像メタデータを取り除くかどうか
    • 4.5 5. フルサイズ画像のリサイズを行うかどうか
    • 4.6 6. 画像元データを圧縮するかどうか
    • 4.7 7. 画像元データの保存に関して
    • 4.8 8. png画像をjpgに変換するかどうか
  • 5 画像圧縮
    • 5.1 ディレクトリ内の画像も圧縮する
  • 6 画像のCDN配信とWebP対応
    • 6.1 1. 背景画像もCDNからの配信にするか
    • 6.2 2. 画像の自動リサイズを有効にするか
    • 6.3 3. WebP変換を有効にするかどうか
    • 6.4 4. CDNからの配信をやめる場合
  • 7 完了後、PageSpeed Insightsで計測してみよう

Smush Proとは

WordPressプラグインである「Smush Image Compression and Optimization」(略してWP Smushや昔の名称?のSmush itなどと呼ばれることも)の有料版プラグインとなり、画像非可逆圧縮や適切なサイズへ自動リサイズ、CDN画像配信、次世代画像フォーマットであるWebP変換など、多くの機能を備えた画像最適化プラグインです。以下は有料版の機能一例です。

  • 非可逆圧縮
  • CDN画像配信
  • WebP変換
  • 自動サイズ変更
  • 最大32 MBの画像を最適化
  • ワンクリックですべての画像の一括最適化
  • PNGを圧縮したJPEGへ自動変換
  • フルサイズ画像を圧縮(コピーのため任意の時点で復元可能)

無料版でも十分多機能ですが、有料版だと上記の機能が手に入ります。

画像圧縮を行うサーバーが外部かどうかも重要なチェックポイントです。仮に自サーバー内で圧縮する場合、サーバーへの負荷がかかるためオススメできません。その点Smush ProプラグインはSmush側のサーバーで圧縮してくれるため、サーバーへの負荷を心配しなくてすみます。

Smush Pro 公式ページ

メリット・デメリット

メリット

実際に使っていて大きな違いと感じるのは以下です。

  • 最大32MBのサイズ制限に拡大(無料版は1MBサイズの制限がある)
  • フルサイズ画像も圧縮可能&万が一圧縮前の画像に戻すことも可能(フルサイズ画像の圧縮ができない)
  • WebP画像への変換
  • CDN配信によりサーバ負荷軽減や表示速度向上

やっぱり1MBサイズってどうしても引っかかってくることもあって、オリジナルテーマで作成した場合はテーマで使っている画像容量は少なく調整済みでも、投稿者が別だったり複数いるケースだと人によっては大きな画像をアップロードするケースって少なくないんですよね。そうなると大きな画像こそ圧縮したいのです。

フルサイズ画像も同様で、投稿者によってはフルサイズの画像を貼り付けちゃったりすると、ページ表示速度に大きな影響を与えてしまいます。

WebPはGoogleが開発しているjpgやpngに変わる(かもしれない)次世代画像形式です。一番のメリットは画像サイズの軽量化です。まだ全ブラウザで対応していないため、WebP画像と通常の画像を併記しないといけないですが、Googleが提唱していることもあり、今後SEOにも関係してきそうです。

Smush側が用意するCDN(コンテンツ・デリバリー・ネットワーク)を利用することにより、容量の大きくなりがちな画像はCDN経由で提供されるため、サーバ負荷・表示速度改善につながります。

デメリット

デメリットはプラグインは買い切りではなく毎月のサブスクリプション契約での有料提供ということです(当たり前ですが)。2020年2月現在、1サイトのみであれば毎月7$のプラン、5サイトまででサポートがついて$14(1サイトあたり$2.8)、25サイトまで$29(1サイトあたり$1.16)という料金体系となっています。以前より安くなっているような…

年間払いにすると2ヶ月無料特典がある。参照:公式サイトの価格詳細

インストール方法

Smush Proのインストール方法です。有料プラグインとなるため、WordPress公式ディレクトリからのインストールとは異なります。

Smush Proの公式ページより「TRY FREE FOR 30DAYS」をクリックします。上位のPROプランやAgencyプランを契約したい場合は「Pricing」より進めます。

無料で30日間利用できるため、気に入らなければ1ヶ月以内に解約すればOK
会員登録必須のため、メールアドレスや名前、所属先やパスワードなどを入力
30日間のフリートライアル付きの説明文。30日後はプランによる費用を支払う
クレジットカード情報を入力。フリートライアル後に課金スタート
クレジットカード課金が完了すると、対象サイトへのインストールを始めるのでURLを入力
WordPress管理画面へのログイン情報を入力

あとは流れに沿って、インストールを進めていきましょう。続いてプラグインを有効化した後の設定です。

Smush Proをクリック
「INSTALL PLUGIN」をクリック
「ACTIVATE」をクリック
少し下に「INSTALLED PLUGINS」と表示されるので、「Configure」をクリックして初期設定へ進む

初期設定

プラグインのバージョンによって異なるかもしれませんが、初期設定ウィザードが表示された場合は以下の流れで初期設定を行います。この初期設定をスキップしてもあとから設定できるので大丈夫です。

「BEGIN SETUP」をクリックして初期設定を開始
新規追加画像に対して自動圧縮を有効にするかどうか。有効の方が便利なので有効にチェック。
Super-Smushと呼ばれる非可逆圧縮を有効にするかどうか。圧縮率が高く画像の容量を大きく抑えられるため、有効にチェック。
画像が持つ日付や時間、場所等のメタデータを取り除くかどうか。取り除いた方が軽くなるため、有効にチェック。
フルサイズ画像に対して画像圧縮を行うかどうか。元画像のコピーを残すオプションがあるため、有効にチェック。
画像の遅延読み込みを有効にするかどうかチェック。今回は別のプラグインで遅延読み込みを有効にしていたので無効にチェック。もし有効にしたければここを有効にする。
改善目的のデータを送信してよいかの確認。特に問題なければ有効にチェック。

以上で初期設定が完了です。この後Smushプラグインの設定ページに遷移します。「Bulk Smush」という一括画像圧縮のボタンが出てきますが、その前に各項目を確認し、設定を見直してから一括圧縮しましょう。

Smush Pro各項目の説明

1. どの画像サイズに対して圧縮を有効にするか

基本的には「All」で問題ないですが、「小さいサイズの画像は圧縮しなくていい」「カスタムサイズは圧縮しない」等のルールで運用したければ、「Custom」を選択すると圧縮したくない画像サイズが選択できます。

カスタムサイズの例。圧縮したくない画像サイズがあればチェックを外す

2. アップロードされた画像に対して自動圧縮をするかどうか

今後画像をアップロードした際に、自動で画像圧縮をおこなうかどうかの設定です。無効にする理由はとくにないため、オンが望ましいでしょう。

3. Super-Smushを有効にするかどうか

無料版にはないSmush Proの大きい機能の一つとしてSmush Proが挙げられます。これは通常の画像圧縮よりさらに高圧縮ができる機能です。例として、Smush Proを導入したサイトで、通常のSmush Proで圧縮した場合と、Super-Smushを利用して圧縮した場合を比較しました。トップページの読込速度は3.8秒から2.2秒と約42%減少し、圧縮サイズは3.49MBから1.03MBと約70%減少と大きな改善が見られました。

すごいぞSuper-Smush!

是非有効をおすすめします!

4. 画像メタデータを取り除くかどうか

Exifと呼ばれる位置や撮影時間等の写真に関するメタ情報が含まれていた場合、写真データとメタデータを分け、画像からメタ情報を取り除いた状態にするかどうかの項目です。通常は情報として無いほうがいいですし、容量もその分軽くなるためチェックをおすすめします。

5. フルサイズ画像のリサイズを行うかどうか

フルサイズが設定したサイズよりも大きかった場合、自動的に縮小するかどうかの設定項目です。デバイス幅が決められているため、あまりにも大きすぎる画像サイズは不要です。デフォルトで「2048 x 2048」になっていますので、このサイズで設定しておきましょう。サイズは任意で変更可能です。

6. 画像元データを圧縮するかどうか

画像の元データを圧縮するかどうかを設定できます。テーマ側に保存した画像はフル画像で設定している場合もあるため、元画像圧縮にチェックしておくと良いでしょう。

7. 画像元データの保存に関して

画像の元データのコピーを保存するかどうかを設定できます。非可逆圧縮のため、圧縮後のデータは元に戻りません。上記6にチェックをいれたらここもチェックを入れておいたほうが安心です。

8. png画像をjpgに変換するかどうか

png画像をjpgに変換し圧縮対象とするかどうかの項目です。圧縮後pngより大きい場合は変換しません。また、透過部分は無視されます。サイトに応じてチェックするかどうか決めます。大きな影響がなければチェックしましょう。

画像圧縮

上記設定完了後、画像圧縮を開始させましょう。設定ページ上部にある「BULK SMUSH NOW」をクリックします。

画像数が多いと結構時間がかかります。数万点などあると、1日以上かかることも…
画面をこのままにしておかないといけないので、何か作業がある場合は別タブで行い、画面を消さないように注意してください。

ディレクトリ内の画像も圧縮する

Smush Proは各ディレクトリ内にある画像も圧縮できます。例えば、テーマフォルダーに含まれる画像もサイト側で使っていることも多いです。特にオリジナルテーマで作成したテーマであれば、より多くの画像を参照していることでしょう。その場合は、画像が保存されているディレクトリを選択し、該当の画像をすべて選択しましょう。

「Directory Smush」メニューからボタンをクリック
該当するディレクトリをクリックし、画像をすべて選択し、画像を圧縮する
画像圧縮の進行状況はこんな感じでわかりやすい

画像のCDN配信とWebP対応

次世代画像フォーマットと呼ばれているWebP画像。EWWW Image Optimizer等のプラグインでも対応できますが、Smush ProでもWebPへの変換に対応しています。また、Smush Proが用意するCDNを別途CDNの設定無しで利用できます。画像をCDNからの配信にすればサーバーへの負荷を減らすことができます。

CDN配信機能は一応ベータ版という位置づけのため、今後変更や廃止の可能性はあるかもしれません。

1. 背景画像もCDNからの配信にするか

チェックをオンにするとbackground-imageとして設定している背景画像についてもCDNからの配信になります。ただしCSS側は書き換わらないため、CDNからの配信にする場合はwp_attachment関数によって宣言されている記述をする必要があります。

2. 画像の自動リサイズを有効にするか

サイズに応じて自動で最適なサイズの画像を配信します。PageSpeed Insightsの「画像を最適化する」はこれでクリアできます!

3. WebP変換を有効にするかどうか

これが使いたくてCDN機能を有効にしている人も多いと思います。迷わず有効!WebPに対応していないブラウザは通常のjpeg画像を表示します。

4. CDNからの配信をやめる場合

画像をCDNから配信するのをストップする場合にこのボタンをクリックします。画像はすでにサーバーにあり、CDN配信を設定したからといって画像が表示されなくなるわけではありません。キャッシュ対策をしている場合はクリアするのを忘れないようにしましょう。

完了後、PageSpeed Insightsで計測してみよう

以上で設定は完了です。設定が完了したらキャッシュクリアなど行い、どの程度改善されているかPageSpeed InsightsやGTMetrix等のツールを使って計測してみましょう。画像が多ければ多いほど恩恵があると思います。

テーマや設定ファイル側で細かいチューニングをすることも重要ですが、適宜変わっていく技術の中で、ツールで解決できるのであれば多少お金を払っても解決し、本来行うべきコンテンツの作成やコンバージョン改善という方向に時間を使っていく方が有意義なのではないかと考えます。

設定箇所でわからないことがあれば分かる範囲で答えますので、Twitter等でコメントしてください。

メールコンサルティング
WordPress保守管理サービス

Filed Under: WordPress

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

この記事と関連する記事

外部のプロフェッショナルによる WordPress サイトの保守・運用:安心と安全性を手軽に手に入れる方法
2023年1月25日
タグ: 保守管理
カテゴリー: WordPress
WordPress のクロスサイト・スクリプティング被害にあった事例を共有します
2023年1月11日
タグ: セキュリティ, 保守管理
カテゴリー: WordPress
WordPress の admin-ajax.php のインデックスエラーはどうするのが正解なのか
2022年12月6日
タグ: アクセス解析
カテゴリー: WordPress

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  4. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  5. [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  6. WordPress において PHP 8.1 に更新していいかどうか検証

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • 外部のプロフェッショナルによる WordPress サイトの保守・運用:安心と安全性を手軽に手に入れる方法
  • [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  • WordPress のクロスサイト・スクリプティング被害にあった事例を共有します
  • メール作業の生産性を向上させる最低限覚えておくべき Gmail のショートカットキー
  • タブ固定とタブ一発アクセスのショートカットキーの組み合わせでブラウザ作業の生産性を向上

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS ssh SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウド クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール ブログ プラグイン マーケティング リニューアル 保守管理 改ざん 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.