Cómo acelerar WordPress (optimizaciones que usamos para Core Web Vitals)

WordPress es el sistema de gestión de contenido (CMS) líder y más popular del mundo. De hecho, actualmente impulsa más del 43% de todos los sitios web en Internet y continúa ganando participación de mercado año tras año. Marcas y organizaciones prestigiosas como Stanford, The National Archives, Creative Commons, Sony Music, Fortune e incluso The White House usan WordPress para potenciar sus sitios.

En mis más de 20 años de trabajo en Internet, he usado todo tipo de plataformas, como Drupal, Joomla, Ghost, Medium y muchas más. Creo que WordPress es, con mucho, la mejor solución para todos los sectores: PYMES, instituciones educativas, blogs de alto tráfico e incluso sitios empresariales.

¿Por qué? Porque WordPress le brinda el mayor control y flexibilidad para crear, administrar y comercializar su sitio web. Sin embargo, solo usar WordPress no es suficiente; la velocidad juega un papel importante para garantizar que tengas éxito. Y eso es en lo que nos sumergiremos a continuación.

A nadie le gusta un sitio web lento (incluido Google)

Si bien WordPress es increíblemente popular, usarlo también puede tener un costo de rendimiento si no sabe lo que está haciendo. Inicialmente, WordPress era principalmente una plataforma de blogs. Pero se ha convertido en mucho más que eso, ya que se agregaron más funciones a lo largo de los años. El problema ahora es que con tantas configuraciones y opciones diferentes, WordPress puede funcionar lentamente si no se configura u optimiza correctamente.

¿Por qué es importante un sitio web lento?

Porque siempre será muy perjudicial para la experiencia y la primera impresión del visitante. Juega un factor significativo en las tasas de rebote y conversión. Los días del acceso telefónico quedaron atrás y la gente ya no tiene la paciencia que solía tener . Si tienen que esperar mucho tiempo para que se cargue una página, lo más probable es que presionen el botón Atrás y elijan el siguiente resultado del motor de búsqueda.

Al igual que WordPress ha evolucionado a lo largo de los años, también lo ha hecho la medición del rendimiento. Si bien el tiempo total de carga sigue siendo importante, ya no es una medida en la que deba concentrarse. Google ahora usa lo que ellos llaman Core Web Vitals. Su sitio obtiene una puntuación basada en una combinación de cosas como la pintura con contenido más grande (LCP), el primer retraso de entrada (FID) y el cambio de diseño acumulativo (CLS).

En pocas palabras, si bien la cantidad de código siempre será importante para el rendimiento, ahora también debe considerar cómo su sitio web carga el código .

Y para tirar otra llave en la mezcla. La velocidad de la página móvil también es un factor de clasificación. Es por eso que Core Web Vitals y cómo indexan las SERP se basan completamente en dispositivos móviles. A Google no le importa qué tan rápido se cargue su sitio web en las computadoras de escritorio.

¿Por dónde empiezas?

Lo primero que debe hacer es probar la velocidad de su sitio de WordPress. Esto le dará un punto de referencia que puede utilizar como referencia. Recomiendo usar la herramienta gratuita PageSpeed ​​Insights. Si quieres un poco más de datos sobre accesibilidad, SEO, etc., puedes utilizar la herramienta Medir de web.dev. Ambos son desarrollados por Google, con la tecnología de Lighthouse y utilizan Core Web Vitals para la puntuación.

GTmetrix es otra herramienta útil que utiliza Core Web Vitals en muchas de sus métricas de rendimiento. También le permiten ver una cascada de sus activos, lo que a veces es necesario para obtener una mejor idea de lo que está sucediendo. Sin embargo, tenga en cuenta que la versión gratuita solo muestra las puntuaciones en el escritorio, no en el móvil.

Debido al almacenamiento en caché, las CDN y otras secuencias de comandos de terceros, asegúrese de ejecutar siempre las pruebas de velocidad al menos tres veces para obtener un resultado preciso. E independientemente de la herramienta que utilice, es importante elegir una y apegarse a ella. Cada herramienta mide la velocidad de manera diferente y necesita una línea de base precisa para monitorear las mejoras de rendimiento.

Si necesita medir las consultas y el rendimiento de la carga de la base de datos, Query Monitor y New Relic APM son excelentes soluciones. Si está alojando con Kinsta, también tienen una herramienta APM gratuita en su panel de MyKinsta.

Acelerar WordPress (front-end, back-end)

Esta publicación cubrirá, paso a paso, exactamente cómo configuro todos mis sitios de WordPress, una combinación de blogs de alto tráfico y sitios de comercio electrónico. Contiene recomendaciones que se aplican tanto al front-end como al back-end (panel de administración de WordPress) y optimizaciones diseñadas específicamente para Google Core Web Vitals.

Primero, un poco sobre mí: he estado usando WordPress por más de 14 años. Anteriormente trabajé para Kinsta; una empresa de alojamiento de WordPress administrada de alto rendimiento. Antes de eso, trabajé para KeyCDN, una red global de entrega de contenido. Así que se podría decir que el rendimiento web lo llevo en la sangre.

He pasado miles de horas optimizando sitios de WordPress para asegurarme de que funcionen con un rendimiento óptimo. Como comercializador de Internet, WordPress me ha ayudado a lograr cosas increíbles, ¡y también puede ayudarlo a usted! Simplemente siga los pasos a continuación para acelerar WordPress al instante .

Le prometo que, sin importar su experiencia o nivel de experiencia, encontrará algo útil en esta publicación.

1. Invierta en alojamiento rápido de WordPress

Impacto: velocidad de front-end y back-end (panel de administración de WordPress).

Una de las formas más fáciles e importantes de acelerar WordPress es comenzar con una base sólida. Y eso significa que debe elegir un host de WordPress rápido y confiable . Desafortunadamente, este primer paso es donde mucha gente se equivoca. Muchos subestiman el impacto que tiene un proveedor de alojamiento en su rendimiento. Hacer esto bien le ahorrará mucho tiempo y frustración.

Si está en un sitio web pequeño, lo más probable es que tenga un plan de alojamiento web compartido económico. El propio nombre del plan define lo que es. El término "compartido" significa que su sitio web está alojado en un servidor junto con muchos sitios web de otras personas. Esto significa que todos luchan por los mismos recursos.

Estoy seguro de que ve bloggers y comerciantes afiliados todo el tiempo anunciando proveedores de alojamiento baratos como BlueHost o GoDaddy. Lamento ser el portador de malas noticias, pero el 99% de estos sitios están a cargo de comerciantes afiliados que simplemente intentan ganar dinero rápido. La mayoría de las veces, ni siquiera los usan; solo están tratando de referir tantos como puedan.

Elegir un host barato es una de las peores decisiones que podría tomar al alojar su sitio web. Por ejemplo, ¿sabía que BlueHost es propiedad de EIG? EIG es una corporación que ha estado comprando todos los hosts de bajo rendimiento durante años. Aquí hay una lista completa de hosts propiedad de EIG. Casi puede esperar el mismo servicio horrible de todos ellos. Todo lo que les importa es su resultado final.

Si bien es cierto que también soy un vendedor afiliado, mi pasión por el rendimiento web siempre ha superado eso. Solo recomiendo proveedores de alojamiento que realmente uso para mis propios sitios (incluido el woorkup). Elegir el host adecuado significa que no tiene que preocuparse por el tiempo de inactividad o la velocidad. A continuación hay dos proveedores de alojamiento de WordPress que respaldo al 100%.

Terreno del sitio

Si está buscando un alojamiento de WordPress más asequible , le recomiendo SiteGround. Ofrecen alojamiento administrado de WordPress en Google Cloud Platform con HTTP/3 (QUIC), PHP 8, SSD y toneladas de otras funciones desde solo $ 6.99 al mes. Esto es tan bueno como lo es para la gente de alojamiento más barata. Asegúrate de revisar mi revisión detallada de SiteGround.

SiteGround es una excelente opción si necesita un host asequible que siempre se mantenga actualizado con la última tecnología. Sin embargo, una vez que comience a recibir mucho tráfico, le recomiendo invertir en un proveedor de alojamiento más premium como Kinsta.

Kinsta

Si está buscando alojamiento de WordPress administrado de alto rendimiento , no tengo más que elogios para Kinsta. Su amplio conjunto de características es lo que los diferencia de otros proveedores de alojamiento. La infraestructura de Kinsta funciona con Google Cloud Platform y su red de nivel premium. Utilizan las máquinas más rápidas disponibles (máquinas virtuales optimizadas para computación C2) en todos sus planes.

Kinsta utiliza contenedores de software aislados, lo que significa que no se comparten recursos entre sitios, lo que lo hace ideal para la escalabilidad y la seguridad. Si desea un panel de administración de WordPress rápido o está a punto de transmitirse en Shark Tank, este es el host que necesita. Algunos de sus clientes actuales incluyen grandes nombres como Buffer, Flippa, Mint.com, Ubisoft y TripAdvisor.

Algunas de las características y tecnología de Kinsta incluyen más de 29 ubicaciones de centros de datos, Nginx, PHP 8.1, HTTP/3, CDN y SSL gratuitos, sitios de prueba, MariaDB, monitoreo de tiempo de actividad, APM y protección DDoS. Tener la última versión de PHP es más importante de lo que crees. ¿Por qué? Porque PHP 8.1 es un 47,10 % más rápido que PHP 8.0 (medido en solicitudes por segundo) y un 50 % más rápido que PHP 7.2 (fuente). Eso es un aumento de rendimiento gratuito sin ningún trabajo realizado de su parte.

¡Kinsta también tiene el mejor soporte en el negocio! Su equipo experto de WordPress está ahí para ayudar las 24 horas del día, los 7 días de la semana. Todos mis sitios, incluido woorkup, están alojados con Kinsta . Asegúrese de revisar mi revisión detallada de Kinsta.

Más allá del alojamiento, Kinsta ofrece una increíble herramienta de desarrollo local gratuita llamada DevKinsta. Puede usar esto para configurar fácilmente entornos de prueba locales de WordPress en cuestión de minutos. Una gran ventaja de usar esto sobre un sitio de prueba es que no hay latencia de red.

2. Implementar el almacenamiento en caché

Impacto: velocidad de front-end y back-end (panel de administración de WordPress)

Cuando un usuario visita su sitio por primera vez, el servidor procesa la solicitud, incluidas todas las consultas de la base de datos necesarias para representar la página. A continuación, la página se envía al navegador del usuario. El tiempo de procesamiento inicial es la razón por la que es tan importante contar con un proveedor de alojamiento rápido.

El caché es la capa que se encuentra entre su servidor. El caché se crea y almacena en la memoria RAM o en el disco durante esa solicitud inicial, y las solicitudes posteriores llegan a la capa de caché en lugar de a su servidor . Esto da como resultado velocidades ultrarrápidas (hasta un 40 % más rápidas en mis pruebas) para el usuario, ya que esencialmente omite la fase de procesamiento del servidor. Otro beneficio es que también reduce la carga en su servidor.

Si el almacenamiento en caché no está configurado correctamente, esto provocará un mayor tiempo hasta el primer byte (TTFB) y lo que también se conoce como "tiempo de espera". Con respecto a Google Core Web Vitals, esto generará una advertencia para "reducir el tiempo de respuesta inicial del servidor". La advertencia se activa si el TTFB es superior a 600 ms (fuente).

Como se mencionó anteriormente, debido al almacenamiento en caché, asegúrese de ejecutar siempre las pruebas de velocidad al menos tres veces para obtener un resultado preciso. Si el caché de su sitio acaba de expirar, verá la advertencia anterior la primera vez que ejecute la prueba.

El almacenamiento en caché generalmente se implementa de dos maneras diferentes:

• Almacenamiento en caché a nivel de servidor
• Complemento de almacenamiento en caché de WordPress

Almacenamiento en caché a nivel de servidor

El almacenamiento en caché a nivel de servidor es lo que recomiendo porque es rápido y fácil. Los proveedores de alojamiento de WordPress como Kinsta ya tienen caché a nivel de servidor y no hay problemas con los complementos o la configuración. Todo funciona de inmediato, ya sea que tenga un blog de alto tráfico o un sitio de comercio electrónico más dinámico. No tengo ningún complemento de almacenamiento en caché ejecutándose en este sitio web.

Complemento de almacenamiento en caché de WordPress

Si su proveedor de alojamiento no tiene almacenamiento en caché a nivel de servidor, entonces es cuando necesita instalar un complemento de almacenamiento en caché de WordPress. He probado muchos complementos de almacenamiento en caché a lo largo de los años, y recomiendo elegir uno de los siguientes:

• Caché más rápido de WP (gratis)
• Habilitador de caché (gratis)
• Cohete WP (premium)

Mejore su almacenamiento en caché

Una manera fácil de mejorar su almacenamiento en caché es aumentar el tiempo de caducidad del caché en su sitio de WordPress. Los tiempos de caché más largos conducen a un mejor rendimiento del sitio y mejores proporciones de HIT de caché. También puede corregir la advertencia de Google para "servir activos estáticos con una política de caché eficiente".

A continuación se muestra un ejemplo de lo que sucedió cuando aumentamos el tiempo de caducidad de la memoria caché de Kinsta de 1 hora a 7 días. Como puede ver, ¡el porcentaje de la tasa de caché HIT saltó dramáticamente! Eso significa que más visitantes obtienen nuestro sitio web utilizando el caché ultrarrápido, y se requieren menos trabajadores de PHP.

Si está alojando con Kinsta, los siguientes tiempos de duración de caché están disponibles directamente desde el panel de control de MyKinsta:

• 1 hora
• 2 horas
• 4 horas
• 8 horas
• 24 horas
• 7 días

Kinsta tiene reglas para purgar automáticamente páginas individuales y páginas críticas, como la página de inicio, inmediatamente cuando realiza actualizaciones. Esto garantiza una alta disponibilidad en todo momento y también asegura que sus visitantes vean sus actualizaciones más recientes.

Si está utilizando un proveedor de alojamiento diferente o un complemento de almacenamiento en caché, consulte su documentación o solicite su soporte para ver cómo aumentar el tiempo de vencimiento de su sitio de WordPress.

3. Usa un tema ligero de WordPress

Impacto: velocidad de front-end y back-end (panel de administración de WordPress)

Los temas de WordPress pueden hacer o deshacer su sitio. Hay un montón de temas inflados que pueden hacer que su sitio se rastree. Incluso con el alojamiento rápido de WordPress y el almacenamiento en caché implementados, la cantidad de código y las solicitudes siguen siendo importantes, especialmente cuando se trata de Google Core Web Vitals.

Cuando busca un tema de WordPress, también quiere asegurarse de que está comprando a una empresa de confianza con buenos desarrolladores y soporte.

He usado GeneratePress para todos mis sitios de WordPress, incluidos mis blogs y sitios de comercio electrónico, durante los últimos 5 años o más. ¡No podría estar más feliz y no puedo recomendarlo lo suficiente! GeneratePress es liviano y aún incluye muchas funciones.

La instalación base del tema GeneratePress WordPress obtuvo una puntuación de 100/100 según Google. Y esta prueba está emulada para dispositivos móviles. ¡Muy impresionante!

También quiero mencionar que debe tener cuidado al comprar temas y productos en ThemeForest. No digo que todos los desarrolladores de ThemeForest sean malos, pero desafortunadamente, muchos de ellos simplemente agregan contenido para aumentar sus ventas. Echa un vistazo a mi revisión detallada de GeneratePress.

Los creadores de páginas están destruyendo Internet

He trabajado en miles de sitios de WordPress a lo largo de los años, y todos los realmente lentos tienen una cosa en común: los creadores de páginas. Si desea un sitio rápido, debe alejarse de los creadores de páginas ahora.

Los creadores de páginas se desarrollaron originalmente debido a la falta de capacidad para diseñar fácilmente un sitio web sin código. Seamos honestos; era difícil construir un sitio de WordPress hace cinco años a menos que supieras cómo codificar. Los creadores de páginas cumplieron su propósito, ya que muchas personas de WordPress son "implementadores de sitios web", no programadores. Y es por eso que muchos creadores de páginas experimentaron un crecimiento vertiginoso.

Sin embargo, en estos días, las cosas son muy diferentes. ¡Ahora tiene increíbles complementos como GenerateBlocks, que le permite diseñar sitios web con 1/10 de la cantidad de código ! Ah, y tampoco tienes que hacer ninguna codificación real.

Eche un vistazo al tamaño general de la base de código de GenerateBlocks frente a Elementor, Oxygen y Divi.

• Es un 87% más pequeño que Oxygen.
• Es un 93 % más pequeño que Elementor.
• Es un 96 % más pequeño que Divi Builder.

Por supuesto, no tiene todas las campanas y silbatos elegantes, pero estas son las mismas cosas que le están causando problemas al tratar de clasificarse más alto con Core Web Vitals. Tomemos los controles deslizantes, por ejemplo. Los controles deslizantes deberían haber muerto hace años, pero todavía existen. Estos provocan advertencias de cambio de diseño acumulativo (CLS). Es mucho mejor diseñar un encabezado estático. Deshazte de las animaciones, deshazte de las partes móviles.

Luego tienes el DOM (Document Object Model). En pocas palabras, cada vez que se carga una página, el navegador analiza el HTML de una página y representa el DOM. Piense en esto como un árbol estructurado en cierto sentido. Sin embargo, este no es solo el código fuente HTML, ya que JavaScript puede manipularlo. Consulte este artículo sobre qué es exactamente el DOM.

No necesita comprender completamente el DOM, solo que cuantas más capas de código tenga, más elementos DOM habrá en una página. Un problema común entre los creadores de páginas es un tamaño excesivo de DOM. Esto se debe a que esencialmente están agregando código adicional como divs anidados, que crean un DOM más grande. Cuanto más grande sea el DOM, más se le penalizará en términos de rendimiento.

Los complementos como GenerateBlocks funcionan de manera un poco diferente. Si bien aún agregan código, trabajan más de cerca dentro de los parámetros de código ya existentes en el núcleo de WordPress. También agrega menos código en general, para empezar, porque se desarrolló desde cero teniendo en cuenta el rendimiento. Es por eso que muchas advertencias de Core Web Vitals nunca aparecen.

GenerateBlocks solo agrega un archivo CSS por página, que contiene todo el CSS generado por sus opciones. No hay Javascript o CSS en línea: todo está en un solo lugar ordenado. Los creadores de páginas, por otro lado, normalmente cargan docenas de archivos en cada página.

Muchos piensan que todo se reduce a una compensación entre rendimiento o diseño. Sin embargo, esto ya no es el caso. Muchos de los sitios de creación de páginas en los que he trabajado se pueden recrear fácilmente con un complemento como GenerateBlocks. Asegúrese de consultar mi revisión detallada de GenerateBlocks.

Es por eso que GeneratePress + GenerateBlocks es la mejor combinación para sitios en este momento. Literalmente, puede crear cualquier tipo de sitio que desee (sin necesidad de saber cómo codificar), y es por eso que recomiendo usar ambas soluciones. Su sitio estará preparado para el futuro en cuanto a rendimiento y Google Core Web Vitals.

4. CDN

Impacto: velocidad frontal.

No importa qué tan rápido sea su proveedor de alojamiento de WordPress, nunca podrá superar el problema de la latencia de la red. Es matemática básica. Sus datos se almacenan físicamente en un servidor en un centro de datos, y las cosas se vuelven más lentas para los usuarios cuanto más lejos están, ya que tienen que descargar su sitio web desde una gran distancia.

Una red de entrega de contenido (CDN) soluciona eso al almacenar copias de sus activos (imágenes, CSS, JS e incluso HTML) en servidores perimetrales en todo el mundo. También los almacena en caché . Cuando un visitante busca su sitio web, el contenido se entrega desde el servidor perimetral geográfico más cercano (caché) en lugar de su servidor web. Asegúrese de consultar mi artículo sobre una CDN para principiantes si desea obtener más información sobre cómo funcionan las CDN.

¿Cuánto ayuda un CDN? ¡He visto que un CDN aumenta las velocidades de un sitio de WordPress hasta en un 68%! Aquí está la prueba. Mucho dependerá de la distancia.

También es importante mencionar que esto no niega la importancia de tener una solución sólida de almacenamiento en caché configurada con su proveedor de alojamiento. El motivo es que la memoria caché en un CDN caduca. Cuando lo hace, desea una capa de reserva rápida.

Hay dos proveedores de CDN que recomiendo, cada uno con un enfoque ligeramente diferente que puede tomar:

• Cloudflare con APO
• claveCDN

Cloudflare con APO

Cloudflare es, con mucho, el proveedor de CDN más popular y destacado con más de 270 ubicaciones de borde en todo el mundo. Sin embargo, no son un CDN tradicional. Una CDN tradicional es más como un complemento que almacena en caché y entrega solo sus activos (imágenes, CSS, JS) en todo el mundo. Cloudflare es un proxy inverso.

Un proxy inverso significa que apunta su sitio web (DNS) a Cloudflare y enruta todo su tráfico a través de ellos. Se encuentran entre su sitio web y el Internet público.

La desventaja de ser un servicio de proxy completo es que el enrutamiento lleva tiempo. En el pasado, Cloudflare tenía el problema de que esta sobrecarga podía aumentar su tiempo de espera (TTFB). Sin embargo, esos días se han ido. Ahora tienen un servicio llamado Optimización automática de plataforma (APO), que almacena en caché todo su sitio, no solo los activos sino también HTML, en el servidor perimetral.

¿Por qué es esto tan importante? Porque en el pasado, una solicitud iría al servidor de su proveedor de alojamiento para descargar el HTML y su CDN para descargar los activos (imágenes, CSS, JS). Con APO, todas las solicitudes van directamente al servidor perimetral de Cloudflare más cercano al usuario (imágenes, CSS, JS y HTML).

¡Esto elimina el problema del tiempo de espera (TTFB) y es increíblemente rápido ! Tampoco tiene que precargar la memoria caché por servidor perimetral como una CDN tradicional. APO usa su KV para almacenar el caché y, en la primera visita, se distribuye instantáneamente en todos sus servidores perimetrales. Para la mayoría de los sitios, puede considerarlo como el alojamiento automático de una copia separada de su sitio web en todo el mundo. Tampoco tiene que meterse con ninguna regla de página confusa.

El servicio CDN de Cloudflare es gratuito y el servicio APO cuesta $5 al mes por dominio, independientemente de la cantidad de tráfico que reciba. ¡Así que es muy rentable! Si tiene curiosidad, estoy usando el servicio APO de Cloudflare en este sitio web. Todo lo que debe hacer es registrarse en APO e instalar el complemento gratuito de WordPress de Cloudflare.

Nota: ¡Kinsta pronto integrará el servicio APO de forma gratuita para todos sus clientes!

Asegúrese de consultar también estas configuraciones recomendadas para Cloudflare para obtener el mejor rendimiento.

Solución alternativa de Cloudflare

Si desea una solución completamente gratuita que sea altamente personalizable, también recomiendo el complemento WP Cloudflare Super Page Cache. Esto logra el mismo tipo de caché de borde de página completa y tiempo de espera bajo (TTFB). La única diferencia es que tiene que precargar el caché por servidor perimetral. Los desarrolladores de este complemento son increíblemente útiles y responden rápidamente.

claveCDN

Si está buscando un CDN tradicional, le recomiendo KeyCDN. A $0.04/GB, son increíblemente asequibles y su velocidad es ridículamente rápida. Un blog con una cantidad decente de tráfico generalmente se encuentra en el rango de ancho de banda de 20 a 25 GB, y con KeyCDN, costaría menos de $ 5 por mes.

KeyCDN existe desde hace muchos años y su servicio es excepcionalmente confiable (incluso más que Cloudflare), lo cual es muy importante cuando se trata de proveedores de CDN. Ofrecen más de 40 ubicaciones de borde, Let's Encrypt SSL, escudo de origen y tokens seguros sin cargo. También proporcionan almacenamiento en caché WebP.

Asegúrese de revisar mi revisión completa de KeyCDN. También puede usar nuestro complemento Perfmatters para implementar KeyCDN en su sitio de WordPress.

5. Optimización de imágenes

Impacto: velocidad frontal.

Optimizar el tamaño y la entrega de tus imágenes es algo que no puedes ignorar. Según The HTTP Archive, a partir de febrero de 2021, las imágenes representan en promedio el 48 % del peso total de la página de un sitio web en dispositivos móviles. Eso es bastante cerca de la mitad de los activos que el navegador tiene que descargar y entregar a un usuario.

Ahí es donde entra en juego la compresión de imágenes.

Compresión de imagen

La compresión es una forma de reducir el tamaño de los archivos de imagen mediante la eliminación de datos. Es una de las formas más sencillas de reducir el tamaño total de su sitio web y, una vez que tenga un sistema de sonido, en última instancia, puede dejarlo sin intervención.

Cargar imágenes de resolución completa en sitios web, especialmente aquellos en planes pequeños de alojamiento web compartido, ralentizará instantáneamente el tiempo de carga de su sitio web. Le sorprendería cuánto se pueden comprimir algunas imágenes sin degradación de la calidad.

Comprimo todas mis imágenes usando compresión con pérdida con el complemento de WordPress ShortPixel. Esto garantiza tamaños de página pequeños e imágenes de carga rápida que aún se ven hermosas. Cada imagen que agrego a una página o publicación se comprime automáticamente entre bastidores en la biblioteca de medios. Mi recomendación es siempre mantener sus imágenes por debajo de 100 KB .

También aprovecho el formato de imagen .webp. Este es un formato de imagen desarrollado por Google que es mucho más pequeño que PNG o JPG. Ahora es compatible con todos los navegadores modernos. Uso imágenes WebP en todos mis sitios . El complemento ShortPixel también puede hacer esto automáticamente.

¿Cuánto más pequeño es el formato de archivo WebP? Bueno, tome una de las imágenes en esta publicación de blog, por ejemplo. La imagen PNG tiene 60,6 KB, mientras que la versión WebP de la misma imagen tiene 16,3 KB. ¡Eso es una disminución del tamaño del 73,1 %!

Google también recomienda usar imágenes WebP. Al hacer esto, se solucionará la advertencia "servir imágenes en formatos de próxima generación".

También es importante en la configuración del complemento ShortPixel excluir los tamaños de miniatura que no usa en su sitio. Esto le ahorrará créditos y también hará que la compresión de imágenes sea más rápida. Como puede ver a continuación, en este sitio, excluyo todo excepto medium , medium_large y large .

También puede consultar los otros complementos de compresión de imágenes que recomiendo.

Imágenes de carga diferida

Más allá de la compresión de imágenes, también puede optimizar la entrega de sus imágenes utilizando la carga diferida. Este es el método de retrasar o diferir la carga de imágenes hasta que un usuario se desplace hacia abajo en la página (las imágenes ingresan dentro de la ventana gráfica).

¿Por qué esto funciona tan bien? Supongamos que tiene una publicación de blog de formato largo con 50 imágenes. De forma predeterminada, el navegador cargará las 50 imágenes cuando alguien visite el sitio. Incluso con imágenes optimizadas, esto puede llevar un tiempo, especialmente en dispositivos móviles.

Si carga las imágenes de forma diferida, solo cargará las imágenes hacia la parte superior de la página que el usuario ve en su navegador. La cantidad de imágenes varía según el tipo de navegador, el método de carga diferida, el tamaño de la ventana gráfica, etc. Pero independientemente, la idea es que generalmente reduce más del 85% de las solicitudes de imágenes.

Google en realidad recomienda la carga diferida. Si no lo implementa, verá la siguiente advertencia para "aplazar las imágenes fuera de pantalla".

WordPress 5.5+ tiene carga diferida nativa de forma predeterminada. Sin embargo, recomendamos usar la solución de carga diferida en Perfmatters. ¿Por qué? Porque nuestra solución es más rápida y mejor que la carga diferida nativa. Puede leer más sobre la carga diferida en Perfmatters.

Para habilitar la carga diferida en Perfmatters, simplemente actívela y estará listo para comenzar.

Ancho y alto de la imagen

Puede sonar relativamente simple, pero una manera fácil de mejorar su CLS y reducir los cambios de diseño es confirmar que todas sus imágenes tengan un conjunto de atributos de ancho y alto. Si a una imagen le faltan estos atributos, lo más probable es que vea una advertencia de Google que dice "los elementos de la imagen no tienen ancho y alto explícitos".

Cualquier tema bien codificado como GeneratePress debería agregar estos atributos por usted. Si su tema no lo es, le recomiendo que se comunique con el desarrollador, ya que realmente debe abordarse en la fuente. O puede agregar los atributos de ancho y alto que faltan automáticamente con nuestro complemento Perfmatters.

Imágenes del tamaño adecuado

Otra advertencia común que aparece es el tamaño adecuado de las imágenes. Si te has mudado a un nuevo tema de WordPress en algún momento, probablemente verás esto.

Esta advertencia se activa si el navegador muestra una imagen que es más grande que su contenedor. Tienes dos formas diferentes de arreglar esto:

1. Regenera las miniaturas de tus imágenes. Bastante rápido y fácil.
2. Fuerza imágenes más pequeñas en pantallas más pequeñas. Esto requiere un poco de código. Su desarrollador de temas probablemente pueda proporcionarle esto.

Consulte más detalles sobre cómo corregir la advertencia de imágenes de tamaño adecuado.

Precargar imágenes críticas

La precarga de imágenes principales (aquellas en la mitad superior de la página) puede ayudar a reducir los tiempos de mayor pintura con contenido (LCP) en Core Web Vitals. Por lo general, son imágenes como un logotipo, una imagen destacada en una publicación de blog, una imagen destacada en una página de destino, etc. Al cargarlas previamente, las mueve a la parte superior de la cascada y básicamente le dice al navegador que tienen prioridad. y debe cargarse de inmediato.

Puede precargar imágenes manualmente en nuestro complemento Perfmatters o incluso precargar automáticamente imágenes críticas.

6. Optimice la base de datos y reduzca el espacio en disco

Impacto: velocidad de front-end y back-end (panel de administración de WordPress).

Lo siguiente que debe hacer es asegurarse de que su base de datos de WordPress esté optimizada y de que no esté desperdiciando espacio en disco.

Antes de continuar, siempre es una buena práctica hacer una copia de seguridad de su sitio de WordPress. Si está utilizando un host como Kinsta, puede tomar una instantánea con un solo clic. De lo contrario, puede usar un complemento de copia de seguridad de WordPress.

Tablas de base de datos InnoDB

Si nunca antes ha realizado una optimización de la base de datos, lo primero que querrá comprobar es que no tiene ninguna tabla mixta de MyISAM e InnoDB.

Durante mucho tiempo, hubo dos tipos diferentes de motores de almacenamiento: MyISAM e InnoDB. MyISAM ahora está obsoleto e InnoDB ha sido el motor de almacenamiento predeterminado desde el lanzamiento de MySQL 5.5. Hasta el día de hoy, todavía veo sitios con tablas MyISAM antiguas. InnoDB ha demostrado ser mucho más rápido, y eso es lo que debería usar para las tablas de su base de datos.

Siga este tutorial sobre cómo verificar y convertir MyISAM a InnoDB. Cuando se trata de formas sencillas de acelerar WordPress, esta es a menudo una optimización que se pasa por alto.

Revisiones de páginas y publicaciones

Fuera de la caja, WordPress almacena revisiones de publicaciones y páginas cuando realiza cambios. Esto es útil en caso de que necesite volver a una versión anterior. La mala noticia es que no hay límite en la cantidad de revisiones que se almacenan. En sitios grandes, esto puede atascar rápidamente su base de datos. ¿Cuántas revisiones necesitas realmente?

Lo primero que querrá hacer es limpiar las revisiones anteriores y luego establecer un límite en el futuro.

Nuestro complemento Perfmatters proporciona una manera fácil de limpiar y eliminar revisiones de publicaciones, páginas y tipos de publicaciones personalizadas. Si está buscando una solución gratuita, el complemento WP-Optimize también funciona.

Como puede ver a continuación, en mi caso, había 630 revisiones en la base de datos. Es probable que ninguno de estos se use nunca, por lo que es bueno limpiarlos y comenzar con una pizarra nueva.

Después de limpiar las revisiones de publicaciones antiguas, es hora de limitar el número de revisiones. Esto asegurará que no vuelvan a llenar la base de datos en el futuro. Hay un par de formas en las que puedes hacer esto. Recomiendo usar nuestro complemento Perfmatters. Puede limitarlos o deshabilitarlos con un solo clic, como se ve a continuación.

O puede hacerlo manualmente agregando el siguiente código a su archivo wp-config.php . En este ejemplo, lo estoy limitando a tres revisiones.

 define('AUTOSAVE_INTERVALO', 300); // segundos
define('WP_POST_REVISIONES', 3);

Es importante agregar el código arriba de 'ABSPATH' ; de lo contrario, no funcionará.

También puede deshabilitar las revisiones por completo.

Eliminar imágenes antiguas o sin usar

Con el tiempo, es probable que tenga imágenes sin usar que ocupan espacio en el disco de su servidor. This can cause performance issues in various places, even just when taking backups of your site.

I recommend using the Media Cleaner plugin. This helps clean up your media library from the entries (and files) which aren't used on your WordPress site. Make sure to take a backup before running this .

Another thing to watch out for is if you've previously migrated from one image optimization plugin to another. Some use different file extensions. For example, if you migrated over from Imagify to ShortPixel, you might have leftover images with a .jpg.webp and .png.webp extensions sitting in your site's uploads folder. This can easily account for hundreds if not thousands of additional images.

You can use a script or connect to your site via SFTP and do a quick search for these extensions and delete them. Make sure to check with your current image optimization solution to confirm which extensions they are using.

Clean up auto-drafts, spam comments, transients, etc.

It's also important to clean up other old data you might have lying around. This includes auto-drafts, spam comments, comments in trash, posts and pages in trash, expired transients, etc. All of these things contribute to a larger WordPress database size.

The database optimization features in our Perfmatters plugin provide is an easy and fast solution for this. Just a few clicks and you're good to go.

Check wp_options table (autoloaded data)

Autoloaded data is a field that accumulates in your wp_options table. Over time, this can quickly bring a WordPress site to a crawl. This data is loaded by plugins on every page of your site. It's healthy to keep this field's total size below 5 MB, or 1 MB if possible. To check the size of autoloaded data on your site, open phpMyAdmin from your hosting provider's control panel and use the following query:

 SELECT SUM(LENGTH(option_value)) as autoload_size FROM wp_options WHERE autoload='yes';

To dive even deeper into this topic, check out this article on how to clean up autoloaded data.

Delete data from old plugins

How many plugins have you tried over the years and removed? Probably a lot. Unfortunately, many plugins don't remove everything when you uninstall them, which leaves you with an ever-growing database.

If it's a well-developed plugin, it should have a clean uninstall option. You can check its documentation. If it has one, you can temporarily install the plugin again and run the uninstaller the right way.

If they don't have a clean uninstall option, you can manually delete the tables from your database. Be careful with this and make sure to take a backup first.

7. Implement web fonts the right way

Impact: Front-end speed.

According to The HTTP Archive, as of February 2021, fonts make up on average 6% of a total website's page weight on mobile devices. While that might seem small, it still impacts how your site loads. There are areas regarding performance that you can't fix on your site, so you should take the wins where you can.

First, I don't recommend using third-party font services such as Adobe Fonts (previously Typekit). In my testing, I saw an additional 300ms delay. Adobe Fonts adds two external HTTP requests, and it also base64 encodes all the font formats. You no longer need to serve all the font formats; you really only need WOFF 2, if you're going for extra compression. WOFF 2 is supported by over 95% of all browsers (source).

Second, many websites use more fonts than they need. Make sure to check how many fonts you are loading. You can easily see this in the GTmetrix waterfall.

Below are a couple of options I recommend for better-performing fonts.

Option 1: System font stack (what I do)

I'll start with my favorite and fastest option you have for web fonts. It's moving to what they call a system font stack.

Big-name brands such as GitHub, Bootstrap, Medium, Ghost, and even your WordPress admin dashboard all use what they call a system font stack. This means they use the fonts on your computer. A few years ago, this wouldn't have looked very good. But with today's newer operating systems, they all have nicer looking fonts pre-installed.

When using a system font stack, there is no need to load any fonts on the page! That is pretty huge! It also eliminates any FOUT (flash of unstyled text) or FOIT (flash of invisible text) ugliness. Our site uses system fonts, and I bet you didn't even notice. Así es; this site doesn't load a single font .

You still might want to weigh the pros and cons. Do you want something that looks fancy, or do you want blazing fast? If you're using a theme like GeneratePress, it has a one-click option to use system stack fonts. You can also check out my more in-depth tutorial on how to move to a system font stack.

Opción 2: Fuentes de Google autohospedadas (o fuentes personalizadas)

Las fuentes de Google son gratuitas, muy populares y las utilizan más de 42 millones de sitios web en todo el mundo (fuente). Tenían una ventaja de rendimiento en el pasado, y era que las fuentes ya podían estar almacenadas en caché desde la CDN de Google en el navegador de un usuario. Sin embargo, esos días se han ido.

A partir de Chrome 86 (octubre de 2020), se cambiaron a la partición de caché HTTP. Esto significa que las fuentes de Google se volverán a descargar para cada sitio web, independientemente de las fuentes almacenadas en caché en el navegador del usuario. Safari ha hecho esto durante años y Firefox lo implementó en la versión 85 (enero de 2021).

La solución es hospedar Google Fonts en su servidor o CDN . Esto también elimina la búsqueda de DNS en Google, y los encabezados HTTP de almacenamiento en caché de su servidor se aplicarán automáticamente.

Para hacer esto, puede descargar las fuentes de Google, subirlas a su servidor y agregar el HTML y CSS adecuados. Sin embargo, una forma mucho más fácil es usar uno de los siguientes complementos para automatizar el proceso:

• Materias de rendimiento
• Complemento de fuentes

Hay dos cosas críticas que debe configurar:

1. Utilice swap para la propiedad font-display. Esto es compatible con todos los navegadores modernos y se asegurará de que las fuentes no bloqueen el renderizado. También resolverá la advertencia "Asegúrese de que el texto permanezca visible durante la carga de la fuente web" de Google.

2. Precargue las fuentes para especificar que se necesitan de inmediato o muy pronto durante la carga de la página. También puede precargar sus fuentes con nuestro complemento Perfmatters.

Las mismas técnicas mencionadas anteriormente también se pueden aplicar si está utilizando una fuente personalizada premium.

Usuarios de GeneratePress

Para los usuarios de temas de GeneratePress que aún desean alojar fuentes de Google de forma externa, puede hacer lo siguiente para corregir todas las advertencias de Core Web Vitals. Nota: GeneratePress agrega automáticamente el intercambio de visualización de fuente a sus fuentes de Google.

1. Tome la URL de su hoja de estilo de Google del código fuente de su sitio y agréguela a nuestra sección de precarga del complemento Perfmatters. Asegúrate de seleccionar "estilo". URL de ejemplo:

 https://fonts.googleapis.com/css?family=Roboto:regular,500,700&display=swap 

2. Agregue la siguiente URL a Preconnect en Perfmatters y marque la casilla "CrossOrigin".

 https://fuentes.gstatic.com

Lo anterior solucionará tanto la advertencia "Eliminar los recursos que bloquean el renderizado" como la advertencia "Asegúrese de que el texto permanezca visible durante la carga de la fuente web".

8. Modifica los iconos de tus fuentes

Impacto: velocidad frontal.

Font Awesome es genial, y millones de sitios lo usan en la web para mostrar los íconos que ves a diario. Sin embargo, de forma predeterminada, carga toda su biblioteca de iconos para su sitio.

La mejor manera de acercarse a Font Awesome desde el punto de vista del rendimiento es empaquetar solo los íconos que está usando en su sitio. Aquí hay un excelente tutorial sobre cómo alojar íconos de fuentes localmente (solo los que necesita).

O, si usa un tema como GeneratePress con GenerateBlocks, puede pegar el código SVG de cualquier icono que desee. ¡Esto es increíble! Como significa que no hay necesidad de empaquetar iconos. Puede agregar fácilmente solo lo que necesita .

También debe precargar sus iconos de fuentes web. De lo contrario, verá la siguiente advertencia de Google sobre la necesidad de "precargar solicitudes de clave".

Puede precargar sus fuentes web agregando la etiqueta de precarga al encabezado de su sitio de WordPress. Aquí hay un ejemplo:

 <link rel='preload' href='font-icon.ttf' as='font' type='font/ttf' crossorigin>

También puede hacer esto fácilmente en nuestro complemento Perfmatters.

9. Optimiza JavaScript

Impacto: velocidad frontal.

Según The HTTP Archive, a partir de 2021, JavaScript representa en promedio el 22% del peso total de la página de un sitio web en dispositivos móviles. Después de las imágenes y los videos, JavaScript es la tercera fuente más grande de peso de página.

A continuación, me sumergiré en algunas formas diferentes en las que puede optimizar JavaScript en su sitio de WordPress.

Audita tus complementos

¿De dónde proviene la mayoría de JavaScript? Dos lugares: tema y complementos. Así que la primera recomendación es hacer una auditoría de tus plugins y deshacerte de aquellos sin los que puedas vivir.

Esta es una de las razones por las que me encanta usar WordPress. Hay tantas maneras diferentes de lograr las cosas. Si opta por otra plataforma como Shopify o Wix, está atascado haciéndolo de una manera o peor; usted no tiene una manera de arreglarlo en absoluto.

A lo largo de los años, aquí hay algunos complementos de los que me he deshecho en mis sitios:

• Desplazarse al botón superior: los botones de desplazamiento a la parte superior ya están incluidos en el tema GeneratePress. Sin embargo, dejé de desplazarme hasta la parte superior por completo, ya que no creo que muchos usuarios hagan clic en ellos.
• Bloom: este complemento tiene demasiadas solicitudes, así que volví al complemento MTS WP Subscribe Pro.
• TablePress: un excelente complemento, pero el editor de bloques en WordPress ahora tiene tablas receptivas, al igual que GenerateBlocks.
• TweetDis: cambié a Novashare, nuestro complemento para compartir en redes sociales para WordPress, que incluye un código abreviado de tweet y un bloque de tweet con una base de código más optimizada.
• Resaltador de sintaxis de Crayon: cambié a la sintaxis del código nativo de WordPress sin ningún complemento.
• Botones Mango: cambié a botones nativos en el tema GeneratePress.
• Table of Contents Plus: Estoy codificando estos ahora. El editor de bloques de WordPress ahora tiene una manera fácil de agregar anclas.

Como puede ver, había algunos complementos que no necesitaba, o había mejores alternativas. Al deshacerme de estos, reduje significativamente las solicitudes en mi sitio y el tamaño total de la página. ¡Le aconsejo que haga una auditoría y evaluación de complementos en su sitio de inmediato!

Google Analytics locales

Irónicamente, Google Analytics tiene su propio conjunto de problemas de rendimiento. Primero, tiene una solicitud de DNS de terceros inmediata. En segundo lugar, y el problema más importante es el tiempo de caducidad de la memoria caché. Google establece la caducidad de la memoria caché muy corta, y esto puede provocar que aparezcan advertencias.

Una forma fácil de resolver estos problemas es alojar Google Analytics localmente en su servidor o CDN. Hay un par de ventajas en esto:

1. Se aprovecha de una única conexión HTTP/3.
2. Su secuencia de comandos de Google Analytics obtiene los encabezados de almacenamiento en caché de su servidor o CDN .
3. Hay una solicitud de terceros menos inmediata.

El alojamiento de análisis localmente no cuenta con el respaldo oficial de Google, pero muchos lo han estado haciendo durante años. Puede alojar fácilmente Google Analytics localmente con nuestro complemento Perfmatters.

Aplazar JavaScript

Debido a la naturaleza de cómo funciona JavaScript, lo más probable es que vea una advertencia de Google que dice "Eliminar los recursos que bloquean el renderizado". Esto significa que sus archivos JavaScript ralentizan (bloquean) la primera pintura de la página de su sitio de WordPress cuando se carga.

Una manera fácil de acelerar la pintura de una página es diferir todo el JavaScript no crítico. Esto significa que los scripts se cargarán después de que se haya cargado el resto de la página. Básicamente los estás empujando hasta el fondo de la cascada. Esto se hace agregando un atributo diferido en cada archivo JavaScript.

Puede diferir JavaScript fácilmente en nuestro complemento Perfmatters.

Es importante tener en cuenta que no puede diferir jQuery core ( jquery.js ) en la mayoría de los sitios, especialmente en los más grandes. Todo depende del orden de carga de su JavaScript. Si algo necesita que se cargue de inmediato, provocará un error en cascada.

Minimizar JavaScript

La minificación es el proceso de eliminar todos los espacios en blanco en su código. Muchos desarrolladores minimizan sus scripts de antemano. Puede detectar esto rápidamente si el script tiene .min.js al final. (Ejemplo: file.min.js ). Por lo tanto, esta no es una gran prioridad porque el 90% de su JavaScript probablemente ya esté minimizado.

Dicho esto, aún puede minimizar su JavaScript. Para esto, recomiendo el complemento gratuito Autoptimize. O, si está utilizando Cloudflare, puede habilitar fácilmente la minificación para JavaScript en la pestaña "Velocidad → Optimización".

Retrasar JavaScript

Mientras que aplazar JavaScript empuja la secuencia de comandos al final de la carga de la página, también puede retrasar JavaScript en función de la interacción del usuario. Esta puede ser una excelente manera de acelerar la pintura de la página para Core Web Vitals cuando no se necesita algo de inmediato. Scripts de terceros especialmente pesados ​​como Google Adsense, Google Analytics, píxeles de conversión (FB, Google Ads), etc.

También funciona muy bien para cosas como fragmentos de carritos, que es un problema común de rendimiento de WooCommerce.

Obtenga más información sobre cómo retrasar JavaScript con nuestro complemento Perfmatters.

Eliminar JavaScript no utilizado

A continuación, tiene la advertencia de Google para "eliminar JavaScript no utilizado". Esto significa que no todo el código del archivo JavaScript cargado (de su tema o complemento de WordPress) se está utilizando en la página que está probando.

Hay un par de maneras de abordar este problema. Sin embargo, no puedo expresar cuán importante es esto. Si sigue todos los consejos anteriores con respecto a un tema ligero de WordPress y abandona los creadores de páginas por una alternativa como GenerateBlocks, el JavaScript no utilizado no será un gran problema.

Google primero recomienda lo que cubrimos anteriormente, y eso es reducir o cambiar la cantidad de complementos de WordPress que cargan JavaScript no utilizado. Recuerde, la cantidad de complementos no es tan importante como lo bien que están codificados.

Puede usar la función de cobertura de código de Google en Chrome DevTools para identificar el tema o complemento responsable de agregar JavaScript extraño. Busque los scripts en la lista que tienen mucho rojo en la cobertura del código. Un tema o complemento solo debe poner en cola un script si realmente se usa en la página.

Ahí es donde entra en juego nuestro Perfmatters Script Manager. Le permite deshabilitar scripts, consultas y CSS/JS en línea por publicación/página o incluso en todo el sitio con solo hacer clic en un botón. También puede deshabilitar complementos completos. Esto es muy poderoso y puede aumentar drásticamente la velocidad de su sitio (especialmente su página de inicio).

El Administrador de secuencias de comandos también es compatible con Regex. Esto le permite deshabilitar scripts en páginas de archivo generadas dinámicamente, resultados de búsqueda, etc. Básicamente, cualquier combinación de scripts que se le ocurra puede deshabilitarse o habilitarse.

Al revisar y optimizar su sitio, puede reducir drásticamente la cantidad de carga de JavaScript. Esto no solucionará por completo la advertencia de JavaScript no utilizado, pero será de gran ayuda.

También puede usar la función de retraso de JavaScript en nuestro complemento Perfmatters para resolver las advertencias de JavaScript no utilizadas.

10. Optimiza CSS

Impacto: velocidad frontal.

Según The HTTP Archive, a partir de 2021, CSS representa en promedio el 4% del peso total de la página de un sitio web en dispositivos móviles. Después de imágenes, video y JavaScript, CSS es la cuarta fuente más grande de peso de página.

A continuación, me sumergiré en algunas formas diferentes en las que puede optimizar CSS en su sitio de WordPress.

Reducir CSS personalizado

Lo primero que debe hacer es reducir cualquier CSS personalizado en su sitio de WordPress.

Es natural agregar CSS en el Personalizador de WordPress y luego pasar al siguiente problema cuando tiene prisa. Sin embargo, esto significa que, con el tiempo, probablemente haya acumulado CSS adicional que no necesita. O ha cambiado temas o complementos, y el CSS ya no es aplicable. Ahora es el momento de volver y limpiarlo.

Tampoco recomiendo usar un complemento de terceros para CSS. Si bien los complementos como Simple Custom CSS son excelentes, el Personalizador de WordPress se ha vuelto bastante bueno a lo largo de los años y ahora colorea la sintaxis básica y corrige errores.

Cargue CSS personalizado solo donde sea necesario

Hay momentos en los que es posible que deba agregar CSS personalizado a su sitio, pero no necesariamente debe cargarse en todas partes. Si lo suelta en el Personalizador de WordPress, ¡esto es malo! Porque lo cargará en todo su sitio.

Aquí es donde GeneratePress y los ganchos vienen al rescate. Puede crear un enlace con GeneratePress, agregar su CSS personalizado y seleccionar dónde desea que se cargue.

Por ejemplo, en mis páginas de contacto, tengo un CSS personalizado para mi complemento de contacto de NinjaForms. Tengo un enlace GeneratePress que carga este código solo en mi página de contacto. Esta es la forma más óptima de cargar CSS personalizado .

Minimizar CSS

Al igual que JavaScript, muchos desarrolladores minimizan sus hojas de estilo de antemano. Puede detectar esto rápidamente si el archivo tiene .min.css al final. (Ejemplo: file.min.css ). Por lo tanto, esta no es una gran prioridad porque el 90% de su CSS probablemente ya esté minimizado.

Dicho esto, aún puedes minimizar tu CSS. Para esto, recomiendo el complemento gratuito Autoptimize. O, si está utilizando Cloudflare, puede habilitar fácilmente la minificación para CSS en la pestaña "Velocidad → Optimización".

Eliminar CSS no utilizado

Al igual que JavaScript, es posible que reciba la advertencia de Google para "eliminar CSS no utilizado". Esto significa que no todo el código del archivo CSS cargado (de su tema o complemento de WordPress) se está utilizando en la página que está probando.

Hay un par de maneras de abordar este problema. Sin embargo, no puedo expresar cuán importante es esto. Si sigue todos los consejos anteriores con respecto a un tema ligero de WordPress y abandona los creadores de páginas por una alternativa como GenerateBlocks, el CSS no utilizado no será un gran problema.

Google primero recomienda reducir o cambiar la cantidad de complementos de WordPress que cargan CSS no utilizado. Recuerde, la cantidad de complementos no es tan importante como lo bien que están codificados.

Puede usar la función de cobertura de código de Google en Chrome DevTools para identificar el tema o complemento responsable de agregar CSS extraño. Busque los scripts en la lista que tienen mucho rojo en la cobertura del código. Un tema o complemento solo debe poner en cola una hoja de estilo si realmente se usa en la página.

Una vez más, ahí es donde entra en juego nuestro Administrador de scripts de Perfmatters. Le permite deshabilitar scripts, consultas y CSS/JS en línea por publicación/página o incluso en todo el sitio con solo hacer clic en un botón. También puede deshabilitar complementos completos.

Al revisar y optimizar su sitio, puede reducir drásticamente la cantidad de carga de CSS. Es posible que esto no solucione por completo las advertencias de CSS no utilizadas, pero ayudará mucho. Luego puede usar nuestro complemento Perfmatters para eliminar automáticamente el CSS no utilizado. Esto debería aclarar el resto de las advertencias. También corregirá las advertencias de "eliminar recursos de bloqueo de procesamiento" con respecto a CSS.

La eliminación de CSS no utilizado también ayudará a reducir FCP y LCP. De hecho, en muchos de mis sitios, marcó la diferencia entre las URL que todavía “necesitan mejorar” y las que obtienen una puntuación “buena” o verde en general para Mobile y Core Web Vitals.

11. Optimizar HTML

Impacto: velocidad frontal.

Según The HTTP Archive, a partir de 2021, HTML representa en promedio el 1,5 % del peso total de la página de un sitio web en dispositivos móviles. Si bien esto no es una gran cantidad, sigue siendo importante.

A continuación, me sumergiré en algunas formas diferentes en las que puede optimizar HTML en su sitio de WordPress.

Servir HTML desde el borde de Cloudflare

Toqué esto arriba; Recomiendo usar Cloudflare APO. Con una CDN tradicional, su HTML se sirve desde el servidor de origen mientras que sus activos se sirven desde la CDN. Con Cloudflare APO, sus activos y su HTML se sirven desde la CDN. Piense en ello más como convertir su sitio de WordPress en un sitio HTML estático. Esto da como resultado velocidades increíblemente rápidas y un TTFB bajo.

Minimizar HTML

Al igual que JavaScript y CSS, puede minimizar su HTML. Para esto, recomiendo el complemento gratuito Autoptimize. O, si está utilizando Cloudflare, puede habilitar fácilmente la minificación para HTML en la pestaña "Velocidad → Optimización".

12. Varios optimizaciones, recursos y consejos

He optimizado miles de sitios de WordPress a lo largo de los años, así que pensé que sería útil incluir otra sección con varias optimizaciones, consejos y recursos. Muchas de estas son cosas que veo a diario trabajando con clientes.

• No use Google AMP . En primer lugar, Google AMP hace que sea más difícil para usted solucionar problemas, ya que, de alguna manera, es un silo de su sitio principal. En segundo lugar, también es difícil migrar de Google AMP, ya que intentan encerrarte en su ecosistema. Solo dedique ese tiempo adicional y concéntrese en hacer que su sitio receptivo sea rápido para usuarios de dispositivos móviles y de escritorio. Se pagará a largo plazo. A partir de 2021, Google ya no otorga un trato preferencial a quienes usan AMP (fuente).
• Tenga mucho cuidado con Google Maps y simplemente coloque esto en el pie de página de su sitio. Es terrible para el rendimiento debido a su gran tamaño de transferencia. He visto un mapa generar hasta 26 solicitudes HTTP (eso no es un error tipográfico). Recomiendo usar nuestro complemento Perfmatters para deshabilitar Google Maps donde no debería estar cargando. O sea aún más creativo y reemplácelo con una imagen bien diseñada con CTA y un enlace externo a Google Maps.
• Deshazte de tus controles deslizantes y en su lugar usa un encabezado estático. Los controles deslizantes causan cambios de diseño horribles (CLS) para Core Web Vitals, especialmente en dispositivos móviles. También impactan negativamente en sus conversiones.
• No combine su CSS o JS . Esta es una técnica obsoleta desde HTTP/2 (ahora HTTP/3/QUIC). Es más rápido cargar sus archivos individuales en paralelo. También facilita mucho la resolución de problemas de rendimiento.
• Las pequeñas cosas importan. Por ejemplo, decidí desactivar mi botón "desplazarse hacia arriba". Esto significa que se carga un archivo JavaScript menos. me di cuenta como usuario; Nunca hago clic en estos.
• Utilice Yellow Labs Tool y Waterfaller para realizar una auditoría del código de su sitio. Estos pueden ser una excelente vista alternativa de las cosas para optimizar en su sitio, diferente de Core Web Vitals o GTmetrix.
• Cargue sus Gravatars desde su CDN y cárguelos de forma perezosa.
• reCAPTCHA de Google es un asesino del rendimiento . Lo he visto bajar las puntuaciones móviles en más de 30 puntos por sí mismo. Carga 12 scripts con un tamaño total de 480 KB, que es enorme. Lo importante es no usarlo en todo el sitio. A lo sumo, asegúrese de que esto solo se cargue en su página de contacto. Sin embargo, la mayoría de los complementos de formularios de contacto tienen medidas antispam y honeypot ya integradas. Si el tuyo no lo tiene, puedes usar un complemento gratuito como WP Armor. Por lo tanto, recomiendo no usar reCAPTCHA en absoluto.
• Si está utilizando Cloudflare, apague Rocket Loader. Se supone que esta característica ayuda a acelerar los sitios móviles, pero todo lo que he visto que hace es ralentizarlos y causar problemas. Desactivarlo también eliminará una solicitud en su sitio ( rocket-loader.min.js ).
• Si usa Cloudflare, desactive la ofuscación de la dirección de correo electrónico. En primer lugar, no debe poner su dirección de correo electrónico en ningún lugar a la vista. Solo pide spam. Los formularios de contacto existen por una razón. En segundo lugar, desactivar esta función también eliminará una solicitud en su sitio ( email-decode.min.js ).

Boletines

A continuación hay algunos boletines a los que recomiendo tomarse el tiempo para suscribirse, ya que brindan información increíble sobre las industrias de desarrollo y rendimiento web.

• wdrl.info: una lista cuidadosamente seleccionada de recursos relacionados con el desarrollo web. Curado y publicado por lo general cada semana . Dirigido por @helloanselm.
• weekly.statuscode.com: un boletín semanal sobre operaciones web, infraestructura, rendimiento y herramientas, desde el navegador hasta el metal. Dirigido por @peterc.
• kinsta.com: ¡Un boletín semanal con consejos y estrategias de WordPress para generar más tráfico e ingresos para su negocio! Dado que Kinsta es una empresa de hosting de alto rendimiento, muchos de los artículos se centran en el rendimiento.
• keycdn.com: Webperf, webdev, WordPress, entrega de contenido, una vez a la semana .
• smashingmagazine.com: Smashing Magazine es una revista en línea para diseñadores y desarrolladores web profesionales. Consejos útiles y recursos valiosos, enviados cada segundo martes.

Utilice nuestro complemento Perfmatters

Impacto: velocidad de front-end y back-end (panel de administración de WordPress).

Nuestro complemento Perfmatters puede ayudar a resolver muchas de las advertencias de Core Web Vitals. También incluye todos los ajustes que utilizamos en nuestros sitios para obtener una ventaja sobre la competencia.

Estas características, algunas de las cuales ya mencionamos anteriormente, incluyen:

• Optimice su base de datos (revisiones, spam, basura, transitorios y más).
• Carga diferida tus imágenes, iframes, videos de YouTube y más.
• Precargar recursos y precargar enlaces para tiempos de carga instantáneos.
• Aplaza JavaScript para arreglar los recursos que bloquean el renderizado.
• Retrasar JavaScript en la interacción del usuario para corregir JSS no utilizado.
• Eliminar CSS no utilizado.
• Deshabilite scripts, consultas y CSS/JS en línea por publicación/página o incluso en todo el sitio con el Administrador de scripts.
• Deshabilite emojis, auto-pingbacks, XML-RPC, incrustaciones y más.
• Aloje Google Analytics localmente.
• Reescritura de CDN (conéctese con su proveedor de CDN favorito).
• Cambie su URL de inicio de sesión de WordPress (disminuya el tráfico de bots y proteja su sitio).
• Deshabilite o limite las revisiones de WordPress.
• Cambie la frecuencia o deshabilite Heartbeat API. Esto puede ayudar a corregir la lentitud de admin-ajax.php.
• Cambia el intervalo de guardado automático.

Evitar redireccionamientos

Impacto: velocidad de front-end y back-end (panel de administración de WordPress).

Cada redireccionamiento que agregue a su sitio afectará el rendimiento, aunque sea un poco. El gran problema con muchos complementos populares de WordPress es que usan la función wp_redirect (especialmente los que se ejecutan en Nginx).

Significa que cada redirección entrante tendrá que ejecutar código PHP en su servidor para procesar y reenviar la solicitud. Si bien esto puede no sonar mal, imagine que tiene 2000 redireccionamientos (lo cual es muy común) y su sitio recibe 500 000 visitantes por mes. Habrá muchos usuarios accediendo a tus redireccionamientos.

Una mejor manera de manejar las redirecciones de WordPress es a nivel de servidor. De esta manera, puede omitir una capa y no tener que ejecutar ningún código en su servidor.

Un proveedor de alojamiento de WordPress como Kinsta le permite administrar todos sus redireccionamientos en su panel de MyKinsta. Todo se hace a nivel del servidor y hay menos exceso en su base de datos de WordPress.

Deshabilitar WP-CRON

Impacto: velocidad de front-end y back-end (panel de administración de WordPress).

WP-CRON es un programador de tareas para WordPress. El problema es que comprueba la lista de tareas programadas que deben ejecutarse en cada carga de página . En sitios de alto tráfico, esto puede convertirse rápidamente en un problema de rendimiento. Afortunadamente, puede deshabilitar WP-CRON y, en su lugar, usar un cron de nivel de servidor (sistema).

Nota: No recomiendo esto para todos los sitios de WordPress. Pero si ve una alta actividad de cron y cree que podría estar ralentizando su sitio, es bueno que lo intente.

Para deshabilitar WP-CRON, agregue lo siguiente a su archivo wp-config.php , justo encima de la línea que dice “Eso es todo, ¡deje de editar! Feliz blogueo”.

 define('DISABLE_WP_CRON', true);

Después de que esté deshabilitado, deberá llamar a wp-cron.php desde su servidor o un servicio de terceros para asegurarse de que las tareas programadas aún se ejecuten correctamente en su sitio de WordPress. El beneficio es que puede hacer que se ejecute en un horario, en lugar de todo el tiempo.

Si está alojando con un proveedor como Kinsta y tiene WP-CRON deshabilitado, su cron del lado del servidor activa wp-cron.php cada 15 minutos automáticamente. No es necesaria ninguna configuración adicional.

Para obtener más información, Tom Mcfarlin tiene un buen artículo sobre cómo configurar correctamente los trabajos cron de WordPress.

13. Resultados de la prueba de velocidad

Ahora viene la parte divertida. Aquí están los resultados de la prueba de velocidad para un par de mis sitios. Estos incluyen blogs, comercio electrónico, pequeñas empresas, etc. Todos ellos fueron construidos completamente con bloques usando GeneratePress y GenerateBlocks.

Incluyo tanto los resultados de Google Core Web Vital como los resultados de GTmetrix. Ambas son herramientas que uso regularmente para evaluar las mejoras mientras realizo optimizaciones. Recuerda que Google Core Web Vitals está emulando la prueba desde un dispositivo móvil. Las pruebas de GTmetrix están en el escritorio.

woorkup.com

esto es un blog

Estadísticas web principales de Google

GTmetrix

perfmatters.io

Este es un sitio de comercio electrónico.

Estadísticas web principales de Google

GTmetrix

nogluten.com

Esta es una propiedad pesada de Google AdSense que utiliza la popular red de administración de anuncios Mediavine. Obtiene todos sus ingresos de la publicidad. Como puede ver, aún es posible obtener una buena puntuación incluso cuando se publican anuncios. Seguir cada optimización mencionada anteriormente se vuelve aún más crítico en este escenario.

Estadísticas web principales de Google

GTmetrix

No pierdas el tiempo persiguiendo un puntaje perfecto de 100

Hace unos años, fui el primero en decir que las puntuaciones de PageSpeed ​​no importan. Y eso era cierto entonces. Sin embargo, los tiempos han cambiado. Con el lanzamiento de Google Core Web Vitals y el hecho de que ahora es un factor de clasificación, las puntuaciones son importantes hasta cierto punto. Tienes que salir de la mentalidad de los tiempos de carga totales y cambiar tu enfoque a cómo se carga tu página .

La buena noticia es que las puntuaciones generalmente se correlacionan mucho mejor ahora con los tiempos de carga totales que en el pasado. A medida que obtenga una puntuación más alta, con suerte logrará tiempos de carga más rápidos. Y recuerde, siempre estamos hablando de dispositivos móviles en estos días, ya que eso es lo que Google está usando para Core Web Vitals.

Dicho esto, le insto a que no pierda demasiado tiempo persiguiendo un puntaje perfecto de 100. Yo no; Generalmente apunto a los umbrales. Existe la posibilidad de sobreoptimizar su sitio. Si está en el verde, dedique su tiempo a construir su negocio. ¿De qué sirve un factor de clasificación si tienes contenido horrible? Perseguir una puntuación perfecta puede ser fácilmente una pérdida de tiempo.

Pensando más allá de las puntuaciones, también debe tener en cuenta el rendimiento percibido. El rendimiento percibido es qué tan rápido se siente su sitio para una persona que lo visita. Si el rendimiento percibido de su sitio es malo, esto puede tener un impacto directo en su tasa de rebote y tiempo en el sitio. Y estos también son factores que utiliza Google.

14. Convierta el sitio u obtenga una auditoría de rendimiento

Si aún no está satisfecho con su velocidad, esto es lo que le recomiendo que haga.

Convierte tu sitio a GeneratePress + GenerateBlocks

En primer lugar, si está utilizando un tema inflado o un generador de páginas, siempre recomiendo pasar a un tema ligero como GeneratePress (junto con GenerateBlocks). Su base de código es súper liviana y se desarrolló desde cero teniendo en cuenta el rendimiento. A veces tienes que arreglar la capa base de tu sitio y luego todo lo demás encajará.

Si no tiene tiempo para hacerlo usted mismo, le recomiendo que se comunique con mis amigos de WP Boosters. Pueden convertir su sitio y diseño existente a GeneratePress + GenerateBlocks .

Obtenga una auditoría de rendimiento web

Si necesita ayuda adicional, le recomiendo obtener una auditoría completa del rendimiento web de su sitio de WordPress. Algún día podría ofrecerlos, pero actualmente no tengo tiempo. Por ahora, recomiendo encarecidamente a Mike Andreasen, un experto en Codeable, para las auditorías de rendimiento web. A continuación se muestra un ejemplo del sitio de un cliente antes y después de las optimizaciones de Mike.

Charlo con Mike regularmente. Es una de las pocas personas de rendimiento web con las que estoy de acuerdo en casi todo lo relacionado con la optimización, qué servicios y herramientas funcionan mejor, etc. Y créanme, eso es raro.

Ha completado más de 1.300 proyectos para clientes. ¡Puedo responder personalmente por su trabajo ya que tengo los gráficos, las pruebas de velocidad y los datos reales de los clientes para respaldarlo!

Resumen

Cuando se trata de acelerar WordPress, puede parecer un trabajo de tiempo completo. Pero no tiene por qué. Si elige las soluciones correctas desde el principio, desde el alojamiento hasta los temas y complementos, siguiendo las mejores prácticas de optimización, puede lograr las velocidades que desea. Sin embargo, si intenta omitir uno de estos pasos, probablemente no estará satisfecho con los resultados.

Veo tantos clientes que casi hacen todo bien. Pero tienen un tema mal codificado o un generador de páginas que mata su rendimiento. O eligieron un tema de calidad pero están en un proveedor de alojamiento económico. Debes seguir todos los consejos anteriores.

Y sí, puede tomar un poco de trabajo llegar allí. La buena noticia es que todo lo anterior puede aplicarse fácilmente a todos sus sitios de WordPress en el futuro. Eventualmente llegará al punto en que obtener esos puntajes de Core Web Vitals no es tan importante.

También entiendo que puede ser difícil para aquellos de ustedes que trabajan con clientes. Todo lo que les importa es una puntuación más rápida. No entienden lo que hay que hacer, comprar u optimizar. Confía en mí; Siento tu dolor, y he estado allí.

Si está tratando con un cliente frustrante, mi mejor recomendación es enviarle esta publicación de blog. Puede que te sorprenda su respuesta. Es posible que también tenga que explicarles que necesitarán invertir un poco de dinero para llegar allí. Una vez que entiendan que no hay solo un interruptor mágico, puedes voltearlo; puedes empezar a progresar.

Asegúrate de marcar esta publicación como favorita, ya que la actualizo continuamente. Todo lo que hago a partir de ahora se centra por completo en Google Core Web Vitals, incluido el desarrollo de nuestro complemento Perfmatters.

Con suerte, algunos de los consejos y recomendaciones sobre cómo acelerar WordPress han sido útiles o reveladores para usted. ¡Me encantaría escuchar cualquier comentario a continuación!