Limpie la sección HEAD del tema de WordPress y los archivos JS y CSS innecesarios

Publicado: 2018-09-04

El núcleo de WordPress anuncia una gran cantidad de código en la sección de head HTML del sitio, lo desee o no. Ese código está lejos de ser inútil y tiene un propósito en la mayoría de los sitios. Sin embargo, si eres un fanático del código limpio o usas WordPress para impulsar un SaaS, querrás limpiar el HTML. Como con la mayoría de las cosas en WP, solo es cuestión de eliminar algunas acciones y filtros.

#WordPress es una gran plataforma para construir sitios #SaaS. Pero antes de hacerlo, requiere un poco de limpieza.

HAGA CLIC PARA TUITAR

¿Por qué eliminaría esas etiquetas en los archivos HEAD, CSS o JS?

Hay un par de razones. A algunas personas les gusta mantener su código y sitios lo más ordenados posible. ¿Por qué tener una línea de código en HTML si sabe que no la necesita y sabe cómo eliminarla? Sin motivo alguno. Lo mismo ocurre con los archivos CSS y JS adicionales. Si no está usando emojis en su sitio, ¿por qué incluiría ese JS en cada página?

Luego está la seguridad. Hay algunas piezas de HTML que WordPress agrega automáticamente y muestran URL que han sido explotadas en el pasado. Debo recalcar que estas URL (punto final XML RPC en particular) no son un secreto. Deberían ser públicos. Pero cambiarlos por algo personalizado y ocultarlos es una práctica conocida. En ese caso, es obvio que no desea esas URL en su HTML.

La velocidad también es una razón válida para limpiar HTML. Aunque debo decir que no estoy seguro de cuánto ganará eliminando unos cientos de caracteres de HTML, es un paso en la dirección correcta. La eliminación de archivos JS y CSS innecesarios le ahorrará algunas solicitudes HTTP, y eso es algo en lo que debe enfocar su optimización. Tidy Repo recientemente probó la velocidad de más de 100 temas de WordPress, y la cantidad de solicitudes tiene un impacto significativo en la velocidad general del sitio.

Tener un código HTML limpio le asegura saber lo que está pasando en su sitio y es un gran comienzo para optimizar la velocidad del sitio.

Por último, pero no menos importante, la razón por la que tenemos este código a mano son los SaaS con tecnología de WordPress. Cuando está creando un SaaS, desea un control completo de lo que hay en su HTML, y la mayoría de las cosas que WP agrega a HTML por sí mismas no son algo que usará. Entonces, por el bien de todas las razones mencionadas anteriormente, limpiamos las cosas tanto como sea posible. Eso nos brinda una excelente plataforma sencilla para crear soluciones personalizadas, al mismo tiempo que mantenemos el 99 % de la funcionalidad principal de WP que se utiliza para potenciar el SaaS.

¿Puedo quitar estas cosas de forma segura? ¿No sirven para algo?

Sí, cumplen un propósito, pero solo en ciertas situaciones. En un sitio web "promedio", algunas etiquetas de link adicionales en el encabezado no son un problema, y todas facilitan ciertas operaciones e integraciones. Pero no son cruciales para el funcionamiento de ningún sitio y ciertamente no para un SaaS.

Limpiemos algo de código

Puede probar el código a continuación con cualquier tema. El 2017 predeterminado funcionará bien. Sin embargo, si está utilizando temas de WordPress "normales" (y algunos complementos además de eso), nunca podrá saber quién agregó el código: el núcleo de WP, el tema o un complemento. Le sugiero que reinicie su sitio para eliminar todos los complementos y luego use un tema que solo tenga wp_head() y wp_footer() . Así es como se ve ese index.php y aquí está el tema de prueba completo que puede usar para probar.

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

Si activa nuestro tema de prueba y abre la fuente de la página principal, notará mucho más código del que se ve en el index.php anterior. Eso es lo que estaremos limpiando. Coloque el código a continuación en functions.php del tema. Si no desea eliminar o deshabilitar una función, comente la línea que la menciona.

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

que hace que

La acción rsd_link es responsable de mostrar el enlace de descubrimiento realmente simple, mientras que wp_generator muestra la versión de WP y prácticamente todos los complementos de seguridad que se han escrito para WP lo eliminan. Las dos acciones feed_links agregan varios enlaces a varias fuentes RSS. Varias acciones de _rel_link agregan enlaces a las publicaciones para que puedan ser más accesibles y más fáciles de encontrar por varios servicios. A menos que esté usando Windows Live Writer, realmente no necesita la acción wlwmanifest_link . No necesitamos amojis, por lo que print_emoji_detection_script puede funcionar, y lo mismo ocurre con varios enlaces oembed , incluida la compatibilidad con oembed en la API REST. Eliminar la acción oembed_dataparse asegurará que WP no interfiera con ningún enlace en sus publicaciones y no los convierta en medios enriquecidos a través de oembed. El último filtro show_admin_bar evitará que la barra de administración de WP se muestre en su interfaz, independientemente de la configuración de cada cuenta.

Solo hay algunas cosas en #WordPress que no se pueden modificar con acciones y filtros. Afortunadamente, controlar el contenido de HEAD no es uno de ellos.

HAGA CLIC PARA TUITAR

La flexibilidad de WordPress es genial

Muchos artículos están flotando con títulos como "Cómo eliminar basura del encabezado de WP". No es basura. Son cosas que le dan un gran poder a WordPress desde el primer momento. Muchas personas valoran eso y no tienen que pasar horas configurando cosas. Por otro lado, la limpieza es solo cuestión de quitar algunas acciones. Tiene control total sobre lo que se pone en su HTML y puede usar fácilmente WordPress para potenciar sitios sin contenido como SaaSes.