Joan

León

@nucliweb

Optimització de

Performance

Temps de càrrega

i

 #Catosfera2024

youtube.com/c/JoanLeon

joanleon.dev

Web Performance Snippets

@nucliweb

nucliresources

https://perf.reviews/

Probabilitat de rebot

Joan

León

@nucliweb

@nucliweb

 #Catosfera2024

/Source: Semrush/

Somnis Expectativa

Joan

León

@nucliweb

@nucliweb

 #Catosfera2024

Lighthouse 100 son els pares 🤫

Malsons Realitat

Joan

León

@nucliweb

@nucliweb

 #Catosfera2024

Google Search Console

Core Web Vitals

Joan

León

@nucliweb

@nucliweb

 #Catosfera2024

Core Web Vitals

Joan

León

@nucliweb

@nucliweb

 #Catosfera2024

Joan

León

@nucliweb

64.8% of origins (↑ 1.1%) had good LCP

78.2% of origins (↑ 0.2%) had good CLS

85.0% of origins (↑ 0.8%) had good INP

50.1% of origins (↑ 2.0%) had good LCP, CLS and INP

Chrome UX Report 📊

/source/

@nucliweb

The 202408 release is now live on BigQuery!

 #Catosfera2024

web.dev/lcp/

LCP

Largest Contentful Paint 

@nucliweb

Joan

León

 #Catosfera2024

LCP

Millorar el Largest Contentful Paint 

@nucliweb

Joan

León

 #Catosfera2024

Use WebP, AVIF, JPEG-XL image format

Use native loading="lazy" & fetchprioroty

Preload the LCP image element

Use Responsive Images

Define the image size in the <img> tag

Use CDN image service

LCP

Millorar el Largest Contentful Paint 

@nucliweb

Joan

León

 #Catosfera2024

/DebugBear/

LCP

Millorar el Largest Contentful Paint 

@nucliweb

Joan

León

 #Catosfera2024

/DebugBear/

Joan

León

@nucliweb

 #Catosfera2024

Passos del navegador per pintar un lloc web

Joan

León

@nucliweb

 #Catosfera2024

Passos del navegador per pintar un lloc web

@nucliweb

Joan

León

JavaScript

Loading Priorities

Joan

León

@nucliweb

preload
prefetch
preconnect
dns-prefetch
prerender
modulepreload

speculationrules

DEPRECATED

 #Catosfera2024

Resource Hint

Joan

León

@nucliweb

Preload, Prefetch And Priorities in Chrome, by Addy Osmani

 #Catosfera2024

Resource Hint

Joan

León

@nucliweb

Preload, Prefetch And Priorities in Chrome, by Addy Osmani

Joan

León

@nucliweb

<head>
  <link rel="preload" as="script" href="critical.js">
</head>
<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>
Link: </css/style.css>; rel="preload"; as="style"
import(_/* webpackPreload: true */_ "CriticalChunk")

</>

</>

 #Catosfera2024

Preload critical assets

Joan

León

@nucliweb

Joan

León

@nucliweb

<script src="script.js">
  
<script async src="script.js">

<script defer src="script.js">
  
<script type="module" src="module.mjs">

 #Catosfera2024

<script>, async, defer, module

Joan

León

@nucliweb

 #Catosfera2024

<script>, async, defer, module

Joan

León

@nucliweb


<script async
        defer
        src="script.js">

 #Catosfera2024

async & defer

Joan

León

@nucliweb

 #Catosfera2024

Speculation Rules API

Joan

León

@nucliweb

<script type="speculationrules">
{
  "prerender": [
    {
      "urls": ["next.html", "next2.html"]
    }
  ]
}
</script>

 #Catosfera2024

Speculation Rules API

Demo or
it didn't happen

@nucliweb

Joan

León

/speculative-rules.glitch.me/

 #Catosfera2024

Speculation Rules API

@nucliweb

Joan

León

Speed Brain: helping web pages load 45% faster

/source/

 #Catosfera2024

Speculation Rules API

@nucliweb

Joan

León

Speculative Loading
By WordPress Performance Team

/source/

 #Catosfera2024

Speculation Rules API

Joan

León

@nucliweb

Prerender pages in Chrome for instant page navigations

Barry Pollard

 #Catosfera2024

Speculation Rules API

Joan

León

@nucliweb

/webperf-snippets/

 #Catosfera2024

Resources hints Snippet

Joan

León

@nucliweb

 #Catosfera2024

Scripts Loading Snippet

/webperf-snippets/

Joan

León

@nucliweb

Conèixer i utilitzar la plataforma

Sol·lucions basades en els usuaris i usuaries

Sol·lucions basedes en dades

Saber cómo funciona el navegador

📚

 #Catosfera2024

Punts a destacar

Joan

León

@nucliweb

 #Catosfera2024

Gràcies

@nucliweb

 #Catosfera2024