Blogger 高速化なんだがツイッターもインスタも埋め込みたい

2023年01月04日 2023年03月11日

「Twitter」とか「Instagram」の埋め込みを多用しちゃうと遅くなっちゃうのよね。

「YouTube」に関しては、昨日書いたんですが、埋め込み自体を諦めた。

QooQ トップページ画像をなんとか表示したい - Blogger メモ帳月夜ニ君ノ音想フ♪

「Twitter」「Instagram」の埋め込みページだけで完結したい。

色々と調査した結果、埋め込みのコードからスクリプトを削除して、

遅延ロード用JavaScriptを、テンプレートに記載するというパターンが多かった。

が、ですねぇ、、ほとんどの投稿にはツイートもインスタも埋め込んでないわけで、

多分、そこへの悪影響はないんでしょうが、なんとなく躊躇してしまったんですわ。

いずれにせよ、埋め込みのコードからスクリプトを削除せねばならないのならと、

こちらを採用させて頂くことにした。。

こちらの達人に伝授戴いた。。🙏

「Twitter」の埋め込みを複数回していたら、すべての埋め込みから、

最後のこのスクリプト部分を削除する。

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
そして、各投稿の最後に、読み込むタイミングを変えたJSを記載する。(1回だけね）

（達人のページからコピー可能です。）

これ「Instagram」でも使えるようで、同様に、最後のこのスクリプト部分を削除する。

<script async src="//www.instagram.com/embed.js"></script>
そして、各投稿の最後に、読み込むタイミングを変えたJSを記載する。(1回だけね）

8行目のみ「https://www.instagram.com/embed.js」（コメントも）に変更してあります。

<script>
(function(window, document) {
function main1() {
// instagramのJS読み込み
var ad = document.createElement('script');
ad.type = 'text/javascript';
ad.async = true;
ad.src = 'https://www.instagram.com/embed.js';
var sc = document.getElementsByTagName('script')[0];
sc.parentNode.insertBefore(ad, sc);
}
// 遅延読み込み
var lazyLoad = false;
function onLazyLoad() {
if (lazyLoad === false) {
// 複数呼び出し回避 + イベント解除
lazyLoad = true;
window.removeEventListener('scroll', onLazyLoad);
window.removeEventListener('mousemove', onLazyLoad);
window.removeEventListener('mousedown', onLazyLoad);
window.removeEventListener('touchstart', onLazyLoad);
window.removeEventListener('keydown', onLazyLoad);
main1(); // instagramのJS読み込み
}
}
window.addEventListener('scroll', onLazyLoad);
window.addEventListener('mousemove', onLazyLoad);
window.addEventListener('mousedown', onLazyLoad);
window.addEventListener('touchstart', onLazyLoad);
window.addEventListener('keydown', onLazyLoad);
window.addEventListener('load', function() {
// ドキュメント途中（更新時 or ページ内リンク）
if (window.pageYOffset) {
onLazyLoad();
}
});
})(window, document);
</script>

＜iframe＞と＜img＞にひたすら「loading=”lazy”」を追記してゆく

表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説

時々「Spotify」を埋め込んでるんですけど、こちら＜iframe＞なわけですよ。

そして、画像＜img＞なんて、ほぼすべての記事に貼ってあるでしょ。

なので、ひたすら、「loading="lazy"」を追記したわけです。

但し、ファーストビュー（どのぐらいまで？）の箇所には、

記載しない方がいいという記事もある。。若干、難しい。。

そんなわけで、最初の方の画像以外に、ガンガン追加していった。

ならば、一緒にWebP形式の画像にしてやる！

こちらの達人に伝授戴いた。。🙏

幸いなことに、このWebP（ウェッピー）、米Googleの開発のためか、

「Blogger」では、「s999（サイズ）」の後ろに「-rw」を付けるだけで済む。

昔の記事の画像とか圧縮さえもしてないわけで、今更、貼り直す気力がない。

が、こちらならできるかも！っと、この際、ひたすら「-rw」を付けていったのさ。

追記

ブログ高速化の道のりは、長く険しい。。なかなか、結果がでないしね。

まるで、仕事のような作業で、やたら肩こりとかしてくるんだなぁ。

こちらで測定するんだが、なーんかばらつきがあって実際のとこよく分からない。

Webサイトの表示速度を測定・評価する分析ツール：「PageSpeed Insights」

当初、スコアが低すぎて真っ赤っかで、すっごい焦ったものよ。

今現在、ページエクスペリエンスの良好なURLは、パソコンは、100%なんですが、

モバイルの方は、94%ぐらい、これが、なかなか100%にならない。

なんか先日、ヘッダーをいじったら、また減ってしまった感じなのよ。トホホ。

しかし、最近、思うのさ、これぐらい許してくれよぉーって、動向観察中。。

そもそも、速攻、反映されるわけじゃない感じなんだよなぁ。

あまりに一喜一憂して、高速化に縛られ過ぎるのも、愉しくないっす！

Blogger