皆さん、こんにちは。

業務改善を行う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が行っていることなので影響があっても困りますが。。。

前回のWEBに関する記事はこちら⇒HTTPSを標準とする動きが加速

皆さん、こんにちは。

業務コンサルタントの高橋です。

httpサイトからhttpsサイトへの移行には、いくつか行わなければいけないことがあります。そのあたりのお話しをしておきます。

ページ内に記載されているURLパスの見直し

多くの場合、bodyタグ以下のメインコンテンツ部分に書かれているaタグやimgタグ内のパスは相対パスで書かれているかと思いますが、少しでも絶対パスで書かれた箇所があるのであれば、その先頭をhttpからhttpsへ変更しておく必要性があります。ただし、絶対パスで書かなければいけないものでなければ相対パスにしてしまうか、http:(https:)の部分をカットし、//からはじまる書き方をされると良いです。
また、headタグ内に書かれているものも同様に変更する必要性がありますが、headタグ内には絶対パスで書かなければいけない部分がありますので、そちらはhttpからhttpsへ地道に変更してください。特に、canonical部分の変更を忘れてしまうことが多いので、エディタの検索機能などにて確認されると良いでしょう。

.htaccessの見直し

ちゃんと正規化などの記述を.htaccessでされていた場合、httpの時であればhttpではじまる正規化のURLを記載していたはずです。その場合はhttpsへ記載変更してください。何も記載していなかったのであれば、この際ですから正規化の記述を加えておくと良いでしょう。
また、従来のhttpサイトの一部にホスティング会社が用意した共有SSLを使っていた場合、そのまま残してしまうとリダイレクトループになってしまったりしますので、この部分も見直しする必要性がありまし、PCとスマートフォンサイトの切替を行っている場合もhttpsに統一して記述し直さないとリダイレクトループになってしまいます。

その他

SNSボタンやJavaScriptなどでもブラウザーで警告を受けることがありますが、SNSボタンの場合であれば再度コードを取得し直してみると中の記述が変更になっている場合もあります。JavaScriptであれば、httpからはじまるURLの記載があったりしないか確認してみると良いでしょう。

全てのページが緑色の錠マークになるように頑張ってみてください。