๐ŸŽฎ ๋” ๋น ๋ฅด๊ฒŒ ์ž‘๋™ํ•˜๋Š” ํ”„๋ก ํŠธ์—”๋“œ ์„ฑ๋Šฅ ์ฒดํฌ๋ฆฌ์ŠคํŠธ
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 5 commits ahead, 127 commits behind thedaviddias:master.
Fetching latest commitโ€ฆ
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.github
images
.DS_Store
.gitignore
CODE_OF_CONDUCT.md
LICENSE
README.md

README.md


Front-End Performance Checklist

ย  ํ”„๋ก ํŠธ์—”๋“œ ์„ฑ๋Šฅ ์ฒดํฌ๋ฆฌ์ŠคํŠธ ย 

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

ํ•œ๊ฐ€์ง€ ๋‹จ์ˆœํ•œ ๊ทœ์น™: "์„ฑ๋Šฅ์„ ๊ณ ๋ คํ•œ ์„ค๊ณ„์™€ ์ฝ”๋“œ"

ย  ย ย ย  PRs Welcome ย  ย  ย ย ย  Gitter ย  ย  ย  ย ย ย  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 ๋ชจ๋“ˆ์„ ์‚ฌ์šฉํ•ด ์ด ์ž‘์—…์„ ์ž๋™์œผ๋กœ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ๋ถˆํ•„์š”ํ•œ ์ฃผ์„ ์ œ๊ฑฐ: low ํŽ˜์ด์ง€์—์„œ ์ฃผ์„์ด ์ง€์›Œ์กŒ๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.

    ์™œ:

    ์ฃผ์„์€ ์‚ฌ์šฉ์ž์—๊ฒŒ ํ•„์š”ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์ตœ์ข… ํŒŒ์ผ์—์„œ ์ง€์›Œ์ ธ์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ์›๋ณธ์„ ์œ ์ง€ํ•˜๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ์—๋Š” ์ฃผ์„์„ ๋‚จ๊ฒจ๋‘˜ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ์–ด๋–ป๊ฒŒ:

    ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ HTML ์••์ถ• ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•ด ์ฃผ์„์„ ์ง€์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ๋ถˆํ•„์š”ํ•œ ์†์„ฑ ์ œ๊ฑฐ: low type="text/javascript"์ด๋‚˜ type="text/css์™€ ๊ฐ™์€ ํƒ€์ž… ์†์„ฑ์€ ๋” ์ด์ƒ ํ•„์š”ํ•˜์ง€ ์•Š์œผ๋ฉฐ, ์ง€์›Œ์•ผ ํ•ฉ๋‹ˆ๋‹ค.

    <!-- Before HTML5 -->
    <script type="text/javascript">
        // Javascript code
    </script>
    
    <!-- Today -->
    <script>
        // Javascript code
    </script>

    ์™œ:

    HTML5๋Š” text/css์™€ text/javascript๋ฅผ ๊ธฐ๋ณธ์œผ๋กœ ์ง€์›ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํƒ€์ž… ์†์„ฑ์ด ๋ถˆํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์›น์ด๋‚˜ ์•ฑ์—์„œ ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” ์ฝ”๋“œ๋Š” ์ง€์›Œ์•ผ ํ•˜๋ฉฐ, ๋ถˆํ•„์š”ํ•œ ์ฝ”๋“œ๋Š” ํŽ˜์ด์ง€๋ฅผ ๋ฌด๊ฒ๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

    ์–ด๋–ป๊ฒŒ:

    <link>์™€ <script>์— ํƒ€์ž… ์†์„ฑ์ด ๋‚จ์•„ ์žˆ๋Š”์ง€ ํ™•์ธํ•˜์„ธ์š”.

  • 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์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋„๋ก ํ•˜์„ธ์š”.

โฌ† back to top

CSS

css

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

    ์™œ:

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

    ์–ด๋–ป๊ฒŒ:

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

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

    <!-- Not recommended -->
    <script src="foo.js"></script>
    <script src="ajax.js"></script>
    
    <!-- Recommended -->
    <script src="combined.js"></script>

    ์™œ:

    ์—ฌ์ „ํžˆ 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> ํƒœ๊ทธ์— ๋„ฃ์Šต๋‹ˆ๋‹ค.

  • CSS ํด๋ž˜์Šค์˜ ๊ธธ์ด: low ํด๋ž˜์Šค์˜ ๊ธธ์ด๊ฐ€ HTML๊ณผ CSS ํŒŒ์ผ์— (๊ฒฐ๊ณผ์ ์œผ๋กœ) ์˜ํ–ฅ์„ ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ์™œ:

    ์„ฑ๋Šฅ ์˜ํ–ฅ์€ ๋ฌธ์ œ์˜ ์—ฌ์ง€๊ฐ€ ์žˆ์œผ๋ฉฐ, ์ด๋ฆ„์„ ์ง“๋Š” ์ „๋žต์„ ๊ฒฐ์ •ํ•˜๋Š” ๊ฒƒ์€ ์Šคํƒ€์ผ์‹œํŠธ์˜ ์œ ์ง€๊ด€๋ฆฌ์— ์ƒ๋‹นํ•œ ์˜ํ–ฅ์„ ๋ฏธ์น  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋งŒ์•ฝ BEM์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค๋ฉด, ๊ฒฝ์šฐ์— ๋”ฐ๋ผ ํด๋ž˜์Šค ์ด๋ฆ„์— ํ•„์š” ์ด์ƒ์˜ ๋ฌธ์ž๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฆ„์„ ํ˜„๋ช…ํ•˜๊ฒŒ ์ •ํ•˜๋Š” ๊ฒƒ์€ ์–ธ์ œ๋‚˜ ์ค‘์š”ํ•œ ์ผ์ž…๋‹ˆ๋‹ค.

    ์–ด๋–ป๊ฒŒ:

    ๋ฌธ์ž์˜ ๊ธธ์ด์— ์ œํ•œ์„ ๋‘”๋‹ค๋Š” ๊ฒƒ์ด ๋ˆ„๊ตฐ๊ฐ€์—๊ฒŒ๋Š” ํฅ๋ฏธ๋กœ์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค๋งŒ, ์›น์‚ฌ์ดํŠธ๋ฅผ ์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ๋กœ ๋ถ„๋ฆฌํ•˜๋ฉด ํด๋ž˜์Šค์™€ ํด๋ž˜์Šค์˜ ๊ธธ์ด๋ฅผ ์ค„์ด๋Š”๋ฐ ๋„์›€์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” CSS: medium ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” CSS ์„ ํƒ์ž๋ฅผ ์ง€์šฐ์„ธ์š”.

    ์™œ:

    ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” 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๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.

    ์™œ:

    ๊ตฌ๊ธ€์— ๋”ฐ๋ฅด๋ฉด, WOFF 2.0 ์›น ํฐํŠธ ์••์ถ• ํฌ๋งท์€ WOFF 1.0๋ณด๋‹ค ํ‰๊ท  30% ๋” ๋งŽ์ด ์“ฐ์ž…๋‹ˆ๋‹ค. TTF์™€ WOFF 2.0, WOFF 1.0์„ ๋Œ€์ฒด์ œ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

    ์–ด๋–ป๊ฒŒ:

    ์ƒˆ๋กœ์šด ํฐํŠธ๋ฅผ ๊ตฌ๋งคํ•˜๊ธฐ ์ „์— ์ œ๊ณต์ž๊ฐ€ 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

  • ๐Ÿ“– Image Bytes in 2018

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

    ์™œ:

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

    ์–ด๋–ป๊ฒŒ:

    โƒ ๊ฐ€๋Šฅํ•˜๋‹ค๋ฉด CSS3 ํšจ๊ณผ๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”. (์ž‘์€ ์ด๋ฏธ์ง€ ๋Œ€์‹ )
    โƒ ๊ฐ€๋Šฅํ•˜๋ฉด, ์ด๋ฏธ์ง€์— ์ธ์ฝ”๋”ฉ๋œ ํ…์ŠคํŠธ ๋Œ€์‹  ํฐํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.
    โƒ SVG๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.
    โƒ ํˆด์„ ์‚ฌ์šฉํ•˜๊ณ  ์••์ถ• ๋ ˆ๋ฒจ์„ 85 ๋ฏธ๋งŒ์œผ๋กœ ํ•˜์„ธ์š”.

  • ์ด๋ฏธ์ง€ ํ˜•์‹: high ์ ์ ˆํ•œ ์ด๋ฏธ์ง€ ํ˜•์‹์„ ์„ ํƒํ•˜์„ธ์š”.

    ์™œ:

    ์›น ์‚ฌ์ดํŠธ๋ฅผ ๋Š๋ฆฌ๊ฒŒ ๋งŒ๋“ค์ง€ ์•Š๋Š” ์ด๋ฏธ์ง€ ํ˜•์‹์„ ์‚ฌ์šฉํ•˜์„ธ์š”.

    ์–ด๋–ป๊ฒŒ:

    โƒ Lighthouse๋ฅผ ์‚ฌ์šฉํ•ด ์ด๋ฏธ์ง€๊ฐ€ ์ตœ์ข…์ ์œผ๋กœ ์ฐจ์„ธ๋Œ€ ํฌ๋งท(JPEG 2000m JPEG XR ๋˜๋Š” WebP)์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ํ™•์ธํ•˜์„ธ์š”.
    โƒ ๋‹ค๋ฅธ ํฌ๋งท์„ ๋น„๊ตํ•˜์„ธ์š”. ์–ด๋–จ ๋•Œ๋Š” PNG8์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด PNG16์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ๋‚ซ๊ณ , ์–ด๋–จ ๋•Œ๋Š” ๊ทธ๋ ‡์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

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

    ์™œ:

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

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

    ์™œ:

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

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

  • ๋ ˆ์ด์ง€ ๋กœ๋”ฉ: medium ์ด๋ฏธ์ง€๋ฅผ ๋ ˆ์ด์ง€ ๋กœ๋”ฉ์‹œํ‚ค์„ธ์š”. (noscript ํด๋ฐฑ์ด ์–ธ์ œ๋‚˜ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.)

    ์™œ:

    ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ํ˜„์žฌ ํŽ˜์ด์ง€์˜ ๋ฐ˜์‘ ์‹œ๊ฐ„์„ ๊ฐœ์„ ํ•˜๊ณ  ์‚ฌ์šฉ์ž์—๊ฒŒ ํ•„์š”ํ•˜์ง€ ์•Š์€ ์ด๋ฏธ์ง€๋ฅผ ๋กœ๋”ฉํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ์–ด๋–ป๊ฒŒ:

    โƒ Lighthouse๋ฅผ ์‚ฌ์šฉํ•ด ์–ผ๋งˆ๋‚˜ ๋งŽ์€ ์ด๋ฏธ์ง€๊ฐ€ ์˜คํ”„์Šคํฌ๋ฆฐ๋˜๋Š” ์ง€ ํ™•์ธํ•˜์„ธ์š”.
    โƒ ์ด๋ฏธ์ง€๋ฅผ ๋ ˆ์ด์ง€ ๋กœ๋“œ์‹œ์ผœ์ฃผ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•˜์„ธ์š”.

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

    ์™œ:

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

    ์–ด๋–ป๊ฒŒ:

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

โฌ† back to top

JavaScript

javascript

  • JS ์••์ถ•: high CSS ํŒŒ์ผ์„ ์••์ถ•ํ•˜๊ณ , ์ตœ์ข… ํŒŒ์ผ์—์„œ ์ฃผ์„, ๊ณต๋ฐฑ, ์ค„๋ฐ”๊ฟˆ์„ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค. (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">
    
    <!-- Async Attribute -->
    <script async src="foo.js">

    ์™œ:

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

    ์–ด๋–ป๊ฒŒ:

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

  • ์ตœ์ ํ™”์™€ JS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์—…๋ฐ์ดํŠธ: medium ํ”„๋กœ์ ํŠธ์—๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ํ•„์š”ํ•˜๋ฉฐ (๋‹จ์ˆœํ•œ ๊ธฐ๋Šฅ์„ ์œ„ํ•ด ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ง€ํ–ฅํ•˜์„ธ์š”.), ์ด๋“ค์„ ์ตœ์‹ ๋ฒ„์ „์œผ๋กœ ์—…๋ฐ์ดํŠธํ•˜๊ณ  ๋ถˆํ•„์š”ํ•œ ๋ฉ”์†Œ๋“œ๋“ค์ด ๋‹น์‹ ์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ์••๋„ํ•˜์ง€ ์•Š๋„๋ก ํ•˜์„ธ์š”.

    ์™œ:

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

    ์–ด๋–ป๊ฒŒ:

    ๋งŒ์•ฝ ํ”„๋กœ์ ํŠธ๊ฐ€ NPM ํŒจํ‚ค์ง€๋“ค์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด, npm-check๊ฐ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์—…๊ทธ๋ ˆ์ด๋“œ / ์—…๋ฐ์ดํŠธํ•˜๋Š” ๋ฐ ์œ ์šฉํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

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

    ์™œ:

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

    ์–ด๋–ป๊ฒŒ:

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

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

    ์™œ:

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

    ์–ด๋–ป๊ฒŒ:

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

โฌ† back to top

Server

server-side

  • ์›นํŽ˜์ด์ง€ ํฌ๊ธฐ < 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 ์›น ์‚ฌ์ดํŠธ์—์„œ HTTPS๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋„๋กํ•˜๊ณ  HTTP๋ฅผ ์ด์šฉํ•˜๋Š” ์†Œ์Šค์—์„œ ํŒŒ์ผ์„ ๊ฐ€์ ธ์˜ค์„ธ์š”.

  • ์—ฐ๊ฒฐ ๊ฐ€๋Šฅํ•œ ํŒŒ์ผ ์ œ๊ณต: high ์—ฐ๊ฒฐ ๋ถˆ๊ฐ€๋Šฅํ•œ ํŒŒ์ผ(404)์„ ์š”์ฒญํ•˜์ง€ ๋งˆ์„ธ์š”.

  • ์˜ฌ๋ฐ”๋ฅธ HTTP ์บ์‹œ ํ—ค๋” ์„ค์ •: high ๋ธŒ๋ผ์šฐ์ €์™€ ์„œ๋ฒ„ ์‚ฌ์ด ๋น„์šฉ์ด ํฐ ์™•๋ณต์„ ํ”ผํ•˜๋„๋ก HTTP ํ—ค๋”๋ฅผ ์„ค์ •ํ•˜์„ธ์š”.
  • GZIP / Brotli ์••์ถ• ํ™œ์„ฑํ™”: high

โฌ† back to top


Performances and JS Frameworks

React

Vue

Performances and CMS

WordPress

Articles

Plugins recommended


Translations

ํ”„๋ก ํŠธ ์—”๋“œ ์„ฑ๋Šฅ ์ฒดํฌ๋ฆฌ์ŠคํŠธ๊ฐ€ ๋‹ค๋ฅธ ์–ธ์–ด๋กœ ์ฝํžˆ๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค! ์ปจํŠธ๋ฆฌ๋ทฐ์…˜์„ ๋ง์„ค์ด์ง€ ๋ง์•„์ฃผ์„ธ์š”!

Contributing

์ด์Šˆ๋ฅผ ์—ด๊ฑฐ๋‚˜ ํ’€ ๋ฆฌํ€˜์ŠคํŠธ๋ฅผ ๋ณด๋‚ด ๋ณ€๊ฒฝ ์‚ฌํ•ญ์ด๋‚˜ ์ถ”๊ฐ€์ ์„ ์ œ์•ˆํ•˜์„ธ์š”.

Support

์งˆ๋ฌธ์ด๋‚˜ ์ œ์•ˆ์ด ์žˆ๋‹ค๋ฉด Gitter๋‚˜ ํŠธ์œ„ํ„ฐ ์‚ฌ์šฉ์„ ๋ง์„ค์ด์ง€ ๋งˆ์„ธ์š”:

Author

Build with โค๏ธ by David Dias at @influitive ๐Ÿ‡จ๐Ÿ‡ฆ

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