Joan León PRO
⚡️ Web Performance Consultant | Speaker | Staff Frontend Engineer at @AdevintaSpain | @GoogleDevExpert in #WebPerf | @cloudinary Ambassador
El JavaScript que esperan encontrar las visitas a nuestra web
Gracias
async function optimizeJavi() {
showSpinner();
const JaviVelezOptimizedImage = await JoanLeonMagicAndSecretOtimization();
loadImage(JaviVelezOptimizedImage);
hideSpinner();
}
optimizeJavi();
¿Qué JavaScript espera encontrar?
JS
Espera encontrar lo que busca...
y en la mayor brevedad posible.
Y si les gusta la experiencia, volverán y/o compartirán el contenido.
Field
Interactivity | Core Web Vitals
FID
First Input Delay
Lighthouse Scoring Calculator
Lab
TTI
Time To Interactive
Lab
TBT
Total Blocking Time
preload
prefetch
preconnect
dns-prefetch
prerender
modulepreload
<link rel="prefetch" href="/style.css" as="style" />
<link rel="preload" href="/style.css" as="style" />
<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />
<link rel="prerender" href="https://example.com/about.html" />
<link rel="modulepreload" href="/script.js" />Preload critical assets
async o defer
<script async src="script.js">
<script defer src="script.js">async
Úsalo si es importante que el script se ejecute antes en el proceso de carga.
defer
Úsalo para recursos menos críticos. Un reproductor de video que se encuentra en la mitad inferior de la página, o un chat, por ejemplo.
defer show case
Download, Decompress, Parse/Compile JS
Parse & Compile JavaScript
Parse & Compile JavaScript
Tree Shaking
// Import all the array utilities!
import arrayUtils from "array-utils";// Import only some of the utilities!
import { unique, implode, explode } from "array-utils";Tree Shaking
import React from "react";
import React, {useState, useEffect} from "react";
import * as React from "react";Tree Shaking
/*#__PURE__*/
Web Worker
Web Worker
SSR vs CSR vs (Re)hydratation
Próximamente en sus pantallas
Thank you
El JavaScript que esperan encontrar las visitas a nuestra web
By Joan León
El JavaScript que esperan encontrar las visitas a nuestra web
Si he conseguido llamar tu atención con el "clickbait", esta charla es para ti. Lo primero que quiero que sepas es que tus visitas no esperan encontrar JavaScript. Esperan encontrar información, documentación, experiencias... la gran mayoría de las personas que hay detrás de esas visitas no saben qué es JavaScript, así que no están esperando encontrarse con el último framework, las últimas funcionalidades que han salido del TC39, o esa arquitectura crafter que has aprendido en tu último artículo leído. Lo que esperan encontrar es una buena experiencia, no tener problemas, y esperan poder consultar el contenido en la mayor brevedad posible. Y de esto va esta charla, de poner atención en la Web Performance para mejorar la UX en tiempos de carga, en tiempos de interacción y fluidez en la navegación.
