皆さん、こんにちは。

業務改善を行うIT・業務コンサルタント、高橋です。

冒頭に『それが必要なくなるかもしれません』という書き方をしましたが、実際にはブラウザが『Google Chrome 76』であれば『Lazy Load』や『lazysizes』といったものは必要なくなりました。

『Google Chrome 76』において『ネイティブlazy-load』をサポートするようになったのです。

JSなしで画像が遅延読込み可能に

『ネイティブlazy-load』はどうやら開発版のGoogle Chrome（Canary）で試験的に運用されていたようで、今回『Google Chrome 76』から正式にサポートされるようになりました。

ブラウザでサポートしてくれますので『<img>タグ』に『loading属性』を追加すれば機能してくれます。

『<img>タグ』だけでなく『<iframe>タグ』でも『loading属性』は機能します。

例えば、

<img src=”example.jpg” alt=”例” height=”500″ width=”500″>というコードの場合

<img src=”example.jpg” loading=”lazy” alt=”例” height=”500″ width=”500″>

とするだけです。

この『loading属性』は『lazy』を含めて3種類あります。

『loading=”lazy“』：lazy-loadを必ず適用し、画像が近づくとそれを読み込む。

『loading=”eager“』：lazy-loadを適用せず、ページと同時に画像を読み込む。

『loading=”auto“』：lazy-loadするかはブラウザに判断を任せる。

また、値がなく属性だけの場合は『auto』が適用されるとなっています。

Google Chromeを使っているユーザーは多いですから、JavaScriptを外してこのパターンに変更してしまっても良いのかもしれません。

ちなみに、SEOへの影響はないようです。

Googleが行っていることなので影響があっても困りますが。。。

皆さん、こんにちは。

業務改善を行うIT・業務コンサルタント、高橋です。

以前からウェブサイトによく使われている『Google Maps』ですが、『Google Maps API』を使って地図表示をされているサイトは注意が必要です。

Google Maps APIで地図表示されない

Googleは、『Google Maps Platform』という新しい地図サービスを7月16日（当初の6月11日から延期）から提供します。

それに伴い、従来の『Google Maps API』を使って地図表示をしている場合、以下のようなルール変更があります。

１．APIキーが必須になる

２．料金プランが新しくなることにより、ケースによっては料金が発生する場合がある

昨今においては、住所がわかればスマートフォンでも地図表示はできますので、地図表示をしておくにしても、シンプルにGoogle Mapsの共有機能にある、『地図を埋め込む』から『iframe』のHTMLコードを該当ページに埋め込んでおくだけの場合も多いです。

もし『Google Maps API』を使っているならば、その部分を『iframeによる地図の埋め込み』に変更されることの方が良いかもしれません。

どうなっているのか不明な場合、Chromeブラウザの拡張機能で『Google Maps Platform API Checker』というチェックツールがありますので、それにて対応の可否がわかるようになります。

この拡張機能では、アドレスバーの右にピンマークが表示され、以下の3つのうち、いずれかの表示になります。

１．緑：APIキーの登録・設定がされている

２．赤：APIキーの設定がない可能性がある

３．グレー：APIは使われていない

まもなく変更になりますので、地図表示がされなくなる前に変更を。