Performance Web


  1. Buscar y mejorar redundancias en el CSS
-->Segmentar el css en secciones o niveles de visualización en el sitio. 
  • No sobrecargar en la etiqueta headers con Scripts.
  • -->Usar etiqueta Preconnect en links.
  • -->La etiqueta Preload se puede usar para pecargar los css.

    1.  Buscar y mejorar redundancias en el CSS
      csscss analizará todos los archivos CSS que le proporcione y le informará qué conjuntos de reglas tienen declaraciones duplicadas.Una de las mejores estrategias para mantener CSS es reducir la duplicación tanto como sea posible. No es una bala de plata, pero seguro que ayuda.
      Para hacer eso, necesitas tener todos los conjuntos de reglas en tu cabeza en todo momento. Eso es difícil, csscss es fácil. Deja que te diga lo que es redundante.

      http://zmoazeni.github.io/csscss/
    2. Segmentar el css en secciones o niveles de visualización en el sitio
      Según el reporte de Analitics de Flujo del comportamiento de usuarios es de hasta 3 iteraciones no tiene sentido cargar el css completo de otras 4 paginas que ni si quiera vera el usuario es mejor segmentar el css por navegación.


    3. No sobrecargar en la etiqueta headers con Scripts

    -->Los navegadores leen documentos HTML de arriba a abajo. Cuando hay enlaces a recursos externos
    (como scripts, en este caso), el navegador se detiene para analizarlos.
    Cuando se produce el análisis, la representación se bloquea.


  • Usar etiqueta Preconnect en links

  • -->El preconnect tipo de relación de enlace se usa para indicar un origen que se utilizará para captar los recursos requeridos. Iniciar una conexión temprana, que incluye la búsqueda de DNS, el protocolo de enlace TCP y la negociación de TLS opcional, permite al agente de usuario enmascarar los altos costos de latencia de establecer una conexión.


    https://w3c.github.io/resource-hints/
    Usar la preconexión de una manera eficiente y pensada no solo ayudará a optimizar su sitio web, sino que también evitará que utilice recursos deficiente. Preconnect es  compatible con algunos navegadores modernos, con la excepción de Internet Explorer, Safari, IOS Safari y Opera Mini.


  • La etiqueta Preload se puede usar para pecargar los css.

    La precarga es un nuevo estándar web que ofrece más control sobre cómo se obtienen los recursos particulares para la navegación actual. Esta es la versión actualizada de la captación previa de subrecursos que quedó obsoleta en enero de 2016. Esta directiva se puede definir dentro de un elemento, por ejemplo, como En general, es mejor precargar sus recursos más importantes, como imágenes, CSS, JavaScript y archivos de fuentes. Esto no debe confundirse con la precarga del navegador en la que solo los recursos declarados en HTML están precargados. La directiva de precarga realmente supera esta limitación y permite que los recursos que se inician a través de CSS y JavaScript se precarguen y definir cuándo se debe aplicar cada recurso .

    La precarga es diferente de la captación previa porque se enfoca en la navegación actual y obtiene recursos con alta prioridad . La captura previa se centra en la búsqueda de recursos para la próxima navegación que son de baja prioridad. También es importante tener en cuenta que la precarga no bloquea el onloadevento de la ventana .
    Beneficios de la precarga 
    Algunos de los beneficios de la directiva de precarga incluyen:
    Permite al navegador establecer la prioridad de los recursos, lo que permite a los desarrolladores web optimizar la entrega de ciertos recursos.Le da al navegador la capacidad de determinar el tipo de recurso, por lo tanto, puede decir si el mismo recurso se puede reutilizar en el futuro.
    El navegador puede determinar si la solicitud cumple con la política de seguridad de contenido  haciendo referencia a lo que se define en el asatributo.
    El navegador puede enviar los acceptencabezados apropiados según el tipo de recurso. (como image / webp)
  • Precargar el soporte del navegadorEl soporte de precarga se agregó a Chrome 50  en abril de 2016 y también es  compatible con Opera 37 y versiones posteriores. Todavía no está confirmado para Mozilla Firefox  y es probable el desarrollo de Microsoft Edge 

    1. precargar el soporte del navegador

    No hay comentarios.:

    Problemas de activación WIFI6 en LG_OLED55CXPSA

      Mi experiencia con este TV  ah sido impecable hasta ahora, llevaba un uso normal y no tenia que usar la conexión por wifi ya que tengo una...