lazyload機能があると聞いたけど設定や挙動について詳しく知りたい…！
画像対策として効果があるといわれているのは「画像圧縮」「lazyload」この２つ。
ほとんどの場合は別々のプラグインとして実装されているが、
「smush」ならこれひとつで利用できます。
ネイティブlazyloadと大きな違いは、noscript対策やサイズ指定がない画像でも対応してくれる点です。
標準機能はいまいち、lazyloadが効いているのかいまいちわかりませんが、フェードイン機能がついているので、見た目もバッチリ。
加えて、webp、CDNといった上級者向けの画像処理機能がついている詰め合わせ型のプラグインといえます。
今回はsmushの設置を検討している方向けに、設定画面をみせながら解説していきます！
いまいち画像対策について理解できていない方も、今回をきっかけに理解しちゃいましょう。
画像圧縮とlazyloadがひとつのプラグインに
ほかのプラグインとどう違うのか？
大きな違いは、smushで画像対策がすべて行える、点です。
一般的にはlazyloadのプラグインといえば「BJ Lazy Load」
画像圧縮なら「ewww image optimizer」とプラグインが分かれているケースがほとんどです。
設定が複雑なことも多く、何から始めていいかわからない。そのうえ、どう変わったかわかりづらい。そう思う人も少なくないと思います。
smushは「lazyload」「画像圧縮」など、各機能ごとにタブでわかれており、視覚的にみやすいのが特徴です。
smushの管理画面
なにより、こちらで行うのがボタンを押すだけです。
プラグインが最適な処理を自動で行ってくれるので、ボタンをぽちぽち押していくだけ。作業時間でいうと30分ほど。
要するに、画像対策の詳細を知らなくても、自動でやってくれるのです。
どのくらい圧縮したのかをグラフでみることができます。
「ライブラリ」で各ファイルの詳細をみれます。
googleは画像対策を推奨している
まずこちらをご覧ください。
PageSpeed Insightsでは、改善案をだしてくれます。
例えば「オフスクリーン画像の遅延読み込み」を改善しなさい、という項目があります。
要するに、遅延通信lazyload機能を指します。
↑詳細をクリックすると、改善案が表示されます。
「WordPressの遅延読み込みプラグイン」をクリックすると、１番目にsmushが掲載されています。
上記は当サイトのキャプチャーですが、ほとんどサイトに同じ提案がきているはずです。
要は、googleがsmushの利用を推奨しているということです。
※他にもwebp対策がある
webpの説明は割愛するが、ざっくりいうと今後画像圧縮で期待されている新しいファイル拡張技術です。smushでもPROに搭載しており有料会員のみ利用が可能です。とはいえ、ちょっとコスパが悪いので、もし検討している方は「ewww image optimizer」を使えば、無料で利用できます。詳しくはこちら。
smushをもっと詳しく！
- 全世界でもっともインストールされている
- insightsで紹介されています
- CDN、webp、など画像処理のエキスパート
正式名称は「Smush – Compress, Image Optimizer, Lazy Load, WebP Images」です。
国内ではあまり認知度はありませんが、海外レベルとみるとトップクラスのプラグインです。
人気ランキングの上位ですし、さきほど紹介したとおり「PageSpeed Insights」内でも紹介されるほど信頼性が高い。
特徴はパック型のプラグインでして、
・画像圧縮
・lazyload
・CDN
・webp
といった、画像処理に効果があるといわれている技術を詰め込んでいます。
wordpress5.5でlazyloadが標準機能となったので、もしsmushを使う場合は、OFFにすると重複を避けられます。詳しくは手順でご紹介します。
設定方法について
設置といってもとてもシンプルです。
作業時間も短く、当サイトだと30分程度でした！
- 初期設定方法
- 画像圧縮の確認
- lazyloadの設定
上記の手順で、進めたいと思います。
まずは初期設定、インスール画面から「」をクリック。
有効化後、サイドバーから「smush」を選択します。
するとチュートリアルが始まります。
初期設定＝画像圧縮と思っていただいて構いません！
あとはポチポチとボタンを押していくだけです。
設定が完了すると、トップ画面に何％圧縮したかをグラフでみることができます。
各画像ごとにチェックしたい方は、メディアから「ライブラリ」をクリック。
各ファイルごとの圧縮率をみれます。
次に、lazylaodの設定です。
smush側で設定するまえに、ネイティブlazyloadをOFFにします。
テーマを開き、funcitons.php、にて以下の1行を追加します。
実際のコード
html
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
この文をいれると、ネイティブlazyloadの設定がOFFになります。次に、smush側の設定です。
Lazy Loadタブを選択して「有効化」をクリックすれば、これで完了です。
実際の挙動は以下のとおり。
いろいろ試しましたが、smushがフェードインの時間や、ふわっとみせる演出がキレイで、一番のお気に入りです。
まとめ
標準で付いているlazyloadはいまいち動作しているのか不安でしたが、このプラグインならフェード機能があるので、一目でわかります！
診断結果でも解消されており、安心しました。
設置も簡単なので、まずはお試してで利用してみるのもアリです！
ちなみにスピードを重くしている理由は他にもあり、画像処理は優先順位的には最後だったりします。
もしスピードを上げたいと思っている方は、「」を合わせてみてると、より知識が深くなると思います。