JS SEO : Comment optimiser JavaScript pour un rang élevé dans les résultats de recherche

JavaScript est un langage de script développé par Sun Microsystems. JavaScript est désormais un langage de programmation standard utilisé dans les navigateurs Web pour créer des pages Web interactives. JavaScript est le plus souvent utilisé pour ajouter de l'interactivité aux sites Web. Il est souvent intégré dans des documents HTML pour fournir un comportement dynamique, tel que la modification du contenu (par exemple, du texte) affiché sur une page de site Web en fonction des actions de l'utilisateur.

La première version de JavaScript est sortie en 1995 et s'appelait LiveScript. En 1997, Netscape a introduit sa propre implémentation de JavaScript appelée JavaScript 1.0. Depuis lors, JavaScript a été largement adopté et est désormais un standard de facto pour les scripts côté client.

Le référencement est une partie importante de tout site Web, et c'est une bonne idée d'optimiser votre JavaScript pour un rang élevé dans les résultats de recherche. Vous pouvez le faire en minimisant votre JavaScript, en différant son chargement, en réduisant le nombre de requêtes HTTP, en supprimant les balises de script inutiles de la page (et des fichiers individuels) et en consolidant les fichiers dans un seul fichier s'ils sont suffisamment petits pour le faire, et plus.

Minifier JS et CSS.

Minifier votre JS et CSS est un bon moyen de se débarrasser de ces octets supplémentaires. Cela peut être fait avec un minificateur, qui supprimera les caractères inutiles de votre code source sans affecter sa fonctionnalité.

Le processus de minification fonctionne en supprimant les espaces blancs et les commentaires, ainsi qu'en raccourcissant les noms de variables lorsque cela est possible. Par exemple:

 var $div = document.getElementById("myDiv");

 var v_d__e___ = document .getElementById( "m_i_d" );

Il est important de noter que le processus ne modifie pas la fonctionnalité de votre code ; en fait, vous pouvez toujours exécuter cette version via un interpréteur si nécessaire (bien que nous ne le recommandions pas).

Différer le chargement de JavaScript

Dans le code HTML, vous pouvez utiliser la propriété defer de la balise pour indiquer au navigateur de charger votre script de manière asynchrone. Ceci est utile pour les scripts qui ne sont pas essentiels au rendu initial d'une page, mais qui l'améliorent plutôt avec des fonctionnalités et des fonctionnalités supplémentaires.

Différer ces scripts leur permet d'être chargés en dehors de la priorité de téléchargement normale, de sorte qu'ils n'empêchent pas le contenu de s'afficher immédiatement. Cependant, si vous essayez d'utiliser cette méthode pour les principaux scripts qui ont besoin de toutes leurs fonctionnalités immédiatement, comme le menu de navigation principal de votre site, cela ne fonctionnera pas correctement car ceux-ci nécessitent des temps de chargement rapides.

L'inconvénient de l'implémentation du report est qu'il n'est pas pris en charge par tous les navigateurs ; il ne fonctionne que dans Firefox 3+ (et versions ultérieures), Internet Explorer 10+ (et versions ultérieures), Safari 5+ et Chrome 14+.

Réduire le nombre de requêtes HTTP

Une façon de réduire le nombre de requêtes HTTP consiste à combiner tous vos fichiers CSS et JavaScript dans un seul fichier. Si vous avez plus de quelques lignes de code, cela peut être d'une grande aide pour réduire le poids de votre page. Si vous avez de nombreux petits fichiers, cependant, les combiner en un seul gros fichier n'est peut-être pas une option pour vous, car il faudra plus de temps au navigateur de l'utilisateur pour tout télécharger en une seule fois.

Supprimez les JavaScript, CSS et HTML inutiles

Heureusement, vous n'avez pas besoin d'être un maître codeur pour optimiser votre JavaScript pour la recherche. Il suffit de suivre quelques règles simples :

1. Supprimez les CSS inutilisés.
2. Supprimez le code HTML inutilisé.
3. Supprimez le JavaScript inutilisé.
4. Supprimez les commentaires inutiles et les espaces blancs du code (par exemple, "//" ou "/* */").
5. Supprimez les sauts de ligne inutiles, les points-virgules, les parenthèses, les accolades et les virgules dans le fichier JavaScript afin qu'ils ne cassent rien d'autre dans votre projet lorsqu'il est minifié par des outils tels que Google Closure Compiler ou UglifyJS 2 sur des serveurs de construction tels que le serveur Jenkins CI ou TravisCI serveur/etc…

Consolider les fichiers.

C'est une bonne idée de regrouper vos fichiers JavaScript dans un seul fichier. Cela peut être fait avec un système de construction comme Grunt ou Gulp, qui vous permet d'utiliser des fonctions comme la concaténation et la minification. Si vous ne souhaitez pas en savoir plus sur les systèmes de construction, de nombreux services le feront automatiquement pour vous.

L'un des moyens les plus simples consiste à utiliser Cloudflare (forfait gratuit disponible). Téléchargez simplement tous vos fichiers via leur interface, puis utilisez l'option "minifier" sous leur onglet Paramètres.

Ils vous donneront une URL personnalisée pour chaque fichier sur leurs serveurs, qui minimise ensuite tous ces fichiers avant de les renvoyer au navigateur de votre visiteur. Cela les rend beaucoup plus rapides car ils n'ont qu'une seule demande de Cloudflare au lieu de plusieurs demandes de différents domaines sur le Web.

Une autre option est JSPACK (payant), qui est similaire mais offre plus de fonctionnalités et de contrôle sur la quantité exacte de code compressé/supprimé afin d'obtenir de meilleurs résultats de performance d'optimisation que d'autres outils de compression fourniraient par défaut en raison de besoins spécifiquement ciblés. situations spécifiques où certaines applications peuvent nécessiter l'accès à certaines données contenues dans des fichiers JavaScript contenus dans une structure de répertoires spécifiée située ailleurs entièrement sur Internet ...

De plus, un logo personnalisé et des graphiques personnalisés peuvent être créés et placés dans votre site Web / application HTML5 pour lui donner ce petit plus de piquant qui garantira que les gens se souviendront de vous.

Titre et description !

Les pages écrites en JavaScript doivent avoir plusieurs des mêmes balises méta SEO que les pages écrites en HTML et CSS. Le titre et la description sont des éléments essentiels d'une stratégie de référencement efficace pour les balises méta.

Les navigateurs Web afficheront le méta-élément SEO du titre, et les moteurs de recherche utiliseront normalement ces informations pour créer des titres pour les pages qu'ils ont indexées. Même s'il n'est pas affiché dans les navigateurs Web, l'élément méta description SEO peut être utilisé par les moteurs de recherche pour générer des extraits de texte ou des descriptions pour les pages qui ont été indexées.

Il n'y a aucun problème à définir les balises méta SEO de titre et de description à l'aide de JavaScript, car il s'agit d'une méthode parfaitement valide.

Selon Google, il est même possible d'utiliser JavaScript pour modifier ces deux balises méta SEO. L'essentiel est que le titre et la description meta SEO meta doivent être inclus sur chaque page, y compris celles qui ont été écrites principalement en JavaScript.

Débarrassez-vous des styles de codage par virgule en premier et autres.

Tout d'abord, éliminons cela : veuillez arrêter les styles de codage par virgule en premier. Ils sont une relique des temps anciens où vous pouviez utiliser des virgules en JavaScript pour aligner les déclarations de variables et les listes de paramètres. Ce n'est plus valable, et cela n'aurait jamais dû être légal en premier lieu !

Alors, comment savez-vous si votre code utilise ce style ? C'est facile à dire : recherchez simplement plusieurs instructions sur la même ligne séparées par des virgules (ou des blancs). Voir un exemple ci-dessous :

 var x = 1; var y = 2; var z = 3;

Si votre JavaScript ressemble à ceci, ou pire encore, s'il a des lignes vides entre chaque instruction, il a besoin d'un sérieux travail ! Heureusement, résoudre ces problèmes n'est pas trop difficile une fois que vous savez ce qu'ils sont et où les rechercher.

Chargez JavaScript à partir du bas du corps (ou du pied de page).

N'oubliez pas que JavaScript doit être chargé à partir du bas du corps (ou du pied de page) et CSS à partir du haut.

En effet, les moteurs de recherche explorent vos pages Web en commençant par le haut et en descendant, ils ont donc tendance à ignorer tout ce qu'ils voient après avoir atteint quelque chose comme des fichiers JavaScript ou CSS.

Vous n'avez pas à vous en soucier si vous utilisez des techniques de chargement asynchrones telles qu'Ajax ou des scripts différés, car ces méthodes chargent les fichiers en parallèle tout en permettant l'indexation.

Mettez CSS en haut et JavaScript en bas.

L'un des moyens les plus simples d'optimiser votre page pour les moteurs de recherche consiste à placer CSS en haut et JavaScript en bas. En effet, les navigateurs chargeront CSS avant JavaScript. Pour ce faire, vous pouvez ajouter une balise à votre fichier d'index qui pointe vers votre feuille de style, puis ajouter une autre balise qui référence votre fichier JavaScript.

La raison pour laquelle c'est important est que si quelqu'un a désactivé JS sur son navigateur, il ne pourra pas du tout utiliser le site à moins qu'il ne soit codé correctement, ce qui signifie qu'il faut mettre le CSS en premier !

Compressez les composants avec gzip.

Gzip est un algorithme de compression qui réduit la taille des fichiers. Il peut être utilisé à la fois en JavaScript et en CSS, vous pouvez donc l'utiliser pour tous les composants que vous utilisez.

Vous devez compresser votre code avant de le télécharger sur le CDN ou le fournisseur d'hébergement. La réduction Gzip signifie que vous n'aurez pas à télécharger plus d'octets que ce qui est nécessaire lorsqu'un utilisateur accède à votre page.

La prise en charge de Gzip est disponible dans tous les navigateurs modernes, il vaut donc la peine d'ajouter gzip aux deux extrémités : côté navigateur et côté serveur (NodeJS).

Pour compresser votre contenu, vous devez utiliser la compression basée sur gzip. Vous pouvez utiliser cet outil pour vérifier si les fichiers ont été compressés correctement.

Évitez les expressions CSS.

Les expressions CSS sont une fonctionnalité introduite dans CSS3 qui vous permet d'utiliser JavaScript dans vos feuilles de style. Vous pouvez les utiliser pour modifier dynamiquement la valeur d'une propriété ou même itérer sur un tableau de valeurs.

Mais voici pourquoi vous ne devriez pas utiliser d'expressions CSS : elles sont difficiles à optimiser et rendent plus difficile pour les navigateurs de mettre en cache votre feuille de style (ce qui est mauvais). De plus, ils peuvent provoquer un comportement inattendu sur les anciens navigateurs qui ne les prennent pas en charge. Évitez donc de les utiliser à tout prix !

Derniers mots

L'utilisation de JavaScript de manière à optimiser la recherche est un excellent moyen d'obtenir un classement élevé dans les résultats de recherche. Il est important de se rappeler, cependant, que tous les utilisateurs n'ont pas activé JavaScript ou la même quantité de bande passante disponible lorsqu'ils naviguent sur votre site.

Ces limitations peuvent affecter les performances de votre site Web dans les classements de recherche si elles ne sont pas prises en compte lors de l'optimisation du contenu JavaScript à des fins de référencement, comme tout autre type de contenu sur votre site serait traité par l'algorithme de Google.