Q.ページの読み込みが遅いままなんだけど
Twitter Lazyloadではページの読み込みを高速化させることはできません。
埋め込みツイートを100個ほど用意した場合、埋め込みタグをWordPressが変換するのに30～40秒ほど、Twitterウィジェットを読み込むのに30～40秒ほどかかるのでページ全体が表示されるまでに1分以上の時間が必要となります。
今回のコードで高速化できるのは後者の部分です。ページを閲覧している間にウィジェットを読み込むことでサイト表示までの体感速度を向上させています。Twitter Lazyload未導入の場合と比べ、ページを表示してスクロール可能になるまで半分ほどの時間で済みます。
Q.ページの読み込みを高速化させたい
ページそのものの読み込みを高速化するにはプリロード（事前読み込み）機能のあるプラグインを利用するのがよいでしょう。WordPressのPHPスクリプトで処理されるのを待つことなく、閲覧者に生成済みのHTMLファイルを渡すことができます。
利用できるプラグインとしては「WP Super Cache」や「WP-Optimize」があります。
【WP Super Cache】
【WP-Optimize – Cache, Clean, Compress.】
こちらで事前にキャッシュが生成されていれば、サーバー環境にもよりますが、1秒以内で表示できるかと思います。プリロードのキャッシュが切れた場合には未導入の場合と同じようにページ表示まで30～40秒かかるので注意が必要です。
デモページでは「WP-Optimize」を用いてキャッシュを生成しています。
これらの方法のデメリットとしては「ページ内のコメント欄の設置が難しくなる」点です。
静的キャッシュを生成することで表示を高速化していますので、閲覧者によるコメントなど動的な要素がある場合でも、次のキャッシュが生成されるまでは反映されなくなります。コメントが重要な要素である場合には、1ページ内の埋め込みツイート数を減らすなど対策してプリロード機能を使わない運用をするのがよいでしょう。
Q.ウィジェットの読み込みが遅い
これはTwitterの仕様ですので改善することはできません。しかし、今回のコードを作成していた際にはHTTP/1.1で通信されていたものが、HTTP/2へと変更になっていますので以前より読み込みは早くなっているかと思います。
根本的問題は複数のウィジェットを適用させる際のCPU負荷がとても高いことでしょうか。 また、ページ内に多量のツイートが存在するとメモリの消費量が増え、動作がもっさりする問題もありますね。
こればかりはTwitter社さんが対応してくれない限りは変わることはないと思います。
Q.Twitter規約違反にはなりませんか？
埋め込みツイートはTwitterのサービス利用規約には違反しません。詳しくはTwitterサービス利用規約「ユーザーの権利およびコンテンツに対する権利の許諾」をご確認ください。
ユーザーは、本サービス上にまたは本サービスを介してコンテンツを送信、投稿または表示することによって、当社が、既知のものか今後開発されるものかを問わず、あらゆる媒体または配信方法を使ってかかるコンテンツを使用、コピー、複製、処理、改変、修正、公表、送信、表示および配信するための、世界的かつ非独占的ライセンス（サブライセンスを許諾する権利と共に）を当社に対し無償で許諾することになります（明確化のために、これらの権利は、たとえば、キュレーション、変形、翻訳を含むものとします）。このライセンスによって、ユーザーは、当社や他の利用者に対し、ご自身のツイートを世界中で閲覧可能とすることを承認することになります。ユーザーは、このライセンスには、Twitterが、コンテンツ利用に関する当社の条件に従うことを前提に、本サービスを提供、宣伝および向上させるための権利ならびに本サービスに対しまたは本サービスを介して送信されたコンテンツを他の媒体やサービスで配給、放送、配信、リツイート、プロモーションまたは公表することを目的として、その他の企業、組織または個人に提供する権利が含まれていることに同意するものとします。ユーザーが本サービスを介して送信、投稿、送信またはそれ以外で閲覧可能としたコンテンツに関して、Twitter、またはその他の企業、組織もしくは個人は、ユーザーに報酬を支払うことなく（ユーザーは、ユーザーによる本サービスの利用がコンテンツおよびコンテンツに関する権利の許諾に対する十分な対価であることに同意するものとします）、当該コンテンツを上記のように追加的に使用します。
Twitter サービス利用規約
内容を簡単にまとめますと
- ツイートした内容はTwitter社が無償で利用でき、世界中で閲覧されることになります
- Twitterの機能によってその他の企業や組織・個人に提供することがあります
といったところでしょうか。
埋め込みツイートに関しては、Twitter社が提供している機能ですのでサイト上に掲載しても問題ありません。著作権の問題についてもTwitterのサービス利用規約内に記載があるように、ツイートの発信者が無償での許諾していますので著作権侵害による損害賠償請求の対象とはなりません。
ただし、埋め込み機能を利用しない場合には通常の引用と同じ方法を取る必要がありますので注意が必要です。また内容の改変を行うこともできません。画像や動画などのメディアを再掲載する行為も違反となります。
Q.デモサイトのツイートが古いのですが…
今回のコードを作成していたのが2021年の8月頃になります。ツイートでまとめ記事を作れる程度の性能があれば大丈夫だろうと考えて試行錯誤していました。元々、デモサイトではなく検証用に作ったものですので更新などはしていません。
内容としては前半にはいいね数が多く話題になったものを、後半にはいいね数が多かったイラストを配置しています。
後半に行くにつれて動作が重くなるのがお分かりになるでしょうか。この点を改善できればまとめサイトとしても利用できるかもしれません。
本格的にツイートをまとめたい場合はTwitter APIで取得したものを、CSSでデザインし直して乗せるのが良いかと思います。現状はTwitterウィジェットでは難しいです。
Q.ツイートを埋め込むのが大変なのですが…
WordPressであれば記事の投稿画面でツイートのURLを入れると埋め込みツイートに変換してくれます。
また、Twitterのサイトでツイートを右上をクリックして「ツイートを埋め込む」を選択すれば、埋め込みタグを表示してくれます。
ただ大量にツイートを取得したい場合にはどちらも不向きと言えるでしょう。Chromeの拡張機能などを使って一発でリンク先のURLを取得するなどの方法が効率が良いです。
その場合は、ツイートまとめで有名なTogetterさんの「Togetter Clip!」がオススメです。
Twitterで各ツイートの右上にボタンを表示し、そこをクリックするとURLをコピーしてくれる代物です。
コピーして貼り付けを繰り返すことなく、URLをまとめて保存してくれるので、ツイートを巡回して必要なツイートの右上をクリック、たまったらURLを取り出すことで一気に100以上のツイートを取得することも可能です。
ただし、記事の投稿画面に貼り付けたとき一気にメモリ使用量が増えたり、ウィジェットを適用するまでに時間がかかったりするので、10個くらいから様子を見て、徐々に増やしていくとよいでしょう。
参考までに、ツイートを100個ほど貼り付けるとRAM使用量が10GB近くなることもあるのでご注意ください。
Q.今までコードを公開してこなかったのは？
年末の大掃除でサーバーの中身を整理している際に見つけたからです。作ったこと自体忘れていましたし、誰かプロみたいな人がもっといいものを作ってくれると思っていましたが、今現在でも世の中には出てきていないようですので、思い出したタイミングで公開しました。
Q.TwitterウィジェットをLazyloadできるWordPressのプラグインはない？
今回のコードを作る前にネットを駆け回って探してみましたが、WordPress系のプラグインでは見つけられませんでした。Githubなども探してみましたが実際にLazyloadできるものは見つかっていません。
それっぽいものはいくつかありましたが、クラス名の書き換えが必要となりますので、それならば最初から今回の方式を採った方がよいのではと思い、自作しました。
誰かがプラグインにしてくれたら導入のハードルがもっと下がるかもしれません。
