Oczyść sekcję HEAD motywu WordPress i niepotrzebne pliki JS i CSS

Opublikowany: 2018-09-04

Reklamy rdzenia WordPress dość dużo kodu w sekcji head HTML witryny, czy tego chcesz, czy nie. Ten kod nie jest bezużyteczny i służy celowi na większości witryn. Jeśli jednak jesteś maniakiem czystego kodu lub używasz WordPressa do zasilania SaaS, będziesz chciał wyczyścić HTML. Jak w przypadku większości rzeczy w WP, to tylko kwestia usunięcia kilku akcji i filtrów.

#WordPress to świetna platforma do tworzenia witryn #SaaS. Ale zanim to zrobisz, wymaga to trochę czyszczenia.

KLIKNIJ, ABY TWEETOWAĆ

Dlaczego miałbym usuwać te tagi w plikach HEAD, CSS lub JS?

Powodów jest kilka. Niektórzy ludzie lubią utrzymywać swój kod i witryny tak uporządkowane, jak to tylko możliwe. Po co mieć wiersz kodu w HTML, jeśli wiesz, że go nie potrzebujesz i wiesz, jak go usunąć. Bez powodu. To samo dotyczy dodatkowych plików CSS i JS. Jeśli nie używasz emotikonów w swojej witrynie, dlaczego miałbyś umieszczać ten kod JS na każdej stronie?

Potem jest bezpieczeństwo. Istnieje kilka fragmentów kodu HTML, które WordPress automatycznie dodaje, pokazując adresy URL, które były wykorzystywane w przeszłości. Muszę podkreślić, że te adresy URL (w szczególności punkt końcowy XML RPC) nie są tajemnicą. Powinny być publiczne. Ale zmiana ich na coś niestandardowego i ukrywanie ich jest znaną praktyką. W takim przypadku oczywiste jest, że nie chcesz tych adresów URL w swoim kodzie HTML.

Szybkość jest również ważnym powodem oczyszczenia kodu HTML. Choć muszę przyznać, że nie jestem pewien, ile zyskasz usuwając kilkaset znaków z HTML, jest to krok we właściwym kierunku. Wyeliminowanie zbędnych plików JS i CSS pozwoli Ci zaoszczędzić kilka żądań HTTP i to jest coś, na czym powinieneś skupić się na optymalizacji. Tidy Repo niedawno przetestowało ponad 100 motywów WordPress pod kątem szybkości, a liczba żądań ma znaczący wpływ na ogólną szybkość witryny.

Posiadanie czystego kodu HTML gwarantuje, że wiesz, co dzieje się w Twojej witrynie i jest świetnym początkiem optymalizacji szybkości witryny.

Ostatni, ale nie mniej ważny powód i powód, dla którego mamy ten kod pod ręką, to SaaSes oparte na WordPressie. Kiedy budujesz SaaS, chcesz mieć pełną kontrolę nad tym, co jest w Twoim HTML, a większość rzeczy, które WP dodaje do HTML, nie jest czymś, z czego będziesz korzystać. Tak więc, ze względu na wszystkie wymienione powyżej powody – sprzątamy wszystko tak bardzo, jak to możliwe. To daje nam świetną, szczupłą platformę do budowania niestandardowych rozwiązań, przy jednoczesnym zachowaniu 99% podstawowych funkcji WP, które są używane do zasilania SaaS.

Czy mogę bezpiecznie usunąć te rzeczy? Czy nie służą celowi?

Tak, służą celowi, ale tylko w określonych sytuacjach. Na „przeciętnej” stronie kilka dodatkowych tagów link w nagłówku nie stanowi problemu, a wszystkie ułatwiają pewne operacje i integracje. Ale nie są one kluczowe dla funkcjonowania jakiejkolwiek witryny, a już na pewno nie dla SaaS.

Posprzątajmy trochę kodu

Możesz przetestować poniższy kod z dowolnym motywem. Domyślny 2017 będzie dobrze. Jeśli jednak używasz „normalnych” motywów WordPress (i niektórych wtyczek), nigdy nie wiadomo, kto dodał kod – rdzeń WP, motyw lub wtyczka. Proponuję zresetować witrynę, aby usunąć wszystkie wtyczki, a następnie użyć motywu, który zawiera tylko wp_head() i wp_footer() . Oto jak wygląda ten index.php i oto cały motyw testowy, którego możesz użyć do testowania.

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

Jeśli aktywujesz nasz motyw testowy i otworzysz źródło na pierwszej stronie, zauważysz o wiele więcej kodu niż widać w pliku index.php powyżej. To właśnie będziemy sprzątać. Umieść poniższy kod w pliku functions.php motywu. Jeśli nie chcesz usuwać/wyłączać funkcji, skomentuj wiersz, w którym o niej mowa.

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

Co oznacza co?

Akcja rsd_link jest odpowiedzialna za wyświetlanie naprawdę prostego linku do wykrywania, podczas gdy wp_generator pokazuje wersję WP i jest usuwana przez praktycznie każdą wtyczkę bezpieczeństwa, jaką kiedykolwiek napisano dla WP. Dwie akcje feed_links dodają różne linki do kilku kanałów RSS. Różne akcje _rel_link dodają linki do postów, dzięki czemu są one bardziej dostępne i łatwiejsze do znalezienia przez różne serwisy. Jeśli nie używasz programu Windows Live Writer, naprawdę nie potrzebujesz akcji wlwmanifest_link . Nie potrzebujemy amojis, więc print_emoji_detection_script może iść, to samo dotyczy różnych linków oembed , w tym obsługi oembed w REST API. Usunięcie akcji oembed_dataparse sprawi, że WP nie będzie zadzierać z żadnymi linkami w twoich postach i nie zamienia ich w żadne multimedia za pośrednictwem oembed. Ostatni filtr show_admin_bar uniemożliwi wyświetlanie paska administracyjnego WP na Twoim interfejsie, niezależnie od ustawień konta.

W #WordPress jest tylko kilka rzeczy, których nie można modyfikować za pomocą akcji i filtrów. Na szczęście kontrolowanie zawartości HEAD nie jest jednym z nich.

KLIKNIJ, ABY TWEETOWAĆ

Elastyczność WordPressa jest świetna

Wiele artykułów krąży wokół tytułów, takich jak „Jak usunąć śmieci z nagłówka WP”. To nie śmieci. To coś, co daje ogromną moc WordPressowi zaraz po wyjęciu z pudełka. Wiele osób to docenia i nie muszą spędzać godzin na ustawianiu rzeczy. Z drugiej strony czyszczenie to tylko kwestia usunięcia kilku czynności. Masz pełną kontrolę nad tym, co jest umieszczane w Twoim HTML i możesz z łatwością używać WordPressa do obsługi witryn niezawierających treści, takich jak SaaSes.