Google admitió que el Velocidad es un factor determinante para la posicionamiento de un sitio. Por esta razón, y para satisfacer las necesidades de los expertos en SEO, el gigante de Mountain View presentó en el Herramientas para webmasters, hoy Search Console, una nueva herramienta llamada Page Speed Insight. Esta herramienta te permite analizar los problemas de rendimiento de una página web de forma intuitiva y directamente desde el navegador Mozilla Firefox. La herramienta, además de informar problemas potenciales, también brinda consejos y funciones útiles para resolverlos.
Algunas de las fallas que se pueden encontrar con Page Speed se resuelven fácilmente durante la fase de diseño de la interfaz de un sitio. Otros, por otro lado, necesitan más conocimientos a nivel de sistema.
Entrando en más detalle, los factores que pueden depender de las configuraciones del sistema son:
- almacenamiento en caché
- compresión;
Los relacionados con el frontend y la estructuración del sitio, por otro lado, son:
- reducción de las resoluciones de DNS y redirecciones
- minificación de archivos Css / Js / Html;
- optimización de imágenes;
- orden en el que se cargan los elementos de la página;
- paralelización y reducción de solicitudes Http.
- Analicemos estos aspectos en detalle.
Fase uno: almacenamiento en caché
La gran mayoría de las páginas web contienen recursos como archivos Javascript, Css, imágenes 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 el 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 venir de un cliente a un servidor), eliminando muchas solicitudes Http necesarias para obtener todos los recursos y, en consecuencia, reduce el tamaño. .Respuesta general 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 DNS y redireccionamiento
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 Redireccionar. Veamos en detalle de qué se trata:
La 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, más el retraso causado por el tiempo de ida y vuelta. Para ser claros, el uso de muchos widgets dentro de 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 reorientar: 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 use 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 pasaran a ser 12.
Minificación Css / Html / Javascript
La 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:
un {color: # 0027ee}
Optimización de imagen
Los puntos clave cuando se trata de ottimizzazione de imágenes, 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.com Yahoo, pero también RIOT por i archivo JPG e 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 anchura e 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 los 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 configurar 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.
