Cuando hablamos de ¿qué es lo que mantiene a un usuario contento en una página web y evita que se vaya?, se nos podría venir muchas cosas a la cabeza, como el diseño de la página, animaciones, estructura y funcionalidades, sin embargo, el aspecto más importante para retener a un usuario y que interactúe un poco con el sitio es el “Rendimiento”. Si la página no carga lo suficientemente rápido como en 2 o 3 segundos al menos el usuario se frustrará y se ira, ignorando por completo el servicio o artículo que podríamos estar ofreciendo.
Sin importar que vayas a comenzar un proyecto desde cero o si ya tienes uno, esta estrategia ha sido diseñada para ser una cuidadosa guía que sirve para optimizar el rendimiento de un sitio web en orden y sin complicaciones, aplicando un conjunto de buenas prácticas a la misma vez que mejoramos el SEO, ya que debemos tener muy en cuenta que el WPO ayuda mucho al SEO.
Tal vez la parte más importante para obtener un excelente rendimiento al final de la creación de un sitio web, si conseguimos una buena base con unos fuertes cimientos podremos asegurar desde el inicio que nuestra web será rápida y segura.
Actualmente existen muchas alternativas de hosting disponibles, y cada una ofrece sus propias caracteristicas y beneficios, algunas recomendadas para WordPress son:
| – Hostinger | – A2 Hosting |
| – Siteground | – Hostgator |
| – WordPress Hosting | – Bluehost |
| – AWS | – Dreamhost |
| – Dongee | – LatinoamericaHosting |
Después de elegir el hosting debemos tomarnos el tiempo necesario para dejarlo configurado, optimizado y listo para la instalación de WordPress.
Aunque existen muchos paneles de administración de Hosting diferentes, cada uno comparte varias características que podemos encontrar y configurar con el propósito de mejorar la seguridad y el rendimiento de nuestros sitios alojados en él.
*Es muy importante desde este punto aplicar las medidas de seguridad recomendadas y críticas por el hosting, como bloquear varias rutas de acceso, habilitar protección Hotlink y deshabilitar los pingbacks.
Para encontrar esta configuración podemos dirigirnos a nuestro administrador de la instalación de wordpress, normalmente si un hosting usa cPanel podemos encontrarlas en el WordPress Manager by Softaculous, Sin embargo, hay algunos hosting como Hostinger y su hPanel que gestiona WordPress y no nos muestra las opciones de seguridad como las de la imagen, la protección hotlink debe ser configurada manualmente y otras cosas simplemente no estan disponibles, pero no te preocupes, es posible activar todas esas opciones de seguridad con un plugin de seguridad como Security Optimizer.
También podemos encontrar en la configuración de PHP caracteristicas que nos pueden mejorar el rendimiento y habilitar mejores funcionalidades, como la compresión Gzip(gd) o Brotli y la cache de objetos Redis o Memcached si es que el server tiene configurado y listo estas funciones para usar.
Si ya elegimos una buena base con excelentes cimientos, es hora de elegir el material más fuerte para nuestras paredes, los pilares en donde construiremos nuestro sitio web y plasmaremos el diseño previamente creado por un profesional o adquirido en un sitio como Envato.
A la hora de elegir nuestro tema debemos tener en cuenta aspectos como: que sea liviano, con alto rendimiento, buena velocidad y compatibilidad, pues de este depende en gran medida un buen puntaje en GTmetrix y PSI, por otro lado nos puede ayudar con el SEO.
Algunos temas recomendados para WordPress que ofrecen buen rendimiento son:
| FREE | PREMIUM |
| – ASTRA | – Divi |
| – Hello Elementor | – GeneratePress |
| – Sydney | – Bimber |
| – PHLOX | – Themify Ultra |
| – NEVE | – Hestia |
| -Writee | – Inspiro |
| – Airi | – Avada |
| – OceanWP | – Theme X |
Si vas a utilizar un page builder como Elementor debes configurarlo antes de ponerte a usarlo, activa las funciones que mejoran el rendimiento y cambia las configuraciones como las de utilizar “Contenedores” en vez de “Grids” y “Sesiones”, esto puede cambiar totalmente el rendimiento de la estructura implementada por el Builder, esto se traduce al final como una mejor puntuación en la estructura y rendimiento general. (*ojo, revisa que estas características funcionen correctamente si están en alfa o no las actives, por otro lado, si un sitio ya ha sido creado con secciones y grid, tendrás que convertirlos cada uno en Contenedores Flex desde el editor de Elementor y posiblemente reacomodar todo si quieres aprovechar esa característica).
*Aquí empiezan los puntos para sitios ya creados.
Antes de empezar a hacer tweaks, instalar, borrar y retocar aquí y allá es muy importante crear un backup, de esta manera nos aseguramos de tener la posibilidad de restaurar el sitio si rompemos algo importante y complicado de arreglar, ahorrándonos dolores de cabeza y tiempo.
Plugins Recomendados:
| – UpdraftPlus | – Backup Migration |
| – All-in-One WP Migration and Backup | – WP STAGING |
| – Duplicator | – BlogVault |
Ahora, antes de seguir con los demás puntos si nuestro sitio requiere actualizaciones debemos tener muy en cuenta el orden que apliquemos cada una de estas, una buena práctica para evitar romper algo es seguir este orden:
(Backup → WordPress → Plugins → Themes → PHP)
1. Primero creamos un backup completo del sitio (en caso de que algo se rompa).
2. Actualización WordPress.
3. Actualización de Plugins (revisamos que todo siga en orden cada vez que actualicemos un plugin).
4. Actualización de Temas.
5. Actualización de PHP.
Una buena optimización de imágenes local antes de subirlas a WordPress nos puede ahorrar mucho tiempo, pues no tendremos que optimizar con plugins muchas de ellas, sobre todo si las subimos en formato Webp, unas imágenes con excelente calidad/peso puede hacer que los usuarios tengan una experiencia fluida y rápida por el sitio.
Sin embargo, debido a que siempre se mantienen subiendo nuevas imágenes se debe dejar un buen plugin que las optimice.
Los mejores plugin para optimizar nuestras imágenes son estos:
| – Smush | – ShortPixel |
| – EWWW Optimizer | – Imagify |
| – Optimus |
No hay mucho que decir aquí, a Google le gusta que nuestro sitio sea seguro para todos y cumpla con todas las reglas, que nuestros formularios e inicios de sesión estén protegidos con un captcha, y por supuesto que el sitio tenga cookies para que los usuarios decidan si quieren o no compartir su información.
Plugins recomendados:
| Security | Captcha | Cookies |
| – Solid Security | – reCaptcha | – Complianz |
| – Really Simple SSL | – Cloudflare Captcha | – CookieYes |
| – Security Optimizer | – Real Cookie Banner | |
| – Defender | – Cookie Notice | |
| – Wordfence Security |
Utilizar un sistema de cache en nuestra web es bastante importante a la hora de mejorar el rendimiento del sitio, existen diferentes sistemas de cache que pueden venir desde el hosting, una CDN o bien, se pueden activar con algún plugin para optimizar que nos de esta opción.
Plugins Recomendados:
| – *Litespeed Cache | – *Autoptimize |
| – WP Rocket | – Speed Optimizer |
| – WP Fastest Cache | – WP-Optimize |
| – *Asset CleanUp | – W3 Total Cache |
| – WP Super Cache | – Hummingbird |
| – 10Web Booster | – Seraphinite Accelerator |
| – Super Page Cache | – SpeedyCache |
| – Cache Enabler | – WP Meteor |
Cada uno de estos debe ser configurado correctamente, el sitio debe ser revisado y cerciorarnos que no rompe nada, además debemos también configurar la optimización para los archivos HTML, CSS y JS, ya sea con el mismo plugin o combinándolo con otro, justo como veremos en el siguiente punto.
Optimizar solo estos archivos de manera correcta nos puede dar una gran ventaja en el rendimiento general de la web, actualmente existen muchos métodos para lograr este cometido, incluso el tema es tan largo que puede tener su propio articulo fácilmente para guiar aún más a las personas con la configuración correcta.
Mi hallazgo y recomendación gratuita
Utilizar un plugin muy bueno que active la cache del sitio como WP Fastest Cache y dejar que se encargue exclusivamente de la cache y alguna que otra opción que no tenga nuestro otro plugin a usar en sincronía para optimizar el CSS/JS, para esto se usará Asset CleanUp, sin embargo, nuestra ventaja no acaba allí, pues Asset CleanUp lo usaremos más adelante para utilizar la carga condicional de scripts CSS/JS.
*Otro excelente Duo es Autoptimize y WP Optimize.
*Advertencia, Combinar y\o Incrustar los archivos CSS y JS puede causar daños en el diseño y romper el sitio, siempre revisa cada opción si no estás seguro.
Aunque ya la mencioné en el segundo punto, si por alguna razón no pudiste activarla desde el panel del hosting es posible activarla con algún plugin como WP Fastest Cache.
La compresión GZIP o BROTLI puede que ya este activada desde el hosting y puedes verificar aquí: Check Gzip/Brotli Compression | Toolsaday
La compresión GZIP permite reducir el tamaño de cualquier tipo de archivo, ya que minimiza las solicitudes HTTP y reduce el tiempo de respuesta del servidor, por otro lado, la compresión BROTLI hace exactamente lo mismo, pero es un poco mejor.
Optimizar la base de datos con plugins como WP-Optimize puede ser muy útil a la hora de alivianar la carga de la web y aumentar el rendimiento, sobre todo si ya se han usado, desactivado o eliminado muchos plugins, estos suelen dejar mucha basura en la base datos y tablas huérfanas que pueden ser eliminadas sin ningún problema.
*Antes de optimizar algo tan importante como la Base de Datos se recomienda hacer una copia de seguridad de la base de Datos.
Una de las mejores técnicas para mejorar el rendimiento sin duda alguna cuando se tienen muchos plugins, de los cuales se están ejecutando sus scripts en todas las páginas de la web, sin embargo, estos plugins se están usando únicamente en algunas páginas específicas de nuestra web. Allí es donde entra Asset CleanUp, gracias a su gestor de CSS Y JS podemos desactivar scripts que no necesitemos que se carguen fácilmente revisando una lista, por ejemplo, en nuestra página de inicio.
*Como punto extra Asset CleanUp también permite Precargar estos archivos CSS y JS.
Cloudflare nos dice que un CDN es una red de servidores vinculados entre sí cuyo objetivo es entregar contenido de la manera más rápida, económica, confiable y segura posible. Al utilizar un CDN podremos ver un aumento de rendimiento en la página web debido a que la red de servidores entregara el contenido al usuario que se encuentre más cerca a uno de ellos.
Se recomienda Cloudflare, Akamai o KeyCDN.
Utilizar métodos de precarga puede ayudarnos a que el contenido se cargué antes de tiempo, aumentando la experiencia de usuario, hay algunos plugins como Asset CleanUp que nos permiten activar esta opción a algunos elementos y puede ayudar con el rendimiento, también podemos encontrarlo en algunos otros plugin o aplicarlo con scripts a archivos específicos.
Usar servicios de cloud hosting los cuales están en el medio del hosting compartido y el hosting dedicado puede ser una gran opción si queremos ganar más rendimiento versus nuestros competidores, incluso pueden igualar y superar algunos VPS (Virtual Private Server) y servidores dedicados sin utilizar una CDN.
El cloud hosting que hospeda nuestra web está configurado con recursos dedicados que tienen la gran ventaja de ser flexibles, si por alguna razón se detectarán picos en nuestra web el cloud hosting puede salvarnos aumentando estos recursos, además, muchos servicios de Cloud Hosting ofrecen gratis CDN, ahorrándonos dinero extra.
A la hora de optimizar un sitio web es de suma importancia revisar si todas las solicitudes de http son útiles o no, de esto dependerá que la experiencia del usuario no se vea afectada y nuestro sitio se cargue más rápido, esto lo puedes ver en las DevTools del navegador en el apartado de (Network).
Evitar los redireccionamientos además de servir para el SEO pueden mejorar la experiencia del usuario, rastrearlos, identificarlos y corregirlos puede marcar una diferencia general en la web. Es recomendable crear una página de error 404 también.
Si estas utilizando apps de terceros como Google Tag Manager, o plugins que se ejecutan y envían solicitudes extra a nuestro servidor debemos tomarnos un rato para configurarlas correctamente para que no afecten el rendimiento de nuestra web.
Por otro lado, optimizar las fuentes tanto locales como las de Google también puede ayudarnos un poco con algo de velocidad extra.
Todas estas técnicas que nos encontramos en plugins de optimización pueden ayudarnos de un modo u otro a la hora de cargar más rápido nuestra web y mejorar nuestro rendimiento, sin embargo, debemos tener cuidado como las utilizamos.
Lazy Loading <img src=”URL” loading=”eager|lazy”>
Dependiendo de lo que queramos conseguir el lazy loading o carga diferida puede ayudarnos a ahorrar recursos al retrasar la carga de las imágenes hasta que estén a la vista de nuestro navegador, sin embargo, cuando queremos tener mejor rendimiento en el First Contentful Paint (FCP), no es una buena opción ponerle lazy loading a los primeros elementos que se ven en pantalla cuando se carga una página, es primordial quitarle el lazyload o dejar su valor por defecto.
El valor “eager” corresponde al valor por defecto sin carga diferida y “lazy” para activarla.
Defer <script src=”example.js” defer></script>
El atributo “defer”, que también es carga diferida es otra de las técnicas de optimización, pero esta vez para los scripts CSS y JS que se ejecutan en una página web, lo que hace defer es descargar los archivos asincrónicamente, sin embargo, solo ejecuta los scripts en orden cuando el HTML allá terminado de ser analizado.
Async <script src=”example.js” async></script>
El atributo “async” hace que los scripts sean cargados asincrónicamente y se ejecuten tan pronto como estén disponibles sin llegar a bloquear el análisis del HTML, sin embargo, es importante tener en cuenta que, si tenemos scripts que deben cargar en orden como, por ejemplo: script1.js y script2.js, async puede cargar el script2.js primero si este llegase a descargarse antes que el script1js, dando paso a comportamientos potencialmente inesperados.
Aplicar correctamente estas técnicas puede dirigir a un sitio web a una mejora segura en la optimización del rendimiento y una mejor experiencia para nuestros usuarios.
Como último punto en esta guía, pero no menos importante se encuentra el verificar que todos nuestros elementos estén bien configurados y funcionando correctamente, debemos preguntarnos cosas como: ¿nuestras imágenes están funcionando bien?, ¿se están reescalando imágenes enormes, aunque estén optimizadas?, ¿hay contenedores extra que no deberían existir en la estructura? ¿Se puede ocultar o borrar algo en el responsive de Tablet/móvil?
Son algunas de las cosas que debemos revisar para asegurarnos que el rendimiento general y la presentación se mantengan intactas a la vista de nuestros usuarios.
Y así termina esta gran guía Masters, es mi estrategia actual que estoy usando a la hora de hacer WPO antes del SEO, espero honestamente que les sea de utilidad y puedan llevar el rendimiento de sus sitios web a otro nivel, ¡sin más que decir nos vemos en otro artículo cracks!.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
