Skip to content

parksb/Front-End-Performance-Checklist

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
.github
.github
 
 
images
images
 
 
.gitignore
.gitignore
 
 
CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 

Repository files navigation


Front-End Performance Checklist

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

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

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

      PRs Welcome         Discord           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 모듈을 사용해 이 작업을 자동으로 처리할 수 있습니다.

  • 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을 사용하지 않도록 하세요.

  • Pre-load optimization with prefetch, dns-prefetch and prerender: low Popular browsers can use directive on <link> tag and "rel" attribute with certain keywords to pre-load specific URLs.

    Why:

    Prefetching allows a browser to silently fetch the necessary resources needed to display content that a user might access in the near future. The browser is able to store these resources in its cache and speed up the way web pages load when they are using different domains for page resources. When a web page has finished loading and the idle time has passed, the browser begins downloading other resources. When a user go in a particular link (already prefetched), the content will be instantly served.

    How:

    ⁃ Ensure that <link> is in your <head> section.

⬆ back to top

CSS

css

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

    왜:

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

    어떻게:

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

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

    <!-- Not recommended -->
<link rel="stylesheet" href="foo.css"/>
<link rel="stylesheet" href="bar.css"/>

<!-- Recommended -->
<link rel="stylesheet" href="foobar.css"/>

    왜:

    여전히 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> 태그에 넣습니다.

  • Unused CSS: medium Remove unused CSS selectors.

    왜:

    사용하지 않는 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 JavaScript 파일을 압축하고, 최종 파일에서 주석, 공백, 줄바꿈을 제거합니다. (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"></script>

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

    왜:

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

    어떻게:

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

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

    왜:

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

    어떻게:

    만약 프로젝트가 NPM 패키지들을 사용한다면, npm-check가 라이브러리를 업그레이드 / 업데이트하는 데 유용할 것입니다. Greenkeeper can automatically look for your dependencies and suggest an update every time a new version is out.

⬆ back to top

Server

server-side

  • Your website is using HTTPS: high

    Why:

    HTTPS is not only for ecommerce websites, but for all websites that are exchanging data. Data shared by a user or data shared to an external entity. Modern browsers today limit functionalities for sites that are not secure. For example: geolocation, push notifications and service workers don't work if your instance is not using HTTPS. And today is much more easy to setup a project with an SSL certificate than it was before (and for free, thanks to Let's Encrypt).

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

  • 동일한 프로토콜에서 파일 제공: high Avoid having your website serving files coming from source using HTTP on your website which is using HTTPS for example. If your website is using HTTPS, external files should come from the same protocol.

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

  • 올바른 HTTP 캐시 헤더 설정: high 브라우저와 서버 사이 비용이 큰 왕복을 피하도록 HTTP 헤더를 설정하세요.
  • GZIP / Brotli 압축 활성화: high Use a compression method such as Gzip or Brotli to reduce the size of your JavaScript files. With a smaller sizes file, users will be able to download the asset faster, resulting in improved performance.

⬆ back to top

Performances and JS Frameworks

Angular

React

Vue

Performances and CMS

WordPress

Articles

Plugins recommended

Vue

Performances and CMS

WordPress

Articles

Plugins recommended

Translations

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

Contributing

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

Support

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

Author

**Build with ❤️ by David Dias

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

About

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

frontendchecklist.io

Topics

javascript css html lists checklist performance web-development frontend reference resources performance-metrics korean guidelines hacktoberfest front-end-development front-end-developer-tool

Resources

Readme

License

MIT license

Code of conduct

Code of conduct
Activity

Stars

653 stars

Watchers

21 watching

Forks

67 forks
Report repository

Contributors 5