Nettoyer la section HEAD du thème WordPress et les fichiers JS et CSS inutiles

Publié: 2018-09-04

Le noyau de WordPress annonce beaucoup de code dans la section d'en- head HTML du site, que vous le vouliez ou non. Ce code est loin d'être inutile et sert à quelque chose sur la plupart des sites. Cependant, si vous êtes un maniaque du code propre ou si vous utilisez WordPress pour alimenter un SaaS, vous voudrez nettoyer le HTML. Comme pour la plupart des choses dans WP, il suffit de supprimer quelques actions et filtres.

#WordPress est une excellente plateforme pour créer des sites #SaaS. Mais avant cela, il faut un peu de nettoyage.

CLIQUEZ POUR TWEETER

Pourquoi supprimer ces balises dans les fichiers HEAD, CSS ou JS ?

Il y a plusieurs raisons. Certaines personnes aiment garder leur code et leurs sites aussi ordonnés que possible. Pourquoi avoir une ligne de code en HTML si vous savez que vous n'en avez pas besoin et que vous savez comment la supprimer. Aucune raison quoi que ce soit. Il en va de même pour les fichiers CSS et JS supplémentaires. Si vous n'utilisez pas d'emojis sur votre site, pourquoi incluriez-vous ce JS sur chaque page ?

Ensuite, il y a la sécurité. Il y a quelques morceaux de HTML que WordPress ajoute automatiquement pour afficher les URL qui ont été exploitées dans le passé. Je dois souligner que ces URL (point de terminaison XML RPC en particulier) ne sont pas un secret. Ils devraient être publics. Mais les changer en quelque chose de personnalisé et les cacher est une pratique connue. Dans ce cas, il est évident que vous ne voulez pas ces URL dans votre code HTML.

La vitesse est également une raison valable pour nettoyer le HTML. Bien que je doive dire que je ne suis pas sûr de ce que vous gagnerez en supprimant quelques centaines de caractères du HTML, c'est un pas dans la bonne direction. L'élimination des fichiers JS et CSS inutiles vous fera économiser quelques requêtes HTTP, et c'est quelque chose sur lequel vous devriez concentrer votre optimisation. Tidy Repo a récemment testé plus de 100 thèmes WordPress pour la vitesse, et le nombre de demandes a un impact significatif sur la vitesse globale du site.

Avoir un code HTML propre garantit que vous savez ce qui se passe sur votre site et est un bon début pour optimiser la vitesse du site.

La dernière raison, mais non la moindre, et la raison pour laquelle nous avons ce code à portée de main sont les SaaS alimentés par WordPress. Lorsque vous créez un SaaS, vous voulez un contrôle total sur le contenu de votre HTML, et la majorité des éléments que WP ajoute au HTML ne sont pas quelque chose que vous utiliserez. Donc, pour toutes les raisons indiquées ci-dessus, nous nettoyons les choses autant que possible. Cela nous donne une excellente plate-forme allégée pour créer des solutions personnalisées, tout en conservant 99% des fonctionnalités de base de WP utilisées pour alimenter le SaaS.

Puis-je supprimer ces éléments en toute sécurité ? Ne servent-ils pas à quelque chose ?

Oui, ils servent un but, mais seulement dans certaines situations. Sur un site Web "moyen", quelques balises de link supplémentaires dans l'en-tête ne sont pas un problème, et elles facilitent toutes certaines opérations et intégrations. Mais, ils ne sont pas cruciaux pour le fonctionnement d'un site et certainement pas pour un SaaS.

Nettoyons un peu de code

Vous pouvez tester le code ci-dessous avec n'importe quel thème. Le 2017 par défaut fera très bien l'affaire. Cependant, si vous utilisez des thèmes WordPress "normaux" (et quelques plugins en plus), vous ne pouvez jamais savoir qui a ajouté le code - noyau WP, thème ou plugin. Je vous suggère de réinitialiser votre site pour supprimer tous les plugins, puis d'utiliser un thème qui ne contient que wp_head() et wp_footer() . Voici à quoi ressemble cet index.php et voici le thème de test complet que vous pouvez utiliser pour les tests.

<!DOCTYPE html>
<html>
<head>
  <?php
    wp_head();
  ?>
</head>
<body>
  <h1>The Most Basic WP Theme</h1>
  <?php
    wp_footer();
  ?>
</body>
</html>

Si vous activez notre thème de test et ouvrez la source de la page d'accueil, vous remarquerez beaucoup plus de code qu'il n'est visible dans l'index.php ci-dessus. C'est ce que nous allons nettoyer. Placez le code ci-dessous dans le fichier functions.php du thème. Si vous ne souhaitez pas supprimer/désactiver une fonctionnalité, commentez la ligne qui la mentionne.

add_action('after_setup_theme', 'cleanup');

function cleanup() {
  remove_action('wp_head', 'rsd_link');
  remove_action('wp_head', 'wp_generator');
  remove_action('wp_head', 'feed_links', 2); 
  remove_action('wp_head', 'feed_links_extra', 3);
  remove_action('wp_head', 'index_rel_link');
  remove_action('wp_head', 'wlwmanifest_link');
  remove_action('wp_head', 'start_post_rel_link', 10, 0);
  remove_action('wp_head', 'parent_post_rel_link', 10, 0);
  remove_action('wp_head', 'adjacent_posts_rel_link', 10, 0);
  remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);
  remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0);
  remove_action('wp_head', 'print_emoji_detection_script', 7);
  remove_action('wp_head', 'rel_canonical');
  remove_action('wp_head', 'rel_alternate');
  remove_action('wp_head', 'wp_oembed_add_discovery_links');
  remove_action('wp_head', 'wp_oembed_add_host_js');
  remove_action('wp_head', 'rest_output_link_wp_head');
  
  remove_action('rest_api_init', 'wp_oembed_register_route');
  remove_action('wp_print_styles', 'print_emoji_styles');
  
  remove_filter('oembed_dataparse', 'wp_filter_oembed_result', 10);
  remove_filter('pre_oembed_result', 'wp_filter_pre_oembed_result', 10);
  
  add_filter('embed_oembed_discover', '__return_false');
  add_filter('show_admin_bar', '__return_false');
}

Que fait quoi

L'action rsd_link est responsable de l'affichage du lien de découverte très simple tandis que wp_generator affiche la version WP et est supprimée par pratiquement tous les plugins de sécurité jamais écrits pour WP. Les deux actions feed_links ajoutent divers liens vers plusieurs flux RSS. Diverses actions _rel_link ajoutent des liens vers les publications afin qu'elles soient plus accessibles et plus facilement trouvées par divers services. À moins que vous n'utilisiez Windows Live Writer, vous n'avez vraiment pas besoin de l'action wlwmanifest_link . Nous n'avons pas besoin d'amojis, donc print_emoji_detection_script peut fonctionner, et il en va de même pour divers liens oembed , y compris la prise en charge d'oembed dans l'API REST. La suppression de l'action oembed_dataparse garantira que WP ne perturbe aucun lien dans vos publications et ne les transforme pas en média enrichi via oembed. Le dernier filtre show_admin_bar empêchera la barre d'administration WP de s'afficher sur votre front-end, quels que soient les paramètres par compte.

Il n'y a que quelques éléments dans #WordPress qui ne peuvent pas être modifiés avec des actions et des filtres. Heureusement, le contrôle du contenu HEAD n'en fait pas partie.

CLIQUEZ POUR TWEETER

La flexibilité de WordPress est excellente

De nombreux articles circulent avec des titres tels que "Comment supprimer les fichiers indésirables de l'en-tête WP". Ce n'est pas de la camelote. C'est quelque chose qui donne une grande puissance à WordPress dès la sortie de la boîte. Beaucoup de gens apprécient cela, et ils n'ont pas à passer des heures à configurer les choses. D'autre part, le nettoyage consiste simplement à supprimer quelques actions. Vous avez un contrôle total sur ce qui est mis dans votre HTML et pouvez facilement utiliser WordPress pour alimenter des sites sans contenu tels que SaaSes.