Safari で LazyLoad を適用する方法 ! (Mac / iPhone, iPad)

LazyLoad[00](CatchImage)

 "Lazy Load" って何? って思うブログ初心者の方もみえるかもしれません。
 Lazy Load(レイジーロード)とは画像の遅延読み込みを行うためのJavaScriptライブラリ および その遅延読み込み技術 のことです。
 遅延読み込みは 画像の読み込みに時間差を設けて表示させ 画面表示の高速化を図るしくみですが、 画像読み込み時に "Lazy Load" 指定したHTMLでも Webブラウザが対応していないと "Lazy Load" 指定は無視されてしまいます。

 既に "Chrome" や "Edge" などの有名ブラウザではデフォルト対応済みですが、 iOS や Mac に含まれる "Safari" ブラウザでは  2022年2月13日現在最新の「Safari 15.3」においても  一部設定を変更しないと "Lazy Load" が適用されないため この記事に纏めました!

 Google PSI 点数にも貢献し SEO対策としても利用される "Lazy Load" 機能ですが、WordPress5.5 から標準機能になっているため ほとんどのWordPressユーザーは既にサイト対応済みで何も行う必要はありません。
 逆に WordPressユーザー以外はご自分のブログが "Lazy Load" 機能に対応しているか確認が必要ですが、非対応であっても imgタグと iframeタグ内に loading="lazy" を手動で追加 すれば大丈夫です。


 2022/03/15 Safari15.4 でついに、ネイティブLazy-load対応に! (ただし、imgタグのみ) 

 "Lazy Load" 適用のメリット/デメリット 

 "Lazy Load" のメリット 

 "Lazy Load" が適用されないと、全ての画像が一度に読み込まれてしまうため 画面表示されるまで 時間がかかります。
 "Lazy Load" が適用されると、 First View (最初に表示される画面)内の画像のみが最初に読み込まれるため、画面表示されるまでの時間が短縮されます。 スクロールして新たな画像が画面内に出現される度に画像が1つずつ読み込まれるので、画面に表示されない画像は読み込まれもしません。 よって、「 Google PSI 」点数に貢献し SEO 対策の一手段となりえます。



 "Lazy Load" のデメリットと注意点 

 サイトと 表示ブラウザ の両方で "Lazy Load" 対応済みでないと、適用されません。

 注意点は、 First View (最初に表示される画面)内の img および iframe タグ内に、 loading="lazy" を記述してはいけません。  逆に、Google PSI にて指摘されます。

 管理人の場合、(サイズがいろいろあって)スマホで First View を見極めるのは難しそうなので、PCで フルHD画面の縦サイズ(1080px)を First View とみなして調整しています。
 なお、WordPress の最新バージョンでは 自動的に First View のみ loading="lazy" を非適用にしてくれるらしいですよ!(もちろん適用も自動)




もっと知りたい方には、以下サイトをオススメ!




 「Mac」 Safari 設定の変更方法 

 設定変更は必要ですが、 Mac の場合 Safari 13.1 以降で "Lazy Load" 対応済み!

【2022/02/18 修正】 macOS CatalinaMojave でも OSのアップグレード無しで Safari14.1.2  にアップデート可能で、WebPにも対応します。  にアップデート可能ですが、 WebP の表示はできません。 

 【2022/03/15 追記】 macOS 11.6.5 Big Sur + Safari15.4 にて検証しましたが iOS15.4 同様、imgタグのみ ネイティブLazy-load 対応を確認!
 iframeタグへの適用は、以下の方法で(手動で)変更する必要があります。 



 以下の画面のように [Safari のメニュー] - [開発] -[実験的な機能] にて、「Lazy iframe loading」と「Lazy image loading」 2つのチェックボックスをオンに変更します!

LazyLoad[01]

 【おまけ】「Mac」 Safari WebP 対応 

 設定変更は必要ですが、 Mac の場合 Safari 13.1 以降で "Lazy Load" 対応済み!
macOS CatalinaMojave でも OSのアップグレード無しで Safari14.1.2 にアップデート可能 で、WebPにも対応します

【2022/02/18 修正・加筆】 実機で検証していませんが、(既存情報だと) Catalina と Mojave にて Safari14.1.2 以降にアップデートしても、 WebP の表示はできません!
 また、Catalina では Safari15.3以降 にもアップデート可能になったため( WebP 表示はできませんが セキュリティを考慮して)Safari 最新対応バージョンへのアップデートを推奨いたします。 


 せきゆおう🥙Web制作をのあれこれ発信する人 @wurst_design さんが、実機で検証してくれました。 ご協力、感謝いたします!!

 下記報告のように、「 macOS Catalina かつ Safari15.3 」の実機では WebP 画像は何も表示されませんでした。


 対応機種であれば、 Big Sur アップグレードがオススメ! 

 macOS11「Big Sur」以降にアップグレードすれば OSレベルで WebP対応するため、同梱する Safari で "WebP" 表示可能 かつ "Lazy Load" 対応(オプション指定要)に! 

 管理人は Mac mini Late 2014 のいわゆる「松」モデルにて macOS11.6.3 Big Sur + Safari15.3 を利用中ですが、「 メモリ8GB + Fusion Drive 」のため ブログ執筆程度であれば動作は問題ありません。

【ご参考】macOS11「Big Sur」アップグレード対応機種




 「iPhone, iPad」 Safari 設定の変更方法 

 設定変更は必要ですが、少なくとも Safari14 [iOS14] 以降で "Lazy Load" 対応済み!
Safari14 以降であれば、WebPにも対応します。 ( Safari13 [iOS13] は WebP 非対応 )

 【2022/03/15 追記】 iOS15.4(Safari15.4)にて、imgタグのみ ネイティブLazy-load 対応を確認しました! 
 iframeタグへの適用は、以下の方法で(手動で)変更する必要があります。 iPadOS も同様のはずです! 

LazyLoad[02]

 [設定] - [Safari] 画面で 一番下までスクロール後、[詳細] を選択!


LazyLoad[03]

 [詳細] 画面で 一番下の、[Experimental Features] (実験的な機能)を選択!


LazyLoad[04]

 [実験的な Webkit の機能] 画面で真ん中くらいまでスクロールし、「Lazy iframe loading」と「Lazy image loading」をオンに変更 !



 【おまけ】 Webサイトデータ画面にて、履歴を消去せずに Webサイトデータのみ削除可能 


 「履歴」まで消えちゃうと不便ですが、「Webサイトデータのみの削除」もできますよ!
以下「Webサイトデータ」画面にて 一番下までスクロールし、 「全Webサイトデータを削除」ボタンを押してください


LazyLoad[05]



 Safari15.4 で、ネイティブLazy-Load対応!(imgタグのみ) 


 以下のサイトで「SafariがネイティブLazy-loadをサポートする日が近いかも」とあるので、次のメジャーバージョン(15.4 か 16?)以降 やっと「設定の変更」は不要になりそうです♪

 【2022/03/15 追記】 iOS15.4(Safari15.4)にて、imgタグのみ ネイティブLazy-load 対応を確認しました! 
 iframeタグへの適用は、既に説明した方法で(手動で)変更する必要があります。 

 macOS 11.6.5 Big Sur + Safari15.4 にて検証しましたが iOS15.4 同様、imgタグのみ ネイティブLazy-load 対応を確認!
 iframeタグへの適用は、既に説明した方法で(手動で)変更する必要があります。 

 開発者向け Safari の Technology Preview のバージョン 135 ではネイティブ Lazy-load がデフォルトで有効になっています。

 11 月 15 日にリリースされた Safari Technology Preview 135 では、設定を変更することなく初期状態でネイティブ Lazy-load が有効です。




 厳密な ファーストビュー( First View )の領域とは? 


 ファーストビュー( First View )の領域って 曖昧になってしまいがちですが、(徹底調査内容が書かれてるので) 厳密に "LazyLoad" を適用させたい方は 以下の記事をどうぞ♪
あトん さんが「もっと正しい使い方」を調査してくれました!






Google+Ranking
最後まで読んでいただき、ありがとうございます。 また、お越しくださいませ。
// アタル
For follow LINE Reader Group!Subscribe to this blog on Feedly!

Next Post Previous Post
No Comment
Add Comment
comment url