2022年10月6日コーディング表示速度が遅いWebページって、閲覧者からすると最悪ですよね。僕たちWeb制作者は少しでも表示速度を早くするために試行錯誤する訳です。僕もWebページの表示速度についてはまだまだ研鑽中ですが、最近では主に以下の2つを心がけています。Loadを導入して初期読み込み速度を速くするwebPについては別の記事で導入方法などを解説しているので、興味がある方は読んでみてください。webPで行こう!JPEGやPNGから変換する方法や使い方を解説Webサイトの表示速度は永遠の課題ですよね。速度を改善する方法は色々ありますが、画像の容量削減もそのひとつです。Loadの実装方法について詳しく解説しようと思います。Loadについて簡単に説明します。Loadとはブラウザの表示領域に画像が表示された時点で画像を読み込む機能です。Webページを見ている時、スクロールに合わせて画像が表示されていくのを見たことがあると思います。※画像を読み込むタイミングは調整できるので、表示領域に入る少し前に読み込むことも可能です。Loadとは、ブラウザの表示領域に画像が表示された時点で画像を読み込む機能でした。裏を返せば、ブラウザの表示領域以外の画像は読み込まないということです。Webページを開いた時点で、ファーストビューの画像だけ読み込み、その他の画像を読み込まないので、読み込み速度が早くなります。Loadの有無でページの読み込み速度に大きな差が生まれる場合もあります。画像だけではなくYouTubeなどの埋め込みに使うiframeの読み込みも遅延させることが出来ます。iframeの読み込みには時間が掛かるので、YouTubeなどを多用する場合も効果的です。Loadを実装する方法を3つ紹介します。1つ目はloading属性を使う方法。2つ目はJavaScriptのプラグインを使う方法。3つ目はWordPressのプラグインを使う方法です。ひとつずつ解説していきます。Loadを実装する方法は簡単です。img要素やiframe要素にloading="lazy"を追加するだけです。loading="lazy"></iframe>わざわざ解説する必要が無いほど簡単ですね!すべてこの方法で実装できればいいですが、loading="lazy"に対応していないブラウザもあります。2021年4月時点での対応状況は以下の画像の通りです。IEとSafariが全滅です。IEはまだいいとして、IOSのSafariが未対応というのはかなり痛いですね。PCのモダンブラウザだけ対象のWebページならloading="lazy"だけいいかもしれませんが、なかなかそのような案件はありませんよね。現実的にはJavaScriptのプラグインを利用することになると思います。Load系のプラグインは数多くありますが、今回は「lazysizes」というプラグインの実装方法を解説していきます。lazysizesをダウンロードするまずは下記のGitHubからlazysizesをダウンロードしましょう。ZIP」からダウンロード出来ます。lazysizesをHTMLファイルに読み込むダウンロードした「lazysizes-gh-pages.zip」を展開すと、「lazysizes-gh-pages」というフォルダが作成されます。そのフォルダ内の「lazysizes.min.js」をHTMLファイルから読み込みます。head要素かbody要素の中に以下のソースコードを追加してください。※lazysizes.min.jsまでのパスは環境に合わせて変更してください。src="js/lazysizes.min.js"></script>これで準備は完了です。Loadを実装していきます。普通通りimg要素で画像を表示しますが、画像のパスはsrc属性ではなくdata-src属性で指定し、lazyloadというクラスを追加します。class="lazyload">picture要素を使用したレスポンシブイメージにも対応できます。画像のパスをsource要素ではdata-srcset属性で指定し、img要素ではdata-src属性で指定します。後はimg要素にlazyloadというクラスを追加するだけです。class="lazyload"></picture>webP画像を使用する場合、webPに対応していないブラウザがあるので、picture要素や.htaccessで画像を切り替える必要があります。.htaccessで切り替える場合は特に気にせず、img要素と同様の書き方で大丈夫です。picture要素で切り替える場合は以下のようなソースコードで対応可能です。class="lazyload"></picture>webPについては以下の記事で詳しく解説しているので、興味がある方は読んでみてください。webPで行こう!JPEGやPNGから変換する方法や使い方を解説Webサイトの表示速度は永遠の課題ですよね。速度を改善する方法は色々ありますが、画像の容量削減もそのひとつです。最近のWebサイトでは大きな画像を多用すること...ryob.netlazysizesはiframeにも対応しています。data-src属性でURLを指定し、lazyloadというクラスを追加するだけです。data-src="https://www.youtube.com/embed/xxxxxxxxxxx"></iframe>loading属性とlazysizesを組み合わせて使う以下の記事でloading属性とlazysizesを組み合わせて使う方法が紹介されています。コリス...coliss.comloading=”lazy”に対応しているブラウザはlazysizesを読み込まない様にし、loading=”lazy”に対応していないブラウザのみlazysizesを読み込むというアプローチです。Loadを実装したらいいやと思ってましたが、ここまでシビアに突き詰めるのは凄いと思いました。Loadを導入することも出来ます。Images」というプラグインを使用しています。Images」をインストールして有効化します。Loadを実装したい項目にチェックを付けるだけです。Loadが有効になります。Load用に書き換える必要はないということです!しかも、picture要素で表示している画像にも有効になります!WordPressの場合はプラグインを使うのがベストかもですね。Loadを導入することでアンカーリンクの位置がズレる場合があります。AOSなど一部のスクロールアニメーション系のプラグインが正常に発火しない場合もあります。ページを読み込んだ時点では、表示領域以外の画像が読み込まれていないため、画像の高さだけリンクやスクリプトの発火位置がずれてしまうのが原因です。lazysizesのオプション設定で回避できるかもしれないので、分かり次第追記しようと思います。Loadは余分なメディアの読み込みを遅延することが出来るので、Webページの表示速度の改善に有効な手段です。実装方法も簡単なので導入する価値はあると思います。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメント*webPで行こう!JPEGやPNGから変換する方法や使い方を解説Gulpってる?インストールから画像圧縮を自動化する方法を解説スポンサーリンクPROFILE2012年からWebサイト制作に関わり2022年に独立。現在はフリーランスのWebデザイナーとして活動しています。Webサイトのデザイン、WordPressでのサイト構築、HTMLとCSSのコーディングなどをメインでやっています。