Optimizar la Velocidad de Carga WEB

150 150 Consultor SEO

En este artículo hablaremos estrictamente a retocar, y de cómo obtener un buen rendimiento en tu sitio web. Si tu objetivo es acelerar la carga de tu sitio web y sus páginas, esta guía que necesitas.

Mi nombre es Sara Solana y soy Consultora SEO freelance. Con este artículo quiero ayudar a los propietarios de negocios y profesionales que no tienen un amplio conocimiento de la materia, pero que quieren un sitio más rápido.

Te voy a dar consejos para mejorar la velocidad de tu sitio y a mostrar soluciones para proporcionar una experiencia agradable a tus visitantes.

Velocidad de Carga web

¿Por qué es importante mejorar la Velocidad de Carga Web?

Al no realizar un test de velocidad de carga, corres el riesgo de perder clientes potenciales y dinero. Así de fácil.

Contra mayor es el tiempo de espera, más probabilidades hay de que los usuarios dejen tu sitio para no volver jamás.

Esta imagen es una prueba de que los sitios rápidos hacen más conversiones.

Se puede deducir fácilmente que el tiempo de espera afecta sobre todo a la estancia de los visitantes y las conversiones .
De hecho, yo soy la primera en hacer clic en la “X” cuando el sitio tarda demasiado en cargar. Simplemente me aburro.

Lo que opina Google sobre la velocidad de Carga del los sitios WEB

Esto es lo que nos dijo hace tiempo Matt Cutts al respecto:

 

Esto también sucede con tus visitantes .

 

Si busco un servicio de reparación, por ejemplo, ¿tiene sentido esperar 10 segundos para que me des tu página de contacto?
Si solicito una cita, ¿tiene sentido esperar a que la página se cargue?
NO,  lo mas probable es  solicitar el servicio en otro lugar

También puedes decidir esperar, pero esto solo lo hacen unos pocos, el 90% de los usuarios no espera.

Y esto se demuestra en el siguiente gráfico. Muestra la relación entre el tiempo (en segundos) y el número de abandonos.
grafico de abandonos

Por esta razón, la optimización de un sitio web sirve principalmente para proporcionar al usuario una experiencia agradable, y para proveer información más rápidamente a tus clientes potenciales.

Si  tienes una página web, un sitio de comercio electrónico, una plataforma web o blog, no permitas que tus visitantes se marchen del sitio. 

¿Tu página es lenta?

Si tu respuesta es SI,  tengo varias técnicas para optimizar tu sitio.

Optimización y herramientas para medir la velocidad web

El primer paso para optimizar la velocidad tu sitio es hacer un salto a Google y utilizar la herramienta  Google PageSpeed Insights .

En este punto, introduce la URL del sitio y haz clic en Analizar.

Pero antes de continuar tengo que contar algo sobre Page Speed.
Recuerda que Page Speed , así como otras herramientas, sólo son capaces de determinar el rendimiento de dicha URL, y no de todo el sitio. Puede ocurrir que una página sea más rápida que otra. Ten cuidado ya que los valores no se refieren a todas las páginas del sitio.

Tal vez example.com es la principal, pero puede suceder que example.com/about sea una de las peores páginas de  la web.

Mi consejo es que pruebes todas las páginas del su sitio, pero … ¿qué hacer si las páginas son 500 o mas? Nos podemos tirar un año entero para analizarlo.

Es inhumano, pero demasiado común.

Si te encuentras en este caso, te sugiero  probar sólo las páginas que reciben más tráfico , las principales páginas del sitio, las páginas que convierten, las páginas de ventas y/o contactos de adquisición .

En este punto, se analiza las URL que has seleccionado utilizando PageSpeed Insights y miras los resultados.

Nota: en mi caso he utilizado un lugar elegido al azar. Es un bar de Nueva Zelanda Wellington, cuya URL es http://www.stjohnsbar.co.nz, y en el que me encantaría estar.

Analiza tu sitio web con Google Page Speed Insight

Una herramienta que siempre debes tener a la mano es Insights PageSpeed . Es una herramienta de Google, creada para proporcionar un análisis sobre la manera de optimizar los sitios web y la experiencia del usuario.
Dije experiencia del usuario y no velocidad.

PageSpeed Insights no mide la velocidad del sitio, no hace ninguna mención del tiempo de carga. Más bien  proporciona información detallada e identifica los errores que tienen  mayor impacto (negativo) sobre la calidad del sitio.

Dirá mucho acerca de lo que se debe mejorar, pero no mencionará la velocidad.

Te dará consejos sobre el Above the Fold (lo visible sin necesidad de desplazarse ratón), la optimización de los recursos (css, js e imágenes) y la sobre la experiencia del usuario sólo te dará algunos consejos (UX).

No te dejes engañar por el nombre de Page Speed, ya que esta herramienta no muestra en absoluto la forma de acelerar el sitio.
Siguiendo todos los consejos de optimización de PageSpeed,  indirectamente vas a conseguir un aumento de la velocidad del sitio, esto no significa que tu sitio estará perfecto.

También debes tener en cuenta que si tu sitio utiliza plugins y si requiere de  recursos externos, es difícil tener un sitio  optimizado al 100%.

Hay otros factores que afectan al tiempo de carga de las páginas, pero por ahora, vamos a centrarnos en la optimización y uso de esta herramienta.

Al analizar tu sitio, verás dos secciones: escritorio y móviles. Mi consejo es habitar en particular  la optimización móvil, ya que la mayor parte del tráfico proviene de dispositivos como teléfonos inteligentes y tabletas y cada vez mas.

He analizado la http://www.stjohnsbar.co.nz/ sitio, y este es el resultado de los móviles [ 36/100]

Análisis con page speed

Y del PC [37/100]

análisis ordenador page speed

Para este sitio concretp, voy a proporcionar una solución para cada problema detectado por Page Speed. Son errores comunes, es muy probable que una página no optimizada tenga  una puntuación similar.

Errores críticos en Page Speed Insight

Los errores críticos son los que se destacan en rojo por Page Speed, son los urgentes.
Por lo general, en esta sección se muestran todos los errores que pueden molestar a tus visitantes, y hacer que o se vuelvan impacientes.

Concéntrate más en esta sección, ya que en la mayoría de los casos Page Speed se refiere a los que ralentizan el sitio.

En este sitio de ejemplo, he encontrado errores:

  • JavaScript y CSS que bloquean la visualización de contenido en Above the Fold
  • Compresión

JS resolver el bloqueo de Render

Page Speed ha mostrado un problema que no siempre es fácil de resolver: el código JavaScript y CSS están bloqueando la vista del contenido.

Esta es una situación muy común que puede ocurrir en cualquier momento.

Para explicar brevemente, “Render” significa “Cargar”.
Si un artículo es demasiado pesado, necesitará más tiempo para cargar, lo que resulta en mayor tiempo de descarga de la página entera.

La solución más obvia es poner los script mas pesados al final de la página HTML.

De este modo, se garantiza que los scripts que pesan mucho, dejen espacio a otros recursos (en su mayoría gráficos), es decir, lo que permite a los visitantes ver un “esbozo” de tu página.

Puedes consultar con Pingdom qué archivos y scripts ralentizan la carga de la página

pingdom ejemplo

 

Por otra parte, Google sugiere una solución en la mayoría de los casos , pero no resuelve en absoluto.
Crear uno nuevo.

Introducir una  secuencia de comandos no mejora la carga de la página , especialmente si el archivo js es grande.
Al hacerlo, se creará otro problema: la intervención de los programadores no será fácil, sobre todo si el sitio está sujeto a cambios frecuentes.
Piensa en situaciones de emergencia y si tienes por ejemplo más de 7000 líneas de Js en una página HTML.

Es mejor mantener los archivos separados.

Los pequeños script se puede trabajar,  pero no sugiero nunca transcribir toda la biblioteca jQuery.

Resolver el bloqueo CSS Render

El bloqueo del CSS es un poco diferente al de JS.

Si Google Page Speed te está avisando de un bloqueo de CSS, significa que el archivo CSS está utilizando demasiado tiempo en cargar. El resultado es que el usuario lo primero que ve es una pantalla en blanco hasta que se carguen todos los archivos CSS.

El usuario tendrá que esperar a que cargue para poder ver algo y navegar.

Por desgracia, esto es un problema: una pantalla en blanco durante más de 2 segundos  hace que tus clientes se marchen de forma masiva. Estas perdiendo clientes potenciales!

Pero ¿cuál es la diferencia entre el bloqueo de  CSS y el de JS?

Un JS pesado retrasa la carga de los recursos visibles, los que el visitante puede ver con sus propios ojos.
En CSS pesado se refiere al tamaño y al número de archivos CSS necesarios, y son la causa del retraso y de que el usuario espere.

Por esta razón, si tu página HTML requiere 9 CSS tienes que intentar  reunir todo el código en un solo archivo .CSS.

Muchos temas de WordPress, plugins, marcos como Bootstrap 3, por ejemplo,  contienen una gran cantidad de CSS, que la mayor parte son superfluos y se cargan innecesariamente desde la página HTML.

Así que para resolver el problema del CSS  hay que reducir el número de archivos CSS y eliminar lo innecesario.

Habilitar la compresión (GZIP)

Para que la página se cargue más rápido  se pueden comprimir.
Esta compresión está destinada a proporcionar a los visitantes una versión comprimida y más pequeña de la página HTML, dejando que el navegador muestre los datos más rápidamente a los visitantes.

funcionamiento html comprimido

 

El navegador le pedirá al servidor si se puede obtener la página en un formato comprimido “(Accept-Encoding: gzip, desinfle)” .
Si el servidor responde con una afirmación “(Content-Encoding: gzip)” entonces el navegador descargará la página comprimida y la mostrará al usuario final.

Si la compresión no está activada, el navegador mostrara la página estándar.

Para que te hagas una idea, es parecido a los archivos adjuntos del correo electrónico. Hay ocasiones en que el remitente envía adjuntos completos, otras veces nos envía todos los archivos en un .zip.

En este caso eres tú el que tienes que abrir los archivos para extraer los datos y poder leerlos.
El mismo principio se aplica a tu navegador . Localizar  la versión comprimida de la página, extraerla  y mostrarla.

¿Que ventajas tiene la compresión?

La velocidad.

Los archivos comprimidos ocupan menos espacio y son más fáciles de descargar, incluso con conexiones lentas.
Para activarlo, se puede utilizar por ejemplo en WordPress el plugin W3 Total Cache y habilitar la compresión GZIP.

Alternativamente, si eres más experimentado, puedes insertar este código en tu .htaccess:

Sí mod_gzip_on

mod_gzip_dechunk Sí

archivo mod_gzip_item_include (html |? Txt | css | JS | php | pl). $

Mod_gzip_item_include manejador cgi-script ^ $

mod_gzip_item_include mimo ^ /.* texto

. Mime mod_gzip_item_include ^ application / x-javascript *

mod_gzip_item_exclude mimo ^ imagen /.*

mod_gzip_item_exclude rspheader ^ Content-Encoding :. * gzip. *

 

El efecto está garantizado 🙂

Errores no críticos en Page Speed Insight

Esta sección contiene errores para los que no es necesario intervenir rápidamente, pero que en general hacen más lento el rendimiento del sitio.

Digamos que un montón de pequeñas cosas hacen una tonelada.

Vamos a ver cómo resolverlos para nuestra web.

Minimizar CSS, JS y HTML

Si te dice Page Speed que  minimices tus archivos, lo más probable es que sean demasiado pesados y estén consumiendo recursos. Comentarios, espacios en blanco, …

No sirven en principio para nada  (ya que son ignorados por los navegadores), pero facilitan la tarea del programador en la comprensión de los archivos.

Tienen un cierto peso, y sabemos que cuanto más pesado es un archivo, mayor será el tiempo necesario para cargarlo completamente.
Se puede reducir o aligerar utilizando herramientas sencillas que puedes encontrar en Internet.

Ten en cuenta que minimizar y comprimir son dos cosas totalmente diferentes.

  • Minimizar: Eliminar todos los archivos innecesarios. Es decir, eliminar los comentarios, los espacios en blanco y los elementos sin atributos o especificaciones repetidas.
  • Comprimir: Proporcionar una versión alternativa de la página, tales como archivos comprimidos ZIP. que hemos puesto antes de ejemplo.

Para reducir al mínimo su archivo CSS, puedes utilizar una herramienta como CSS Minifier .
Haz una copia de los archivos CSS, de allí cópialos a Minifier CSS.  copiar y pegar y ya está.

Lo mismo para el archivo JS usando la herramienta JSCompress .

Y para el HTML que puede utilizar la herramienta HTML Minifier .

Comprime los archivos y minimízalos bien, pero ten cuidado.
A pesar de los archivos obtenidos serán más ligeros, irá en detrimento de la legibilidad.

Consejo: mantener siempre una copia de los archivos minimizados, para permitir a los programadores  hacer cambios rápidamente.

Habilitar caché

Habilitar caché es concepto muy simple: Sirve para permitir a los usuarios almacenar información en su sitio, ya que el navegador va a intentar cada vez  guardar la información en todas  las páginas que visita o con las que interactua.

Esto significa que,

El navegador asume que los sitios y páginas web que consultas van a volver a ser consultadas en el futuro.
Por esta razón, el navegador tiene que  almacenar algunos datos en tu ordenador (smartphone o tablet) para mejorar la experiencia del usuario y permitirá que la próxima visita sea mas rápida.

La mayoría de las veces los archivos utilizados con más frecuencia y los mas pesados se guardan localmente en tu equipo (PC).

Obviamente, si el navegador puede guardar los datos en tu PC, es porque el sitio lo permite.
Habilitar la memoria caché en tu sitio sirve para dar a este “permiso” a los diferentes usuarios de los navegadores.

Hay que decir que no todos los sitios habilitan la memoria caché y esto puede ser un problema, ya que un sitio que no lo tenga ralentiza la descarga  para el primer acceso y para los siguientes.

Si utilizas WordPress y quieres habilitar el caché, puedes utilizar el plugin W3 Total Cache , considerado por muchos como el mejor.

De lo contrario, puedes buscar un módulo o plugin. En algunos CMS (Drupal) Esta función está activada de forma predeterminada.

Optimizar Imágenes

¿Sabías que las imágenes ocupan espacio? Y que es directamente proporcional al tamaño y calidad de imagen?

Muchas de las imágenes contienen información adicional no visible para el usuario. Contienen información  superflua y muchas veces un  peso innecesario.
La optimización de imágenes es algo que recomiendo totalmente. 

Optimizar imágenes significa reducir el peso y eliminar el exceso. Muchas de las imágenes contienen información que no tienen ningún interés en particular para el usuario.
Por ejemplo,  comentarios, fecha de creación y varios metadatos menores.

Además de simplificar y aligerar las imágenes, deberíamos también controlar las imágenes que ponemos Above the fold.

Cada página web carga mediante la adopción de esta práctica:

imágenes y velocidad de carga

 

El HTML es el primer elemento a cargar. Después el CSS.

Finalmente las imágenes, comenzando por la que está en la posición más alta, hasta llegar a la última.
Imagina que tu imagen principal tarda varios segundos en cargar y está ubicada Above the fold . Tus visitantes pueden huir, y no visitar  el resto de la página.

Yo uso TinyPng para comprimir imágenes. Para mí es el mejor y es capaz de comprimir imágenes PNG y JPG.

Más cosas sobre PageSpeed Insights

PageSpeed Insights es una gran herramienta, pero como hemos mencionado antes, no mide la velocidad general de un sitio.

Es cierto que siguiendo las instrucciones de PageSpeed consigues una mejora indirecta.
Pero la velocidad no depende sólo de la cantidad de errores que puede resolver, sino también del servidor y la conexión.

En esta sección vamos a utilizar otras herramientas para aumentar la velocidad de nuestro sitio.

Reducir la respuesta del servidor

Dejamos por un momento Google PageSpeed Insights para utilizar otra herramienta poderosa: GTMetrix .

Una vez más, analizamos nuestro sitio de referencia.

Los resultados son:

Podemos observar inmediatamente que la velocidad real es igual a 4,6 segundos. Es decir que desde que se ha pulsado Intro en el teclado, el servidor ha tardado 4,6 segundos en  mostrar la página completamente.

GTMetrix asignó a  este sitio una “D” es una calificación Page Speed YSlow.

GTMetrix es una herramienta que analiza y compara con datos  de Google y Yahoo, respectivamente, e indica  los requisitos para cada uno.

La diferencia entre los dos, aunque sea mínima, es que cada herramienta asigna una puntuación diferente según los parámetros de cada una, pero esto no significa que si tienes un puntuación de 100/100 Page Speed mejorarás el ranking de tu sitio , así como una puntuación a 100/100 YSlow no te ayudará a obtener un mejor ranking en Yahoo.

GTMetrix simplemente compara los resultados en estas dos herramientas.

¿Cuál es la más fiable? Ambos.

No existe una herramienta más fiable o precisa, y no hay ninguna que te hará subir de posiciones. Considera que el  principal objetivo de estas herramientas siempre será proporcionar una mejor experiencia de usuario.
Más útil para los visitantes, que para los motores de búsqueda .

Después de optimizar tu sitio siguiendo los consejos PageSpeed y YSlow, vete a la pestaña “cascada” . 

Aquí puedes ver lo que sucede en tu sitio mientras los visitantes esperan. Esta es la gráfica de las peticiones de nuestro sitio:

grafica abandonos

 

Podemos ver que el sitio en cuestión tiene que esperar mucho tiempo para solicitudes simples.

    • La sección morada de la tabla muestra el tiempo que tarda el navegador en recibir una respuesta del servidor.  Reducir los índices morados  equivalen a reducir el tiempo de espera para cargar recursos. Hay que concentrarse y optimizar especialmente este aspecto.
    • La sección verde indica que el navegador está conectado con el  servidor. Si tu sitio tiene una alta concentración de este tipo de solicitudes, significa que el servidor está en una posición demasiado alejada del sitio. Nota: En este caso GTMetrix utiliza los datos de un servidor canadiense. Tal vez con otro servidor podríamos obtener datos más fiables. Por esta razón, siempre recomiendo comprar un alojamiento físicamente no muy lejano de donde se encuentren nuestros visitantes.
      Por ejemplo, si  tienes un sitio web dirigido a un público español, no compres un servidor en el extranjero (si es posible).
      Elige uno más cercano, ganaras mucho en velocidad.
    • La sección gris representa  los recursos. Cuanto mas ligeros sean, menores serán los Kb o Mb de los datos a descargar. La sección gris representa todo lo que el navegador descarga, texto, audio, imágenes, video, etc.

Reducir el número de solicitudes

Esta vez nos vamos a  otra herramienta, Pingdom .

Introduce tu sitio web, y busca el lugar que físicamente esté más próximo al servidor donde tienes el sitio.
En este caso, he elegido “Melbourne, Australia.”

pingdom

Estos son los resultados. Podemos observar  que este sitio realiza 69 peticiones.

pingdom

Son demasiadas.

Demasiadas peticiones colman la paciencia del usuario. El visitante se va a aburrir por la lentitud del sitio, y estará en un estado de ansiedad, literalmente. (Mala experiencia de usuario)
A pesar de que las conexiones son rápidas, la cantidad es un factor que juega en tu contra.

Como hemos dicho anteriormente contra mas lejos esté el servidor menor será la velocidad del sitio.

Cada conexión tiene un cierto tiempo de espera, y mucho depende de la distancia del servidor. El punto es que cada conexión necesita de un cierto tiempo, y 69 solicitudes de un tiempo medio de 0,1 segundos equivale  a un tiempo de carga de 6,9 segundos (es un dato aproximado, ya que un servidor es capaz de hacer un cierto número de solicitudes de forma simultánea sin que se caiga).

Por este motivo, trata siempre de reducir el tiempo medio de espera para una única conexión, y también mantén  bajo control el número total de solicitudes.

Puedes hacer esto, como hemos dicho uniendo  los archivos CSS y JavaScript en un fichero único. Agrupando las  imágenes, o disminuyendo el número de plugins (especialmente aquellos que hacen uso de los recursos externos, principalmente los plugin social).

Conclusiones finales sobre optimización de velocidad web

Optimizar un sitio no es fácil. 

¿Necesitas asesoramiento? No te quedes solo con los datos básicos de  Google Page Speed Insights, sino que debes ir más allá y utilizar más herramientas. Mejorar tu sitio de vez en cuando y periódicamente con el fin de proporcionar  una buena experiencia de usuario es un trabajo de fondo que requiere del conocimiento de un SEO experto.

Pero he de decir claramente que alcanzar la velocidad cero es prácticamente imposible, pero esto no debe ser una excusa para no intentarlo.

Buena suerte a todos!

Dejar una Respuesta

Tu dirección de correo electrónico no será publicada.