Check list para rendimento Front-End

🎮 La lista de requerimientos más rápida de todas

Una simple regla: "Diseñe y programe teniendo en cuenta el rendimiento"

¿Cómo se usa? • Contribuir • Product Hunt

Otros checklists (en inglés):
🗂 Front-End checklist • 💎 Front-End checklist para diseño

Nota de traducción

Este projecto fue originalmente hecho en inglés, por lo cual, muchos enlaces y referencias - como con los articulos, plugins u otras recomendaciones - apuntan a sitios que están en inglés. Por favor, tomar esto en cuenta al momento de utilziar esta versión traducida al español. Asimismo, los nombres propios de sitios, herramientas y algunos otros elementos no serán traducidos al español y así evitar dar una falsa imagen de que dichos productos están también en español.

Introducción

El rendimiento es un tema amplio, pero no es siempre un tema del lado del back-end o del administrador. También es responsabilidad del front-end. Este checklist contiene una exhaustiva recopilación de elementos que deberías revisar, o al menos ser consciente de ellos como desarrollador front-end y aplicarla a tu proyecto (personal y profesional).

¿Cómo se usa?

Para cada regla, habrá un párrafo explicando el porqué de la importancia de esta regla y cómo se puede arreglar. Para más información, se encontrarán links que redirigirán a 🛠 herramientas, 📖 artículos, o 📹 contenido multimedia que puede completar la lista de requerimientos.

Todos los elementos de este checklist son esenciales para lograr el mayor porcentaje de rendimiento, pero habrán indicadores para ayuadar a eventualmente priorizar unas reglas sobre otras:

Significa que tiene una prioridad baja.
Significa que tiene un prioridad media. No se debería evitar abordar este elemento.
Significa que el elemento tiene una prioridad alta. No se puede evitar seguir la regla e implementar las correciones recomendadas.

Herramientas para rendimiento

Lista de herramientas que puede utilizar para probar o monitorear el sitio o aplicación:

Referencias

HTML

Minificar el HTML: El código HTML se minimiza, los comentarios, espacios en blanco y las nuevas líneas se eliminan de los archivos de producción.

¿Por qué?:

Remover espacios innecesarios, comentarios, y atributos reduce el tamaño del HTML y acelera el tiempo de carga de la página.

¿Cómo?:

La mayoría de los frameworks tienen plugins para facilitar la minificación de las páginas web. Puedes utilizar un montón de módulos de NPM que pueden hacer el trabajo por ti automáticamente.
- 🛠 HTML minifier | Minify Code
- 🛠 Online HTML Compressor
- 📖 Experimenting with HTML minifier — Perfection Kills
Siempre colocar las etiquetas CSS antes que las etiquetas Javascript: Asegúrese que tu CSS siempre carga antes que el código Javascript.
```

<script src="jquery.js"></script>
<script src="foo.js"></script>
<link rel="stylesheet" href="foo.css"/>


<link rel="stylesheet" href="foo.css"/>
<script src="jquery.js"></script>
<script src="foo.js"></script>
```
¿Por qué?:

Tener las etiquetas CSS antes que el Javascript permite una mejor descarga paralela, lo que optimiza el tiempo de carga del navegador.

¿Cómo?:

Asegúrese que las etiquetas <link> y <style> en <head>siempre vayan antes que <script>.
- 📖 Ordering your styles and scripts for pagespeed
Minimiza el número de los iframes: Usa iframes solo si no tienes otra posibilidad técnica. Intenta evitar iframes tanto como puedas.
Optimizar la pre-carga con prefetch, dns-prefetch y prerender: Los navegadores populares pueden usar la directiva en la etiqueta <enlace> y el atributo "rel" con ciertas palabras clave para precargar URL específicas.

¿Por qué?:

La captación previa permite que un navegador obtenga silenciosamente los recursos necesarios para mostrar contenido al que un usuario podría acceder en un futuro próximo. El navegador puede almacenar estos recursos en su caché y acelerar la forma en que se cargan las páginas web cuando utilizan diferentes dominios para los recursos de la página. Cuando una página web ha terminado de cargarse y ha pasado el tiempo de inactividad, el navegador comienza a descargar otros recursos. Cuando un usuario ingresa a un enlace en particular (ya precargado), el contenido se servirá instantáneamente.

¿Cómo?:

Asegúrate de que <link> esté en tu sección <head>.

⬆ Regresar al inicio

CSS

Minification: Todos los archivos CSS se minimizan, los comentarios, los espacios en blanco y las nuevas líneas se eliminan de los archivos de producción.

¿Por qué?:

Cuando se minimizan los archivos CSS, el contenido se carga más rápido y se envían menos datos al cliente. Es importante minimizar siempre los archivos CSS en producción. Es beneficioso para el usuario como lo es para cualquier empresa que desee reducir los costos de ancho de banda y reducir el uso de recursos.

¿Cómo?:

Use herramientas para minimizar sus archivos automáticamente antes o durante su compilación o implementación.
- 🛠 cssnano: A modular minifier based on the PostCSS ecosystem. - cssnano
- 🛠 CSS Minfier
- 🛠 @neutrinojs/style-minify - npm
- 🛠 Online CSS Compressor
Concatenación: Los archivos CSS se concatenan en un solo archivo (No siempre es válido para HTTP/2).
```

<link rel="stylesheet" href="foo.css"/>
<link rel="stylesheet" href="bar.css"/>


<link rel="stylesheet" href="foobar.css"/>
```
¿Por qué?:

Si aún usa HTTP/1, es posible que deba concatenar sus archivos, es menos cierto si su servidor usa HTTP/2 (se deben realizar pruebas).

¿Cómo?:

⁃ Use una herramienta en línea o cualquier complemento antes o durante su compilación o su implementación para concatenar sus archivos.
⁃ Asegúrese, por supuesto, de que la concatenación no rompa su proyecto.
- 📖 HTTP: Optimizing Application Delivery - High Performance Browser Networking (O'Reilly)
- 📖 Performance Best Practices in the HTTP/2 Era
No-bloqueadores: Los archivos CSS no deben bloquear para evitar que el DOM tarde en cargarse.
```
<link rel="preload" href="global.min.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="global.min.css"></noscript>
```
¿Por qué?:

Los archivos CSS pueden bloquear la carga de la página y retrasar la visualización de su página. El uso de preload puede cargar los archivos CSS antes de que el navegador comience a mostrar el contenido de la página.

¿Cómo?:

Debe agregar el atributo rel con el valor preload y agregar as="style" en el elemento <link>.
CSS sin usar: Elimina los selectores de CSS no utilizados.

¿Por qué?:

Eliminar los selectores de CSS no utilizados puede reducir el tamaño de sus archivos y luego acelerar la carga de sus activos.

¿Cómo?:

⁃ ⚠️ Siempre verifique si el framework CSS que desea usar aún no tiene un código de reinicio / normalización incluido (un normalize o reset en inglés). A veces es posible que no necesite todo lo que está dentro de su archivo de reinicio.
- 🛠 UnCSS Online
- 🛠 PurifyCSS
- 🛠 PurgeCSS
- 🛠 Chrome DevTools Coverage

CSS crítico: El CSS crítico (o "sobre el pliegue") recopila todo el CSS utilizado para mostrar la parte visible de la página. Está incrustado antes de su llamada CSS principal y entre <style></style> en una sola línea (minimizado si es posible).

¿Por qué?:

La integración de CSS crítico ayuda a acelerar la representación de las páginas web, lo que reduce la cantidad de solicitudes al servidor.

¿Cómo?:

Genere el CSS crítico con herramientas en línea o usando un complemento como el que desarrolló Addy Osmani.
- 📖 Understanding Critical CSS
- 🛠 Critical by Addy Osmani on GitHub automates this.
- 📖 Inlining critical CSS for better web performance | Go Make Things
- 🛠 Critical Path CSS Generator - Prioritize above the fold content :: SiteLocity
- 📖 Reduce the size of the above-the-fold content

CSS incrustado o en línea: Evite usar CSS incrustado o en línea dentro de su <body> (No es válido para HTTP/2)

¿Por qué?:

Una de las primeras razones es porque es una buena práctica separar el contenido del diseño. También lo ayuda a tener un código más fácil de mantener y mantener su sitio accesible. Pero en cuanto al rendimiento, es simplemente porque disminuye el tamaño de archivo de sus páginas HTML y el tiempo de carga.

¿Cómo?:

Utilice siempre hojas de estilo externas o incruste CSS en su <head> (y siga las demás reglas de rendimiento de CSS)
- 📖 Observe CSS Best Practices: Avoid CSS Inline Styles
Analice la complejidad de las hojas de estilo: El análisis de sus hojas de estilo puede ayudarlo a señalar problemas, redundancias y selectores de CSS duplicados.

¿Por qué?:

A veces puede tener redundancias o errores de validación en su CSS, analizar sus archivos CSS y eliminar estas complejidades puede ayudarlo a acelerar sus archivos CSS (porque su navegador los leerá más rápido)

¿Cómo?:

Su CSS debe estar organizado, usar un preprocesador de CSS puede ayudarlo con eso. Algunas herramientas en línea que se enumeran a continuación también pueden ayudarlo a analizar y corregir su código.
- 🛠 TestMyCSS | Optimize and Check CSS Performance
- 🛠 CSS Stats
- 🛠 macbre/analyze-css: CSS selectors complexity and performance analyzer
- 🛠 Project Wallace is like CSS Stats but stores stats over time so you can track your changes

⬆ Regresar al inicio

Fuentes

📖 A Book Apart, Webfont Handbook

formatos Webfont: Está utilizando WOFF2 en su proyecto o aplicación web.

¿Por qué?:

Según Google, el formato de compresión WOFF 2.0 Web Font ofrece una ganancia promedio del 30 % sobre WOFF 1.0. Entonces es bueno usar WOFF 2.0, WOFF 1.0 como respaldo y TTF.

¿Cómo?:

Comprueba antes de comprar tu nueva fuente que el proveedor te dé el formato WOFF2. Si está utilizando una fuente gratuita, siempre puede usar Font Squirrel para generar todos los formatos que necesita.
Use preconnect para cargar las fuentes más rápido:
```
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
```
¿Por qué?:

Cuando llega a un sitio web, su dispositivo necesita averiguar dónde se encuentra su sitio y con qué servidor necesita conectarse. Su navegador tuvo que ponerse en contacto con un servidor DNS y esperar a que se completara la búsqueda antes de obtener el recurso (fuentes, archivos CSS...). Las precargas y las preconexiones permiten que el navegador busque la información de DNS y comience a establecer una conexión TCP con el servidor que aloja el archivo de fuente. Esto proporciona un aumento de rendimiento porque para cuando el navegador analice el archivo css con la información de la fuente y descubra que necesita solicitar un archivo de fuente del servidor, ya habrá resuelto previamente la información de DNS y tendrá una conexión abierta. al servidor listo en su conjunto de conexiones.

¿Cómo?:

⁃ Antes de precargar sus fuentes web, use webpagetest para evaluar su sitio web
⁃ Busque búsquedas de DNS de color verde azulado y observe el host que se solicita
⁃ Precarga tus fuentes web en tu <head> y agrega eventualmente estos nombres de host que también deberías precargar
El tamaño del Webfont: Los tamaños de fuente web no superan los 300 kb (todas las variantes incluidas)

📖 Font Bytes - Page Weight

Evitar texto invisible o flash: Evite el texto transparente hasta que se cargue Webfont

⬆ Regresar al inicio

Imágenes

📖 Image Bytes in 2018
Optimización de imágenes: Sus imágenes están optimizadas, comprimidas sin impacto directo para el usuario final.

¿Por qué?:

Las imágenes optimizadas se cargan más rápido en su navegador y consumen menos datos.

¿Cómo?:

⁃ Intente usar efectos CSS3 cuando sea posible (en lugar de una imagen pequeña)
⁃ Cuando sea posible, use fuentes en lugar de texto codificado en sus imágenes
⁃ Use SVG
⁃ Use una herramienta y especifique un nivel de compresión por debajo de 85.
Formato de imágenes: Elija su formato de imagen apropiadamente.

¿Por qué?:

Para asegurarse de que sus imágenes no ralenticen su sitio web, elija el formato que corresponderá a su imagen. Si se trata de una foto, JPEG suele ser más apropiado que PNG o GIF. Pero no olvide buscar los formatos de próxima generación que pueden reducir el tamaño de sus archivos. Cada formato de imagen tiene pros y contras, es importante conocerlos para hacer la mejor elección posible.

¿Cómo?:

⁃ Use Lighthouse para identificar qué imágenes pueden eventualmente usar formatos de siguiente-generación (como JPEG 2000m JPEG XR o WebP)
⁃ Compare diferentes formatos, a veces usar PNG8 es mejor que PNG16, a veces no lo es.

Usar imagen vectorial vs ráster/mapa de bits: Prefiere usar imágenes vectoriales en lugar de imágenes de mapa de bits (cuando sea posible).

¿Por qué?:

Las imágenes vectoriales (SVG) tienden a ser más pequeñas que las imágenes y los SVG responden y escalan perfectamente. Estas imágenes pueden ser animadas y modificadas por CSS.

Dimensiones de imagen: Agregue los atributos width y height en el tag <img> si se conoce el tamaño final de la imagen.

¿Por qué?:

Si se establecen alto y ancho, el espacio requerido para la imagen se reserva cuando se carga la página. Sin embargo, sin estos atributos, el navegador no conoce el tamaño de la imagen y no puede reservarle el espacio adecuado. El efecto será que el diseño de la página cambiará durante la carga (mientras se cargan las imágenes).
Evite el uso de imágenes Base64: Eventualmente podría convertir imágenes diminutas a base64, pero en realidad no es la mejor práctica.
Lazy loading: Las imágenes fuera de pantalla se cargan con el enfoque lazy loading.

¿Por qué?:

Mejorará el tiempo de respuesta de la página actual y luego evitará cargar imágenes innecesarias que el usuario puede no necesitar.

¿Cómo?:

⁃ Use Lighthouse para identificar imágenes fuera de pantalla.
⁃ Use un plugin de JavaScript como el siguiente para cargar sus imágenes de forma diferida. Asegúrate de apuntar solo a imágenes fuera de pantalla.
⁃ También asegúrese de cargar de forma diferida las imágenes alternativas que se muestran al pasar el mouse por encima o en otras acciones del usuario.
Imágenes responsivas: Asegúrese de publicar imágenes que se acerquen al tamaño de su pantalla.

¿Por qué?:

Los dispositivos pequeños no necesitan imágenes más grandes que su ventana gráfica. Es Recomendado tener múltiples versiones de una imagen en diferentes tamaños.

¿Cómo?:

⁃ Cree diferentes tamaños de imagen para los dispositivos a los que desea dirigirse.
⁃ Use srcset y picture para entregar múltiples variantes de cada imagen.
- 📖 Responsive images - Learn web development | MDN

⬆ Regresar al inicio

JavaScript

Minificación: Todos los archivos JavaScript se minimizan, los comentarios, los espacios en blanco y las nuevas líneas se eliminan de los archivos de producción (aún válido si se usa HTTP/2).

¿Por qué?:

Eliminar todos los espacios, comentarios y pausas innecesarios reducirá el tamaño de sus archivos JavaScript y acelerará los tiempos de carga de la página de su sitio y, obviamente, aligerará la descarga para su usuario.

¿Cómo?:

Utilice las herramientas sugeridas a continuación para minimizar sus archivos automáticamente antes o durante su compilación o implementación.

JavaScript dentro del HTML: (Solo válido para sitio web) Evite tener múltiples códigos JavaScript incrustados en el medio de su cuerpo. Reagrupa tu código JavaScript dentro de archivos externos o eventualmente en <head> o al final de tu página (antes de </body>).

¿Por qué?:

Colocar el código incrustado de JavaScript directamente en su <cuerpo> puede ralentizar su página porque se carga mientras se construye el DOM. La mejor opción es usar archivos externos con async o defer para evitar bloquear el DOM. Otra opción es colocar algunos scripts dentro de su <head>. La mayoría de las veces, el código de análisis o el pequeño script deben cargarse antes de que el DOM llegue al procesamiento principal.

¿Cómo?:

Asegúrese de que todos sus archivos se carguen usando async o defer y decida sabiamente el código que necesitará inyectar en su <head>.
- 📖 11 Tips to Optimize JavaScript and Improve Website Loading Speeds
JavaScript no bloqueante: Los archivos de JavaScript se cargan de forma asíncrona usando async o se difieren usando el atributo defer.
```

<script defer src="foo.js"></script>


<script async src="foo.js"></script>
```
¿Por qué?:

JavaScript bloquea el análisis normal del documento HTML, por lo que cuando el analizador llega a una etiqueta <script> (particularmente está dentro de <head>), se detiene para buscarlo y ejecutarlo. Agregar async o defer es muy recomendable si sus scripts se colocan en la parte superior de su página, pero es menos valioso si se encuentra justo antes de la etiqueta </body>. Pero es una buena práctica usar siempre estos atributos para evitar cualquier problema de rendimiento.

¿Cómo?:

Agregue async (si el script no se basa en otros scripts) o defer (si el script depende de un script asíncrono) como un atributo a la etiqueta script.
⁃ Si tiene scripts pequeños, tal vez, usar script inline arriba de los script async sea buena idea.
- 📖 Remove Render-Blocking JavaScript
- 📖 Defer loading JavaScript
Bibliotecas JS optimizadas y actualizadas: Todas las bibliotecas de JavaScript utilizadas en su proyecto son necesarias (prefiera JavaScript Vanilla para funcionalidades simples), actualizadas a su última versión y no abrume su JavaScript con métodos innecesarios.

¿Por qué?:

La mayoría de las veces, las nuevas versiones vienen con optimización y corrección de seguridad. Debe usar el código más optimizado para acelerar su proyecto y asegurarse de no ralentizar su sitio web o aplicación sin un complemento desactualizado.

¿Cómo?:

Si tu proyecto usa paquetes de NPM, npm-check es una biblioteca bastante interesante para actualizar / actualizar sus bibliotecas. Greenkeeper puede buscar automáticamente sus dependencias y sugerir una actualización cada vez que sale una nueva versión.
- 📖 You may not need jQuery
- 📖 Vanilla JavaScript for building powerful web applications

Check dependencies size limit: Asegúrese de usar sabiamente bibliotecas externas, la mayoría de las veces, puede usar una biblioteca más ligera para una misma funcionalidad.

¿Por qué?:

Puede sentirse tentado a usar uno de los 745 000 paquetes que puede encontrar en npm, pero debe elegir el mejor paquete para sus necesidades. Por ejemplo, MomentJS es una biblioteca increíble pero con muchos métodos que quizás nunca uses, por eso se creó Day.js. Son solo 2kB frente a 16,4kB gz para Moment.

¿Cómo?:

Compare y elija siempre la biblioteca mejor y más ligera para sus necesidades. También puede usar herramientas como npm Trends para comparar los recuentos de descargas de paquetes de NPM o Bundlephobia para conocer el tamaño de sus dependencias.
Profiling en JavaScript: Compruebe si hay problemas de rendimiento en sus archivos JavaScript (y también en CSS).

¿Por qué?:

La complejidad de JavaScript puede ralentizar el rendimiento del tiempo de ejecución. Identificar estos posibles problemas es esencial para ofrecer la experiencia de usuario más fluida.

¿Cómo?:

Use la herramienta Línea de tiempo en la Herramienta para desarrolladores de Chrome para evaluar los eventos de los scripts y encontrar el que puede llevar demasiado tiempo.
Utilice Service Workers: Está utilizando Service Workers en su PWA para almacenar datos en caché o ejecutar posibles tareas pesadas sin afectar la experiencia del usuario de su aplicación.

⬆ Regresar al inicio

Servidor

El sitio está utilizando HTTPS:

¿Por qué?:

HTTPS no es solo para sitios web de comercio electrónico, sino para todos los sitios web que intercambian datos. Datos compartidos por un usuario o datos compartidos con una entidad externa. Los navegadores modernos de hoy limitan las funcionalidades de los sitios que no son seguros. Por ejemplo: la geolocalización, las notificaciones push y los trabajadores del servicio no funcionan si su instancia no usa HTTPS. Y hoy es mucho más fácil configurar un proyecto con un certificado SSL que antes (y gratis, gracias a Let's Encrypt).

Peso del sitio < 1500 KB (idealmente < 500 KB): Reduce el tamaño de tu página + recursos tanto como puedas.

¿Por qué?:

Idealmente, debería intentar apuntar a < 500 KB, pero el estado de la web muestra que la mediana de Kilobytes es de alrededor de 1500 KB (incluso en dispositivos móviles). Dependiendo de sus usuarios objetivo, conexión de red, dispositivos, es importante reducir tanto como sea posible su total de Kilobytes para tener la mejor experiencia de usuario posible.

¿Cómo?:

⁃ Todas las reglas dentro de la Lista de verificación de rendimiento de front-end lo ayudarán a reducir tanto como sea posible sus recursos y su código.
- 📖 Page Weight
- 🛠 What Does My Site Cost?
- 🛠 web - Measure full page size in Chrome DevTools - Stack Overflow
Tiempo de carga de la página < 3 segundos: Reduzca al máximo los tiempos de carga de su página para entregar rápidamente su contenido a sus usuarios.

¿Por qué?:

Cuanto más rápido sea su sitio web o aplicación, menor será la probabilidad de que aumente el rebote, en otros términos, tendrá menos posibilidades de perder a su usuario o futuro cliente. Suficientes investigaciones sobre el tema prueban ese punto.

¿Cómo?:

Utilizando herramientas como Page Speed Insight o WebPageTest para analizar qué podría estar ralentizándolo, también puede usar este projecto para optimizar el rendimiento en general.
Tiempo para el primer byte < 1,3 segundos: Reduzca al máximo el tiempo de espera de su navegador antes de recibir datos.

Tamaño de los cookies: Si está utilizando cookies, asegúrese de que cada cookie no supere los 4096 bytes y que su nombre de dominio no tenga más de 20 cookies.

¿Por qué?:

Las cookies se intercambian en los encabezados HTTP entre los servidores web y los navegadores. Es importante mantener el tamaño de las cookies lo más bajo posible para minimizar el impacto en el tiempo de respuesta del usuario.

¿Cómo?:

Elimine cookies que no sean necesarias.

Minimizar las solicitudes HTTP: Asegúrese siempre de que todos los archivos solicitados sean esenciales para su sitio web o aplicación.

📖 Combine external CSS
📖 Combine external JavaScript

Use un CDN para entregar sus activos: Utilice una CDN para entregar más rápido su contenido en todo el mundo.

Servir archivos desde el mismo protocolo: Evite que su sitio web sirva archivos provenientes de una fuente usando HTTP en su sitio web que usa HTTPS, por ejemplo. Si su sitio web usa HTTPS, los archivos externos deben provenir del mismo protocolo.
Servir archivos accesibles: Evite solicitar archivos inalcanzables (404).

📖 How to avoid bad requests

Establecer encabezados de caché HTTP correctamente: Establezca encabezados HTTP para evitar una costosa cantidad de viajes de ida y vuelta entre su navegador y el servidor.

📖 Using cache-control for browser caching

La compresión GZIP / Brotli está habilitada: Utilice un método de compresión como Gzip o Brotli para reducir el tamaño de sus archivos JavaScript. Con un archivo de menor tamaño, los usuarios podrán descargar el activo más rápido, lo que resultará en un mejor rendimiento.

⬆ Regresar al inicio