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

LazyLoad[00](CatchImage)

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

 遅延読み込みは 画像などHTML要素の読み込みに時間差を設けて表示させ 画面表示の高速化を図るしくみですが、
 imgiframe 要素の読み込み時に「ネイティブ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" を手動で追加 すれば大丈夫です。( heightwidth属性指定も、推奨 )


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


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

 "Lazy Load" のメリット 

 "Lazy Load" が適用されないと、全ての画像(を含むHTML要素)が一度に読み込まれてしまうため 画面表示されるまで 時間がかかります。
 "Lazy Load" が適用されると、 First View (最初に表示される画面)内の画像(を含むHTML要素)のみが最初に読み込まれるため、画面表示されるまでの時間が短縮されます。
 スクロールして新たなHTML要素が画面内に出現される度に要素が1つずつ読み込まれるので、画面に表示されない要素は読み込まれもしません。
 よって、「 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 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 のメニューに [開発] が表示されていない方は、以下2画面のように 環境設定 の変更が必要です‼️

mac-LazyLoad[01]
mac-LazyLoad[02]

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

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

mac-LazyLoad[03]


 【おまけ】「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」をオンに変更 !

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



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


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


LazyLoad[05]



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






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

Next Post Previous Post
No Comment
Add Comment
comment url