怠惰な負荷任意のグラフとlazysizeと広告.js
3633 ワード
絵文字のトレンドチャートを追加した後emojigraph.org/chart-decreasing/ , かなりの低下に直面した📉 モバイルデバイス上のページ読み込み速度で.そして、私が広告と同じ問題.
私は既に使用lazysizes.js 怠惰な読み込みイメージのために、私は怠惰なロードチャートと広告に同じライブラリを使う方法を捜し始めました.
うまくいけば、“laveil”変換前にlazLoad要素のそれぞれに解凍されたlazybefore unveilイベントがあります.
まず、グラフライブラリDNSプリフェッチを追加する
私は、URLを符号化SVGを使用しています.
スクリプトライブラリ.src -ライブラリへのリンク、およびScriptChart.このライブラリに依存するグラフをプロットするJSへのリンク.
✅ そして、それはすべてです!
怠惰な負荷adsに-私たちは同じテクニックを使用できます:
グラフと広告怠惰な負荷を実装した後、私は戻って90 +スコアとGoogle PageSpeedモバイルのための3 s負荷時間を得た.
あなたが質問、または改善のための提案がある場合-私はコメントでお知らせください.
私は既に使用lazysizes.js 怠惰な読み込みイメージのために、私は怠惰なロードチャートと広告に同じライブラリを使う方法を捜し始めました.
うまくいけば、“laveil”変換前にlazLoad要素のそれぞれに解凍されたlazybefore unveilイベントがあります.
まず、グラフライブラリDNSプリフェッチを追加する
<head>…</head> セクションでは、ライブラリをロードする時間を無駄にしないが、一度必要な場合は少し速くロードする準備ができます.<link rel=”preconnect dns-prefetch” href="https://cdn.jsdelivr.net/npm/[email protected]/dist/apexcharts.min.js" crossorigin=”anonymous”>
lazyload あなたのチャートを含んでいるdivへのクラス.<div id="tracker_chart" class="chart lazyload" data-expand="-150" style="height: 510px;"></div>
data-expand 属性をピクセルに設定するときに怠惰なプリロード画像/iframeに開始する.それは負の値に設定することができる、私は使用するdata-expand="-150" グラフのPlaceholderの150 pxの後にのみグラフをロードするには、Viewport領域にあります.私は、URLを符号化SVGを使用しています.
<div id="chart_brush" style="
height: 510px; width: 100%;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" ...%3E ... %3C/svg%3E');
background-repeat: no-repeat;" >
</body> タグ<script type="text/javascript">
document.getElementById("tracker_chart").addEventListener("lazybeforeunveil", function() {
var scriptLibrary = document.createElement('script');
scriptLibrary.onload = function () {
var scriptChart = document.createElement('script');
scriptChart.src = '/js/chart.js';
document.body.appendChild(scriptChart);
};
scriptLibrary.src = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/apexcharts.min.js';
document.head.appendChild(scriptLibrary);
});
</script>
スクリプトライブラリ.src -ライブラリへのリンク、およびScriptChart.このライブラリに依存するグラフをプロットするJSへのリンク.
✅ そして、それはすべてです!
怠惰な負荷adsに-私たちは同じテクニックを使用できます:
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', (event) => {
if (window.innerWidth<992){
/*your functions for big screen*/
document.getElementById("widget_ad_mobile").addEventListener("lazybeforeunveil", function() {
var scriptAds = document.createElement('script');
scriptAds.onload = function () {
(adsbygoogle = window.adsbygoogle || []).push({});
};
scriptAds.src = '[https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'](https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js');
document.getElementById("widget_ad_mobile").appendChild(scriptAds);
});
}
});
</script>
グラフと広告怠惰な負荷を実装した後、私は戻って90 +スコアとGoogle PageSpeedモバイルのための3 s負荷時間を得た.
あなたが質問、または改善のための提案がある場合-私はコメントでお知らせください.
Reference
この問題について(怠惰な負荷任意のグラフとlazysizeと広告.js), 我々は、より多くの情報をここで見つけました https://dev.to/osxisl/lazy-load-any-charts-and-ads-with-lazysizes-js-4oboテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol