ทำความสะอาด WordPress Theme HEAD Section & ไฟล์ JS & CSS ที่ไม่จำเป็น

เผยแพร่แล้ว: 2018-09-04

โฆษณาหลักของ WordPress มีโค้ดค่อนข้างมากในส่วน head HTML ของเว็บไซต์ ไม่ว่าคุณจะต้องการหรือไม่ก็ตาม รหัสนั้นไม่มีประโยชน์และมีประโยชน์สำหรับไซต์ส่วนใหญ่ อย่างไรก็ตาม หากคุณเป็นคนที่คลั่งไคล้โค้ดสะอาด หรือใช้ WordPress เพื่อขับเคลื่อน SaaS คุณจะต้องล้าง HTML เช่นเดียวกับสิ่งต่างๆ ส่วนใหญ่ใน WP การลบการกระทำและตัวกรองบางอย่างทำได้เพียงเท่านั้น

#WordPress เป็นแพลตฟอร์มที่ยอดเยี่ยมในการสร้างไซต์ #SaaS แต่ก่อนที่คุณจะทำอย่างนั้น มันต้องทำความสะอาดสักหน่อย

คลิกเพื่อทวีต

เหตุใดฉันจึงลบแท็กเหล่านั้นในไฟล์ HEAD, CSS หรือ JS

มีเหตุผลสองสามประการ บางคนชอบที่จะรักษาโค้ดและไซต์ของตนให้เป็นระเบียบมากที่สุด ทำไมต้องมีบรรทัดโค้ดใน HTML ถ้าคุณรู้ว่าคุณไม่ต้องการและรู้วิธีลบออก ไม่มีเหตุผลอะไรทั้งนั้น เช่นเดียวกับไฟล์ CSS และ JS พิเศษ หากคุณไม่ได้ใช้อิโมจิบนไซต์ของคุณ เหตุใดคุณจึงรวม JS นั้นไว้ในทุกๆ หน้า

แล้วมีความปลอดภัย มี HTML บางส่วนที่ WordPress เพิ่มโดยอัตโนมัติ แสดง URL ที่ถูกโจมตีในอดีต ฉันต้องเน้นว่า URL เหล่านี้ (โดยเฉพาะปลายทาง XML RPC) ไม่ใช่ความลับ พวกเขาควรจะเป็นสาธารณะ แต่การเปลี่ยนให้เป็นประเพณีและการซ่อนไว้เป็นแนวทางปฏิบัติที่ทราบกันดี ในกรณีนั้น เห็นได้ชัดว่าคุณไม่ต้องการให้ URL เหล่านั้นอยู่ใน HTML ของคุณ

ความเร็วเป็นเหตุผลที่ถูกต้องในการทำความสะอาด HTML แม้ว่าฉันต้องบอกว่าฉันไม่แน่ใจว่าคุณจะได้เงินเท่าไรจากการลบอักขระสองสามร้อยตัวออกจาก HTML แต่ก็เป็นขั้นตอนในทิศทางที่ถูกต้อง การกำจัดไฟล์ JS และ CSS ที่ไม่จำเป็นจะช่วยคุณประหยัดคำขอ HTTP สองสามรายการ และนั่นคือสิ่งที่คุณควรมุ่งเน้นในการเพิ่มประสิทธิภาพของคุณ Tidy Repo เพิ่งทดสอบธีม WordPress มากกว่า 100 ธีมเพื่อความเร็ว และจำนวนคำขอส่งผลกระทบอย่างมากต่อความเร็วของไซต์โดยรวม

การมี โค้ด HTML ที่ ชัดเจนช่วยให้คุณรู้ว่าเกิดอะไรขึ้นในไซต์ของคุณ และเป็นจุดเริ่มต้นที่ดีในการเพิ่มประสิทธิภาพความเร็วของไซต์

เหตุผลสุดท้ายและเหตุผลที่เรามีโค้ดนี้มีประโยชน์คือ SaaSes ที่ขับเคลื่อนโดย WordPress เมื่อคุณสร้าง SaaS คุณต้องการควบคุมสิ่งที่อยู่ใน HTML ของคุณอย่างสมบูรณ์ และสิ่งต่างๆ ส่วนใหญ่ที่ WP เพิ่มลงใน HTML ด้วยตัวเองไม่ใช่สิ่งที่คุณจะใช้ ดังนั้น ด้วยเหตุผลทั้งหมดที่ระบุไว้ข้างต้น เราจึงทำความสะอาดสิ่งต่างๆ ให้มากที่สุด นั่นทำให้เรามีแพลตฟอร์มแบบลีนที่ยอดเยี่ยมในการสร้างโซลูชันที่กำหนดเอง ในขณะที่ยังคงรักษาฟังก์ชันหลักของ WP ไว้ 99% ที่ใช้ในการขับเคลื่อน SaaS

ฉันสามารถลบสิ่งเหล่านี้ได้อย่างปลอดภัยหรือไม่? พวกเขาไม่ได้มีจุดมุ่งหมาย?

ใช่ มันมีจุดประสงค์ แต่ในบางสถานการณ์เท่านั้น ในเว็บไซต์ "ทั่วไป" แท็ก link เพิ่มเติมสองสามแท็กในส่วนหัวไม่ใช่ปัญหา และทำให้การดำเนินการและการผสานรวมบางอย่างง่ายขึ้น แต่ไม่สำคัญต่อการทำงานของไซต์ใดๆ และไม่ใช่สำหรับ SaaS อย่างแน่นอน

มาล้างโค้ดกัน

คุณสามารถทดสอบโค้ดด้านล่างกับธีมใดก็ได้ ค่าเริ่มต้น 2017 จะทำได้ดี อย่างไรก็ตาม หากคุณใช้ธีม WordPress "ปกติ" (และปลั๊กอินบางตัวนอกเหนือจากนั้น) คุณจะไม่มีทางรู้ได้เลยว่าใครเป็นผู้เพิ่มโค้ด - แกน WP ธีม หรือปลั๊กอิน ฉันแนะนำให้คุณรีเซ็ตไซต์ของคุณเพื่อลบปลั๊กอินทั้งหมด แล้วใช้ธีมที่มีเฉพาะ wp_head() และ wp_footer() เท่านั้น นี่คือหน้าตาของ index.php และนี่คือธีมการทดสอบทั้งหมดที่คุณสามารถใช้สำหรับการทดสอบ

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

หากคุณเปิดใช้งานธีมทดสอบของเราและเปิดแหล่งที่มาของหน้าแรก คุณจะสังเกตเห็นโค้ดจำนวนมากกว่าที่ปรากฏใน index.php ด้านบน นั่นคือสิ่งที่เราจะทำความสะอาด วางโค้ดด้านล่างใน functions.php ของธีม หากคุณไม่ต้องการลบ/ปิดใช้งานคุณลักษณะ ให้แสดงความคิดเห็นในบรรทัดที่กล่าวถึง

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

ทำอะไร

การดำเนินการ rsd_link มีหน้าที่แสดงลิงก์การค้นพบที่ง่ายจริงๆ ในขณะที่ wp_generator แสดงเวอร์ชัน WP และถูกลบโดยปลั๊กอินความปลอดภัยแทบทุกตัวที่เคยเขียนสำหรับ WP การดำเนินการ feed_links สองครั้งจะเพิ่มลิงก์ต่างๆ ไปยังฟีด RSS หลายรายการ การดำเนินการต่างๆ ของ _rel_link จะเพิ่มลิงก์ไปยังโพสต์เพื่อให้สามารถเข้าถึงได้มากขึ้นและค้นหาได้ง่ายขึ้นด้วยบริการต่างๆ เว้นแต่ว่าคุณกำลังใช้ Windows Live Writer คุณไม่จำเป็นต้องดำเนินการ wlwmanifest_link เราไม่ต้องการ amojis ดังนั้น print_emoji_detection_script ก็ใช้ได้ และเช่นเดียวกันสำหรับลิงก์ oembed ต่างๆ รวมถึงการรองรับ oembed ใน REST API การลบการดำเนินการ oembed_dataparse จะทำให้แน่ใจว่า WP จะไม่ยุ่งกับลิงก์ใดๆ ในโพสต์ของคุณ และไม่เปลี่ยนให้เป็นสื่อสมบูรณ์ผ่าน oembed ตัวกรองสุดท้าย show_admin_bar จะป้องกันไม่ให้แถบผู้ดูแลระบบ WP แสดงที่ส่วนหน้าของคุณโดยไม่คำนึงถึงการตั้งค่าสำหรับแต่ละบัญชี

มีบางสิ่งใน #WordPress ที่ไม่สามารถแก้ไขได้ด้วยการกระทำและตัวกรอง โชคดีที่การควบคุมเนื้อหา HEAD ไม่ใช่หนึ่งในนั้น

คลิกเพื่อทวีต

WordPress มีความยืดหยุ่นสูง

มีบทความมากมายที่ลอยไปมาโดยมีชื่อเช่น "วิธีลบขยะออกจากส่วนหัว WP" มันไม่ใช่ขยะ เป็นสิ่งที่ให้พลังอันยิ่งใหญ่แก่ WordPress ทันทีที่แกะกล่อง หลายคนเห็นคุณค่าของสิ่งนั้น และพวกเขาไม่ต้องเสียเวลาหลายชั่วโมงในการตั้งค่า ในทางกลับกัน การทำความสะอาดเป็นเพียงการนำการกระทำบางอย่างออกไป คุณสามารถควบคุมสิ่งที่ใส่ลงใน HTML ของคุณได้อย่างเต็มที่ และสามารถใช้ WordPress เพื่อขับเคลื่อนไซต์ที่ไม่ใช่เนื้อหา เช่น SaaSes ได้อย่างง่ายดาย