Optimisation du code de site JS et CSS en ligne - un guide détaillé

Écoutez cet article

Optimisation du code JS et CSS du site Web, est l'un des aspects les plus importants de l'optimisation technique des sites Web. La raison en est la libération de plus de ressources du site, en raison de la réduction des appels à la base de données et de l'amélioration de la lisibilité de la structure du code lui-même.

En règle générale, l'optimisation du code JavaScript et CSS augmente considérablement la vitesse de réponse du site. Ainsi, le site fonctionne plus vite et charge moins sérieusement la partie serveur.

Le contenu de l'article :

• Code JS et CSS - qu'est-ce que c'est ?
• Optimisation du code JS et CSS - pourquoi avez-vous besoin d'optimiser les scripts et les styles ?
• Module Gzip pour Apache, Nginx et Node.js
• Optimiser Javascript avec minification
• Optimisation CSS pour l'utilisation des polices Web
• Utilisation de l'option de téléchargement de police appropriée
• Optimisation du code en ligne
• Minifier JS et CSS avec les plugins CMS Wordpress

Code de site JS et CSS - qu'est-ce que c'est ?

JavaScript et CSS sont des langages de programmation courants, chacun apportant certaines fonctionnalités au site. Grâce à l'utilisation des principaux langages de programmation Web HTML, JS, CSS, une interaction idéale de l'utilisateur avec le site est obtenue.

Javascript est un langage de programmation courant. Permet de créer divers scripts. La plupart de ces scripts sont exécutés dans le navigateur de l'utilisateur. JavaScript améliore l'interaction de l'utilisateur avec le site. Faire ressortir un certain ensemble d'informations à l'aide de mini-applications (scripts) sur le site. La visualisation et la sortie des scripts JS se font en connectant ces derniers dans le code HTML de la page. Presque tous les sites utilisent JS (JavaScript) dans leur composition.

CSS - fait référence à l'un des principaux langages de programmation du site. CSS (fichier de style) - contient des informations sur l'apparence de presque tous les éléments du site. De la couleur et de l'emplacement à l'animation notoire d'un élément de page particulier.

Optimisation du code JS et CSS - pourquoi est-ce nécessaire ?

JS et CSS - à eux seuls, ils ont un code lourd assez volumineux qui a beaucoup de superflu. Il est difficile pour un navigateur de lire un immense canevas de codes en une fraction de seconde. Ainsi, le chargement de la page et de l'ensemble du site dans son ensemble ralentit. L'optimisation de ces fichiers vise à réduire la taille du code, en supprimant tout ce qui est superflu. Ceci s'applique à:

• Caractères inutilisés et supplémentaires ;
• les espaces;
• Lignes de code inachevées et non fonctionnelles.

Le processus lui-même est similaire à la compression d'un fichier normal. Le poids et la taille de ce dernier devient beaucoup plus petit. Mais, néanmoins, le code devient complètement illisible pour les humains. Mais les robots de recherche et les navigateurs contournent et comprennent parfaitement toute la structure du fichier. Le temps passé sur le tour est réduit plusieurs fois. Grâce à cette compression, la vitesse de téléchargement augmente et la réponse globale s'améliore.

Module Gzip pour Apache, Nginx et Node.js

Gzip est une technologie étonnante qui a été créée à une époque où Internet n'était pas aussi rapide qu'aujourd'hui. Les archiveurs étaient une technologie populaire (ils ont depuis perdu de leur popularité car les clés USB peuvent fournir jusqu'à 1 To de stockage).

L'idée était d'utiliser des archiveurs pour le trafic Web sur Internet (similaire à la création de fichiers de site Web), donc gzip a été conçu pour compresser les fichiers sur les serveurs Web en compressant les fichiers statiques (texte) à 99% de leur taille d'origine. JavaScript étant un fichier texte, gzip peut être utilisé pour compresser les fichiers JavaScript et réduire le temps de chargement des pages.

Optimiser Javascript avec minification

L'optimisation est un type spécial de minification JavaScript. De tels minimiseurs suppriment non seulement les espaces inutiles, les virgules, les commentaires, etc., mais aident également à éviter le "code mort":

• Compilateur de fermeture Google
• UglifyJS
• Minificateur Microsoft AJAX

Optimisation CSS pour l'utilisation des polices Web

Les polices Google et les fabricants de polices similaires ont révolutionné les polices Web, mais quelques lignes de code de police peuvent consommer des centaines de kilo-octets de bande passante.

1. Téléchargez uniquement les polices dont vous avez besoin : supprimez les polices inutilisées et vérifiez si de nouvelles polices sont nécessaires.
2. Téléchargez uniquement les graisses et les styles dont vous avez besoin : la plupart des fabricants de polices peuvent limiter les téléchargements à certains jeux de caractères (par exemple, uniquement latin), graisses (épaisseur) et italique (inclinaison). Les navigateurs peuvent afficher automatiquement les styles manquants, même si les résultats peuvent être médiocres.
3. Limitez le nombre de caractères dont vous avez besoin : les polices rarement utilisées peuvent être limitées à certains caractères. Par exemple, le titre "Tutoriel CSS" dans Open Sans peut être défini en ajoutant le paramètre & text= à la chaîne de requête Google Fonts : fonts.googleapis.com/css? family=Open+Sans&text=CStuorial
4. Pensez aux polices variables : les polices variables définissent une grande variété de styles, de graisses et d'italiques à l'aide de l'interpolation vectorielle. Le fichier de police est légèrement plus volumineux, mais vous n'en avez besoin que d'un, pas de plusieurs. La police récursive démontre la flexibilité des polices variables.
5. Téléchargez des polices depuis votre serveur local. Les polices auto-hébergées sont plus efficaces. Moins de recherches DNS sont nécessaires et vous pouvez limiter le chargement de WOFF2, que tous les navigateurs modernes prennent en charge. Les anciens navigateurs (IE) peuvent revenir à la police du système d'exploitation.
6. Considérez les polices du système d'exploitation : cette police Web 500K peut sembler superbe, mais est-ce que quelqu'un remarquera si vous passez au domaine public Helvetica, Arial, Georgia ou Verdana ? Les polices sécurisées pour le système d'exploitation ou le Web sont un moyen simple d'améliorer la productivité.

Utilisation de l'option de téléchargement de police appropriée

Les polices Web peuvent prendre quelques secondes à charger et à traiter. Vous avez besoin:

1. Afficher un flash de texte sans style (FOUT): la première police de secours disponible est utilisée en premier, mais elle est remplacée lorsque la police Web est prête.
2. Afficher le flash de texte invisible (FOIT): Le texte ne s'affiche pas tant que la police Web n'est pas prête. Il s'agit du processus par défaut dans les navigateurs modernes, qui attendent généralement trois secondes avant de revenir à une police de secours.
   Ni l'un ni l'autre n'est parfait.

La propriété CSS font-display et le paramètre Google Font & display= peuvent choisir une alternative :

• auto : comportement du navigateur par défaut (généralement FOIT).
• bloc : Effectivement FOIT. Le texte est invisible jusqu'à trois secondes. Il n'y a pas de substitution de police, mais le texte peut apparaître après un certain temps.
• swap : Effectivement FOUT. La première solution de secours est utilisée jusqu'à ce que la police Web soit disponible. Le texte est immédiatement lisible, mais l'effet de remplacement de la police peut être gênant. Le Font Style Matcher peut être utilisé pour définir une solution de secours de taille similaire.
• repli : un compromis entre FOIT et FOUT. Le texte est invisible pendant une courte période (généralement 100 ms), puis la première solution de secours est utilisée jusqu'à ce que la police Web soit disponible.
• facultatif : similaire à la solution de secours, sauf qu'il n'y a pas de substitution de police. La police Web ne sera utilisée que si elle est disponible pendant la période initiale. La première vue de page affichera très probablement la police de secours, tandis que les vues de page suivantes utiliseront la police Web téléchargée et mise en cache.

L'utilisation du swap, de la sauvegarde ou de l'option peut fournir une amélioration notable des performances.

Optimisation du code JS et CSS en ligne

Sur Internet, il existe un assez grand nombre de services en ligne. Qui, en quelques minutes, sont capables de faire tout le travail de routine de compression des fichiers JavaScript et de style. Tous ont leurs propres algorithmes pour travailler avec du code. Dans le contexte d'une telle diversité, deux services les plus significatifs peuvent être distingués. Leur seuil de compression effectif est beaucoup plus élevé que celui des outils en ligne concurrents similaires. Examinons de plus près ces deux outils Web :

cssresizer.com
Efficacité de compression du 84% par rapport aux concurrents proches. La validité du code est préservée, même avec une compression importante. De cette façon, vous pouvez obtenir un excellent code optimisé. Travailler avec cet outil est intuitif et il existe plusieurs méthodes de compression :

• Maximum;
• vite;
• Décompression;

Vous pouvez compresser en :

• URL - adresse ;
• Téléchargement de fichiers;
• Saisie directe du code ;

Actualiser-sf.com

Une autre interface Web tout aussi puissante pour minifier JavaScript, CSS et HTML. L'outil utilise UglifyJS 2, Clean-CSS et HTML Minifier pour fonctionner. L'efficacité de compression dans ce cas atteint 85%, sans violations visibles de la validité du code. La compression peut être effectuée en saisissant directement le code dans la fenêtre de l'outil.

Minifier JS et CSS avec les plugins CMS Wordpress

Comme nous le savons tous, il a une distribution importante dans le monde. Selon les données de 2018, ce cms occupe une position de leader. Considérez quelques plugins d'optimisation populaires spécifiquement pour WordPress :

Plugin d'optimisation automatique

Plugin d'optimisation HTML, JS et CSS. C'est l'un des plugins les plus populaires pour accélérer les sites sur CMS Wordpress. Il dispose d'une interface de configuration simple et fonctionnelle. Le processus de compression se produit à la volée.

• Optimisation (HTML, JS, CSS) et mise en place du CDN.
• Suppression des emojis, des polices Google, des chaînes de requête des ressources statiques.
• Possibilité d'optimiser les images.

Plugin Webcraftic Clearfy

Pas aussi vieux que le plugin précédent. Mais il est également demandé et populaire parmi des concurrents similaires. Webcraftic Clearfy - possède une interface de configuration plutôt complexe. Se compose d'une combinaison combinée de plugins, pour le meilleur résultat.

Les pages de paramètres sont divisées en sections de menu. Ainsi, il est possible d'optimiser des parties spécifiques du site, par exemple, HTML. Que peut faire ce plugin ?

• Optimisation (images, JS, CSS, HTML et scripts) ;
• Translittération cyrillique et suppression des doublons. Travailler avec les attributs alt et créer un fichier robots.txt approprié. Travailler avec les en-têtes de serveur et leurs réponses.
• Suppression des widgets WordPress non réclamés.
• Masquer la version de WordPress et supprimer les variables de requête des requêtes statiques. Masquer la connexion de l'auteur et la page de connexion de l'administrateur.
• Suppression globale ou nettoyage des commentaires. Enregistrer le contrôle dans les commentaires.
• Configuration de WordPress Pulse et du panneau d'administration supérieur.
• Contrôle des composants du plugin.

En conclusion, une certaine conclusion peut être tirée. Sur la base de ce qui précède, compresser js et css n'est pas si difficile. Grâce à ces actions, la vitesse de réponse de votre projet augmentera considérablement.

Lire cet article :

• Optimisation des performances des pages Web
• Optimiser le CSS pour la vitesse du site - 9 façons

Merci d'avoir lu : SEO HELPER | NICOLA.TOP