Inicia sesión


Optimizar La Entrega De CSS

Esta regla se activa cuando PageSpeed Insights detecta que una página incluye hojas de estilo externas que demoran la aparición del formato del contenido.

Información general


Los navegadores bloquean los archivos CSS externos antes de que apliquen formatos al contenido de la pantalla. Esto conlleva latencia de red adicional y aumenta el tiempo de carga del contenido.


Recomendaciones


Si los recursos CSS externos son pequeños, puedes insertarlos directamente en el documento HTML. De este modo, el navegador procede a mostrar la página. Ten en cuenta que, si el archivo CSS es grande, al insertar todo el código CSS, es posible que PageSpeed Insights advierta a través de Prioriza el contenido visible que la mitad superior de la página es demasiado extensa. Si se trata de un archivo CSS grande, tendrás que identificar e insertar en el HTML el código CSS necesario para mostrar el contenido de la mitad superior de la página y aplazar la carga de los otros estilos hasta después de que el contenido principal se haya cargado.

Ejemplo de cómo insertar un archivo CSS pequeño


Si el documento HTML es así:
 
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
 
Y el recurso small.css es así:

  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }

Puedes insertar el código CSS más importante de la siguiente manera:

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<link rel="stylesheet" href="small.css">

El archivo small.css original se carga después de que se haya cargado la página. El orden de aplicación de las reglas CSS se mantiene insertando todos los elementos <style> y <link> en el documento a través de jаvascript.

No insertes URIs de datos de tamaño grande


Ten cuidado al insertar URIs de datos en los archivos CSS. Aunque usar selectivamente URIs de datos de tamaño pequeño en el código CSS puede tener sentido, si insertas URIs de tamaño grande, podría aumentar el tamaño del código CSS de la mitad superior de la página, lo que ralentizaría la carga.

No insertes atributos CSS


Se debe evitar insertar atributos CSS en elementos HTML (como &lt p style=...&gt) siempre que sea posible, ya que se produciría una duplicación innecesaria del código. Además, la inserción del CSS en los elementos HTML está bloqueada de manera predeterminada mediante la política de seguridad en el contenido (CSP).


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2016-12-18
  • Categorias: Noticias Tutorial Diseño Web CSS3 html5 Html WebSite webmasters




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Cómo rastrear a los usuarios de Adblock usando Google Analytics

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Google WebSite Trucos y tips Noticias Tutorial

Cómo eliminar a todos los usuarios de Twitter que estás siguiendo

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Google Chrome Redes Sociales Twitter Noticias Tutorial

Cómo escribir un poema

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Trucos y tips Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Expresiones JavaScript para especificar valores de atributos en HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial