Home

lazy-loading対応

update: 2019-05-16

markdown

初期ロード重たい問題

Squooshでファイルサイズを小さくしてることもあり、正直そこまで重たくはないんですが、Topページの記事一覧だと画像が多いので対策が必要かと。というかLithhouseさんに注意されました。 記事が増えるともっとロードに時間がかかることになるので対策しました。

対策

使用モジュール

使い方

なんとモジュールをimportして、<img>タグを<LazyLoadImage>に置き換えるだけでできました。react-markdownに組み込む場合は下記でいけます✌️

import ReactMarkdown from 'react-markdown';
import { LazyLoadImage } from 'react-lazy-load-image-component';
// 省略
<ReactMarkdown
    source={source}
    renderers={{
        image: props => <LazyLoadImage alt={props.alt} src={props.src} />
    }}
 />