Optimizar Plantilla WordPress

Home   /   Optimizar Plantilla WordPress

¿Qué cambios podemos hacer para optimizar nuestra plantilla de WordPress?

Empezamos por la plantilla así te doy las malas notícias primero. Las plantillas premium son las peores de todas en cuanto a rendimiento. Incluyen un arsenal de componentes que pocas veces se usan al 100%, pero el CSS i JS se carga igual.

Por otro lado, son malas noticias porqué hacer cambios en una plantilla nunca es buena idea ya que con cualquier actualización del tema, tus cambios desaparecerán.

Qué podríamos hacer? duplicar la plantilla, cambiarle el nombre para que no se actualice jamás y hacer nuestros cambios en esta nueva plantilla. Aunque claro, no recibirás actualizaciones. No sé hasta que punto puede afectarte, aunque muchas veces da absolutamente igual. Por temas de seguridad siempre son más problemáticos los plugins que la plantilla, pero estas plantillas a veces incluyen plugins… Intenta usar plantillas lo más simple posibles y aprende algo de html y css para customizarlas. Esto sería lo ideal.

Comento todo esto antes de entrar en los puntos que sugiere Google, ya que usando una plantilla de estas, podemos hacer bien poco : (.
Describo los cambios a realizar por si estás usando una plantilla propia o vas a clonar el template y modificarlo.

Si estás usando una plantilla premium o compleja, poco podremos hacer para optimizar la plantilla de WordPress si tienes pocos conocimientos de html / css / javascript / php. Si es así, simplemente pasa al siguiente punto desde el menú, no pasa nada, la velocidad de tu WordPress aumentará igualmente.

Por otro lado, tampoco recomiendo los plugins para construir contenido como DIVI, WP Bakery o elementor. Añaden un montón de elementos innecesarios. Te suena lo de «Reducir elementos del DOM?» Pues eso, imposible con estos plugins.

Elimina los recursos y prioriza el contenido visible

Qué significa? Que estás cargando todo el Javascript y CSS en el <head>.
Idealmente, para optimizar la carga de CSS sería así:

  1. Carga un CSS por página
  2. Cada archivo CSS de cada página dividelo en 2. pagina-top.css pagina-footer.css

Esto sería lo ideal, me encantaría tener tiempo para desarrollar un plugin que hiciera justamente eso, ahora mismo no hay nada, y hacer esto es practicamente imposible a menos que hayas escrito tu mismo todo el CSS.

¿Que podemos hacer? Tenemos que mover las referencias a los archivos Javascript al pie de la página. Por ahora nada, lo dejamos para la sección de «caché».

Elimina CSS sin usar

Un poco lo mismo que el anterior punto. No hay forma segura de eliminar este css que no se usa, ya que lo que no se usa en la primera página puede usarse en otra página, o podríamos estar borrando unas líneas que parece que no se usan pero resulta que hay un javascript que en un momento determinado hace aparecer un elemento, de forma que si usamos el inspector de google (Coverage) nos dirá que unas líneas no se usan porqué desconoce el elemento que se cargará más adelante en tiempo real …

Lo mismo, me encantaría tener tiempo para desarrollar un plugin para realizar justo esto.

Minimiza el trabajo del hilo principal

Aquí está hablando de Javascript. Tanto el JS que carga el tema cómo el que se carga a través de plugins o componentes externos. Intenta reducir el número de estos componentes externos.

Elimina los recursos que bloqueen el renderizado

Para quitar el javascript que bloquea la visualizacion de contenido wordpress, necesitamos mover el Javascript al pie de la página para que justamente se cargue al final y no bloquee la carga de CSS y el renderizado.

Fuentes / Google Fonts

No uses más de dos fuentes de Google. Y si lo haces asegúrate que en la misma petición se cargan las 2 fuentes.
Revisa el código fuente HTML de tu página y busca «google», si encuentras que las diferentes fuentes se cargan en líneas diferentes, hay que solucionarlo. El archivo css también puede estar llamando a google fonts con los @import. Revisa el código fuente html y los archivos css en busca de llamadas a [dominio de google].

Lo mejor sería sacar las llamadas de dentro del CSS, o el functions.php, y meterlas a mano en el header.php de tu tema. No hace falta un plugin para esto, copiar y pegar.

Reducir elementos del DOM

Este problema lo tendrás si usas plantillas complejas o premium y no podrás hacer nada para evitarlo. Cambiar de plantilla por una con menos sliders*, es lo único.

La plantilla es la parte que menos podremos optimizar sin conocimientos mínimos de programación web. Pero no pasa nada, todo lo demás si que podremos.

Modificar el archivo functions.php de nuestra plantilla

4 cosas que puedes copiar y pegar en tu functions.php

/* Mover Scripts del header al footer */
function move_scripts_from_head_to_footer() {
    remove_action( 'wp_head', 'wp_print_scripts' );
    remove_action( 'wp_head', 'wp_print_head_scripts', 9 );
    remove_action( 'wp_head', 'wp_enqueue_scripts', 1 );
    remove_action( 'wp_head', 'wp_enqueue_style', 1 );
 
    add_action( 'wp_footer', 'wp_print_scripts', 5);
    add_action( 'wp_footer', 'wp_print_head_scripts', 5);
    add_action( 'wp_footer', 'wp_enqueue_scripts', 5);
    add_action( 'wp_footer', 'wp_enqueue_style', 5);
}
add_action('wp_enqueue_scripts', 'move_scripts_from_head_to_footer');


Otra cosa que me gusta hacer es borrar los metas innecesarios de WP y desactivar jQuery Migrate. Además de que exponen demasiada información sobre nuestro WordPress son innecesarios:

//Eliminar jQuery Migrate si no lo estás usando
 function remove_jquery_migrate( $scripts ) {
 if ( ! is_admin() && isset( $scripts->registered['jquery'] ) ) {
 $script = $scripts->registered['jquery'];
 
 if ( $script->deps ) { // Check whether the script has any dependencies
 $script->deps = array_diff( $script->deps, array( 'jquery-migrate' ) );
 }
 }
 }
 
add_action( 'wp_default_scripts', 'remove_jquery_migrate' );
 
// Borrar metas innecesarios como wp_generator y demás

function remove_headlinks() {
remove_action( 'wp_head', 'wp_generator' );
remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'wlwmanifest_link' );
remove_action( 'wp_head', 'start_post_rel_link' );
remove_action( 'wp_head', 'index_rel_link' );
remove_action( 'wp_head', 'wp_shortlink_wp_head' );
remove_action( 'wp_head', 'adjacent_posts_rel_link' );
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );
remove_action( 'wp_head', 'parent_post_rel_link' );
remove_action( 'wp_head', 'feed_links', 2 );
remove_action( 'wp_head', 'feed_links_extra', 3 );
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
//remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
remove_action( 'template_redirect', 'rest_output_link_header', 11 );
remove_action( 'wp_head',      'wp_oembed_add_discovery_links'         );
remove_action( 'template_redirect', 'rest_output_link_header', 11 );
}
add_action( 'init', 'remove_headlinks' );

Y estos últimos con mucho cuidado, es posible que rompan algo así que después de pegarlo, revisa tu página sin cache.
Al añadir el atributo defer el archivo se descarga de forma asíncrona, en paralelo con el análisis HTML, y además su ejecución se retrasa hasta después de que se haya interpretado el HTML. No hay bloqueo en el renderizado HTML. El orden en el que aparece cada script en el documento se mantiene.

Otro atributo es async, pero con «defer» ya tenemos suficiente en este caso.

/* Añade los atributos async defer a todos tus scripts js */
add_filter( 'script_loader_tag', 'regal_tag', 10, 3 );
function regal_tag( $tag, $handle, $src ) {
	if ( $handle !== 'stripe' ) {
		return $tag;
	}
	return "<script src='$src' defer></script>";
}

 

Continuamos con los cambios en el servidor

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Optimizando WP

Optimizando WP es una guía para optimizar y acelerar la velocidad de carga de tu página web WordPress en constante construcción.

Autor: @betoayesa
Última actualización: 13/04/2020

Si necesitas ayuda contacta con PhpNinja

Cualquier duda, escribe en los comentarios, trataremos de responder rapidamente.