ECサイト高速化の救世主「レイジーロード」がやってきた！

あなたのECサイトはSEO的に「合格」なのか
「こんな遅いサイト、二度と訪問したくない！」そんなふうに今日もあなたは憤っていらっしゃるかもしれません。私はほぼ毎日憤っています。そんなよく居るネットユーザの不満をタイムリーに捉えて昨年実施されたのが、グーグルの新しいSEO指標「コアウェブ・バイタル」。検索順位の上位表示に影響するということで、昨年大きな話題となりました。自社がこの指標に対して、合格か不合格かについては、グーグルの「ページスピード・インサイト」ですぐに確認することができます。

たとえば、同じショッピングカートを導入している「ある２つのECサイト」を「ページスピード・インサイト」で検証すると以下の様な結果になります。「不合格」と表示されているのは国内でも著名なEC制作会社が作成したECサイト。「合格」と表示されているのは、弊社が作成したECサイトです。

残念ながら、多くの著名なECサイトがこの「コアウェブ・バイタル」の前にあっては「不合格」の烙印を押され、今も改善が無されないまま放置されているケースも多く見受けます。

なぜECサイトは「コアウェブ・バイタル」に弱いのか
コアウェブ・バイタルが不合格だからといって、SEOのすべてが不合格というわけではありません。あくまで上位表示のための一因である「コアウェブ・バイタル」において惨敗した、下の下である、まったくもってふがいない、という意味での「不合格」なだけです。とはいえ、表示スピードが遅いのはECサイトにとって致命傷ですから、SEOに影響しなくても実機で見てイラつかない程度には改善が必要ですよね。

ではなぜ、多くのECサイトが「コアウェブ・バイタル」で合格点が取れないのか。それには３つの大きな理由があります。

１）そもそもカートASPのシステムに原因がある
２）上記１）を hack するための技術力不足
３）技術力は不要だが、ブラウザが非対応

まず、１）については、システム側の問題なのでどうしようもありません。多くはECサイトを便利に管理したり購入率をアップさせるための機能のために書かれた「javascript」が原因です。往々にしてこの部分が邪魔をしているのですが削除できなかったり、ネットでよく知られる解決方法を取ろうとしてもjavascript同士で干渉（コンフリクト）してしまうのです。そこで２）の解決方法になるのですが、文字通り　hack するだけの能力と気力がないと突破できません。つまり調査に時間とそれなりの人材が必要です。なので財力があれば解決できる場合もあります。問題は３）です。誰もが簡単に解決できるはずのに、ブラウザが対応してくれない。その代表的なものが「ネイティブ・レイジーロード」です。

レイジーロードとは

一般的には、ブラウザは画像を、図１、図２、図３　と順番に読み込んでしまうので、ページの表示速度や読み込み時間（コアウェブバイタルのLCP）に影響します。しかし「レイジーロード」なら、ファーストビューで表示する必要の無い画像（たとえば画像２と３）に、レイジーロードありの記述、 具体的には、 タグに loading=”lazy” 属性を追加するだけで、図２と３はあとから読み込んでくれるので、LCPを稼ぐことが可能になります。

レイジーロードには２種類あり、「javascriptタイプ」と、HTMLに一言書き込むだけの「ネイティブタイプ」があります。前述の通り、javascriptタイプはECサイトのシステムを検証する必要があり、また開発のコストがかかるということで、前述の１）２）の条件をクリアーする必要が出てきます。一方、ネイティブタイプのレイジーロードは簡単ですが、３）のブラウザが対応していない、特に、日本国内のメインブラウザである「iPhone」に対応していないという問題がありました。

2022年３月のiOSアップデートでレイジーロードに対応！
しかしそんな不条理も、2022/3/16に解決の一歩を踏み出しました。この日リリースされた、iOS15.4　で　ネイティブ・レイジーロードがやっと解禁になったのです。実は今までも使おうと思えば使えたのですが、あくまで実験モードで、デフォルト設定ではなかったため一般のユーザが使うことはありませんでした。これでECサイトの鬼門だった「画像高速化」に大きく一歩踏み出したのです！さぁ、皆さん、レイジーロードに取り組みましょ・・・と、その前に注意点です。
１）ファーストビューの画像にはレイジーロードは設定しないこと
２）imgタグ内に、画像の高さ、横幅を明確に指定しておくこと
３）iOS15.4がメインのブラウザとなっているかどうか確認すること

３）は意外に重要です。15.4以前のブラウザでエラーになることはありませんが、多忙を極めるEC管理者に依頼するなら、ある程度影響力が発揮できるタイミングがよいでしょう。ECサイトによってはメインOSが15.4になるまであと数ヶ月かかるかも知れません。
なので、グーグルアナリティクスの、ユーザー＞テクノロジー＞ブラウザとOS＞オペレーティングシステム＞セカンダリディメンションで　OSのバージョンをチェックして、現在、iOSユーザの何割が15.4ユーザなのか確認してから、指示を出すようにしましょう。

※その他、チェック方法としては、macOS なら、Safari 15.4 、iPadOS 15.4　も参考にすると良いかもしれません。Chrome や、Edge はOS問わず対応済みです。firefoxはimgのみ対応済みでiframeには非対応。ここはiOS15.4と同等です。

さぁ準備が整ったら、ようこそ！「レイジーロード」へ！

 - JECCICA記事, お知らせ, その他, コラム, ニュース