» » Optimizar La Entrega De CSS

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).

Deja un comentario

Información
Atención! Usuarios que están en este grupo no pueden dejar comentarios en la página...Primero debes Registrarse!

Redes Sociales

Cómo publicar videos más largos en tus historias de Instagram

Cómo publicar videos más largos en tus historias de Instagram

Si a veces subes videos a tus historias de Instagram , probablemente te has topado con el límite de 15 segundos. Eso significa que no importa la duración del video que publiques en tu historia, Instagram lo recortará automáticamente a una duración máxima de 15 segundos. Esto es ideal para videos...
Recupera Tus Mensajes O Chats De WhatsApp Borrados

Recupera Tus Mensajes O Chats De WhatsApp Borrados

  Recuperar mensajes y chats borrados de tu aplicación WhatsApp para Android es una tarea que puede resultar  necesaria alguna vez. A menudo, estamos tratando de liberar espacio físico de nuestro dispositivo Android y llegamos incluso a borrar...
Integrar El Boton de Whatsapp En Tu Web

Integrar El Boton de Whatsapp En Tu Web

  De todos es conocido que WhatsApp se ha convertido en una herramienta para compartir fotos y vídeos con tus amigos, familiares y compañeros de trabajo. También cada vez más usado, para compartir enlaces de contenidos de la web y otras aplicaciones móviles. Para ayudar a compartir los contenidos...
Crees que las redes sociales te están haciendo bien o mal

Crees que las redes sociales te están haciendo bien o mal

Las redes sociales te ofrecen una forma única de observar a la gente. Por ejemplo, el lenguaje utilizado en Twitter puede usarse para predecir si alguien está en riesgo de morir de una enfermedad cardíaca. El análisis de las actualizaciones de Facebook muestra que las mujeres son generalmente más...
Crea una imagen para las redes sociales

Crea una imagen para las redes sociales

Aprenda a combinar una foto, texto y material gráfico en Photoshop para su Facebook, Twitter y otras publicaciones en redes sociales. Utilice estas habilidades para crear sus propias imágenes de redes sociales o cualquier diseño que cree en Photoshop. Adobe Photoshop es un editor de gráficos...
Comparte instantáneamente tus fotos y diseños

Comparte instantáneamente tus fotos y diseños

Muestre rápidamente su trabajo a clientes y compañeros de trabajo, o comparta una idea al instante por correo electrónico, texto, redes sociales y más, todo dentro de Adobe Photoshop CC. Nota: Necesitará la última versión de Photoshop CC para usar esta función. Comparte tu trabajo ahoraHaz clic en...