Bersihkan Bagian HEAD Tema WordPress & File JS & CSS yang Tidak Dibutuhkan

Diterbitkan: 2018-09-04

Iklan inti WordPress cukup banyak kode di bagian head HTML situs apakah Anda menginginkannya atau tidak. Kode itu jauh dari tidak berguna dan memiliki tujuan di sebagian besar situs. Namun, jika Anda seorang penggila kode bersih atau menggunakan WordPress untuk memberi daya pada SaaS, Anda pasti ingin membersihkan HTML. Seperti kebanyakan hal di WP, ini hanya masalah menghapus beberapa tindakan dan filter.

#WordPress adalah platform hebat untuk membangun situs #SaaS. Tetapi sebelum Anda melakukannya, itu membutuhkan sedikit pembersihan.

KLIK UNTUK TWEET

Mengapa saya menghapus tag tersebut di file HEAD, CSS, atau JS?

Ada beberapa alasan. Beberapa orang suka menyimpan kode dan situs mereka serapi mungkin. Mengapa memiliki sebaris kode dalam HTML jika Anda tahu Anda tidak membutuhkannya dan tahu cara menghapusnya. Tidak ada alasan apa pun. Hal yang sama berlaku untuk file CSS dan JS tambahan. Jika Anda tidak menggunakan emoji di situs Anda, mengapa Anda menyertakan JS itu di setiap halaman?

Lalu ada keamanan. Ada beberapa bagian HTML yang secara otomatis ditambahkan oleh WordPress untuk menunjukkan URL yang telah dieksploitasi di masa lalu. Saya harus menekankan bahwa URL ini (khususnya titik akhir XML RPC) bukanlah rahasia. Mereka harus publik. Tapi, mengubahnya menjadi sesuatu yang biasa, dan menyembunyikannya adalah praktik yang dikenal. Dalam hal ini, jelas Anda tidak menginginkan URL tersebut di HTML Anda.

Kecepatan juga merupakan alasan yang sah untuk membersihkan HTML. Meskipun saya harus mengatakan bahwa saya tidak yakin berapa banyak yang akan Anda peroleh dengan menghapus beberapa ratus karakter dari HTML, ini adalah langkah ke arah yang benar. Menghilangkan file JS dan CSS yang tidak dibutuhkan akan menghemat beberapa permintaan HTTP, dan itu adalah sesuatu yang harus Anda fokuskan pada pengoptimalan Anda. Tidy Repo baru-baru ini menguji 100+ tema WordPress untuk kecepatan, dan jumlah permintaan membuat dampak signifikan pada kecepatan situs secara keseluruhan.

Memiliki kode HTML yang bersih memastikan Anda mengetahui apa yang terjadi di situs Anda dan merupakan awal yang baik untuk mengoptimalkan kecepatan situs.

Terakhir, namun tidak sedikit, alasan dan alasan mengapa kami memiliki kode ini adalah SaaSes yang didukung WordPress. Saat Anda membangun SaaS, Anda ingin kontrol penuh atas apa yang ada di HTML Anda, dan sebagian besar hal yang ditambahkan WP ke HTML dengan sendirinya bukanlah sesuatu yang akan Anda gunakan. Jadi, demi semua alasan yang disebutkan di atas – kami membersihkan barang-barang sebanyak mungkin. Itu memberi kami platform yang hebat dan ramping untuk membangun solusi khusus, sambil tetap mempertahankan 99% fungsionalitas inti WP yang digunakan untuk memberi daya pada SaaS.

Dapatkah saya menghapus hal-hal ini dengan aman? Bukankah mereka memiliki tujuan?

Ya, mereka memang memiliki tujuan, tetapi hanya dalam situasi tertentu. Di situs web "rata-rata" beberapa tag link tambahan di header tidak menjadi masalah, dan semuanya membuat operasi dan integrasi tertentu lebih mudah. Namun, mereka tidak penting untuk berfungsinya situs mana pun dan tentu saja bukan untuk SaaS.

Mari kita bersihkan beberapa kode

Anda dapat menguji kode di bawah ini dengan tema apa pun. Default 2017 akan baik-baik saja. Namun, jika Anda menggunakan tema WordPress “normal” (dan beberapa plugin di atasnya), Anda tidak akan pernah tahu siapa yang menambahkan kode – inti WP, tema, atau plugin. Saya sarankan Anda mengatur ulang situs Anda untuk menghapus semua plugin dan kemudian menggunakan tema yang hanya memiliki wp_head() dan wp_footer() di dalamnya. Berikut tampilan index.php dan inilah keseluruhan tema pengujian yang dapat Anda gunakan untuk pengujian.

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

Jika Anda mengaktifkan tema pengujian kami dan membuka sumber halaman depan, Anda akan melihat lebih banyak kode daripada yang terlihat di index.php di atas. Itu yang akan kita bersihkan. Tempatkan kode di bawah ini di functions.php tema. Jika Anda tidak ingin menghapus/menonaktifkan fitur, beri komentar di baris yang menyebutkannya.

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

apa melakukan apa

rsd_link action bertanggung jawab untuk menampilkan tautan penemuan yang sangat sederhana sementara wp_generator menunjukkan versi WP dan dihapus oleh hampir semua plugin keamanan yang pernah ditulis untuk WP. Dua tindakan feed_links menambahkan berbagai tautan ke beberapa umpan RSS. Berbagai tindakan _rel_link menambahkan tautan ke kiriman agar lebih mudah diakses dan ditemukan oleh berbagai layanan. Kecuali Anda menggunakan Windows Live Writer, Anda benar-benar tidak memerlukan tindakan wlwmanifest_link . Kami tidak membutuhkan amoji sehingga print_emoji_detection_script dapat digunakan, dan hal yang sama berlaku untuk berbagai tautan oembed termasuk dukungan untuk oembed di REST API. Menghapus tindakan oembed_dataparse akan memastikan WP tidak mengacaukan tautan apa pun di pos Anda dan tidak mengubahnya menjadi media kaya apa pun melalui oembed. Filter terakhir show_admin_bar akan mencegah bilah admin WP ditampilkan di front-end Anda terlepas dari pengaturan per akun.

Hanya ada beberapa hal di #WordPress yang tidak dapat dimodifikasi dengan tindakan & filter. Untungnya mengontrol konten HEAD bukan salah satunya.

KLIK UNTUK TWEET

Fleksibilitas WordPress sangat bagus

Banyak artikel beredar dengan judul seperti "Cara menghapus sampah dari header WP." Ini bukan sampah. Ini adalah hal-hal yang memberikan kekuatan besar untuk WordPress secara langsung. Banyak orang menghargai itu, dan mereka tidak perlu menghabiskan waktu berjam-jam untuk menyiapkan segalanya. Di sisi lain, pembersihan hanyalah masalah menghilangkan beberapa tindakan. Anda memiliki kendali penuh atas apa yang dimasukkan ke dalam HTML Anda dan dapat dengan mudah menggunakan WordPress untuk mendukung situs non-konten seperti SaaSes.