「サイト運営」と「ワードプレス初心者」の私が、引っかかったポイントをメモがてら共有します。
絶対に正しいわけでは全くないので、参考にする際には、自己責任でお願いいたしますm(_ _)m
はい、ツイッターをたくさん埋め込んだら重い重い！重くてびっくりしました！
ネット情報を調べて対策しましょうと、調べてみたら、、なんやら難しいことばかり～😭
ツイート埋め込みページの読み込みを高速化する方法【JSを遅延読込させる】
最初に見たページは…こちら。なんやら難しい…。
↓最初にみたのはこんな感じのだった↓
//<![CDATA[
//lazy load twitter
var lazyloadtw = false;
window.addEventListener("scroll", function() {
if ((document.documentElement.scrollTop != 0 && lazyloadtw === false) || (document.body.scrollTop != 0 && lazyloadtw === false)) {
(function() {
var tw = document.createElement('script');
tw.type = 'text/javascript';
tw.async = true;
tw.src = 'https://platform.twitter.com/widgets.js';
var sc = document.getElementsByTagName('script')[0];
sc.parentNode.insertBefore(tw, sc);
})();
lazyloadtw = true;
}
}, true)
//]]>
こんな感じのタグを子テーマフォルダの中にJSフォルダを作成してその中にFTPでアップロードするとか…なんやら(このへん適当😅)。
はい、チンプンカンプンです！私には難しすぎて無理です…。
次はこれ↓ブログにツイッターを埋め込むと遅くなる【簡単プラグインで解決】
ではプラグインがいいかも？！と【Flying Scripts by WP SPEED Matters】というプラグインを入れてこちらのサイトの説明通りに設定してみた。
お、ちょっと軽くなった！
でもなんかまだまだ重い～～。
次はこれ↓Twitter埋め込みでサイトが重いと感じたらasyncに注意 | KT LIFE
こちらで紹介していた方法でうまくいった気がします。簡単です！
↓こちらは私のツイッターの埋め込みコードのサンプルです↓
<blockquote class="twitter-tweet">
<p lang="ja" dir="ltr">てすと</p>— ●●● (＠●●●●●●)
<a href="https://twitter.com/monta223388/status/1597988129763622912?ref_src=twsrc%5Etfw">
November 30, 2022</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>①最後の行の async の部分の文字を消すといいみたいです。
<script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>
ここの赤いところです。
変更前↓
<blockquote class="twitter-tweet">
<p lang="ja" dir="ltr">てすと</p>— ●●● (＠●●●●●●)
<a href="https://twitter.com/monta223388/status/1597988129763622912?ref_src=twsrc%5Etfw">
November 30, 2022</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>変更後↓
<blockquote class="twitter-tweet">
<p lang="ja" dir="ltr">てすと</p>— ●●● (＠●●●●●●)
<a href="https://twitter.com/monta223388/status/1597988129763622912?ref_src=twsrc%5Etfw">
November 30, 2022</a></blockquote>
<script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>或いは、
②最後の行の <script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>の部分を消すといいみたいです。(消していいのは二個目から！一個目はそのまま残す)
この <script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>の部分は最初のツイッターの埋め込みに一つだけあればいいそうです。
なので、最初の一つはそのままで、二つ目の埋め込みからその部分を削除すれば軽くなるみたいです。
変更前↓
<blockquote class="twitter-tweet">
<p lang="ja" dir="ltr">てすと</p>— ●●● (＠●●●●●●)
<a href="https://twitter.com/monta223388/status/1597988129763622912?ref_src=twsrc%5Etfw">
November 30, 2022</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>変更後↓
<blockquote class="twitter-tweet">
<p lang="ja" dir="ltr">てすと</p>— ●●● (＠●●●●●●)
<a href="https://twitter.com/monta223388/status/1597988129763622912?ref_src=twsrc%5Etfw">
November 30, 2022</a></blockquote>
試してみたら、早くなりました！
何も対処しない埋め込みをたくさん入れて、何度か試してみたら、それも読み込みが早くなってしまい？(謎)なんだか…効果があるのかないのか分からなくなりました。
でも最初のは何だったのかってくらい読み込みがはやくなったのでいいか！
ネット関連はわからないことばかりですなぁ…。。
これが正しい方法なのかは自信がないのですが、お役に立てたら嬉しいです。
ホントに自己責任でお願いいたしますm(_ _)m
ツイッターの埋め込みは「リンク貼り付け」「カスタムHTML」 どっちがいいのだ？
ちなみに、私はワードプレスでcocoonを使用しています。
ツイッターの埋め込みって、ワードプレスのブロックエディターからだと、リンクをコピーして段落からペッと直接貼り付けたら勝手に埋め込めちゃうんですが、ツイッターの埋め込み用のHTMLタグで「カスタムHTML」 から貼り付けるのと、どっちがいいんでしょうね？？
リンク貼り付けだと重いんでしょうか？
試してみたけど違いが分かりませんでした…。
それ以前に「カスタムHTML」の方がいいみたいです。
そもそもリンク貼り付けだと、リンク切れした時にちゃんと表示されなくなるので推奨しないという情報がありました。
「カスタムHTML」だと、引用という形で文章はちゃんと残るようでこちらの方がいいようです。
そして、この方法は「カスタムHTML」じゃないと使えませんし…。