Awesome Open Source
Awesome Open Source


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 ํฌ๋ฆฌํ‹ฐ์ปฌ (๋˜๋Š” "์–ด๋ณด๋ธŒ ๋” ํด๋“œ")์€ ํŽ˜์ด์ง€์˜ ๋ณด์ด๋Š” ๋ถ€๋ถ„์„ ๋ Œ๋”๋งํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋Š” ๋ชจ๋“  CSS๋ฅผ ์ˆ˜์ง‘ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ์ฃผ์š” CSS ํ˜ธ์ถœ ์ „, ๊ทธ๋ฆฌ๊ณ  <style></style> ์‚ฌ์ด์— ํ•œ ์ค„๋กœ ์ž„๋ฒ ๋””๋“œ๋ฉ๋‹ˆ๋‹ค. (๊ฐ€๋Šฅํ•˜๋ฉด ์••์ถ•๋ฉ๋‹ˆ๋‹ค.)

    ์™œ:

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

    ์–ด๋–ป๊ฒŒ:

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

  • [ ] ์™ธ๋ถ€ ๋˜๋Š” ์ธ๋ผ์ธ CSS: high ์™ธ๋ถ€ ๋˜๋Š” ์ธ๋ผ์ธ CSS๋ฅผ <body> ์•ˆ์— ๋‘์ง€ ๋งˆ์„ธ์š”. (HTTP/2์—์„œ๋Š” ์œ ํšจํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.)

    ์™œ:

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

    ์–ด๋–ป๊ฒŒ:

    ํ•ญ์ƒ ์™ธ๋ถ€ ์Šคํƒ€์ผ ์‹œํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ CSS๋ฅผ <head>์— ์ž„๋ฒ ๋“œํ•˜์„ธ์š”. (๊ทธ๋ฆฌ๊ณ  ๋‹ค๋ฅธ CSS ์„ฑ๋Šฅ ๊ทœ์น™์„ ๋”ฐ๋ฅด์„ธ์š”.)

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

    ์™œ:

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

    ์–ด๋–ป๊ฒŒ:

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

โฌ† back to top

Fonts

fonts

  • [ ] ์›นํฐํŠธ ํฌ๋งท: 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

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    

    ์™œ:

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

    ์–ด๋–ป๊ฒŒ:

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

  • [ ] ์›น ํฐํŠธ ํฌ๊ธฐ: medium ์›นํฐํŠธ ํฌ๊ธฐ๊ฐ€ 300kb๋ฅผ ๋„˜์ง€ ์•Š๋„๋ก ํ•˜์„ธ์š”. (๋ชจ๋“  ํŒŒ์ƒ ์š”์†Œ ํฌํ•จ)

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

โฌ† back to top

Images

images

  • [ ] ๋ฒกํ„ฐ ์ด๋ฏธ์ง€ vs ๋ž˜์Šคํ„ฐ/๋น„ํŠธ๋งต: medium ๋น„ํŠธ๋งต ์ด๋ฏธ์ง€๋ณด๋‹ค๋Š” ๋ฒกํ„ฐ ์ด๋ฏธ์ง€๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”. (๊ฐ€๋Šฅํ•˜๋‹ค๋ฉด)

    ์™œ:

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

  • [ ] ์ด๋ฏธ์ง€ ํฌ๊ธฐ: medium ์ตœ์ข…์ ์œผ๋กœ ๋‚˜ํƒ€๋‚˜๋Š” ์ด๋ฏธ์ง€ ํฌ๊ธฐ๋ฅผ ์•ˆ๋‹ค๋ฉด <img>์— width์™€ height ์†์„ฑ์„ ๋ช…์‹œํ•˜์„ธ์š”.

    ์™œ:

    ๋†’์ด์™€ ๋„ˆ๋น„๊ฐ€ ์„ค์ •๋˜์–ด ์žˆ์œผ๋ฉด ํŽ˜์ด์ง€๊ฐ€ ๋กœ๋“œ๋์„ ๋•Œ ์ด๋ฏธ์ง€๊ฐ€ ํ•„์š”๋กœํ•˜๋Š” ๊ณต๊ฐ„์ด ์˜ˆ์•ฝ๋ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ, ์ด ์†์„ฑ์ด ์—†๋‹ค๋ฉด, ๋ธŒ๋ผ์šฐ์ €๋Š” ์ด๋ฏธ์ง€์˜ ํฌ๊ธฐ๋ฅผ ์•Œ ์ˆ˜ ์—†๊ณ , ์ ์ ˆํ•œ ๊ณต๊ฐ„์„ ์˜ˆ์•ฝํ•ด ๋‘˜ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ํŽ˜์ด์ง€๋ฅผ ๋กœ๋”ฉํ•˜๋Š” ์ค‘์— ๋ ˆ์ด์•„์›ƒ์ด ๋ณ€ํ•˜๋Š” ํ˜„์ƒ์ด ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. (์ด๋ฏธ์ง€๋ฅผ ๋กœ๋“œํ•˜๋Š” ๋™์•ˆ)

  • [ ] Base64 ์ด๋ฏธ์ง€ ์‚ฌ์šฉ ์ง€์–‘: medium base64๋ฅผ ํ†ตํ•ด ๊ฒฐ๊ณผ์ ์œผ๋กœ ์ž‘์€ ์ด๋ฏธ์ง€๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์ง€๋งŒ, ์ด๊ฒƒ์ด ์ตœ๊ณ ์˜ ๋ฐฉ๋ฒ•์€ ์•„๋‹™๋‹ˆ๋‹ค.

  • [ ] ๋ ˆ์ด์ง€ ๋กœ๋”ฉ: 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.

  • [ ] ๋ฐ˜์‘ํ˜• ์ด๋ฏธ์ง€: medium ๋””์Šคํ”Œ๋ ˆ์ด ํฌ๊ธฐ์— ๋งž๋Š” ์ด๋ฏธ์ง€๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.

    ์™œ:

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

    ์–ด๋–ป๊ฒŒ:

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

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

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

    ์™œ:

    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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (70,862)ย 
html (11,250)ย 
css (7,424)ย 
hacktoberfest (4,273)ย 
performance (624)ย 
frontend (524)ย 
resources (209)ย 
web-development (121)ย 
lists (89)ย 
reference (77)ย 
korean (60)ย 
front-end-development (59)ย 
checklist (47)ย 
guidelines (45)ย 
performance-metrics (43)ย