fucking awesome wpo
1.0.0
Bienvenido a la lista curada de recursos de optimización de rendimiento web. Este repositorio tiene como objetivo reunir las mejores herramientas, artículos, blogs, libros y charlas relacionadas con la optimización del rendimiento del sitio web. Ya sea que sea un desarrollador, diseñador o entusiasta del rendimiento, encontrará contenido valioso aquí para sobrealimentar sus proyectos web.
Impresionante wpo / artículos
? Impresionantes wpo / blogs
Impresionante wpo / libros
Impresionante wpo / documentos
? Impresionante wpo / eventos
? Impresionante wpo / conversaciones
Aquí hay una visión general rápida de las categorías cubiertas en esta colección:
Ir a artículos.md.
Ir a blogs.
Los mejores libros sobre WPO
¡Porque la comunidad importa!
Se clasifican en contenido/Meetups.md.
Se clasifican en contenido/talks.md.
872 100? Confiese) - utiliza PhantomJs para analizar las páginas web sin cabeza y generar manifiestos.28533 9406? Lighthouse) - Herramienta de métricas de auditoría y rendimiento para aplicaciones web progresivas.2205 382? YSLOW) - YSLOW analiza las páginas web y sugiere formas de mejorar su rendimiento en función de un conjunto de reglas para páginas web de alto rendimiento.35 3? Grunt -WebpageTest) - complemento Grunt para la medición continua de WebPageTest. (Manifestación)91 15? Grunt -Anslow) - Tarea de Grunt para probar el rendimiento de la página utilizando PhantomJS, un navegador WebKit sin cabeza.856 37? Grunt -Perfbudget) - ¿Una tarea de grunt.js para hacer cumplir un presupuesto de rendimiento? Más sobre presupuestos de rendimiento).2641 200? Marco de rastreo web): el marco de rastreo web es un conjunto de bibliotecas, herramientas y visualizadores para el rastreo e investigación de aplicaciones web complejas2469 280? Yandex.Tank): una herramienta de prueba de carga de código abierto extensible para usuarios avanzados de Linux, que es especialmente bueno como parte de un conjunto de pruebas de carga automatizada.1865 23? Speed Racer): recopile métricas de rendimiento para su biblioteca/aplicación utilizando Chrome sin cabeza.9 6? Node -Anslowjs) - Yslow.js en Node.js es un envoltorio nodo.js simple para ejecutar programáticamente Phantomjs yslow.js.3105 126? PSI) - PageSpeed Insights para Node.js - con informes.4474 180? BundleSize) - Mantenga el tamaño de su paquete bajo control.3846 101? Source-map-explorer): analice y depugte el uso del espacio del paquete a través de mapas de origen.12605 489? Webpack Bundle Analyzer) - El complemento Webpack y la utilidad CLI que representa el contenido de paquete como un conveniente TreemAp interactivo con zoomable.4 1? Lasso -analyzer) - Analice y visualice los paquetes de proyectos creados por Lasso.1413 108? Complemento de compresión web): prepare versiones comprimidas de los activos para servirles con la codificación de contenido.583 20? Bundlestats) - Genere el informe del paquete (tamaño del paquete, activos, módulos, paquetes) y compare los resultados entre diferentes compilaciones 573 21? CSS -Perf): forma completamente no científica de probar el rendimiento de CSS. La mayoría de estas pruebas girarán en torno a las metodologías y técnicas para determinar la arquitectura CSS efectiva. Dicho de otra manera, quiero saber qué funciona mejor, dada una comparación particular de las estrategias CSS. Un conjunto de herramientas para crear casos de prueba y comparar diferentes implementaciones en JavaScript.
Temporarily out, follow this issue for updates: https://github.com/jsperf/jsperf.com/issues/537166 15? JSLITMUS) - JSLITMUS es una herramienta liviana para crear pruebas de referencia JavaScript ad -hoc.563 37? Matcha) - Matcha le permite diseñar experimentos que medirán el rendimiento de su código. Se recomienda que cada banco se centre en un punto de impacto específico en su aplicación.1496 113? Timing.js) - Timing.js es un pequeño conjunto de ayudantes para trabajar con la API de sincronización de navegación para identificar dónde está gastando su tiempo. Útil como un script independiente, fragmento de Devtools o marcador.8780 1201? Stats.js): esta clase proporciona un cuadro de información simple que lo ayudará a monitorear el rendimiento de su código.1 0? Perftests) - Pruebas de rendimiento de los modelos de herencia de JavaScript.2094 105? Memory -stats.js) - Monitor mínimo para el tamaño del montón JS a través de la memoria de rendimiento. 53 4? PhPench) - Phpench crea una salida gráfica para un punto de referencia PHP. Traza el tiempo de ejecución de cualquier función en tiempo real con gnuplot y crea una imagen del resultado.13 1? PHP -Bench) - Bencas de referencia y perfil Bloques de código PHP mientras mide la huella de rendimiento. 3790 126? PerfMap): un marcador para crear un mapa de calor de rendimiento frontend de recursos cargados en el navegador utilizando la API de sincronización de recursos.559 52? DOM Monster): un marcador de navegador cruzado y multiplataforma que analizará las características DOM y otras de la página en la que se encuentra y le dará su factura de salud.1143 86? Performance -BookMarklet) - Analice la página actual a través de la API de tiempo de recursos, la API de tiempo de navegación y la velocidad del usuario: una especie de Light Live WebPageTest. Como ? Extensión cromada y? Complemento de Firefox bajo el nombre de rendimiento-analyser. Una red de distribución de contenido (CDN) de contenido es un gran sistema distribuido de servidores implementados en múltiples centros de datos en Internet. El objetivo de un CDN es servir contenido a los usuarios finales con alta disponibilidad y alto rendimiento. Vea una gran lista de CDN en Wikipedia.
5705 2060? JSDELIVR) - Similar a las bibliotecas alojadas de Google, JSDelivr es un CDN de código abierto que permite a los desarrolladores alojar sus propios proyectos y cualquier persona para vincular a nuestros archivos alojados en sus sitios.Para encontrar más información útil para que usted tome la decisión correcta entre CDN pagados, visite CDNPLANET.
82 6? Gulp-Google-CDN): reemplaza las referencias de script con las de Google CDN. 131 7? Calorías del navegador): la forma más fácil de medir su presupuesto de rendimiento. 35 2? ATBuild) - Herramienta de generación de código JavaScript que le permite escribir JavaScript que genera JavaScript. Bueno para desenrollar bucles y bibliotecas de escritura que compilan el tiempo de ejecución2550 169? Glue) - Glue es una herramienta de línea de comandos simple para generar sprites:19 3? Pitomba -syper): Spriter es un generador de sprite dinámico simple y flexible para CSS, que usa Python. Puede procesar CSS tanto sincrónicos como asíncronos, ya que proporciona clases para ser utilizadas en su código de Python y también un observador que escucha su sistema de archivos y cambia CSS y SPRITE tan pronto como se cambia una estática.1133 92? Grunt -Spritesmith) - Tarea de gruñidos para convertir un conjunto de imágenes en una hoja de sprites y las variables CSS correspondientes.15 1? Gulp -Sprite) - Tarea de trago para crear un sprite de imagen y las hojas de estilo correspondientes para Gulp.334 45? Gulp-SVG-Sprites)-Tarea Gulp para crear SVG Sprites.2 1? SVGTOCSS): optimiza y renderiza los archivos SVG en sprites CSS / SASS.36 6? AssetGraph-Sprite)-Transformación de activo para sprites de generación automática basada en el gráfico de dependencia de CSS.481 72? Sprity) - Una imagen modular Generador de sprite con muchas características: admite sprites retina, admite diferentes formatos de salida, genera sprites y archivos de estilo adecuados de un directorio de imágenes, etc.621 76? Fábrica de Sprite): la fábrica de sprite es una biblioteca de rubí que se puede usar para generar sprites CSS. Combina archivos de imagen individuales de un directorio en una sola imagen de sprite unificado y crea una hoja de estilo CSS apropiada para usar en su aplicación web. Cómo eliminar todos estos datos innecesarios y darle un archivo sin degradar la calidad.
83 18? Grunt -Smushit): complemento Grunt para eliminar bytes innecesarios de PNG y JPG usando Yahoo Smushit.33 2? Gulp -Smushit): complemento Gulp para optimizar PNG y JPG usando Yahoo Smushit. Hecho en la cima de Smosh.5594 257? Imagemin) - Minifique las imágenes sin problemas con Node.js.29505 1302? Sharp)-El caso de uso típico para este módulo de nodo.js de alta velocidad es convertir imágenes grandes de muchos formatos en imágenes JPEG, PNG y webp más pequeñas y amigables con la web de diferentes dimensiones.6966 616? GM) - GraphicsMagick e ImageMagick para Node.js.12734 1178? Exexif) - Biblioteca de elixir puro para extraer metadatos TIFF y EXIF de archivos JPEG.1215 175? Grunt-Contrib-Imagemin)-Minify PNG y JPEG Images para Grunt.1905 156? Gulp -Imagemin) - Minify PNG, JPEG, GIF y SVG Imágenes con Imagemin para Gulp.118 16? Grunt -Webp) - Convierta sus imágenes en formato webp.220 18? GULP -WEBP) - Convertir imágenes a WebP para Gulp.479 18? Grunt -ImageOptim) - Haga que ImageOptim, Imagealpha y Jpegmini sean parte de su proceso de construcción automatizado.3461 127? ImageOptim -Cli): automatiza ImageOptim, Imagealpha y Jpegmini para Mac para hacer que la optimización por lotes de las imágenes sea parte de su proceso de construcción automatizado.21 3? TAPNESH -CLI) - TapNesh es una herramienta CLI que optimizará todas sus imágenes en paralelo de manera fácil y eficiente.5495 417? mozjpeg) - codificador JPEG mejorado.1608 120? JPEGOPTIM) - Utilidad para optimizar/comprimir archivos JPEG.3447 329? Zopflipng): un programa de línea de comandos para optimizar las imágenes PNG.835 75? Leanify) - Minifier/optimizador de archivo sin pérdidas.944 24? Optimizt) - Herramienta de optimización de imágenes CLI. Puede comprimir PNG, JPEG, GIF y SVG Los pérdida y sin pérdidas y crear versiones WebP para imágenes ráster. 938 158? LAZAYLOOG) - LAZAYLOCED Imágenes, iFrames, widgets con un JavaScript independiente LAZAYLOCER ~ 1KB7466 448? Lozad.js): cargador perezoso de altamente perfilante, ligero ~ 0.9kb y configurable en JS puro sin dependencias para imágenes receptivas, iframes y más 4156 348? Headjs)- El único script en tu cabeza. para diseño receptivo, detecciones de características y carga de recursos.69 9? Difer.js) - Async todo: haga que la carne de sus páginas se cargue más rápido con este bocado JS.5512 246? InstantClick) - InstantClick realiza los siguientes enlaces en su sitio instantáneamente.509 32? JIT) - Un cargador de complemento JIT (justo a tiempo) para Grunt. El tiempo de carga de Grunt no se ralentiza incluso si hay muchos complementos. 2257 142? Phantomas) - Herramienta de colección de métricas de rendimiento web con sede en PhantomJS y herramienta de monitoreo.25 4? Banco) - Uso de Phantomas (un scrapper de métricas de rendimiento del cliente respaldado por PhantomJS). Compare una página, los resultados de la almacenamiento en MongoDB y muestre los resultados a través del servidor incorporado.104 15? Keepfast) - Herramienta para monitorear los indicadores relacionados con el rendimiento de una página web.284 25? Grunt -Phantomas) - Grunt complemento de envoltura de fantasmas para medir el rendimiento frontend.0 0? Demo)).1641 173? WebPageTest API Wrapper para Node.js) - WebPageTest API Wrapper es un paquete NPM que envuelve la API WebPageTest para Node.js como un módulo y una herramienta de línea de comandos. 542 73? Django-htmlmin)-django-html en un minifuert de HTML para Python con soporte total para HTML 5. Admite Django, Flask y cualquier otro marco web de Python. También proporciona una herramienta de línea de comandos que puede usarse para sitios estáticos o scripts de implementación.4962 576? HTMLMinifier)-HTMLMinifier es un minificador HTML altamente configurable, bien probado y basado en JavaScript, con capacidades similares a la pelusa.424 68? Grunt-Contrib-HTMLmin): un complemento Grunt para minificar HTML que usa htmlminificador.726 57? Gulp -htmlmin): un complemento Gulp para minificar HTML que usa htmlminificador.35 6? Grunt -HTMLCompressor) - complemento Grunt para compresión HTML, utilizando HTMLCOMPRESOR.12 7? HTML_Minifier) - Ruby Wrapper para el minificador KANGAX HTML.35 7? Html_press) - Gema Ruby para comprimir HTML, que elimina toda la basura de espacios en blanco y solo deja HTML.31 6? KOA HTML Minifier) - Middleware que minifica sus respuestas HTML utilizando el minificador HTML. Utiliza las opciones predeterminadas del minificador HTML que están desactivados de forma predeterminada, por lo que debe establecer las opciones, de lo contrario no va a hacer nada.162 18? Minimizar)-Minimizar es un minificador HTML basado en el nodo-HTMLParser, actualmente, el minificador HTML es solo utilizable. La minificación del lado del cliente se agregará en una versión futura.133 86? HTML-minificador): una herramienta simple de línea de comandos de Windows para minificar su HTML, vistas de afeitar y vistas de formularios web 3016 665? Compresor YUI) - Compresor JavaScript que, además de eliminar comentarios y espacios en blanco, ofusca las variables locales utilizando el nombre de variable más pequeño posible. Esta ofuscación es segura, incluso cuando se usa construcciones como 'eval' o 'con' (aunque la compresión no es óptima es esos casos) en comparación con Jmin, el ahorro promedio es de alrededor del 20%.13204 1246? UglifyJS2) - UglifyJS es un kit de herramientas de JavaScript, Minifier, Compressor o Beautifier, escrito en JavaScript.3768 186? CSSO) - Minimizador CSS a diferencia de otros. Además de las técnicas de minificación habituales, puede realizar la optimización estructural de los archivos CSS, lo que resulta en un tamaño de archivo más pequeño en comparación con otros minificadores.76 36? CSSMIN.JS) - CSSMIN.JS es un puerto de JavaScript del minificador CSS de Yuicompressor.812 170? Grunt-Contrib-Concat): un complemento Grunt para concatenar archivos.1481 348? Grunt-Contrib -uglify): un complemento Grunt para concatenar y minificar archivos JavaScript.4178 323? Clean-CSS): un minificador CSS rápido, eficiente y bien probado para Node.js.2811 601? Django -Compressor): comprime JavaScript o CSS vinculado y en línea en un solo archivo en caché.1520 371? Django-Pipeline)-Pipeline es una biblioteca de empaque de activos para Django, que proporciona concatenación y compresión de CSS y JavaScript, soporte de plantilla de JavaScript incorporado y imagen de fui de datos opcional e incrustación de fuentes.750 150? JSHRINK) - JSHRINK es una clase PHP que minifica JavaScript para que pueda entregarse al cliente más rápido.1052 81? CSSSHRINK) - Porque CSS es OSPON el camino crítico para la representación de páginas. ¡Debe ser pequeño! ¡Si no!28 4? Grunt -Cssssshrink) - Esto es solo un envoltorio gruñido para el encogimiento de CSS.22 0? Gulp -CSSSHRink) - Reduce los archivos CSS usando CSSSHRINK para Gulp.6 1? Bonito) - Código CSS Uglify (Strip Spaces) o Prettify (agregue espacios consistentes).795 138? Grunt-Contrib-Cssmin)-Minificador CSS para Grunt.3825 174? Grunt -UNCSS): una tarea de gruñidos para eliminar CSS no utilizada de sus proyectos.938 40? Gulp -UNCSS): una tarea de trago para eliminar CSS no utilizada de sus proyectos. 1620 64? UCSS) - UCSS está hecho para sitios de rastreo (grandes) para encontrar selectores CSS no utilizados, pero no eliminar CSS no utilizados.343 21? Httpinvoke): una biblioteca de clientes HTTP sin dependencias para navegadores y node.js con una API basada en la devolución de llamada basada o nodo.js para avanzar, texto y carga de archivos binarios, cuerpo de respuesta parcial, encabezados de solicitud y respuesta, código de estado.10052 372? Crítico) - Extracto y CSS de ruta crítica en línea en páginas HTML (alfa).12 1? Csscolormin) - utilidad que minifica los colores CSS, ejemplo: min ("blanco"); // minifica a "#fff".17585 1731? LazySizes) - Cargador perezoso de alto rendimiento para imágenes (receptivas y normales), iframes y scripts, que detectan cualquier cambio de visibilidad activado a través de la interacción del usuario, CSS o JavaScript sin configuración.1631 45? TMI) - TMI (demasiadas imágenes) - Descubra el peso de su imagen en la web. 21150 1390? SVGO) - SVGO es una herramienta basada en NodeJS para optimizar los archivos de gráficos vectoriales SVG.433 40? Grunt -Svgmin) - Minify SVG usando SVGO para Grunt.1634 93? SVG Cleaner) - SVG Cleaner podría ayudarlo a limpiar sus archivos SVG de datos innecesarios. Tiene muchas opciones para la limpieza y la optimización, funciona en modo por lotes y proporciona un procesamiento roscado en procesadores multinúcleo. 431 201? Polymer Bundler)-Polymer-Bundler es una biblioteca para los activos del proyecto de embalaje para la producción para minimizar los viajes redondos de red.100 25? Gulp -vulcanize) - Concatene un conjunto de componentes web en un archivo que use Vulcanize. 992 156? HTTPERF) - HTTPERF es una herramienta para medir el rendimiento del servidor web. Proporciona una instalación flexible para generar varias cargas de trabajo HTTP y para medir el rendimiento del servidor.179 23? Autoperf) - Autoperf es un controlador de ruby para HTTPERF, diseñado para ayudarlo a automatizar la carga y las pruebas de rendimiento de cualquier aplicación web, para un solo punto final o mediante la repetición de registro.13 4? Httperf.rb) - interfaz rubí simple para httperf, escrita en Ruby.5 0? Php -httperf) - puerto php de httperf.rb.25 2? Httperf.js) - JS Puerto de httperf.rb.11 8? Httperf.py) - Porto Python de httperf.rb.4 0? Gohttperf) - Go Port of httperf.rb.38207 2955? WRK): una herramienta de evaluación comparativa HTTP (con secuencias de comandos LUA opcionales para la generación de solicitudes, procesamiento de respuesta e informes personalizados)6455 631? Beeswithmachineguns): una utilidad para armarse (crear) muchas abejas (instancias microc2) para atacar (prueba de carga) objetivos (aplicaciones web).244 22? WebP Detect) - WebP con negociación de aceptación.will-change CSS property which allows an author to declare ahead-of-time what properties are likely to change in the future, so the UA can set up the appropriate optimizations some time before they're needed. This way, when the actual change happens, the page updates in a snappy manner.958 25? iamakulov/awesome-webpack-perf) - A curated list of webpack tools for web performance32197 3561? bayandin/awesome-awesomeness).338979 28117? sindresorhus/awesome).823 61? imteekay/web-performance-research) - Research in Web PerformanceFor contributing, open an issue and/or a pull request.
8403 563? davidsonfellipe/awesome-wpo)
