Mejorar el Tiempo de Carga de Nuestro Sitio Web

Si tu sitio web es lento, estás perdiendo dinero.

Google dispone de una herramienta gratuita para identificar qué es lo que lo está ralentizando … Herramienta PageSpeed Insights.

El problema es que las recomendaciones están pensadas para los desarrolladores. Si no hablas código, es difícil de entender.

En esta publicación se desglosan los resultados de la herramienta PageSpeed Insights de Google en un lenguaje sencillo.

Antes de desglosar los resultados, es importante explicar por qué son importantes.

  1. El 47% de los usuarios espera que su página web se cargue en menos de dos segundos.
  2. El 57% de los usuarios abandonará una página si el tiempo de carga es de tres segundos o más.
  3. El 75% de los clientes online optó por el sitio de un competidor en lugar de sufrir retrasos desmesurados.

En comparación con los sitios web empresariales que se cargan en 1 segundo, los sitios web que se cargan en 3 segundos experimentan:

  1. Un 50% más de rebotes.
  2. Un 22% menos de páginas vistas.
  3. Un 22% menos de conversiones.

En comparación con los sitios web empresariales que se cargan en 1 segundo, los sitios web que se cargan en 5 segundos experimentan:

  1. 105% mayor tasa de rebote.
  2. 35% menos visitas a la página.
  3. 38% menos conversiones.

Los usuarios no son los únicos a los que les gusta un sitio web rápido. Google también lo hace. Un sitio web lento socavará todos los esfuerzos de SEO.

Google dispone de una herramienta gratuita que te permite probar la velocidad y el rendimiento de tu sitio web:

Herramienta PageSpeed Insights

La herramienta devuelve 10 sugerencias de «Regla de velocidad» y 4 de «Regla de usabilidad».

Si no eres desarrollador web, los resultados son difíciles de entender. La falta de conocimiento elevará el costo de su reparación.

Los desarrolladores web son como mecánicos – si usted se acerca a ellos sin tener conocimiento de los problemas, le cobrarán en consecuencia.

Entender los fundamentos de estos problemas le ahorrará mucho dinero a su negocio para poder solucionarlos.

A continuación se desglosan las 10 recomendaciones de la «Regla de velocidad» de Google, que se explican en un lenguaje sencillo.

«Mejorar el Tiempo de Respuesta del Servidor»

Qué significa:

Cuando un usuario accede a tu sitio, su navegador web envía una solicitud al servidor para que vea el contenido. Su servidor tarda mucho tiempo en responder a la solicitud del navegador web.

Qué lo causa:

  • Alojamiento web malo/insuficiente.
  • Configuración inadecuada del servidor web.
  • Más tráfico del que su sitio web puede manejar.
  • Sitio web que utiliza demasiados recursos (Por ejemplo CSS, JavaScript).

Cómo arreglarlo:

  • Pagar por más alojamiento web y mejor hardware.
  • Actualizar al servidor privado virtual (VPS) o al servidor dedicado.
  • Poner el sitio web en una red de entrega de contenido (CDN).
  • Comprobar la configuración del servidor web.
  • Combinar CSS externo, Archivos JavaScript.

«Apalancar el Caché del Navegador»

Qué significa:

Un navegador web necesita mostrar una serie de elementos para un usuario: logo, CSS, imágenes, html, etc.

El almacenamiento en caché permite a un navegador «recordar» elementos ya cargados (Por ejemplo, el logo, la navegación, etc.). Esto permite que la página se cargue mucho más rápido.

Qué lo causa:

No se ha configurado ningún mecanismo de cacheo.

Cómo arreglarlo:

  • Si tu página web funciona con WordPress, puedes usar un plug-in de cacheo (Nosotros usamos W3 Total Cache).
  • Añade algo de código a tu archivo .htaccess. Ejemplo:

## EXPIRES CACHING ##

ExpiresActive On.

ExpiresByType image/jpg «access 1 year».

ExpiresByType image/jpeg «access 1 year».

ExpiresByType image/gif «access 1 year».

ExpiresByType image/png «access 1 year».

ExpiresByType text/css «access 1 month».

ExpiresByType text/html «access 1 month».

ExpiresByType application/pdf «access 1 month».

ExpiresByType text/x-javascript «access 1 month».

ExpiresByType application/x-shockwave-flash «access 1 month».

ExpiresByType image/x-Icono «access 1 year».

ExpiresDefault «access 1 month».

## EXPIRES CACHING ##.

«Eliminar el JavaScript que bloquea la renderización»

Qué significa:

JavaScript que impide que una página se cargue.

Qué lo causa:

JavaScript que interfiere con el contenido de la parte superior del pliegue, afectando a la forma en que se carga la página.

Cómo arreglarlo:

  • OK: Eliminar la llamada a jQuery del encabezado del documento y moverlo a otro lugar de la página.
  • Bueno: Cambiar el lugar donde se realiza la llamada a la jQuery (Hacerlo en el HTML).
  • Mejor: Diferir el JavaScript hasta después de que la página se cargue.

«Optimizar la Entrega de CSS»

Qué significa:

CSS (Hojas de estilo en cascada) es un tipo de código que dicta el estilo y la función de una página (También conocido como «hacer que se vea bonita»). CSS tiene un precio – requiere tiempo extra para descargar antes de renderizar, por lo que ralentiza el tiempo de carga de la página.

Qué lo causa:

CSS es un código que el diseñador web utiliza para hacer que un sitio web se vea bien. Sin tener en cuenta la velocidad de la página + SEO, puede fácilmente excederse y disminuir seriamente el rendimiento de la página.

Cómo arreglarlo:

  • Minimizar la cantidad de CSS que usan tus páginas.
  • Aplicar CSS más pequeños en línea – diferir CSS muy grandes con JavaScript.
  • Minimizar o comprimir los scripts CSS + archivos para reducir la cantidad de código necesario para descargar.

«Evitar Redireccionamientos de Páginas de Destino»

Qué significa:

La herramienta detectó que tiene más de 1 redirección apuntando a la URL final. Una redirección requiere de peticiones HTTP adicionales, retrasando así el tiempo de carga de la página.

Qué lo causa:

Si su sitio web no está construido usando un diseño receptivo, provocará redirecciones innecesarias.

Por ejemplo, site.com – > m.site.com

Cómo arreglarlo:

  • Utilice un diseño web responsivo.
  • Reduzca la cantidad de redirecciones generales (Si es posible).

«Habilite la Compresión»

Qué significa:

Los archivos HTML y CSS pueden ser «comprimidos» permitiendo que su servidor web entregue peticiones más rápidas a los usuarios.

Qué lo causa:

Archivos web no comprimidos. Comprimir sus archivos con Gzip puede ahorrar entre el 50 y el 90% del tamaño del archivo, lo que permite una carga mucho más rápida de las páginas.

Cómo arreglarlo:

Añadir algún código a su archivo .htaccess en su servidor o servidor web.

mod_gzip_on Sí mod_gzip_dechunk Sí mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

«Reducir los recursos»

Qué significa:

La bandera se levanta cuando los archivos HTML, CSS y JavaScript son demasiado grandes y deben ser reducidos.

Qué lo causa:

Cuando una página se codifica usando HTML, CSS o JavaScript innecesarios o redundantes y están afectando la forma en que los recursos se renderizan en un navegador.

Cómo arreglarlo:

Hay varias herramientas en línea que reformatearán y minimizarán su codificación para usted. Simplemente haz una búsqueda en Google de «minify CSS tool» y obtendrás las herramientas necesarias. Toma el código reformateado y conéctalo de nuevo a tu página.

«Optimizar Imágenes»

Qué significa:

Tus imágenes son enormes y ralentizan el tiempo de carga al intentar mostrarlas.

Qué lo causa:

La mayoría de los propietarios de sitios web no se dan cuenta de lo que pasa detrás de una imagen. Las imágenes representan la mayoría de los bytes descargados en una página. Si no se comprimen y optimizan las imágenes antes de subirlas a su página, los tiempos de carga se disparan.

Cómo arreglarlo:

  • Utilice la función de Photoshop «Save for web» antes de subirlas.
  • Utilice compresores de imágenes como Smush it! Para comprimir más.

«Priorizar el Contenido Visible»

Qué significa:

Se requieren viajes adicionales a la red para mostrar el contenido situado «por encima del pliegue» de su página.

Qué lo causa:

Cuando el código de su página no está estructurado correctamente puede mostrar primero los recursos «por debajo del pliegue», creando así un retraso para el contenido en la parte superior de la página. Esto hace que la carga de la página parezca más lenta para un usuario.

Cómo arreglarlo:

  • Codifica tu página en el orden de los aspectos más importantes a los menos importantes. Por ejemplo, una página de blog tiene contenido principal + barra lateral. En tu HTML, codifica el contenido antes que la barra lateral, ya que el contenido debe mostrarse antes que la barra lateral.
  • Reduce la cantidad de datos utilizados por los recursos.

«Utiliza Scripts Asíncronos»

Qué significa:

Cuando el código se ejecuta de forma síncrona, el navegador espera hasta que se complete antes de continuar. Cuando el código se ejecuta de forma asíncrona, el navegador puede pasar a otra tarea antes de terminar.

Qué lo causa:

Codificación incorrecta. Los scripts asíncronos permiten que los navegadores continúen cargando otros elementos, lo que permite un tiempo de carga de página más rápido.

Cómo solucionarlo:

Asegúrese de que está utilizando la versión asíncrona de su script.

Existen otras herramientas gratuitas para probar la velocidad de tu sitio web:

  • GTMetrix.
  • YSlow.
  • Pingdom.

Asegurarte de que tu sitio cumple con las reglas de velocidad de Google aumentará tu tiempo de carga en otras herramientas también.

Comprender lo que permite cada una de estas reglas es crucial para solucionar el problema. Mucho como traer su coche a un mecánico, si usted entiende las cuestiones que puede ahorrar en gran medida en el costo para arreglar.

0 comentarios

Enviar un comentario

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