Comment optimiser CSS et JS pour des sites plus rapides

La vitesse de chargement du site Web est cruciale pour l'expérience utilisateur, qui est souvent négligé par les propriétaires de sites Web. L'augmentation de la vitesse de chargement du site Web de 8 secondes à 2 secondes peut augmenter le taux de conversion de 74%, ce qui signifie que les sites Web lents peuvent perdre près de la moitié de leurs clients potentiels.

La compression de code, c'est-à-dire la suppression des caractères qui ne sont utilisées que pour améliorer la lisibilité, peuvent réduire l'utilisation de la bande passante et augmenter la vitesse de chargement des pages. Des outils comme CSS Miniifier et JSCompress peuvent vous aider à traverser ce processus. En outre, il vaut également la peine d'envisager d'implémenter le chargement de code asynchrone pour optimiser davantage les performances avant de compresser JavaScript.

Le code redondant ou en double peut également ralentir le site Web. Utilisez les outils de développeur intégrés dans Google Chrome pour aider à identifier et supprimer ces ressources de code inutiles. Il est important de vérifier et de supprimer régulièrement le code inutilisé pour maintenir les performances optimales du site Web.

Cet article est parrainé par l'hébergement australien. Merci de soutenir les partenaires qui ont rendu le point de point possible.

L'expérience utilisateur est le facteur le plus important dans le succès de votre entreprise en ligne.

Que vous exécutiez un blog de niche, un site Web SaaS ou une boutique en ligne, si vous avez ruiné l'expérience du public d'une manière ou d'une autre, ne vous attendez pas à les convertir en clients payants.

La bonne nouvelle est que toute marque peut systématiquement améliorer l'expérience utilisateur en rétrécissant les facteurs dans une page spécifique.

par exemple, La vitesse de chargement est un problème que la plupart des propriétaires de sites Web sont enclins à ignorer.

augmenter la vitesse de votre site Web de 8 secondes à 2 secondes en fonction des données de taux de conversion peut entraîner une augmentation de 74% du taux de conversion.

Cela signifie qu'un site Web lent peut vous coûter près de la moitié de vos clients potentiels. Utilisez PagesPeed Insights pour en savoir plus sur la situation

Pour déterminer le problème qui affecte la vitesse de chargement de votre site Web, vous pouvez utiliser Google Pagespeed Insights. Il s'agit d'un outil gratuit qui analyse automatiquement les versions de bureau et mobiles de votre site Web.

En plus des problèmes détectés, PageSpeed ​​Insights affiche également certaines suggestions exploitables.

Pour les propriétaires de sites Web qui n'ont jamais envisagé de vitesse de chargement de page, vous pouvez rencontrer les problèmes suivants:

Ceux-ci indiquent que votre code CSS et JavaScript ralentit votre site Web. Bien que cela puisse sembler être le travail d'un développeur Web complet, ils sont assez faciles à optimiser à l'aide d'outils.

sans plus tarder, voici les étapes que vous devez prendre pour compresser

vos ressources CSS et JavaScript.

Déterminez le code pour compresser

La compression de code fait référence à la pratique de la suppression des caractères qui n'ont pas d'autres fonctions que d'améliorer la lisibilité.

Par exemple,

Commentaires en ligne

Peut aider les développeurs à comprendre le rôle de segments de code spécifiques. Bien que cela soit utile pour examen ou débogage, ils peuvent également augmenter la taille du code.

La compression supprime ces caractères supplémentaires et réduit ainsi l'utilisation de la bande passante et améliore la vitesse de chargement des pages.

En utilisant PagesPeed Insights, vous pouvez facilement identifier le code qui doit être compressé. Cliquez simplement sur Afficher comment corriger et suivre le chemin du chemin dans votre client CMS (Système de gestion de contenu) ou FTP (Protocole de transfert de fichiers).

Par exemple, si votre site Web s'exécute sur WordPress, tout le code doit être intégré dans la section "éditeur". Cela peut être trouvé via l'onglet Apparence dans le tableau de bord principal.

Optimiser votre code

Maintenant que vous avez trouvé le code pertinent, il est temps d'apprendre à les comprimer.

La façon la plus simple de compresser le code est probablement d'utiliser des outils d'automatisation. Pour CSS et JavaScript, certains des meilleurs outils sont CSS Miniifier et JSCompress.

en utilisant le mini-minifificateur CSS

CSS Miniifier est un outil gratuit et simple qui comprime automatiquement les ressources CSS. Vous collez simplement le code dans le champ de saisie, définissez le niveau de compression et cliquez sur Compress.

Il peut prendre plusieurs secondes à une minute pour compresser le code en fonction de la taille du code. Le nouveau code peut ensuite être copié sur votre interface client CMS ou FTP.

Conseils importants: par précaution, n'oubliez pas de créer une sauvegarde avant d'apporter des modifications au code du site Web. La création de répliques hors ligne ou basées sur le cloud est un moyen facile de le faire.

Pour tester si votre compression est valide, exécutez une autre analyse sur Pagespeed Insights. Votre fichier CSS récemment comprimé ne doit plus apparaître sous les détails "CSS" compressé.

#### Utilisation du chargement asynchrone sur JavaScript

La compression correcte de JavaScript est légèrement plus délicate par rapport au CSS. Avant d'exécuter votre code avec JSCompress, envisagez d'implémenter le chargement du code asynchrone.

est également appelé "chargement retardé" - mais dans le contexte de JavaScript, le chargement asynchrone fonctionne par des fonctions de chargement dynamique.

Pour utiliser le chargement asynchrone, ajoutez simplement la balise "async" lors de l'appel du fichier .js. Cela peut être fait dans le code source HTML de votre site Web.

Ce qui suit est un exemple de la façon de procéder:

<code> src=”yourscript.js” async> >
</code>

Vous pouvez vous référer à cet article pour plus d'informations sur son fonctionnement et comment il est utilisé. Si vous n'êtes pas complètement familier avec le HTML, lisez ce guide pour le débutant jusqu'à ce que vous soyez satisfait des bases.

combinant des fichiers javascript

Un autre point à mentionner lors de l'optimisation de JavaScript consiste à combiner des fichiers en une seule page. Cela réduira le nombre de demandes HTTP faites par le navigateur, ce qui accélérera inévitablement le temps de chargement.

Par exemple, n'appelez pas plusieurs fichiers .js dans le code source:

<code> src=”yourscript.js” async> >
</code>

Vous pouvez utiliser l'éditeur pour les combiner dans un seul fichier javascript, puis les appeler immédiatement:

<code> src=”http://www.yoursite.com/menu.js”> >
 src=”http://www.yoursite.com/tools.js”> >
 src=”http://www.yoursite.com/footer.js”> > 
</code>

Pour améliorer davantage le temps de traitement du script, vous pouvez également vous entraîner à omettre les balises "http" et "type". Par exemple, n'utilisez pas:

<code> src=”http://www.yoursite.com/all.js”> >
</code>

Vous pouvez simplement utiliser:

<code> src=" http: //www.yoursite.com/all.js" type="text/javascript" > ></code>

en utilisant jscompress

Enfin, l'utilisation de JSCompress est aussi simple que d'utiliser CSS Miniifier. Collez simplement le code dans le champ de saisie et cliquez sur le bouton "Compress JavaScript".

Ensuite, accédez à l'onglet de sortie pour afficher JavaScript compressé:

supprimer le code redondant

Un autre problème de performance que votre site Web peut avoir est la présence d'un code redondant ou en double. Celles-ci sont généralement causées par des éléments de page supprimés, ce qui fait que le code reste inutilisé.

Un bon moyen de trouver du code redondant est d'utiliser les outils de développement intégrés dans Google Chrome. Cela peut être activé en ouvrant le menu principal, en sélectionnant "plus d'outils" et en cliquant sur "Developer Tools".

En faisant cela, assurez-vous que vous êtes sur la page que vous souhaitez optimiser.

Lorsque les outils du développeur sont activés, recherchez la "couverture" dans la sous-section "plus d'outils" du menu Paramètres.

Cela ouvrira l'onglet "Couverture" dans la console du développeur. Là, cliquez sur le bouton de couverture de détection pour démarrer le test.

Une fois le test terminé, vous devriez voir une liste des ressources de code et leurs octets inutilisés. Ceci est indiqué par les barres rouges et vertes à droite.

Si c'est la première fois que vous vérifiez le code redondant, vous remarquerez qu'il y a un mélange de ressources CSS et JavaScript dans la liste. Vérifiez-les pour découvrir ce qui n'est pas utilisé.

Suppression de toutes les ressources de code inutiles, une par une peut être lourde. Mais si vous souhaitez offrir une expérience utilisateur parfaite, cela est nécessaire.

Aussi, n'oubliez pas que le code inutilisé peut s'accumuler au fil du temps, alors planifiez une autre fois pour revoir et nettoyer votre référentiel.

Conclusion

Pour les non-développeurs, l'optimisation du site Web CSS et du code JavaScript semble trop technique en surface. Cependant, avec les bons outils et l'hébergement Web, vous n'avez pas besoin d'être un développeur Web expérimenté pour y parvenir.

FAQS sur l'optimisation de CSS et JS pour accélérer les sites Web

Quels sont les avantages de l'optimisation de CSS et JS pour un site Web?

L'optimisation du CSS et du JS d'un site Web peut améliorer considérablement ses performances. Il réduit le temps de chargement du site Web, offrant ainsi une meilleure expérience utilisateur. Les sites plus rapides sont plus susceptibles de conserver les visiteurs, augmentant ainsi les taux d'engagement et de conversion. De plus, la vitesse du site Web est un facteur de classement pour les moteurs de recherche comme Google, donc l'optimisation de votre CSS et JS peut également améliorer votre référencement.

Comment compresser mes fichiers CSS et JS?

La compression des fichiers CSS et JS comprend la suppression des caractères inutiles tels que des espaces, des pauses en ligne et des commentaires sans modifier leur fonctionnalité. Vous pouvez utiliser des outils en ligne comme HTML Compressor ou CSS Miniifier. Collez simplement le code dans l'outil et il renvoie une version compressée que vous pouvez remplacer dans le fichier du site Web.

Quelle est la différence entre le chargement asynchrone et le chargement paresseux de JS?

Le chargement asynchrone et le chargement paresseux sont des techniques qui contrôlent comment les fichiers JS sont chargés sur les sites Web. Le chargement asynchrone permet au navigateur de continuer à rendre la page lors du chargement d'un fichier JS. D'un autre côté, le retard de chargement des retard de chargement des fichiers JS jusqu'à ce que le document HTML soit entièrement analysé. Les deux technologies peuvent améliorer les performances du site Web, mais le meilleur choix dépend des besoins spécifiques du site Web.

Comment optimiser ma livraison CSS?

L'optimisation de la livraison CSS implique la réduction du nombre de CSS qui doivent être chargés avant le rendu de la page. Cela peut être réalisé en indiquant le CSS critique, en retardant des CS non critiques et en éliminant le CSS inutilisé. Des outils comme PurifyCSS peuvent vous aider à identifier et supprimer les CSS inutilisés dans les fichiers.

Comment la mise en cache du navigateur améliore-t-elle les performances du site Web?

Le cache du navigateur stocke les fichiers statiques du site Web dans le navigateur du visiteur. Cela signifie que lors des visites suivantes, le navigateur n'a pas besoin de redémarrer ces fichiers, accélérant ainsi le temps de chargement. Vous pouvez activer la mise en cache du navigateur en ajoutant des directives spécifiques au fichier .htaccess ou en utilisant un plugin de cache si votre site Web utilise CMS comme WordPress.

Quel impact l'optimisation des images a-t-elle sur la vitesse du site Web?

Les images occupent généralement la plus grande partie de la taille de la page Web. En optimisant vos images, vous pouvez réduire considérablement la quantité de données que vous devez charger, accélérant ainsi le temps de chargement de la page. Les techniques d'optimisation d'image incluent la compression d'images, l'utilisation de formats d'image appropriés et la mise en œuvre du chargement paresseux.

Comment mesurer les performances de mon site Web?

Il existe plusieurs outils disponibles pour mesurer les performances du site Web, notamment PageSpeed ​​Insights, GTmetrix et Pingdom de Google. Ces outils fournissent des scores de performances et des informations détaillées sur la zone du site qui peuvent être optimisées pour la vitesse.

Quel rôle le réseau de livraison de contenu (CDN) joue-t-il à la vitesse du site Web?

CDN est un réseau de serveurs situés dans le monde entier qui stockent des copies de fichiers statiques sur le site Web. Lorsqu'un utilisateur visite votre site Web, le CDN fournit ces fichiers du serveur le plus proche de l'utilisateur, réduisant le temps requis pour le transfert de données et améliorant ainsi la vitesse du site Web.

Comment le temps de réponse du serveur affecte-t-il la vitesse du site Web?

Le temps de réponse du serveur est le temps nécessaire au serveur pour répondre à une demande de navigateur. Les temps de réponse lente du serveur peuvent retarder le chargement des pages Web, affectant négativement l'expérience utilisateur et le référencement. Vous pouvez améliorer le temps de réponse du serveur en optimisant la configuration du serveur, la mise à niveau des plans d'hébergement ou l'utilisation de CDN.

Qu'est-ce que HTTP / 2 et comment augmente-t-il la vitesse du site Web?

HTTP / 2 est la dernière version du protocole HTTP, qui contient des améliorations de performances telles que le multiplexage, la compression d'en-tête et la poussée du serveur. Ces fonctionnalités permettent une communication plus rapide et plus efficace entre le navigateur et le serveur, augmentant ainsi la vitesse du site Web. Pour profiter de HTTP / 2, votre serveur et le navigateur de l'utilisateur doivent le prendre en charge.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!