Velocidad de Carga

En la web de desarroladores de Google nos pide que hagamos lo siguientes  pasos: medir , optimizar , monitorear y repetir .

MEDIR:

Para ello utilizaremos alguna de estas herramientas que veremos después:

PageSpeed Insights , una herramienta en línea que muestra datos de campo de velocidad para su sitio, junto con sugerencias de optimizaciones comunes para mejorarlo.

Lighthouse , una herramienta de laboratorio que brinda asesoramiento personalizado sobre cómo mejorar su sitio web en términos de rendimiento, accesibilidad, PWA, SEO y otras prácticas recomendadas.

Gtmetrix. Es quizas la más completa porque nos da una serie de parametros en los que fallamos que después podemos optimizar porque nos da las posible soluciones.

OPTIMIZAR

Aunque cada proyecto es diferente y puede que haya alguna web que necesitemos que tenga un diseño muy bueno con mucha calidad de imagenes, etc y por tanto que cargue más lento, este caso no es la norma.

Usualmente tenemos que tener en cuenta los siguientes factores de optimización que en el apartado de herramientas vamos a desarrollar con los plugins y mejoras que nos van a ayudar.

Los factores de posicionamiento son:

1. Activar la compresión

Utilice Gzip, una aplicación para la compresión de archivos, para reducir el tamaño de sus archivos CSS, HTML y JavaScript que sean mayores de 150 bytes.

No utilice gzip en los archivos de imagen. En su lugar, comprímalos en un programa como Photoshop, donde podrá mantener el control sobre la calidad de la imagen.

2. Reducir CSS, JavaScript y HTML

Al optimizar tu código (incluyendo la eliminación de espacios, comas y otros caracteres innecesarios), puede aumentar drásticamente la velocidad de su página. Elimine también los comentarios del código, el formato y el código no utilizado.

3. Aprovechar la caché del navegador

Los navegadores almacenan en caché mucha información (hojas de estilo, imágenes, archivos JavaScript, etc.) para que cuando un visitante vuelva a su sitio, el navegador no tenga que recargar toda la página. Utiliza una herramienta como YSlow para ver si ya tienes una fecha de caducidad establecida para tu caché. A continuación, establezca en su cabecera “caduca” el tiempo que desea que esa información se almacene en la caché. En muchos casos, a menos que el diseño de su sitio cambie con frecuencia, un año es un período de tiempo razonable. Google tiene más información sobre cómo aprovechar la memoria caché aquí.

4. Mejorar el tiempo de respuesta del servidor

El tiempo de respuesta de tu servidor se ve afectado por la cantidad de tráfico que recibe, los recursos que utiliza cada página, el software que utiliza su servidor y la solución de alojamiento que utiliza. Para mejorar el tiempo de respuesta de su servidor, busque cuellos de botella en el rendimiento, como consultas lentas a la base de datos, enrutamiento lento o falta de memoria adecuada, y arréglelos. El tiempo de respuesta óptimo del servidor es inferior a 200 ms. Más información sobre cómo optimizar el tiempo hasta el primer byte.

Para ello te recomendamos que utilices uno de estos servidores que tienen una calidad muy fiable por su buena velocidad de carga;

5. Utiliza una red de distribución de contenidos

Las redes de distribución de contenidos (CDN), también llamadas redes de entrega de contenidos, son redes de servidores que se utilizan para distribuir la carga de entrega de contenidos. Básicamente, las copias de su sitio se almacenan en múltiples centros de datos geográficamente diversos para que los usuarios tengan un acceso más rápido y fiable a su sitio.

6. Optimiza las imágenes

Asegúrese de que sus imágenes no sean más grandes de lo necesario, que estén en el formato de archivo adecuado (los PNG suelen ser mejores para los gráficos con menos de 16 colores, mientras que los JPEG suelen ser mejores para las fotografías) y que estén comprimidas para la web.

7. Otras configuraciones :

Utiliza los sprites CSS para crear una plantilla para las imágenes que utilizas con frecuencia en tu sitio, como botones e iconos. Los sprites CSS combinan tus imágenes en una sola imagen grande que se carga de una sola vez (lo que significa menos peticiones HTTP) y luego muestran sólo las secciones que quieres mostrar. Esto significa que estás ahorrando tiempo de carga al no hacer que los usuarios esperen a que se carguen varias imágenes.

Identifica cuántos Javascript carga tu página y trata de unificarlos en el menor número posible de ellos. Puedes usar alguna herramientas como JS y CSS Optmizer.

Unificas las hojas de estilo CSS en un menor número de ellas, y trata de minificarlos (ahorrar código). Reduciras ampliamente el número de peticiones a servidor que hace tu página

Número de peticiones HTTP

Cuanto mayor sea el número de peticiones HTTP de un navegador a un servidor/servidor a otro, mayor será el consumo de ancho de banda. Por lo tanto, mantenga el número de peticiones HTTP al mínimo posible.

  Siguiente Instrucción