Bereinigen Sie den HEAD-Abschnitt des WordPress-Themes und nicht benötigte JS- und CSS-Dateien

Veröffentlicht: 2018-09-04

Der WordPress-Kern zeigt ziemlich viel Code im HTML- head -Bereich der Website an, ob Sie es wollen oder nicht. Dieser Code ist alles andere als nutzlos und erfüllt auf den meisten Websites einen Zweck. Wenn Sie jedoch ein Clean-Code-Freak sind oder WordPress verwenden, um ein SaaS zu betreiben, sollten Sie den HTML-Code bereinigen. Wie bei den meisten Dingen in WP müssen nur ein paar Aktionen und Filter entfernt werden.

#WordPress ist eine großartige Plattform zum Erstellen von #SaaS-Sites. Aber bevor Sie das tun, muss es ein wenig gereinigt werden.

KLICKEN, UM ZU TWEETEN

Warum sollte ich diese Tags in HEAD-, CSS- oder JS-Dateien entfernen?

Es gibt ein paar Gründe. Einige Leute möchten ihren Code und ihre Websites so ordentlich wie möglich halten. Warum eine Codezeile in HTML haben, wenn Sie wissen, dass Sie sie nicht brauchen und wissen, wie Sie sie entfernen können. Kein Grund, was auch immer. Gleiches gilt für zusätzliche CSS- und JS-Dateien. Wenn Sie keine Emojis auf Ihrer Website verwenden, warum sollten Sie dieses JS auf jeder Seite einfügen?

Dann gibt es Sicherheit. Es gibt ein paar HTML-Teile, die WordPress automatisch hinzufügt, die URLs zeigen, die in der Vergangenheit ausgenutzt wurden. Ich muss betonen, dass diese URLs (insbesondere XML-RPC-Endpunkte) kein Geheimnis sind. Sie sollten öffentlich sein. Aber es ist eine bekannte Praxis, sie in etwas Benutzerdefiniertes zu ändern und sie zu verbergen. In diesem Fall ist es offensichtlich, dass Sie diese URLs nicht in Ihrem HTML haben möchten.

Geschwindigkeit ist auch ein triftiger Grund für die Bereinigung von HTML. Obwohl ich sagen muss, dass ich nicht sicher bin, wie viel Sie gewinnen werden, wenn Sie ein paar hundert Zeichen aus HTML entfernen, ist es ein Schritt in die richtige Richtung. Das Eliminieren nicht benötigter JS- und CSS-Dateien erspart Ihnen einige HTTP-Anfragen, und darauf sollten Sie sich bei Ihrer Optimierung konzentrieren. Tidy Repo hat kürzlich mehr als 100 WordPress-Themes auf Geschwindigkeit getestet, und die Anzahl der Anfragen hat einen erheblichen Einfluss auf die Gesamtgeschwindigkeit der Website.

Ein sauberer HTML-Code stellt sicher, dass Sie wissen, was auf Ihrer Website vor sich geht, und ist ein guter Anfang, um die Geschwindigkeit der Website zu optimieren.

Last, but not least, Grund und der Grund, warum wir diesen Code zur Hand haben, sind WordPress-basierte SaaSs. Wenn Sie ein SaaS erstellen, möchten Sie die vollständige Kontrolle darüber haben, was in Ihrem HTML enthalten ist, und die meisten Dinge, die WP selbst zu HTML hinzufügt, werden Sie nicht verwenden. Aus all den oben genannten Gründen räumen wir also so viel wie möglich auf. Das gibt uns eine großartige, schlanke Plattform, auf der wir benutzerdefinierte Lösungen aufbauen können, während gleichzeitig 99 % der Kernfunktionalität von WP beibehalten werden, die zum Betrieb von SaaS verwendet wird.

Kann ich diese Dinge sicher entfernen? Erfüllen sie keinen Zweck?

Ja, sie erfüllen einen Zweck, aber nur in bestimmten Situationen. Auf einer „durchschnittlichen“ Website sind ein paar zusätzliche link -Tags im Header kein Problem, und sie alle erleichtern bestimmte Operationen und Integrationen. Sie sind jedoch nicht entscheidend für das Funktionieren einer Website und schon gar nicht für ein SaaS.

Lassen Sie uns etwas Code bereinigen

Sie können den folgenden Code mit einem beliebigen Thema testen. Die Standardeinstellung 2017 reicht vollkommen aus. Wenn Sie jedoch „normale“ WordPress-Themes verwenden (und einige Plugins obendrein), können Sie nie wissen, wer den Code hinzugefügt hat – WP-Core, Theme oder ein Plugin. Ich schlage vor, dass Sie Ihre Website zurücksetzen, um alle Plugins zu entfernen, und dann ein Design verwenden, das nur wp_head() und wp_footer() . So sieht diese index.php aus und hier ist das gesamte Testthema, das Sie zum Testen verwenden können.

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

Wenn Sie unser Testthema aktivieren und den Quellcode der Startseite öffnen, werden Sie eine ganze Menge mehr Code bemerken, als in der index.php oben sichtbar ist. Das werden wir ausräumen. Fügen Sie den folgenden Code in die functions.php des Themas ein. Wenn Sie eine Funktion nicht entfernen/deaktivieren möchten, kommentieren Sie die Zeile aus, in der sie erwähnt wird.

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');
}

Was macht was

Die Aktion rsd_link ist für die Anzeige des wirklich einfachen Discovery-Links verantwortlich, während wp_generator die WP-Version anzeigt und von praktisch jedem Sicherheits-Plugin entfernt wird, das jemals für WP geschrieben wurde. Die beiden Aktionen feed_links fügen verschiedene Links zu mehreren RSS-Feeds hinzu. Verschiedene _rel_link Aktionen fügen Links zu Posts hinzu, damit sie leichter zugänglich sind und von verschiedenen Diensten leichter gefunden werden können. Sofern Sie nicht Windows Live Writer verwenden, benötigen Sie die Aktion wlwmanifest_link nicht wirklich. Wir brauchen keine Amojis, damit print_emoji_detection_script gehen kann, und dasselbe gilt für verschiedene oembed Links, einschließlich der Unterstützung für oembed in der REST-API. Durch das Entfernen der oembed_dataparse Aktion wird sichergestellt, dass WP keine Links in Ihren Beiträgen durcheinander bringt und sie nicht über oembed in Rich-Media umwandelt. Der letzte Filter show_admin_bar verhindert, dass die WP-Admin-Leiste auf Ihrem Front-End angezeigt wird, unabhängig von den Einstellungen pro Konto.

Es gibt nur wenige Dinge in #WordPress, die nicht mit Aktionen & Filtern modifiziert werden können. Zum Glück gehört die Kontrolle von HEAD-Inhalten nicht dazu.

KLICKEN, UM ZU TWEETEN

Die Flexibilität von WordPress ist großartig

Es kursieren viele Artikel mit Titeln wie „So entfernen Sie Junk aus dem WP-Header“. Es ist kein Schrott. Es ist Zeug, das WordPress sofort einsatzbereit macht. Viele Leute wissen das zu schätzen, und sie müssen nicht stundenlang alles einrichten. Auf der anderen Seite ist die Reinigung nur eine Frage des Entfernens einiger Aktionen. Sie haben die volle Kontrolle darüber, was in Ihren HTML-Code eingefügt wird, und können WordPress problemlos verwenden, um Nicht-Inhaltsseiten wie SaaSes zu betreiben.