ウェブサイトのアクセススピード向上は、グーグルSEOにも有効なのはご存知だと思います(・x・)ノグーグル先生の中の人が話してましたね。
その際の有効な手段として、わざと画像ファイルの読み込みを遅延させて、ファーストアクセス時にかかる速度負担を軽くしようとする手段がありました。それが「Lazy-load」という手段なのですけど、WordPressには専用プラグインなどがあるのですが、このプログラムがうまく動かない事もあってずっと放置してました…(；・∀・)
今回「Lazy-load」がブラウザの標準機能になるとの事で！JavaScriptやWordPress専用プラグインが不要になりました。
しかも、WordPress5.5からLazy-load指定が標準装備になるみたいで、メディアとして画像などのファイルを設置する際に自動で記入されるそうです。
「Lazy-load」の指示方法
imgタグ、iframeタグに「loading=lazy」属性を追加するだけです。あとはブラウザ側で判断するので、ホント簡単(´・ω・｀)
設置例はこんな感じになります。
ただし注意点がありまして、Lazy-load指定する際は「width属性」と「height属性」の記載有りで考えましょう
ほとんどの方が実際に経験があるのではーとは思うのですけど、この指定がないとページにアクセスした際にレイアウトが動いて閲覧し難くなるからです。必須ではないのですけどユーザビリティを考える上で、ちゃんと考えて設置しましょうって事ですかね。
あとモバイルサイトとしてレスポンスデザインを採用した際に、どうしても端末ごとの画面サイズがかわるのに対応するため、横幅100％指示を指定される方が多いと思います。100%指定って曖昧な部分だと思いますので、良かったら画像ファイル自身の「width属性」と「height属性」はファイル情報のままで、100％指定する際はCSSを活用すると良いかもです。
各ブラウザの対応状況など
現在サポートされているブラウザは
- Google Chrome
- Forefox
- Microsoft Edge（Chromeベース）
となっていて、iPhoneユーザーが良く使用している「Safari」に関しても実験コードとして導入されているそうなので、近々で実装されそうな感じではあります。
グーグルSEOにもなりますので、是非導入を検討してみてください(・x・)ノ
参照サイト：
Twitterにつぶやく
はてなブックマークに登録
