Conseils d'optimisation du site Web de PHP: Réduisez le chargement des ressources pour accélérer la réponse de la page

Fusionner et compresser CSS avec des fichiers JavaScript

Dans le développement Web moderne, plusieurs fichiers CSS et JavaScript sont généralement utilisés pour réaliser divers effets et fonctions de pages. Cependant, le chargement de chaque fichier signifie une demande réseau supplémentaire, ce qui entraîne un retard de chargement de page. Par conséquent, la fusion de plusieurs fichiers et les compresser peut réduire considérablement le nombre de demandes, améliorant ainsi la vitesse de chargement du site Web.

Voici un exemple de code PHP pour la fusion et la compression de fichiers:

  
fonction fusion_and_compress_assets ($ actifs, $ type) {  
    $ content = '';  
    foreach ($ actifs comme fichier $) {  
        $ content. = file_get_contents ($ file);  
    }  
    if ($ type == 'css') {  
        $ content = compress_css ($ contenu);  
    } elseif ($ type == 'js') {  
        $ content = compress_js ($ contenu);  
    }  
    file_put_contents ('fusiond.'. $ type, $ contenu);  
}  
<p>fonction compress_css ($ contenu) {<br>
// La logique spécifique de la compression de CSS<br>
}</p>
<p>fonction compress_js ($ contenu) {<br>
// compresser la logique spécifique de JavaScript<br>
}</p>
<p>$ css_assets = [&#39;style1.css&#39;, &#39;style2.css&#39;, &#39;style3.css&#39;];<br>
$ js_assets = [&#39;script1.js&#39;, &#39;script2.js&#39;];</p>
<p>Merge_and_compress_assets ($ css_assets, &#39;css&#39;);<br>
Merge_and_compress_assets ($ js_assets, &#39;js&#39;);<br>

Dans l'exemple ci-dessus, la fonction `Merge_and_Compress_Assets 'fusionne plusieurs fichiers dans un seul fichier et compresse en conséquence en fonction du type de fichier (CSS ou JavaScript). Enfin, écrivez le contenu fusionné dans un nouveau fichier.

Utilisation de la technologie CSS Sprites

CSS Sprites est une technologie qui combine plusieurs petites icônes dans une grande image. Grâce à la propriété de «position de fond» de CSS, vous pouvez afficher différentes zones de la grande image sous forme de petites icônes. De cette façon, la page n'a besoin que de charger une seule image, d'éviter la demande de plusieurs petites images et d'accélérer davantage la vitesse de chargement des pages Web.

Voici un exemple d'utilisation des sprites 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>  

Dans cet exemple, «sprites.png» est une grande image contenant plusieurs petites icônes. Avec différentes valeurs de «position de fond», vous pouvez afficher différentes icônes dans la page sans charger plusieurs fichiers d'image.

Chargement paresseux vs chargement paresseux

Pour les pages avec de grandes quantités d'images ou de ressources, le chargement paresseux et le chargement paresseux peuvent considérablement améliorer la vitesse du chargement initial des pages. Le chargement paresseux est de charger des ressources non essentielles de manière asynchrone après le chargement de la page, tandis que le chargement paresseux doit charger les ressources dynamiquement que lorsqu'ils sont sur le point d'apparaître dans la fenêtre.

Voici un exemple de mise en œuvre du chargement paresseux et du chargement paresseux:

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

Dans cet exemple, l'attribut Data-Src de la balise `IMG` contient le chemin d'accès à l'image réelle, tandis que l'attribut` src` est un espace réservé. Une fois la page chargée, JavaScript attribuera le chemin d'image réel à l'attribut `src` via l'écoute des événements, réalisant ainsi le chargement paresseux.

Résumer

En implémentant ces méthodes d'optimisation, le nombre de charges de ressources des sites Web PHP peut être réduite efficacement, améliorant ainsi la vitesse d'accès aux pages. La fusion et la compression des fichiers CSS et JavaScript, en utilisant la technologie CSS Sprites, ainsi que le chargement paresseux et le chargement paresseux sont tous des moyens efficaces pour améliorer les performances du site Web. Lors de l'optimisation, vous pouvez choisir la stratégie d'optimisation appropriée basée sur les besoins spécifiques du projet.