MDRSS/software/dev-tools/card #1185

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

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

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

How To Use • Contributing • Roadmap • Product Hunt

🇨🇳 🇫🇷 🇰🇷 🇵🇹 🇷🇺 🇯🇵

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

소개

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

어떻게 사용하나요?

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

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

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

성능 도구

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

🛠 WebPagetest - Website Performance and Optimization Test
🛠 ☆ Dareboost: Website Speed Test and Website Analysis (use the for -20%)
🛠 Treo: Page Speed Monitoring
🛠 GTmetrix | Website Speed and Performance Optimization
🛠 PageSpeed Insights
🛠 Web.dev
🛠 Pingdom Website Speed Test
📖 Make the Web Faster | Google Developers
🛠 Sitespeed.io - Welcome to the wonderful world of Web Performance
🛠 Calibre
🛠 Website Speed Test | Check Web Performance » Dotcom-Tools
🛠 Website and Server Uptime Monitoring - Pingdom (Free Signup Link)
🛠 Uptime Robot
🛠 SpeedCurve: Monitor front-end performance
🛠 PWMetrics - CLI tool and lib to gather performance metrics
🛠 Varvy - Page speed optimization
🛠 Lighthouse - Google
🛠 Checkbot browser extension - Checks for web performance best practices
🛠 Yellow Lab Tools | Online test to help speeding up heavy web pages
🛠 Speedrank - Web Performance Monitoring
🛠 DebugBear - Monitor website performance and Lighthouse scores
🛠 packtracker.io - Check your webpack bundle size on every pull request.
🛠 Exthouse - Analyze the impact of a browser extension on web performance

참고자료

HTML

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

왜:

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

어떻게:

대부분의 프레임워크에는 웹페이지를 압축시키는 플러그인이 있으며, 여러 NPM 모듈을 사용해 이 작업을 자동으로 처리할 수 있습니다.
- 🛠 HTML minifier | Minify Code
- 🛠 Online HTML Compressor
- 📖 Experimenting with HTML minifier — Perfection Kills
CSS 태그를 자바스크립트 태그 앞에 두기: CSS가 항상 자바스크립트 코드 전에 로드되는지 확인하세요.
```

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


<link rel="stylesheet" href="foo.css"/>
<script src="jquery.js"></script>
<script src="foo.js"></script>
```
왜:

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

어떻게:

<head>의 <link>와 <style>이 <script> 앞에 있는지 확인하세요.
- 📖 Ordering your styles and scripts for pagespeed
iframe 최소화: 다른 기술적 가능성이 없을 때만 iframe을 사용하고, 최대한 iframe을 사용하지 않도록 하세요.
Pre-load optimization with prefetch, dns-prefetch and prerender: 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.

목차

Research document

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

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

목차

소개

어떻게 사용하나요?

성능 도구

참고자료

HTML

CSS

Fonts

Images

JavaScript

Server

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

Author

Contributors

License

Discussion 0

목차

Research document

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

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

목차

소개

어떻게 사용하나요?

성능 도구

참고자료

HTML

CSS

Fonts

Images

JavaScript

Server

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

Author

Contributors

License

Discussion 0

목차

Research document

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

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

목차

소개

어떻게 사용하나요?

성능 도구

참고자료

HTML