WordPress設定

Smush – Lazy Load Images, Optimize & Compress Images 画像の遅延読み込み、最適化と圧縮プラグイン 設定方法と使い方読み終わるまで 2

Smush – Lazy Load Images, Optimize & Compress Images 画像の遅延読み込み、最適化と圧縮プラグイン 設定方法と使い方 アイキャッチ

ワードプレス(WordPress)の投稿記事内の画像ファイルを最適化して圧縮するプラグイン Smush – Lazy Load Images, Optimize & Compress Images を解説します。

この記事を見ることで得られるメリット
  • Smush – Lazy Load Images, Optimize & Compress Images の使い方と詳細な設定方法がわかります

Smush – Lazy Load Images, Optimize & Compress Images で実現できること

WordPressのプラグイン Smushを導入するとの投稿記事内の画像ファイルを最適化して圧縮したり、読み込みを遅延させて記事ページの表示速度を向上させることができます。

  • 画質に影響を与えることなく画像ファイルを圧縮します
  • 画像ファイルの遅延読み込み
  • Webサイトを速度低下させている画像ファイルを検出します
  • 自動最適化:
  • バルクスマッシュ:ワンクリックで最大50枚の既存の画像ファイルを最適化し圧縮します

Smush – Lazy Load Images, Optimize & Compress Images のインストール方法

Smush – Lazy Load Images, Optimize & Compress Images プラグインをWordPressにインストールする方法を解説します。

WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面
  1. WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
  2. 「新規追加」をクリックします
  3. 検索ボックスに”Smush – Lazy Load Images, Optimize & Compress Images ”と入力すると下に検索結果が表示されます
  4. ”Smush – Lazy Load Images, Optimize & Compress Images ”の「今すぐインストール」ボタンをクリックします
“Smush – Lazy Load Images, Optimize & Compress Images ”のインストール完了画面“Smush – Lazy Load Images, Optimize & Compress Images ”のインストール完了画面

↑Smush – Lazy Load Images, Optimize & Compress Images のインストールが完了すると有効化ボタンが表示されるのでクリックします。

"Smush – Lazy Load Images, Optimize & Compress Images "を有効化すると表示される画面“Smush – Lazy Load Images, Optimize & Compress Images “を有効化すると表示される画面

これでSmush – Lazy Load Images, Optimize & Compress Images のインストールと有効化は完了です。

Smush – Lazy Load Images, Optimize & Compress Images の設定と使い方

Smush – Lazy Load Images, Optimize & Compress Imagesプラグインをインストールして有効化した時点で画像ファイルの遅延読み込みと、以降の画像ファイルの最適化機能は有効になっています。

なので基本的には設定変更は不要です。

Smush – Lazy Load Images, Optimize & Compress Imagesの設定

Smushプラグインを有効化するとダッシュボード(管理画面)に「Smush」が表示されます。

WordPressのダッシュボード(管理画面)WordPressのダッシュボード(管理画面)

Smushの項目は下記の11項目あります。
沢山ありますが半数以上は有料化しないと機能しない項目です。

  • ダッシュボード
  • Bulk Smush
  • Directory Smush
  • Lazy Load
  • CDN
  • Local WebP
  • Integrations
  • ツール
  • 設定
  • Tutorials
  • Smush Pro

以降の画面写真は日本語に翻訳しています。

ダッシュボード

Smushプラグインのダッシュボード画面Smushプラグインのダッシュボード画面

ダッシュボード画面では前項目の設定状況を1画面で確認できます。

各項目に移動することも可能です。

Bulk Smush

SmushプラグインのBulk Smush画面 その1SmushプラグインのBulk Smush画面 その1

↑この画面から既存の画像ファイルを最適化して圧縮することができます。
しかし一度に50枚までしか実施できません。
つま、り既存の画像ファイルが1000枚ある場合は20回同じ作業を繰り返す必要があります。

SmushプラグインのBulk Smush画面 その2 設定項目SmushプラグインのBulk Smush画面 その2 設定項目

設定項目と意味は下記のとおりです。

  • 画像サイズ
    項目名の表示だけで設定変更はできません
  • 自動圧縮
    画像ファイルアップロードするときに自動的に圧縮するか否か
  • メタデータ
    画像ファイルに含まれた日付や時刻などのExifデータを削除するか否か
  • 画像のサイズ変更
    アップロードした画像ファイルのサイズを任意のサイズに変更する
  • アップロードされた画像
    アップロードされた画像を圧縮するか否かと、復元用の画像ファイルを保存するか否か

Directory Smush

SmushプラグインのDirectory Smush画面SmushプラグインのDirectory Smush画面

↑画像ファイルをアップロードするまえにディレクトリ毎に圧縮するとことができます。

SmushプラグインのDirectory Smushのディレクトリ選択画面SmushプラグインのDirectory Smushのディレクトリ選択画面

↑この画面で圧縮したい画像ファイルの保存ディレクトリを指定します。

このDirectory Smush機能は実質意味をなさないので設定は不要です

Lazy Load

SmushプラグインのLazy Load画面 その1SmushプラグインのLazy Load画面 その1

↑設定項目と意味は下記のとおりです。

  • メディアタイプ
    遅延読み込みする画像ファイルの種類を選択できます
  • 出力場所
    遅延読み込みを特定のメディア(画像設置場所)だけに限定することができます
  • ディスプレイとアニメーション
    遅延読み込み時の演出を設定できます
SmushプラグインのLazy Load画面 その2SmushプラグインのLazy Load画面 その2

↑設定項目と意味は下記のとおりです。

  • 含める/除外する
    遅延読み込みをしない記事タイプを選択できます
    初期設定ではすべての記事タイプで遅延読み込みは有効になっています
SmushプラグインのLazy Load画面 その3SmushプラグインのLazy Load画面 その3

↑設定項目と意味は下記のとおりです。

  • スクリプト
    遅延読み込みに必要なスクリプトの記載先をWordPressテーマPHPファイルのフッターかヘッダーを選択できます
  • ネイティブの遅延読み込み
    ネイティブブラウザでも遅延読み込みを有効にするか否か
  • Noscriptを無効にする
    遅延読み込みが有効になっている間、Noscriptを無効にできます
  • 無効化
    遅延読み込みを無効化します

CDN

SmushプラグインのCDN画面SmushプラグインのCDN画面

↑無料版の場合はCDN機能は利用できません。

Local WebP

SmushプラグインのLocal WebP画面SmushプラグインのLocal WebP画面

↑無料版の場合はWebP変換機能は利用できません。

Integrations

SmushプラグインのIntegrations画面SmushプラグインのIntegrations画面

↑無料版の場合はすべての項目は設定変更できません。

ツール

Smushプラグインのツール画面Smushプラグインのツール画面

↑設定項目と意味は下記のとおりです。

  • 画像サイズ変更の検出
    大きなサイズの画像ファイルを検出する機能を有効化できます
  • 一括復元
    アップロードして圧縮されたサムネイル用画像ファイルを圧縮前の状態に戻せます

設定

Smushプラグイン 設定の全般的Smushプラグイン 設定の全般的

↑設定項目と意味は下記のとおりです。

  • 翻訳
    アクティブな翻訳欄には日本語となっていますが、Smushプラグインの画面は日本語になっていません。今後のアップデートで改善される可能性があります
  • 使用状況の追跡
    Smushプラグインの利用状況を開発元に送信するか否か
Smushプラグイン 設定の構成Smushプラグイン 設定の構成

↑設定項目と意味は下記のとおりです。
プリセット構成を利用するとSmushプラグインの設定を他のWordpressにインポートできます。

Smushプラグイン 設定のデータと設定Smushプラグイン 設定のデータと設定

↑この設定画面ではSmushプラグインを削除したときに設定データを残すか削除するかを選択できます。

Smushプラグイン 設定のアクセシビリティSmushプラグイン 設定のアクセシビリティ

↑ハイコントラストモードを有効にすることができます。

Tutorials

SmushプラグインのTutorials画面SmushプラグインのTutorials画面

↑Smushプラグインの使い方の説明を閲覧できます。

Smush Pro

有料版Smushプラグインの案内です。

Smush – Lazy Load Images, Optimize & Compress Imagesの使い方

ここからはSmushプラグインの使い方を解説します。

とはいえ、最初から各機能は有効化されているので、既存の画像ファイルを圧縮する方法を書きます。

SmushプラグインのBulk Smush画面 その1SmushプラグインのBulk Smush画面 その1

↑この画面のバルクスラッシュ今(Bulk slash now)というボタンを押すと既存の画像ファイルを圧縮することができます。
ただしボタン1押しで50枚までしか圧縮されません。
なのでもし、Smushプラグインを有効化する以前に既に存在していた画像ファイルが1000枚ある場合は20回同じ作業を繰り返す必要があります。

SmushプラグインのBulk Smush画面 その1SmushプラグインのBulk Smush画面 その1

↑無料版の制限でこのように50枚までしか1度で処理してくれません。

WordPressの画像ファイル遅延読み込みを無効

WordPressに標準で搭載されている画像ファイルの遅延読み込み設定を無効化する方法を解説します。

もしSmushプラグインに実装されている遅延読み込み機能を有効化する場合は、同じ機能が競合して不具合や性能がフルに発揮できない可能性があるので、当手順を実施することをおすすめします。

WordPressテーマファイルのfuncitons.phpの <?php の下に下記を追記します。

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

画像ファイルの圧縮状況を確認

Smushプラグインによって圧縮された画像ファイルを確認します。

メディアのライブラリを表示します。

メディアのライブラリ画面メディアのライブラリ画面

↑このようにライブラリ画面の右端に「Smush」欄が表示され、画像ファイルの圧縮率を確認できます。

以上がSmush – Lazy Load Images, Optimize & Compress Imagesの使い方です。

まとめ

Smush – Lazy Load Images, Optimize & Compress Imagesを利用すると画像ファイルの圧縮と遅延読み込みを行いWebサイトやブログの表示速度向上を期待できます。

数多くある画像ファイルの圧縮と遅延読み込みプラグインの中でも人気があって、更新(アップデート)頻度もきちんとされているのでセキュリティ面でも安心して利用できます。

設定の変更は不要で、初期設定のまま利用できるので気軽に導入することができます。

ただし、コードを最適化して高速化するプラグ「Autoptimize」がインストールされていると競合して不具合が発生する可能性があります。

「Autoptimize」以外の最適化プラグインとも競合を起こす可能性もあります。

その場合はWordpressのダッシュボード画面に「複数のWordpress画像最適化プラグインがインストールされており、問題を起こす可能性があります」と表示されます。

最新で軽量な画像ファイル形式のWebPに変換するには有料にする必要がある点が最大のデメリットです。

もしSmushと同様の画像ファイルの圧縮や遅延読み込みに加えて、無料で画像ファイルをWebP形式に変換したい場合は「EWWW Image Optimizer」プラグインをおすすめします。ただし、Smushよりも設定が難しいです。

無料で画像ファイルをWebP形式ができて圧縮と遅延読み込みができる「EWWW Image Optimizer」プラグインの詳細説明記事はこちらです↓
EWWW Image Optimizer 画像ファイルサイズを圧縮して高速化するプラグイン 設定方法と使い方

「EWWW Image Optimizer」プラグインを使て既存の画像ファイルをWebP形式に変換する方法はこちらの記事を参考にしてください↓
EWWW Image Optimizerを使ってブログサイトの画像ファイルをWebPに変換する方法