fucking awesome wpo
1.0.0
Bem -vindo à lista com curadoria de recursos de otimização de desempenho da Web. Este repositório tem como objetivo reunir as melhores ferramentas, artigos, blogs, livros e palestras relacionados à otimização do desempenho do site. Seja você um desenvolvedor, designer ou entusiasta do desempenho, encontrará conteúdo valioso aqui para sobrecarregar seus projetos da Web.
WPO / artigos incríveis
? WPO / blogs incríveis
WPO / livros incríveis
WPO / documentos incríveis
? WPO / eventos incríveis
? WPO / conversa incrível
Aqui está uma rápida visão geral das categorias abordadas nesta coleção:
Vá para artigos.md.
Vá para blogs.
Melhores livros sobre WPO
Porque a comunidade é importante!
Eles são categorizados em conteúdo/meetups.md.
Eles são categorizados em conteúdo/conversas.md.
872 100? Confessar) - usa fantasmas para analisar sem cabeça páginas da web e gerar manifestos.28533 9406? Lighthouse) - Ferramenta de métricas de auditoria e desempenho para aplicativos da Web progressivos.2205 382? YSLOW) - YSLOW analisa páginas da web e sugere maneiras de melhorar seu desempenho com base em um conjunto de regras para páginas da Web de alto desempenho.35 3? Grunt -webpageTest) - Grunt plugin para medição contínua do WebPagEtest. (Demonstração)91 15? GRUNT -SYSLOW) - Tarefa grunhida para testar o desempenho da página usando o Phantomjs, um navegador sem cabeça do webkit.856 37? Grunt -Perfbudget) - Uma tarefa Grunt.js para aplicar um orçamento de desempenho? mais sobre orçamentos de desempenho).2641 200? Estrutura de rastreamento da web) - a estrutura de rastreamento da web é um conjunto de bibliotecas, ferramentas e visualizadores para o rastreamento e investigação de aplicativos da Web complexos2469 280? Yandex.Tank) - Uma ferramenta de teste de carga de código aberto extensível para usuários avançados do Linux, o que é especialmente bom como parte de um conjunto automatizado de testes de carga.1865 23? Speed Racer) - Colete métricas de desempenho para sua biblioteca/aplicativo usando o Chrome Headless.9 6? Node -syslowjs) - yslow.js no node.js é um invólucro simples do Node.js para executar programaticamente o Phantomjs yslow.js.3105 126? Psi) - PagesPeed Insights para node.js - com relatórios.4474 180? Bundlesize) - Mantenha o tamanho do seu pacote sob controle.3846 101? fonte-map-explorer)-Analise e depure o uso de espaço do pacote por meio de mapas de origem.12605 489? Analisador de pacote webpack) - plug -in Webpack e utilitário CLI que representa o conteúdo do pacote como um TreeMap Zoomable Interactive conveniente.4 1? LASSO -Analyzer) - Analise e visualize pacotes de projetos criados por Lasso.1413 108? Plug -in de webpack de compactação) - Prepare versões compactadas de ativos para atendê -los com codificação de conteúdo.583 20? Bundlestats) - Gere o relatório do pacote (tamanho do pacote, ativos, módulos, pacotes) e compare os resultados entre diferentes construções 573 21? CSS -PERF) - maneira completamente não científica de testar o desempenho do CSS. A maioria desses testes girará em torno de metodologias e técnicas para determinar a arquitetura CSS eficaz. Em outras palavras, quero saber o que funciona melhor, dada uma comparação específica das estratégias do CSS. Um conjunto de ferramentas para criar casos de teste e comparar diferentes implementações no JavaScript.
Temporarily out, follow this issue for updates: https://github.com/jsperf/jsperf.com/issues/537166 15? JSLITMUS) - JSLITMUS é uma ferramenta leve para criar testes de referência de JavaScript ad -hoc.563 37? Matcha) - Matcha permite projetar experimentos que medirão o desempenho do seu código. Recomenda -se que cada banco se concentre em um ponto de impacto específico em seu aplicativo.1496 113? Timing.js) - timing.js é um pequeno conjunto de ajudantes para trabalhar com a API de tempo de navegação para identificar onde seu aplicativo está gastando seu tempo. Útil como um script independente, Snippet de Devtools ou Bookmarklet.8780 1201? STATS.JS) - Esta classe fornece uma caixa de informações simples que ajudará você a monitorar o desempenho do seu código.1 0? Perftests) - Testes de desempenho dos modelos de herança de JavaScript.2094 105? Memory -stats.js) - Monitor mínimo para o tamanho da pilha JS via memória de desempenho. 53 4? PHPENCH) - O PHPENCH cria uma saída gráfica para um benchmark PHP. Plote o tempo de execução de qualquer função em tempo real com o GNUPLOT e crie uma imagem a partir do resultado.13 1? PHP -BANCE) - Bloqueios de código de referência e perfil PHP enquanto medem a pegada de desempenho. 3790 126? Perfmap) - Um Bookmarklet para criar um mapa de calor de desempenho de front -end de recursos carregados no navegador usando a API de tempo de recurso.559 52? DOM MONSTER)-Um livro de contas de navegador cruzado que analisa os recursos DOM e outros recursos da página em que você está, e fornecerá a você a sua fatura de saúde.1143 86? Performance -BookMarklet) - Analise a página atual através da API de tempo de recurso, API de tempo de navegação e tempo de usuário - uma espécie de Light Live WebPagEtest. Como ? Extensão do Chrome e? Adicionamento do Firefox sob o nome de desempenho-analisador. Uma rede de entrega de conteúdo ou rede de distribuição de conteúdo (CDN) é um grande sistema distribuído de servidores implantados em vários data centers na Internet. O objetivo de uma CDN é servir conteúdo para usuários finais com alta disponibilidade e alto desempenho. Veja uma grande lista de CDN na Wikipedia.
5705 2060? JSDELIVR) - Semelhante às bibliotecas hospedadas do Google, o JSDELIVR é um CDN de código aberto que permite que os desenvolvedores hospedem seus próprios projetos e qualquer pessoa se vincule aos nossos arquivos hospedados em seus sites.Para encontrar mais informações úteis para você fazer a escolha certa entre CDNs pagos, visite o CDNPlanet.
82 6? Gulp-Google-CDN)-Substitui referências de script pelo Google CDN. 131 7? Calorias do navegador) - A maneira mais fácil de medir seu orçamento de desempenho. 35 2? ATBUILD) - Ferramenta de geração de código JavaScript que permite escrever JavaScript que produz JavaScript. Bom para desenrolar loops e escrever bibliotecas que compilam o tempo de execução2550 169? Cola) - cola é uma ferramenta simples de linha de comando para gerar sprites:19 3? Pitomba -Spriter) - Spriter é um gerador de sprite dinâmico simples e flexível para CSS, usando Python. Ele pode processar o CSS síncrono e assíncrono, pois fornece classes a serem usadas no seu código Python e também um observador que ouve seu sistema de arquivos e altera o CSS e o sprite assim que uma estática for alterada.1133 92? Grunt -spriteSmith) - Grunt Tarefa para converter um conjunto de imagens em uma folha de sprite e variáveis CSS correspondentes.15 1? Gulp -sprite) - Tarefa Gulp para criar um sprite de imagem e as folhas de estilo correspondentes para Gulp.334 45? Gulp-SVG-Sprite)-Tarefa Gulp para criar sprites SVG.2 1? SVGTOCSS) - Otimiza e renderiza arquivos SVG em sprites CSS / SASS.36 6? AssetGraph-sprite)-Transformação AssetGraph para sprites geradores automaticamente com base no gráfico de dependência do CSS.481 72? SPRITY) - Um gerador de sprite de imagem modular com muitos recursos: suporta sprites de retina, suporta diferentes formatos de saída, gera sprites e arquivos de estilo adequados a partir de um diretório de imagens, etc ...621 76? Sprite Factory) - A Sprite Factory é uma biblioteca de rubi que pode ser usada para gerar sprites CSS. Ele combina arquivos de imagem individuais de um diretório em uma única imagem sprite unificada e cria uma folha de estilo CSS apropriada para uso no seu aplicativo da Web. Como remover todos esses dados desnecessários e fornecer um arquivo sem qualidade degradante.
83 18? Grunt -smushit) - Grunt plug -in para remover bytes desnecessários de PNG e JPG usando o Yahoo Smushit.33 2? Gulp -smushit) - plug -in Gulp para otimizar o PNG e o JPG usando o Yahoo Smushit. Feito em cima de Smosh.5594 257? ImageMin) - Minify imagens sem problemas com node.js.29505 1302? Sharp)-O estojo de uso típico para este módulo Node.js de alta velocidade é converter imagens grandes de muitos formatos em imagens menores e amigáveis para JPEG, PNG e Webp de dimensões variadas.6966 616? GM) - GraphicsMagick e ImageMagick para Node.js.12734 1178? Exexif) - Biblioteca Pure Elixir para extrair metadados TIFF e EXIF dos arquivos JPEG.1215 175? Grunt-Contrib-Imagemin)-Minify PNG e JPEG imagens para Grunt.1905 156? Gulp -imagoMin) - Minify PNG, JPEG, GIF e SVG Imagens com Imagemin para Gulp.118 16? Grunt -webp) - Converta suas imagens em formato Webp.220 18? Gulp -webp) - Converta imagens em webp para gulp.479 18? Grunt -ImageOptim) - Faça ImageOtim, ImageAlpha e JPEGMini parte do seu processo de construção automatizada.3461 127? ImageOptim -cli) - automatiza o ImageOptim, ImageAlpha e JPEGMini para Mac para fazer otimização em lote de imagens parte do seu processo de construção automatizado.21 3? TAPNESH -CLI) - Tapnesh é uma ferramenta da CLI que otimizará todas as suas imagens em paralelo com facilidade e eficiência!5495 417? mozjpeg) - codificador jpeg aprimorado.1608 120? JpegoPtim) - Utilitário para otimizar/compactar arquivos jpeg.3447 329? Zopflipng) - Um programa de linha de comando para otimizar imagens PNG.835 75? Leanify) - Minificador/otimizador de arquivo sem perdas leves.944 24? Optimizt) - Ferramenta de otimização de imagem da CLI. Ele pode compactar PNG, JPEG, GIF e SVG com perda e sem perdas e criar versões WebP para imagens rasters. 938 158? LazyLoad) - Imagens Lazyload, iframes, widgets com um JavaScript Standalone LazyLoader ~ 1kb7466 448? lozad.js) - altamente performante, leve ~ 0,9kb e carregador preguiçoso configurável em js puros, sem dependências para imagens responsivas, iframes e mais 4156 348? Headjs)- O único script em sua cabeça. Para design responsivo, detecções de recursos e carregamento de recursos.69 9? Defer.js) - ASYNC TUDO: Faça a carne das suas páginas carregar mais rápido com este pedaço JS.5512 246? InstantClick) - InstantClick faz os seguintes links no instante do seu site.509 32? JIT) - Um carregador de plug -in JIT (Just In Time) para Grunt. O tempo de carregamento do grunhido não diminui a velocidade, mesmo que haja muitos plugins. 2257 142? Fantasmas) - Coletor de métricas de desempenho da web baseado em PhantomJS e ferramenta de monitoramento.25 4? Bancada) - Usando fantasmas (um Scrapper de Métricas de Desempenho do Cliente apoiado por Phantomjs). Realize uma página, o armazenamento resulta em MongoDB e exiba resultados através do servidor interno.104 15? KeepFast) - Ferramenta para monitorar indicadores relacionados ao desempenho de uma página da web.284 25? Grunt -Phantomas) - Grunt plug -in que envolve fantasmas para medir o desempenho do front -end.0 0? Demo)).1641 173? WebPageTest API Wrapper para Node.js) - WebPageTest API Wrapper é um pacote NPM que envolve a API WebPageTest para Node.js como um módulo e uma ferramenta de linha de comando. 542 73? Django-htmlmin)-django-html em um minifiador html para python com suporte total para html 5. Ele suporta Django, Flask e qualquer outra estrutura da web do Python. Ele também fornece uma ferramenta de linha de comando que pode ser usada para sites estáticos ou scripts de implantação.4962 576? HtmlMinifier)-htmlminifier é um minifiador HTML altamente configurável, bem testado e baseado em JavaScript, com recursos do tipo fiet.424 68? Grunt-Contrib-htmlMin)-Um plug-in Grunt para minificar o HTML que usa htmlMinifier.726 57? Gulp -htmlmin) - um plug -in Gulp para minificar o HTML que usa htmlMinifier.35 6? GRUNT -HTMLCOMPRESSOR) - Grunt Pluntin para compactação HTML, usando HTMLCOMPRESSOR.12 7? Html_minifier) - invólucro rubi para kangax html -minifier.35 7? Html_press) - gem ruby para compactar html, que remove todo o lixo de espaço em branco e deixa apenas html.31 6? KOA HTML Minifier) - Middleware que minifica suas respostas HTML usando o minificador HTML. Ele usa as opções padrão do HTML-Minifier, todas desligadas por padrão, para que você deva definir as opções, caso contrário, não fará nada.162 18? Minimize)-Minimize é um minificador HTML baseado no node-htmlparser, atualmente, o minifiador html é apenas utilizável ao lado do servidor. A minificação do lado do cliente será adicionada em uma versão futura.133 86? HTML-Minifier)-Uma ferramenta simples de linha de comando do Windows para minimizar seu HTML, visualizações de barbear e visualizações de formulários da Web 3016 665? Compressor yui) - compressor JavaScript que, além de remover comentários e espaços brancos, ofusca as variáveis locais usando o menor nome de variável possível. Essa ofuscação é segura, mesmo quando o uso de construções como 'avaliar' ou 'com' (embora a compactação não seja ideal seja esses casos) em comparação com o JSMIN, a economia média é de cerca de 20%.13204 1246? UglifyJS2) - O UGLIFYJS é um analisador JavaScript, minifier, compressor ou beleza de ferramentas, escrito em JavaScript.3768 186? CSSO) - CSS Minimizer, diferente de outros. Além das técnicas de minificação usuais, ele pode executar a otimização estrutural de arquivos CSS, resultando em menor tamanho de arquivo em comparação com outros minificadores.76 36? Cssmin.js) - cssmin.js é uma porta JavaScript do minificador CSS do Yuicompressor.812 170? Grunt-Contrib-Concat)-Um plug-in Grunt para concatenar arquivos.1481 348? Grunt-Contrib-uplify)-Um plug-in Grunt para concatenar e minimizar arquivos JavaScript.4178 323? Clean-CSS)-Um minificador CSS rápido, eficiente e bem testado para Node.js.2811 601? Django -Compressor) - Compressa JavaScript ou CSS vinculados e embutidos em um único arquivo em cache.1520 371? Django-PipeLine)-O pipeline é uma biblioteca de embalagens de ativos para Django, fornecendo concatenação e compactação de JavaScript CSS e JavaScript, suporte de modelo JavaScript embutido e imagem opcional de imagem e incorporação de dados.750 150? JSHRINK) - O JSHRink é uma classe PHP que minifica o JavaScript para que possa ser entregue ao cliente mais rápido.1052 81? Csshrink) - porque o CSS é o caminho do caminho crítico para a renderização de páginas. Deve ser pequeno! Ou então!28 4? Grunt -CssShrink) - Este é apenas um invólucro grunhido para o CSS encolhido.22 0? Gulp -cssshrink) - encolhe os arquivos CSS usando o csshrink para gole.6 1? PrettyUGly) - Uglify (SPORT SPACES) ou Prettify (Adicione Código CSS de Espaços Consistentes).795 138? Grunt-Contrib-Cssmin)-Minificador CSS para Grunt.3825 174? GRUNT -UNCSS) - Uma tarefa grunhida para remover o CSS não utilizado de seus projetos.938 40? Gulp -uncss) - Uma tarefa Gulp para remover CSS não utilizados de seus projetos. 1620 64? UCSS) - O UCSS é feito para rastrear sites (grandes) para encontrar seletores CSS não utilizados, mas não removem o CSS não utilizado.343 21? Httpinvoke)-Uma biblioteca de clientes HTTP sem dependências para navegadores e node.js com uma API baseada em promessa ou node.js baseada em promessa, baseada em retorno de retorno de retorno para progresso, texto e upload e download de arquivos binários, órgão de resposta parcial, cabeçalhos de solicitação e resposta, código de status.10052 372? Crítico) - Extrato e CSS de caminho crítico em linha em páginas HTML (alfa).12 1? CSscolormin) - utilidade que minifica as cores do CSS, exemplo: min ("branco"); // minifica para "#fff".17585 1731? Lazysizes) - Carregador preguiçoso de alto desempenho para imagens (responsivas e normais), iframes e scripts, que detectam quaisquer alterações de visibilidade desencadeadas pela interação do usuário, CSS ou JavaScript sem configuração.1631 45? TMI) - TMI (muitas imagens) - Descubra o peso da sua imagem na web. 21150 1390? SVGO) - O SVGO é uma ferramenta baseada em NodeJS para otimizar arquivos gráficos de vetor SVG.433 40? Grunt -svgmin) - Minify SVG usando SVGO para Grunt.1634 93? Limpador SVG) - O limpador SVG pode ajudá -lo a limpar seus arquivos SVG a partir de dados desnecessários. Possui muitas opções para limpeza e otimização, funciona no modo em lote e fornece processamento encadeado em processadores multicore. 431 201? POLYMER MUNDLER)-Polymer-Bundler é uma biblioteca para embalagens de ativos do projeto para a produção para minimizar as viagens de volta da rede.100 25? Gulp -vulcanize) - Concatenar um conjunto de componentes da Web em um arquivo que usa vulcanizar. 992 156? Httperf) - httperf é uma ferramenta para medir o desempenho do servidor da web. Ele fornece uma instalação flexível para gerar várias cargas de trabalho HTTP e medir o desempenho do servidor.179 23? Autoperf) - O Autoperf é um driver Ruby para HTTPERF, projetado para ajudá -lo a automatizar testes de carga e desempenho de qualquer aplicativo da Web - para um único terminal ou através de reprodução de log.13 4? Httperf.rb) - interface rubi simples para httperf, escrita em rubi.5 0? Php -httperf) - porta php de httperf.rb.25 2? Httperf.js) - JS Port of httperf.rb.11 8? Httperf.py) - porta python de httperf.rb.4 0? Gohttperf) - vá porta de httperf.rb.38207 2955? WRK) - Uma ferramenta de benchmarking HTTP (com scripts opcionais da Lua para geração de solicitações, processamento de respostas e relatórios personalizados)6455 631? ABELHASWITHMACHINEGUNS) - Um utilitário para armar (criar) muitas abelhas (instâncias micro EC2) para atacar os objetivos (teste de carga) (aplicativos da Web).244 22? Webp -Detect) - WebP com a negociação aceita.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)
