[WPO] ¿Cómo Optimizar WordPress?

El WPO consiste sencillamente, al menos a fines de esta entrada, en lograr que tu página sea lo más ligera posible y que no tarde mucho en cargar, no afecta directamente al SEO según algunos, pero sí impacta en la experiencia de usuario que cada vez más se vuelve un factor central de posicionamiento, y en el uso de los recursos de tu servidor, por lo que no está de más darle una afinada a la velocidad de tu sitio.

Aunque muchos la hacen ya avanzado el sitio, y en realidad nunca es mal momento para optimizar tu sitio, te recomendaría hacer tu WPO antes de empezar a publicar, como todo en mis publicaciones al respecto, yo creo que aunque el contenido y responder a la intención del usuario son máxima en sitios dedicados al usuario final (todos o casi todos lo son), es lo último a añadir, por el simple aspecto de que cuando entres en eso, salvo por algunas cosas como el seo, sem y smm, y similares, ya no pierdas tiempo preocupándote por algo más que no sea tu contenido y tu usuario o cliente final.

Si tu servidor cuenta con LiteSpeed Caché, no ocupas Imagify ni Assets CleanUp, ni limitar manualmente el heartbeat ni diferir manualmente el javascript, ya que en el plugin se te da la oportunidad de que LiteSpeed haga esas y otras optimizaciones como cargar js y css de forma asíncrona.

Pasos previos

Antes de cualquier paso de WPO, vamos a obtener una medición previa de nuestro sitio, esto lo harás con los siguientes sitios:
- gtmetrix.com
- developers.google.com/speed/pagespeed/insights/?hl=es
- tools.pingdom.com
Una vez la obtengas, anota o saca captura de esos resultados y deja una pestaña de incógnito con tu sitio abierto para en esta poder ir monitoreando no se rompa nada.
Ahora dirígete a https://tools.keycdn.com/http2-test y corrobora que tu sitio sea compatible con http/2
También si tienes imágenes sin optimizar, es buena idea ir agrupándolas.
Hacer un child-theme de tu tema, sea de forma manual o por plugin, para que no se pierdan los cambios al mismo cada que actualices la versión de tu tema.
Si usas cloudflare, activa el modo desarrollador mientras trabajas.
Cada cambio que hagas, en la ventana en privado recarga tu sitio (con ctrl+f5 para vaciar cache del navegador) para ver que no se haya roto nada.
Si puedes, haz un respaldo antes de iniciar el WPO, por cualquier cosa.
Por último, de preferencia ya deberías haber hecho todos los pasos anteriores que he comentado, sobre todo haber instalado y configurado Imagify, Asset CleanUp, y tu plugin de cache (este último puedes dejarlo al final). Si tu plugin es LiteSpeed y tu servidor pproporciona el servicio, puedes omitir gran parte de este post como comento al principio.

Optimizar tu sitio

Imágenes

Muchas veces el tiempo de carga de un sitio, se debe a su peso, y regularmente lo que más pesa son las imágenes, aunque emplearemos un plugin para ayudarnos con esto, es muy recomendable prepararlas de antemano.

Esto yo lo hago tomando cada imagen y dimensionando la misma en iloveimg.com al tamaño que le pondré en el sitio, regularmente 420 px, y el archivo resultante, lo comprimo en el mismo sitio (ILoveIMG.com) para reducir su tamaño, haciendo esto, he conseguido que imágenes que pesaban al rededor de 129 a 340 kb o hasta 1mb bajen a 8 o 30 kb, posteriormente con un plugin consigo bajen más.

Plugins

Imagify

Este plugin es de gran ayuda, comprime todas las imágenes que subas y de tu tema, además, te recomiendo (lo hago en mis sitios) activar la opción de convertir imágenes a webp, con esto he logrado tener imágenes que pesan solo 3kb aproximadamente y ayuda mucho con la velocidad.

Para empezar a usarlo, tenemos que ir a imagify.io y registrarnos presionando en el botón azul que dice «Get Sarted» en la cabecera a la derecha. Se abrirá un formulario donde pondremos nuestro correo electrónico, y una contraseña que queramos usar para entrar a la cuenta.

Una vez te registres te abrirá la «página principal» donde podrías optimizar imágenes de forma individual, pero lo importante es confirmar tu cuenta desde el e-mail de confirmación, e ir al menú desplegable en la esquina superior derecha, y dar clic donde dice ‘API – INTEGRATION’

Te llevará a una nueva ventana con url ‘ https://app.imagify.io/#/api ‘, en la cual podrás obtener tu número de API, copiala, la vamos a ocupar.

Assets CleanUp

Este plugin te permite quitar cosas que cargan tu sitio como desactivas el XML-RPC de wordpress, quitar emojis y links relativos, entre otras opciones.

LiteSpeed Caché o WP Rocket

Estos son plugins de caché, con algunas diferencias como el que wp rocket usa el disco duro para la caché y litespeed usa la ram.

Muchos usuarios recomiendan wp rocket, que es de pago, pero no lo he probado así que no puedo darte en realidad muchas referencias sobre el mismo.

En cambio, suelo usar litespeed que es gratuito, sobre todo porque mis servidores lo incluyen y me terminó gustando el plugin.

Una vez tengas todos tus plugins configurados y funcionando adecuadamente, hay que atender los siguientes pasos y archivos.

Quitar plugins importa para el WPO

Cada plugin en ejecución ocupa recursos de tu servidor, así que para mejorar tu WPO, revisa detenidamente los que tienes y desactiva los que no tengan una verdadera utilidad, el WPO resulta de sumar estos esfuerzos.

functions.php

Ya sea desde el gestor de archivos de tu servidor, el editor de temas de wordpress, o por ftp, vamos a realizar estos ajustes en el functions.php de nuestro tema (normalmente lo encuentras en public_html/wp-content/theme/{tutema}/ o en {tudominio}/wp-content/theme/{tutema}/ o en eleditor de temas de wordpress simplemente seleccionando tu tema activo, que debería ser el seleccionado por defecto y yendo a functions.php

Limitar Heartbeat

Para hacerlo, unicamente vas a tener que añadir una línea debajo de la tag <?php que se encuentra al inicio del archivo functions.php e introducir el siguiente código:

function limit_heartbeat( $settings ) {
$settings['interval'] = 60;
return $settings;
}
add_filter( 'heartbeat_settings', 'limit_heartbeat' );

Con esto conseguiremos limitar el heartbeat a intervalos de 1 minuto

preload y prefetch

Al final del archivo functions agregaremos este código, lo que hace es que cada que se entre a cualquier página de tu sitio, se generen esos links en el header, con los cuales lo primero que se hará es resolver los dns de esos sitios para que a la hora de cargar esos recursos ya sepan el sitio y navegado dónde encontrarlos.

add_action( 'wp_head', 'mi_dns_prefetch', 0 );
function mi_dns_prefetch() {
	echo "".'<link rel="dns-prefetch" href="//www.googletagmanager.com">';
	echo "".'<link rel="dns-prefetch" href="//gmpg.org/">';
	echo "".'<link rel="dns-prefetch" href="//fonts.gstatic.com/">';
	echo "".'<link rel="dns-prefetch" href="//www.google-analytics.com">';
}

Quitar versión del código

Igual, lo pones al último en functions.php y te quitará del código la versión de wordpress

// Remove version entirely from the source files
function sh_remove_ver_css_js( $src_file ) {
    if ( strpos( $src_file, 'ver=' ) )
        $src_file = remove_query_arg( 'ver', $src_file );
    return $src_file;
}
add_filter( 'style_loader_src', 'sh_remove_ver_css_js', 9999 );
add_filter( 'script_loader_src', 'sh_remove_ver_css_js', 9999 );

Diferir carga de javascript

Con este segmento, que como todos los que siguen, va al final del functions, logras diferir la carga del jacascript al final de que cargue el sitio

// Defer Parsing of JavaScript in WordPress via functions.php file
function defer_parsing_js($url) {
//Add the files to exclude from defer. Add jquery.js by default
    $exclude_files = array('jquery.js');
//Bypass JS defer for logged in users
    if (!is_user_logged_in()) {
        if (false === strpos($url, '.js')) {
            return $url;
        }

        foreach ($exclude_files as $file) {
            if (strpos($url, $file)) {
                return $url;
            }
        }
    } else {
        return $url;
    }
    return "$url' defer='defer";

}
add_filter('clean_url', 'defer_parsing_js', 11, 1);

Quitar Contact Form de páginas que no son de contacto

Lo puedes hacer en cada post con el Asset CleanUp, pero aañadiendo este fragmento, logras que contactform no cargue en ningún sitio que no sea la página de contacto de la web.

// Remove contact form 7
add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );
add_action('wp_enqueue_scripts', 'load_wpcf7_scripts');
function load_wpcf7_scripts() {
  if ( is_page('contacto') ) {
    if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
      wpcf7_enqueue_scripts();
    }
    if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
      wpcf7_enqueue_styles();
    }
  }
}

Cache

Al navegador por httaccess

Generalmente tu plugin de caché resuelve esto, pero si no, basta con añadir este código a tu httaccess

#Browser cache
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 1 week”
</IfModule>

Por plugin

Generalmente todo plugin de cache tiene una opción para activar esto y definir cuánto tiempo durará la cache de navegador.

Si tu sitio soporta http/2 y tu plugin de cache lo permite, activa el «push http/2»

Gzip

Por httaccess

Puedes probar con un código como el siguiente en tu httaccess, pero a veces puede darte problemas, así que primero intenta hacerlo desde tu cpanel antes de trastear el httaccess

#Compresion web
AddType image/x-icon .ico
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/x-js
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE image/x-icon

Por servidor

En tu CPanel, ve casi al final a la opción que dice «Optimizar Web», dale clic ara entrar y activa la compresión, también te puede ofrecer llevarte a la compresión phpini, lo cual también es conveniente activar, al menos en algunos sitios.

Posteriormente en la misma sección en MultiPHP Ini Editor puedes seleccionar el sitio y al final seleccionar minimizar php.

Limitar WP-Cron

En tu archivo wp-config, que está en el directorio principal de tu web (/public_html o /tudominio) añade las siguientes dos líneas:

/** Detener wpcron **/
define('DISABLE_WP_CRON', true);

Ahora en tu cpanel ve a cron jobs y añade la siguiente tarea a ejecutarse cada 2 o 5 minutos:

wget -q -O - http://yourdomain.com/wp-cron.php?doing_wp_cron >/dev/null 2>&1

o también puedes implementarla con este código:

php -q /home/{username}/{website.tld}/wp-cron.php

Subdominio estático (subdominio libre de cookies)

Esta es una de las sugerencias WPO más comunes de page speed insights. En tu servidor, crea un subdominio llamado static (debe quedar como static.website.tld) apuntando a tu carpeta wp-content, esté esta en public_html [/public_html/wp-content/] o en carpeta de tu dominio [/website.tld/wp-content/].

Posteriormente si usas cloudflare, activa el modo desarrollador, y agrega un registro A llamado static que apunte a la IP de tu servidor.

Ahora, de vuelta en tu cpanel, abre let’s encrypt y firma un certificado SSL para tu subdominio static.website.tld.

Por último paso preparatorio, entra en tu navegador a static.tudominio.tld, si carga y se queda la pantalla en blanco, prosigue con la guía, SI TE DA ERROR 404 NO SIGAS hasta que lo resuelvas o de plano ya no sigas y salta a la siguiente sección.

En tu fichero wp-config, añade las siguientes líneas:

/** Cookie-Free Domain. */
define("WP_CONTENT_URL", "https://static.website.tld");
define('COOKIE_DOMAIN', $_SERVER['HTTP_HOST'] );

Ahora tienes que ir a tu cpanel y en myphpadmin, ir a la base de datos de tu sitio (si solo tienes uno, será la única, si tienes más de uno, en el wp-config dice cuál es el nombre de su base de datos) ejecutar las siguientes consultas, ten en cuenta que muchas ocaciones wp_posts puede tener otros nombres como wp9try_posts, así que verificalo para ahorrar trabajo doble. También recuerda cambiar website.tld por tu nombre de dominio y dominio web.

UPDATE wp_posts SET guid = REPLACE(guid,'website.tld/wp-content/','static.website.tld/')

UPDATE wp_posts SET post_content = REPLACE(post_content,'website.tld/wp-content/','static.website.tld/')

Ahora simplemente necesitas añadir el siguiente código a tu archivo .httaccess (el de tu tld) para prevenir posibles errores:

#CORS FIX
<IfModule mod_headers.c>
 <IfModule mod_rewrite.c>
    SetEnvIf Origin "http(s)?://(.+\.)?(static.website\.com|website\.com)(:\d{1,5})?$" CORS=$0
    Header set Access-Control-Allow-Origin "%{CORS}e" env=CORS
    Header merge  Vary "Origin"
 </IfModule>
</IfModule>
#CORS FIX END

Volver a medir resultados de nuestro WPO básico

Ahora, puedes desactivar el modo desarrollador de cloudflare, activar tu plugin de cache y configurarlo, esto si no lo hiciste antes ya, y volver a medir tu sitio para ver cuánto se redujo su tiempo de carga luego del WPO. Por cierto, no lo he probado pero creo que el plugin cloudflare de wordpress permite mejoras de WPO al mejorar la entrega de tu contenido.

Y con esto has hecho el WPO básico de tu sitio, si quieres más contenido de WPO házmelo saber e intentaré hacer un texto o vídeo al respecto, y/o generar una lista de recursos sobre WPO que te pueda ser de interes.