ブログえ!まだ画像遅延読み込みしてないの!?と言われないためにlazysizesを使ってみたタイトルとURLをコピーFacebookTwitterはてなポケットLINE最近妻の写真しか撮ってない疑惑があります。画像遅延読み込みってなんぞみなさん画像遅延読み込みしていますか?ウェブページを表示する際に、「画面外の画像が読み込み終わるまで待ってるなんてナンセンスだぜ!」って考えの元、スクロールに合わせて後から読み込もうぜって技術です。Lighthouse(ウェブページの品質改善の指針をチェックしてくれるGoogleが出しているツール)での採点項目にもなっていますね。imagesってやつです。imagesのスクショ。76以降では画像にloading=”lazy”を追加するだけで遅延が実行されるってのもあります。他ブラウザでは非対応ですけど。遅延読み込みはlazysizesで行うことにそんな中僕が選んだのはlazysizesでした。理由はなにより背景画像の遅延読み込みに対応しているからです。このブログの記事一覧のサムネイルは全部背景画像で出しています。html的にどうなんだろうとも思いますが扱いやすいので。背景画像に対応していないとダメなんですよ。他にもlazysizesの利点はあるんですが、詳しい使い方もあわせて下記の記事を参考にすればいいと思います。背景画像も遅延読み込み可能。WEMO画像の遅延読み込みをしたいとき、何を使用しますか?私は「lazysizes」を発見してからというもの、ずっとこいつにお世話になっています。個人的に、画像をimgタグではなくbackgroundに指定するのが好きなのですが、lazysizesだと背景画像も簡単に遅延読み込み可能ということで愛用するようになりました。jQueryなどのフレームワークに依存せずに動作でき、軽量なうえにiframeやウィジェットなどのスクリプトなども遅延読み込みさせることができるという優れもの。公式デモサイトはこちら作者はあのhtml5shivを使った人らしい。これは信頼できますね。Alexanderwemo.tech実際に使ってみるとそんなわけで上記記事にあるようにlazysizes.min.jsとls.unveilhooks.min.jsを読み込んで、テンプレートの背景画像が当たるタグのclassにlazyloadを追加して、data-bgに画像パスを記述してみました。トップをLighthouseでチェックしてみると。セービングできるポテンシャルがあるとのことです。出力タグの編集方法は調べなきゃよくわからないですね。プラグインフォルダ内をいじると更新したときに消えそうですし、出力されたものをテンプレート内で置換するとか。?ちなみにトップで言われた485KBも人気記事一覧の画像です。記事内で追加している画像こちらは一般的なimgタグですね。編集画面にドラッグアンドドロップで追加した際にできるタグって、どこからいじれるんですかね。functions.phpになんか書けばいいんですかね。リンクカードで挿入しているサムネこれは下の記事にあるように自分でアレンジしたブックマークレットでタグを作っているので思いついたときにやってみます。ディグログ妻が打首獄門同好会にハマって助手席で叫んでます。...ディグログこの辺ですかね。今年も花園神社の酉の市に行ってきたスポンサーリンクアバウト「毎日、日記に書ける人生を」と思って生きていたので、せっかくなのでブログに書こうと思いました。タイトルロゴは妻が書きました。味ある字を書きやがる。その2久々にブログをいじった話と朝見つけた置き手紙と晩ごはん埼玉県白岡市にあるアメリカ。