Twitterウィジェットを遅延読み込みする「Twitter Lazyload」はこちら ↓
この記事ではTwitter Lazyloadを作成するに至った経緯から、コードを試行錯誤した内容までをテキトーに書いています。ネットに成功が転がっていない絶望が知りたい方はお読みください。
WordPressでTwitterウィジェットの遅延読み込みがしたい
元々、WordPressにツイートを載せることをしていなかったので全く興味はありませんでした。たまに他のサイトを見ながらTwitterウィジェットの読み込みに時間がかかって表示が遅くなるのが気になる程度でした。
そんなときGIGAZINEさんのヘッドラインニュースを見たわけです。
「あれ？遅延読み込みされてる？」
他のサイトでは見かけないTwitterウィジェットの遅延読み込みを見て驚いたんですよね。でもGIGAZINEさんが使ってるCMSはWordPressとは違っていて…
「まあでもWordPressならプラグインとかあるでしょ」
と思って安易に手を付けてしまったのが地獄の始まりでした。
プラグインを探したけどない
WordPressは全ウェブサイトの43%、CMSの65%という圧倒的なシェアを誇っています。
だから「プラグインも探せば何でもあるはず」と思って、Twitterウィジェットを遅延読み込みできるプラグインを探してみました。
そしたらそれがまさかないとは。
いや「YouTubeもInstagramもTwitterも何でも遅延ロードできます！」みたいなプラグインはあるんですが、実際に導入してみても効果がないというか、何のために入れてるんだって感じのばかりで。
「じゃあGoogle検索でもすれば答えが見つかるんじゃないか」と旅立ったわけです。
ネットにも答えがない
先に言っておくと「Twitter 遅延読み込み」とか「Twitter Lazyload」みたいな単語で調べても出てきません。
遅延読み込みを謳っているサイトはいくつも表示されますが、実際にはできないものが多いです。
例1.＜iframe loading=”lazy”＞
Twitterウィジェットはそことは別のHTML要素に反応するのでiframeタグにlazy属性を付属させても意味がありません。
例2.『Twitterの埋め込みコードからscriptタグを削除』
スクリプトを削除すれば読み込まれなくなりますが、WordPress内にシェアボタンなど別のスクリプトが存在する場合は無力。遅延させた場合でも埋め込みツイート数と発火タイミングによっては爆弾になりかねません。
ページの表示速度に影響があるという記事も多いのですが、一度読み込まれた場合は全てスキップされるのでツイートの数だけスクリプトが読み込まれるというのは半分嘘。読み込まれますが処理はされません。
例3. 『platform.twitter.com/widgets.js、scriptタグの遅延読み込み』
埋め込みツイートによってページの表示速度が遅くなる場合の対処法です。埋め込みツイートの数が少なければこれでも問題ないのですが、数が多くなるとこちらも例2同様に、ページ内のツイート全てにウィジェットが適用されるので20秒～40秒ほど表示できなかったり、操作できなかったりします。
例4. async/defer
JavaScriptの同期・非同期設定です。 Twitterウィジェットの初期設定がこうなっています。
<script async src="https://platform.twitter.com/widgets.js>ですがこちらのスクリプトはDOMスキャンからのウィジェット適用の二段構えとなっていますので、async/deferのどちらで読み込んでもウィジェット適用時には効果がありません。埋め込みツイートに対するDOMスキャンが他のJavaScriptに割り込むかどうか程度で影響はありません。
そもそも目的が違った
Twitterの遅延読み込みを調べてきて見えたのはSEOに直結するページの表示速度対策であって、画像などと同様にスクロールに合わせてツイートを表示させる方法を載せているサイトではありませんでした。
そんな中で検索で偶然出会ったのがこのサイト。
lozad.jsを用いてTwitterウィジェットをLazyloadさせるというもので、完成したコードも公開されていましたが、実際にTwitterウィジェットを遅延読み込みさせることに成功していました。
ここで使われている lozad.js は用いることで Intersection Observer を使えるようになるという代物です。
このサイトに記載されているのは lozad.js を用いた方法ですが、コードにはTwitterウィジェットが反応するための条件となるHTML要素が記載されています。これが重要。
- blockquate
- class=’twitter-tweet’
- p lang=”ja” dir=”ltr”
- a href=”https://twitter.com/i/status/~”
今回作成したコードではクラス名の変更で対応していますが、lozad.jsを用いた方法では class=’lozad’ と a href=Tweet ID を持ったdiv要素に後から付与する方式を採っていました。今回コード作成するきっかけとなったGIGAZINEさんのヘッドラインニュースもこれに似た方式のようですね。
Intersection Observerを学ぶ
そんなこんなあったわけですが、WordPressにJavaScriptファイルを読み込ませることができなかったので自分で書くことにしました。
JavaScript自体は何となく知っていたのであとはIntersection Observerを学べばいいと。
今思えば読み込ませるために試行錯誤した方が早かったかもしれません。
そのときに参考にしたのがこのサイト。
Intersection Observerの基礎的な部分からloadOptionについての解説まで分かりやすく書いてありました。
ただ、ここを参考に書いただけでは動かず、試行錯誤して動くまで2週間かかったのはいい思い出。
ターゲットごとの監視ができていなかったのに気付いたのはこのサイトのおかげ。
Twitterウィジェットを学ぶ
さてIntersection Observerが形になってきたところで問題となったのがウィジェットが適用されない問題。
この頃にはPHPによるクラスの書き換えからJavaScriptによるクラスの付与までは完成しており、実際にスクロールさせるとクラス名が追加されていることも開発者ツールで確認済みでした。
お世話になったサイトはこちら
しかし、なぜか埋め込みツイートの形にならない。blockquoteで引用された形で表示されたまま。
そこから1週間くらいは無理矢理＜script async src=”https://platform.twitter.com/widgets.js”＞を読み込ませる方法を探していました。
そんなときに出会ったのがこちらのサイト。
ものすごくざっくりとまとめると、
Zenn 『JSでツイートを埋め込むときのベストプラクティス』
・scriptはまだページに存在しないときにだけ非同期に読み込まれるよ（すでに存在する場合は読み込まれない）
・scriptが読み込みが完了するまで埋め込みを行うfunctionの実行を待機するよ
・サイトが複数の埋め込みをおこなっている場合は、一度に設定を完了することができて、サイトの高速化につながるよ
とのことでした。無理に読み込ませたところでもう既に読み込んでいるので反応しないと。
このスニペットを読み込むだけではツイートの埋め込み自体は行われず、twttr.widgets.load()やtwttr.widgets.createTweet()を呼び出す必要があります。ただ、widgets.jsの読み込みがいい感じに行なわれるようになるため、コンポーネントごとの実装が楽になります。
Zenn 『JSでツイートを埋め込むときのベストプラクティス』
つまり、無理矢理にでも読み込ませないといけないのは twttr.widgets.load() の方だったというわけです。
学んだものを全て実装してみる
この時点で Intersection Observer はほぼ完成していたので今まで widgets.js を読み込ませていたところを twttr.widgets.load() を読み込ませるように変更しました。これで動作させることに成功しました。
…が、現実はそう簡単にはいかないといいますか、挙動があまりよろしくありませんでした。
ウィジェットが適用されるタイミングが遅くなったり、そもそもウィジェットが適用されなかったりと、コード内のどこでどのタイミングでイベントが発生するかによって結果が大きく左右されるという結果に。
最終的には addEventListener でスクロールに合わせて初期化し直すという方法に落ち着きましたが、余裕のある方は Intersection Observer 内でちょうどいいタイミングで変化させられる場所を探ってみてください。addEventListener を用いるよりも効率的に動作させることが可能かと思います。
結局これは必要なのか
さて、長々と書いてきたわけですが、結局のところ今回作成した Twitter Lazyload は必要なのか分かりません。
PageSpeed Insights でスコアを上げるだけであれば Script を遅延読み込みさせるだけで済みますし、わざわざWordPressでTwitterを複数まとめるようなサイトを作成する人間もいないでしょう。通常のサイトに設置するにしても負荷を考えるとベストな方法かは怪しいところです。
埋め込みツイートの数が10個以下であれば、設置せずともサイト運営で支障はないのではないでしょうか。
Lazyloadで画像を遅延読み込みさせるようにTwitterウィジェットも遅延読み込みさせるという試みでしたが、完成したものと実際の需要には隔たりがあるように感じます。
しかし、GIGAZINEさんがヘッドラインニュースでTwitterウィジェットの遅延読み込みを用いているように、場合によっては使い道もあるのかもしれません。
WordPressで埋め込みツイートを多用される方がいましたら是非使っていただけますと幸いです。
デモサイトはこちら
