web-dev-qa-db-ja.com

ウェブサイトの速度がひどい

私は、Webチームの責任者として残された(すべての同僚が去りました)見習いのWeb開発者として働いており、不可能な作業が残されています。

十分なメモリを備えた10コアのWindowsサーバーがあり、複数のJoomlaをホストします!カスタムビルドのHTMLとPHP=ウェブサイト。カスタムビルドのWebサイトには問題はなく、すべての読み込みは瞬時に行われます。ただし、Joomla!のすべてのWebサイト(すべてeコマースです) )は非常に遅く、読み込みに30秒かかります。

私はウェブサイトで複数の速度テストを実行し、私を信じています、私はあなたのほとんどが何を考えているか知っています。

「画像サイズを縮小してCSSとJavaScriptを圧縮する」

私はすでにこれをしました。 TTFB(最初のバイトまでの時間)に問題があります。これは、全体30秒を占める可能性があるためです。

次のWebサイトは、TTFBを示しています。

http://www.bytecheck.com/results?resource=http%3A%2F%2Fhealthypetstemp.co.uk.5-189-187-215.premierepos.co.uk%2Fen%2F

これはJoomlaの1つにすぎません!私たちがホストし、必要に応じてiが提供できるWebサイト。 Google Chrome DevToolsを使用して速度を確認することもできますが、同じことがわかります。

私が言ったように、問題を引き起こしているのはこれであり、この問題のいくつかの支援に大いに感謝します。

前もって感謝します。

さて、最初から始めましょう。

まず、ChromeのLighthouseテストを実行して、パフォーマンス関連の問題を検出する必要があります。 ChromeでF12キーを押してから、[Audit]タブに移動します。

デスクトップで監査を実行しましたが、スロットルはありませんでしたが、パフォーマンスはひどいものでした。

したがって、まず、JoomlaJCH Optimizeプラグインを無効にして、読み込まれているすべてのアセットを確認できるようにします。

1-一般:

ロードしているアセットが多すぎるようで、Nodeリストは1.5k未満であるはずなのに、4.5kを超えています。ページ構造を変更し、必要に応じて特定の要素を他のページに移動することを検討してください。 be。ホームページに重要なコンテンツのみを表示します。

多くのアセットについては、1つの例として、7つのフォントをロードしています。これはまったく正当化されません。アイコン用にFontAwesomeをロードする場合は、それで十分ですが、コンテンツのスタイルを設定するために他の6つのフォントは必要ありません。これは貧弱な設計です。ブランドに1つのフォントを選択し、それを使い続け、残りを削除します。

2-HTTP/2.0:

LetsEncrypt から無料のSSL証明書を取得し、サーバーにインストールして、HTTP/2.0を有効にします。この更新により、アセットのフェッチ方法が変更され、アセットの読み込みにかかる時間が短縮されます。

3-LazyLoad:

2018年の優れたウェブサイトでは、最初のHTMLが重要なCSSの小さなチャンクで最初にレンダリングされるため、初期ページの読み込みがいたるところに表示されません。基本的なHTMLが読み込まれたら、CSS、JS、画像を遅延読み込みします。すべてのCSSとJSを<head>に読み込んでいます。つまり、ブラウザーはダウンロードが完了するまで待機してから、残りのHTMLのレンダリングを続行します。

プラグインに依存するよりもテンプレートレベルで(より高速に)これを行うことを好みますが、それに対して私はUI開発者なので、自分のテンプレートを開発します。

独自のテンプレートを作成することを検討してください。

私がJoomla CMSで個人的に作業したことがある誰かが、独自のテンプレートを作成する方法についていくつかの素晴らしいチュートリアルを持っています:

https://www.youtube.com/channel/UCSinMbPPdEPx6Hw5QcueITg/featured

4-SVG:

サイトには、PNGではなくSVGの画像がいくつかあります。 200x200ピクセルの画像を読み込んでいて、94x94でレンダリングされています。 SVGの使用を開始します。これは、ほとんどの場合サイズが小さくなり、ページがズームインされたり、Retinaデバイスで見られたりしても、鮮明さが失われません。

5-画像:

画像が大きすぎるため、画像の大きさを超えています。各スライダー画像は250kbから500kbの間です。さらに、画像は遅延読み込みされません。写真など、SVGとして最適に動作しない画像には、Googleが開発した形式であるWEBPを使用してください。ただし、それをサポートしていないブラウザーのフォールバックが必要になります。

5-キャッシュ:

PHP=アセットをキャッシュするために使用しないでください!サーバーレベル(Apache、NGinxなど)で実行してください。これに関するチュートリアルをご覧になるか、ホスティングプロバイダー/サーバーに相談してください。 amdinistrator。

これにより、製品の改善に役立つ洞察が得られることを願っています。

3
Lodder

これらの基本チェックをすでに実行しましたか?

1-Joomlaキャッシュを有効にする

これにより、ページの読み込み時間が大幅に増加します

プラグインに移動し、Page Cache pluginを開きます。通常は、すでに次のように構成されています。

enter image description here

保存して閉じます

2-キャッシュを構成するTTLと動作

システムに移動-グローバル構成-システム(-tab)

enter image description here

  • キャッシングを「ONプログレッシブ」にする
  • これに基づいてキャッシュ時間を設定します(測定値から)
    • 1日あたりの訪問数が200以上の高負荷ページの場合は30以下
    • 1日あたり100回以上のアクセスがある中程度の読み込みページの場合は60
    • 1日あたりのアクセス数が50以上の低負荷ページの場合は120
    • 1日あたりの訪問数が20以上の非常に負荷の低いページの場合は240

この値は、複数ページを測定して約1年経過したときに蓄積されたものです。 1日に200回を超える訪問がある場合、キャッシュ時間からすでに何をしているのかを知っているはずです。ただし、経験則として、コンテンツを定期的に更新する場合(たとえば、15分間隔で更新するとします)、キャッシュ時間はもちろんニーズ(15分以下)に一致する必要があります。コンテンツの古くなった配信に耐えられる場合は、当然、キャッシュ時間を長く保つことができます。

欠点しかし、このキャッシュが500エラーを生成する可能性があるjoomla/plugin/extensionの更新を忘れないでください。この場合、メニュー-システム-キャッシュのクリア(すべて削除)でキャッシュを削除するだけですが、ここではそれを明確に確認する必要があります。監視して確認する必要があることを意味します!

3-ミニファイアと事前キャッシュプラグインを追加する

そこには複数のプラグインがあります。また、プラグインがどれだけ気に入ったかにもよります。すべて同じです:

  • cSS、JS、HTMLを縮小
  • 複数のCSSファイルを1つまたはいくつかに連結する
  • 複数のJSファイルを1つまたはいくつかに連結する
  • 複数のHTMLファイルを1つまたはいくつかに連結する

時には、画像変換やスプライトへの画像連結の改善に役立つこともあります。しかし、これはページのパフォーマンスをそれほど向上させません。ここでは、「ケーキの桜」のレベルをやっています

2
laendle

通常、これは設計が不十分なコードの一部、不適切なプラグイン、コード内のいくつかのミスまたは不適切なアプローチ、最適化されていないmysqlクエリによって引き起こされます。

場合によっては、サーバー構成との組み合わせになることもあります。

デバッグして、いくつかのテストや実験を行う必要があります。プラグインの無効化、テンプレートの変更など.

場合によっては、jchのような最適化プラグインがうまく機能せず、ウェブサイトが遅くなることがあります。

また、Joomlaと拡張機能の最新バージョンを使用し、開発者に問題を報告してください。

1
FFrewin