新着記事

カテゴリー

ページ高速化プラグイン「lazy load」の罠【備忘録】

ページ高速化プラグイン「lazy load」の罠【備忘録】

本日のおすすめ記事

【75点】「限定ジャンケン」に特化した中国版「カイジ(実写映画)」が最高だった(評価と感想)

「限定ジャンケン」を原作通りのルールでしっかりと実写化した、中国製実写版「カイジ 動物世界」を鑑賞しました。 いつも通りネタバレ無し情報を...

この記事はたぶん 1 分で読めます。
ぱっかん
執筆者:散歩ブロガー「ぱっかん(@pakkan316)」福岡散歩ブログも絶賛更新中!

画像を遅延読み込みする「lazy load」というプラグインがあります。

これを使う事で、「まだディスプレイに表示されてないスクロール領域外の画像」は一旦読み込まれなくなる為、ページ表示初期段階での読み込み完了が速くなります

最近「PageSpeed Insights」でのスコア判定が厳しくなったこともあり、改めて「lazy load」を導入してみました。(以前導入を断念した理由を忘れていた)

しかしやっぱりダメで、というのも「目次」機能とバッティングしちゃうんです。
いわゆる「ページ内リンク」ですね。

ページ内リンクは、「idが振られたコンテンツまでスクロールする」という仕組み。
「lazy load」を導入すると、画像のほとんどが表示されていない状態なので、「画像分の高さ」が加算されず、その結果ページ内リンクのスクロール距離が足りなかったりします。

実際に僕のブログでは、そんな感じで「目次からの見出しジャンプ」が上手く機能しなくなりました

僕と同じように「Google Speed Testですこぶる低評価だったからとりあえずブログを高速化をしたい」と思って「lazy load」に辿り着く人も多いと思いますが、とりあえず「目次機能」を使ってる人は挙動チェックを定期的にした方が良いと思われます。

ワードプレスで「lazy load」を導入したい方は、こちらが参考になります。
高速化プラグイン『Lazy Load』の使い方&初期設定は? | ひつじアフィリエイト



本日のおすすめ記事

【75点】「限定ジャンケン」に特化した中国版「カイジ(実写映画)」が最高だった(評価と感想)

「限定ジャンケン」を原作通りのルールでしっかりと実写化した、中国製実写版「カイジ 動物世界」を鑑賞しました。 いつも通りネタバレ無し情報を...

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この記事をこねた人

名前:ぱっかん(@pakkan316
web系の会社で働きつつ、副業(趣味)でメディア運営をやっています。

運営してるメディア
ぱっかんブログ(当サイト)
やるゲーブログ
福岡散歩ブログ

「内省」という資質に優れており、それを活かした映画系の記事が得意。
→「当ブログ」と「ぱっかん」について

【職業】web諸々
【趣味】考えをまとめる・散歩・映画
【好きなファッション】ウォーキングデッドに出てきそうな奴
【好きな食べ物】ネオソフト・きなこご飯
【ストレングスファインダーの結果】着想/最上志向/内省/共感性/運命思考

youtubeで、ゲーム実況とか、福岡散歩レポートの紹介とかやってます。
Youtubeチャンネル(外部)

あまり精力的では無いですが、「Trash Area」という名前で音楽活動をしています。
エモいバンドサウンドが好きで、そういう曲をたまに作ってます。

▲ overflow(Youtubeにジャンプ)