fucking awesome wpo
1.0.0
선별 된 웹 성능 최적화 리소스 목록에 오신 것을 환영합니다. 이 저장소는 웹 사이트 성능 최적화와 관련된 최고의 도구, 기사, 블로그, 서적 및 대화를 수집하는 것을 목표로합니다. 개발자, 디자이너 또는 공연 애호가이든, 웹 프로젝트를 탁월 할 수있는 귀중한 컨텐츠를 찾을 수 있습니다.
멋진 WPO / 기사
? 멋진 WPO / 블로그
멋진 WPO / 책
멋진 WPO / 문서
? 멋진 WPO / 이벤트
? 멋진 WPO / 대화
다음은이 컬렉션에서 다루는 카테고리에 대한 빠른 개요입니다.
articles.md로 이동하십시오.
블로그로 이동하십시오.
WPO에 관한 최고의 책
커뮤니티가 중요하기 때문에!
그들은 Content/MeetUps.md로 분류됩니다.
그들은 Content/Talks.md로 분류됩니다.
872 100? 고백) - phantomjs를 사용하여 웹 페이지를 헤드리스로 분석하고 매니페스트를 생성합니다.28533 9406? Lighthouse) - 진보적 인 웹 애플리케이션을위한 감사 및 성능 메트릭 도구.2205 382? YSLOW) - YSLOW는 웹 페이지를 분석하고 고성능 웹 페이지에 대한 일련의 규칙을 기반으로 성능을 향상시키는 방법을 제안합니다.35 3? Grunt -webpagetest) - WebPagetest의 지속적인 측정을위한 Grunt 플러그인. (데모)91 15? Grunt -yslow) - 헤드리스 웹 키 브라우저 인 Phantomjs를 사용하여 페이지 성능을 테스트하기위한 Grunt 작업.856 37? Grunt -perfbudget) - 성과 예산을 시행하기위한 grunt.js 작업? 성과 예산에 대한 자세한 내용).2641 200? 웹 트레이싱 프레임 워크) - 웹 트레이싱 프레임 워크는 복잡한 웹 애플리케이션의 추적 및 조사를위한 라이브러리, 도구 및 시각화 세트입니다.2469 280? YANDEX.TANK) - 자동화 된로드 테스트 스위트의 일부로 우수한 고급 Linux 사용자를위한 확장 가능한 오픈 소스로드 테스트 도구입니다.1865 23? Speed Racer) - Chrome Headless를 사용하여 라이브러리/애플리케이션에 대한 성능 지표를 수집하십시오.9 6? node -yslowjs) - node.js의 yslow.js는 프로그래밍 방식으로 phantomjs yslow.js를 실행하기위한 간단한 node.js 래퍼입니다.3105 126? psi) - Node.js에 대한 Pagespeed Insights- 보고서.4474 180? 번들 사이즈) - 번들 크기를 확인하십시오.3846 101? 소스 -MAP-explorer)-소스 맵을 통한 번들 공간 사용을 분석하고 디버그합니다.12605 489? Webpack Bundle Analyzer) - 번들 컨텐츠를 편리한 대화 형 확대 가능 트리 맵으로 나타내는 Webpack 플러그인 및 CLI 유틸리티.4 1? lasso -analyzer) - Lasso가 만든 프로젝트 번들을 분석하고 시각화합니다.1413 108? 압축 웹 팩 플러그인) - 압축 된 자산 버전을 준비하여 컨텐츠 인코딩을 제공합니다.583 20? Bundlestats) - 번들 보고서 (번들 크기, 자산, 모듈, 패키지) 생성 및 다른 빌드 간의 결과 비교 573 21? CSS -PERF) - CSS 성능을 테스트하는 완전히 비과학적인 방법. 이러한 테스트의 대부분은 효과적인 CSS 아키텍처를 결정하기위한 방법론 및 기술을 중심으로 진행됩니다. 다른 방법으로, 나는 CSS 전략을 특별히 비교할 때 가장 잘 작동하는 것을 알고 싶습니다. 테스트 케이스를 생성하고 JavaScript의 다양한 구현을 비교하기위한 일련의 도구.
Temporarily out, follow this issue for updates: https://github.com/jsperf/jsperf.com/issues/537166 15? JSLITMUS) -JSLITMUS는 임시 JavaScript 벤치 마크 테스트를 만드는 가벼운 도구입니다.563 37? matcha) - matcha를 사용하면 코드의 성능을 측정하는 실험을 설계 할 수 있습니다. 각 벤치는 응용 프로그램의 특정 영향 지점에 초점을 맞추는 것이 좋습니다.1496 113? Timing.js) - Timing.js는 내비게이션 타이밍 API와 협력하여 응용 프로그램이 시간을 보내는 위치를 식별하기위한 작은 도우미 세트입니다. 독립형 스크립트, DevTools 스 니펫 또는 북마크로 유용합니다.8780 1201? Stats.js) -이 클래스는 코드 성능을 모니터링하는 데 도움이되는 간단한 정보 상자를 제공합니다.1 0? Perftest) - JavaScript 상속 모델의 성능 테스트.2094 105? Memory -Stats.js) - 성능 메모리를 통한 JS 힙 크기에 대한 최소 모니터. 53 4? PHPENCH) -PHPENCH는 PHP 벤치 마크에 대한 그래픽 출력을 만듭니다. GNUPlot으로 실시간으로 모든 기능의 런타임을 플로팅하고 결과에서 이미지를 만듭니다.13 1? PHP -Bench) - 성능 발자국을 측정하는 동안 벤치 마크 및 프로파일 PHP 코드 블록. 3790 126? PerfMap) - 자원 타이밍 API를 사용하여 브라우저에로드 된 리소스의 프론트 엔드 성능 열매를 만드는 북마크.559 52? DOM MONSTER)-귀하가 진행중인 페이지의 DOM 및 기타 기능을 분석하고 건강 청구서를 제공하는 크로스 플랫폼, 크로스 브라우저 북마크.1143 86? Performance -BookMarklet) - 리소스 타이밍 API, 내비게이션 타이밍 API 및 사용자 타이밍을 통해 현재 페이지를 분석합니다. 처럼 ? 크롬 확장 및? 이름 Performance-Analyser의 Firefox 애드온. CDN (Content Delivery Network 또는 Content Distribution Network)은 인터넷 전역의 여러 데이터 센터에 배포 된 대규모 분산 서버 시스템입니다. CDN의 목표는 고 가용성과 고성능을 가진 최종 사용자에게 컨텐츠를 제공하는 것입니다. Wikipedia의 큰 CDN 목록을 참조하십시오.
5705 2060? JSDELIVR) - Google 호스팅 라이브러리와 유사하게 JSDELIVR은 개발자가 자신의 프로젝트를 호스팅하고 누구나 자신의 사이트에서 호스팅 된 파일에 링크 할 수있는 오픈 소스 CDN입니다.유료 CDN 중 올바른 선택을 할 수있는 유용한 자세한 정보를 찾으려면 cdnplanet을 방문하십시오.
82 6? Gulp-Google-CDN)-스크립트 참조를 Google CDN 참조로 대체합니다. 131 7? 브라우저 칼로리) - 성능 예산을 측정하는 가장 쉬운 방법. 35 2? Atbuild) - JavaScript를 출력하는 JavaScript를 작성할 수있는 JavaScript Code Generation Tool. 런타임을 컴파일하는 루프를 풀고 라이브러리를 작성하는 데 좋습니다.2550 169? 접착제) - 접착제는 스프라이트를 생성하는 간단한 명령 줄 도구입니다.19 3? Pitomba -Spriter) - Spriter는 Python을 사용하여 CSS 용 간단하고 유연한 동적 스프라이트 생성기입니다. Python 코드에 사용할 클래스를 제공하고 파일 시스템을 듣고 정적이 변경 되 자마자 CSS 및 Sprite를 변경하는 감시자로 CSS 동기 및 비동기식을 처리 할 수 있습니다.1133 92? Grunt -Spritesmith) - 이미지 세트를 스프라이트 시트 및 해당 CSS 변수로 변환하기위한 Grunt 작업.15 1? Gulp -Sprite) - Gulp의 이미지 스프라이트 및 해당 스타일 시트를 만드는 Gulp 작업.334 45? Gulp-SVG-Sprites)-SVG 스프라이트를 만드는 GULP 작업.2 1? SVGTOCSS) - CSS / SASS 스프라이트에서 SVG 파일을 최적화하고 렌더링합니다.36 6? AssetGraph-Sprite)-CSS 종속성 그래프를 기반으로 자동 생성 스프라이트에 대한 AssetGraph 변환.481 72? Sprity) - 많은 기능을 갖춘 모듈 식 이미지 스프라이트 생성기 : Retina Sprites를 지원하고, 다양한 출력 형식을 지원하고, 스프라이트 및 이미지 디렉토리에서 적절한 스타일 파일을 생성하는 등 ...621 76? Sprite Factory) - Sprite Factory는 CSS 스프라이트를 생성하는 데 사용할 수있는 루비 라이브러리입니다. 디렉토리의 개별 이미지 파일을 단일 Unified Sprite 이미지로 결합하고 웹 애플리케이션에 사용할 적절한 CSS 스타일 시트를 만듭니다. 이 모든 불필요한 데이터를 제거하고 품질을 저하시키지 않고 파일을 제공하는 방법.
83 18? Grunt -Smushit) - Ghunt 플러그인은 Yahoo Smushit을 사용하여 PNG 및 JPG의 불필요한 바이트를 제거합니다.33 2? Gulp -Smushit) - Yahoo Smushit을 사용하여 PNG 및 JPG를 최적화하는 Gulp 플러그인. Smosh 위에 만들어졌습니다.5594 257? Imagemin) - Node.js를 사용하여 이미지를 매끄럽게 조정하십시오.29505 1302? Sharp)-이 고속 Node.js 모듈의 일반적인 사용 사례는 다양한 형식의 대형 이미지를 더 작고 웹 친화적 인 JPEG, PNG 및 다양한 차원의 웹 이미지로 변환하는 것입니다.6966 616? GM) - node.js의 GraphicsMagick 및 Imagemagick12734 1178? exexif) - jpeg 파일에서 tiff 및 exif 메타 데이터를 추출하는 순수한 elixir 라이브러리.1215 175? Grunt-Contrib-Imagemin)-Grunt의 PNG 및 JPEG 이미지를 최소화하십시오.1905 156? Gulp -Imagemin) - Gulp를위한 Imagemin으로 PNG, JPEG, GIF 및 SVG 이미지를 최소화합니다.118 16? Grunt -webp) - 이미지를 Webp 형식으로 변환합니다.220 18? Gulp -Webp) - Gulp 용 Webp로 이미지를 변환합니다.479 18? Grunt -Imageoptim) - 자동화 된 빌드 프로세스의 ImageOptim, ImageAlpha 및 Jpegmini를 일부로 만듭니다.3461 127? ImageOptim -Cli) - Mac의 ImageOptim, ImageAlpha 및 Jpegmini를 자동화하여 자동화 된 빌드 프로세스의 이미지를 배치 최적화합니다.21 3? Tapnesh -Cli) - Tapnesh는 모든 이미지를 쉽고 효율적으로 병렬로 최적화하는 CLI 도구입니다!5495 417? Mozjpeg) - 개선 된 JPEG 인코더.1608 120? JPEGOPTIM) - JPEG 파일을 최적화/압축하는 유틸리티.3447 329? ZOPFLIPNG) - PNG 이미지를 최적화하기위한 명령 줄 프로그램.835 75? Leanify) - 가벼운 무손실 파일 미니 파이어/최적화기.944 24? Optimizt) - CLI 이미지 최적화 도구. PNG, JPEG, GIF 및 SVG LOSSY 및 LOSSLESS를 압축하고 래스터 이미지를위한 웹p 버전을 만들 수 있습니다. 938 158? Lazyload) - Lazyload 이미지, iframes, 독립형 JavaScript Lazyloader가있는 위젯 ~ 1KB7466 448? lozad.js) - 반응 형 이미지, iframes 등에 대한 종속성이없는 순수한 JS의 고도 4156 348? Headjs)- 머리에 유일한 대본. 반응 형 디자인, 기능 탐지 및 리소스 로딩.69 9? defer.js) - 비동기 모든 것 :이 js morsel을 통해 페이지의 고기를 더 빨리로드하십시오.5512 246? InstantClick) - InstantClick은 사이트에서 다음 링크를 만듭니다.509 32? JIT) - grunt 용 JIT (Just Intment) 플러그인 로더. 플러그인이 많더라도 그 런트의로드 시간은 속도가 느려지지 않습니다. 2257 142? Phantomas) - Phantomjs 기반 웹 성능 지표 수집가 및 모니터링 도구.25 4? 벤치) - 환전 (phantomjs 지원 클라이언트 성능 메트릭 스크랩퍼) 사용. 페이지를 벤치마킹하고 MongoDB에서 결과를 저장하고 내장 서버를 통해 결과를 표시합니다.104 15? Keepfast) - 웹 페이지의 성능과 관련된 표시기를 모니터링하는 도구.284 25? Grunt -Phantomas) - Grunt 플러그인 포장 유선종을위한 프론트 엔드 성능을 측정합니다.0 0? 데모)).1641 173? node.js의 webpagetest API 래퍼) - WebPagetest API 래퍼는 node.js 용 webPagetest API를 모듈 및 명령 줄 도구로 랩핑하는 NPM 패키지입니다. 542 73? django-htmlmin) -Html 5를 완전히 지원하는 Python 용 HTML 미니퍼의 django-html. Django, Flask 및 기타 Python 웹 프레임 워크를 지원합니다. 또한 정적 사이트 또는 배포 스크립트에 사용할 수있는 명령 줄 도구를 제공합니다.4962 576? HTMLMINIFIER)-HTMLMINIFIER는 보풀과 같은 기능을 갖춘 고도로 구성 가능하고 잘 테스트 한 JavaScript 기반 HTML 미니퍼입니다.424 68? Grunt-Contrib-htmlmin)-Htmlminifier를 사용하는 HTML을 조정하는 Grunt 플러그인.726 57? gulp -htmlmin) - htmlminifier를 사용하는 html을 조정하는 Gulp 플러그인.35 6? Grunt -HTMLCOPPRESSOR) - HTMLCOPPRESSOR를 사용하여 HTML 압축 용 Grunt 플러그인.12 7? HTML_MINIFIER) - Kangax HTML -MINIFIER 용 루비 래퍼.35 7? HTML_PRESS) - 모든 공백 정크를 제거하고 HTML 만 남기는 HTML을 압축하기위한 Ruby Gem.31 6? KOA HTML 미니 파이어) - HTML -MINIFIER를 사용하여 HTML 응답을 최소화하는 미들웨어. HTML-MINIFIER의 기본 옵션을 기본적으로 꺼지는 옵션을 사용하므로 옵션을 설정해야합니다. 그렇지 않으면 아무것도하지 않을 것입니다.162 18? 최소화)-최소화는 Node-HTMLPARSER를 기반으로 한 HTML 미니 파이어입니다. 향후 릴리스에 클라이언트 측 미니 화가 추가됩니다.133 86? HTML-MINIFIER)-HTML, 면도기보기 및 웹 양식보기를 조정하는 간단한 Windows 명령 줄 도구 3016 665? Yui Compressor) - 주석 및 흰색 공간을 제거하는 것 외에도 가능한 작은 변수 이름을 사용하여 로컬 변수를 난독 화하는 JavaScript 압축기. 이 난독 화는 JSMIN에 비해 '평가'또는 'with'와 같은 구조물을 사용하는 경우에도 안전합니다.13204 1246? uglifyjs2) - uglifyjs는 JavaScript로 작성된 JavaScript Parser, Minifier, Compressor 또는 Beautifier Toolkit입니다.3768 186? CSSO) -CSS 최소화 다른 사람과 달리. 일반적인 미니 화 기술 외에도 CSS 파일의 구조적 최적화를 수행 할 수있어 다른 미니 페일에 비해 파일 크기가 작습니다.76 36? CSSMIN.JS) -CSSMIN.JS는 YUICOMPRESSOR의 CSS 미니퍼의 JavaScript 포트입니다.812 170? Grunt-Contrib-Concat)-파일을 연결하기위한 Grunt 플러그인.1481 348? Grunt-Contrib-Uglify)-JavaScript 파일을 연결하고 미니링하기위한 Grunt 플러그인.4178 323? Clean-CSS)-Node.js에 대한 빠르고 효율적이며 잘 테스트 한 CSS 미니퍼.2811 601? DJANGO- 코프워저) - 링크 및 인라인 JavaScript 또는 CSS를 단일 캐시 파일로 압축합니다.1520 371? Django-Pipeline)-파이프 라인은 Django의 자산 포장 라이브러리로 CSS 및 JavaScript 연결 및 압축, 내장 JavaScript 템플릿 지원 및 선택적 데이터 URI 이미지 및 글꼴 임베딩을 제공합니다.750 150? JSHRINK) -JSHRINK는 JavaScript를 최소화하여 클라이언트에게 더 빨리 전달할 수있는 PHP 클래스입니다.1052 81? CSSSHRINK) - CSS는 렌더링 페이지의 중요한 경로입니다. 작아야합니다! 그렇지 않으면!28 4? Grunt -cssshrink) - 이것은 단지 CSS 수축을위한 grunt 래퍼입니다.22 0? gulp -cssshrink) - gulp 용 cssshrink를 사용하여 CSS 파일을 줄입니다.6 1? PrettyUgly) - Uglify (스트립 공간) 또는 Prettify (일관된 공간 추가) CSS 코드.795 138? Grunt-Contrib-Cssmin)-Grunt의 CSS 미니퍼.3825 174? Grunt -uncss) - 프로젝트에서 사용하지 않은 CS를 제거하기위한 그 런트 작업.938 40? Gulp -uncss) - 프로젝트에서 사용하지 않는 CS를 제거하기위한 Gulp 작업. 1620 64? UCSS) - UCSS는 사용하지 않는 CSS 선택기를 찾기 위해 크롤링 (대형) 사이트를 위해 만들어졌지만 사용하지 않은 CSS를 제거하지는 않습니다.343 21? httpinvoke)-약속 기반 또는 node.js 스타일의 콜백 기반 API가있는 브라우저 및 node.js 용으로 의존하지 않는 http 클라이언트 라이브러리.10052 372? 중요) - HTML 페이지 (알파)의 추출 및 인라인 Critical -Path CSS.12 1? CSSCOLORMIN) - CSS 색상을 최소화하는 유틸리티 예 : Min ( "White"); // "#fff"로 미니어링됩니다.17585 1731? Lazysizes) - 구성없이 사용자 상호 작용, CSS 또는 JavaScript를 통해 트리거 된 가시성 변경을 감지하는 이미지 (반응 및 정상), IFRAME 및 스크립트에 대한 고성능 게으른 로더.1631 45? TMI) - TMI (너무 많은 이미지) - 웹에서 이미지 무게를 발견하십시오. 21150 1390? SVGO) -SVGO는 SVG 벡터 그래픽 파일을 최적화하기위한 NODEJS 기반 도구입니다.433 40? Grunt -SVGMIN) - Grunt 용 SVGO 사용 SVG를 최소화합니다.1634 93? SVG Cleaner) -SVG Cleaner는 불필요한 데이터에서 SVG 파일을 정리하는 데 도움이 될 수 있습니다. 정리 및 최적화를위한 많은 옵션이 있으며 배치 모드에서 작동하며 멀티 코어 프로세서에서 스레드 처리를 제공합니다. 431 201? 폴리머 번들)-폴리머-버들러는 네트워크 왕복을 최소화하기 위해 생산을위한 프로젝트 자산 포장을위한 라이브러리입니다.100 25? Gulp -Vulcanize) - 웹 구성 요소 세트를 Vulcanize를 사용하는 하나의 파일로 연결합니다. 992 156? httperf) - httperf는 웹 서버 성능을 측정하기위한 도구입니다. 다양한 HTTP 워크로드를 생성하고 서버 성능을 측정하기위한 유연한 기능을 제공합니다.179 23? AUTOPERF) - AUTOPERF는 HTTPERF의 루비 드라이버로, 단일 엔드 포인트 또는 로그 재생을 통해 모든 웹 응용 프로그램의로드 및 성능 테스트를 자동화 할 수 있도록 설계되었습니다.13 4? httperf.rb) - 루비로 작성된 httperf의 간단한 루비 인터페이스.5 0? php -httperf) -Httperf.rb의 PHP 포트.25 2? httperf.js) -JS 포트의 httperf.rb.11 8? httperf.py) - httperf.rb의 파이썬 포트.4 0? GOHTTPERF) - httperf.rb의 포트.38207 2955? WRK) - HTTP 벤치마킹 도구 (요청 생성, 응답 처리 및 사용자 정의보고를위한 선택적 LUA 스크립팅 포함)6455 631? Beeswithmachineguns) - 공격 (Micro EC2 인스턴스)을 공격 (로드 테스트) 대상 (웹 응용 프로그램)에 무장 (생성)을위한 유틸리티.244 22? Webp -Detect) - 수락 협상이있는 웹.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)
