Guide d'optimisation des performances de WoodMart : Réduction des fichiers JS/CSS et activation du chargement différé

L'optimisation des performances est cruciale lors de la création de sites de commerce électronique WordPress, en particulier pour des sites tels que WoodMart Un thème si riche en fonctionnalités. Afin de garantir une expérience d'achat fluide à nos visiteurs, nous avons dû prendre certaines mesures d'optimisation, notamment en ce qui concerne la réduction de la taille des fichiers JS/CSS et l'activation du chargement différé.

Comment réduire les fichiers JS et CSS ?

1. Fusionner et compresser des fichiers

Pour combiner plusieurs JS ou CSS Les fichiers sont fusionnés en un seul fichier, ce qui réduit le nombre de requêtes et la charge du serveur. La plupart des fichiers JS et CSS peuvent être compressés à l'aide d'outils qui réduisent la taille du fichier et accélèrent le téléchargement. Pour le thème WoodMart, vous pouvez utiliser les méthodes suivantes pour la fusion et la compression :

Utilisation de plug-ins: Comme Autoptimiser peut-être WP Rocket Des plug-ins tels que celui qui fusionne et compresse automatiquement les fichiers JS et CSS pour améliorer les vitesses de chargement.

optimisation manuelleSi vous êtes familier avec le code, vous pouvez fusionner et compresser manuellement les fichiers à l'aide des fonctions de gestion de fichiers du thème. Par exemple, fusionnez tous vos fichiers CSS personnalisés dans un seul fichier et utilisez un outil en ligne (tel que le logiciel Minificateur CSS) pour la compression.

Étape 1 : Localiser le fichier CSS

Connectez-vous au serveur web (soit en utilisant un outil FTP tel que FileZilla, soit le gestionnaire de fichiers du panneau de contrôle de l'hébergement).
Chemin d'accès :
/wp-content/themes/votre-thème/(volonté) votre thème (Remplacer par le nom du sujet actuel)
Trouver tous les fichiers CSS personnalisés (wordpress Appearance → Theme File Editor → style.css)

Étape 2 : Fusionner plusieurs fichiers CSS en un seul fichier

Ouvrez tous les fichiers CSS à fusionner localement dans un éditeur de texte (par exemple VS Code ou Notepad++) dans l'ordre.
Copiez et collez le contenu dans un nouveau fichier portant le nom suggéré :style-merged.css

Fusionner afin d'éviter les conflits de style et les doublons (par exemple, les styles globaux d'abord, les styles personnalisés ensuite).

Étape 3 : Utilisez un outil en ligne pour compresser le fichier CSS fusionné.

Accéder à des outils de compression en ligne, par exemple :
- https://cssminifier.com
Collez le contenu CSS fusionné et cliquez sur Minify.

Copiez le code compressé et enregistrez-le sous style-merged.min.css

Étape 4 : Télécharger le fichier CSS compressé

Placer le style-merged.min.css Téléchargez-le dans le répertoire CSS du thème, par exemple :
/wp-content/themes/votre-theme/assets/css/

2. Chargement retardé des fichiers JS non critiques

Certains fichiers JS peuvent ne pas constituer une partie essentielle du chargement de la page et peuvent être retardés de manière facultative. En réduisant le nombre de fichiers JS qui sont initialement chargés sur la page, vous pouvez améliorer de manière significative la vitesse de chargement de la page.

Activation du chargement différé avec les plugins: :WP RocketDes plugins comme Autoptimize permettent de retarder le chargement de JS. Il vous suffit d'activer les paramètres appropriés et le plugin optimisera automatiquement votre site.

Chargement manuel différéVous pouvez également modifier le thème en modifiant le fichier functions.php en utilisant le fichier reporter peut-être asynchrone pour retarder le chargement des scripts non critiques. Par exemple, l'utilisation de l'attribut reporter pour retarder le chargement de la plupart des scripts JS de la page jusqu'à ce que la page soit entièrement rendue.

Étape 1 : Sauvegarde de votre site web

Avant d'apporter des modifications au code, il est recommandé de sauvegarder votre site web, ou au moins le code utilisé actuellement. functions.php au cas où une erreur de modification conduirait le site à signaler une erreur.

Étape 2 : Ouvrir functions.php papiers

Connectez-vous au backend de WordPress
Allez dans [Apparence] > [Editeur de fichier de thème].
Sur le côté droit, trouvez et cliquez sur functions.php(Fonctions thématiques)

Étape 3 : Insérer le code suivant pour ajouter le JS reporter causalité

Exemple : Ajouter reporter Propriétés (sans jQuery)

function add_defer_attribute($tag, $handle) {
    // Exclure jQuery (ajouter d'autres poignées le cas échéant)
    if (in_array($handle, ['jquery'])) {
        return $tag ;
    }
    return str_replace(' src', ' defer src', $tag) ;
}
add_filter('script_loader_tag', 'add_defer_attribute', 10, 2) ;

Étape 4 : Enregistrer et tester le chargement de la page

Cliquez sur [Mettre à jour le fichier] dans le coin supérieur droit.
Pour accéder à la page d'accueil, appuyez sur F12 pour ouvrir les outils de développement du navigateur et vérifiez que l'option <script> Si l'étiquette a été ajoutée reporter peut-être asynchrone

Vérifier que la page fonctionne correctement afin d'éviter les problèmes liés à la séquence d'exécution du script.

3. Supprimer les scripts et styles inutiles des plugins

Certains plugins chargent automatiquement leurs fichiers CSS et JS sur chaque page, et bien souvent ces scripts n'ont pas besoin d'être chargés sur chaque page. Vous pouvez supprimer les scripts et les styles inutiles en procédant comme suit :

Désactiver les plug-ins inutilesLes plugins : Vérifiez régulièrement la présence de plugins qui ne sont plus utilisés ou qui sont inutiles et désactivez-les pour éviter qu'ils ne chargent des ressources supplémentaires sur la page.

Désactivation des scripts spécifiques à une pageChargement d'un script spécifique pour une page spécifique : Le chargement d'un script spécifique pour une page spécifique peut être effectué en utilisant la fonction de chargement d'un script spécifique pour une page spécifique. wp_dequeue_script() peut-être wp_dequeue_style() dans la fonction functions.php pour supprimer les scripts et les styles indésirables.

add_action('wp_print_scripts', function () {
global $wp_scripts ; foreach ($wp_scripts->queue as $script) {
foreach ($wp_scripts->queue as $script) {
echo $script . "
" ;
}
}) ;

Ce code est inséré pour afficher tous les noms de scripts sur la page d'accueil.

Permettre le chargement différé des images

Chargement tardif des images(Lazy Load) est une technique de chargement du contenu des pages à la demande. Le chargement paresseux signifie que les images ne sont chargées que lorsque l'utilisateur fait défiler la page jusqu'à la partie appropriée, plutôt que de charger toutes les images au début. De cette manière, les besoins en ressources pour le chargement initial de la page peuvent être considérablement réduits et la vitesse de chargement peut être augmentée.

Activer le chargement différé dans WordPress Depuis WordPress 5.5, WordPress a la possibilité de retarder le chargement des images. Vous pouvez retarder le chargement des images en modifiant le fichier wp-config.php pour activer cette fonctionnalité. Il suffit d'ajouter le code suivant au fichier : define('WP_REDIS_ENABLE', true). Si vous utilisez la dernière version de WordPress, le chargement différé des images devrait être activé automatiquement. Vous pouvez le vérifier en regardant le code source de la page et en vérifiant l'élément loading="lazy" L'attribut apparaît-il dans le img Étiquette vers le haut pour valider cette fonction.

Activation à l'aide de plug-inschargement retardé Si vous souhaitez un contrôle plus précis de la fonction de chargement différé, ou si vous voulez qu'elle s'applique également à d'autres fichiers multimédias tels que les vidéos, vous pouvez utiliser un plugin de chargement différé tel que a3 Charge paresseuse peut-être Lazy Load par WP Rocket.

Optimiser les images dans les thèmes WoodMart Le thème WoodMart offre de puissantes options d'optimisation des images. Dans le backend de WordPress, allez dans les réglages du thème WoodMart et sélectionnez Performance pour activer les options d'optimisation de l'image telles que le chargement différé de l'image, le redimensionnement automatique de l'image, etc.

Autres recommandations d'optimisation

Activer le cache du navigateur
En activant la mise en cache du navigateur, les utilisateurs chargeront davantage de ressources statiques lorsqu'ils visiteront un site web, au lieu de les retélécharger à chaque fois. Pour ce faire, il suffit d'ajouter l'option .htaccess pour configurer les règles de mise en cache.
Utilisation de réseaux de diffusion de contenu (CDN)
Un CDN met en cache et distribue le contenu de votre site à de multiples nœuds de serveurs dans le monde entier, ce qui réduit considérablement les temps de chargement pour les utilisateurs du monde entier. CloudflareKeyCDN, etc.
Optimiser les performances du serveur
Le choix d'un environnement et d'une configuration d'hébergement appropriés est très important pour les performances du site web. Pour les thèmes riches en fonctionnalités comme WoodMart, le choix d'un serveur qui prend en charge PHP 7.4 ou plus et l'activation d'un système de mise en cache (comme Redis ou Varnish) peuvent être un moyen efficace d'améliorer les performances.

résumés

Des optimisations telles que la réduction de la taille des fichiers JS/CSS et l'activation du chargement différé peuvent considérablement améliorer la qualité de l'information.Mise à niveau de WoodMart Vitesse de chargement et performances du thème. La fusion et la compression des fichiers, le retardement du chargement des images et la suppression des scripts inutiles sont autant de mesures efficaces pour améliorer la réactivité de votre site web.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.