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.

Leave a comment

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

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

  • Responsable Jordi Juan Pérez.
  • Finalidad  Moderar los comentarios. Responder las consultas.
  • Legitimación Su consentimiento.
  • Destinatarios  NICALIA.
  • Derechos Acceder, rectificar y suprimir los datos.
  • Información Adicional Puede consultar la información detallada en la Política de Privacidad.