Reactで画面スクロールを待つ遅延読み込み(Lazy Loading)

このブログの改修をちょくちょく進めています。

爆速なはずのGatsby製なのですが、
現在このブログのPageSpeed Insightsはボロボロです。何でってTwitterやGoogle Analyticsやらの外部スクリプト読み込みが一番の原因なのです。このあたり、SEOの経験値がないのが露呈してしまっています。

とくにモバイル向けがひどいので、まずTwitterのタイムラインをスクロールされて描画領域に入ってから読み込むようにしました。

今回やりたいのは画面スクロール

単に"react lazy loading"等で検索をかけると、
Reactの機能であるReact.lazy / React.suspense を用いたLazy Loadingの記事がたくさん出てきます （リンクはReact公式の例）。
これはReactのファイルバンドルにおけるファイル分割/遅延読み込みの話。
（アプリのビルド時にコンポーネントがビルドされるのを避けて、利用頻度の低いコンポーネントなどがレンダリング対象になった場合に後から読み込めるようにする）

今回やりたかったのは画面スクロールを待って、当該コンポーネントが画面に入ったときに読み込むようにする動作です。
自分は検索力が低くて適切な解決策にたどり着くのに時間がかかってしまいました。

react-lazy-load-image-component

今回はReact用のライブラリreact-lazy-load-image-componentを使います。
名前だけみて画像読み込みにしか使えなさそうだと思っていたら任意のコンポーネントに使えることに後から気づきました。

yarn add react-lazy-load-image-component

Twitterタイムライン読み込み用のコンポーネントをtwitter-timeline.tsx等として配置している想定です。

import { LazyLoadComponent } from 'react-lazy-load-image-component';
import TwitterTimeline from './twitter-timeline';

const HogehogeComponent = () => {
    return (
            <LazyLoadComponent>
                <TwitterTimeline>
                </TwitterTimeline>
            </LazyLoadComponent>
    )
}

これだけで当該コンポーネントに表示がさしかかってから読み込むLazy Loadingが出来ます。