Precarregar elements per a millorar la puntuació en PageSpeed Insights


L’optimització d’un lloc web pot arribar a ser un desafiament molt gran. Entre les coses a millorar, destaca el bloqueig dels elements mentre carrega la pàgina: css, javascript, fonts, vídeos.

Des de fa un temps,HTML5 ha implementat la precàrrega d’aquestos elements, el que ens farà millorar el temps de càrrega i la optimització en PageSpeed Insights.

Aquests codis van entre <head></head>. Ací teniu uns exemples.

Preload per a fulles d’estils CSS:

 <link rel="preload" href="style.css" as="style">

Preload per a arxius Javascript:

 <link rel="preload" href="main.js" as="script">

Preload per a Vídeos

<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
  <link rel="preload" href="sintel-short.webm" as="video" type="video/webm">

Tipografies com FontAwesome i altres:

  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin>

Preload per a Imatges:

 <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">

Fonts de Informació

Preload key requests en WebDev

Preloading content with rel=”preload”Mozilla Developers.


Deixa un comentari

L’adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *

seven + 6 =

Información básica sobre protección de datos Ver más

  • Responsable: Jordi Juan Pérez.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a NICALIA que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Ver Política de cookies
Privacidad