PHP Web サイトのパフォーマンスチューニング: アクセス速度を向上させるためにリソースの負荷数を減らすにはどうすればよいですか?-PHPチュートリアル-php.cn

PHP Web サイトのパフォーマンスチューニング: アクセス速度を向上させるためにリソースの負荷数を減らすにはどうすればよいですか?

WBOY

リリース： 2023-08-06 19:34:01

オリジナル

937 人が閲覧しました

PHP Web サイトのパフォーマンスチューニング: アクセス速度を向上させるためにリソースの負荷数を減らすにはどうすればよいですか?

現代の Web デザインでは、高速で応答性の高い Web サイトがユーザーを引き付け、ユーザーエクスペリエンスを向上させる鍵となります。 PHP を使用して開発された Web サイトの場合、パフォーマンスのチューニングが特に重要です。この記事では、リソースの負荷数を減らしてアクセス速度を向上させる方法について説明し、最適化に役立ついくつかのコード例を示します。

CSS ファイルと JavaScript ファイルを結合して圧縮する

開発プロセスでは、Web サイトのさまざまな機能を実装するために複数の CSS ファイルと JavaScript ファイルを使用することがよくあります。ただし、各ファイルを読み込むには追加のリクエスト時間が必要となり、Web サイトの応答が遅くなります。ロードするファイルの数を減らすために、複数の CSS ファイルと JavaScript ファイルを 1 つのファイルに結合して圧縮できます。

これはサンプルコードです:

function merge_and_compress_assets($assets, $type) {
    $content = '';
    
    foreach ($assets as $file) {
        $content .= file_get_contents($file);
    }
    
    if ($type == 'css') {
        $content = compress_css($content);
    } elseif ($type == 'js') {
        $content = compress_js($content);
    }
    
    file_put_contents('merged.' . $type, $content);
}

function compress_css($content) {
    // 压缩CSS代码的逻辑
}

function compress_js($content) {
    // 压缩JavaScript代码的逻辑
}

$css_assets = ['style1.css', 'style2.css', 'style3.css'];
$js_assets = ['script1.js', 'script2.js'];

merge_and_compress_assets($css_assets, 'css');
merge_and_compress_assets($js_assets, 'js');

ログイン後にコピー

上の例では、ファイルパスとリソースタイプをパラメータとして含む配列を受け入れる merge_and_compress_assets 関数を定義しました。この関数は、すべてのファイルの内容を 1 つの文字列に結合し、リソースタイプに従って圧縮します。最後に、この関数はマージおよび圧縮されたコンテンツを新しいファイルに書き込みます。

CSS スプライトテクノロジの使用

CSS スプライトは、複数の小さな画像を 1 つの大きな画像に結合するテクノロジです。 CSSのbackground-positionプロパティを使用すると、大きな画像から必要な部分を指定した要素に配置できます。そうすることで、読み込まれる画像の数が減り、Web ページの読み込み速度が向上します。

以下は CSS スプライトのサンプルコードです:

<style>
    .sprite {
        background-image: url('sprites.png');
        background-repeat: no-repeat;
    }
    
    .icon1 {
        width: 32px;
        height: 32px;
        background-position: 0 -32px;
    }
    
    .icon2 {
        width: 64px;
        height: 64px;
        background-position: 0 0;
    }
</style>

<div class="sprite icon1"></div>
<div class="sprite icon2"></div>

ログイン後にコピー

上の例では、複数の小さなアイコンを含む大きな画像 sprites.png を定義します。さまざまな要素の幅、高さ、背景の位置を設定することで、大きな画像を読み込むだけで、ページ内でこれらの小さなアイコンを使用できるようになります。

遅延読み込みと遅延読み込み

当社の Web サイトには、Web ページの読み込みに必要のない大量の画像やその他のリソースが含まれている場合があります。最初のロード時間を短縮するには、遅延ロードおよび遅延ロード手法を使用できます。遅延読み込みとは、Web ページが読み込まれた後に追加のリソースを非同期で読み込むことを意味します。遅延読み込みとは、リソースをビューに表示する必要がある場合、またはユーザーが対話する必要がある場合にのみ、リソースが動的に読み込まれることを意味します。

以下は遅延読み込みと遅延読み込みのサンプルコードです:

<img src="placeholder.jpg" data-src="image.jpg" alt="Image" class="lazy">

<script>
    window.addEventListener('DOMContentLoaded', function() {
        var lazyImages = document.querySelectorAll('.lazy');
        
        lazyImages.forEach(function(img) {
            img.src = img.getAttribute('data-src');
        });
    });
</script>

ログイン後にコピー

上の例では、img タグでプレースホルダー画像を使用しましたplaceholder .jpg を作成し、実際の画像パスを data-src 属性に保存します。ページが読み込まれた後、DOMContentLoaded イベントをリッスンすることで、実際の画像パスを img タグの src 属性に設定して、遅延読み込みを実現します。遅延読み込みです。

上記の方法により、読み込まれる Web サイトのリソースの数が削減され、Web ページのアクセス速度が向上します。 CSS スプライトテクノロジ、遅延読み込み、遅延読み込みを使用して、CSS と JavaScript ファイルを結合および圧縮することで、PHP Web サイトのパフォーマンスを効果的に最適化できます。プロジェクトが異なれば、必要な最適化戦略も異なる場合があるため、最適化を行う際には、特定の状況に応じて適切な方法を選択する必要があります。

以上がPHP Web サイトのパフォーマンスチューニング: アクセス速度を向上させるためにリソースの負荷数を減らすにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。