SNSのタイムラインを埋め込みつつ、Lighthouseのスコアを上げる
Lighthouseとは
GoogleがOSSとして開発している、ウェブサイト (ウェブアプリ) の品質チェックツールです。
Chromeの拡張機能としてインストールすることができ、ウェブサイトの表示速度やHTMLの構造チェック、JSのライブラリのバージョンによる脆弱性の有無などを教えてくれます。
SNSを埋め込んだ時の問題点
ウェブサイトを作ると、TwitterやInstagramのタイムラインを埋め込みたくなる時があります。
こういうやつです。(左がTwitter、右がInstagram)
Twitterの場合はこういうコードを記述するように、という指示です。
<a class="twitter-timeline" href="https://twitter.com/hinatan_net?ref_src=twsrc%5Etfw">Tweets by hinatan_net</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
中の処理としては、JavaScriptのロードが完了するとiframeが埋め込まれるようになります。
ところが、こういう処理を入れるとロードが重くなり、Lighthouseのスコアが下がります。
読み込んでいる画像ファイルが大きいだの色々文句を言われます。
対策
実際には他の場所の表示が十分早ければ体感速度には問題はないと思っています。
先ほどのLighthouseの結果のスクリーンショットでも、1コマ目からすでに正しくウェブサイトが表示されているので、訪問者がサイトのロードが遅いと感じることは無いでしょう。
ただ、他の遅い場所を調査したかったり、継続的なチェックをしたい場合にはこの原因を放置してスコアが低い状態になってしまうのは目障りです。
そこで、以下のようにJavaScritを埋め込み、タイムライン部分は別ファイルとして遅延読み込みするとOKです。
<script>
$(function(){
setTimeout(function(){
$("#timeline").load("/includes/timeline.html");
}, 5000);
});
</script>
一緒に読み込ませるとスコアに影響するから遅延して読み込ませる、というだけの雑な対処療法ですが、これによってスコアがは上がり、他の本質的なチューニングに目を向けることができます。
私の場合、使ってないCSSの箇所が多いから減らせ、とか言われていますね。
実際の動作はサイトをみてもらえるとわかると思います。
Author And Source
この問題について(SNSのタイムラインを埋め込みつつ、Lighthouseのスコアを上げる), 我々は、より多くの情報をここで見つけました https://qiita.com/chibiegg/items/98820a5bc06f96bf6aef著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .