日本語
日本語
最新のWeb開発では、複数のCSSとJavaScriptファイルが通常、さまざまなページ効果と機能を達成するために使用されます。ただし、各ファイルの読み込みは追加のネットワークリクエストを意味するため、ページの読み込みが遅れます。したがって、複数のファイルをマージしてそれらを圧縮すると、リクエストの数が大幅に削減されると、ウェブサイトの読み込み速度が向上します。
ファイルをマージして圧縮するためのPHPサンプルコードは次のとおりです。
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）;
}
<p>function compress_css（$ content）{<br>
// CSSを圧縮する特定のロジック<br>
}</p>
<p>関数compress_js（$ content）{<br>
// JavaScriptの特定のロジックを圧縮します<br>
}</p>
<p>$ css_assets = ['style1.css'、 'style2.css'、 'style3.css'];<br>
$ js_assets = ['script1.js'、 'script2.js'];</p>
<p>merge_and_compress_assets（$ css_assets、 'css'）;<br>
merge_and_compress_assets（$ js_assets、 'js'）;<br>
上記の例では、「merge_and_compress_assets」関数は複数のファイルを1つのファイルにマージし、それに応じてファイルタイプ（CSSまたはJavaScript）に従って圧縮します。最後に、マージされたコンテンツを新しいファイルに書き込みます。
CSS Spritesは、複数の小さなアイコンを大きな画像に組み合わせたテクノロジーです。 CSSの「バックグラウンドポジション」プロパティを使用すると、大きな画像のさまざまな領域を小さなアイコンとして表示できます。このようにして、ページは1つの画像をロードするだけで、複数の小さな画像のリクエストを回避し、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`は複数の小さなアイコンを含む大きな画像です。異なる「バックグラウンドポジション」値を使用すると、複数の画像ファイルをロードせずにページに異なるアイコンを表示できます。
大量の画像やリソースを備えたページの場合、怠zyなロードと怠zyなロードは、初期ページの読み込み速度を大幅に改善できます。怠zyな読み込みは、ページがロードされた後に非同期に非必須リソースをロードすることですが、レイジーロードは、ビューポートに表示されようとしている場合にのみ、リソースを動的にロードすることです。
怠zyなロードと怠zyなロードの実装の例は次のとおりです。
<script>
window.addEventListener('DOMContentLoaded', function() {
var lazyImages = document.querySelectorAll('.lazy');
lazyImages.forEach(function(img) {
img.src = img.getAttribute('data-src');
});
});
</script>
この例では、「IMG」タグのデータSRC属性には実際の画像へのパスが含まれていますが、「SRC」属性はプレースホルダーです。ページが読み込まれた後、JavaScriptはイベントリスニングを通じて「SRC」属性に実際の画像パスを割り当て、それによって怠zyなロードを達成します。
これらの最適化方法を実装することにより、PHP Webサイトのリソースロードの数を効果的に削減できるため、ページアクセス速度が向上します。 CSS Spritesテクノロジーを使用して、CSSおよびJavaScriptファイルのマージと圧縮、および怠zyなロードと怠zyなロードはすべて、ウェブサイトのパフォーマンスを改善するための効果的な手段です。最適化するときは、プロジェクトの特定のニーズに基づいて適切な最適化戦略を選択できます。
