The Wayback Machine - https://web.archive.org/web/20200530140345/https://github.com/ParkSB/Front-End-Performance-Checklist
Skip to content

/ Front-End-Performance-Checklist

forked from thedaviddias/Front-End-Performance-Checklist
🎮 더 빠르게 작동하는 프론트엔드 성능 체크리스트
frontend front-end-development front-end-developer-tool guidelines checklist reference web-development html css javascript lists resources performance performance-metrics korean
Branch: master
Find file
Clone or download

Clone with HTTPS

Use Git or checkout with SVN using the web URL.

Open in Desktop Download ZIP
This branch is 8 commits ahead, 183 commits behind thedaviddias:master.
Pull request Compare

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
images
.DS_Store
.gitignore
CODE_OF_CONDUCT.md
LICENSE
README.md

README.md


Front-End Performance Checklist

  프론트엔드 성능 체크리스트  

🎮 더 빠르게 작동하는 프론트엔드 성능 체크리스트

한가지 단순한 규칙: "성능을 고려한 설계와 코드"

      PRs Welcome         Gitter           Licence MIT  

  How To Use • Contributing • Roadmap • Product Hunt

🇨🇳 🇫🇷 🇰🇷 🇵🇹 🇷🇺

Other Checklists:
🗂 Front-End Checklist • 💎 Front-End Design Checklist

목차

  1. HTML
  2. CSS
  3. Fonts
  4. Images
  5. JavaScript
  6. Server (in progress)
  7. JS Frameworks (in progress)

소개

성능은 거대한 주제지만, 항상 "백엔드"나 "어드민"에만 국한되는 주제는 아닙니다: 프론트엔드도 성능에 대한 책임이 있습니다. 프론트엔드 성능 체크리스트는 프론트엔드 개발자로서 최소한 알아야하거나 체크해야할 요소들의 목록이며, 프로젝트에 적용해야 하는 것입니다.

어떻게 사용하나요?

각 규칙은 왜 이 규칙이 중요하고 어떻게 고칠 수 있는지 설명하고 있습니다. 만약 더 자세한 정보를 얻고 싶다면, 체크리스트를 완성시킬 수 있는 🛠 툴, 📖 아티클, 📹 미디어를 가리키는 링크를 찾아야 합니다.

프론트엔드 성능 체크리스트의 모든 항목은 최고의 성능을 내는데 필수적이지만, 일부 규칙의 우선 순위를 정하는데 도움을 주기 위해 우선 순위/영향을 3가지 레벨로 구분했습니다:

  • Low는 해당 항목이 프로젝트에 낮은 우선 순위와 영향을 가진다는 의미입니다.
  • Medium은 해당 항목이 프로젝트에 중간 정도의 우선 순위와 영향을 가진다는 의미입니다. 이 항목에 대해 고민하는 것을 피해선 안 됩니다.
  • High는 해당 항목이 프로젝트에 높은 우선 순위와 영향을 가진다는 의미입니다. 이 규칙을 피할 수 없으며, 수정 사항을 적용해야 합니다.

성능 도구

웹사이트나 어플리케이션을 모니터링하고 테스트할 때 사용할 수 있는 도구들입니다:

참고자료

HTML

html

  • HTML 압축: medium HTML 코드를 압축하고, 최종 파일에서 주석, 공백, 줄바꿈을 제거합니다.

    왜:

    불필요한 공백, 주석, 개행을 제거하면 HTML의 크기를 줄이고 페이지의 로딩 속도를 높일 수 있습니다.그리고 사용자의 다운로드 시간을 줄일 수 있습니다.

    어떻게:

    대부분의 프레임워크에는 웹페이지를 압축시키는 플러그인이 있으며, 여러 NPM 모듈을 사용해 이 작업을 자동으로 처리할 수 있습니다.

  • 불필요한 주석 제거: low 페이지에서 주석이 지워졌는지 확인합니다.

    왜:

    주석은 사용자에게 필요하지 않기 때문에 최종 파일에서 지워져야 합니다. 라이브러리의 원본을 유지하고 싶은 경우에는 주석을 남겨둘 수 있습니다.

    어떻게:

    대부분의 경우 HTML 압축 플러그인을 사용해 주석을 지울 수 있습니다.

  • 불필요한 속성 제거: low type="text/javascript"이나 type="text/css와 같은 타입 속성은 더 이상 필요하지 않으며, 지워야 합니다.

    <!-- Before HTML5 -->
<script type="text/javascript">
    // Javascript code
</script>

<!-- Today -->
<script>
    // Javascript code
</script>

    왜:

    HTML5는 text/css와 text/javascript를 기본으로 지원하기 때문에 타입 속성이 불필요합니다. 웹이나 앱에서 사용되지 않는 코드는 지워야 하며, 불필요한 코드는 페이지를 무겁게 만듭니다.

    어떻게:

    <link>와 <script>에 타입 속성이 남아 있는지 확인하세요.

  • CSS 태그를 자바스크립트 태그 앞에 두기: high CSS가 항상 자바스크립트 코드 전에 로드되는지 확인하세요.

    <!-- Not recommended -->
<script src="jquery.js"></script>
<script src="foo.js"></script>
<link rel="stylesheet" href="foo.css"/>

<!-- Recommended -->
<link rel="stylesheet" href="foo.css"/>
<script src="jquery.js"></script>
<script src="foo.js"></script>

    왜:

    자바스크립트 전에 CSS 태그를 두면 브라우저의 렌더링 속도를 높이는 병렬 다운로드가 가능해집니다.

    어떻게:

    <head>의 <link>와 <style>이 <script> 앞에 있는지 확인하세요.

  • iframe 최소화: high 다른 기술적 가능성이 없을 때만 iframe을 사용하고, 최대한 iframe을 사용하지 않도록 하세요.

⬆ back to top

CSS

css

  • CSS 압축: high CSS 파일을 압축하고, 최종 파일에서 주석, 공백, 줄바꿈을 제거합니다.

    왜:

    CSS 파일을 압축하면 클라이언트에게 더 적은 데이터를 전송하게 되며, 콘텐츠가 더 빨리 로드됩니다. CSS 파일을 압축하는 것은 중요한 일입니다. 이는 대역폭과 리소스 사용을 줄이고자 하는 모든 비즈니스에 도움이 됩니다.

    어떻게:

    개발이나 빌드 중, 또는 그 전에 파일을 자동으로 압축해주는 툴을 사용하세요.

  • 합치기: medium 여러 CSS 파일들을 하나의 파일로 합치세요. (HTTP/2 에서는 항상 유효하진 않습니다.).

    <!-- Not recommended -->
<script src="foo.js"></script>
<script src="ajax.js"></script>

<!-- Recommended -->
<script src="combined.js"></script>

    왜:

    여전히 HTTP/1을 사용하고 있다면 파일을 합칠 필요가 있습니다. 다만 서버가 HTTP/2라면 꼭 그렇지 않습니다. (테스트를 해봐야 합니다.)

    어떻게:

    개발이나 빌드 중, 또는 그 전에 파일을 합쳐주는 온라인 툴, 플러그인을 사용하세요. ⁃ 물론 합치는 작업이 프로젝트를 방해하지는 않도록 하세요.

  • Non-blocking: high DOM이 로드되는데 시간이 걸리지 않도록 CSS 파일은 non-blocking 되어야 합니다.

    <link rel="preload" href="global.min.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="global.min.css"></noscript>

    왜:

    CSS 파일은 페이지 로드와 렌더링을 지연시킬 수 있습니다. preload를 통해 브라우저가 페이지의 콘텐츠를 보여주기 전에 CSS 파일을 로드할 수 있습니다.

    어떻게:

    rel 속성의 값을 preload로 주고, as="style"를 <link> 태그에 넣습니다.

  • CSS 클래스의 길이: low 클래스의 길이가 HTML과 CSS 파일에 (결과적으로) 영향을 줄 수 있습니다.

    왜:

    성능 영향은 문제의 여지가 있으며, 이름을 짓는 전략을 결정하는 것은 스타일시트의 유지관리에 상당한 영향을 미칠 수 있습니다. 만약 BEM을 사용하고 있다면, 경우에 따라 클래스 이름에 필요 이상의 문자를 사용할 수 있습니다. 이름을 현명하게 정하는 것은 언제나 중요한 일입니다.

    어떻게:

    문자의 길이에 제한을 둔다는 것이 누군가에게는 흥미로울 수 있습니다만, 웹사이트를 여러 컴포넌트로 분리하면 클래스와 클래스의 길이를 줄이는데 도움이 될 수 있습니다.

  • 사용되지 않는 CSS: medium 사용되지 않는 CSS 선택자를 지우세요.

    왜:

    사용하지 않는 CSS 선택자를 지우면 파일의 크기를 줄일 수 있으며, 로딩 속도를 높일 수 있습니다.

    어떻게:

    ⚠️ 항상 사용하려는 CSS 프레임워크에 이미 reset / normalize 코드가 포함되어있지 않은지 체크하세요. 경우에 따라 reset / normalize 파일에 있는 것이 필요하지 않을 수도 있습니다.

  • 외부 또는 인라인 CSS: high 외부 또는 인라인 CSS를 <body> 안에 두지 마세요. (HTTP/2에서는 유효하지 않습니다.)

    왜:

    이렇게 해야하는 첫 번째 이유는 디자인에서 콘텐츠를 분리하는 것이 좋은 관행이기 때문입니다. 또한 이는 코드 유지보수를 쉽게 만들고 사이트 접근성을 높이는 데도 도움이 됩니다. 성능과 관련해서는, 이것이 HTML 페이지의 파일 크기와 로딩 시간을 줄이기 때문입니다.

    어떻게:

    항상 외부 스타일 시트를 사용하거나 CSS를 <head>에 임베드하세요. (그리고 다른 CSS 성능 규칙을 따르세요.)

  • 스타일시트 복잡도 분석: high 스타일시트를 분석하는 것은 불필요한 중복 CSS 선택자를 찾는 데 도움이 됩니다.

    왜:

    종종 중복, 또는 유효성 에러가 CSS 코드에서 발생할 수 있는데, CSS 파일을 분석하고 복잡성을 해결하면 CSS 파일의 속도를 높일 수 있습니다. (브라우저가 더 빨리 읽어 들이기 때문이죠.)

    어떻게:

    CSS 전처리기를 사용해 CSS를 조직해야 합니다. 위에 나열된 일부 온라인 툴이 코드를 분석하고 바로 잡는데 도움이 될 수도 있습니다.

⬆ back to top

Fonts

fonts

  • 플래시 또는 보이지 않는 텍스트 방지: medium 웹폰트가 로드될 때까지 투명한 텍스트를 사용하지 마세요.

⬆ back to top

Images

images

  • 벡터 이미지 vs 래스터/비트맵: medium 비트맵 이미지보다는 벡터 이미지를 사용하세요. (가능하다면)

    왜:

    벡터 이미지 (SVG)는 다른 이미지보다 작고, SVG는 반응성이 뛰어나며 완벽하게 크기가 변할 수 있습니다. 벡터 이미지는 CSS에 의해 수정되거나 움직일 수 있습니다.

⬆ back to top

JavaScript

javascript

  • JS 압축: high CSS 파일을 압축하고, 최종 파일에서 주석, 공백, 줄바꿈을 제거합니다. (HTTP/2에서도 여전히 유효합니다.)

    왜:

    불필요한 공백, 주석, 개행을 제거하면 자바스크립트 파일의 크기를 줄이고 페이지의 로딩 속도를 높일 수 있습니다.그리고 사용자의 다운로드 시간을 줄일 수 있습니다.

    어떻게:

    개발이나 빌드 중, 또는 그 전에 파일을 자동으로 압축해주는 툴을 사용하세요.

  • JavaScript 안에 두지 않기: medium (웹사이트에서만 유효합니다.) 여러 자바스크립트 코드를 바디 중간에 두지 마세요. 자바스크립트 코드를 다시 그룹화해 외부 파일이나 <head> 또는 페이지의 마지막(</body> 이전)에 두도록 하세요.

    왜:

    자바스트립트 임베디드 코드를 <body>에 두면 DOM이 구성되는 과정에서 코드가 로드되기 때문에 페이지 속도를 떨어뜨릴 수 있습니다. 가장 좋은 옵션은 외부 파일을 async 또는 defer 속성과 함께 사용하여 DOM 로딩을 막지 않도록하는 것입니다. 또 다른 옵션은 스크립트를 <head>에 두는 것입니다. 대부분의 시간 분석 코드 또는 DOM이 주요 처리부분에 도달하기 전에 로드되어야 하는 작은 스크립트를 둘 수 있습니다.

    어떻게:

    모든 파일이 async 또는 defer를 통해 로드되는지 확인하세요. 그리고 <head>에 어떤 코드를 둘지 현명하게 결정하세요.

  • Non-blocking 자바스크립트: high 자바스크립트 파일을 비동기적으로 로드하기 위해 async를 사용하거나 지연시키기 위해 defer 속성을 사용하세요.

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

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

    왜:

    자바스크립트는 HTML 문서의 파싱을 차단하기 때문에, 파서는 <script> 태그에 도달할 때 (특히 <head> 안에 있을 때) 파싱을 멈추고 스크립트를 실행합니다. 스크립트를 페이지의 상단에 두는 경우 async 또는 defer를 사용하는 것이 적극 권장됩니다만, 만약 </body> 태그 바로 앞에 스크립트를 두는 경우 중요도가 떨어집니다. 하지만 언제나 이 속성을 사용하여 성능 이슈를 피하는 것은 좋은 습관입니다.

    어떻게:

    ⁃ async (만약 스크립트가 다른 스크립트에 의존하지 않을 경우) 또는 defer (만약 스크립트가 비동기 스크립트에 의존할 경우) 속성을 스크립트 태그에 추가하세요.
    ⁃ 만약 스크립트가 작다면, 비동기 스크립트 위에 인라인 스크립트를 둘 수도 있습니다.

  • 최적화와 JS 라이브러리 업데이트: medium 프로젝트에는 라이브러리가 필요하며 (단순한 기능을 위해 바닐라 자바스크립트를 지향하세요.), 이들을 최신버전으로 업데이트하고 불필요한 메소드들이 당신의 자바스크립트 코드를 압도하지 않도록 하세요.

    왜:

    대부분의 경우, 새로운 버전은 최적화되고 보안 패치가 적용됩니다. 페이지의 속도를 높이기 위해 코드를 최적화해야 하며, 웹사이트나 앱을 느리게 만들지 않기 위해 오래된 플러그인을 사용하지 않는지 확인해야 합니다.

    어떻게:

    만약 프로젝트가 NPM 패키지들을 사용한다면, npm-check가 라이브러리를 업그레이드 / 업데이트하는 데 유용할 것입니다.

⬆ back to top

Server

server-side

  • HTTP 요청 최소화: high 항상 모든 파일의 요청이 웹사이트나 어플리케이션에 필수적인지 확인하세요.
  • CDN을 통한 어셋 제공: medium 전 세계에 콘텐츠를 더 빠르게 제공하기 위해 CDN을 사용하세요.

  • 동일한 프로토콜에서 파일 제공: high 웹 사이트에서 HTTPS를 사용하지 않도록하고 HTTP를 이용하는 소스에서 파일을 가져오세요.

  • 연결 가능한 파일 제공: high 연결 불가능한 파일(404)을 요청하지 마세요.

  • 올바른 HTTP 캐시 헤더 설정: high 브라우저와 서버 사이 비용이 큰 왕복을 피하도록 HTTP 헤더를 설정하세요.
  • GZIP / Brotli 압축 활성화: high

⬆ back to top

Performances and JS Frameworks

React

Vue

Performances and CMS

WordPress

Articles

Plugins recommended

Translations

프론트 엔드 성능 체크리스트가 다른 언어로 읽히길 바랍니다! 컨트리뷰션을 망설이지 말아주세요!

Contributing

이슈를 열거나 풀 리퀘스트를 보내 변경 사항이나 추가점을 제안하세요.

Support

질문이나 제안이 있다면 Gitter나 트위터 사용을 망설이지 마세요:

Author

Build with ❤️ by David Dias at @influitive 🇨🇦

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

License

MIT

All icons are provided by Icons8

⬆ back to top

You can’t perform that action at this time.