ページの読み込み速度を上げるには、いくつかの方法があります。
- キャッシング
- cssおよびjsファイルの圧縮
- 画像の最適化
この記事では、最後のポイントを詳細に分析し、どのような結果が得られるかを示します。
画像に遅延読み込み（遅延読み込み）を使用すると、ページの重みが軽くなるため、ページの読み込みが速くなります。
操作の原理は単純です。画像は、ユーザーの可視領域に入るとすぐに動的に読み込まれます。 たとえば、ブラウザはカテゴリから製品のすべての写真をすぐにダウンロードする必要はありません。最初の画面に表示されるいくつかの製品の画像をダウンロードして表示するだけで十分です。 ページに多くの製品が表示されている場合、これによりダウンロードが大幅に高速化されます。
遅延読み込みをvirtuemartに統合する方法は2つあります。
- テンプレートにいくつかの変更を加えて手動で
- サイト上のすべての画像の遅延ロードを完了することができるプラグインを使用する
遅延読み込みを手動で追加する
遅延読み込みをサイトに統合するために使用できるスクリプトはたくさんあります。 私はecho.jsを使用しています。 スクリプトの圧縮バージョンの重量はわずか2KBです。 作品の例はこのページで見ることができます。
カテゴリページでスクリプトを接続します。 他のページでは、遅延読み込みを使用することはあまり意味がないと思います。 すべてのサイト画像に遅延読み込みを追加する必要がある場合は、プラグインを使用することをお勧めします LLFJ-Joomlaの遅延読み込み！、これについては次のセクションで説明します。
したがって、スクリプトファイルをテンプレートフォルダにコピーします / templates / template_name / echo / .
カテゴリ内の画像出力コードを置き換えてみましょう。
virtuemart3の場合
ファイル内 /components/com_siteblayouts/products.php交換
< a title = "<？php echo $ product->（！LANG：product_name？>" !} href = " リンク。 $ ItemidStr; ？> "> echo $ product-> images[0]-> < / a > |
virtuemart2の場合
ファイル内で、
< a title = "<？php echo $ product->（！LANG：product_name？>" !} href = " リンク ; ？> "> echo $ product-> images [0]-> displayMediaThumb（ "class = "browseProductImage ""、false）; < / a > |
ファイルの最後にスクリプト呼び出しを追加します /components/com_virtuemart/views/category/tmpl/default.php（すべてのVMバージョン用）。
$ document = JFactory :: getDocument（）; $ document-> addScript（ "/templates/template_name/echo/echo.min.js") ;
|
