サイトの速度と非同期Javascript

非同期

私は多くの開発を行っていますが、自分を真の開発者として分類していません。 ページ上のものをプログラムして移動し、それを機能させることができます。 真の開発者は、コードを拡張して、多くのリソースを消費せず、すばやくロードし、後で簡単に変更して、引き続き機能するようにコードを開発する方法を理解しています。

マーケターが置かれる難しい点は、両方を持っていることです 非常に高速なWebサイト それでも、サイトの読み込み速度に依存する可能性のある統合とソーシャル要素を組み込んでいます。 そのような例のXNUMXつは ソーシャルボタン。 マーテックでは、サイトのすべてのページにソーシャルボタンがあります。 つまり…Facebookリソースの読み込みがXNUMX日遅くなると、サイトの速度が低下します。 次に、Twitter、Pinterest、Bufferなどを追加すると、サイトが高速に読み込まれる可能性がほとんどなくなります。

これは同期ローディングとして知られています。 XNUMXつの要素の読み込みを完了する必要があります 次の要素をロードします。 アイテムを非同期でロードできる場合は、相互に依存せずにアイテムをロードできます。 要素を非同期にロードすることで、サイトの速度を大幅に向上させることができます。 問題は、これらの企業が提供するすぐに使用できるスクリプトが、非同期で実行するように最適化されることはほとんどないということです。
非同期

Pingdomでテストを実行すると、ページ速度に何が影響しているかを確認できます。
pingdomページの読み込み

非同期Javascript 要素にロードするように指示するコードを記述できます After ページが完全に読み込まれます。 依存関係はありません! したがって、ページが読み込まれ、完了すると、他の要素(この場合はソーシャルボタン)を読み込むスクリプトが開始されます。 あなたが開発者なら、あなたは素晴らしい記事を読むことができます、 遅延読み込み非同期Javascript.

EmilStenströmから適切に行う方法の抜粋を次に示します。

(function(){function async_load(){var s = document.createElement( 'script'); s.type = 'text / javascript'; s.async = true; s.src = 'http://buttondomain.com /script.js '; var x = document.getElementsByTagName(' script ')[0]; x.parentNode.insertBefore(s、x);} if(window.attachEvent)window.attachEvent(' onload '、async_load); else window.addEventListener( 'load'、async_load、false);})();

その結果、これらのサードパーティの統合がダウンしたり、実行速度が低下したりしても、コアページのコンテンツが表示されることはありません。 私たちのページのソースを見ると、この手法を利用して追加のソーシャルスクリプトをすべてロードしていることがわかります。 プロセス 私たちのサイトのスピード秒を改善しました –そしてロード中に窒息しません。 すべての外部依存関係をに変換していません 非同期Javascript、しかし私たちはします。

どう思いますか?

このサイトはAkismetを使用して迷惑メールを減らします。 コメントの処理方法を学ぶ.