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

　"Lazy Load" って何？　って思うブログ初心者の方もみえるかもしれません。
　Lazy Load（レイジーロード）とは画像の遅延読み込みを行うための技術で、 ブラウザの機能のみで行うネイティブLazy-load  と、 JSライブラリ利用版  の2種類があります。

　遅延読み込みは　画像などHTML要素の読み込みに時間差を設けて表示させ　画面表示の高速化を図るしくみですが、
 img・iframe 要素の読み込み時に「ネイティブLazy-Load」指定したHTMLでも　Webブラウザが対応していないと「ネイティブLazy-Load」指定は無視されてしまいます。
　既に "Chrome" や "Edge" などの有名ブラウザでは「ネイティブLazy-Load」デフォルト対応済みですが、 iOS や macOS に含まれる "Safari" ブラウザでは　 2022年2月13日現在最新の「Safari 15.3」においても 　一部設定を変更しないと「ネイティブLazy-Load」が適用されないため　この記事にまとめました！

　一方、（「ネイティブLazy-Load」より古くから存在する）JSライブラリ利用の "Lazy Load" は JavaScript で遅延ロードを行うため、適用範囲が広くカスタマイズも可能ですが、ブラウザがJS無効状態だと 動作しません。

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

　2022/03/15　Safari15.4 でついに、ネイティブLazy-load対応に❗️
（デフォルト適用は img 要素のみで、iframe 要素適用は オプション設定が必要）　

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

　"Lazy Load" のメリット　

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

　JSライブラリ利用の "Lazy Load" の場合、img および iframe 要素以外にも対応 している場合が多いようです。

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

　サイトと　表示ブラウザ　の両方で「ネイティブLazy-Load（img および iframe 要素のみが対象）」対応済みでないと、適用されません。

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

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

　JSライブラリ利用の "Lazy Load" でも、First View （最初に表示される画面）内の要素を 遅延ロードしてはいけません。

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

　2023年2月末現在も ネイティブLazy-Load の対象は『（静的な）img ・ iframe 』要素のみのため、Twitter や Instagram　TikTok などのSNS埋め込みや、ソースコード表示用JSライブラリ適用の <code> 要素 などを遅延ロードさせたい場合は、JSライブラリを利用 しなければいけません‼️

　「ブラウザがJS無効」設定の場合は JavaScript が動作せず 表示不具合が発生する可能性が高いため、『ネイティブLazy-Load と JSライブラリ の併用（ハイブリッド）』をオススメします❗️

　別記事として まとめましたので、ぜひご覧ください。

　「Mac」 Safari 設定の変更方法　

　設定変更は必要ですが、 Mac の場合 Safari 13.1 以降で "ネイティブLazy-load" 対応済み！

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

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

　① Safari のメニューに [開発] が表示されていない方は、以下2画面のように 環境設定 の変更が必要です‼️

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

　（ Safari のバージョンが上がるたびにリセットされてしまうため、再設定が必要です‼️ ）

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

　設定変更は必要ですが、 Mac の場合 Safari 13.1 以降で "ネイティブLazy-load" 対応済み！
macOS Catalina と Mojave でも 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 画像は何も表示されませんでした。

macOS Catalina なら Safari15.3 の実機で確認いたしました。

左がChrome、右がSafariです。
やはり<img src="xxxx.webp">の書き方では対応していませんでした。

記事に参考画像が必要でしたら雑なスクショになりますがお使いください🙇‍♂️ pic.twitter.com/d2HCVqVRcQ

— せきゆおう🥙Web制作をのあれこれ発信する人 (@wurst_design) February 17, 2022

　対応機種であれば、 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 も同様です！　

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

　[詳細] 画面で　一番下の、[Experimental Features] （実験的な機能）を選択！

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

　（ Safari のバージョンが上がるたびにリセットされてしまうため、再設定が必要です‼️ ）

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

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

　Safari15.4 で、ネイティブLazy-Load対応！（iframe要素はオプション設定要）　

　以下のサイトで「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" を適用させたい方は　以下の記事をどうぞ♪
あトん　さんが「もっと正しい使い方」を調査してくれました！

最後まで読んでいただき、ありがとうございます。　また、お越しくださいませ。
// アタル