Need help with Front-End-Performance-Checklist?
Click the โ€œchatโ€ button below for chat support from the developer who created it, or find similar developers for support.

About the developer

parksb
281 Stars 47 Forks MIT License 32 Commits 0 Opened issues

Description

๐ŸŽฎ ๋” ๋น ๋ฅด๊ฒŒ ์ž‘๋™ํ•˜๋Š” ํ”„๋ก ํŠธ์—”๋“œ ์„ฑ๋Šฅ ์ฒดํฌ๋ฆฌ์ŠคํŠธ

Services available

!
?

Need anything else?

Contributors list

# 106
front-e...
web-dev...
HTML
CSS
18 commits
# 3,478
Git
JavaScr...
reactjs
Rust
7 commits
# 42,087
Shell
HTML
html-we...
Webpack
1 commit
# 16,069
preset
applesc...
React
ecmascr...
1 commit


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๊ฐ€ ํ•ญ์ƒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ ์ „์— ๋กœ๋“œ๋˜๋Š”์ง€ ํ™•์ธํ•˜์„ธ์š”.

    
    
    
    
    
    
    

    ์™œ:

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ „์— CSS ํƒœ๊ทธ๋ฅผ ๋‘๋ฉด ๋ธŒ๋ผ์šฐ์ €์˜ ๋ Œ๋”๋ง ์†๋„๋ฅผ ๋†’์ด๋Š” ๋ณ‘๋ ฌ ๋‹ค์šด๋กœ๋“œ๊ฐ€ ๊ฐ€๋Šฅํ•ด์ง‘๋‹ˆ๋‹ค.

    ์–ด๋–ป๊ฒŒ:

    ์˜ 
    ์™€ 
    ์ด 
     ์•ž์— ์žˆ๋Š”์ง€ ํ™•์ธํ•˜์„ธ์š”.
    
  • [ ] iframe ์ตœ์†Œํ™”: high ๋‹ค๋ฅธ ๊ธฐ์ˆ ์  ๊ฐ€๋Šฅ์„ฑ์ด ์—†์„ ๋•Œ๋งŒ iframe์„ ์‚ฌ์šฉํ•˜๊ณ , ์ตœ๋Œ€ํ•œ iframe์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋„๋ก ํ•˜์„ธ์š”.

  • [ ] Pre-load optimization with prefetch, dns-prefetch and prerender: low Popular browsers can use directive on

     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

     is in your 
     section.
    

โฌ† back to top

CSS

css

  • [ ] CSS ์••์ถ•: high CSS ํŒŒ์ผ์„ ์••์ถ•ํ•˜๊ณ , ์ตœ์ข… ํŒŒ์ผ์—์„œ ์ฃผ์„, ๊ณต๋ฐฑ, ์ค„๋ฐ”๊ฟˆ์„ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค.

    ์™œ:

    CSS ํŒŒ์ผ์„ ์••์ถ•ํ•˜๋ฉด ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ ๋” ์ ์€ ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†กํ•˜๊ฒŒ ๋˜๋ฉฐ, ์ฝ˜ํ…์ธ ๊ฐ€ ๋” ๋นจ๋ฆฌ ๋กœ๋“œ๋ฉ๋‹ˆ๋‹ค. ์šด์˜์—์„œ CSS ํŒŒ์ผ์„ ์••์ถ•ํ•˜๋Š” ๊ฒƒ์€ ์ค‘์š”ํ•œ ์ผ์ž…๋‹ˆ๋‹ค. ์ด๋Š” ๋Œ€์—ญํญ๊ณผ ๋ฆฌ์†Œ์Šค ์‚ฌ์šฉ์„ ์ค„์ด๊ณ ์ž ํ•˜๋Š” ๋ชจ๋“  ๋น„์ฆˆ๋‹ˆ์Šค์— ์žˆ์–ด ์‚ฌ์šฉ์ž์—๊ฒŒ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.

    ์–ด๋–ป๊ฒŒ:

    ๊ฐœ๋ฐœ์ด๋‚˜ ๋นŒ๋“œ ์ค‘, ๋˜๋Š” ๊ทธ ์ „์— ํŒŒ์ผ์„ ์ž๋™์œผ๋กœ ์••์ถ•ํ•ด์ฃผ๋Š” ํˆด์„ ์‚ฌ์šฉํ•˜์„ธ์š”.

  • [ ] ํ•ฉ์น˜๊ธฐ: medium ์—ฌ๋Ÿฌ CSS ํŒŒ์ผ๋“ค์„ ํ•˜๋‚˜์˜ ํŒŒ์ผ๋กœ ํ•ฉ์น˜์„ธ์š”. (HTTP/2 ์—์„œ๋Š” ํ•ญ์ƒ ์œ ํšจํ•˜์ง„ ์•Š์Šต๋‹ˆ๋‹ค.).

    
    
    
    

    ์™œ:

    ์—ฌ์ „ํžˆ HTTP/1์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค๋ฉด ํŒŒ์ผ์„ ํ•ฉ์น  ํ•„์š”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค๋งŒ ์„œ๋ฒ„๊ฐ€ HTTP/2๋ผ๋ฉด ๊ผญ ๊ทธ๋ ‡์ง€ ์•Š์Šต๋‹ˆ๋‹ค. (ํ…Œ์ŠคํŠธ๋ฅผ ํ•ด๋ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.)

    ์–ด๋–ป๊ฒŒ:

    ๊ฐœ๋ฐœ์ด๋‚˜ ๋นŒ๋“œ ์ค‘, ๋˜๋Š” ๊ทธ ์ „์— ํŒŒ์ผ์„ ํ•ฉ์ณ์ฃผ๋Š” ์˜จ๋ผ์ธ ํˆด, ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•˜์„ธ์š”.
    โƒ ๋ฌผ๋ก  ํ•ฉ์น˜๋Š” ์ž‘์—…์ด ํ”„๋กœ์ ํŠธ๋ฅผ ๋ฐฉํ•ดํ•˜์ง€๋Š” ์•Š๋„๋ก ํ•˜์„ธ์š”.

  • [ ] Non-blocking: high DOM์ด ๋กœ๋“œ๋˜๋Š”๋ฐ ์‹œ๊ฐ„์ด ๊ฑธ๋ฆฌ์ง€ ์•Š๋„๋ก CSS ํŒŒ์ผ์€ non-blocking ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

    
    

    ์™œ:

    CSS ํŒŒ์ผ์€ ํŽ˜์ด์ง€ ๋กœ๋“œ์™€ ๋ Œ๋”๋ง์„ ์ง€์—ฐ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    preload
    ๋ฅผ ํ†ตํ•ด ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํŽ˜์ด์ง€์˜ ์ฝ˜ํ…์ธ ๋ฅผ ๋ณด์—ฌ์ฃผ๊ธฐ ์ „์— CSS ํŒŒ์ผ์„ ๋กœ๋“œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ์–ด๋–ป๊ฒŒ:

    rel
    ์†์„ฑ์˜ ๊ฐ’์„
    preload
    ๋กœ ์ฃผ๊ณ ,
    as="style"
    ๋ฅผ
     ํƒœ๊ทธ์— ๋„ฃ์Šต๋‹ˆ๋‹ค.
    
  • [ ] Unused CSS: medium Remove unused CSS selectors.

    ์™œ:

    ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” CSS ์„ ํƒ์ž๋ฅผ ์ง€์šฐ๋ฉด ํŒŒ์ผ์˜ ํฌ๊ธฐ๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋กœ๋”ฉ ์†๋„๋ฅผ ๋†’์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ์–ด๋–ป๊ฒŒ:

    โš ๏ธ ํ•ญ์ƒ ์‚ฌ์šฉํ•˜๋ ค๋Š” CSS ํ”„๋ ˆ์ž„์›Œํฌ์— ์ด๋ฏธ reset / normalize ์ฝ”๋“œ๊ฐ€ ํฌํ•จ๋˜์–ด์žˆ์ง€ ์•Š์€์ง€ ์ฒดํฌํ•˜์„ธ์š”. ๊ฒฝ์šฐ์— ๋”ฐ๋ผ reset / normalize ํŒŒ์ผ์— ์žˆ๋Š” ๊ฒƒ์ด ํ•„์š”ํ•˜์ง€ ์•Š์„ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

  • [ ] CSS ํฌ๋ฆฌํ‹ฐ์ปฌ: high CSS ํฌ๋ฆฌํ‹ฐ์ปฌ (๋˜๋Š” "์–ด๋ณด๋ธŒ ๋” ํด๋“œ")์€ ํŽ˜์ด์ง€์˜ ๋ณด์ด๋Š” ๋ถ€๋ถ„์„ ๋ Œ๋”๋งํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋Š” ๋ชจ๋“  CSS๋ฅผ ์ˆ˜์ง‘ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ์ฃผ์š” CSS ํ˜ธ์ถœ ์ „, ๊ทธ๋ฆฌ๊ณ 

     ์‚ฌ์ด์— ํ•œ ์ค„๋กœ ์ž„๋ฒ ๋””๋“œ๋ฉ๋‹ˆ๋‹ค. (๊ฐ€๋Šฅํ•˜๋ฉด ์••์ถ•๋ฉ๋‹ˆ๋‹ค.)
    
    

    ์™œ:

    ์ค‘์š”ํ•œ CSS๋ฅผ ์ธ๋ผ์ธ์œผ๋กœ ๋„ฃ์œผ๋ฉด ์„œ๋ฒ„ ์š”์ฒญ์„ ์ค„์—ฌ ์›น ํŽ˜์ด์ง€์˜ ๋ Œ๋”๋ง ์†๋„๋ฅผ ๋†’์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ์–ด๋–ป๊ฒŒ:

    ์˜จ๋ผ์ธ ํˆด์ด๋‚˜ Addy Osmani๊ฐ€ ๊ฐœ๋ฐœํ•œ ๊ฒƒ๊ณผ ๊ฐ™์€ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•ด CSS ํฌ๋ฆฌํ‹ฐ์ปฌ์„ ์ƒ์„ฑํ•˜์„ธ์š”.

  • [ ] ์™ธ๋ถ€ ๋˜๋Š” ์ธ๋ผ์ธ CSS: high ์™ธ๋ถ€ ๋˜๋Š” ์ธ๋ผ์ธ CSS๋ฅผ

     ์•ˆ์— ๋‘์ง€ ๋งˆ์„ธ์š”. (HTTP/2์—์„œ๋Š” ์œ ํšจํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.)
    
    

    ์™œ:

    ์ด๋ ‡๊ฒŒ ํ•ด์•ผํ•˜๋Š” ์ฒซ ๋ฒˆ์งธ ์ด์œ ๋Š” ๋””์ž์ธ์—์„œ ์ฝ˜ํ…์ธ ๋ฅผ ๋ถ„๋ฆฌํ•˜๋Š” ๊ฒƒ์ด ์ข‹์€ ๊ด€ํ–‰์ด๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๋˜ํ•œ ์ด๋Š” ์ฝ”๋“œ ์œ ์ง€๋ณด์ˆ˜๋ฅผ ์‰ฝ๊ฒŒ ๋งŒ๋“ค๊ณ  ์‚ฌ์ดํŠธ ์ ‘๊ทผ์„ฑ์„ ๋†’์ด๋Š” ๋ฐ๋„ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค. ์„ฑ๋Šฅ๊ณผ ๊ด€๋ จํ•ด์„œ๋Š”, ์ด๊ฒƒ์ด HTML ํŽ˜์ด์ง€์˜ ํŒŒ์ผ ํฌ๊ธฐ์™€ ๋กœ๋”ฉ ์‹œ๊ฐ„์„ ์ค„์ด๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

    ์–ด๋–ป๊ฒŒ:

    ํ•ญ์ƒ ์™ธ๋ถ€ ์Šคํƒ€์ผ ์‹œํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ CSS๋ฅผ

    ์— ์ž„๋ฒ ๋“œํ•˜์„ธ์š”. (๊ทธ๋ฆฌ๊ณ  ๋‹ค๋ฅธ CSS ์„ฑ๋Šฅ ๊ทœ์น™์„ ๋”ฐ๋ฅด์„ธ์š”.)
    
  • [ ] ์Šคํƒ€์ผ์‹œํŠธ ๋ณต์žก๋„ ๋ถ„์„: high ์Šคํƒ€์ผ์‹œํŠธ๋ฅผ ๋ถ„์„ํ•˜๋Š” ๊ฒƒ์€ ๋ถˆํ•„์š”ํ•œ ์ค‘๋ณต CSS ์„ ํƒ์ž๋ฅผ ์ฐพ๋Š” ๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.

    ์™œ:

    ์ข…์ข… ์ค‘๋ณต, ๋˜๋Š” ์œ ํšจ์„ฑ ์—๋Ÿฌ๊ฐ€ CSS ์ฝ”๋“œ์—์„œ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ, CSS ํŒŒ์ผ์„ ๋ถ„์„ํ•˜๊ณ  ๋ณต์žก์„ฑ์„ ํ•ด๊ฒฐํ•˜๋ฉด CSS ํŒŒ์ผ์˜ ์†๋„๋ฅผ ๋†’์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. (๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋” ๋นจ๋ฆฌ ์ฝ์–ด ๋“ค์ด๊ธฐ ๋•Œ๋ฌธ์ด์ฃ .)

    ์–ด๋–ป๊ฒŒ:

    CSS ์ „์ฒ˜๋ฆฌ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•ด CSS๋ฅผ ์กฐ์งํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜์— ๋‚˜์—ด๋œ ์ผ๋ถ€ ์˜จ๋ผ์ธ ํˆด์ด ์ฝ”๋“œ๋ฅผ ๋ถ„์„ํ•˜๊ณ  ๋ฐ”๋กœ ์žก๋Š”๋ฐ ๋„์›€์ด ๋  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

โฌ† back to top

Fonts

fonts

  • ๐Ÿ“– A Book Apart, Webfont Handbook

  • [ ] ์›นํฐํŠธ ํฌ๋งท: medium ์›น ํ”„๋กœ์ ํŠธ ๋˜๋Š” ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ 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
    ๋ฅผ ์‚ฌ์šฉ: medium

    
    

    ์™œ:

    ์›น ์‚ฌ์ดํŠธ์— ์ ‘์†ํ•˜๋ฉด, ๋””๋ฐ”์ด์Šค๋Š” ์‚ฌ์ดํŠธ์˜ ์œ„์น˜์™€ ์—ฐ๊ฒฐํ•ด์•ผ ํ•˜๋Š” ์„œ๋ฒ„๋ฅผ ์ฐพ์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ €๋Š” DNS ์„œ๋ฒ„๋ฅผ ์ฐพ๊ณ , ๋ฆฌ์†Œ์Šค (ํฐํŠธ, CSS ํŒŒ์ผ...) ์ˆ˜์ง‘์ด ๋๋‚˜๊ธฐ ์ „, ์กฐํšŒ๊ฐ€ ์™„๋ฃŒ๋  ๋•Œ๊นŒ์ง€ ๋Œ€๊ธฐํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด๋•Œ prefetches์™€ preconnects๋Š” ๋ธŒ๋ผ์šฐ์ €๊ฐ€ DNS ์ •๋ณด๋ฅผ ์ฐพ๊ณ  ํฐํŠธ ํŒŒ์ผ์„ ํ˜ธ์ŠคํŒ…ํ•˜๋Š” ์„œ๋ฒ„์— ๋Œ€ํ•œ TCP ์—ฐ๊ฒฐ์„ ํ—ˆ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํฐํŠธ ์ •๋ณด์™€ ์„œ๋ฒ„์— ์š”์ฒญํ•ด์•ผ ํ•˜๋Š” ํฐํŠธ ํŒŒ์ผ์ด ๋‹ด๊ธด css ํŒŒ์ผ์„ ํŒŒ์‹ฑํ•  ๋•Œ ๋ฏธ๋ฆฌ DNS ์ •๋ณด๋ฅผ ํ™•์ธํ•˜๊ณ , ์ปค๋„ฅ์…˜ ํ’€์— ์žˆ๋Š” ์„œ๋ฒ„์— ๋Œ€ํ•œ ๊ฐœ๋ฐฉํ˜• ์—ฐ๊ฒฐ์„ ์ค€๋น„ํ•จ์œผ๋กœ์จ ์„ฑ๋Šฅ์„ ๋†’์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ์–ด๋–ป๊ฒŒ:

    โƒ ์›นํฐํŠธ๋ฅผ ์‚ฌ์ „ ์ˆ˜์ง‘ํ•˜๊ธฐ ์ „์—, ์›น์‚ฌ์ดํŠธ๋ฅผ ํ‰๊ฐ€ํ•˜๊ธฐ ์œ„ํ•ด ์›น ํŽ˜์ด์ง€ ํ…Œ์ŠคํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.
    โƒ teal colored DNS๋ฅผ ์ฐพ๊ณ  ์š”์ฒญ ์ค‘์ธ ํ˜ธ์ŠคํŠธ๋ฅผ ํ™•์ธํ•˜์„ธ์š”.
    โƒ

    ์— ๋‘” ์›นํฐํŠธ๋ฅผ ์‚ฌ์ „ ์ˆ˜์ง‘ํ•˜๊ณ  ํ•จ๊ป˜ ์‚ฌ์ „ ์ˆ˜์ง‘ํ•  ํ˜ธ์ŠคํŠธ๋„ค์ž„์„ ์ถ”๊ฐ€ํ•˜์„ธ์š”. 
    
  • [ ] ์›น ํฐํŠธ ํฌ๊ธฐ: medium ์›นํฐํŠธ ํฌ๊ธฐ๊ฐ€ 300kb๋ฅผ ๋„˜์ง€ ์•Š๋„๋ก ํ•˜์„ธ์š”. (๋ชจ๋“  ํŒŒ์ƒ ์š”์†Œ ํฌํ•จ)

  • [ ] ํ”Œ๋ž˜์‹œ ๋˜๋Š” ๋ณด์ด์ง€ ์•Š๋Š” ํ…์ŠคํŠธ ๋ฐฉ์ง€: medium ์›นํฐํŠธ๊ฐ€ ๋กœ๋“œ๋  ๋•Œ๊นŒ์ง€ ํˆฌ๋ช…ํ•œ ํ…์ŠคํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์„ธ์š”.

โฌ† back to top

Images

images

  • ๐Ÿ“– Image Bytes in 2018

    • [ ] ์ด๋ฏธ์ง€ ์ตœ์ ํ™”: high ์ด๋ฏธ์ง€๋Š” ์ตœ์ ํ™”๋˜์–ด์•ผ ํ•˜๋ฉฐ, ์ตœ์ข… ์‚ฌ์šฉ์ž์—๊ฒŒ ์˜ํ–ฅ์„ ๋ฏธ์น˜์ง€ ์•Š๋Š” ์„ ์—์„œ ์••์ถ•๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

    ์™œ:

    ์••์ถ•๋œ ์ด๋ฏธ์ง€๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋” ๋นจ๋ฆฌ ๋กœ๋“œ๋˜๊ณ , ๋ณด๋‹ค ์ ์€ ๋ฐ์ดํ„ฐ๋ฅผ ์†Œ๋น„ํ•ฉ๋‹ˆ๋‹ค.

    ์–ด๋–ป๊ฒŒ:

    โƒ ๊ฐ€๋Šฅํ•˜๋‹ค๋ฉด CSS3 ํšจ๊ณผ๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”. (์ž‘์€ ์ด๋ฏธ์ง€ ๋Œ€์‹ )
    โƒ ๊ฐ€๋Šฅํ•˜๋ฉด, ์ด๋ฏธ์ง€์— ์ธ์ฝ”๋”ฉ๋œ ํ…์ŠคํŠธ ๋Œ€์‹  ํฐํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.
    โƒ SVG๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.
    โƒ ํˆด์„ ์‚ฌ์šฉํ•˜๊ณ  ์••์ถ• ๋ ˆ๋ฒจ์„ 85 ๋ฏธ๋งŒ์œผ๋กœ ํ•˜์„ธ์š”. * ๐Ÿ“– Image Optimization | Web Fundamentals | Google Developers * ๐Ÿ“– Essential Image Optimization - An eBook by Addy Osmani * ๐Ÿ›  TinyJPG โ€“ Compress JPEG images intelligently * ๐Ÿ›  Kraken.io - Online Image Optimizer * ๐Ÿ›  Compressor.io - optimize and compress JPEG photos and PNG images * ๐Ÿ›  Cloudinary - Image Analysis Tool * ๐Ÿ›  ImageEngine - Image Webpage Loading Test * ๐Ÿ›  SVGOMG - Optimize SVG vector graphics files * [ ] ์ด๋ฏธ์ง€ ํ˜•์‹: high ์ ์ ˆํ•œ ์ด๋ฏธ์ง€ ํ˜•์‹์„ ์„ ํƒํ•˜์„ธ์š”.

    ์™œ:

    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์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ๋‚ซ๊ณ , ์–ด๋–จ ๋•Œ๋Š” ๊ทธ๋ ‡์ง€ ์•Š์Šต๋‹ˆ๋‹ค. * ๐Ÿ“– Serve Images in Next-Gen Formats  |  Tools for Web Developers  |  Google Developers * ๐Ÿ“– What Is the Right Image Format for Your Website? โ€” SitePoint * ๐Ÿ“– PNG8 - The Clear Winner โ€” SitePoint * ๐Ÿ“– 8-bit vs 16-bit - What Color Depth You Should Use And Why It Matters - DIY Photography - [ ] ๋ฒกํ„ฐ ์ด๋ฏธ์ง€ vs ๋ž˜์Šคํ„ฐ/๋น„ํŠธ๋งต: medium ๋น„ํŠธ๋งต ์ด๋ฏธ์ง€๋ณด๋‹ค๋Š” ๋ฒกํ„ฐ ์ด๋ฏธ์ง€๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”. (๊ฐ€๋Šฅํ•˜๋‹ค๋ฉด)

    ์™œ:

    ๋ฒกํ„ฐ ์ด๋ฏธ์ง€ (SVG)๋Š” ๋‹ค๋ฅธ ์ด๋ฏธ์ง€๋ณด๋‹ค ์ž‘๊ณ , SVG๋Š” ๋ฐ˜์‘์„ฑ์ด ๋›ฐ์–ด๋‚˜๋ฉฐ ์™„๋ฒฝํ•˜๊ฒŒ ํฌ๊ธฐ๊ฐ€ ๋ณ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฒกํ„ฐ ์ด๋ฏธ์ง€๋Š” CSS์— ์˜ํ•ด ์ˆ˜์ •๋˜๊ฑฐ๋‚˜ ์›€์ง์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. * [ ] ์ด๋ฏธ์ง€ ํฌ๊ธฐ: medium ์ตœ์ข…์ ์œผ๋กœ ๋‚˜ํƒ€๋‚˜๋Š” ์ด๋ฏธ์ง€ ํฌ๊ธฐ๋ฅผ ์•ˆ๋‹ค๋ฉด

    ์—
    width
    ์™€
    height
    ์†์„ฑ์„ ๋ช…์‹œํ•˜์„ธ์š”.

    ์™œ:

    ๋†’์ด์™€ ๋„ˆ๋น„๊ฐ€ ์„ค์ •๋˜์–ด ์žˆ์œผ๋ฉด ํŽ˜์ด์ง€๊ฐ€ ๋กœ๋“œ๋์„ ๋•Œ ์ด๋ฏธ์ง€๊ฐ€ ํ•„์š”๋กœํ•˜๋Š” ๊ณต๊ฐ„์ด ์˜ˆ์•ฝ๋ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ, ์ด ์†์„ฑ์ด ์—†๋‹ค๋ฉด, ๋ธŒ๋ผ์šฐ์ €๋Š” ์ด๋ฏธ์ง€์˜ ํฌ๊ธฐ๋ฅผ ์•Œ ์ˆ˜ ์—†๊ณ , ์ ์ ˆํ•œ ๊ณต๊ฐ„์„ ์˜ˆ์•ฝํ•ด ๋‘˜ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ํŽ˜์ด์ง€๋ฅผ ๋กœ๋”ฉํ•˜๋Š” ์ค‘์— ๋ ˆ์ด์•„์›ƒ์ด ๋ณ€ํ•˜๋Š” ํ˜„์ƒ์ด ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. (์ด๋ฏธ์ง€๋ฅผ ๋กœ๋“œํ•˜๋Š” ๋™์•ˆ) * [ ] Base64 ์ด๋ฏธ์ง€ ์‚ฌ์šฉ ์ง€์–‘: medium base64๋ฅผ ํ†ตํ•ด ๊ฒฐ๊ณผ์ ์œผ๋กœ ์ž‘์€ ์ด๋ฏธ์ง€๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์ง€๋งŒ, ์ด๊ฒƒ์ด ์ตœ๊ณ ์˜ ๋ฐฉ๋ฒ•์€ ์•„๋‹™๋‹ˆ๋‹ค. * ๐Ÿ“– Base64 Encoding & Performance, Part 1 and 2 by Harry Roberts * ๐Ÿ“– A closer look at Base64 image performance โ€“ The Page Not Found Blog * ๐Ÿ“– When to base64 encode images (and when not to) | David Calhoun * ๐Ÿ“– Base64 encoding images for faster pages | Performance and seo factors * [ ] ๋ ˆ์ด์ง€ ๋กœ๋”ฉ: medium ์ด๋ฏธ์ง€๋ฅผ ๋ ˆ์ด์ง€ ๋กœ๋”ฉ์‹œํ‚ค์„ธ์š”. (noscript ํด๋ฐฑ์ด ์–ธ์ œ๋‚˜ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.)

    ์–ด๋–ป๊ฒŒ:

    โƒ Lighthouse๋ฅผ ์‚ฌ์šฉํ•ด ์–ผ๋งˆ๋‚˜ ๋งŽ์€ ์ด๋ฏธ์ง€๊ฐ€ ์˜คํ”„์Šคํฌ๋ฆฐ๋˜๋Š” ์ง€ ํ™•์ธํ•˜์„ธ์š”.
    โƒ ์ด๋ฏธ์ง€๋ฅผ ๋ ˆ์ด์ง€ ๋กœ๋“œ์‹œ์ผœ์ฃผ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•˜์„ธ์š”. Make sure you target offscreen images only.
    โƒ Also make sure to lazyload alternative images shown at mouseover or upon other user actions. * ๐Ÿ›  verlok/lazyload: GitHub * ๐Ÿ›  aFarkas/lazysizes: GitHub * ๐Ÿ›  mfranzke/loading-attribute-polyfill: GitHub * ๐Ÿ“– Lazy Loading Images and Video  |  Web Fundamentals  |  Google Developers * ๐Ÿ“– 5 Brilliant Ways to Lazy Load Images For Faster Page Loads - Dynamic Drive Blog * [ ] ๋ฐ˜์‘ํ˜• ์ด๋ฏธ์ง€: medium ๋””์Šคํ”Œ๋ ˆ์ด ํฌ๊ธฐ์— ๋งž๋Š” ์ด๋ฏธ์ง€๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.

    ์™œ:

    ์ž‘์€ ๋””๋ฐ”์ด์Šค์—์„œ๋Š” ๋ทฐํฌํŠธ๋ณด๋‹ค ํฐ ์ด๋ฏธ์ง€๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์„œ๋กœ ๋‹ค๋ฅธ ํฌ๊ธฐ์˜ ์ด๋ฏธ์ง€๋ฅผ ์—ฌ๋Ÿฌ ๋ฒ„์ „์œผ๋กœ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค.

    ์–ด๋–ป๊ฒŒ:

    โƒ ์›ํ•˜๋Š” ํƒ€๊ฒŸ ๋””๋ฐ”์ด์Šค์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ํฌ๊ธฐ์˜ ์ด๋ฏธ์ง€๋ฅผ ๋งŒ๋“œ์„ธ์š”.
    โƒ

    srcset
    ๊ณผ
    picture
    ๋ฅผ ์‚ฌ์šฉํ•ด ๊ฐ ์ด๋ฏธ์ง€์˜ ์—ฌ๋Ÿฌ ๋ฒ„์ „์„ ์ œ๊ณตํ•˜์„ธ์š”. * ๐Ÿ“– Responsive images - Learn web development | MDN

โฌ† back to top

JavaScript

javascript

  • [ ] JS ์••์ถ•: high JavaScript ํŒŒ์ผ์„ ์••์ถ•ํ•˜๊ณ , ์ตœ์ข… ํŒŒ์ผ์—์„œ ์ฃผ์„, ๊ณต๋ฐฑ, ์ค„๋ฐ”๊ฟˆ์„ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค. (HTTP/2์—์„œ๋„ ์—ฌ์ „ํžˆ ์œ ํšจํ•ฉ๋‹ˆ๋‹ค.)

    ์™œ:

    ๋ถˆํ•„์š”ํ•œ ๊ณต๋ฐฑ, ์ฃผ์„, ๊ฐœํ–‰์„ ์ œ๊ฑฐํ•˜๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์˜ ํฌ๊ธฐ๋ฅผ ์ค„์ด๊ณ  ํŽ˜์ด์ง€์˜ ๋กœ๋”ฉ ์†๋„๋ฅผ ๋†’์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.๊ทธ๋ฆฌ๊ณ  ์‚ฌ์šฉ์ž์˜ ๋‹ค์šด๋กœ๋“œ ์‹œ๊ฐ„์„ ์ค„์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ์–ด๋–ป๊ฒŒ:

    ๊ฐœ๋ฐœ์ด๋‚˜ ๋นŒ๋“œ ์ค‘, ๋˜๋Š” ๊ทธ ์ „์— ํŒŒ์ผ์„ ์ž๋™์œผ๋กœ ์••์ถ•ํ•ด์ฃผ๋Š” ํˆด์„ ์‚ฌ์šฉํ•˜์„ธ์š”.

  • [ ] JavaScript ์•ˆ์— ๋‘์ง€ ์•Š๊ธฐ: medium (์›น์‚ฌ์ดํŠธ์—์„œ๋งŒ ์œ ํšจํ•ฉ๋‹ˆ๋‹ค.) ์—ฌ๋Ÿฌ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ๋ฐ”๋”” ์ค‘๊ฐ„์— ๋‘์ง€ ๋งˆ์„ธ์š”. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ๋‹ค์‹œ ๊ทธ๋ฃนํ™”ํ•ด ์™ธ๋ถ€ ํŒŒ์ผ์ด๋‚˜

     ๋˜๋Š” ํŽ˜์ด์ง€์˜ ๋งˆ์ง€๋ง‰(
     ์ด์ „)์— ๋‘๋„๋ก ํ•˜์„ธ์š”.
    
    

    ์™œ:

    ์ž๋ฐ”์ŠคํŠธ๋ฆฝํŠธ ์ž„๋ฒ ๋””๋“œ ์ฝ”๋“œ๋ฅผ

    ์— ๋‘๋ฉด DOM์ด ๊ตฌ์„ฑ๋˜๋Š” ๊ณผ์ •์—์„œ ์ฝ”๋“œ๊ฐ€ ๋กœ๋“œ๋˜๊ธฐ ๋•Œ๋ฌธ์— ํŽ˜์ด์ง€ ์†๋„๋ฅผ ๋–จ์–ด๋œจ๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ€์žฅ ์ข‹์€ ์˜ต์…˜์€ ์™ธ๋ถ€ ํŒŒ์ผ์„ 
    async
    ๋˜๋Š”
    defer
    ์†์„ฑ๊ณผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜์—ฌ DOM ๋กœ๋”ฉ์„ ๋ง‰์ง€ ์•Š๋„๋กํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋˜ ๋‹ค๋ฅธ ์˜ต์…˜์€ ์Šคํฌ๋ฆฝํŠธ๋ฅผ
    ์— ๋‘๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ์‹œ๊ฐ„ ๋ถ„์„ ์ฝ”๋“œ ๋˜๋Š” DOM์ด ์ฃผ์š” ์ฒ˜๋ฆฌ๋ถ€๋ถ„์— ๋„๋‹ฌํ•˜๊ธฐ ์ „์— ๋กœ๋“œ๋˜์–ด์•ผ ํ•˜๋Š” ์ž‘์€ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋‘˜ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
    

    ์–ด๋–ป๊ฒŒ:

    ๋ชจ๋“  ํŒŒ์ผ์ด

    async
    ๋˜๋Š”
    defer
    ๋ฅผ ํ†ตํ•ด ๋กœ๋“œ๋˜๋Š”์ง€ ํ™•์ธํ•˜์„ธ์š”. ๊ทธ๋ฆฌ๊ณ 
    ์— ์‚ฝ์ž…ํ•  ์ฝ”๋“œ๋ฅผ ํ˜„๋ช…ํ•˜๊ฒŒ ๊ฒฐ์ •ํ•˜์„ธ์š”.
    
  • [ ] Non-blocking ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ: high ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์„ ๋น„๋™๊ธฐ์ ์œผ๋กœ ๋กœ๋“œํ•˜๊ธฐ ์œ„ํ•ด

    async
    ๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ์ง€์—ฐ์‹œํ‚ค๊ธฐ ์œ„ํ•ด
    defer
    ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์„ธ์š”.
    
    
    

    ์™œ:

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” HTML ๋ฌธ์„œ์˜ ํŒŒ์‹ฑ์„ ์ฐจ๋‹จํ•˜๊ธฐ ๋•Œ๋ฌธ์—, ํŒŒ์„œ๋Š”

     ํƒœ๊ทธ์— ๋„๋‹ฌํ•  ๋•Œ (ํŠนํžˆ 
     ์•ˆ์— ์žˆ์„ ๋•Œ) ํŒŒ์‹ฑ์„ ๋ฉˆ์ถ”๊ณ  ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค. ์Šคํฌ๋ฆฝํŠธ๋ฅผ ํŽ˜์ด์ง€์˜ ์ƒ๋‹จ์— ๋‘๋Š” ๊ฒฝ์šฐ 
    async
    ๋˜๋Š”
    defer
    ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ ๊ทน ๊ถŒ์žฅ๋ฉ๋‹ˆ๋‹ค๋งŒ, ๋งŒ์•ฝ
     ํƒœ๊ทธ ๋ฐ”๋กœ ์•ž์— ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋‘๋Š” ๊ฒฝ์šฐ ์ค‘์š”๋„๊ฐ€ ๋–จ์–ด์ง‘๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์–ธ์ œ๋‚˜ ์ด ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ์„ฑ๋Šฅ ์ด์Šˆ๋ฅผ ํ”ผํ•˜๋Š” ๊ฒƒ์€ ์ข‹์€ ์Šต๊ด€์ž…๋‹ˆ๋‹ค.
    

    ์–ด๋–ป๊ฒŒ:

    โƒ

    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.

  • [ ] ๋””ํŽœ๋˜์‹œ ํฌ๊ธฐ ์ œํ•œ: low ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ˜„๋ช…ํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜์„ธ์š”. ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ, ๋˜‘๊ฐ™์€ ๊ธฐ๋Šฅ์„ ํ•˜์ง€๋งŒ ๋” ๊ฐ€๋ฒผ์šด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ์™œ:

    745 000 ํŒจํ‚ค์ง€ ์ค‘ ์‚ฌ์šฉํ•˜๋ ค๋Š” ํŒจํ‚ค์ง€ ํ•˜๋‚˜๋ฅผ npm์—์„œ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๊ฐ€์žฅ ์ข‹์€ ํŒจํ‚ค์ง€๋ฅผ ๊ณจ๋ผ์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, MomentJS๋Š” ๊ต‰์žฅํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ง€๋งŒ, ๋งŽ์€ ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. Day.js๊ฐ€ ๋งŒ๋“ค์–ด์ง„ ์ด์œ ์ฃ . Day.js 2kB vs Moment 16.4kB gz ์ž…๋‹ˆ๋‹ค.

    ์–ด๋–ป๊ฒŒ:

    ํ•ญ์ƒ ๋” ๊ฐ€๋ณ๊ณ  ์ข‹์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ฐพ๊ธฐ ์œ„ํ•ด ๋น„๊ตํ•˜์„ธ์š”. npm trends์™€ ๊ฐ™์€ ํˆด์„ ์ด์šฉํ•ด NPM ๋‹ค์šด๋กœ๋“œ ์ˆ˜๋ฅผ ๋น„๊ตํ•˜๊ฑฐ๋‚˜ Bundlephobia๋ฅผ ํ†ตํ•ด ๋””ํŽœ๋˜์‹œ์˜ ํฌ๊ธฐ๋ฅผ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • [ ] JavaScript ํ”„๋กœํŒŒ์ผ๋ง: medium ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์˜ ์„ฑ๋Šฅ ๋ฌธ์ œ๋ฅผ ์ฒดํฌํ•˜์„ธ์š”. (CSS๋„ ๊ฐ™์ด ์ฒดํฌํ•˜์„ธ์š”.)

    ์™œ:

    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ณต์žก๋„๋Š” ๋Ÿฐํƒ€์ž„ ์„ฑ๋Šฅ์„ ๋–จ์–ด๋œจ๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์œ„ํ—˜์„ฑ์ด ์žˆ๋Š” ์ด์Šˆ๋ฅผ ํ™•์ธํ•˜๋Š” ๊ฒƒ์€ ๋งค๋„๋Ÿฌ์šด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๋Š” ๋ฐ ํ•„์ˆ˜์ ์ž…๋‹ˆ๋‹ค.

    ์–ด๋–ป๊ฒŒ:

    ํฌ๋กฌ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ์˜ ํƒ€์ž„๋ผ์ธ ํˆด์„ ์ด์šฉํ•ด ์Šคํฌ๋ฆฝํŠธ ์ด๋ฒคํŠธ๋ฅผ ํ…Œ์ŠคํŠธํ•˜๊ณ  ๋„ˆ๋ฌด ์˜ค๋žœ ์‹œ๊ฐ„์„ ์†Œ๋ชจํ•˜๋Š” ์ด๋ฒคํŠธ๋ฅผ ์ฐพ์•„๋‚ด์„ธ์š”.

  • [ ] Use of Service Workers: medium You are using Service Workers in your PWA to cache data or execute possible heavy tasks without impacting the user experience of your application.    

โฌ† 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).

  • [ ] ์›นํŽ˜์ด์ง€ ํฌ๊ธฐ < 1500 KB: high ํŽ˜์ด์ง€์˜ ํฌ๊ธฐ + ๋ฆฌ์†Œ์Šค๋ฅผ ์ตœ๋Œ€ํ•œ ์ค„์ด์„ธ์š”

    ์™œ:

    500 KB ๋ฏธ๋งŒ์ด ์ด์ƒ์ ์ด์ง€๋งŒ ์›น์˜ ์ƒํƒœ์— ๋”ฐ๋ผ ํ‚ฌ๋กœ๋ฐ”์ดํŠธ์˜ ์ค‘์•™๊ฐ’์ด 1500 KB ์ •๋„๋กœ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. (๋ชจ๋ฐ”์ผ์—์„œ๋„ ๊ทธ๋ ‡์Šต๋‹ˆ๋‹ค.) ์ตœ์ƒ์˜ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๋ ค๋ฉด ํƒ€๊ฒŸ ์‚ฌ์šฉ์ž, ๋„คํŠธ์›Œํฌ ์—ฐ๊ฒฐ, ๋””๋ฐ”์ด์Šค์— ๋”ฐ๋ผ ์ด ํ‚ฌ๋กœ๋ฐ”์ดํŠธ๋ฅผ ์ตœ๋Œ€ํ•œ ์ค„์—ฌ์•ผ ํ•ฉ๋‹ˆ๋‹ค.

    ์–ด๋–ป๊ฒŒ:

    ํ”„๋ก ํŠธ์—”๋“œ ์„ฑ๋Šฅ ์ฒดํฌ๋ฆฌ์ŠคํŠธ์˜ ๋ชจ๋“  ๊ทœ์น™๋“ค์€ ๋ฆฌ์†Œ์Šค์™€ ์ฝ”๋“œ๋ฅผ ์ตœ๋Œ€ํ•œ ์ค„์ด๋„๋ก ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

  • [ ] ํŽ˜์ด์ง€ ๋กœ๋“œ ์‹œ๊ฐ„ < 3์ดˆ: high ํŽ˜์ด์ง€ ๋กœ๋“œ ์‹œ๊ฐ„์„ ์ตœ๋Œ€ํ•œ ์ค„์—ฌ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ฝ˜ํ…์ธ ๊ฐ€ ๋น ๋ฅด๊ฒŒ ์ „์†ก๋˜๋„๋ก ํ•˜์„ธ์š”.

    ์™œ:

    ์›น์‚ฌ์ดํŠธ๋‚˜ ์•ฑ์ด ๋นจ๋ผ์งˆ์ˆ˜๋ก ๋ฐ”์šด์Šค ์ฆ๊ฐ€ ๊ฐ€๋Šฅ์„ฑ์ด ์ค„์–ด๋“ญ๋‹ˆ๋‹ค. ํ•œํŽธ ์‚ฌ์šฉ์ž๋‚˜ ๋ฏธ๋ž˜์˜ ํด๋ผ์ด์–ธํŠธ๋ฅผ ์žƒ์„ ๊ฐ€๋Šฅ์„ฑ๋„ ์ค„์–ด๋“ญ๋‹ˆ๋‹ค. ์ด ์ฃผ์ œ์— ๋Œ€ํ•œ ๋งŽ์€ ์—ฐ๊ตฌ๊ฐ€ ์ด๋ฅผ ์ฆ๋ช…ํ•ฉ๋‹ˆ๋‹ค.

    ์–ด๋–ป๊ฒŒ:

    Page Speed Insight ๋˜๋Š” WebPageTest์™€ ๊ฐ™์€ ์˜จ๋ผ์ธ ํˆด์„ ์ด์šฉํ•ด ๋ฌด์—‡์ด ํŽ˜์ด์ง€๋ฅผ ๋Š๋ฆฌ๊ฒŒ ๋งŒ๋“œ๋Š”์ง€ ๋ถ„์„ํ•˜๊ณ , ํ”„๋ก ํŠธ์—”๋“œ ์ฒดํฌ ๋ฆฌ์ŠคํŠธ๋ฅผ ์ด์šฉํ•ด ๋กœ๋“œ ์‹œ๊ฐ„์„ ๊ฐœ์„ ํ•˜์„ธ์š”.

  • [ ] ์ฒซ ๋ฒˆ์งธ ๋ฐ”์ดํŠธ ์‹œ๊ฐ„(TTFB) < 1.3์ดˆ: high ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›๊ธฐ ์ „๊นŒ์ง€ ๋Œ€๊ธฐํ•˜๋Š” ์‹œ๊ฐ„์„ ์ตœ๋Œ€ํ•œ ์ค„์ด์„ธ์š”.

  • [ ] ์ฟ ํ‚ค ํฌ๊ธฐ: medium ๋งŒ์•ฝ ์ฟ ํ‚ค๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ๊ฐ ์ฟ ํ‚ค๊ฐ€ 4096 ๋ฐ”์ดํŠธ๋ฅผ ๋„˜์–ด์„œ๋Š” ์•ˆ ๋˜๋ฉฐ, ๋„๋ฉ”์ธ ๋„ค์ž„์ด 20๊ฐœ ์ด์ƒ์˜ ์ฟ ํ‚ค๋ฅผ ๊ฐ€์ ธ์„œ๋Š” ์•ˆ ๋ฉ๋‹ˆ๋‹ค.

    ์™œ:

    ์ฟ ํ‚ค๋Š” HTTP ํ—ค๋”์—์„œ ์›น ์„œ๋ฒ„์™€ ๋ธŒ๋ผ์šฐ์ € ์‚ฌ์ด์— ๊ตํ™˜๋ฉ๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž์˜ ์‘๋‹ต ์‹œ๊ฐ„์— ๋ฏธ์น˜๋Š” ์˜ํ–ฅ์„ ์ตœ์†Œํ™”ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์ฟ ํ‚ค์˜ ํฌ๊ธฐ๋ฅผ ์ตœ๋Œ€ํ•œ ์ค„์—ฌ์•ผ ํ•ฉ๋‹ˆ๋‹ค.

    ์–ด๋–ป๊ฒŒ:

    ๋ถˆํ•„์š”ํ•œ ์ฟ ํ‚ค๋ฅผ ์ œ๊ฑฐํ•˜์„ธ์š”.

  • [ ] 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.