Acelera tu web a máxima velocidad

La velocidad de tu sitio web es un factor clave para el éxito de tu negocio online, los visitantes siempre se encuentran de camino y no esperarán a que tu web cargue, prefieren darle al botón para regresar y visitar otro sitio web en lugar de esperar.

Esto claramente afecta a tu negocio, no importando si vendes tus propios productos, obtienes ganancias por anuncios o eres un afiliado. Los usuarios abandonarán tu sitio web y visitarán a la competencia.

Es por eso que en este tutorial quiero mostrarte como puedes lograr que tu sitio web cargue en menos de dos segundos.

¿Cómo medir la velocidad de tu sitio web?

Normalmente los dueños de sitios web piensan que su web carga rápidamente, simplemente debido a que ellos lo experimentan de esa forma al navegar por su sitio web desde su computadora o teléfono.

Esto es un gran error, ya que lo que está sucediendo es que el navegador se encuentra guardando mucha información del sitio web en cache, y la sirve desde la memoria local, en lugar de descargar los mismos archivos una y otra vez.

De modo que un usuario que no visita tu sitio web frecuentemente tendrá una experiencia diferente a la que tu tienes.

Es por esta razón que necesitamos utilizar algunas herramientas para verificar la verdadera velocidad de nuestro sitio web.

Existen muchas herramientas que te permiten medir la velocidad de tu sitio web, algunas son mejores que otras, es por esto que para ahorrarte el trabajo de buscar entre la gran cantidad de ofertas disponibles, voy a recomendarte utilizar específicamente dos.
Y vamos a ver como se utilizan rápidamente.

Pingdom.com

Pingdom es un sito web que te permite obtener resultados fáciles de entender y normalmente será suficiente para identificar el problema de velocidad en la mayoría de los casos.

Utilizar esta herramienta es muy simple

  1. Debes colocar tu dominio en el campo URL
  2. Puedes seleccionar una zona desde la cual el servidor se conectará a tu sitio web
  3. Finalmente da clic en el botón “Start test”

En la siguiente ventana podremos ver el resultado de velocidad para nuestro sitio web, tendremos muchos datos de donde podemos sacar algunas conclusiones:

En primer lugar tendremos una visión general de la velocidad y optimización de nuestro sitio web, puedes observar que en este caso nuestro sitio web carga en 0.46 Segundos, también es muy importante que prestes atención a la cantidad de “Request” o solicitudes que hace tu sitio web y el peso de la página; en nuestro caso contamos con pocas solicitudes y un peso muy ligero en nuestra página, lo que aumenta su velocidad.

Luego PingDoom Tools nos muestra algunos concejos para optimizar aún más la velocidad de nuestro sitio web, no es necesario que ejecutes todos los concejos indicados en esta zona, pero es importante tomarlos en cuenta para el futuro.

En esta área contamos con varias tablas de datos que nos entregan información importante sobre el peso y las solicitudes que hace nuestra página, por ejemplo, en este caso puedes observar, que el del total de 1.2 MB que tiene nuestra página, el 47.16% (552.9 KB) corresponde a los archivos de las fuentes.

En muchas ocasiones cuando ayudamos a nuestros clientes a optimizar sus sitios web, observamos que sus páginas tienen un peso excesivo y casi siempre es debido a las imágenes.

Entonces la información que obtenemos aquí, nos permite detectar los tipos de archivos que más tiempo tardan en cargar.

Finalmente PingDoom nos muestra un listado de todos los archivos que nuestro sitio web carga para cada visitante, esta información te permitite conocer el tiempo de espera y carga de cada archivo dentro de tu web.

GTMetrix

GTMetrix es otra herramienta que nos permite medir la velocidad de nuestro sitio web, sin embargo cuenta con algunas características adicionales que no tenemos en PingDoom, como la grabación en video del test, línea de tiempo de eventos, historial de la velocidad de nuestra web y test diarios automáticos gratis.

Para poder gozar de todos los beneficios que ofrece GTMetrix, tendremos que crear una cuenta gratis de usuario.

Iniciar el test es simple, colocamos nuestro sitio web y damos clic en “Test your site”.

gtmetrix analizar tu sitio web

En la siguiente pantalla podremos ver los resultados generales de nuestro sitio web, al igual que PingDoom, GTMetrix nos muestra la velocidad promedio de nuestro sitio web, el peso de los archivos y la cantidad de solicitudes que se encuentra haciendo.

gtmetrix resultados generales de velocidad web

Abajo de los resultados generales tenemos una serie de pestañas que nos permiten evaluar mejor todos los aspectos de la carga de nuestro sitio web, esta herramienta te permite profundizar más en lo que ocurre dentro de tu sitio web y gracias a ella podrás detectar fácilmente los archivos que se encuentran cargando demasiado tu sitio web o puntos que puedes mejorar.

En las primeras dos pestañas nos presentan concejos provistos desde PageSpeed y YSlow para optimizar nuestro sitio web, aunque no es necesario o recomendable seguir estos concejos al pie de la letra, vale la pena darle un vistazo a los posibles cambios que nos plantea GTMetrix.

concejos de optimización web gtmetrix

Al igual que en PingDoom, dentro de la pestaña WaterFall contamos con un reporte del tiempo de carga para cada uno de los archivos que componen nuestro sitio web, es importante darle un vistazo a esta pestaña, para identificar si existe algún archivo en particular que se encuentre tardando demasiado en cargar.

También podemos identificar archivos demasiado pesados o incluso archivos perdidos, como imágenes, fuentes o archivos JS, igualmente debes prestar atención a los archivos que cargan otros sitios web, como FaceBook, Google con Analytics, Adsense o Adwords, ya que en ocasiones los scripts que añadimos desde otros sitios web, pueden provocar que nuestro sitio web cargue lentamente.

cascada de archivos gtmetrix

La pestaña Timing nos muestra los diferentes eventos que ocurren en nuestro sitio web mientras carga, existen dos eventos que son particularmente importantes, ellos son el TTFB y el DOM Loaded.

TTFB o Time to First Byte, es el tiempo que tarda nuestro sitio web para enviar la primer señal de vida al navegador, es decir, es el tiempo que nuestro sitio web se tarda en dar su primera respuesta, para un sitio web creado con WordPress un buen TTFB debería encontrarse en los 200 a 400 milisegundos.

DOM Loaded es el tiempo en el que nuestro sitio web carga la interfaz del usuario y el visitante puede interactuar con nuestro sitio web, que el DOM (lo que el usuario ve en nuestro sitio web) cargue no quiere decir que todo el contenido de nuestra web ha cargado por completo, ya que podemos tener algunos scripts externos en nuestro sitio web que falten por cargar, pero el sitio web ya puede ser utilizado en este punto y el usuario puede ver nuestro contenido sin problemas.

timing gtmetrix upempresa

La pestaña de video nos muestra una grabación de como carga nuestro sitio web, podremos ver también marcas de tiempo para los diferentes eventos como el TTFB o el DOM Loaded, debes tener una cuenta de usuario para poder acceder a esta característica de GTMetrix.

video test gtmetrix upempresa

Finalmente GTMetrix nos permite guardar el historial de nuestro sitio web, esto te será de mucha utilidad para medir el progreso en la optimización de tu sitio web.

historial optimización gtmetrix

Gracias a estas herramientas, puedes encontrar el problema que hace lento a tu sitio web WordPress, existen muchas herramientas más que puedes utilizar, pero PingDoom y GTMetrix van al punto y sintetizan todo en un reporte muy fácil de comprender.

Utilizando GTMetrix incluso puedes hacer pruebas automáticas diarias para verificar que tu sitio web se encuentre entregando la mejor experiencia de usuario posible todos los días.

¿Por qué tu sitio web WordPress es lento?

Después de realizar las pruebas de velocidad en diferentes herramientas y sitios web, posiblemente terminaste con una gran cantidad de concejos que no sabes como implementar en tu sitio web; normalmente estos “concejos” son demasiado técnicos y difíciles de implementar en nuestros sitios web, además de que lo que ganaremos al añadirlos no compensa el dolor de cabeza.

Todos los días ayudamos a nuestros clientes en la optimización de sus sitios web, y en promedio nuestros clientes de hosting disfrutan de un tiempo de carga de 0.8 a 1.5 segundos en sus sitios web.

Gracias a esta experiencia, podemos decir que existen 4 factores cruciales en la optimización de tu sitio web WordPress:

  • Web Hosting: Este es el primer factor importante, el servidor que aloja tu sitio web debe encontrarse optimizado para WordPress, de lo contrario tu sitio web tardará en conectarse debido a la falta de recursos o la mala configuración de tu servidor.
  • Falta de Cache: Cada vez que un usuario entra en tu web WordPress, lo que hace el servidor es generar la página que el usuario desea ver, si son dos usuarios, entonces la página se generá por completo dos veces, si al día recibes miles de visitantes, tu sitio web se encuentra haciendo la misma tarea repetitiva una y otra vez. Para solucionar este problema, podemos instalar un plugin que nos permita generar las páginas una sola vez y servirla a todos los usuarios, ahorrando recursos de nuestro servidor, lo que se traduce en mejores tiempos de carga para nuestro sitio web.
  • Peso de los archivos:  Si después de hacer diferentes pruebas, descubres que tu página pesa 10MB+, entonces ahí tienes el problema. Normalmente el peso excesivo de un sitio web se encuentra en las imágenes, debido a su falta de optimización. Idealmente tu sitio web debería encontrarse en el rango de 1 a 3 MB.
  • Plugins Problemáticos: Algunos plugins añaden scripts adicionales a tu sitio web que no se encuentran optimizados, y esto puede derivar en tu sitio web tardando más en cargar.

Tomando estos puntos en cuenta, vamos a ver como solucionarlos y mejorar la velocidad de nuestro sitio web.

Plugins Cache para mejorar la velocidad de tu web

WordPress es un gestor de contenidos dinámico, lo que esto quiere decir es que las páginas que tus usuarios ven, son generadas cada vez que visitan tu sitio web.

A diferencia de un sitio estático, un sistema dinámico utiliza recursos de tu servidor en cada visita, para poder generar la página que el usuario desea visitar.

Como imaginarás esto provoca una sobre carga en tu sitio web, especialmente si cuentas con muchas visitas simultaneas.

Para solucionar este problema, podemos instalar un plugin que genera nuestras páginas una sola vez, y luego las sirve a todos nuestros usuarios, evitando generar la misma página una y otra vez.

Esto evita que tu servidor se sobre cargue y entregará archivos estáticos a tus visitantes, este simple paso puede mejorar hasta un 60% la velocidad de tu sitio web.

Para añadir esta función a nuestro sitio web, necesitamos un plugin Cache, existen muchos plugins disponibles para este propósito, algunos de pago y otros gratuitos, para mencionar algunos, puedes visitar los siguientes:

  • WPRocket: Es un plugin de pago que te permite añadir la función cache a tu sitio web fácilmente.
  • W3 Total Cache: Un plugin gratuito con una pequeña curva de aprendizaje.
  • WP Super Cache: Plugin gratuito con funciones limitadas.

Aunque los anteriores plugins pueden hacer el trabajo de crear la versión cache de nuestro sitio web, cada uno tiene sus propias limitaciones y en algunos casos los precios por la ayuda o la versión premium del plugin es un poco excesivo, es por esta razón que vamos a utilizar el plugin gratuito con más características y funciones que existe, estamos hablando de LiteSpeed Cache.

Añadiendo LiteSpeed Cache a WordPresss

LiteSpeed Cache es un plugin gratuito creado por la empresa LiteSpeed, esta empresa se encarga principalmente de crear tecnologías que ayudan a los servidores webs en la optimización de sus recursos.LiteSpeed cache plugin

Un sitio web WordPress alojado en un hosting que tenga LiteSpeed, funcionará como mínimo 5 veces más rápido que en un hosting normal.

El plugin LiteSpeed Cache puedes ser utilizado en cualquier servidor, entonces aunque tu servicio de hosting no se encuentre optimizado con LiteSpeed, siempre puedes utilizar el plugin en tu sitio web.

Aunque siempre será mejor utilizar un servicio de hosting que se preocupe por la velocidad de tu sitio web, y tenga sus servidores optimizados con LiteSpeed.

El plugin LiteSpeed Cache, también tiene algunas funciones especiales que se podrán activar únicamente si el servidor que aloja tu sitio web tiene LiteSpeed activado, te recomiendo consultar con tu proveedor de hosting si ellos tienen optimizados sus servidores para utilizar LiteSpeed.

Si tu alojador web no cuenta con esta función, entonces puedes migrar tu sitio web con nuestros planes de hosting, todos nuestros planes cuentan con turbo optimización para WordPress, gracias a que nuestros servidores se encuentran optimizados con LiteSpeed, CloudLinux y discos SSD.

Además nuestro equipo de soporte puede optimizar tu sitio web completamente gratis, asegurandose que tu web cargue en menos de 2 segundos.

Puedes iniciar o migrar tu sitio web con la mejor velocidad y seguridad con nuestro servicio de Hosting para WordPress.

Instalando LiteSpeed

Añadir LiteSpeed Cache a nuestro sitio web WordPress es una tarea fácil de realizar, podemos instalarlo como cualquier otro plugin en WordPress.

Primero vamos hacia el ménu plugins y luego damos clic en añadir nuevo.

añadir nuevo plugin

Desde la siguiente ventana podremos buscar el plugin LiteSpeed Cache, los instalamos y activamos el plugin.

instalar litespeed cache en wordpress

Configuración General

Ahora que el plugin ya se encuentra activado, podremos encontrar la opción “LiteSpeed Cache” en el menú principal de nuestra área de administración, normalmente se encontrará al final de los elementos de nuestro menú de administración, al darle clic nos llevará a las opciones generales del plugin.

ingresar en litespeed

Al inicio el plugin nos muestra las opciones más básicas que podemos modificar para mejorar la cache de nuestro sitio web.

En la primera tabla podemos definir la cantidad de tiempo que diferentes áreas de nuestra cache se encontrarán guardadas, por ejemplo el valor por defecto para la cache en general, se encuentra en 604,800 esos son 7 días; lo que esto quiere decir es que al final de esos 7 días, el plugin eliminará la cache y creará una nueva.

Puedo recomendarte no modificar estos valores, ya que en general funcionarán muy bien para ti, pero si lo deseas puedes aumentar o reducir la cantidad de tiempo que las páginas son guardadas en la cache.

Desde las opciones generales, también es posible activar o desactivar el plugin, si notamos que algo no va bien en nuestro sitio web podemos desactivar la cache unos momentos mientras encontramos el error.

opciones generales litespeed

En la siguiente tabla tenemos las opciones de Cache, desde esta pestaña contamos con la opción de activar o desactivar la cache para ciertos casos, por ejemplo, podríamos desactivar la cache para los usuarios registrados, activarla para los comentarios, colocar en cache la página de acceso, el favicon, etc…

Podrás ver que cada opción tiene su propia descripción, pero dejame aconcejarte desactivar la cache para los usuarios registrados, especialmente si tienes un sitio web de suscripción, como cursos online, una tienda o cualquier sitio web que requiera contenido dinámico en la sesiones de tus usuarios.

También te recomiendo desactivar el cache para la página de ingreso, tener la página de login en cache puede provocar errores para tus usuarios o incluso para ti, ya que no serás capaz de ver en tiempo real tu sesión de usuario. Si tu plantilla ya cuenta con una versión móvil, entonces también deberías desactivar el cache móvil.

cache configuración litespeed

Dentro de la pestaña purgar es posible modificar las reglas que activan la depuración de la memoria cache, por ejemplo, podríamos indicar que cada vez que publiquemos o modifiquemos un artículo en nuestro blog, toda la cache sea eliminada y se necesite crear una nueva, de esta forma nuestra versión cache se mantendrá siempre fresca con nuestras últimas entradas.

purgar opciones litespeed

Dentro de la pestaña excluir es posible evitar que ciertas páginas o usuarios se guarden dentro de la cache, en esta área te recomiendo verificar que en roles de usuario, el administrador se encuentre marcado, de esta forma no tendrás problemas en ver los cambios que haces en tu sitio web en tiempo real.

opciones excluir litespeed

Finalmente dentro de las opciones de LiteSpeed contamos con un botón que nos permite mostrar las opciones más avanzadas del plugin, con estas opciones adicionales, podremos combinar nuestros archivos CSS y JS, activar lazy load para nuestras imágenes, activar la optimización de imágenes y mucho mas.

Algunas de las opciones avanzadas funcionarán únicamente si contamos con un hosting que funcione sobre LiteSpeed.

Opciones avanzadas litespeed

Optimización de imágenes gratis

La optimización de las imágenes en tu sitio web, es una parte crucial en la optimización de velocidad. De todos los casos de optimización que llegan a nuestro equipo de soporte, 9 de cada 10 sitios web tienen imágenes demasiado pesadas.

Gracias a los test que hemos mencionado al inicio, podrás darte cuenta si las imágenes son el problema de tu sitio web.

Para solucionar este problema, puedes utilizar plugins que te ayudan a mejorar el tamaño de tus imágenes, pero LiteSpeed también nos permite optimizar nuestras imágenes completamente gratis.

Para iniciar la optimización de tus imágenes, puedes ingresar en LiteSpeed Cache > Optimización de imágenes

optimizacion de imagenes con litespeed

Desde la siguiente pantalla debes dar clic en el botón “Iniciar optimización”

iniciar el proceso de optimización de imagenes en litespeed

Luego de dar clic en iniciar, podrás ver el progreso de la optimización de tus imágenes, el proceso puede tardar varios minutos ya que LiteSpeed se comunica con sus servidores desde tu sitio web y envía las imágenes para ser reducidas, este proceso no afectará como se ve tu sitio web, las imágenes son remplazadas hasta que se encuentran optimizadas.

proceso de optimización de imágenes

Si lo deseas puedes utilizar otro plugin diferente para optimizar tus imágenes, este proceso es muy importante y tenemos un artículo hablando más sobre este tema, puedes verlo aquí: ¿Por qué y cómo optimizar tus imágenes para la web?

Hosting Optimizado para WordPress

Un buen servicio de hosting es clave para lograr la mejor velocidad en tu sitio web, debes asegurarte de tu web WordPress se encuentre alojada en un servicio que se encuentre altamente optimizado específicamente para WordPress.

El servidor no debe encontrarse únicamente optimizado en velocidad, también debes tomar en cuenta la seguridad a la hora de seleccionar el hosting para tu sitio web.

Tu sitio web puede ser muy rápido, pero si tiene alertas de seguridad para tu usuario, igual se ira de tu web para nunca regresar.

Es por eso que en UpEmpresa contamos con planes de hosting especialmente diseñados para alojar sitios web WordPress.

Antes de seleccionar un buen alojador web, asegurate que cuente con:

  • Un servidor basado en LiteSpeed que te permita utilizar el plugin de LiteSpeed Cache en todo su potencial, gracias a esta característica tu sitio web cargará en menos de dos segundos.
  • Sistemas de seguridad especializados en WordPress, WordPress es una plataforma increíble pero requiere varias verificaciones de seguridad del lado del servidor para lograr ser blindado ante todo tipo de ataques, asegurate especialmente de que cuente con servicios de mitigación para ataques DDoS, los cuales son realizados normalmente hacia la página de login en un brute force atack.
  • Certificado de seguridad SSL para tu sitio web, que sea fácil de instalar para ti.
  • Una infraestructura de tipo Cloud, que encapsule tu cuenta de hosting y no permita que sitios web de terceros afecten el rendimiento o la seguridad de tu propio sitio web.
  • Asegurate de que utilicen discos SSD, esto es crucial para la velocidad de tu web WordPress.

Estas son las características básicas y que deben estar siempre presentes en un buen alojador web especializado en WordPress.

En UpEmpresa contamos con todos estos beneficios y además vamos un paso más adelante y te entregamos:

  • Cientos de plantillas profesionales para WordPress Gratis, fáciles de editor y sin necesidad de utilizar código, gracias a estas plantillas podrás crear tus sitios web con un diseño profesional.
  • Además de ser fácil de instalar, con un solo clic, el certificado de seguridad SSL es completamente gratis.
  • Soporte especializado para WordPress, donde otros alojadores web te dejan solo y sin salida para solucionar los problemas de tu sitio web, nuestro equipo de soporte es capaz de solucionar cualquier problema dentro del código de tu sitio web, es como tener siempre a un equipo de ingenieros listos para ayudarte.

Te invito a que des un vistazo a nuestros planes de hosting para WordPress.

Y eso es todo, con el proceso que hemos realizado en este tutorial, tu sitio web cargará mucho más rápido y tus visitantes estarán más felices al utilizar tu sitio web.

Ahora te toca utilizar esta guía para mejorar la velocidad de tu sitio web, recuerda probar antes y después la velocidad de tu web, te sorprenderás de lo rápido que estos cambios pueden optimizar tu web WordPress.

2 comentarios en “Acelera tu web a máxima velocidad”

  1. Excelente herramienta litespeed cache no la conocía, quería preguntarte si algunas de tus plantillas esta optimizada para nichos evergreen para trabajar con Google Adsense?

    1. Lievanosan

      Buen día estimado Esteban, muchas gracias por su comentarios. Sobre los diseños, si, puede utilizar Adsense en cualquiera de estas plantillas, gracias al editor visual usted podrá añadir más fácilmente el código de Adsense exactamente en la zona que desea y en las dimensiones de su preferencia.

      Si desea más información sobre nuestros planes de hosting y las plantillas premium, puede enviarnos un mensaje hacia [email protected]

      Saludos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba