Mejorar la Velocidad de Carga Web

Buenas a todo el mundo, en esta ocasión vamos a hablar sobre como mejorar la velocidad de carga web en el blog de MKD.

Aumentar la velocidad para reducir el tiempo de carga

La velocidad de carga de la página se confunde a menudo con «la velocidad del sitio», que es en realidad la velocidad de carga, para una muestra de páginas vistas en un sitio. La velocidad de la página puede ser descrito como el  «tiempo de carga» (el tiempo que se tarda en mostrar plenamente el contenido de una página específica) o «tiempo hasta el primer byte» (el tiempo que tarda un navegador en recibir el primer byte de información desde el servidor web).

Una de las mejores herramientas de evaluación de la velocidad de carga es PageSpeed Insights ​​de Google. PageSpeed ​​Insights incorpora datos de CRUX (Informe de experiencia del usuario de Chrome) e informa sobre dos importantes indicadores de velocidad: En primer lugar First Contentful Paint (FCP) y DOM Content Loaded (DCL).

CRUX es una base de datos pública en la que se añaden datos de empleo real de páginas cargadas con Google Chrome en diferentes dispositivos. No es una base de datos completa, ya que solo agrega datos de páginas que normalmente presentan un número de visitas muy elevado.

Si utilizas Google Chrome, los datos de tiempo de carga de las páginas por las que navegas pueden agregarse a este informe si no señalas de manera expresa que no deseas que se utilicen. Tus datos se agregarán a la base de datos de forma completamente anónima, eso sí.

Mejorar la Velocidad de Carga Web para mejorar el SEO

Google ha indicado que la velocidad del sitio (y, como resultado, la velocidad de la página), es una de las señales utilizadas por su algoritmo para clasificar las páginas. Y parece ser, según diversas investigaciones, que Google podría medir específicamente el tiempo hasta el primer byte, como cuando se considera la velocidad de la página.

Además, una página lenta, podría afectar negativamente a su indexación.

La velocidad de la página también es importante para la experiencia del usuario. Las páginas con un tiempo de carga más largo tienden a tener tasas de rebote más altas y menor tiempo promedio en la página. Los tiempos de carga más largos también afectan negativamente a las conversiones.

Estas son algunas de las muchas maneras de aumentar su velocidad de la página:

Habilitar la compresión

Utilizar gzip, una aplicación de software para compresión de archivos. Ayuda a reducir el tamaño de los archivos CSS, HTML y JavaScript que son mayores que 150 bytes.

No es recomendable usar gzip en archivos de imagen. En su lugar, es mejor comprimir los archivos antes de cargarlos en la web, con algún programa tipo Photoshop, donde se puede mantener el control sobre la calidad de la imagen.

Minificar CSS, JavaScript y HTML

Mediante la optimización del código (incluyendo eliminación de espacios, comas y otros caracteres innecesarios), se puede aumentar drásticamente la velocidad de carga de la página. También quite comentarios de código, el formato y código no utilizado. Google recomienda el uso de CSSNano y UglifyJS.

Reducir redirecciones

Cada vez que una página redirecciona a otra página, el visitante se enfrenta a un tiempo adicional de espera para el ciclo HTTP de solicitud-respuesta para completar. Por ejemplo, si su patrón de redireccionamiento móvil se ve así: «example.com ->www.example.com-> m.example.com -> m.example.com/home,» cada uno de esos dos redirecciones adicionales hace que su carga de página más lenta.

Quitar render de bloqueo de JavaScript

Los navegadores tienen que construir un árbol DOM mediante el análisis de HTML antes de que puedan representar una página. Si el navegador encuentra un script durante este proceso, tiene que parar y ejecutarlo antes de que pueda continuar.

Google sugiere evitar y reducir al mínimo el uso de bloqueo de JavaScript.

Almacenamiento de caché en el navegador

La caché de los navegadores almacena mucha información (hojas de estilo, imágenes, archivos JavaScript, y más), de modo que cuando un visitante regresa a un sitio, el navegador no tiene que recargar la página entera. Utilizar una herramienta como YSlow para ver si ya tiene una fecha de caducidad para el conjunto de caché. Si no la tiene, entonces hay que establecer una fecha de expiración de cabecera por el tiempo que deseamos que la información se almacene en caché. En muchos casos, a menos que el diseño del sitio cambie con frecuencia, un año es un período de tiempo razonable. Así Google tiene más información sobre el aprovechamiento de almacenamiento en caché.

Mejorar el tiempo de respuesta del servidor

El tiempo de respuesta del servidor se ve afectado por la cantidad de tráfico que recibe, los recursos que cada página utiliza, el software que utiliza el servidor, la velocidad del disco duro… Para mejorar el tiempo de respuesta del servidor, hay que buscar los cuellos de botella que hacen que se ralentice el tiempo de carga tales como bases de datos, una falta de memoria adecuada… y solucionar estos cuellos de botella. El tiempo óptimo de respuesta del servidor se encuentra en 200 ms. Aprende más acerca de la optimización de su tiempo hasta el primer byte en el blog de Moz.

https://moz.com/blog/improving-search-rank-by-optimizing-your-time-to-first-byte

Usar una red de distribución de contenidos

Las redes de distribución de contenidos (CDN), también llamadas redes de entrega de contenido, son redes de servidores que se utilizan para distribuir la entrega del contenido. En esencia, las copias del sitio se almacenan en múltiples centros en diversos lugares geográficos, de manera que los usuarios tengan los datos desde el lugar más rápido y fiable en el que se encuentran.

Optimizar imágenes

Asegúrate de que las imágenes no son más grandes de lo necesario, que están en el formato de archivo correcto (los archivos PNG son generalmente mejores para los gráficos con menos de 16 colores, mientras que los archivos JPEG son generalmente mejores para las fotografías) y que se comprimen para ser usadas en la web .

Utiliza sprites CSS para crear una plantilla de las imágenes que se utilizan con más frecuencia en el sitio web como botones o iconos. Sprites CSS combina sus imágenes en una sola imagen grande que carga a la vez (lo que significa un menor número de peticiones HTTP) y luego muestra sólo las secciones que se deben mostrar. Esto significa que se está ahorrando tiempo de carga, al no hacer a los usuarios esperar mientras varias imágenes se cargan.

Seguir aprendiendo

• Google developers
• Page Speed Insight
• Gtmetrix

Esperamos que os haya resultado interesante la entrada como mejorar la velocidad de carga Web. En breve más sobre SEO. En este caso, comenzaremos con la guía para 2019 de linkbuliding. No te lo pierdas!