WordPress 테마 HEAD 섹션 및 불필요한 JS 및 CSS 파일 정리

게시 됨: 2018-09-04

WordPress 핵심 광고는 원하든 원하지 않든 사이트의 HTML head 섹션에 상당히 많은 코드를 광고합니다. 그 코드는 쓸모가 없으며 대부분의 사이트에서 목적을 달성합니다. 그러나 깨끗한 코드를 좋아하거나 WordPress를 사용하여 SaaS를 구동하는 경우 HTML을 정리하고 싶을 것입니다. WP의 대부분의 작업과 마찬가지로 몇 가지 작업과 필터를 제거하기만 하면 됩니다.

#WordPress는 #SaaS 사이트를 구축할 수 있는 훌륭한 플랫폼입니다. 그러나 그 전에 약간의 청소가 필요합니다.

트윗하려면 클릭

HEAD, CSS 또는 JS 파일에서 이러한 태그를 제거해야 하는 이유는 무엇입니까?

몇 가지 이유가 있습니다. 어떤 사람들은 코드와 사이트를 최대한 깔끔하게 유지하기를 원합니다. 필요하지 않고 제거하는 방법을 알고 있다면 왜 HTML에 한 줄의 코드가 있어야 합니까? 이유가 없습니다. 추가 CSS 및 JS 파일도 마찬가지입니다. 사이트에서 이모티콘을 사용하지 않는 경우 모든 페이지에 해당 JS를 포함하는 이유는 무엇입니까?

그런 다음 보안이 있습니다. WordPress가 자동으로 추가하는 몇 가지 HTML이 과거에 악용된 URL을 표시합니다. 이러한 URL(특히 XML RPC 끝점)은 비밀이 아님을 강조해야 합니다. 공개해야 합니다. 그러나 사용자 정의로 변경하고 숨기는 것은 알려진 관행입니다. 이 경우 HTML에서 해당 URL을 원하지 않는 것이 분명합니다.

속도는 HTML을 정리하는 유효한 이유이기도 합니다. HTML에서 수백 자를 제거함으로써 얼마나 많은 이득을 얻을 수 있을지 확신할 수 없지만 올바른 방향으로 나아가고 있는 단계입니다. 불필요한 JS 및 CSS 파일을 제거하면 몇 가지 HTTP 요청을 절약할 수 있으며 최적화에 집중해야 합니다. Tidy Repo는 최근 100개 이상의 WordPress 테마의 속도를 테스트했으며 요청 수는 전체 사이트 속도에 상당한 영향을 미칩니다.

깨끗한 HTML 코드 를 사용하면 사이트에서 무슨 일이 일어나고 있는지 알 수 있으며 사이트 속도를 최적화할 수 있는 좋은 출발점이 됩니다.

마지막으로 이 코드를 편리하게 사용할 수 있는 이유와 이유는 WordPress 기반 SaaS입니다. SaaS를 구축할 때 HTML에 있는 내용을 완벽하게 제어하기를 원하며 WP가 HTML에 추가하는 대부분의 항목은 사용하지 않을 것입니다. 따라서 위에서 언급한 모든 이유를 위해 가능한 한 많이 정리합니다. 이는 SaaS를 구동하는 데 사용되는 WP의 핵심 기능의 99%를 유지하면서 맞춤형 솔루션을 구축할 수 있는 훌륭하고 린 플랫폼을 제공합니다.

이것들을 안전하게 제거할 수 있습니까? 그들은 목적에 봉사하지 않습니까?

예, 그들은 특정 상황에서만 목적을 달성합니다. "평균" 웹사이트에서 헤더에 있는 몇 개의 추가 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 가 갈 수 있으며 REST API의 oembed 지원을 포함한 다양한 oembed 링크도 마찬가지입니다. oembed_dataparse 작업을 제거하면 WP가 게시물의 링크를 엉망으로 만들지 않고 oembed를 통해 해당 링크를 리치 미디어로 바꾸지 않습니다. 마지막 필터 show_admin_bar 는 계정별 설정에 관계없이 WP 관리 표시줄이 프런트 엔드에 표시되지 않도록 합니다.

#WordPress에는 작업 및 필터로 수정할 수 없는 것이 몇 가지 있습니다. 고맙게도 HEAD 콘텐츠를 제어하는 것은 그 중 하나가 아닙니다.