Arreglar un sitio de WordPress lento: ¡Guía de optimización del frontend!

A nadie le gusta un sitio web lento, ya que no sólo frustra a los usuarios sino que también genera pérdidas importantes. No se trata sólo de perder visitantes; se extiende a una disminución en las clasificaciones de Google y un impacto tangible en los ingresos. Para subrayar este punto, considere los hallazgos de un estudio de Akamai:

Un retraso de apenas 100 milisegundos en el tiempo de carga de un sitio web puede reducir las tasas de conversión en un 7 por ciento.

Esta sorprendente estadística subraya el vínculo fundamental entre la velocidad de un sitio y su éxito financiero. Garantizar un rendimiento rápido del sitio no se trata sólo de mejorar la experiencia del usuario, sino que también es un factor crucial para mantener y aumentar los ingresos.

Para abordar el problema, aquí hay una Guía de inicio para ayudar a mejorar un sitio lento, diseñada específicamente para propietarios de sitios web de WordPress que buscan profundizar en el ámbito de la optimización del frontend. Para embarcarse en este viaje, es esencial comenzar con una comprensión básica de lo que constituye una instalación normal de WordPress.

Mi filosofía detrás de la optimización, tanto en mi trabajo profesional como en mi vida personal, gira en torno a dos principios clave: Reducir y Reutilizar . En el contexto de WordPress, "reducir" se refiere a un conjunto de estrategias destinadas a minimizar el uso de recursos. Esto implica optimizar para tamaños de archivos más pequeños, reducir la cantidad de solicitudes de archivos y garantizar una ejecución de código más eficiente. Estas acciones no sólo mejoran el rendimiento de un sitio de WordPress sino que también contribuyen a una experiencia más ágil y fácil de usar.

Por otro lado, "reutilizar" en este contexto se trata de aprovechar el almacenamiento en caché en varios niveles de nuestra configuración. Esto significa almacenar y reutilizar datos y recursos de forma inteligente en lugar de generarlos o solicitarlos repetidamente. El almacenamiento en caché puede ocurrir en diferentes capas, incluido el almacenamiento en caché del navegador, el almacenamiento en caché del lado del servidor y el almacenamiento en caché a través de redes de entrega de contenido. Al implementar estas estrategias, podemos mejorar significativamente los tiempos de carga y reducir la carga del servidor, haciendo que el sitio web sea más resistente y receptivo.

Entonces, comencemos con la optimización del sitio. Para este artículo, en lugar de la teoría, también hemos creado un sitio en un VPS de un solo núcleo de Linode con 2 GB de RAM donde también podemos explorar técnicas avanzadas más adelante. Es una instalación estándar de WordPress con el tema Shopay, por lo que también tiene algunos complementos adicionales que se pueden consultar y también es un sitio web WooCommerce un poco pesado. También importamos su demostración e instalamos los siguientes complementos que se encuentran comúnmente. Así es como se ve después de importar la demostración:

Usaremos WP Rocket para la optimización, ya que tiene el mejor equilibrio entre opciones y funcionalidad.

Paso 1: crear una línea de base

Antes de iniciar cualquier proyecto de optimización debemos establecer dónde nos encontramos y las herramientas que utilizaremos para ello. A continuación se muestran algunos sitios web y herramientas comunes que recomendamos para comenzar y que nos ayudarán a comparar nuestros cambios:

• GTMetrix : Es una herramienta online que analiza el rendimiento de un sitio web. Proporciona informes sobre el tiempo de carga de la página, el tamaño de la página y otras métricas clave de rendimiento, utilizando Google Lighthouse y su propio sistema de calificación. GTmetrix evalúa los sitios web en función de la velocidad y la eficiencia, ofreciendo información y recomendaciones de optimización para mejorar la experiencia del usuario y la funcionalidad del sitio.
• Monitor de consultas   — WordPress es una herramienta poderosa para desarrolladores y administradores de sitios. Ofrece un análisis detallado de consultas de bases de datos, errores de PHP, llamadas a API HTTP y más, directamente desde el panel de administración de WordPress. Este complemento es particularmente útil para diagnosticar problemas de rendimiento, ya que permite a los usuarios ver qué complementos, temas o configuraciones están afectando el rendimiento del sitio.

• PageSpeed ​​Insight : es una herramienta proporcionada por Google que analiza el contenido de una página web y luego genera sugerencias para hacer esa página más rápida. Proporciona versiones móviles y de escritorio del rendimiento de una página con una puntuación que va de 0 a 100. Las puntuaciones más altas indican un mejor rendimiento.

Puede crear una hoja de Google y comparar la página que está intentando optimizar usando estas herramientas y poner los números en la hoja de Excel; la monitorearemos después de cada cambio.

Para el sitio de prueba: no está mal, pero se puede mejorar.

Paso 2: Comprueba tu hosting

En la mayoría de los casos, los sitios de los usuarios no son los culpables, sino el alojamiento que están atropellando. Hay mucha sobreventa y colocación de demasiados sitios en el mismo servidor en la industria del hosting compartido. Y, a veces, la carga de su sitio puede estar provocando que los recursos asignados se agoten si se encuentra en un servidor VPS/dedicado. No todas estas herramientas funcionarán, pero te ayudarán a ver si necesitas actualizar a un mejor host.

• Punto de referencia : para hacer esto, puede utilizar un complemento de WordPress llamado wpbenchmark. Esto comparará rápidamente varias partes de su alojamiento, incluida la CPU, el disco y la base de datos. A veces puede ayudarle rápidamente a descubrir los cuellos de botella. Mantener un objetivo de 8+ debería estar bien.

• Carga del servidor : Es posible que necesite un inicio de sesión SSH para acceder a la línea de comando donde puede ejecutar una línea de comando top o htop . Vea cuánta carga informa el servidor y qué procesos están utilizando el servidor.

Si descubre que su servidor está sobrecargado o tiene un rendimiento deficiente, o ve un robo significativo si se ejecuta a la altura. Luego debe comunicarse con su proveedor de alojamiento y, si no puede resolver la carga, podría considerar cambiarlo.

Para el sitio de prueba: el servidor obtiene una puntuación de 8+, con una carga mínima del servidor y 0,93 segundos en Query Monitor.

Paso 3: Reducir las solicitudes

Reducir la cantidad de solicitudes HTTP es crucial para una carga más rápida de la página web, ya que cada solicitud requiere tiempo. Menos solicitudes significan menos conexiones y transferencias de datos entre el cliente y el servidor. Esto conduce a un uso más eficiente del ancho de banda y de los recursos del servidor.

Instalaremos WP-Rocket en este paso ya que tiene la mayoría de las funciones necesarias para los siguientes pasos.

• Minificación : La minificación en la optimización de WordPress implica comprimir archivos CSS y JavaScript eliminando caracteres innecesarios, reduciendo así su tamaño. Como siguiente paso, combine estos archivos. Este proceso reduce significativamente la cantidad de solicitudes HTTP y mejora los tiempos de carga de la página.

• Aplazar y retrasar la ejecución de JS : "Aplazar" retrasa la carga de JavaScript hasta que el HTML se haya cargado por completo, evitando que JS bloquee la representación de la página. "Retrasar la ejecución de JS", por otro lado, carga JavaScript solo cuando un usuario interactúa con la página (como hacer clic o desplazarse), lo que reduce el tiempo de carga inicial y mejora la primera impresión del usuario sobre la velocidad del sitio. Estos métodos también reducen la cantidad de solicitudes y la carga inicial de la CPU.

• Imagen de carga diferida : en lugar de cargar todas las imágenes en una página web a la vez, la carga diferida difiere la carga de las imágenes hasta que están a punto de ingresar a la ventana gráfica del usuario. Esto significa que las imágenes se cargan sólo cuando es necesario, mientras el usuario se desplaza por la página. Este enfoque reduce significativamente el tiempo de carga inicial, ahorra ancho de banda tanto para el usuario como para el servidor,
• Iframes e incrustaciones : la carga de incrustaciones de terceros también puede agregar una cantidad significativa de solicitudes, también se pueden cargar de forma diferida o cuando alguien hace clic en ellas.

Por el bien del artículo, hemos desactivado el almacenamiento en caché de páginas en este momento.

Paso 4: Reduzca el tamaño de los archivos

Reducir el tamaño de los archivos es una estrategia clave en la optimización del rendimiento web. Esto conduce a tiempos de carga de página más rápidos, ya que los archivos más pequeños requieren menos tiempo para descargarse. Esto no sólo mejora la experiencia del usuario al proporcionar un acceso más rápido al contenido, sino que también conserva el ancho de banda, tanto para los usuarios como para los servidores.

• Optimizaciones de imágenes : las técnicas comunes incluyen el uso de imágenes responsivas, la adopción del formato WebP y la optimización de los tamaños JPEG. Las imágenes responsivas garantizan que se muestre el tamaño de imagen correcto según el dispositivo del usuario, lo que mejora los tiempos de carga y la calidad visual. El formato WebP ofrece características de compresión y calidad superiores en comparación con los formatos tradicionales como JPEG y PNG. La optimización del tamaño JPEG mediante algoritmos de compresión reduce el tamaño del archivo sin una pérdida significativa de calidad, lo que garantiza tiempos de carga más rápidos y una mejor experiencia de usuario.
• Comprimir JS y CSS : este proceso minimiza el tamaño de estos archivos, eliminando caracteres innecesarios como espacios en blanco, saltos de línea y comentarios. Como resultado, el navegador requiere menos tiempo para descargar y analizar estos archivos, lo que permite una representación de la página más rápida.

• Compatibilidad con Gzip : implica la compresión del lado del servidor de archivos web como HTML, CSS y JavaScript antes de enviarlos al navegador. Esta compresión reduce significativamente el tamaño de los archivos, lo que genera velocidades de transmisión más rápidas y tiempos de carga de páginas más rápidos.

Para el sitio de prueba: nuestro servidor tiene gzip habilitado de forma predeterminada. Los nuevos números.

Paso 5: reduzca la cantidad de complementos

Minimizar la cantidad de complementos en WordPress mejora la velocidad y el rendimiento del sitio, ya que menos complementos significan menos código para cargar. También mejora la seguridad al reducir posibles vulnerabilidades. La optimización de los complementos facilita el mantenimiento del sitio web y reduce los problemas de compatibilidad.

• Reduzca la cantidad de complementos: primero, identifique y elimine los complementos que no se utilizan con regularidad. Estos suelen consumir recursos innecesariamente y pueden ralentizar su sitio web. Cuando sea posible, reemplace la funcionalidad del complemento con código personalizado; esto reduce la dependencia del código de terceros y, a menudo, puede ser más eficiente y optimizado. Además, considere utilizar servicios de terceros para funcionalidades que antes manejaban los complementos.
• Complementos por página : si no es posible reducir la cantidad de complementos, existe una opción para ejecutar páginas en páginas/nivel de usuario o tipo de contenido específicos. Un complemento común utilizado para esto es el complemento Organizador de complementos.
• Creadores de temas versus creación nativa : los creadores de temas ofrecen mayor flexibilidad y facilidad de uso, ideales para usuarios sin experiencia en desarrollo, ya que permiten un diseño personalizado con interfaces simples de arrastrar y soltar. Sin embargo, para sitios web más complejos, los temas nativos suelen ser superiores debido a su código optimizado, lo que puede conducir a un mejor rendimiento y tiempos de carga más rápidos.

Si ve los principales sitios que ejecutan WordPress como techcrunch.com, time.com, notará que la mayoría tendrá temas nativos y ejecutará una cantidad mínima de complementos.

Para el sitio de prueba: hemos desactivado complementos que no necesitamos.

Paso 6: Solicitud de reutilización, también conocida como almacenamiento en caché

El almacenamiento en caché en WordPress es una técnica poderosa que mejora significativamente el rendimiento y la velocidad del sitio web. Implica almacenar copias del contenido del sitio web, como páginas generadas o resultados de consultas, para entregarlas más rápido a los visitantes que regresan. Este proceso reduce la carga en el servidor, ya que no necesita regenerar el mismo contenido en cada visita.

• Almacenamiento en caché de páginas : esta técnica evita la necesidad de cargar y procesar los scripts PHP con cada carga de página, lo que acelera significativamente los tiempos de respuesta. Como resultado, reduce la carga del servidor y mejora el rendimiento del sitio web, especialmente cuando hay mucho tráfico. Algunos complementos comunes son {mencionar complementos}
• Almacenamiento en caché de objetos : este método almacena los resultados de las consultas de la base de datos, lo que reduce la necesidad de consultar la base de datos repetidamente para solicitudes frecuentes. Al almacenar en caché estos objetos, como datos de usuario o información de publicaciones, el servidor puede recuperar y servir rápidamente estos datos sin reprocesar las mismas consultas.
• Caché del navegador : esto implica almacenar recursos del sitio web como hojas de estilo, imágenes y archivos JavaScript localmente en el navegador del usuario. Una vez que estos recursos se descargan en la primera visita, el navegador no necesita recargarlos en visitas posteriores. Esto reduce significativamente los tiempos de carga y el uso de ancho de banda para los visitantes que regresan.

Para el sitio de prueba: hemos habilitado la caché de página con WP-Rocket, la caché de objetos de Redis y la caché del navegador también está configurada en los encabezados (ayuda en la vista repetida). Los nuevos números

Paso 7: Almacenamiento en caché a nivel de aplicación

El almacenamiento en caché a nivel de aplicación, que utiliza herramientas como Varnish, Nginx FastCGI o LiteSpeed ​​Cache, opera fuera de WordPress y puede almacenar en caché páginas web enteras a nivel de servidor. Este tipo de almacenamiento en caché es muy eficiente ya que sirve el contenido almacenado en caché directamente, evitando por completo la necesidad de cargar WordPress. Generalmente es más rápido que los complementos de almacenamiento en caché específicos de WordPress, que aún implican algo de procesamiento de bases de datos y PHP.

• Caché de aplicación : en la mayoría de los casos, esto requerirá que su host admita la aplicación que realiza el almacenamiento en caché. Estos siempre serán más rápidos que el caché más simple basado en complementos de WordPress y se pueden escalar hasta cierto punto.
• Edge Caching : Implica almacenar copias de contenido web en servidores distribuidos geográficamente, más cerca de los usuarios de todo el mundo. Esto reduce significativamente el tiempo hasta el primer byte (TTFB) para los usuarios que están lejos del servidor de origen, ya que el contenido se sirve desde el centro de datos más cercano. Cubrimos esto en la siguiente sección.

Para el sitio de prueba: tenemos barniz disponible en nuestros servidores y para Edge Caching usaremos Cloudflare APO (5$/mes).

Paso 7: use una CDN

El uso de una red de entrega de contenido (CDN) mejora significativamente el rendimiento y la velocidad del sitio web. Una CDN distribuye el contenido del sitio web a través de múltiples servidores globales, lo que garantiza que los usuarios accedan a los datos desde la ubicación más cercana y reduce los tiempos de carga. También ayuda a equilibrar las cargas de tráfico y manejar grandes volúmenes de tráfico, evitando la sobrecarga del servidor.

• Almacenamiento en caché de activos estáticos: al almacenar en caché activos estáticos como imágenes, CSS y archivos JavaScript en servidores CDN globales, estos elementos se cargan más rápido ya que se entregan desde el servidor más cercano al usuario. Esto reduce drásticamente el tiempo de carga de estos activos, particularmente para usuarios geográficamente distantes del servidor original.

Para el sitio de prueba: trasladamos el DNS a Cloudflare y habilitamos APO para el almacenamiento en caché perimetral. TTFB similares ahora deberían estar disponibles a nivel mundial .

Paso 8: Firewall y Bots básicos

Los cortafuegos mitigan eficazmente la carga del servidor al bloquear robots y rastreadores irrelevantes, que a menudo consumen recursos innecesarios. Esta acción evita que estos scripts automatizados sobrecarguen el servidor, preservando así el ancho de banda y la eficiencia de la CPU. Como resultado, los firewalls garantizan que la capacidad del servidor esté dedicada al tráfico legítimo, mejorando el rendimiento y la estabilidad del sitio web. Esto conduce a una experiencia de usuario mejorada en general, con un acceso más rápido e interacciones más confiables en el sitio web.

• Nivel de WordPress : un firewall a nivel de WordPress ofrece una solución de seguridad sencilla para muchas configuraciones, proporcionando una capa de protección fácil de implementar contra amenazas comunes. Si bien bloquea eficazmente muchas solicitudes y ataques dañinos, opera a nivel de PHP, lo que significa que los agentes maliciosos aún pueden consumir recursos del servidor al activar procesos PHP. Ofrecen un equilibrio entre simplicidad y seguridad, lo que los convierte en una opción popular para las necesidades básicas. Recomendamos Wordfence para esto.
• Basado en proxy inverso : filtra el tráfico antes de que llegue al servidor y bloquea las solicitudes maliciosas en el borde de la red. Este enfoque evita que los malos agentes consuman recursos del servidor, ya que el tráfico no deseado nunca llega a la capa PHP de su sitio de WordPress. Además, estos servicios brindan beneficios adicionales como protección DDoS y capacidades CDN, lo que mejora tanto la seguridad como la velocidad del sitio web. Esto los convierte en una solución más completa y eficaz para proteger y optimizar sitios web. Recomendamos utilizar Cloudflare para esto, ya que el plan gratuito también permite una protección suficiente para la mayoría de los sitios.

Paso 9: Optimización para Core Web Vitals

Ahora que los conceptos básicos están en su lugar, finalmente optimizamos los elementos básicos de la web para comenzar. Puede obtener el complemento Desactivar JS para clonar y asegurarse de que su sitio web tenga el mismo aspecto con Javascript habilitado o deshabilitado. A continuación, pasamos a optimizar los 3 parámetros más importantes de Core Web Vitals

Los tres parámetros LCP, FID y CLS deben estar en verde para obtener una buena puntuación. A continuación se ofrecen algunos consejos para optimizarlos.

• Optimización para LCP : Largest Contentful Paint (LCP) es una medida del rendimiento de carga. Si ha realizado las mejoras anteriores, como optimización de imágenes, uso de webp y carga diferida, en la versión de escritorio debería ser fácil obtener una puntuación superior a 90. Las optimizaciones necesarias para esto son:
  — Mejorar el tamaño de la imagen y la imagen basada en WebP
  — Carga diferida de recursos como imágenes, iframes, etc.
  — Reducir las solicitudes y optimizar CSS y JS
• Optimización para FID : Retraso de la primera entrada (FID), mide la interactividad. Las optimizaciones necesarias para esto son las que se trataron anteriormente:
  — Posponer Javascript para mejorar la rapidez con la que la página se vuelve interactiva
  — Evite cargar scripts de terceros al principio
• Optimización para CLS : Cumulative Layout Shift (CLS), que mide la estabilidad visual. Esto significa principalmente que el diseño no se mueve cuando el sitio se está cargando, algunos métodos rápidos para hacerlo son especificar las dimensiones de imagen y video y asegurarse de que el sitio se vea igual con JS desactivado (en Chrome puede usar). Algunos consejos rápidos
  — Especificar dimensiones para imágenes y videos
  — Evite el contenido dinámico en la mitad superior de la página
  — Mantenga espacio donde se cargarán los anuncios y otro contenido dinámico similar.

Espero que después de seguir los pasos hayas podido hacer que tu sitio sea más rápido. Si tiene otras ideas y sugerencias que puedan generar mejoras significativas en el lado frontal de las cosas.

Puneet

Puneet Sharma es un experto en optimización de SMTP y WordPress. Con más de 10 años de experiencia y compromiso, crea configuraciones de correo electrónico efectivas en varias plataformas que generan clientes potenciales y aumentan las conversiones.