遅延読み込み画像を使用してWebサイトの読み込み速度を上げる

現在、多くのサイトがさまざまな形式のグラフィックでいっぱいになっています:アバター、投稿のイラスト、ギャラリーなど。

他の誰も知らないブログ「クライアント最適化」の読者は、サーバーへの追加リクエストの価格を知りません。

サーバーへの呼び出しの回数は、スコープ(最初の画面)に入らない画像のアップロード後の手法を使用して簡単に減らすことができます。 つまり、最初はユーザーが表示できる画像のみがロードされ、残りはページのスクロール時にロードされます。



私はさまざまなJavaScriptフレームワークの使用を支持しているため、最も一般的なJQuery、Prototype、およびYUIのコンポーネント/拡張機能を提供します。 他のライブラリの同様の拡張機能を知っている場合は、コメントを書き込んでください。リストに追加します。

次のコンポーネントを使用して、Webサイトの読み込みを高速化できます。

UPD: DevManmootoolsのクラスを要求しました-http : //davidwalsh.name/mootools-lazyload

リストには理由があるため、この順序で並べられています;あるプラグインの出現が別のプラグインの誕生を引き起こしました-YUI-> JQuery-> Prototype。

これは非常にシンプルなソリューションで、Webサイトに1時間以内(または10分)で埋め込むことができますが、トラフィックの大幅な節約とページ読み込み速度の向上、そして最も重要なサーバー負荷の削減を実現できます。

このテクニックがどのように機能するかは、例えばmashable.comで見ることができます

askdev.ru/blog経由

Source: https://habr.com/ru/post/J87083/


All Articles