Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Réduire au minimum les fichiers CSS, HTML et Javascript de votre site Web peut vous faire gagner un temps précieux sur la vitesse de chargement des pages de votre site Web. Maintenant, il ne s’agit pas de réduire de moitié la vitesse de chargement de vos pages ou quoi que ce soit, mais en ce qui concerne la vitesse de votre site Web, un peu aide. La vitesse de chargement de votre site Web est non seulement importante pour les visiteurs novices, mais également pour le déplacement des classements des moteurs de recherche.

Le terme «minimiser» fait référence à un langage de programmation qui décrit la suppression des caractères inutiles dans le code source. Ces caractères incluent des espaces, des sauts de ligne, des commentaires et des séparateurs de blocs utiles aux humains mais non requis par les machines. Nous minimisons les fichiers d’un site Web contenant du code CSS, HTML et Javascript afin que votre navigateur Web puisse les lire plus rapidement.

Voici un exemple de ce à quoi ressemble la minimisation CSS.

CSS avant de minimiser

/* Layout helpers

----------------------------------*/
.ui-helper-hidden {
display: none;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

CSS après minimisation

.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}

Bien sûr, ce n’est qu’un petit exemple avec un extrait de code CSS, mais vous pouvez imaginer combien de mémoire cela permettrait d’économiser en minimisant des milliers de lignes de code. Donc, si vous voulez le faire manuellement à la main, vous pouvez le faire techniquement. Mais vous courriez un risque élevé d’erreurs et vous raseriez inutilement du temps libre précieux ou votre vie!

Suivez mes conseils et utilisez les outils à votre disposition.

Outils en ligne pour minimiser manuellement vos fichiers

Heureusement, vous n’avez pas besoin d’être développeur ou de connaître l’un des langages de programmation pour minimiser les fichiers de votre site. La minimisation est devenue une pratique courante dans le monde de la conception Web, vous ne devriez donc pas être surpris d’apprendre qu’il existe de nombreux outils merveilleux (et gratuits) qui font le travail pour vous.

Voici une liste d’outils utiles pour vous aider à démarrer. Étant donné que beaucoup d’entre eux peuvent minimiser plus d’un type de code, j’ai mis les options de type de code entre parenthèses.

  • Compilateur de fermeture (JS uniquement) – Closure Compiler fait partie de Outils de verrouillage, un ensemble d’outils de Google Developers. Vous pouvez minimiser votre Javascript avec d’autres ajustements utiles. Vous pouvez obtenir votre javascript en entrant l’URL de l’emplacement du fichier js, puis en choisissant comment optimiser et formater le code. Par exemple, vous souhaiterez peut-être optimiser votre code pour les espaces uniquement lorsque vous le souhaitez. Une fois que vous avez cliqué sur le bouton Compiler, le code sera minimisé (ou compilé) pour vous et votre code sera vérifié pour les erreurs.
  • cssminifier.com et javascript-minifier.com (CSS et JS) – Ces deux mini pilotes d’Andrew Chilton sont faciles à utiliser. Collez simplement votre code, puis appuyez sur le bouton de réduction pour afficher le code réduit. Vous pouvez même télécharger le code de sortie sous forme de fichier.
  • csscompressor.net (CSS uniquement) – Ce compresseur CSS en ligne est rapide, facile et gratuit à utiliser.
  • jscompress.com (JS uniquement) – Cet outil de compression JavaScript vous permet d’utiliser le copier-coller pour compresser le code JavaScript, mais vous pouvez également télécharger plusieurs fichiers JavaScript en même temps. Ceci est idéal pour combiner des fichiers JavaScript en un seul fichier afin d’améliorer la vitesse de chargement des pages.
  • refresh-sf.com (HTML, CSS et JS) – Ce compresseur minimise les types de code JavaScript, CSS et HTML. Il comprend également toutes les options de compresseur pour chaque type de code si nécessaire.
  • htmlcompressor.com (HTML, CSS et JS) – Cet outil de compression / réduction en ligne prend en charge les types de code HTML, CSS et JS. Il prend même en charge différentes combinaisons de types de code comme CSS + PHP et JavaScript + PHP. Vous pouvez également vérifier le code compressé pour les erreurs.
  • minifycode.com (HTML, CSS et JS) – Ce site propose des minificateurs pour JavaScript, CSS et HTML avec une interface utilisateur simple et propre qui minimise votre code d’un simple clic sur un bouton. Il inclut également un outil « embellir » pour décompresser le code minimisé pour le rendre plus facile à lire (fondamentalement le contraire de la minification).
  • Dans les outils – Les outils de Dan Offre un Minificateur CSS et un Minificateur JavaScript. Les deux outils ont une interface utilisateur vraiment propre et facile à utiliser. Ils n’offrent pas d’options avancées, mais sont parfaits à des fins de minimisation générale.

Si vous recherchez des outils hors ligne pour réduire localement votre HTML CSS ou JavaScript, voici vos options:

Comment minimiser CSS, HTML et Javascript sur votre site Web

Abonnez-vous à notre chaîne Youtube

Comment réduire votre HTML, CSS et JavaScript avec un seul outil en ligne

Beaucoup de ces outils en ligne ont un processus similaire qui comprend les étapes suivantes:

Collez votre code source ou téléchargez le fichier de code source.
Optimisez les paramètres pour une sortie spécifique (si des options sont disponibles).
Cliquez sur un bouton pour réduire ou compresser le code.
Copiez la sortie du code réduit ou téléchargez le fichier de code réduit.

Dans cet exemple, j’utilise les outils Minify de minifycode.com.

Tout d’abord, recherchez le fichier CSS (communément appelé style.css) dans les fichiers de votre site et ouvrez le fichier avec un éditeur de page. Copiez ensuite tout le code CSS dans votre presse-papiers.

minfy html css javascript

Aller à minifycode.com et cliquez sur l’onglet CSS Minifier. Collez ensuite le code CSS dans le champ de saisie et cliquez sur le bouton Réduire CSS.

minfy html css javascript

Une fois que le nouveau code réduit a été généré, copiez le code.

minfy html css javascript

Revenez ensuite au fichier CSS de votre site Web et remplacez le code par la nouvelle version minifiée.

C’est ça!

Répétez ce processus pour minimiser également les fichiers JavaScript et HTML de votre site.

Comment minimiser HTML, CSS et JavaScript dans WordPress à l’aide de plugins

Le moyen le plus simple de minimiser HTML, CSS et JavaScript dans WordPress est d’utiliser un plugin. Cela vous permet d’optimiser automatiquement les fichiers de votre site WordPress pour des temps de chargement de page plus courts en quelques clics de souris.

Il existe de nombreux plugins qui font ce travail, mais je mentionnerai brièvement quelques fonctionnalités remarquables.

Optimisation automatique (GRATUIT)

minfy html css javascript
Autoptimize est probablement le plugin Minify le plus populaire. Il est populaire car il est facile à utiliser et doté de fonctionnalités puissantes. Il peut agréger (combiner), minimiser et mettre en cache votre code. En prime, vous disposez d’options supplémentaires pour optimiser les polices Google, les images, etc.

Pour utiliser Autoptimize, vous pouvez télécharger, installer et activer le plugin à partir du tableau de bord WordPress sous Plugin> Add New.

minfy html css javascript

Une fois le plugin activé, accédez à Paramètres> Optimiser automatiquement. Ensuite, dans l’onglet Paramètres principaux, vérifiez le code que vous souhaitez modifier (HTML, CSS et / ou JavaScript) et cliquez sur Enregistrer les modifications.

minfy html css javascript

Vous pouvez également cliquer sur le bouton Afficher les paramètres avancés en haut de la page pour personnaliser davantage l’optimisation de votre code.

minfy html css javascript

C’est tout! Assez simple et puissant.

Minimisation rapide de la vitesse (GRATUIT)

minfy html css javascript

Minimisation rapide de la vitesse est un autre plugin WordPress populaire, gratuit et puissant qui fait plus que le minimiser. Il minimise et combine votre CSS et Javascript pour réduire les requêtes HTTP sur votre serveur, et est donc à la hauteur de son nom pour vous donner des temps de chargement de page rapides. Des options d’optimisation supplémentaires sont disponibles, mais les paramètres par défaut fonctionnent très bien pour la plupart des sites Web.

Pour utiliser le plugin, installez-le d’abord et activez-le dans votre tableau de bord WordPress en accédant à Plugins> Ajouter nouveau. Recherchez ensuite « Fast Velocity Minify » et cliquez pour l’installer et l’activer une fois qu’il apparaît dans les résultats de la recherche.

minfy html css javascript

Une fois le plugin activé, vos fichiers seront automatiquement minimisés et optimisés pour les meilleures performances. C’était facile!

Accédez à la page des paramètres du plugin (Paramètres> Fast Velocity Minify) pour voir toutes les options disponibles. Dans l’onglet État, vous verrez une liste utile de vos fichiers JavaScript et CSS traités.

minfy html css javascript

L’onglet Paramètres vous permet de personnaliser la façon dont vos fichiers sont optimisés. Étant donné que HTML, CSS et JavaScript sont déjà minifiés, vous pouvez utiliser ces paramètres pour ajuster les options par défaut ou pour désactiver la minification pour certains types de code. Il existe même des options pour optimiser Google Fonts et Font Awesome.

minfy html css javascript

C’est ça!

Cache total W3 (GRATUIT)

minfy html css javascript
Cache total W3 est un excellent plugin de mise en cache qui a la possibilité de minimiser HTML, JS et CSS.

minfy html css javascript

Cache le plus rapide WP (GRATUIT)

minfy html css javascript
Cache WP le plus rapide – Ce plugin de mise en cache WordPress GRATUIT est extrêmement populaire auprès des critiques élevées. Le plugin effectue divers ajustements de performances, y compris la combinaison et la réduction de HTML, CSS et JavaScript pour de meilleures performances.

Une fois le plugin installé, cliquez simplement sur l’onglet WP Fastest Cache dans la barre latérale du tableau de bord WordPress (celui avec l’incroyable icône guépard). L’onglet Paramètres propose des options pour combiner et réduire les fichiers HTML et CSS. La réduction de JavaScript n’est disponible que dans la version Pro.

minfy html css javascript

Dernières pensées

Si vous voulez des temps de chargement plus rapides et de meilleures performances, vous devez minimiser vos fichiers HTML, CSS et Javascript. Avec tous les outils en ligne disponibles, vous pouvez facilement réduire votre code pour n’importe quel site Web. Et pour vos utilisateurs WordPress, il existe de puissants plugins disponibles qui vous permettent de minimiser automatiquement ces fichiers en quelques clics. Les plugins ci-dessus ne sont que quelques-uns des excellents plugins qui effectuent la minimisation avec d’autres ajustements de performances. Vous avez peut-être déjà un plugin de type puissance pour lequel une minimisation est déjà disponible. Par exemple, de nombreux plugins de mise en cache incluent l’option de réduction. J’espère que cet article vous aidera à décider quelle option vous convient le mieux.

J’ai hâte de vous entendre dans les commentaires ci-dessous.

De bas en haut!





Source link

Recent Posts