海外&国内SEO情報ウォッチ

ネイティブLazy-loadとJavaScriptを併用して遅延読み込みを完璧に実装するモダンなやり方

この記事の目次：

Web担当者に役立つ最新情報

ネイティブLazy-loadとJavaScriptを併用して遅延読み込みを完璧に実装するモダンなやり方
loading属性をサポートするかしないかで切り替える（コリス）国内情報

loading="lazy"属性は、画像やiframeの遅延読み込みをブラウザの標準機能として実行する。HTMLタグに加えるだけでいい。追加のJavaScriptのライブラリを必要としないので「ネイティブLazy-load（レイジーロード）」とも呼ばれる。

現在は、ChromeとFirefox、Edgeといった主なブラウザがloading="lazy"属性をサポートしている。しかしながら、Safariは正式機能としてはまだ対応していないし、未サポートのブラウザも少なからず存在する。

ブラウザの対応状況にかかわらず遅延読み込みを確実にするなら、JavaScriptによるLazy-loadを完全に取り去るのは得策ではない。

そこで、こちらの記事では、loading属性とJavaScriptを併用した画像の遅延読み込みのベストプラクティスを解説している。次のような動作を実現するものだ：

ネイティブLazy-loadをサポートしているブラウザでは、loading属性で遅延読み込みさせる
ネイティブLazy-loadをサポートしていないブラウザでは、従来のとおりJavaScriptで遅延読み込みさせる

具体的な実装方法は元記事の解説で確認してほしい。遅延読み込みはページの表示速度を速くすることでユーザー体験を向上させる。サイト制作者に共有してあげよう。

★★★★★

スピードアップがんばってる人用（ふつうの人は気にしなくていい）
技術がわかる人に伝えましょう

あなたがオウンドメディア運用に失敗するのは計測の仕方を間違っているから!?
アクセス解析トップの2人が対談で解説（週刊はてなブログ）国内情報

ウェブで積極的に情報発信するオウンドメディアに取り組む企業が今は一般的になっている。「オウンドメディアはじめました」と聞いても目新しさはもうないだろう。

ところが、オウンドメディアの価値を、さらに言えば自社ビジネスへの貢献度を、適切に計測できている企業となると、どのくらいあるのかは疑問だ。ほとんど計測できていなかったり、あるいは誤った指標で計測していたりするケースが少なくないように思う。

日本のアクセス解析業界のトップに位置する小川卓氏と村山佑介氏が、オウンドメディア運用において解析すべき数値を対談形式で語った。

次のようなトピックに対談のなかで触れている。

オウンドメディアを成功に導くポイントは目的設定を間違えないこと
コンテンツの目的を整理し、記事の「貢献度」の測定する
ユーザーの動きを分析することで経験則に過ぎなかった仮説を実証できる
スモールビジネスにおける企業ブログとデータの活用法

企業がメディア運営に行き詰まる原因として、誤った目標設定を第一に小川氏は挙げている。

オウンドメディア運営でつまずく原因の多くは目標設定にあると感じています。たとえば最終的にオウンドメディアから資料請求や会員登録などのコンバージョンにつなげたい、とします。しかし、オウンドメディアはいきなりコンバージョンさせるのは難しい施策です。運営者が認識すべきは、コンバージョンはあくまでも将来的な目標であり、まずは集客し、良質なコンテンツを通じユーザーと信頼関係を築かねばならない、ということです。ところが、こうした認識が不十分のまま、最初からKPIをコンバージョンに置いてしまうケースが多いのです。ユーザーとのコミュニケーションが十分でない段階から、「月30件コンバージョンを取ろう」と考えてしまうと、どうしてもうまくいかなくなってしまう。

思い当たる節はないだろうか？

そして、集客からコンバージョンまでのステップを3段階に小川氏は分類している。