診断にかけるとWebページの読み込み時間の短縮につながるヒントが得られます。その中のひとつである「オフスクリーン画像の遅延読み込み」とはどういう意味か、また診断結果を改善する方法についても解説します。insightsのチェック項目の一つに、「オフスクリーン画像の遅延読み込み」というものがあります。これは「画面外の画像を読み込まないようにしましょう」という提案です。一般的なページは縦に長く、スクロールして全ての記事を読み終えることになりますが、画面に表示されていない部分の画像まで早く読み込んでしまうと、先頭部分の画面模写まで完了できない場合があります。画面外の画像を順次読み込むようにすれば、ページの読み込みスピードを改善することが可能です。非同期読み込みのJavaScriptを使うJavaScriptを使ってスクリプトを非同期で読み込むと、画面表示を速くできます。非同期読み込みとは、プログラム実行の際に、あるタスクの実行に時間がかかっていても別のタスクも同時に実行できる処理のことです。これによって処理スピードが上がります。Lazyestload.jsJavaScriptライブラリの「Lazyestload.js」は、JavaScriptを使いこなしているカスタマイズ慣れしている人におすすめです。基本的な作業はの上に外部ファイルを記述して「.lazyestload」を遅延読み込みさせたい要素に加え、srcをdata-srcに変更するだけとなります。超軽量で高性能ですが、ブラウザが古い場合はpolyfillが必要です。polyfillは古いブラウザの機能の穴を埋めるためのコードです。スポンサードリンクスポンサードリンクjquery.lazyload.jsjQueryのプラグインである「jquery.lazyload.js」も多くの人に利用されています。jQueryとプラグインを読み込んで、コードを入力します。lazysizes.jsライブラリやプラグインを初めて使うのであれば、「lazysizes.js」が使いやすいかもしれません。APIの機能が豊富で、必要な機能に応じたプラグインを使って拡張することが可能です。scriptやcssの遅延読み込みをするときは、プラグインで拡張してください。Load」などのプラグインをインストールするといいでしょう。プログラミング知識は必要ありません。Loadを適用してくれます。スポンサードリンクファーストビューは遅延読み込みにしないページにある全ての画像を遅延読み込みにすれば、当然読み込みスピードが上がるでしょう。ページにアクセスしてすぐに表示される部分の画像は価値があると考え、通常の読み込みスピードにするべきではないでしょうか。パソコンではファーストビューになる画像も、スマホやタブレットで見たときにはスクロールして初めて表示される可能性があります。そのため、どの状況においても確実な方法というものはありません。言っても、ユーザーの多くはウェブサイトをスマホで閲覧すると言われているので、スマホでの見え方を優先して遅延読み込みにするのがベストな方法かもしれません。)トラックバックは利用できません。この記事へのコメントはありません。返信をキャンセルする。