1. ¿Qué Factores Afectan la Velocidad de WordPress?
Un sitio web en WordPress tiene muchos factores que debemos tener en cuenta si queremos optimizar su velocidad; sin embargo, en este tutorial veremos los 10 factores más importantes y cómo optimizarlos para que nuestro sitio web cargue rápidamente. Entre ellos encontramos los siguientes:
- El Hosting
- La Plantilla o Tema
- La Cantidad de Plugins
- Optimización de Imágenes
- Utilizar un CDN
- Las Fuentes Externas (Google Fonts y Adobe Fonts)
- La Versión de PHP
- Bloquear Bots y Tráfico Malicioso
- Usar Plugins de Optimización
- Resolver Errores en PageSpeed Insights y GTmetrix
Si bien estos factores nos van a permitir optimizar WordPress, primero lo primero, tenemos que hacer un par de cosas muy importantes para poder empezar a optimizar.
1.1. Tiempos de Carga en GTmetrix
Lo primero que debemos hacer conocer el tiempo de carga de nuestro sitio web, para ello, sigue los siguientes pasos:
1. Ingresa al sitio web de GTmetrix. Una vez en la página veremos una barra de búsqueda donde ingresamos nuestro nombre de dominio y haremos clic en Test Your Site.
2. Al finalizar la prueba, recibiremos un reporte completo del rendimiento de nuestro sitio web. En nuestro caso el análisis revelo que nuestra página cargó en 2.6 segundos, es decir que excede el tiempo de carga recomendado. Además, recibimos una calificación de grado B, que si bien no es la peor, queremos mejorarla y obtener una A.
3. Después del análisis de nuestro sitio web con GTmetrix, procedemos a identificar los factores que perjudican nuestro rendimiento. Para ello, GTmetrix nos proporciona un listado con los problemas principales que le restan velocidad a nuestro sitio web. En nuestro caso los resultados son los siguientes: Tenemos recursos que bloquean el renderizado de nuestra página y tenemos imágenes que no están optimizadas.
4. Para tener una visión más clara podemos ver los detalles de la carga de nuestra página en Detalles de la página. En este punto, podemos observar los elementos que han tomado más tiempo en cargarse. En nuestro caso notamos que: El sitio se ha cargado en 2.6 segundos, el tamaño de la página es de 1.6 MB y que la mayor parte de la página está compartida entre las imágenes y las fuentes.
5. Bien, hemos hecho un análisis de optimización de nuestro sitio web con GTmetrix y hemos logrado identificar por lo menos dos aspectos importantes que le están restando velocidad a nuestro sitio web.
1.2. Tiempos de Carga en Google PageSpeed Insights
El análisis de velocidad de nuestro sitio web no acaba aquí, ahora usaremos Google PageSpeed para obtener otro reporte de rendimiento y buscar más elementos que pueden afectar la velocidad de nuestra página.
1. Para obtener un reporte de rendimiento de Google debemos ingresar al siguiente enlace: PageSpeed Isnights, allí veremos una barra de búsqueda donde ingresamos nuestro nombre de dominio y haremos clic en Analizar.
2. Nuestro resultado fue un puntaje de 24 en móvil y 69 en ordenador. Sin duda algunas cosas que mejorar.
3. Ahora, analizaremos el reporte que nos ha dado Google y así sabremos que debemos corregir en nuestro sitio web. Lo primero que analizaremos serán los datos del experimento, dado que nos interesa saber cuánto tardó la página en cargarse: El resultado en ordenador fue 3.1 segundos (Time to Interactive), ese tiempo nos indica que el sitio no está optimizado.
4. La sección diagnóstico y oportunidades nos brinda recomendaciones y posibles causas que afectan la velocidad de un sitio web. En nuestro caso, se nos indica que tenemos problemas con las imágenes y hay recursos que bloquean el renderizado.
1.3. Resultados del Análisis
En nuestro caso, tenemos problemas serios con el tiempo de carga del sitio web y esto se debe en parte por usar imágenes inadecuadas y no contar con un plugin de optimización.
Ahora que ya tenemos nuestros resultados, veremos uno por uno cuales son los principales factores que definimos en el listado inicial y que técnicas podemos utilizar para optimizar nuestra web.
2. El Hosting
El hosting es el primer factor y quizás el de más importancia cuando hablamos de velocidad. Iremos directo al grano, si quieres velocidad, el mejor proveedor de hosting que hemos encontrado es Cloudways.
Este proveedor integra plataformas en la nube de primer nivel como: Digital Ocean, Vultr, Linode, AWS y Google Cloud, y nos permite crear servidores y desplegar aplicaciones en cualquiera de ellos sin conocimientos técnicos. Algunos de los beneficios mas importantes que destacamos de ellos son:
- Precios muy competitivos (desde 10 USD al mes)
- Soporte vía chat y ticket 24/7/365
- SSL gratuito de Lets Encrypt
- Cloudways CDN desde 1 dólar al mes
- Migración libre de tus aplicaciones
- Firewalls dedicados
- Monitoreo en tiempo real 24/7
- Protección de bots integrada a tu servidor
- Copias de seguridad automatizadas (locales y offsite)
- Ambientes de prueba en un solo clic
- Actualizaciones de seguridad automáticas
- Servidores habilitados HTTP/2
- Acceso por SSH y SFTP a tus aplicaciones
- Optimizado con cachés avanzadas (Memcached y Varnish)
- Instalación ilimitada de aplicaciones
Nosotros en MagoWP utilizamos Cloudways desde el 2017 y nuestra web es muy rápida como lo habrás podido notar. En caso de que estés interesado, también puedes utilizar nuestro código y obtener un descuento en Cloudways (si prefieres una alternativa 100% dedicada a WordPress, utiliza Kinsta).
Por otro lado, ya sea que estés creando sitios web estáticos, landing pages con poco tráfico, tengas una página personal simple o una tienda online con miles de producto, sea cual sea tu necesidad, te recomendamos evitar los siguientes proveedores de hosting con los cuales hemos tenido malas experiencias:
- HostGator – Servidores lentos, mal soporte y limita mucho el uso de CPU.
- GoDaddy – GoDaddy es una muy buena opción para comprar tu dominio, pero solo eso.
- Hostinger – Puedes encontrar muchas reseñas falsas, y si bien sus planes son extremadamente baratos, obtendrás pésimos resultados de velocidad.
Importante: Asegúrate que el host que elijas tenga centros de datos cerca de tu publico objetivo. Por ejemplo, si vas a tener una pagina web para usuarios en Latinoamérica, trata de que tu servidor se encuentre en Brazil, Miami, o cualquier ubicación que sea la mas cercana geográficamente.
3. La Plantilla o Tema
La plantilla de nuestro sitio web juega un papel importante en la optimización, una plantilla con código no optimizado nos restará velocidad y además perjudicará el SEO. En este caso nuestra recomendación es que utilices temas profesionales como:
- Astra
- GeneratePress
- Hello Elementor (Recomendado con Elementor PRO)
- Neve
- OceanWP
A continuación, te mostramos resultados reales de cada uno de estos temas en instalaciones de WordPress en blanco. El hosting que utilizamos para los test es Cloudways.
Resultados Astra:
Resultados GeneratePress:
Resultados Hello Elementor:
Resultados Neve:
Resultados OceanWP:
Existen otras plantillas muy buenas en el mercado como Genesis Framework de StudioPress; sin embargo, es una excelente alternativa sólo si tienes conocimientos intermedios de HTML, CSS y PHP.
4. La Cantidad de Plugins Instalados
Usar muchos plugins en nuestro sitio web afecta seriamente su velocidad. Por ello, sigue los siguientes consejos básicos:
- Mantén un máximo de 10 a 15 plugins instalados, mientras menos, mejor.
- Limítate a solo instalar plugins confiables y conocidos.
- Solo instala plugins que sean importantes para las funciones de tu sitio web.
- Elimina de tu sitio web todos los plugins que no utilices. Si, elimínalos, no solo los desactives.
Si sigues estos consejos tu sitio web será mucho más ligero, e inclusive estarás contribuyendo en la seguridad de este. Por otro lado, algunos plugins que pueden generar un impacto negativo en la velocidad de tu web son:
- Beaver Builder
- Broken Link Checker
- Contact Form 7
- Disqus Comments
- Divi Builder
- Elementor
- Google Analytics
- Jetpack
- Thrive Architect (y la mayoria de plugins de Thrive)
- Uber Menu
- Wordfence (y la mayoría de plugins de seguridad)
- WP Social Share
- Yoast SEO
Ahora bien, esto no significa que no los utilices, muchos de ellos son excelentes y en muchos casos indispensables. Sin embargo, es importante que conozcas que pueden tener un impacto en la velocidad de tu web, y puedas optimizar su uso.
5. Optimizar las Imágenes
La resolución y el tamaño de las imágenes afecta muchísimo en la optimización de un sitio web, de hecho, es uno de los problemas de optimización más comunes. Por eso, debemos asegurarnos de que las imágenes en nuestro sitio web estén optimizadas.
Algunas de las recomendaciones de Google PageSpeed y GTmetrix más comunes son:
- Servir Imágenes a Escala: Esto nos indica que debemos cambiar el tamaño de las imágenes para que sean más pequeñas.
- Especifique las Dimensiones de la imagen: Debemos agregar un atributo de ancho/alto al HTML de la imagen.
- Compresión sin Pérdida: Debemos comprimir las imágenes antes de subirlas a nuestro sitio web.
- Carga diferida (Lazy load): Esto sugiere que retrasemos la carga de imágenes/vídeos hasta que sean visibles para el lector. Esta funcionalidad fue integrada en la versión 5.4 de WordPress, por lo que podrías evitar usar plugins para ello.
- Servir Imágenes usando Formatos de Próxima Generación: Hoy en día es recomendado utilizar imágenes con formato WebP. Hay muchos CDN que sirven imágenes en este formato.
Para optimizar las imágenes de tu sitio web puedes usar plugins como reSmush.it, pero también puedes hacerlo de forma manual.
Nuestra recomendación es que optimices las imágenes de tu sitio web de forma manual con programas como Photoshop o Gimp; sin embargo, también puedes hacerlo a través de plataformas gratuitas como tinypng.com. Ten en cuenta que mientras menos plugins instalemos, mejor.
Tip: Otro factor que debes tener en cuenta es el ancho de la pagina donde piensas ingresar las imágenes. Si el ancho de tu pagina es de 800 pixels, no subas imágenes con 1200 o 1560 pixels. Esto solo hará que el navegador tenga que ejecutar una mayor cantidad de acciones para re-dimensionar tus imágenes.
6. Utilizar un CDN
Las redes de entrega de contenido (Content Delivery Networks o CDN) en algunos casos están incluidos dentro del plan de hosting que contratamos; sin embargo, es muy común que no este incluido o tenga un costo adicional.
Los CDN tradicionales son utilizados principalmente para servir contenido dinámico a alta velocidad, por lo que las imágenes cargaran de forma veloz. En caso de que estés utilizando a Cloudways como tu proveedor de hosting, tendrás acceso a Cloudways CDN desde 1 dólar al mes. Si necesitas un CDN distinto puedes utilizar el de WP Rocket.
Por otro lado, tenemos los reverse proxy CDN o WAF CDN, estos de aquí interceptan todas las solicitudes entrantes y actúan como servidor intermediario entre el cliente y su host, el cual incluye la capa del firewall a nivel de DNS y protege nuestro sitio web de muchísimos bots y usuarios maliciosos. Entre los mas populares encontramos a Sucuri Firewall y Cloudflare.
Otra recomendación es que no utilices un CDN gratuito, pues el efecto resulta en muchos casos contraproducente ya que estos no tienen soporte para servir imágenes a gran velocidad.
En resumen, el uso de un CDN gratuito para la seguridad es buena idea, pero para velocidad no.
7. Las Fuentes Externas (Google Fonts y Adobe Fonts)
Es un hecho, el uso de las fuentes de Google Fonts y/o Adobe Fonts puede ser crítico para lograr el diseño perfecto de nuestra web; sin embargo, cuando hablamos de velocidad, una buena técnica es usar la mínima cantidad de fuentes y variaciones de fuentes.
Ejemplo: Si usamos la fuente Lato de Google y activamos el uso de las variaciones: Normal, Negrita, Normal Cursiva y Normal en Negrita, esto hará que el navegador cargue solo 4 variaciones en lugar de las 10 que están disponibles.
Solo con eso el navegador tendrá que renderizar menos elementos y tendrá como resultado una pagina mas veloz y con menor tiempo de carga. Por otro lado, si quieres aumentar la velocidad de tu sitio web aún más, te dejamos el siguiente checklist:
- Considera utilizar las fuentes que el navegador tiene preestablecidas, esto ayudará a reducir el tiempo de carga de nuestro sitio web
- Utiliza solo un tipo de fuente
- Utiliza el mínimo de variaciones
- Aloja tus fuentes de forma local (OMGF)
- Precarga las fuentes: Tome las URL de sus archivos de fuentes en el informe de GTmetrix Waterfall o en Google PageSpeed y agréguelas a la opción pre-cargar fuentes de WP Rocket.
8. Usar la Última Versión de PHP
La versión de PHP que utilicemos para nuestro sitio web tiene un impacto significativo en la velocidad de carga. Para conocer qué versión de PHP estás utilizando ingresa a tu escritorio de WordPress y ve a Herramientas > Salud del Sitio > Información.
Una vez dentro selecciona Servidor en el desplegable de abajo:
Para actualizar la versión PHP de tu sitio web, debes hacerlo desde tu cuenta de hosting. En nuestro caso ingresamos a Cloudways y en server management seleccionamos Settings & Packages > Packages, actualizamos la versión PHP a la más reciente y hacemos clic en Save.
Si deseas conocer cuál es la versión de PHP más utilizada por los usuarios de WordPress, puedes hacerlo desde el sitio web de WordPress.org en este enlace.
9. Bloquear Bots y Tráfico Malicioso
Este paso está muy relacionado a la seguridad para WordPress; sin embargo, también impacta en la optimización y velocidad de forma significativa, y es que no hay que ser un genio para entender que si tenemos miles de bots maliciosos generando solicitudes en nuestro servidor, el mismo va tender a saturarse y por consiguiente, volverse más lento.
Para solucionar esto tenemos varias alternativas ligeras y que prácticamente no afectarán en nada a nuestra velocidad. En el caso de que estés utilizando Cloudways, solo ingresa a la sección Application Management > Bot Protection y selecciona Activar.
Esta función que viene integrada en Cloudways nos va proteger de ataques de fuerza bruta y limitará la cantidad de intentos de acceso a nuestro sitio web.
Además, te recomendamos complementar esto con un Firewall como Sucuri el cual actúa a nivel de DNS y no afectará en nada la velocidad de tu web. Ademas incluye un CDN que viene amarrado con el Firewall.
Finalmente, si prefieres utilizar un plugin (esto va impactar de forma en tu velocidad) puedes instalar y configurar Wordfence en tu sitio web. Ten en cuenta que si instalas Wordfence, no será necesaria la opcion de Bot Protection de Cloudways.
Recuerda que cualquiera de estas tres alternativas es válida, pero te recomendamos complementar las 2 primeras para no afectar tu sitio web con plugins pesados.
10. Usar Plugins de Optimización
Nuestra recomendación en este caso es WP Rocket, ya que cuenta con el paquete completo y no tendrás que instalar varios plugins para cubrir aspectos individuales de optimización; sin embargo, en su lugar puedes utilizar Autoptimize que tiene menos funciones pero es gratuito.
Algunos de los beneficios que tendrás en el rendimiento de tu sitio web son los siguientes:
- Almacenamiento en caché: Hace que tu sitio cargue de forma veloz, lo cual también impacta en el SEO.
- Precarga de caché: WP Rocket precarga automáticamente el caché cada vez que realices cambios en tus páginas web.
- Almacenamiento en caché del navegador: Permite almacenar recursos como imágenes, JS y CSS en la memoria local del navegador.
- Minificación: Minifica y concatena archivos CSS y Javascript con un clic.
- Compresión GZIP: Disminuye el tamaño de los archivos y tus visitantes obtienen su contenido más rápido.
- CDN: Permite integrar fácilmente el uso de CDNs como Rocket CDN y Cloudflare con un par de clics.
- Lazy loading: Difiere la carga de las imágenes para que aparezcan conforme el usuario hace scroll en tu página.
- Otros: Compatibilidad con formatos WebP, alojamiento local de Google Analytics y Facebook Pixel, generación de CSS crítico y más.
Para instalar WP Rocket en tu sitio web, primero ingresa a la página oficial de WP Rocket y haz la compra del plugin, luego de ello, ingresa a tu cuenta, descarga el archivo .zip y subelo de forma manual en la sección Plugins > Agregar nuevo en tu escritorio de WordPress.
Tip: Ten en cuenta que solo debes utilizar un plugin de optimización a la vez, ya que instalar dos o más causaría un efecto contraproducente y podría causar problemas de compatibilidad.
11. Resolver Errores en PageSpeed Insights y GTmetrix
Entre los problemas comunes indicados por Google PageSpeed Insights encontramos por lo menos 4 que son los siguientes:
- Reducir el Tiempo de Respuesta Inicial del Servidor
- Eliminar los Recursos que Bloqueen el Renderizado
- Agregar Async o Defer a los Scripts de WordPress
- Cargar Previamente las Solicitudes Clave
Por otro lado, GTmetrix también nos muestra oportunidades de optimización como las que acabamos de mencionar. Si al analizar tu sitio web presentas alguno de estos problemas, no te preocupes, a continuación te explicamos cómo solucionarlos.
11.1. Reducir el Tiempo de Respuesta Inicial del Servidor
Este es un problema muy común que podemos recibir después de un análisis en Google PageSpeed. La causa de este problema es la velocidad del servidor donde tenemos alojado el sitio web.
Por lo general, proveedores de hosting de baja calidad tienen sus servidores a tope y llenos de clientes, lo cual como es evidente hará que nuestros sitios web se vean afectados, sobre todo cuando hablamos de hosting compartido.
Es por ello la importancia de empezar siempre con el pie derecho y elegir un proveedor de hosting de calidad. Si has estado leyendo nuestras guías, lo mas probable es que ya cuentes con uno de ellos, pero sino, te dejamos aquí un análisis detallado por cada tipo de hosting para WordPress.
- Hosting Compartido
- Hosting WordPress Administrado
- Hosting en la Nube
- Hosting en VPS
- Servidores Dedicados
Si no tienes tiempo para leer cada una de ellas, te recomendamos ir con Cloudways, que es el mismo que utilizamos nosotros.
11.2. Elimina los Recursos que Bloqueen el Renderizado
Este error lo recibimos porque al iniciar la carga de la página primero se ejecuta el código CSS y Javascript, retrasando el renderizado de nuestro sitio web. La solución es instalar un plugin de optimización como WP rocket o Autoptimize.
Una vez instalado el plugin, debes generar el CSS crítico y diferir el código JavaScript. Ten cuenta que elementos como las fuentes de Google no se podrán optimizar por lo que las puedes alojar de forma local.
11.3. Agregar Async o Defer a los Scripts de WordPress
Async y Defer son atributos HTML que configuran la forma en que se descarga y ejecuta un script. Un script normal sin atributo Async o Defer inicia con el análisis del HTML, se encuentra con un script que detiene el renderizado HTML y descarga y ejecuta el script, termina esto y se continúa con el resto del renderizado.
En cambio, si se cuentan con los atributos:
- Async: En este caso los scripts son descargados asincrónicamente. El navegador analiza el html, se encuentra con un script y los descarga sin detener el análisis del HTML. Una vez que ha descargado el script, detiene el renderizado HTML para ejecutar el script y finalizado este proceso continúa el renderizado HTML.
- Defer: En este caso la ejecución de los scripts se difieren hasta el final. Se inicia el renderizado HTML y los script son descargados simultáneamente sin detener el renderizado. Una vez termina en analisis HTML, se ejecuta el script de modo que no hay bloqueo en el renderizado.
Para usar alguno de estos atributos y eliminar los recursos que bloquean el renderizado, hay dos opciones: usar un plugin o hacerlo manual.
Nosotros recomendamos optimizar esto instalando WP Rocket, pero los usuarios más avanzados pueden modificar el archivo functions.php y agregar los atributos a los script que sean necesarios.
11.4. Carga Previamente las Solicitudes Clave
Esto significa que algunos elementos claves como las fuentes no se están cargando en el momento debido y por lo tanto, los elementos claves del sitio web se demoran en aparecer en la pantalla del usuario.
Para ello, los plugins de optimización cuentan con una opción llamada: Precarga de peticiones específicas, esta opción permite que incluyamos en forma de URL los elementos a cargar con prioridad. Si estás usando Autoptimize, ingresa en Ajustes > Autoptimize en la pestaña extra.
En este punto veremos un campo llamado Precarga de peticiones específicas, allí pegaremos las URL que aparecen en PageSpeed separadas por comas y finalizamos el proceso dando clic en guardar.
Luego de guardar, procedemos a borrar la caché del sitio web y hacemos otro análisis con PageSpeed.
12. Comprobando los Resultados
Después de poner en práctica todas las técnicas de optimización que te hemos explicado en este tutorial, tendremos que verificar si la velocidad de carga se ha reducido y la puntuación del rendimiento ha aumentado en GTmetrix y Google PageSpeed.
Resultados en GTmetrix: Nuestra página de ejemplo logró una clasificación A, con un tiempo de carga de tan solo 1 segundo:
Resultados en PageSpeed Insights: Nuestra otra página de ejemplo logró una puntuación de 99 con un tiempo de carga de sólo 0.7 segundos:
13. Conclusión
La velocidad de nuestro sitio web está determinada por muchos factores, puede afectar fuertemente en la experiencia de nuestros visitantes e inclusive afectar directamente al SEO en los motores de búsqueda. Veamos de forma muy resumida los factores más importantes que revisamos en este tutorial:
- El Hosting – Te recomendamos utilizar Cloudways o Kinsta.
- La Plantilla – Entre las más rápidas: GeneratePress, Astra, Hello (con Elementor PRO), Neve y OceanWP.
- La Cantidad de Plugins – Limítate a utilizar entre 10 a 15 plugins.
- Imágenes – Comprime tus imágenes con tinypng.com o con reSmush.it.
- El CDN – Utiliza un CDN como Cloudways CDN o Rocket CDN.
- Las Fuentes Externas – Utiliza la menor variedad de fuentes y alojalas localmente (OMGF).
- La Versión del PHP – Actualiza a la última versión recomendada de PHP.
- Los Bots y Tráfico Malicioso – Utiliza la protección de Bots de Cloudways + Sucuri Firewall.
- Plugins de Optimización – Obtuvimos los mejores resultados con WP Rocket.
- Resolución de errores comunes – Revisa el punto 11 para resolver errores frecuentes.
Esperamos que este tutorial te haya sido de utilidad y te recomendamos mantener estas buenas prácticas en todo momento. Si te gusto o si tienes comentarios sobre este tutorial, déjanos un mensaje lineas abajo.
