Joan León PRO
⚡️ Web Performance Artisan at @perfreviews_ | @GoogleDevExpert in #WebTech | @cloudinary Ambassador
Optimització de Performance i Temps de càrrega
Què és realment "un lloc web"?
Què és realment "un lloc web"?
- Truqueu al restaurant → el navegador busca el servidor (DNS)
- El restaurant us confirma la comanda → connexió TCP/TLS
- Comencen a cuinar → el servidor prepara l'HTML
- Us envien la pizza → descàrrega del document
- Però la pizza ve amb ingredients a part → CSS, JavaScript, imatges, fonts, vídeos...
- Tu has de muntar-la a casa → el navegador pinta la pàgina
La trampa del "tothom té fibra"
- Fan servir mòbils de fa 3-4 anys
- Estan al bus/metro amb 4G dolent
- Tenen 47 pestanyes obertes
- Tenen la bateria al 15% (i sí, això també afecta)
Però els usuaris reals:
Quants de vosaltres teniu el mateix mòbil des de fa més de 2 anys?
Quants heu notat que alguna app va més lenta ara que abans?
No és que el mòbil s'hagi fet vell, és que les webs i apps s'han fet més exigents.
Procés per pintar un lloc web
Procés per pintar un lloc web
Procés per pintar un lloc web
Probabilitat de rebot
Somnis Expectativa
Lighthouse 100 son els pares 🤫
Malsons Realitat
Google Search Console
Core Web Vitals
LCP
Largest Contentful Paint
<script src="script.js">
<script async src="script.js">
<script defer src="script.js">
<script type="module" src="module.mjs"><script>, async, defer, module
<script>, async, defer, module
Speculation Rules API
Demo or
it didn't happen
🌍 Impacte ambiental
Cada byte que es descarrega consumeix energia. Servidors, xarxes, el vostre propi mòbil. Internet ja consumeix més electricitat que molts països sencers. Una web optimitzada = menys CO₂.
Impacte més enllà del teu mòbil
♿ Accessibilitat i equitat
Una web ràpida funciona per a tothom. Una web lenta exclou la gent amb mòbils vells, connexions dolentes, o dades limitades. Optimitzar és una forma d'inclusió.
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
Punts a destacar
La propera vegada que una web us vagi lenta, no penseu 'quin mòbil més dolent tinc'.
Penseu: 'qui ha decidit que aquesta web sigui així?'
Perquè darrere de cada web lenta hi ha decisions,
i es podrien haver pres d'una altra manera.
Recursos
Optimització de Performance i Temps de càrrega
By Joan León
Optimització de Performance i Temps de càrrega
Els temps de la càrrega inicial d'un lloc web són de vital importància per aconseguir un bon rati de conversió. En una època en la que creiem que les visites tindran una bona connexió i un bon dispositiu, juntament amb els patrons de desenvolupament on es delega al client l'execució de la major part de la lògica de negoci, hem de tenir especial atenció a l'optimització de la càrrega de recursos.
