WordPressでTwitterウィジェットの遅延読み込みがしたい

WordPress
スポンサーリンク

Twitterウィジェットを遅延読み込みする「Twitter Lazyload」はこちら ↓

WordPressにTwitterウィジェットのLazyloadを実装する
「WordPressなら世界中の誰かがやっている、プラグインで対応できる」と考えていましたが存在しませんでしたので自作することにしました。作成に至るまでの経緯はこちら ↓諸注意後述するコードは初心者が作成...

この記事ではTwitter Lazyloadを作成するに至った経緯から、コードを試行錯誤した内容までをテキトーに書いています。ネットに成功が転がっていない絶望が知りたい方はお読みください。

WordPressでTwitterウィジェットの遅延読み込みがしたい

元々、WordPressにツイートを載せることをしていなかったので全く興味はありませんでした。たまに他のサイトを見ながらTwitterウィジェットの読み込みに時間がかかって表示が遅くなるのが気になる程度でした。

そんなときGIGAZINEさんのヘッドラインニュースを見たわけです。

GIGAZINE(ギガジン)
日々のあらゆるシーンで役立つ情報を提供するIT系ニュースサイト。毎日更新中。

「あれ?遅延読み込みされてる?」

他のサイトでは見かけないTwitterウィジェットの遅延読み込みを見て驚いたんですよね。でもGIGAZINEさんが使ってるCMSはWordPressとは違っていて…

「まあでもWordPressならプラグインとかあるでしょ」

と思って安易に手を付けてしまったのが地獄の始まりでした。

プラグインを探したけどない

WordPressは全ウェブサイトの43%、CMSの65%という圧倒的なシェアを誇っています。

WordPressの市場シェア (2011-2018)
WordPressがウェブサイトを構築する最も人気な方法の1つであることは秘密ではありません。他のプラットフォームと比較して、現在のWordPressの市場シェアと成長をご確認ください。

だから「プラグインも探せば何でもあるはず」と思って、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に直結するページの表示速度対策であって、画像などと同様にスクロールに合わせてツイートを表示させる方法を載せているサイトではありませんでした。

そんな中で検索で偶然出会ったのがこのサイト。

【to-me-mo-rrow- 未来の自分に残すメモ – 『Twitter の埋め込みツイート(Embed tweet)を Lazy load』】

Twitter の埋め込みツイート(Embed tweet)を Lazy load
はじめにTwitter の埋め込みツイート(Embed tweet)を Lazy load させる方法 TL;DR ApoorvSaxena/lozad.js を CDN などから読み込み カスタムハンドラ内で埋め込みツイート作成に必要な要素(blockquote, script)を 作成/追加 いきなりイベントが大量...

lozad.jsを用いてTwitterウィジェットをLazyloadさせるというもので、完成したコードも公開されていましたが、実際にTwitterウィジェットを遅延読み込みさせることに成功していました。

Just a moment...

ここで使われている lozad.js は用いることで Intersection Observer を使えるようになるという代物です。

このサイトに記載されているのは lozad.js を用いた方法ですが、コードにはTwitterウィジェットが反応するための条件となるHTML要素が記載されています。これが重要。

  1. blockquate
  2. class=’twitter-tweet’
  3. p lang=”ja” dir=”ltr”
  4. a href=”https://twitter.com/i/status/xxxxxxxxxxxxxxxxxxx”

今回作成したコードではクラス名の変更で対応していますが、lozad.jsを用いた方法では class=’lozad’ と a href=Tweet ID を持ったdiv要素に後から付与する方式を採っていました。今回コード作成するきっかけとなったGIGAZINEさんのヘッドラインニュースもこれに似た方式のようですね。

Intersection Observerを学ぶ

そんなこんなあったわけですが、WordPressにJavaScriptファイルを読み込ませることができなかったので自分で書くことにしました。

JavaScript自体は何となく知っていたのであとはIntersection Observerを学べばいいと。

今思えば読み込ませるために試行錯誤した方が早かったかもしれません。

そのときに参考にしたのがこのサイト。

【ICS MEDIA -『JSでのスクロール連動エフェクトにはIntersection Observerが便利』】

JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA
ウェブのリッチな表現としてスクロールに応じたエフェクトがあります。これまでJavaScriptのscrollイベントで実装していましたが、IntersectionObserver APIを使うとより効率的に実装できます。ブラウザーのサポートも拡充し、今後は標準となる技術でしょう。

Intersection Observerの基礎的な部分からloadOptionについての解説まで分かりやすく書いてありました。

ただ、ここを参考に書いただけでは動かず、試行錯誤して動くまで2週間かかったのはいい思い出。

ターゲットごとの監視ができていなかったのに気付いたのはこのサイトのおかげ。

【夢みるゴリラ -『【JavaScript】スクロールアニメーションをIntersection Observerを使って実装する方法』】

【JavaScript】スクロールアニメーションをIntersection Observerを使って実装する方法
今回はIntersection Observerを使ったスクロールアニメーションを実装する方法を紹介します。まずはデモサイトを作成したので確認してみてください。デモサイト前提条件は以下jQueryは使わないIE11に対応する要素ごとに複数の

Twitterウィジェットを学ぶ

さてIntersection Observerが形になってきたところで問題となったのがウィジェットが適用されない問題。

この頃にはPHPによるクラスの書き換えからJavaScriptによるクラスの付与までは完成しており、実際にスクロールさせるとクラス名が追加されていることも開発者ツールで確認済みでした。

お世話になったサイトはこちら

PHP:【Fantastech!! -『WordPressで文字やコードを置換(書き換え)する方法』】

WordPressで文字やコードを置換(書き換え)する方法 | Fantastech(ファンタステック)
前回は、文字列を置換するPHPの関数「str_replace」と「preg_replace」の基本的な使い方について解説しました。 今回は「実践編」ということで、WordPressでどのように活用するのか、記事本文の置換を例に解説してみます。 記事本文の文字列を置換する手順 WordPressの記事本文を置換するに....

JavaScript:【WEMO.tech -『【脱jQuery!】ネイティブなJavaScript(Vanilla JS)への書き換え方まとめ』】

【脱jQuery!】ネイティブなJavaScript(Vanilla JS)への書き換え方まとめ | WEMO
最近では脱jQueryの流れがきている、という情報を目にしてさっそく脱jQueryしてみることに。...と思ったのですが、いざやってみるとかなり苦労しました。 なので、今回はその備忘録としてjQueryからネイティブJS(Vanilla J

しかし、なぜか埋め込みツイートの形にならない。blockquoteで引用された形で表示されたまま。

そこから1週間くらいは無理矢理<script async src=”https://platform.twitter.com/widgets.js”>を読み込ませる方法を探していました。

そんなときに出会ったのがこちらのサイト。

【Zenn -『JSでツイートを埋め込むときのベストプラクティス』】

JSでツイートを埋め込むときのベストプラクティス

ものすごくざっくりとまとめると、
・scriptはまだページに存在しないときにだけ非同期に読み込まれるよ(すでに存在する場合は読み込まれない)
・scriptが読み込みが完了するまで埋め込みを行うfunctionの実行を待機するよ
・サイトが複数の埋め込みをおこなっている場合は、一度に設定を完了することができて、サイトの高速化につながるよ

Zenn 『JSでツイートを埋め込むときのベストプラクティス』

とのことでした。無理に読み込ませたところでもう既に読み込んでいるので反応しないと。

このスニペットを読み込むだけではツイートの埋め込み自体は行われず、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で埋め込みツイートを多用される方がいましたら是非使っていただけますと幸いです。

デモサイトはこちら

Heddara
話題のツイートまとめ@Twitterヘッドライン
タイトルとURLをコピーしました