Skip to content

🎮 El checklist para rendimiento front-end más rápido de todos

License

Notifications You must be signed in to change notification settings

dagerzuga/Front-End-Performance-Checklist

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation




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"

      Se aceptan PRs         Chat en Discord         Licencia MIT  

  ¿Cómo se usa?ContribuirProduct 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:

  • baja Significa que tiene una prioridad baja.
  • media Significa que tiene un prioridad media. No se debería evitar abordar este elemento.
  • alta 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

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é?:

    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.

  • 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 las etiquetas <link> y <style> en <head>siempre vayan 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.

  • Optimizar la pre-carga con prefetch, dns-prefetch y prerender: low 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

css

  • Minification: high 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.

  • Concatenación: medium Los archivos CSS se concatenan en un solo archivo (No siempre es 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 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.

  • No-bloqueadores: high 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: medium 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.

  • CSS incrustado o en línea: high 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)

  • Analice la complejidad de las hojas de estilo: high 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.

⬆ Regresar al inicio

Fuentes

fonts

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

⬆ Regresar al inicio

Imágenes

images

  • Usar imagen vectorial vs ráster/mapa de bits: medium 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.

⬆ Regresar al inicio

JavaScript

javascript

  • Minificación: high 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: medium (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>.

  • JavaScript no bloqueante: high Los archivos de JavaScript se cargan de forma asíncrona usando async o se difieren usando el atributo defer.

    <!-- usando el atributo "Defer" -->
    <script defer src="foo.js"></script>
    
    <!-- usando el atributo "Async" -->
    <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.

  • Bibliotecas JS optimizadas y actualizadas: medium 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.

⬆ Regresar al inicio

Servidor

server-side

  • El sitio está utilizando HTTPS: high

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

  • Minimizar las solicitudes HTTP: high Asegúrese siempre de que todos los archivos solicitados sean esenciales para su sitio web o aplicación.
  • Use un CDN para entregar sus activos: medium Utilice una CDN para entregar más rápido su contenido en todo el mundo.
  • Servir archivos desde el mismo protocolo: high 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: high Evite solicitar archivos inalcanzables (404).

  • Establecer encabezados de caché HTTP correctamente: high Establezca encabezados HTTP para evitar una costosa cantidad de viajes de ida y vuelta entre su navegador y el servidor.
  • La compresión GZIP / Brotli está habilitada: high 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


Rendimiento y frameworks de JavaScript

Angular

React

Vue

Rendimiento y CMS

WordPress

Artículos

Plugins recomendados


Traducciones

Este projecto quiere estar disponible en más idiomas! No dudes en enviar tu contribución!

Contribuir

Puede abrir un issue o un pull request para sugerir cambios o adiciones.

Soporte

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

Autor

**Hecho con ❤️ por David Dias

Colaboradores

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

Padrinos

Gracias a todos los padrinos (backers)! 🙏 [Conviertete en un padrino]

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

⬆ Regresar al inicio

About

🎮 El checklist para rendimiento front-end más rápido de todos

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published