Cómo tener un sitio en la pole position

Fase uno: almacenamiento en caché

La gran mayoría de las páginas web contienen recursos como archivos Javascript, CSS, imagenes que componen el diseño y otros tipos de archivos que rara vez se modifican. Aunque estos recursos cambian, de hecho, rara vez, cada vez que un usuario solicita la página web con su navegador, son, sin embargo, descargado de nuevo. Esto aumenta el tiempo de carga de la página. Bueno elHttp almacenamiento en caché le permite guardar estos recursos en el navegador del usuario que visita el sitio o en los servidores proxy del proveedor. El resultado es que, por ejemplo, la imagen en caché ya no se servirá desde el sitio web, sino directamente desde la PC del usuario o desde el Proxy.

Esto da una doble ventaja: reduce el tiempo de ida y vuelta (el tiempo que tardan los datos en ir y volver de un cliente a un servidor), eliminando una gran cantidad de solicitudes Http necesarias para obtener todos los recursos y, en consecuencia, reduce el tamaño total de la respuesta del servidor. La reducción del peso total de la página para cada visitante recurrente también reduce significativamente el uso de ancho de banda y los costos de carga del sitio..

Compresión en curso …

Se puede lograr la compresión de páginas web utilizando sistemas gzip o desinflar. Todos los navegadores modernos en circulación, de hecho, admiten la compresión de archivos Html, Css y Javascript y, por lo tanto, le permiten enviar archivos más pequeños en la red sin perder información. El proceso de compresión se lleva a cabo en el lado del servidor, habilitando algunos módulos o usando scripts específicos.

Se recomienda la compresión para recursos no demasiado pequeños, ya que este proceso tiene su propia carga en la máquina. La solución ideal, por tanto, es combinarlo con mecanismos de almacenamiento en caché. Otro aspecto a tener en cuenta es evitar la compresión de archivos en formato binario (como imágenes, videos, archivos y pdfs) y, por tanto, prácticamente ya comprimidos.

Resoluciones de redireccionamiento y DNS

El tiempo de descarga de la página también se ve afectado significativamente por el número de resoluciones Dns y el numero de Redirigir. Veamos en detalle de qué se trata:

Allí Resolución de DNS es el tiempo que tarda el navegador en identificar el origen de cada nombre de host que sirve a los recursos, a lo que se suma el retraso causado por el tiempo de ida y vuelta. Para ser claros, el uso de muchos widgets dentro La página provoca un fuerte aumento en las resoluciones de DNS. En consecuencia, es bueno utilizar estos objetos con conciencia y solo si realmente benefician a los visitantes.

Lo mismo ocurre, por supuesto, con redireccionar: es recomendable intentar incluir recursos que no hagan referencia a otros Hay que decir que, en algunos casos, como sitios que incluyen muchos videos e imágenes, puedes beneficiarte del uso de diferentes nombres de host, porque el tiempo de resolución de DNS se compensa con la paralelización de la descarga de múltiples recursos. Por lo tanto, es necesario realizar las evaluaciones correctas en función de cada necesidad.

Paralelización

Según lo recomendado por Google, la cantidad óptima de hosts para usar es entre 1 y 5 (distribuidos de manera que haya un host principal y cuatro desde los cuales descargar los recursos «almacenables en caché») y la proporción entre la cantidad de hosts y recursos debe ser 1 a 6. Entonces, nunca emplee varios nombres de host si el número de recursos utilizados por la página es inferior a seis. Por ejemplo, es posible plantear la hipótesis de que un sitio que usa CSS, Javascript y seis imágenes no se beneficiaría de usar un nombre de host adicional, lo que sería justificable si los recursos se convirtieran en 12.

Minificación de CSS / Html / Javascript

Allí minificación no es más que la operación de compactar el código fuente de los archivos para minimizar la presencia de espacios en blanco y nuevas líneas. Esta intervención, combinada con la compresión, le permite lograr una reducción significativa en el tamaño del archivo. Un pequeño y trivial ejemplo de minificación es este:

Antes:

a{

color: # 0027ee

}

Después:

a {color: # 0027ee}

Optimización de imagen

Los puntos clave cuando se trata de mejoramiento de las imagenes, son sin duda la maximización de la relación calidad / tamaño y el uso de los mejores algoritmos de compresión existentes. Una gran herramienta para lograr esto es smush.it de Yahoo, sino también DISTURBIO para archivos JPG y TinyPng para archivos PNG son excelentes herramientas.

Otra operación muy importante a la hora de crear una página Web que utiliza imágenes es utilizar siempre fotografías que ya han sido escaladas y, por tanto, del tamaño correspondiente al tamaño real visualizado. Usar una imagen grande, 200 × 200, e incluirla en la página, cambiar su tamaño a 100 × 100 mediante etiquetas ancho es altura, usaremos una imagen más grande de la que necesitamos y, en consecuencia, el tiempo requerido para su descarga será mayor. Otro parámetro importante es especificar con las etiquetas que acabo de mencionar el tamaño exacto que evita todas las operaciones de renderización innecesarias.

Orden de carga y reducción de solicitudes HTTP

A la hora de diseñar una página, las reglas básicas a tener en cuenta son:

• combinar varios archivos CSS en un solo recurso para reducir el número de solicitudes Http (lo mismo ocurre con JS);
• cargue primero el css y luego el Js ya que los últimos bloquean mientras que los primeros son paralelizables;
• si es posible, incluir Javascript al final de la página;
• evitar incluir Css y Js en línea dentro de la página;
• evite incluir archivos Css usando @import;
• servir documentos estáticos de dominios que no establecer cookies.

Todas estas optimizaciones no solo te permiten reducir significativamente los tiempos de carga de la página, porque minimizan la cantidad de solicitudes Http que tienen un tiempo fisiológico por resolver, sino que también te permiten paralelizar la descarga de los distintos recursos a la masa.