Minify / Combine WordPress CSS + Javascript Files = Site plus rapide

WordPress minifie les fichiers JS et CSS

L'une des meilleures choses que nous avons apprises lors de la recherche de notre article sur comment rendre le site Web Joomla se charger rapidement (1.29 seconde pour être exact), nous avons découvert un grand bijou d'outil. 

Comme beaucoup de gens le font lorsqu'ils s'efforcent d'accélérer le chargement d'un site Web, ils se réfèrent au Site de recommandations Google PageSpeed, et à juste titre, car si Google fait une déclaration, cela vaut généralement la peine d'être écouté. Cependant, il est parfois assez compliqué d'effectuer toutes les optimisations et vous n'aurez peut-être pas les compétences nécessaires pour effectuer ces modifications.

Contenu[Afficher]

Comme vous le savez peut-être, lorsque vous accélérez votre site WordPress, vous devez effectuer de nombreuses optimisations. L'un d'eux est de savoir comment exploiter correctement la mise en cache du navigateur dans WordPress, quelque chose qui CollectiveRay a un excellent article sur ici.  

Mais ce n'est pas suffisant si les fichiers CSS et Javascript sont assez volumineux. C'est ça la minification. 

Qu'est-ce que la minification? (et comment cela peut profiter à votre site)

La minification est la fonction de prendre un morceau de codage et d'en supprimer tous les caractères (tels que les espaces, les sauts de ligne, les tabulations et autres) qui ne transmettent aucun sens, sauf pour rendre le texte plus lisible. Les fichiers WordPress minifiés fonctionnent de la même manière comme le code d'origine, à la seule différence qu'ils prennent un peu less l'espace parce qu'ils coupent des informations supplémentaires. Pour cette raison, le fichier devient plus petit à télécharger, ce qui se traduit par un site Web plus rapide dans l'ensemble.

La minification est particulièrement importante et utile pour les scripts (tels que les fichiers Javascript), les feuilles de style CSS et d'autres composants de site Web similaires.

Lire la suite: Comment embaucher (GRANDS) développeurs Javascript - Top 5 des sites, cliquez ici - https://www.collectiveray.com/hire-javascript-developer

La principale raison de faire cela et les avantages pour votre site sont:

  • Réduire les temps de chargement et rendre votre site Web plus rapide dans l'ensemble. Étant donné que la plupart des sites Web utilisent plusieurs scripts et fichiers de feuille de style, ce qui se traduit par BEAUCOUP d'espace supplémentaire. Bien que vous puissiez penser que la suppression d'espaces n'entraînera pas beaucoup de changements, le processus de minification complet de tous les fichiers d'une installation WordPress peut constituer un avantage significatif.
  • Obscurcir le code des lecteurs occasionnels. Bien que la minification qui en résulte ne cache pas le code de votre site (c'est-à-dire que c'est différent de l'obfuscation du code), mais cela rend un peu plus difficile à comprendre pour les utilisateurs occasionnels, si c'est quelque chose qui vous concerne. 

Il est peu probable que la réduction de votre code entraîne un majeur différence par rapport aux temps de chargement de votre site, considérée comme faisant partie d'une stratégie d'optimisation complète, ce serait l'une des nombreuses choses que vous devriez faire. Il peut réduire les temps de chargement de votre page de quelques points de pourcentage, ce qui en fait une bonne tactique pour ne rien mettre en œuvre.less.

Que se passe-t-il pendant le processus de minification?

Essentiellement, le processus de minification parcourt ces fichiers texte et supprime tout ce qui est uniquement destiné à la consommation humaine, car après tout, la machine analysant le fichier ne le rend pas lisible par l'homme. Le processus de minification de WordPress supprime tout élément tel que les espaces blancs supplémentaires (espaces, nouvelles lignes, tabulations), les commentaires ou tout autre texte qui augmente la taille du fichier sans diminuer la «sémantique» du fichier pour le navigateur. Le sens est toujours là, les fichiers sont juste plus petits.

Par exemple, voici à quoi ressemblerait un fichier CSS normal:

body {
margin: 30px;
rembourrage: 30px;
color: # FFFFFF;
arrière-plan: # f7f7f7;
}
h1 {
font-size: 12px;
couleur # 222222;
margin-bottom: 5px;
}

Alors que la version minifiée de ce code ressemblerait à ceci:

body{margin:30px;padding:30px;color:#fff;background:#f7f7f7}h1{font-size:12px}

Vous pouvez voir que les informations textuelles sont exactement les mêmes, elles sont simplement dépouillées de tout ce qui est là pour des raisons de lisibilité. Le même concept s'applique aux fichiers Javascript.

Le résultat final de l'utilisation de plugins ou de moyens pour minifier Javascript WordPress serait que la sortie HTML, ainsi que les fichiers CSS et les fichiers JS utilisés par votre site Web et ses plugins ressembleraient à ceci:

code minifié

Bien que cela puisse ressembler à un tas d'ordures, en fait, tout le sens est toujours là - il vient d'être "minifié" pour supprimer tout élément inutile qui gonfle sa taille.

Il existe de nombreux plugins qui peuvent vous aider à réaliser ce processus, qui seront mentionnés ci-dessous.

Minifier Javascript WordPress

Le processus pour minifier Javascript WordPress est assez simple. Il vous suffit d'installer l'un des plugins ci-dessous. Vous voudrez peut-être également noter que les fichiers JavaScript de base de WordPress sont déjà minifiés par défaut.

En fait, si vous regardez le code source de votre site Web WordPress, vous verrez l'extension .min.js, qui montre que les fichiers réels sont déjà minifiés.

core minify javascript wordpress

Ce n'est pas nécessairement le cas pour les plugins et thèmes tiers.

Vous voudrez peut-être également prendre l'étape supplémentaire de supprimer tous les plugins supplémentaires et de générer des scripts dont vous pourriez ne pas avoir besoin.

Si vous êtes absolument obsédé par les performances, vous pouvez également choisir de créer des versions des fichiers Javascript qui incluent UNIQUEMENT le script utilisé par votre site Web. Voir par défaut, la plupart des fichiers de script ont un code supplémentaire qui est inclus "juste au cas où" il serait nécessaire.

Vous voudrez peut-être en savoir plus sur comment faire ça ici.

Minifier CSS WordPress

Une fois de plus, le processus de Minify CSS WordPress est simple. Vous pouvez simplement installer un plugin et cela effectuera la minification de vos fichiers CSS automatiquement. Alors que la plupart des fichiers WordPress de base ont une version minifiée des fichiers CSS, cela ne s'applique pas nécessairement à tous les plugins et thèmes.

Encore une fois, nous vous recommandons également d'effectuer un exercice de couverture de code CSS pour supprimer tout code CSS superflu qui est simplement un poids mort.

Nous mentionnerons un certain nombre de plugins qui minifient CSS WordPress dans la section suivante ci-dessous. 

5 meilleurs plugins WordPress Minify

Nous discuterons à la fois des produits génériques qui sont utilisés en général pour rendre votre site Web plus rapide grâce à la minification, et des plugins spécifiques dont la seule fonctionnalité est le processus de minification.

1. WP Rocket

C'est de loin notre plugin préféré.

La raison est simple, c'est de loin le meilleur produit capable d'effectuer plusieurs tâches d'optimisation de la vitesse, de manière très simple, mais avec un excellent résultat pour rendre votre site Web plus rapide, notamment en effectuant une minification de fichiers CSS et Javascript WordPress.

Vraiment et vraiment, ce n'est qu'une des choses que fait ce plugin, mais une fois que vous l'avez installé, vous constaterez que vous n'avez rien d'autre à faire.

Comme vous pouvez le voir ci-dessous, cette minification est l'une des options de base pour l'optimisation. Avec cela, vous verrez qu'il y a concaténation, il s'agit d'un processus secondaire d'optimisation, qui crée un fichier parmi tous les fichiers CSS et JS (car cela accélère également le téléchargement des fichiers)

minify javascript css plugin wordpress

Le plugin n'est pas gratuit, mais le prix est très bon marché à seulement 49 $. Compte tenu du temps que cela vous fait gagner et du fait que votre site Web se charge plus rapidement, littéralement en quelques minutes, nous vous recommandons vivement d'opter pour cela.

Témoignage WP Rocket

Nous installons ce plugin sur chaque site Web WordPress que nous mettons en place, simplement parce qu'il nous fait gagner beaucoup de temps d'optimisation.

Cliquez ici pour le prix le plus bas sur WP Rocket

2. Optimiser JCH

 

Voici une petite astuce pour vraiment vous aider - utiliser JCH Optimize - c'est un outil qui fonctionne sur plusieurs plates-formes telles que WordPress, Joomla, Drupal et Magento.

L'avantage de JCH Optimize est qu'il implémente un grand nombre de Google PageSpeed et d'autres recommandations pour que votre site Web se charge le plus rapidement possible.

C'est génial car il ne nécessite pratiquement aucune configuration et aucune intervention de la part d'un utilisateur.

Si vous recherchez un service d'hébergement rapide, jetez un œil à notre hébergeur, nous les avons examinés en détail ici: https://www.collectiveray.com/inmotion-hosting-review

Optimiser JCH

Et vous n'avez pas à vous soucier du code, tout cela est fait par le plugin - il préserve tout votre codage d'origine, de sorte que vous ne casserez rien en dérangeant. En outre, généralement, il effectue les optimisations qui sont généralement les plus difficiles à effectuer. Pour en citer quelques-uns, ce sont ceux qui sont bien faits

  • Combine les fichiers CSS de tous vos modèles, modules et plugins dans un seul fichier, réduisant ainsi le nombre de demandes envoyées à votre site Web
  • Combine les fichiers Javascript, qui sont généralement très difficiles à combiner sans casser le site
  • Zips le CSS et Javascript afin qu'ils deviennent plus petits et le temps de transfert est réduit
  • Réduit le Javascript et le CSS, pour le rendre plus compact et réduire encore sa taille (réduit les espaces supplémentaires, les commentaires, etc.)
  • Ajoute une balise DEFER, de sorte que votre page se charge en premier, et exécute le Javascript après le chargement de la page, ce qui rend le site plus rapide à charger. Étant donné que cette implémentation spécifique est essentielle pour un site Web rapide, nous avons couvert cela en détail ici: https://www.collectiveray.com/defer-parsing-of-javascript-wordpress-async
  • Crée des sprites IMAGE - cela réduit également le nombre de demandes envoyées à votre site Web d'une très grande quantité et est l'une des optimisations les plus difficiles à réaliser manuellement

Il vous permet également de modifier certaines options avancées telles que l'exclusion de certains fichiers pour vous assurer que si une extension ne fonctionne pas après son exécution via JCH Optimize, cela fonctionnera de toute façon.

En XNUMX, le version PRO, qui est disponible à un prix dérisoire de 29 $, vous donnera accès à plusieurs autres options d'optimisation telles que l'inclusion de CSS et Javascript en ligne et le chargement du javascript de manière asynchrone pour ne pas bloquer le chargement du site.

Croyez-moi, installez le plugin, activez-le et vérifiez vos résultats avant et après. Si vous n'obtenez pas une bonne amélioration, revenez ici et plaignez-vous, mais je suis à peu près sûr que vous ne reviendrez pas :)

Cliquez ici pour télécharger JCH Optimize

3. W3 Total Cache

Ceci est un autre plugin que vous verrez est un logiciel générique qui fait un tas de choses liées à la rapidité de WordPress, y compris la réduction des fichiers CSS, JS et HTML.

Bien que vous constatiez que cela est mentionné très souvent lorsqu'il s'agit de tels plugins, il convient de noter que ce produit n'est absolument pas une bonne idée pour les personnes qui ne sont pas techniques.

Paramètres de cache de page dans W3 Total Cache

Il est connu pour créer des problèmes importants, certains bogues subsistant même après la désinstallation et la suppression du logiciel du site Web.

nous-mêmes à CollectiveRay J'ai essayé d'utiliser ce plugin plusieurs fois, mais à ce stade et dans l'état actuel, nous ne recommandons plus qu'il soit utilisé à des fins de minification ou pour rendre les sites Web plus rapides, nonless vous savez exactement ce que vous faites.

4. WP Super Minifier

Ce plugin utilise le Minifier le framework PHP et son utilisation combine, réduit et met en cache les fichiers JavaScript et CSS en ligne à la demande pour accélérer le chargement des pages.

En activant ceci plug-in, la source de votre HTML, JavaScript en ligne et CSS sont désormais supprimés des éléments supplémentaires, ce qui réduit leur taille.

Ce qui est différent des autres plugins mentionnés ici, c'est que ce plugin effectue UNIQUEMENT le processus de minification, et aucune autre optimisation, ce qui est un excellent choix pour ceux qui ne veulent exécuter que cette fonction et rien d'autre pour une raison quelconque.

5. Réduire la vitesse rapide 

Bien qu'il existe de nombreux autres plugins WordPress minify que nous pouvons recommander, ce sera le dernier que nous mentionnons ici. 

Le plugin Fast Velocity combine tous les fichiers CSS et JavaScript afin que le serveur Web doive traiter moins de requêtes. Dans le même temps, il réduit également les fichiers et crée des copies en cache pour des temps de chargement plus rapides.

Ce plugin active automatiquement les options pour réduire votre HTML, JavaScript et CSS, mais vous peut désactiver manuellement un ou plusieurs d'entre eux en accédant au Paramètres → Minify Fast Velocity languette.

Vous pouvez choisir d'exclure des fichiers spécifiques de la minification si l'un de vos plug-ins se rompt après l'avoir activé.

 

Vitesse rapide minifier

Récapitulation 

Bien que le processus de minification ne soit pas une fonction révolutionnaire, il doit être mis en œuvre comme l'une des nombreuses tâches pour rendre votre WordPress plus rapide et nous vous recommandons vivement de mettre en œuvre l'un des produits mentionnés ci-dessus.

Téléchargez la liste des 101 astuces WordPress que tout blogueur devrait connaître

101 astuces WordPress

Cliquez ici pour télécharger maintenant

 

À propos de l’auteure
David Attard
Auteur: David AttardSite Web : https://www.linkedin.com/in/dattard/
David travaille dans ou autour de l'industrie en ligne / numérique depuis 18 ans. Il possède une vaste expérience dans les industries du logiciel et de la conception Web utilisant WordPress, Joomla et les niches qui les entourent. En tant que consultant numérique, son objectif est d'aider les entreprises à obtenir un avantage concurrentiel en utilisant une combinaison de leur site Web et des plates-formes numériques disponibles aujourd'hui.

Encore une chose ... Saviez-vous que les personnes qui partagent des informations utiles comme cet article ont l'air géniales aussi? ;-)
Si vous voulez, vous pouvez laisser un incontournable commentez vos pensées, puis partagez-les sur votre ou vos groupes Facebook qui trouveraient cela utile et récoltons ensemble les avantages. Merci d'avoir partagé et d'être gentil!

Divulgation: Cette page peut contenir des liens vers des sites externes pour des produits que nous aimons et que nous recommandons sans réserve. Si vous achetez des produits que nous suggérons, nous pouvons percevoir des frais de parrainage. Ces frais n'influencent pas nos recommandations et nous n'acceptons pas les paiements pour les avis positifs.

Auteur (s) présenté sur:  Logo du magazine Inc   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   et beaucoup plus ...