Skip to content
🎮 The only Front-End Performance Checklist that runs faster than the others
Branch: master
Clone or download
Pull request Compare This branch is 6 commits ahead, 39 commits behind thedaviddias:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
images
.gitignore
CODE_OF_CONDUCT.md
LICENSE
README.md

README.md


Front-End Performance Checklist

Lista de requerimientos para el rendimiento front-end  

🎮 La única lista de requerimientos para el rendimiento del front-end que corre más rápido que otras.

Una regla simple: “Diseña y programa con rendimiento en mente”

      PRs Welcome         Discord           Licence MIT  

  Cómo utilizarContribuyendoMapa del caminoProduct Hunt

🇺🇸 🇨🇳 🇫🇷 🇰🇷 🇵🇹 🇷🇺

Otras listas de requerimientos:
🗂 Lista de requerimientos para front-end💎 Lista de requerimientos para diseño front-end

Tabla de contenidos

  1. HTML
  2. CSS
  3. Fuentes
  4. Imágenes
  5. JavaScript
  6. Server (en progreso)
  7. Frameworks JS (en progreso)

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. La lista de requerimientos para el rendimiento front-end, es una lista exhaustiva 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).

Como utilizar

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

Todos los elementos en la lista de requerimientos para el rendimiento front-end son esenciales para lograr el mayor porcentaje de rendimiento, pero encontrarás un indicador para ayudarte a eventualmente priorizar unas reglas sobre otras:

  • Low significa que el elemento es de prioridad baja.
  • Medium significa que el elemento es de prioridad media. No deberías evitar abordar dicho elemento.
  • High significa que el elemento tiene una prioridad alta. No puedes evitar seguir dicha regla e implementar las correcciones recomendadas.

Herramientas de rendimiento

Lista de herramientas que puedes utilizar para probar o monitorear tu sitio o aplicación:

Referencias (inglés)


HTML

html

  • Minificar el HTML: medium 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é?:

    La eliminación de todos los espacios innecesarios, comentarios y rupturas reducirá el tamaño de tu HTML y acelerará los tiempos de carga de la página del sitio y, obviamente, aligerará la descarga para su usuario.

    ¿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.

  • Eliminar comentarios innecesarios: low Asegurate de eliminar los comentarios de tus páginas.

    ¿Por qué?:

    Los comentarios no son realmente útiles para el usuario y debería eliminarse de los archivos de producción. Un caso en el que quieras conservar los comentarios podría ser si es necesario conservar el origen de una biblioteca.

    ¿Cómo?:

    ⁃ La mayoría de las veces, los comentarios pueden eliminarse utilizando un plugin que minify el HTML.

  • Eliminar atributos innecesarios: low atributos type como type="text/javascript" o type="text/css" no son requeridos más y deberían ser eliminados.

    <!-- Antes de HTML5 -->
    <script type="text/javascript">
        // código JavaScript
    </script>
    
    <!-- Hoy -->
    <script>
        // código JavaScript
    </script>

    ¿Por qué?:

    Los atributos type no son necesarios ya que HTML5 aplica text/css y text/javascript como valores por defecto. El código no utilizado debe eliminarse ya que da más peso a las páginas.

    ¿Cómo?:

    ⁃ Asegúrese de que todas sus etiquetas <link> y <script> no tienen el atributo type.

  • Siempre colocar las etiquetas CSS antes que las etiquetas Javascript: high Asegúrese que tu CSS siempre carga antes que el código Javascript.

    <!-- No recomendado -->
    <script src="jquery.js"></script>
    <script src="foo.js"></script>
    <link rel="stylesheet" href="foo.css"/>
    
    <!-- Recomendado -->
    <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 <link> y <style> en <head>siempre van antes que <script>.

  • Minimiza el número de los iframes: high Usa iframes solo si no tienes otra posibilidad técnica. Intenta evitar iframes tanto como puedas.

⬆ volver arriba

CSS

css

  • Minificación: high Todos los archivos CSS son minificados, 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?:

    ⁃ Utilizando herramientas para minificar los archivos automáticamente o durante el desarrollo o el despliegue.

  • Concatenación: medium Los archivos CSS son concatenados en un solo archivo (No siempre válido para HTTP/2).

    <!-- No recomendado -->
    <link rel="stylesheet" href="foo.css"/>
    <link rel="stylesheet" href="bar.css"/>
    
    <!-- Recomendado -->
    <link rel="stylesheet" href="foobar.css"/>

    ¿Por qué?:

    Si todavía estás utilizando HTTP/1, puede que necesites concatenar tus archivos, es menos cierto si tu servidor usa HTTP/2 (se deben realizar pruebas).

    ¿Cómo?:

    ⁃ Utilizando una herramienta en línea o cualquier plugin antes o durante la compilación o implementación para concatenar los archivos.
    ⁃ Asegúrese, por supuesto, de que la concatenación no rompa el proyecto.

  • No-bloqueantes: high Los archivos CSS tienen que ser no-bloqueantes para evitar que el DOM demore tiempo en cargar.

    <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 el renderizado de la 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?:

    ⁃ Necesitas agregar el atributo rel con el valor preload y agregar as =" style " en el elemento <link>.

  • Longitud de las clases CSS: low La longitud de las clases puede tener un (leve) impacto en tus archivos HTML y CSS (eventualmente).

    ¿Por qué?:

    Incluso los impactos en el rendimiento puede ser discutibles, tomar una decisión sobre una estrategia de nomenclatura con respecto al proyecto puede tener un impacto sustancial en el mantenimiento de las hojas de estilo. Si estás utilizando BEM, en algunos casos, puede terminar con clases que tengan más caracteres de los necesarios. Siempre es importante elegir sabiamente los nombres y espacios de nombre.

    ¿Cómo?:

    Estableciendo un límite en los términos de números de caracteres podría ser interesante para algunas personas, pero descomponiendo el sitio en componentes puede ayudar a reducir el número de clases (y declaraciones) y la longitud de las mismas.

  • CSS sin utilizar: medium Elimina los selectores de CSS no utilizados.

    ¿Por qué?:

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

    ¿Cómo?:

    ⚠️ Siempre verifica si el framework CSS que quieres utilizar no tiene ya incluido un reset/normalice. Es posible que a veces no necesites todo lo que viene dentro del reset/normalize.

  • CSS incrustado o en línea: high Evitar el uso de CSS incrustado o en línea dentro del <body> (No válido para HTTP/2)

    ¿Por qué?:

    Una de las principales razones es porque es buena práctica separar el contenido del diseño*. También ayuda a tener un código más mantenible y un sitio más accesible. Pero, en relación al rendimiento, es simplemente porque disminuye el tamaño el archivo del HTML y el tiempo de carga.

    ¿Cómo?:

    Siempre utilizar hojas de estilo externas o incrustadas en el <head> (y seguir las otras reglas de rendimiento de CSS)

  • Analiza la complejidad de las hojas de estilo: high Analizar las hojas de estilo puede ayudarte a encontrar problemas, redundancias y sectores CSS duplicados.

    ¿Por qué?:

    A veces puedes tener redundancias o errores de validación en el CSS, analizar los archivos y eliminar estas complejidades puede ayudarte a acelerarlos (porque el navegador cargará más rápido)

    ¿Cómo?:

    El CSS debe estar organizado, utilizar un preprocesador CSS puede ayudar con eso. Algunas herramientas en línea que se enumeran a continuación, también pueden ayudar a corregir el código.

⬆ volver arriba

Fuentes

fonts

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

⬆ volver arriba

Imagenes

images

  • Utilizar imagen vectorial vs raster/bitmap: medium Es preferible utilizar imágenes vectoriales en lugar de imágenes de bitmaps (cuando es posible).

    ¿Por qué?:

    Imágenes vectoriales (SVG) tienden a ser más pequeñas que los bitmaps y los SVG se escalan y redimensionan perfectamente. Estas imágenes pueden ser animadas y modificadas mediante CSS.

⬆ volver arriba

JavaScript

javascript

  • Minificación del JS: highTodos los archivos JavaScript se minifican, los comentarios, espacios en blanco y las nuevas líneas se eliminan de los archivos de producción (sigue siendo válido si se usa HTTP/2).

    ¿Por qué?:

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

    ¿Cómo?:

    ⁃ Utilice las herramientas que se sugieren a continuación para minimizar sus archivos automáticamente antes o durante su compilación o despliegue.

  • Sin JavaScript dentro: medium (Solo válido para sitios web) Evite tener varios códigos JavaScript incrustados en el medio del body. Reagrupe su código JavaScript dentro de archivos externos o eventualmente en el <head> o al final de su página (antes de </ body>).

    ¿Por qué?:

    Colocar el código incrustado de JavaScript directamente en el <body> puede ralentizar la 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 del <head>. La mayoría de las veces, el código de análisis o el pequeño script que se debe cargar antes de que el DOM llegue al procesamiento principal.

    ¿Cómo?:

    Asegúrese de que todos sus archivos se carguen con async o defer y decida sabiamente el código que necesitará inyectar en su <head>.

  • JavaScript no-bloqueante: high Los archivos JavaScript se cargan de forma asincrónica usando async o diferido mediante el atributo defer.

    <!-- Defer Attribute -->
    <script defer src="foo.js"></script>
    
    <!-- Async Attribute -->
    <script async src="foo.js"></script>

    ¿Por qué?:

    JavaScript bloquea el parseo normal del HTML, por lo que cuando el analizador alcanza una etiqueta <script> (particularmente es dentro del <head>) deja de buscarlo y ejecutarlo. Agregar async o defer es muy recomendable si tus scripts se colocan en la parte superior de la página, pero menos valiosos si están 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 se basa en un script asincrónico o se basa en él) como un atributo para la etiqueta del script.
    ⁃ Si tiene scripts pequeños, tal vez use scripts en línea encima de los scripts asincrónicos.

  • Bibliotecas JS optimizadas y actualizadas: medium Todas las bibliotecas de JavaScript usadas en su proyecto son necesarias (prefiera el JavaScript simple para funcionalidades simples), actualizadas a su última versión y no abrumen 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 que no ralentice su sitio web o aplicación sin un plugin desactualizado.

    ¿Cómo?:

    Si el proyecto utiliza paquetes NPM, npm-check es una liberia muy interesante para actualizar las librerías. Greenkeeper Puede revisar automáticamente las dependencias y sugerir actualizaciones cada vez que sale una nueva versión.

⬆ volver arriba

Server

server-side

  • Tu sitio web utiliza HTTPS: high

    ¿Por qué?:

    HTTPS no es solo para un ecommerce, sino para todos los sitios web que intercambian datos. Datas compartidas por un usuario o datos compartidos con una entidad externa. Los navegadores modernos de hoy limitan las funcionalidades para 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 de forma gratuita, gracias a Let's Encrypt.

  • Minimizando las solicitudes HTTP: highAsegúrese siempre de que cada archivo solicitado sea esencial para el sitio web o aplicación.
  • Utilizar CDN para alojar recursos: medium Utilice un CDN para entregar el contenido más rápido en todo el mundo.
  • Servir archivos del mismo protocolo high Evite que su sitio web publique archivos provenientes de fuentes que usan HTTP en su sitio web que usa HTTPS, por ejemplo. Si su sitio web usa HTTPS, los archivos externos deben provenir del mismo protocolo.

  • Sirve archivos alcanzables high Evite solicitar archivos inalcanzables (404).

  • Establecer encabezados de caché HTTP correctamente: high Establezca encabezados HTTP para evitar costosas cantidades de viajes de ida y vuelta entre su navegador y el servidor.
  • GZIP / compresión Brotli está habilitada: high Use un método de compresión como Gzip o Brotli para reducir el tamaño de sus archivos JavaScript. Con un archivo de tamaños más pequeños, los usuarios podrán descargar el activo más rápido, lo que redundará en un mejor rendimiento.

⬆ volver arriba


Performances and JS Frameworks

Angular

React

Vue

Rendimiento y CMS

WordPress

Artículos

Plugins recomendados


Traducciones

¡Lista de requerimientos para el rendimiento front-end quiere estar disponible en otros idiomas! ¡No dudes en enviar su contribución!

Contribuir

Abre un issue o un pull request para sugerir cambios o adiciones.

Apoyo

Si tiene alguna pregunta o sugerencia, no dude en usar Gitter o Twitter:

Autor

Hecho con ❤️ por David Dias en @influitive 🇨🇦

Colaboradores

Este proyecto existe gracias a todas las personas que contribuyen. [Contribuir].

Backers

¡Gracias a todos nuestros backers! 🙏 [Conviertete en un backer]

Patrocinadores

Apoya este proyecto convirtiéndote en un patrocinador. Tu logo aparecerá aquí con un enlace a tu sitio web. [Conviértete en patrocinador]

Licencia

MIT

Todos los iconos son provistos por Icons8

⬆ volver arriba

You can’t perform that action at this time.