๐ฎ ๋ ๋น ๋ฅด๊ฒ ์๋ํ๋ ํ๋ก ํธ์๋ ์ฑ๋ฅ ์ฒดํฌ๋ฆฌ์คํธ
ํ๊ฐ์ง ๋จ์ํ ๊ท์น: "์ฑ๋ฅ์ ๊ณ ๋ คํ ์ค๊ณ์ ์ฝ๋"
ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย
ย How To Use โข Contributing โข Roadmap โข Product Hunt
๐จ๐ณ ๐ซ๐ท ๐ฐ๐ท ๐ต๐น ๐ท๐บ ๐ฏ๐ต
Other Checklists:
๐ Front-End Checklist โข ๐ Front-End Design Checklist
์ฑ๋ฅ์ ๊ฑฐ๋ํ ์ฃผ์ ์ง๋ง, ํญ์ "๋ฐฑ์๋"๋ "์ด๋๋ฏผ"์๋ง ๊ตญํ๋๋ ์ฃผ์ ๋ ์๋๋๋ค: ํ๋ก ํธ์๋๋ ์ฑ๋ฅ์ ๋ํ ์ฑ ์์ด ์์ต๋๋ค. ํ๋ก ํธ์๋ ์ฑ๋ฅ ์ฒดํฌ๋ฆฌ์คํธ๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ก์ ์ต์ํ ์์์ผํ๊ฑฐ๋ ์ฒดํฌํด์ผํ ์์๋ค์ ๋ชฉ๋ก์ด๋ฉฐ, ํ๋ก์ ํธ์ ์ ์ฉํด์ผ ํ๋ ๊ฒ์ ๋๋ค.
๊ฐ ๊ท์น์ ์ ์ด ๊ท์น์ด ์ค์ํ๊ณ ์ด๋ป๊ฒ ๊ณ ์น ์ ์๋์ง ์ค๋ช ํ๊ณ ์์ต๋๋ค. ๋ง์ฝ ๋ ์์ธํ ์ ๋ณด๋ฅผ ์ป๊ณ ์ถ๋ค๋ฉด, ์ฒดํฌ๋ฆฌ์คํธ๋ฅผ ์์ฑ์ํฌ ์ ์๋ ๐ ํด, ๐ ์ํฐํด, ๐น ๋ฏธ๋์ด๋ฅผ ๊ฐ๋ฆฌํค๋ ๋งํฌ๋ฅผ ์ฐพ์์ผ ํฉ๋๋ค.
ํ๋ก ํธ์๋ ์ฑ๋ฅ ์ฒดํฌ๋ฆฌ์คํธ์ ๋ชจ๋ ํญ๋ชฉ์ ์ต๊ณ ์ ์ฑ๋ฅ์ ๋ด๋๋ฐ ํ์์ ์ด์ง๋ง, ์ผ๋ถ ๊ท์น์ ์ฐ์ ์์๋ฅผ ์ ํ๋๋ฐ ๋์์ ์ฃผ๊ธฐ ์ํด ์ฐ์ ์์/์ํฅ์ 3๊ฐ์ง ๋ ๋ฒจ๋ก ๊ตฌ๋ถํ์ต๋๋ค:
์น์ฌ์ดํธ๋ ์ดํ๋ฆฌ์ผ์ด์ ์ ๋ชจ๋ํฐ๋งํ๊ณ ํ ์คํธํ ๋ ์ฌ์ฉํ ์ ์๋ ๋๊ตฌ๋ค์ ๋๋ค:
HTML ์์ถ: HTML ์ฝ๋๋ฅผ ์์ถํ๊ณ , ์ต์ข ํ์ผ์์ ์ฃผ์, ๊ณต๋ฐฑ, ์ค๋ฐ๊ฟ์ ์ ๊ฑฐํฉ๋๋ค.
์:
๋ถํ์ํ ๊ณต๋ฐฑ, ์ฃผ์, ์์ฑ์ ์ ๊ฑฐํ๋ฉด HTML์ ํฌ๊ธฐ๋ฅผ ์ค์ด๊ณ ํ์ด์ง์ ๋ก๋ฉ ์๋๋ฅผ ๋์ผ ์ ์์ผ๋ฉฐ ์ฌ์ฉ์์ ๋ค์ด๋ก๋ ์๊ฐ์ ์ค์ผ ์ ์์ต๋๋ค.
์ด๋ป๊ฒ:
๋๋ถ๋ถ์ ํ๋ ์์ํฌ์๋ ์นํ์ด์ง๋ฅผ ์์ถ์ํค๋ ํ๋ฌ๊ทธ์ธ์ด ์์ผ๋ฉฐ, ์ฌ๋ฌ NPM ๋ชจ๋์ ์ฌ์ฉํด ์ด ์์ ์ ์๋์ผ๋ก ์ฒ๋ฆฌํ ์ ์์ต๋๋ค.
CSS ํ๊ทธ๋ฅผ ์๋ฐ์คํฌ๋ฆฝํธ ํ๊ทธ ์์ ๋๊ธฐ: 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 ์ต์ํ: ๋ค๋ฅธ ๊ธฐ์ ์ ๊ฐ๋ฅ์ฑ์ด ์์ ๋๋ง 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.
CSS ์์ถ: CSS ํ์ผ์ ์์ถํ๊ณ , ์ต์ข ํ์ผ์์ ์ฃผ์, ๊ณต๋ฐฑ, ์ค๋ฐ๊ฟ์ ์ ๊ฑฐํฉ๋๋ค.
์:
CSS ํ์ผ์ ์์ถํ๋ฉด ํด๋ผ์ด์ธํธ์๊ฒ ๋ ์ ์ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๊ฒ ๋๋ฉฐ, ์ฝํ ์ธ ๊ฐ ๋ ๋นจ๋ฆฌ ๋ก๋๋ฉ๋๋ค. ์ด์์์ CSS ํ์ผ์ ์์ถํ๋ ๊ฒ์ ์ค์ํ ์ผ์ ๋๋ค. ์ด๋ ๋์ญํญ๊ณผ ๋ฆฌ์์ค ์ฌ์ฉ์ ์ค์ด๊ณ ์ ํ๋ ๋ชจ๋ ๋น์ฆ๋์ค์ ์์ด ์ฌ์ฉ์์๊ฒ ๋์์ด ๋ฉ๋๋ค.
์ด๋ป๊ฒ:
๊ฐ๋ฐ์ด๋ ๋น๋ ์ค, ๋๋ ๊ทธ ์ ์ ํ์ผ์ ์๋์ผ๋ก ์์ถํด์ฃผ๋ ํด์ ์ฌ์ฉํ์ธ์.
ํฉ์น๊ธฐ: ์ฌ๋ฌ 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: 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: Remove unused CSS selectors.
์:
์ฌ์ฉํ์ง ์๋ CSS ์ ํ์๋ฅผ ์ง์ฐ๋ฉด ํ์ผ์ ํฌ๊ธฐ๋ฅผ ์ค์ผ ์ ์์ผ๋ฉฐ, ๋ก๋ฉ ์๋๋ฅผ ๋์ผ ์ ์์ต๋๋ค.
์ด๋ป๊ฒ:
โ ๏ธ ํญ์ ์ฌ์ฉํ๋ ค๋ CSS ํ๋ ์์ํฌ์ ์ด๋ฏธ reset / normalize ์ฝ๋๊ฐ ํฌํจ๋์ด์์ง ์์์ง ์ฒดํฌํ์ธ์. ๊ฒฝ์ฐ์ ๋ฐ๋ผ reset / normalize ํ์ผ์ ์๋ ๊ฒ์ด ํ์ํ์ง ์์ ์๋ ์์ต๋๋ค.
CSS ํฌ๋ฆฌํฐ์ปฌ: CSS ํฌ๋ฆฌํฐ์ปฌ (๋๋ "์ด๋ณด๋ธ ๋ ํด๋")์ ํ์ด์ง์ ๋ณด์ด๋ ๋ถ๋ถ์ ๋ ๋๋งํ๋ ๋ฐ ์ฌ์ฉ๋๋ ๋ชจ๋ CSS๋ฅผ ์์งํฉ๋๋ค. ์ด๋ ์ฃผ์ CSS ํธ์ถ ์ , ๊ทธ๋ฆฌ๊ณ <style></style>
์ฌ์ด์ ํ ์ค๋ก ์๋ฒ ๋๋๋ฉ๋๋ค. (๊ฐ๋ฅํ๋ฉด ์์ถ๋ฉ๋๋ค.)
์:
์ค์ํ CSS๋ฅผ ์ธ๋ผ์ธ์ผ๋ก ๋ฃ์ผ๋ฉด ์๋ฒ ์์ฒญ์ ์ค์ฌ ์น ํ์ด์ง์ ๋ ๋๋ง ์๋๋ฅผ ๋์ผ ์ ์์ต๋๋ค.
์ด๋ป๊ฒ:
์จ๋ผ์ธ ํด์ด๋ Addy Osmani๊ฐ ๊ฐ๋ฐํ ๊ฒ๊ณผ ๊ฐ์ ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํด CSS ํฌ๋ฆฌํฐ์ปฌ์ ์์ฑํ์ธ์.
์ธ๋ถ ๋๋ ์ธ๋ผ์ธ CSS: ์ธ๋ถ ๋๋ ์ธ๋ผ์ธ CSS๋ฅผ <body>
์์ ๋์ง ๋ง์ธ์. (HTTP/2์์๋ ์ ํจํ์ง ์์ต๋๋ค.)
์:
์ด๋ ๊ฒ ํด์ผํ๋ ์ฒซ ๋ฒ์งธ ์ด์ ๋ ๋์์ธ์์ ์ฝํ ์ธ ๋ฅผ ๋ถ๋ฆฌํ๋ ๊ฒ์ด ์ข์ ๊ดํ์ด๊ธฐ ๋๋ฌธ์ ๋๋ค. ๋ํ ์ด๋ ์ฝ๋ ์ ์ง๋ณด์๋ฅผ ์ฝ๊ฒ ๋ง๋ค๊ณ ์ฌ์ดํธ ์ ๊ทผ์ฑ์ ๋์ด๋ ๋ฐ๋ ๋์์ด ๋ฉ๋๋ค. ์ฑ๋ฅ๊ณผ ๊ด๋ จํด์๋, ์ด๊ฒ์ด HTML ํ์ด์ง์ ํ์ผ ํฌ๊ธฐ์ ๋ก๋ฉ ์๊ฐ์ ์ค์ด๊ธฐ ๋๋ฌธ์ ๋๋ค.
์ด๋ป๊ฒ:
ํญ์ ์ธ๋ถ ์คํ์ผ ์ํธ๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ CSS๋ฅผ
<head>
์ ์๋ฒ ๋ํ์ธ์. (๊ทธ๋ฆฌ๊ณ ๋ค๋ฅธ CSS ์ฑ๋ฅ ๊ท์น์ ๋ฐ๋ฅด์ธ์.)
์คํ์ผ์ํธ ๋ณต์ก๋ ๋ถ์: ์คํ์ผ์ํธ๋ฅผ ๋ถ์ํ๋ ๊ฒ์ ๋ถํ์ํ ์ค๋ณต CSS ์ ํ์๋ฅผ ์ฐพ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
์:
์ข ์ข ์ค๋ณต, ๋๋ ์ ํจ์ฑ ์๋ฌ๊ฐ CSS ์ฝ๋์์ ๋ฐ์ํ ์ ์๋๋ฐ, CSS ํ์ผ์ ๋ถ์ํ๊ณ ๋ณต์ก์ฑ์ ํด๊ฒฐํ๋ฉด CSS ํ์ผ์ ์๋๋ฅผ ๋์ผ ์ ์์ต๋๋ค. (๋ธ๋ผ์ฐ์ ๊ฐ ๋ ๋นจ๋ฆฌ ์ฝ์ด ๋ค์ด๊ธฐ ๋๋ฌธ์ด์ฃ .)
์ด๋ป๊ฒ:
CSS ์ ์ฒ๋ฆฌ๊ธฐ๋ฅผ ์ฌ์ฉํด CSS๋ฅผ ์กฐ์งํด์ผ ํฉ๋๋ค. ์๋์ ๋์ด๋ ์ผ๋ถ ์จ๋ผ์ธ ํด์ด ์ฝ๋๋ฅผ ๋ถ์ํ๊ณ ๋ฐ๋ก ์ก๋๋ฐ ๋์์ด ๋ ์๋ ์์ต๋๋ค.
์นํฐํธ ํฌ๋งท: ์น ํ๋ก์ ํธ ๋๋ ์ดํ๋ฆฌ์ผ์ด์ ์์ WOFF2๋ฅผ ์ฌ์ฉํ์ธ์.
์:
Check before buying your new font that the provider gives you the WOFF2 format. If you are using a free font, you can always use Font Squirrel to generate all the formats you need.
์ด๋ป๊ฒ:
์๋ก์ด ํฐํธ๋ฅผ ๊ตฌ๋งคํ๊ธฐ ์ ์ ์ ๊ณต์๊ฐ WOFF2 ํฌ๋งท์ ์ ๊ณตํ๋์ง ์ฒดํฌํ์ธ์. ๋ง์ฝ ๋ฌด๋ฃ ํฐํธ๋ฅผ ์ฌ์ฉํ๋ค๋ฉด, Font Squirrel์ ํตํด ํ์ํ ํฌ๋งท์ ์์ฑํ ์ ์์ต๋๋ค.
ํฐํธ๋ฅผ ๋ ๋นจ๋ฆฌ ๋ก๋ํ๊ธฐ ์ํด preconnect
๋ฅผ ์ฌ์ฉ:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
์:
์น ์ฌ์ดํธ์ ์ ์ํ๋ฉด, ๋๋ฐ์ด์ค๋ ์ฌ์ดํธ์ ์์น์ ์ฐ๊ฒฐํด์ผ ํ๋ ์๋ฒ๋ฅผ ์ฐพ์์ผ ํฉ๋๋ค. ๋ธ๋ผ์ฐ์ ๋ DNS ์๋ฒ๋ฅผ ์ฐพ๊ณ , ๋ฆฌ์์ค (ํฐํธ, CSS ํ์ผ...) ์์ง์ด ๋๋๊ธฐ ์ , ์กฐํ๊ฐ ์๋ฃ๋ ๋๊น์ง ๋๊ธฐํด์ผ ํฉ๋๋ค. ์ด๋ prefetches์ preconnects๋ ๋ธ๋ผ์ฐ์ ๊ฐ DNS ์ ๋ณด๋ฅผ ์ฐพ๊ณ ํฐํธ ํ์ผ์ ํธ์คํ ํ๋ ์๋ฒ์ ๋ํ TCP ์ฐ๊ฒฐ์ ํ์ฉํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ๋ธ๋ผ์ฐ์ ๊ฐ ํฐํธ ์ ๋ณด์ ์๋ฒ์ ์์ฒญํด์ผ ํ๋ ํฐํธ ํ์ผ์ด ๋ด๊ธด css ํ์ผ์ ํ์ฑํ ๋ ๋ฏธ๋ฆฌ DNS ์ ๋ณด๋ฅผ ํ์ธํ๊ณ , ์ปค๋ฅ์ ํ์ ์๋ ์๋ฒ์ ๋ํ ๊ฐ๋ฐฉํ ์ฐ๊ฒฐ์ ์ค๋นํจ์ผ๋ก์จ ์ฑ๋ฅ์ ๋์ผ ์ ์์ต๋๋ค.
์ด๋ป๊ฒ:
โ ์นํฐํธ๋ฅผ ์ฌ์ ์์งํ๊ธฐ ์ ์, ์น์ฌ์ดํธ๋ฅผ ํ๊ฐํ๊ธฐ ์ํด ์น ํ์ด์ง ํ ์คํธ๋ฅผ ์ฌ์ฉํ์ธ์.
โ teal colored DNS๋ฅผ ์ฐพ๊ณ ์์ฒญ ์ค์ธ ํธ์คํธ๋ฅผ ํ์ธํ์ธ์.
โ<head>
์ ๋ ์นํฐํธ๋ฅผ ์ฌ์ ์์งํ๊ณ ํจ๊ป ์ฌ์ ์์งํ ํธ์คํธ๋ค์์ ์ถ๊ฐํ์ธ์.
์น ํฐํธ ํฌ๊ธฐ: ์นํฐํธ ํฌ๊ธฐ๊ฐ 300kb๋ฅผ ๋์ง ์๋๋ก ํ์ธ์. (๋ชจ๋ ํ์ ์์ ํฌํจ)
๐ Image Bytes in 2018
์ด๋ฏธ์ง ์ต์ ํ: ์ด๋ฏธ์ง๋ ์ต์ ํ๋์ด์ผ ํ๋ฉฐ, ์ต์ข ์ฌ์ฉ์์๊ฒ ์ํฅ์ ๋ฏธ์น์ง ์๋ ์ ์์ ์์ถ๋์ด์ผ ํฉ๋๋ค.
์:
์์ถ๋ ์ด๋ฏธ์ง๋ ๋ธ๋ผ์ฐ์ ์์ ๋ ๋นจ๋ฆฌ ๋ก๋๋๊ณ , ๋ณด๋ค ์ ์ ๋ฐ์ดํฐ๋ฅผ ์๋นํฉ๋๋ค.
์ด๋ป๊ฒ:
โ ๊ฐ๋ฅํ๋ค๋ฉด CSS3 ํจ๊ณผ๋ฅผ ์ฌ์ฉํ์ธ์. (์์ ์ด๋ฏธ์ง ๋์ )
โ ๊ฐ๋ฅํ๋ฉด, ์ด๋ฏธ์ง์ ์ธ์ฝ๋ฉ๋ ํ ์คํธ ๋์ ํฐํธ๋ฅผ ์ฌ์ฉํ์ธ์.
โ SVG๋ฅผ ์ฌ์ฉํ์ธ์.
โ ํด์ ์ฌ์ฉํ๊ณ ์์ถ ๋ ๋ฒจ์ 85 ๋ฏธ๋ง์ผ๋ก ํ์ธ์.
์ด๋ฏธ์ง ํ์: ์ ์ ํ ์ด๋ฏธ์ง ํ์์ ์ ํํ์ธ์.
์:
To ensure that your images don't slow your website, choose the format that will correspond to your image. If it's a photo, JPEG is most of the time more appropriate than PNG or GIF. But don't forget to look a the nex-gen formats which can reduce the size of your files. Each image format has pros and cons, it's important to know these to make the best choice possible.
์ด๋ป๊ฒ:
โ Lighthouse๋ฅผ ์ฌ์ฉํด ์ด๋ฏธ์ง๊ฐ ์ต์ข ์ ์ผ๋ก ์ฐจ์ธ๋ ํฌ๋งท(JPEG 2000m JPEG XR ๋๋ WebP)์ ์ฌ์ฉํ ์ ์๋์ง ํ์ธํ์ธ์.
โ ๋ค๋ฅธ ํฌ๋งท์ ๋น๊ตํ์ธ์. ์ด๋จ ๋๋ PNG8์ ์ฌ์ฉํ๋ ๊ฒ์ด PNG16์ ์ฌ์ฉํ๋ ๊ฒ๋ณด๋ค ๋ซ๊ณ , ์ด๋จ ๋๋ ๊ทธ๋ ์ง ์์ต๋๋ค.
๋ฒกํฐ ์ด๋ฏธ์ง vs ๋์คํฐ/๋นํธ๋งต: ๋นํธ๋งต ์ด๋ฏธ์ง๋ณด๋ค๋ ๋ฒกํฐ ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํ์ธ์. (๊ฐ๋ฅํ๋ค๋ฉด)
์:
๋ฒกํฐ ์ด๋ฏธ์ง (SVG)๋ ๋ค๋ฅธ ์ด๋ฏธ์ง๋ณด๋ค ์๊ณ , SVG๋ ๋ฐ์์ฑ์ด ๋ฐ์ด๋๋ฉฐ ์๋ฒฝํ๊ฒ ํฌ๊ธฐ๊ฐ ๋ณํ ์ ์์ต๋๋ค. ๋ฒกํฐ ์ด๋ฏธ์ง๋ CSS์ ์ํด ์์ ๋๊ฑฐ๋ ์์ง์ผ ์ ์์ต๋๋ค.
์ด๋ฏธ์ง ํฌ๊ธฐ: ์ต์ข
์ ์ผ๋ก ๋ํ๋๋ ์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ ์๋ค๋ฉด <img>
์ width
์ height
์์ฑ์ ๋ช
์ํ์ธ์.
์:
๋์ด์ ๋๋น๊ฐ ์ค์ ๋์ด ์์ผ๋ฉด ํ์ด์ง๊ฐ ๋ก๋๋์ ๋ ์ด๋ฏธ์ง๊ฐ ํ์๋กํ๋ ๊ณต๊ฐ์ด ์์ฝ๋ฉ๋๋ค. ํ์ง๋ง, ์ด ์์ฑ์ด ์๋ค๋ฉด, ๋ธ๋ผ์ฐ์ ๋ ์ด๋ฏธ์ง์ ํฌ๊ธฐ๋ฅผ ์ ์ ์๊ณ , ์ ์ ํ ๊ณต๊ฐ์ ์์ฝํด ๋ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ฉด ํ์ด์ง๋ฅผ ๋ก๋ฉํ๋ ์ค์ ๋ ์ด์์์ด ๋ณํ๋ ํ์์ด ๋ฐ์ํฉ๋๋ค. (์ด๋ฏธ์ง๋ฅผ ๋ก๋ํ๋ ๋์)
Base64 ์ด๋ฏธ์ง ์ฌ์ฉ ์ง์: base64๋ฅผ ํตํด ๊ฒฐ๊ณผ์ ์ผ๋ก ์์ ์ด๋ฏธ์ง๋ฅผ ์ป์ ์ ์์ง๋ง, ์ด๊ฒ์ด ์ต๊ณ ์ ๋ฐฉ๋ฒ์ ์๋๋๋ค.
๋ ์ด์ง ๋ก๋ฉ: ์ด๋ฏธ์ง๋ฅผ ๋ ์ด์ง ๋ก๋ฉ์ํค์ธ์. (noscript ํด๋ฐฑ์ด ์ธ์ ๋ ์ ๊ณต๋ฉ๋๋ค.)
์ด๋ป๊ฒ:
โ Lighthouse๋ฅผ ์ฌ์ฉํด ์ผ๋ง๋ ๋ง์ ์ด๋ฏธ์ง๊ฐ ์คํ์คํฌ๋ฆฐ๋๋ ์ง ํ์ธํ์ธ์.
โ ์ด๋ฏธ์ง๋ฅผ ๋ ์ด์ง ๋ก๋์์ผ์ฃผ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํ์ธ์. Make sure you target offscreen images only.
โ Also make sure to lazyload alternative images shown at mouseover or upon other user actions.
๋ฐ์ํ ์ด๋ฏธ์ง: ๋์คํ๋ ์ด ํฌ๊ธฐ์ ๋ง๋ ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํ์ธ์.
์:
์์ ๋๋ฐ์ด์ค์์๋ ๋ทฐํฌํธ๋ณด๋ค ํฐ ์ด๋ฏธ์ง๊ฐ ํ์ํ์ง ์์ต๋๋ค. ์๋ก ๋ค๋ฅธ ํฌ๊ธฐ์ ์ด๋ฏธ์ง๋ฅผ ์ฌ๋ฌ ๋ฒ์ ์ผ๋ก ์ ๊ณตํ๋ ๊ฒ์ ์ถ์ฒํฉ๋๋ค.
์ด๋ป๊ฒ:
โ ์ํ๋ ํ๊ฒ ๋๋ฐ์ด์ค์ ๋ฐ๋ผ ๋ค๋ฅธ ํฌ๊ธฐ์ ์ด๋ฏธ์ง๋ฅผ ๋ง๋์ธ์.
โsrcset
๊ณผpicture
๋ฅผ ์ฌ์ฉํด ๊ฐ ์ด๋ฏธ์ง์ ์ฌ๋ฌ ๋ฒ์ ์ ์ ๊ณตํ์ธ์.
JS ์์ถ: JavaScript ํ์ผ์ ์์ถํ๊ณ , ์ต์ข ํ์ผ์์ ์ฃผ์, ๊ณต๋ฐฑ, ์ค๋ฐ๊ฟ์ ์ ๊ฑฐํฉ๋๋ค. (HTTP/2์์๋ ์ฌ์ ํ ์ ํจํฉ๋๋ค.)
์:
๋ถํ์ํ ๊ณต๋ฐฑ, ์ฃผ์, ๊ฐํ์ ์ ๊ฑฐํ๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ํฌ๊ธฐ๋ฅผ ์ค์ด๊ณ ํ์ด์ง์ ๋ก๋ฉ ์๋๋ฅผ ๋์ผ ์ ์์ต๋๋ค.๊ทธ๋ฆฌ๊ณ ์ฌ์ฉ์์ ๋ค์ด๋ก๋ ์๊ฐ์ ์ค์ผ ์ ์์ต๋๋ค.
์ด๋ป๊ฒ:
๊ฐ๋ฐ์ด๋ ๋น๋ ์ค, ๋๋ ๊ทธ ์ ์ ํ์ผ์ ์๋์ผ๋ก ์์ถํด์ฃผ๋ ํด์ ์ฌ์ฉํ์ธ์.
JavaScript ์์ ๋์ง ์๊ธฐ: (์น์ฌ์ดํธ์์๋ง ์ ํจํฉ๋๋ค.) ์ฌ๋ฌ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ๋ฐ๋ ์ค๊ฐ์ ๋์ง ๋ง์ธ์. ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ๋ค์ ๊ทธ๋ฃนํํด ์ธ๋ถ ํ์ผ์ด๋ <head>
๋๋ ํ์ด์ง์ ๋ง์ง๋ง(</body>
์ด์ )์ ๋๋๋ก ํ์ธ์.
์:
์๋ฐ์คํธ๋ฆฝํธ ์๋ฒ ๋๋ ์ฝ๋๋ฅผ
<body>
์ ๋๋ฉด DOM์ด ๊ตฌ์ฑ๋๋ ๊ณผ์ ์์ ์ฝ๋๊ฐ ๋ก๋๋๊ธฐ ๋๋ฌธ์ ํ์ด์ง ์๋๋ฅผ ๋จ์ด๋จ๋ฆด ์ ์์ต๋๋ค. ๊ฐ์ฅ ์ข์ ์ต์ ์ ์ธ๋ถ ํ์ผ์async
๋๋defer
์์ฑ๊ณผ ํจ๊ป ์ฌ์ฉํ์ฌ DOM ๋ก๋ฉ์ ๋ง์ง ์๋๋กํ๋ ๊ฒ์ ๋๋ค. ๋ ๋ค๋ฅธ ์ต์ ์ ์คํฌ๋ฆฝํธ๋ฅผ<head>
์ ๋๋ ๊ฒ์ ๋๋ค. ๋๋ถ๋ถ์ ์๊ฐ ๋ถ์ ์ฝ๋ ๋๋ DOM์ด ์ฃผ์ ์ฒ๋ฆฌ๋ถ๋ถ์ ๋๋ฌํ๊ธฐ ์ ์ ๋ก๋๋์ด์ผ ํ๋ ์์ ์คํฌ๋ฆฝํธ๋ฅผ ๋ ์ ์์ต๋๋ค.
์ด๋ป๊ฒ:
๋ชจ๋ ํ์ผ์ด
async
๋๋defer
๋ฅผ ํตํด ๋ก๋๋๋์ง ํ์ธํ์ธ์. ๊ทธ๋ฆฌ๊ณ<head>
์ ์ฝ์ ํ ์ฝ๋๋ฅผ ํ๋ช ํ๊ฒ ๊ฒฐ์ ํ์ธ์.
Non-blocking ์๋ฐ์คํฌ๋ฆฝํธ: ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ๋น๋๊ธฐ์ ์ผ๋ก ๋ก๋ํ๊ธฐ ์ํด 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 ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ ๋ฐ์ดํธ: ํ๋ก์ ํธ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ํ์ํ๋ฉฐ (๋จ์ํ ๊ธฐ๋ฅ์ ์ํด ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์งํฅํ์ธ์.), ์ด๋ค์ ์ต์ ๋ฒ์ ์ผ๋ก ์ ๋ฐ์ดํธํ๊ณ ๋ถํ์ํ ๋ฉ์๋๋ค์ด ๋น์ ์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์๋ํ์ง ์๋๋ก ํ์ธ์.
์:
๋๋ถ๋ถ์ ๊ฒฝ์ฐ, ์๋ก์ด ๋ฒ์ ์ ์ต์ ํ๋๊ณ ๋ณด์ ํจ์น๊ฐ ์ ์ฉ๋ฉ๋๋ค. ํ์ด์ง์ ์๋๋ฅผ ๋์ด๊ธฐ ์ํด ์ฝ๋๋ฅผ ์ต์ ํํด์ผ ํ๋ฉฐ, ์น์ฌ์ดํธ๋ ์ฑ์ ๋๋ฆฌ๊ฒ ๋ง๋ค์ง ์๊ธฐ ์ํด ์ค๋๋ ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํ์ง ์๋์ง ํ์ธํด์ผ ํฉ๋๋ค.
์ด๋ป๊ฒ:
๋ง์ฝ ํ๋ก์ ํธ๊ฐ NPM ํจํค์ง๋ค์ ์ฌ์ฉํ๋ค๋ฉด, npm-check๊ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ ๊ทธ๋ ์ด๋ / ์ ๋ฐ์ดํธํ๋ ๋ฐ ์ ์ฉํ ๊ฒ์ ๋๋ค. Greenkeeper can automatically look for your dependencies and suggest an update every time a new version is out.
๋ํ๋์ ํฌ๊ธฐ ์ ํ: ์ธ๋ถ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํ๋ช ํ๊ฒ ์ฌ์ฉํ์ธ์. ๋๋ถ๋ถ์ ๊ฒฝ์ฐ, ๋๊ฐ์ ๊ธฐ๋ฅ์ ํ์ง๋ง ๋ ๊ฐ๋ฒผ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฐพ์ ์ ์์ต๋๋ค.
์:
745 000 ํจํค์ง ์ค ์ฌ์ฉํ๋ ค๋ ํจํค์ง ํ๋๋ฅผ npm์์ ์ฐพ์ ์ ์์ต๋๋ค. ํ์ง๋ง ๊ฐ์ฅ ์ข์ ํจํค์ง๋ฅผ ๊ณจ๋ผ์ผ ํฉ๋๋ค. ์๋ฅผ ๋ค์ด, MomentJS๋ ๊ต์ฅํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ง๋ง, ๋ง์ ๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ง ์์ ๊ฒ์ ๋๋ค. Day.js๊ฐ ๋ง๋ค์ด์ง ์ด์ ์ฃ . Day.js 2kB vs Moment 16.4kB gz ์ ๋๋ค.
์ด๋ป๊ฒ:
ํญ์ ๋ ๊ฐ๋ณ๊ณ ์ข์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฐพ๊ธฐ ์ํด ๋น๊ตํ์ธ์. npm trends์ ๊ฐ์ ํด์ ์ด์ฉํด NPM ๋ค์ด๋ก๋ ์๋ฅผ ๋น๊ตํ๊ฑฐ๋ Bundlephobia๋ฅผ ํตํด ๋ํ๋์์ ํฌ๊ธฐ๋ฅผ ์ ์ ์์ต๋๋ค.
JavaScript ํ๋กํ์ผ๋ง: ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์ฒดํฌํ์ธ์. (CSS๋ ๊ฐ์ด ์ฒดํฌํ์ธ์.)
์:
์๋ฐ์คํฌ๋ฆฝํธ ๋ณต์ก๋๋ ๋ฐํ์ ์ฑ๋ฅ์ ๋จ์ด๋จ๋ฆด ์ ์์ต๋๋ค. ์ํ์ฑ์ด ์๋ ์ด์๋ฅผ ํ์ธํ๋ ๊ฒ์ ๋งค๋๋ฌ์ด ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๋ฐ ํ์์ ์ ๋๋ค.
์ด๋ป๊ฒ:
ํฌ๋กฌ ๊ฐ๋ฐ์ ๋๊ตฌ์ ํ์๋ผ์ธ ํด์ ์ด์ฉํด ์คํฌ๋ฆฝํธ ์ด๋ฒคํธ๋ฅผ ํ ์คํธํ๊ณ ๋๋ฌด ์ค๋ ์๊ฐ์ ์๋ชจํ๋ ์ด๋ฒคํธ๋ฅผ ์ฐพ์๋ด์ธ์.
Use of Service Workers: You are using Service Workers in your PWA to cache data or execute possible heavy tasks without impacting the user experience of your application. ย ย ย
Your website is using HTTPS:
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).
์นํ์ด์ง ํฌ๊ธฐ < 1500 KB: (์ด์์ ์ธ ํฌ๊ธฐ < 500 KB) ํ์ด์ง์ ํฌ๊ธฐ + ๋ฆฌ์์ค๋ฅผ ์ต๋ํ ์ค์ด์ธ์
์:
500 KB ๋ฏธ๋ง์ด ์ด์์ ์ด์ง๋ง ์น์ ์ํ์ ๋ฐ๋ผ ํฌ๋ก๋ฐ์ดํธ์ ์ค์๊ฐ์ด 1500 KB ์ ๋๋ก ํ์๋ฉ๋๋ค. (๋ชจ๋ฐ์ผ์์๋ ๊ทธ๋ ์ต๋๋ค.) ์ต์์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ค๋ฉด ํ๊ฒ ์ฌ์ฉ์, ๋คํธ์ํฌ ์ฐ๊ฒฐ, ๋๋ฐ์ด์ค์ ๋ฐ๋ผ ์ด ํฌ๋ก๋ฐ์ดํธ๋ฅผ ์ต๋ํ ์ค์ฌ์ผ ํฉ๋๋ค.
์ด๋ป๊ฒ:
ํ๋ก ํธ์๋ ์ฑ๋ฅ ์ฒดํฌ๋ฆฌ์คํธ์ ๋ชจ๋ ๊ท์น๋ค์ ๋ฆฌ์์ค์ ์ฝ๋๋ฅผ ์ต๋ํ ์ค์ด๋๋ก ํ๊ณ ์์ต๋๋ค.
ํ์ด์ง ๋ก๋ ์๊ฐ < 3์ด: ํ์ด์ง ๋ก๋ ์๊ฐ์ ์ต๋ํ ์ค์ฌ ์ฌ์ฉ์์๊ฒ ์ฝํ ์ธ ๊ฐ ๋น ๋ฅด๊ฒ ์ ์ก๋๋๋ก ํ์ธ์.
์:
์น์ฌ์ดํธ๋ ์ฑ์ด ๋นจ๋ผ์ง์๋ก ๋ฐ์ด์ค ์ฆ๊ฐ ๊ฐ๋ฅ์ฑ์ด ์ค์ด๋ญ๋๋ค. ํํธ ์ฌ์ฉ์๋ ๋ฏธ๋์ ํด๋ผ์ด์ธํธ๋ฅผ ์์ ๊ฐ๋ฅ์ฑ๋ ์ค์ด๋ญ๋๋ค. ์ด ์ฃผ์ ์ ๋ํ ๋ง์ ์ฐ๊ตฌ๊ฐ ์ด๋ฅผ ์ฆ๋ช ํฉ๋๋ค.
์ด๋ป๊ฒ:
Page Speed Insight ๋๋ WebPageTest์ ๊ฐ์ ์จ๋ผ์ธ ํด์ ์ด์ฉํด ๋ฌด์์ด ํ์ด์ง๋ฅผ ๋๋ฆฌ๊ฒ ๋ง๋๋์ง ๋ถ์ํ๊ณ , ํ๋ก ํธ์๋ ์ฒดํฌ ๋ฆฌ์คํธ๋ฅผ ์ด์ฉํด ๋ก๋ ์๊ฐ์ ๊ฐ์ ํ์ธ์.
์ฒซ ๋ฒ์งธ ๋ฐ์ดํธ ์๊ฐ(TTFB) < 1.3์ด: ๋ธ๋ผ์ฐ์ ๊ฐ ๋ฐ์ดํฐ๋ฅผ ๋ฐ๊ธฐ ์ ๊น์ง ๋๊ธฐํ๋ ์๊ฐ์ ์ต๋ํ ์ค์ด์ธ์.
์ฟ ํค ํฌ๊ธฐ: ๋ง์ฝ ์ฟ ํค๋ฅผ ์ฌ์ฉํ๋ค๋ฉด ๊ฐ ์ฟ ํค๊ฐ 4096 ๋ฐ์ดํธ๋ฅผ ๋์ด์๋ ์ ๋๋ฉฐ, ๋๋ฉ์ธ ๋ค์์ด 20๊ฐ ์ด์์ ์ฟ ํค๋ฅผ ๊ฐ์ ธ์๋ ์ ๋ฉ๋๋ค.
์:
์ฟ ํค๋ HTTP ํค๋์์ ์น ์๋ฒ์ ๋ธ๋ผ์ฐ์ ์ฌ์ด์ ๊ตํ๋ฉ๋๋ค. ์ฌ์ฉ์์ ์๋ต ์๊ฐ์ ๋ฏธ์น๋ ์ํฅ์ ์ต์ํํ๊ธฐ ์ํด์๋ ์ฟ ํค์ ํฌ๊ธฐ๋ฅผ ์ต๋ํ ์ค์ฌ์ผ ํฉ๋๋ค.
์ด๋ป๊ฒ:
๋ถํ์ํ ์ฟ ํค๋ฅผ ์ ๊ฑฐํ์ธ์.
๋์ผํ ํ๋กํ ์ฝ์์ ํ์ผ ์ ๊ณต: 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.
์ฐ๊ฒฐ ๊ฐ๋ฅํ ํ์ผ ์ ๊ณต: ์ฐ๊ฒฐ ๋ถ๊ฐ๋ฅํ ํ์ผ(404)์ ์์ฒญํ์ง ๋ง์ธ์.
ํ๋ก ํธ ์๋ ์ฑ๋ฅ ์ฒดํฌ๋ฆฌ์คํธ๊ฐ ๋ค๋ฅธ ์ธ์ด๋ก ์ฝํ๊ธธ ๋ฐ๋๋๋ค! ์ปจํธ๋ฆฌ๋ทฐ์ ์ ๋ง์ค์ด์ง ๋ง์์ฃผ์ธ์!
๐ต๐น Portuguese: fernandofawkes/Front-End-Performance-Checklist
๐จ๐ณ Chinese: JohnsenZhou/Front-End-Performance-Checklist
๐ท๐บ Russian: lex111/Front-End-Performance-Checklist
๐ซ๐ท French: WilliamDASILVA/Front-End-Performance-Checklist
๐ฐ๐ท Korean: ParkSB/Front-End-Performance-Checklist
๐ต๐น Portuguese: fernandofawkes/Front-End-Performance-Checklist
๐จ๐ณ Chinese: JohnsenZhou/Front-End-Performance-Checklist
๐ท๐บ Russian: lex111/Front-End-Performance-Checklist
๐ซ๐ท French: WilliamDASILVA/Front-End-Performance-Checklist
๐ฐ๐ท Korean: ParkSB/Front-End-Performance-Checklist
๐ช๐ธ Spanish: dagerzuga/Front-End-Performance-Checklist
๐ป๐ฎ Vietnamese : huynhan147/Front-End-Performance-Checklist
๐ฏ๐ต Japanese: GameWith/Front-End-Performance-Checklist
๐ต๐ฑ Polish: mbiesiad/Front-End-Performance-Checklist
์ด์๋ฅผ ์ด๊ฑฐ๋ ํ ๋ฆฌํ์คํธ๋ฅผ ๋ณด๋ด ๋ณ๊ฒฝ ์ฌํญ์ด๋ ์ถ๊ฐ์ ์ ์ ์ํ์ธ์.
์ง๋ฌธ์ด๋ ์ ์์ด ์๋ค๋ฉด Gitter๋ ํธ์ํฐ ์ฌ์ฉ์ ๋ง์ค์ด์ง ๋ง์ธ์:
**Build with โค๏ธ by David Dias
This project exists thanks to all the people who contribute. [Contribute].
Thank you to all our backers! ๐ [Become a backer]
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
All icons are provided by Icons8