Muchas personas se preocupan sobre la velocidad de su sitio WordPress ya que eso mejora la experiencia que tiene el usuario.
Afortunadamente nunca ha sido tan fácil optimizar la velocidad un sitio de WordPress como ahora.
Desde ese anuncio es posible ver en Google Search Console, una pestaña llamada Core Web Vitals y que nos permite saber que puedes mejorar en tu sitio.
En está publicación encontrarás una guía brutalmente honesta para mejorar la velocidad de tu sitio de WordPress.
Table of Contents
- ¿Qué se Puede Optimizar?
- Mi Receta para Mejorar la Velocidad
- ¿Cómo Optimizo Mis Sitios?
- ¿Plugins para Mejorar la Velocidad?
- 30 Tips Sencillos para Mejorar la Velocidad de WordPress
- Mejor Hosting para WordPress
- Ubicación del Centro de Datos
- Red de Contenido Global
- Tema Liviano para WordPress
- ¿Page Builder o No Page Builder?
- Gutenberg Blocks
- Identificar Plugins Problemáticos
- Remover Plugins Innecesarios
- Usar Code Snippets
- Limpiar la Base de Datos
- Usar Lazy Loading para Anuncios
- Reducir los Scripts de Terceros
- Atrasar la Ejecución del JavaScript
- Optimizar las Imágenes fuera del Escritorio de WordPress
- Aplicar Lazy Loading a las Imágenes
- Servir Imágenes desde otro Servidor
- Usar Imágenes con Formato WEBP
- Aplicar Lazy Loading a los Videos
- Usar un Plugin de Caché
- Pre-cargar el Caché
- Crear Caché a Nivel del Servidor
- Minificar le CSS,JS y el HTML del sitio
- Combinar el CSS y el JS del sitio
- CSS Critico
- Reducir el Número de Bots
- El Problema de Google Fonts
- PerfMatters
- Actualizar el Software de tu sitio
- Desactivar los Emojis
- Desactivar Incrustados
- Desactivar el Hotlinking
- Remover, Limitar o Optimizar los Comentarios
- Remover Archivos sin Utilizar
- Remover las Animaciones
¿Qué se Puede Optimizar?
Cuando nos metemos en la cabeza la idea de optimizar nuestro sitio de WordPress, a menudo no sabemos que queremos optimizar.
Usualmente partimos del hecho que mi sitio es lento y esperamos recomendaciones de una comunidad que esta lista pare hacer disparos en la oscuridad.
Si tu sitio esta lento, debes diagnosticarlo usando algunos tests de velocidad.
Yo siempre he usado GTMetrix para determinar lo que podría estar causando el problema en las siguiente areas:
- Estilos: El siguiente problema que tu sitio puede tener es hojas de estilos externas o estilos que se agregan en el HTML y que se conoce como estilo en línea. (inlined CSS)
- Scripts: Los scripts le dan interactividad al sitio, pero estos tienden a tener el mayor impacto negativo en la velocidad de los sitios de WordPress. Los scripts pueden ser externos o pueden ser agregados en el HTML del sitio. Los scripts pueden hacer solicitudes a archivos que son parte de tu servidor o recursos externos alojados en otros servidores.
- Medios: Los videos, imágenes, gifs, Iframes pueden tener un impacto detrimental en tu sitio porque demandan más recursos de tu sitio o hacen llamadas a recursos externos.
- Fuente: Si usas fuentes de Google Fonts, estos tiene un impacto para nada ligero en tu sitio.
Adicional a estos, en algunos casos las recomendaciones tienden a demandar la cabeza del servidor cuando métricas como el Time to First Byte tiende a durar mucho.
Ya teniendo eso claro, puedes decir mi problemas tienen que ver con el numero de estilos que mi sitio carga, el numero de scripts, los medios y la fuente o el servidor.
Mi Receta para Mejorar la Velocidad
Yo uso el panel de Cloudways para manejar todos mis sitios que son hospedados en Digital Ocean,
Uso GeneratePress, uno de los temas más livianos de WordPress que puede ser personalizado usando:
| #1 | GP Premium |
| #2 | GenerateBlocks |
| #3 | GenerateBlocks Pro |
Uso la red de contenido Global de CloudFlare que le ahorra muchos recursos a mi servidor pero voy un poco más allá aplicando lo que se conoce como Full Page Caching, esto se administra con el plugin oficial de CloudFlare
Para manejar el cache en ocasiones uso WP-Optimize o simplemente no uso Plugin de Caché sin uso un servicio como CloudFlare APO
| #4 | Cloudflare |
| #5 | WP-Optimize |
| #6 | SEOPress |
| #7 | SeoPress Pro |
| #8 | Code Snippets |
| #9 | MB Custom Post Types & Custom Taxonomies |
| #10 | Simple Cloudflare Turnstile |
| #11 | Table of Contents Plus |
| #12 | PDF Embed |
El plugin más pesado que carga probablemente más escritos que todos los anteriores combinados es
| #13 | H5P |
Para los anuncios y la optimización de estos uso:
| #14 | Ad Inserter Pro |
Por último uso Perfmatters, la navaja suiza para la optimización de sitios de WordPress
| #15 | Perfmatters |
Con esto te quiero decir dos cosas:
- Puedes tener 15 plugins o más y aún así pasar Core Web Vitals
¿Cómo Optimizo Mis Sitios?
Sin entrar en detalles, los servidores de Digital Ocean tienden a cargar rápido, por lo que se mi proveedor de hosting no es el problema
En términos de diseño, la combinación de de GeneratePress y GenerateBlocks es grandioso, los scripts de GeneratePress son atrasados usando Perfmatters, mientras que los estilos son completamente libres.
En cuanto al caché, creo que no hay nada mejor que usar el full page caching gratuito o de pago de Cloudflare, ese servicio hace que tu sitio se convierta en un sitio estático.
Los plugins de SEO no tienden a causar problemas de velocidad, lo que agregan al sitio es lo suficiente para encargarse de que todo marche bien con el SEO Técnico y On-Page.
Los code snippets permiten agregar funcionalidades y no requerir plugins adicionales que podrían o no afectar el rendimiento de tu sitio.
Los Custom Post Types tiene cero impacto en la velocidad de tu sitio y no requieren de optimización alguna.
Simple CloudFlare Turnstile protege tu sitio de WordPress de ataque de fuerza bruta.
Table of Content Plus puede optimizarse de manera manual si sabes como remover el CSS no usado o no tan necesario.
PDF Embed puede ser usando usando la optimización para medios de Perfmatters.
H5P es un plugin que puede ser un detrimento para la velocidad de sitios de WordPress pero todos sus scripts son atrasados en mis sitios con la ayuda de Perfmatters.
AdInserter Pro recientemente implemento la carga de scripts en un archivo externo para reducir el impacto de sus scripts en el HTML del sitio. Este plugin cuenta con opciones de lazy loading para los anuncios .
Perfmatters es el dios de los plugins de optimización, este tiene opciones para remover scripts y lineas de código no necesarias de tu sitio.
¿Plugins para Mejorar la Velocidad?
En los últimos dos años hubo mucho avance en temas de optimizar la velocidad de los sitios de WordPress.
Hoy hay temas livianos como Kadence, Astra, blocksy y GeneratePress que requieren muy poca optimización.
Ademas hoy contamos con blocks editors que mantienen a parte de la comunidad fuera de las manos de page builders como Elementor y Divi.
Los plugins para optimizar la velocidad han incorporado funcionalidades que permiten tener sitios rapidos.
Hay más paneles de hospedaje web en la nube que permiten que dejan al shared hosting a un lado.
30 Tips Sencillos para Mejorar la Velocidad de WordPress
Hay muchos pasos que debes seguir para mejorar la velocidad de WordPress y muchos de esos errores no requieren la implementación de código.
La ayuda de un profesional es requerida cuando tienes un sitio complejo.
Trata de arreglar algunos de estos problemas antes de buscar la ayuda de un experto en velocidad.
Mejor Hosting para WordPress
Uno de los problemas de usar algunos proveedores de hospedaje web compartido es que tu sitio y otros cientos de sitios están usando los mismos recursos.
Algunos proveedores son claros con sus clientes y les hacen saber que están usando hospedaje web compartido. Otros no son tan transparentes y esperan tomar ventaja del desconocimiento de clientes.
Mi recomendación es que uses un VPS o hospedaje web en la nube con tal minimizar los problemas de velocidad que pueden ser causados por otros usuarios.
Ubicación del Centro de Datos
Una de las preguntas que debes de hacerte antes de la contratación de un proveedor de hospedaje web es de donde provendrá la mayoría del tráfico de tu sitio ya que debes escoger un servidor que esté cerca de tus visitantes.
Debido a lo poco confiables que pueden ser algunos proveedores de hospedaje web en Latinoamerica, muchos optamos por la opción de tener un servidor en los Estados Unidos y usar una red de contenido global para reducir los tiempos de espera.
Si tu sitio será visitado por personas en tu país de origen, puedes apostar por un servicio de hospedaje web en tu país que tenga buena reputación.
Recuerda que una empresa nacional no necesariamente tiene su propio centro de datos.
Red de Contenido Global
Si tienes visitantes de todas partes del mundo, lo que deberías hacer es usar una red de contenido global.
Recuerda que en muchas ocasiones, el contenido puede estar dirigido a un país pero puedes ser buscado por muchas personas alrededor del mundo
Las mejores redes globales de contenido gratuita en mi opinión es CloudFlare
Si tienes un pésimo hosting, el Full Page Caching te puede salvar la vida.
Si no deseas usar CloudFlare, puedes usar Jetpack o Bunny.net
Tema Liviano para WordPress
No esperes tener una velocidad sí el tema gratuito o de pago que usas no esta optimizado.
Si escribes en Google, temas rápidos de WordPress, sabrás que los temas que compiten por esa corona son GeneratePress, Astra, OceanWP, Hello, Blocksy, Kadence y algunos otros.
La velocidad de un tema de WordPress se mantiene si haces un buen uso de este.
¿Page Builder o No Page Builder?
Hay muchos page builders que puedes usar para mejorar la apariencia de tu sitio.
El más popular es Elementor pero tambien hay fans de Beaver Builder, Brizzy y Divi
Los usuarios de WordPress hablan muy bien de Oxygen, es muy rápido y la licencia es ilimitada y de por vida.
Lo que debes valorar es si realmente necesitas un page builder.
Hay sitios que hacen miles y miles de dólares en anuncios o en mercado de afiliación y tienen temas super sencillos.
Un ejemplo es Swim University , un sitio de Afiliación que carga en menos de 1.5 segundos con tan solo 14 solicitudes.
Valora si el uso de un constructor de paginas es una necesidad o es un capricho de novato de WordPress.
Gutenberg Blocks
En ocasiones he visto sitios diseñados con Elementor que perfectamente se pudieron realizar con Gutenberg o con un plugin de Blocks de Gutenberg
El paquete de blocks de Gutenberg más minimalista es GenerateBlocks, un plugin creado por Tom Usborne, el creador de GeneratePress.
Otro de los famosos en el mundo de los bloques de Gutenberg es Kadence Blocks.
Si deseas entender lo que puedes crear con solo los bloques de Gutenberg mira la librería de:
- GeneratePress
- Kadence
- Astra
- Blocksy
Puede ser que lo que tu sitio necesite es un rediseño que tome en cuenta la velocidad de tus sitio.
Identificar Plugins Problemáticos
Un gran número de plugins bien optimizados no hará que la velocidad de tu sitio se vaya por un precipicio.
Por lo que es aconsejable reducir el número de plugins si eso esta entre las posibilidades.
Si tienes pocos plugins, hay menos posibilidades que uno de ellos sean la causa de la pobre velocidad de tu sitio.
Puedes revisar el impacto de los plugins en la velocidad revisando la cascada de GTMetrix
Esa cascada te ayudará a resolver los problemas de velocidad que uno o más plugin podrían estar causando.
La opción de removerlos, cambiarlos o de encontrar un plugin mejor es una decisión tuya.
Tambien puedes tratar de localizar los focos de problemas que estos presentan e intentar modificarlos.
Remover Plugins Innecesarios
Los usuarios de WordPress siempre creen que todo lo que tienen instalado es absolutamente necesario.
Hay usuario que tienen Elementor, Elementor Pro, Essential Add-ons for Elementor, Ultimate Add-ons y muchos plugins más para el diseño de unas cuantas paginas, lo que me hace pensar que ni siquiera sabe usar una herramienta bien porque tienen que instalar un plugin que tiene 40 funciones para usar solo una de ellas.
Hay otros usuarios que quieren tener Google Analytics, Google Search Console y otros servicios dentro del escritorio de WordPress cuando todo eso se puede manejar externamente.
Usar Code Snippets
Algo que va de la mano con el reducir el numero de plugins es usar Code Snippets para reemplazar ciertos plugins.
Hay code snippets que te pueden ayudar a optimizar tu web, asegurarla contra Hackers, mejorar el on-page seo y mejorar el diseño de la misma.
Limpiar la Base de Datos
Uno de los problemas con el mal manejo de plugins es el pobre manejo de la base de datos.
Hay plugins que crean miles de filas en algunas de las tablas de la base de datos y lo peor del caso es que esas filas están llenas de datos que no sirven un buen propósito.
Algunas tablas y filas son de plugins que posiblemente fueron eliminados hace mucho tiempo atrás.
Trata de limpiar la base de datos con cuidado y con un respaldo por si algo sale mal o usa los servicios de un experto.
Puedes ver el tamaño de tu base de datos y optimizarla usando WP-Optimize. Tambien puedes usar WP-Sweep y Database Cleaner.
Usar Lazy Loading para Anuncios
Uno de los grandes problemas que muchos encontramos es con los anuncios que se despliegan en los sitios como los de Adsense.
Si usas Adsense, Ad Inserter Pro y Advanced Ads Premium, estos cuentan con Lazy Loading, lo que permite que los anuncios se desplieguen hasta que estos estén a punto de ser visualizados.
El Lazy loading de los anuncios ayuda a mejorar los malos resultados que podrías estar teniendo en los diferentes tests de velocidad.
Reducir los Scripts de Terceros
Una de las tareas importantes es realizar una auditoria de todo los scripts que se cargan cada vez que visitas una pagina de tu sitio.
Ejemplos de scripts de terceros son Messenger, Hotjar y Adsense entre muchos otros
Puedes revisar cada uno de ellos, reemplazar los plugins que agregan scripts que aumentan el tiempo de carga del sitio o simplemente removerlos si no son necesarios.
Atrasar la Ejecución del JavaScript
Cuando escucha sobre atrasar la ejecución del JavaScript, puede ser que pienses que es una tarea muy difícil pero es algo muy sencillo con el uso de plugins.
Atrasar la ejecución del JS te ayuda con los problemas causados por los anuncios, Google Analytics, Google Adsense, Chat de Messenger y algunos otros.
Estos son los plugins que hacen ese trabajo:
- WP Rocket
- Flying Scripts
- PerfMatters
El atrasar la ejecución del JavaScript es una alternativa si no puedes reducir el numero de scripts de terceros en tu sitio.
Optimizar las Imágenes fuera del Escritorio de WordPress
Otra de las cosas que debes hacer es optimizar las imágenes antes de subirlas a la librería del sitio.
Mis herramientas para optimizar las imágenes son:
Con las imágenes que ya tienes en la galería, puedes usar Imagify, ShortPixel o ReSmushit. No tiene que dejar ninguno de esos plugins instalado después de usarlo.
Aplicar Lazy Loading a las Imágenes
Otras de las recomendaciones con el tema de las imágenes es usar el Lazy Loading o la carga diferida de imágenes.
Eso quiere decir que tus imágenes se comenzarán a desplegar hasta que el usuario se desplace a esa parte del sitio,
La carga diferida de imágenes y lazy loading esta tambien disponible como una función nativa de WordPress pero plugins como WP Rocket lo hacen mucho mejor.
Servir Imágenes desde otro Servidor
Una de las opciones para reducir el uso de los recursos del servidor es mediante el proceso de servir las imágenes desde otro servidor.
Si usas Jetpack puedes realizar esto en la pestaña de rendimiento.
Puedes tambien considerar Flying Images que es completamente gratuito o Cloudinary que tiene un plan gratuito.
Implementa esta recomendación si tu sitio es muy visual.
Usar Imágenes con Formato WEBP
Tambien debes tratar de servir las imágenes en un formato webp para reducir las imágenes entre un 25% a un 35%.
Yo no uso muchas imágenes en mis sitios por lo que no me he decidido por usar un servicio premium, sin embargo creo que el servicio de Short Pixel e Imagify es bastante bueno y económico.
Con el anuncio de que el navegador Safari implementará el soporte de imágenes WEBP, estas podrían convertirse en un estándar pronto.
Aplicar Lazy Loading a los Videos
Si usas videos en tus publicaciones, debes de considerar un plugin para no cargar esos videos a menos que el visitante haga clic en ellos.
Esto lo puedes hacer de una manera sencilla usando un plugin gratuito llamado Lazy Load de WP Rocket
Esto es algo que puedes lograr con PerfMatters
Usar un Plugin de Caché
Instala un plugin de cache y juega un poquito con las opciones disponibles para determinar cuáles de las muchas combinaciones tienen los mejores resultados.
Yo recomiendo WP Rocket, vale $49 y en el segundo año, te hacen descuento de 30%
Sin importar el plugin que uses, dale el máximo de vida al caché, especialmente no piensas hacer modificaciones por algún tiempo.
Pre-cargar el Caché
Después de haber borrado el cacheé del sitio o una pagina. El nuevo caché se genera una vez que alguien visita una pagina de tu sitio por lo que esa primera persona no tendrá la experiencia más rápida.
Si deseas eliminar eso, tiene que usar un plugin de caché que haga la precarga de Caché.
Si usas WP Rocket o WP Fastest Cache, recuerda activas el pre-loading.
Crear Caché a Nivel del Servidor
Software como Varnish Cache actúa como un caché del lado del servidor para acelerar aún más la generación y el servicio de una versión en caché de tu sitio,
Varnish lo hace más rápido posible con la menor cantidad de llamadas al servidor posible.
Minificar le CSS,JS y el HTML del sitio
Minimizar CSS, JS y HTML implica eliminar los caracteres innecesarios de un archivo para ayudar a reducir su tamaño y, por lo tanto, hacer que se cargue más rápido.
Algunos ejemplos de lo que se elimina durante la minificación de archivos incluyen:
- Caracteres de espacio en blanco
- Comentarios
- Saltos de línea
- Delimitadores de bloque
La minificación es algo que esta incluido en plugins de caché y tambien se puede hacer por medio CloudFlare.
Si minificas el CSS, JS y el HTML del sitio con un plugin de caché, no es necesario que lo hagas con tu CDN.
Combinar el CSS y el JS del sitio
Una de las mejoras de velocidad que encontrarás en los plugins de caché es la opción de agrupar todos los archivos CSS en uno y todos los archivos JS en otro.
Si tienes 10 archivos CSS y los combinar, vas a reducir el numero de solicitudes de 10 a 1. Lo mismo se puede decir sobre la agrupación o combinación de todo el JS del sitio.
Lo aconsejable es probar si esto tiene un impacto positivo en el sitio.
Si deseas leer más sobre esto, puedes encontrarlo acá
CSS Critico
Otra de las medidas para mejorar la carga de tu sitio de WordPress es generar CSS critico del sitio.
Esto es algo que puedes hacer por medio de plugins de caché como WP Rocket
Básicamente lo que haces es permitirle al navegador cargar el CSS necesario más importante primero y el menos importante posteriormente.
Esto es algo que debes probar y ver el impacto que tiene en tu sitio.
Reducir el Número de Bots
Si quieres preservar los recursos de tu servidor debes evitar los ataques de fuerza bruta cambiando la dirección de acceso de tu sitio y bloqueando la mayor cantidad de bots posibles.
Jetpack tiene la opción de bloquear los ataques de fuerza bruta pero también lo puedes hacer usando WPS Hide Login.
CloudFlare y sus reglas de Firewall impide que bots y hackers agoten los recursos de tu servidor.
El Problema de Google Fonts
Esto es un problema super grave porque el texto de tu sitio no es visible hasta que las fuentes carguen.
Si quieres ahorrarte el problema, trata de usar la tipografía del sistema y no los fonts de Google.
Si quieres seguir usando Google Fonts, puedes usar OMGF | Host Google Fonts Locally
PerfMatters
Un plugin que te puede ayudar grandemente es PerfMatters ya que es el plugin perfecto para desactivar muchas funcionalidades nativas de wordpress que tal vez no necesites.
Revisa la lista de lo que el plugin puede hacer: PerfMatters Features
Este plugin es clave cuando debes JS y CSS innecesario de paginas en las cuales no son necesarios.
Alternativas de Perfmatters:
- Gonzales Plugin
- Asset CleanUp
Actualizar el Software de tu sitio
Una de las maneras de optimizar la velocidad de tu sitio es actualizando del software de tu sitio.
Las nuevas versiones tienen usualmente mejoras de desempeño que pueden mejorar la velocidad de tu sitio.
Actualiza WordPress, plugins, y otro software a nivel de servidor como la versión de PHP y el software usado en la base de datos puede mejorar la velocidad de tu sitio.
Desactivar los Emojis
Los emojis raramente son usados por los usuarios de WordPress por lo que deberías desactivarlos.
Esto lo puedes hacer por medio de plugins tales como PerfMatters o Falcone
Tambien puedes hacerlo con Code Snippets que es la forma más limpia de hacerlo.
Desactivar Incrustados
Yo no necesito que los incrustados se vean en el momento que estoy escribiendo por lo que puedes desactivar los incrustados o embed.
Esto lo puedes hacer por medio de PerfMatters o Falcone
Tambien puedes hacerlo con Code Snippets que es la forma más limpia de hacerlo.
Desactivar el Hotlinking
No permita que personas usan tus imágenes desde tu sitio por lo que deberías de prohibir esa posibilidad.
Eso lo puedes hacer desde CloudFlare o implementando un código en el htaccess
Remover, Limitar o Optimizar los Comentarios
Una de las cosas que deberías considerar es remover los comentarios del sitio, por lo general estos son una fuente de SPAM.
Si tienes muchos comentarios, el servidor debe de carga tu contenido y los comentarios en estos.
Si no lo encuentras provecho a esa funcionalidad, considera eliminarlos por completo o aplicar una optimización que haga que estos carguen diferidamente
Remover Archivos sin Utilizar
Algo que debes considerar es borrar todos los archivos que tu sitio no esté utilizando ya sean documentos, imágenes, temas, plugins, filas de la base de datos y publicaciones que no le aporten nada a tu sitio web.
Remover las Animaciones
Una de las formas en las que puedes reducir el numero de solicitudes es remover animaciones
