CSS @compress์ ๋ํ ์ข ํฉ ๊ฐ์ด๋. ํ์ผ ํฌ๊ธฐ๋ฅผ ์ต์ ํํ๊ณ ์น์ฌ์ดํธ ๋ก๋ฉ ์๋๋ฅผ ๊ฐ์ ํ๋ฉฐ, ๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ์ํ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํค๋ ๊ธฐ์ ๊ณผ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ์ดํด๋ด ๋๋ค.
CSS @compress: ๊ธ๋ก๋ฒ ์น ์ฑ๋ฅ์ ์ํ ํ์ผ ํฌ๊ธฐ ์ต์ ํ ๋ง์คํฐํ๊ธฐ
ํ๋ ์น ๊ฐ๋ฐ ํ๊ฒฝ์์ ์น์ฌ์ดํธ ์ฑ๋ฅ ์ต์ ํ๋ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์ ์ธ๊ณ ์ฌ์ฉ์๋ ์์ ์ ์์น๋ ๊ธฐ๊ธฐ์ ๊ด๊ณ์์ด ๋น ๋ฅธ ๋ก๋ฉ ์๊ฐ๊ณผ ์ํํ ๊ฒฝํ์ ๊ธฐ๋ํฉ๋๋ค. ์ต์ ์ ์ฑ๋ฅ์ ๋ฌ์ฑํ๋ ๋ฐ ์์ด ์ค์ํ ํ ๊ฐ์ง ์ธก๋ฉด์ CSS ํ์ผ์ ํฌ๊ธฐ๋ฅผ ์ต์ํํ๋ ๊ฒ์ ๋๋ค. ๋ฐ๋ก ์ด ์ง์ ์์ ํจ๊ณผ์ ์ธ CSS ์์ถ ๊ธฐ์ ์ ์ดํดํ๊ณ ๊ตฌํํ๋ ๊ฒ์ด ํ์์ ์ ๋๋ค. CSS์ ๋ฌธ์ ๊ทธ๋๋ก์ `@compress` ๊ท์น์ ์์ง๋ง, ์ด ๊ธ์์๋ ์น์ฌ์ดํธ ์๋์ ์ ๋ฐ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ๊ธฐ ์ํ CSS ์์ถ์ ๊ฐ๋ ๊ณผ ๋๊ตฌ๋ค์ ์ดํด๋ด ๋๋ค.
CSS ํ์ผ ํฌ๊ธฐ๊ฐ ๊ธ๋ก๋ฒ ์น ์ฑ๋ฅ์ ์ค์ํ ์ด์
CSS ํ์ผ์ ํฌ๊ธฐ๋ ์ฌ๋ฌ ์ง์ญ์ ๊ฑธ์ณ ๊ธ์ ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ์ค์ํ ๋ช ๊ฐ์ง ํต์ฌ ์ฑ๋ฅ ์งํ์ ์ง์ ์ ์ธ ์ํฅ์ ๋ฏธ์นฉ๋๋ค:
- ํ์ด์ง ๋ก๋ ์๊ฐ: CSS ํ์ผ์ด ํด์๋ก ๋ค์ด๋ก๋ํ๊ณ ํ์ฑํ๋ ๋ฐ ๋ ์ค๋ ๊ฑธ๋ ค ํ์ด์ง๊ฐ ์์ ํ ๋ ๋๋ง๋๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ด ๋์ด๋ฉ๋๋ค. ์ด๋ ํนํ ์ธํฐ๋ท ์ฐ๊ฒฐ์ด ๋๋ฆฐ ์ฌ์ฉ์์๊ฒ ๋ถํธํจ์ ์ค ์ ์์ต๋๋ค.
- ๋์ญํญ ์๋น: ํฐ ํ์ผ์ ๋ ๋ง์ ๋์ญํญ์ ์๋นํ๋ฉฐ, ์ด๋ ๋ฐ์ดํฐ ์๊ธ์ ๊ฐ ์ ํ์ ์ด๊ฑฐ๋ ๋น์ผ ์ง์ญ์ ์ฌ์ฉ์์๊ฒ ์ค์ํ ๋ฌธ์ ๊ฐ ๋ ์ ์์ต๋๋ค. ํนํ ๋ชจ๋ฐ์ผ ๋ฐ์ดํฐ ๋น์ฉ์ด ๋์ ์ ์๋ ๊ฐ๋ฐ๋์๊ตญ์์ ๊ด๋ จ์ฑ์ด ๋์ต๋๋ค.
- ๋ชจ๋ฐ์ผ ์ฑ๋ฅ: ๋ชจ๋ฐ์ผ ๊ธฐ๊ธฐ๋ ์ข ์ข ์ฒ๋ฆฌ ๋ฅ๋ ฅ๊ณผ ๋ฉ๋ชจ๋ฆฌ๊ฐ ์ ํ์ ์ ๋๋ค. ํฐ CSS ํ์ผ์ ์ด๋ฌํ ๋ฆฌ์์ค์ ๋ถ๋ด์ ์ฃผ์ด ๋ ๋๋ง ์๋๋ฅผ ๋ฆ์ถ๊ณ ์ฌ์ฉ์ ์ธํฐํ์ด์ค์ ๋ฐ์์ฑ์ ๋จ์ด๋จ๋ฆด ์ ์์ต๋๋ค.
- ๊ฒ์ ์์ง ์ต์ ํ (SEO): Google๊ณผ ๊ฐ์ ๊ฒ์ ์์ง์ ํ์ด์ง ๋ก๋ ์๊ฐ์ ์์ ๊ฒฐ์ ์์ธ์ผ๋ก ๊ณ ๋ คํฉ๋๋ค. ๋ ๋น ๋ฅธ ์น์ฌ์ดํธ๋ ๊ฒ์ ๊ฒฐ๊ณผ์์ ๋ ๋์ ์์๋ฅผ ์ฐจ์งํ๋ ๊ฒฝํฅ์ด ์์ด ๋ ๋ง์ ์ ๊ธฐ์ ํธ๋ํฝ์ ์ ๋ํฉ๋๋ค.
- ์ฌ์ฉ์ ์ฐธ์ฌ: ์ฐ๊ตฌ์ ๋ฐ๋ฅด๋ฉด ์ฌ์ฉ์๋ ์น์ฌ์ดํธ ๋ก๋ฉ ์๊ฐ์ด ๋๋ฌด ๊ธธ๋ฉด ์ดํํ ๊ฐ๋ฅ์ฑ์ด ๋ ๋์ต๋๋ค. CSS ํ์ผ ํฌ๊ธฐ๋ฅผ ์ต์ ํํ๋ฉด ์ฌ์ฉ์ ์ฐธ์ฌ๋ฅผ ํฌ๊ฒ ๊ฐ์ ํ๊ณ ์ดํ๋ฅ ์ ์ค์ผ ์ ์์ต๋๋ค.
๋ถ๋ฏธ์ ๋๋จ์์์์ ์ฌ์ฉ์๋ฅผ ๋ชจ๋ ๋์์ผ๋ก ํ๋ ์น์ฌ์ดํธ๋ฅผ ์๊ฐํด๋ณด์ญ์์ค. ๋ถ๋ฏธ ์ฌ์ฉ์๋ ๊ณ ์ ์ธํฐ๋ท๊ณผ ๊ฐ๋ ฅํ ๊ธฐ๊ธฐ๋ฅผ ์ฌ์ฉํ ์ ์๋ ๋ฐ๋ฉด, ๋๋จ์์์ ์ฌ์ฉ์๋ ๋๋ฆฐ ๋ชจ๋ฐ์ผ ๋คํธ์ํฌ์ ๊ตฌํ ๊ธฐ๊ธฐ์ ์์กดํ ์ ์์ต๋๋ค. CSS ํ์ผ ํฌ๊ธฐ๋ฅผ ์ต์ ํํ๋ฉด ์ง๋ฆฌ์ ์์น๋ ๊ธฐ์ ์ธํ๋ผ์ ๊ด๊ณ์์ด ๋ชจ๋ ์ฌ์ฉ์์๊ฒ ์ผ๊ด๋๊ณ ์ฆ๊ฑฐ์ด ๊ฒฝํ์ ๋ณด์ฅํ ์ ์์ต๋๋ค.
CSS ํ์ผ ํฌ๊ธฐ ์ต์ ํ ๊ธฐ์
CSS ํ์ผ์ ํฌ๊ธฐ๋ฅผ ์ค์ด๊ธฐ ์ํด ์ฌ๋ฌ ๊ธฐ์ ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ด๋ฌํ ๊ธฐ์ ์ ํฌ๊ฒ ์ถ์(Minification)์ ์์ถ(Compression) ๋ ๊ฐ์ง ๋ฒ์ฃผ๋ก ๋๋ฉ๋๋ค.
1. CSS ์ถ์(Minification)
์ถ์๋ ๊ธฐ๋ฅ์ ์ํฅ์ ์ฃผ์ง ์์ผ๋ฉด์ CSS ์ฝ๋์์ ๋ถํ์ํ ๋ฌธ์๋ฅผ ์ ๊ฑฐํ๋ ๊ฒ์ ํฌํจํฉ๋๋ค. ์ฌ๊ธฐ์๋ ๋ค์์ด ํฌํจ๋ฉ๋๋ค:
- ๊ณต๋ฐฑ ์ ๊ฑฐ: ๊ณต๋ฐฑ, ํญ, ์ค ๋ฐ๊ฟ ๋ฌธ์๋ฅผ ์ ๊ฑฐํ๋ฉด ํ์ผ ํฌ๊ธฐ๋ฅผ ํฌ๊ฒ ์ค์ผ ์ ์์ต๋๋ค.
- ์ฃผ์ ์ ๊ฑฐ: ์ฃผ์์ ๊ฐ๋ฐ ์ค์๋ ์ ์ฉํ์ง๋ง ํ๋ก๋์ ํ๊ฒฝ์์๋ ํ์ํ์ง ์์ต๋๋ค. ์ฃผ์์ ์ ๊ฑฐํ๋ฉด ํ์ผ ํฌ๊ธฐ๊ฐ ์ค์ด๋ญ๋๋ค.
- ์ฝ๋ ๋จ์ถ: ์ฅํฉํ CSS ์์ฑ๊ณผ ๊ฐ์ ๋ ์งง์ ๋๋ฑํ ๊ฐ์ผ๋ก ๋์ฒดํฉ๋๋ค(์: ๋จ์ถ ์์ฑ ์ฌ์ฉ).
- ์ค๋ณต ์ ๊ฑฐ: ์ค๋ณต๋๊ฑฐ๋ ๋ถํ์ํ CSS ๊ท์น์ ์ ๊ฑฐํฉ๋๋ค.
์์:
์๋ณธ CSS:
/* Style for the main heading */
h1 {
font-size: 24px; /* Sets the font size */
color: #333; /* Sets the text color */
margin-bottom: 10px; /* Adds space below the heading */
}
์ถ์๋ CSS:
h1{font-size:24px;color:#333;margin-bottom:10px;}
CSS ์ถ์ ๋๊ตฌ:
- ์จ๋ผ์ธ ์ถ์ ๋๊ตฌ: CSS Minifier ๋ฐ Minify CSS์ ๊ฐ์ด CSS ์ฝ๋๋ฅผ ์ถ์ํ ์ ์๋ ์๋ง์ ์จ๋ผ์ธ ๋๊ตฌ๊ฐ ์์ต๋๋ค.
- ๋น๋ ๋๊ตฌ: Gulp, Grunt์ ๊ฐ์ ํ์คํฌ ๋ฌ๋ ๋ฐ Webpack, Parcel๊ณผ ๊ฐ์ ๋ชจ๋ ๋ฒ๋ค๋ฌ๋ ๋น๋ ์ํฌํ๋ก์ ์ผ๋ถ๋ก ์ถ์ ํ๋ก์ธ์ค๋ฅผ ์๋ํํ ์ ์์ต๋๋ค.
- ์ฝ๋ ์๋ํฐ: ๋ง์ ์ฝ๋ ์๋ํฐ์๋ ์ ์ฅ ์ CSS ํ์ผ์ ์๋์ผ๋ก ์ถ์ํ ์ ์๋ ํ๋ฌ๊ทธ์ธ์ด๋ ํ์ฅ ๊ธฐ๋ฅ์ด ์์ต๋๋ค.
2. CSS ์์ถ (Gzip ๋ฐ Brotli)
์์ถ์ ์๊ณ ๋ฆฌ์ฆ์ ์ฌ์ฉํ์ฌ ๋คํธ์ํฌ๋ฅผ ํตํด ์ ์ก๋๊ธฐ ์ ์ CSS ํ์ผ์ ํฌ๊ธฐ๋ฅผ ์ค์ด๋ ๊ฒ์ ํฌํจํฉ๋๋ค. ๊ฐ์ฅ ์ผ๋ฐ์ ์ธ ๋ ๊ฐ์ง ์์ถ ์๊ณ ๋ฆฌ์ฆ์ Gzip๊ณผ Brotli์ ๋๋ค.
๊ฐ. Gzip ์์ถ
Gzip์ ์ค๋ณต ๋ฐ์ดํฐ ํจํด์ ์๋ณํ๊ณ ๋์ฒดํ์ฌ ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ด๋ ๋๋ฆฌ ์ง์๋๋ ์์ถ ์๊ณ ๋ฆฌ์ฆ์ ๋๋ค. ๋๋ถ๋ถ์ ์น ์๋ฒ์ ๋ธ๋ผ์ฐ์ ๋ Gzip ์์ถ์ ์ง์ํ๋ฏ๋ก CSS ํ์ผ์ ์ต์ ํํ๋ ๋น๊ต์ ์ฝ๊ณ ํจ๊ณผ์ ์ธ ๋ฐฉ๋ฒ์ ๋๋ค.
Gzip ์๋ ๋ฐฉ์:
- ์น ์๋ฒ๊ฐ Gzip ์๊ณ ๋ฆฌ์ฆ์ ์ฌ์ฉํ์ฌ CSS ํ์ผ์ ์์ถํฉ๋๋ค.
- ์์ถ๋ ํ์ผ์ `Content-Encoding: gzip` ํค๋์ ํจ๊ป ์ฌ์ฉ์ ๋ธ๋ผ์ฐ์ ๋ก ์ ์ก๋ฉ๋๋ค.
- ๋ธ๋ผ์ฐ์ ๋ ํ์ด์ง๋ฅผ ๋ ๋๋งํ๊ธฐ ์ ์ ํ์ผ์ ์์ถ์ ํด์ ํฉ๋๋ค.
Gzip ์์ถ ํ์ฑํ:
Gzip ์์ถ์ ์๋ฒ ์ํํธ์จ์ด์ ๋ฐ๋ผ ๋ค์ํ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ์ฌ ์น ์๋ฒ์์ ํ์ฑํํ ์ ์์ต๋๋ค:
- Apache: `mod_deflate` ๋ชจ๋์ ์ฌ์ฉํฉ๋๋ค.
- Nginx: `ngx_http_gzip_module` ๋ชจ๋์ ์ฌ์ฉํฉ๋๋ค.
- IIS: IIS ๊ด๋ฆฌ์์์ Gzip ์์ถ์ ๊ตฌ์ฑํฉ๋๋ค.
์์ (Apache):
`.htaccess` ํ์ผ์ ๋ค์ ์ค์ ์ถ๊ฐํ์ญ์์ค:
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/css
</IfModule>
๋. Brotli ์์ถ
Brotli๋ Google์์ ๊ฐ๋ฐํ ์ต์ ์์ถ ์๊ณ ๋ฆฌ์ฆ์ผ๋ก Gzip๋ณด๋ค ํจ์ฌ ๋ ๋์ ์์ถ๋ฅ ์ ์ ๊ณตํฉ๋๋ค. Brotli๋ Gzip๋งํผ ๋๋ฆฌ ์ง์๋์ง๋ ์์ง๋ง ์ธ๊ธฐ๋ฅผ ์ป๊ณ ์์ผ๋ฉฐ ๋๋ถ๋ถ์ ์ต์ ๋ธ๋ผ์ฐ์ ์์ ์ง์๋ฉ๋๋ค.
Brotli์ ์ด์ :
- ๋ ๋์ ์์ถ๋ฅ : Brotli๋ Gzip๋ณด๋ค 20-30% ๋ ๋์ ์์ถ๋ฅ ์ ๋ฌ์ฑํ ์ ์์ด ํ์ผ ํฌ๊ธฐ๊ฐ ๋ ์์์ง๊ณ ๋ก๋ฉ ์๊ฐ์ด ๋นจ๋ผ์ง๋๋ค.
- ์ฑ๋ฅ ํฅ์: Brotli์ ๊ณ ๊ธ ์์ถ ์๊ณ ๋ฆฌ์ฆ์ ํนํ ์ธํฐ๋ท ์ฐ๊ฒฐ์ด ๋๋ฆฐ ์ฌ์ฉ์์๊ฒ ๋ ๋์ ์ฑ๋ฅ์ ์ ๊ณตํ ์ ์์ต๋๋ค.
Brotli ์์ถ ํ์ฑํ:
Brotli ์์ถ์ ๋ค์ํ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ์ฌ ์น ์๋ฒ์์ ํ์ฑํํ ์ ์์ต๋๋ค:
- Apache: `mod_brotli` ๋ชจ๋์ ์ฌ์ฉํฉ๋๋ค.
- Nginx: `ngx_http_brotli_module` ๋ชจ๋์ ์ฌ์ฉํฉ๋๋ค.
์์ (Nginx):
Nginx ๊ตฌ์ฑ ํ์ผ์ ๋ค์ ์ค์ ์ถ๊ฐํ์ญ์์ค:
brotli on;
brotli_comp_level 6;
brotli_types text/css application/javascript text/plain application/xml image/svg+xml application/json;
3. CSS ๋จ์ถ ์์ฑ
CSS ๋จ์ถ ์์ฑ์ ์ฌ์ฉํ๋ฉด ์์ฑํด์ผ ํ๋ ์ฝ๋์ ์์ ํฌ๊ฒ ์ค์ฌ ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ผ ์ ์์ต๋๋ค. ๋จ์ถ ์์ฑ์ ์ฌ์ฉํ๋ฉด ๋จ์ผ ์ ์ธ์์ ์ฌ๋ฌ CSS ์์ฑ์ ์ง์ ํ ์ ์์ต๋๋ค.
์์:
์ ์ฒด ์์ฑ:
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
๋จ์ถ ์์ฑ:
margin: 10px 20px;
์ผ๋ฐ์ ์ธ CSS ๋จ์ถ ์์ฑ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
marginpaddingborderfontbackground
4. ์ฌ์ฉํ์ง ์๋ CSS ์ ๊ฑฐ
์๊ฐ์ด ์ง๋จ์ ๋ฐ๋ผ CSS ํ์ผ์๋ ์น์ฌ์ดํธ์์ ๋ ์ด์ ํ์ํ์ง ์์ ์ฌ์ฉ๋์ง ์๋ CSS ๊ท์น์ด ์์ผ ์ ์์ต๋๋ค. ์ด๋ฌํ ์ฌ์ฉ๋์ง ์๋ ๊ท์น์ ์ ๊ฑฐํ๋ฉด ํ์ผ ํฌ๊ธฐ๋ฅผ ํฌ๊ฒ ์ค์ด๊ณ ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
์ฌ์ฉํ์ง ์๋ CSS ์๋ณ ๋๊ตฌ:
- PurgeCSS: PurgeCSS๋ HTML, JavaScript ๋ฐ ๊ธฐํ ํ์ผ์ ๋ถ์ํ์ฌ ์ฌ์ฉ๋์ง ์๋ CSS ๊ท์น์ ์๋ณํ๊ณ ์ ๊ฑฐํ๋ ๋๊ตฌ์ ๋๋ค.
- UnCSS: UnCSS๋ ์ฌ์ฉ๋์ง ์๋ CSS๋ฅผ ์ ๊ฑฐํ๋ ๋ ๋ค๋ฅธ ์ธ๊ธฐ ์๋ ๋๊ตฌ์ ๋๋ค.
- Chrome ๊ฐ๋ฐ์ ๋๊ตฌ Coverage ํญ: Chrome ๊ฐ๋ฐ์ ๋๊ตฌ์ Coverage ํญ์ ์ฌ์ฉ๋์ง ์๋ CSS ๋ฐ JavaScript ์ฝ๋๋ฅผ ์๋ณํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
5. ์ฝ๋ ๋ถํ (๋๊ท๋ชจ ํ๋ก์ ํธ์ฉ)
๋๊ท๋ชจ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝ์ฐ CSS๋ฅผ ๋ ์๊ณ ๊ด๋ฆฌํ๊ธฐ ์ฌ์ด ํ์ผ๋ก ๋ถํ ํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค. ์ด๋ ๊ฒ ํ๋ฉด ์ฌ์ฉ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ํน์ ํ์ด์ง๋ ์น์ ์ ํ์ํ CSS๋ง ๋ค์ด๋ก๋ํ์ฌ ์ด๊ธฐ ๋ก๋ ์๊ฐ์ ์ค์ผ ์ ์์ต๋๋ค.
์ฝ๋ ๋ถํ ๊ธฐ์ :
- ์ปดํฌ๋ํธ ๊ธฐ๋ฐ CSS: UI ์ปดํฌ๋ํธ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก CSS๋ฅผ ๊ตฌ์ฑํฉ๋๋ค.
- ๊ฒฝ๋ก ๊ธฐ๋ฐ CSS: ํ์ฌ ๊ฒฝ๋ก ๋๋ ํ์ด์ง๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ค๋ฅธ CSS ํ์ผ์ ๋ก๋ํฉ๋๋ค.
- ๋ฏธ๋์ด ์ฟผ๋ฆฌ: ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ํน์ ๊ธฐ๊ธฐ๋ ํ๋ฉด ํฌ๊ธฐ์ ๋ง๋ CSS๋ฅผ ๋ก๋ํฉ๋๋ค.
CSS ํ์ผ ํฌ๊ธฐ ์ต์ ํ๋ฅผ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
CSS ํ์ผ ํฌ๊ธฐ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์ต์ ํํ๋ ค๋ฉด ๋ค์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด์ญ์์ค:
- ํ๋ก์ธ์ค ์๋ํ: ์ถ์ ๋ฐ ์์ถ์ ๋น๋ ํ๋ก์ธ์ค์ ํตํฉํ์ฌ ๋ฐฐํฌ ์ ์ ๋ชจ๋ CSS ํ์ผ์ด ์ต์ ํ๋๋๋ก ํฉ๋๋ค.
- CDN ์ฌ์ฉ: ์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ(CDN)๋ ์ ์ธ๊ณ์ ์์นํ ์๋ฒ์์ CSS ํ์ผ์ ์บ์ํ๊ณ ์ ๊ณตํ์ฌ ์ง์ฐ ์๊ฐ์ ์ค์ด๊ณ ๋ค๋ฅธ ์ง์ญ ์ฌ์ฉ์์ ๋ก๋ฉ ์๊ฐ์ ๊ฐ์ ํ ์ ์์ต๋๋ค. Cloudflare ๋ฐ Akamai์ ๊ฐ์ ํ์ฌ๊ฐ CDN ์๋น์ค๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง: Google PageSpeed Insights ๋ฐ WebPageTest์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์น์ฌ์ดํธ์ ์ฑ๋ฅ์ ์ ๊ธฐ์ ์ผ๋ก ๋ชจ๋ํฐ๋งํ์ฌ ๊ฐ์ ํ ์์ญ์ ์๋ณํฉ๋๋ค.
- ๋ค์ํ ๊ธฐ๊ธฐ ๋ฐ ๋คํธ์ํฌ์์ ํ ์คํธ: ๋ค์ํ ๊ธฐ๊ธฐ ๋ฐ ๋คํธ์ํฌ ์กฐ๊ฑด์์ ์น์ฌ์ดํธ๋ฅผ ํ ์คํธํ์ฌ ๋ชจ๋ ์ฌ์ฉ์์๊ฒ ์ผ๊ด๋๊ณ ์ฆ๊ฑฐ์ด ๊ฒฝํ์ ๋ณด์ฅํฉ๋๋ค. ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ค์ํ ๋คํธ์ํฌ ์๋๋ฅผ ์๋ฎฌ๋ ์ด์ ํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค.
- ์ค์ CSS ์ฐ์ ์์ ์ง์ : ํ์ด์ง์ ์๋จ ๋ถ๋ถ(above-the-fold) ์ฝํ ์ธ ๋ฅผ ๋ ๋๋งํ๋ ๋ฐ ํ์ํ CSS๋ฅผ ์๋ณํ๊ณ ์ด๋ฅผ ์ธ๋ผ์ธ์ผ๋ก ๋๋ ๋์ ์ฐ์ ์์๋ก ์ ๋ฌํฉ๋๋ค. ์ด๋ ์น์ฌ์ดํธ์ ์ฒด๊ฐ ๋ก๋ฉ ์๊ฐ์ ๊ฐ์ ํ ์ ์์ต๋๋ค.
- CSS ์ ์ฒ๋ฆฌ๊ธฐ ํ๋ช ํ๊ฒ ์ฌ์ฉ: Sass ๋ฐ Less์ ๊ฐ์ CSS ์ ์ฒ๋ฆฌ๊ธฐ๋ ์ฝ๋ ๊ตฌ์ฑ ๋ฐ ์ ์ง ๊ด๋ฆฌ์ฑ์ ํฅ์์ํฌ ์ ์์ง๋ง, ์ ์คํ๊ฒ ์ฌ์ฉํ์ง ์์ผ๋ฉด ๋ ํฐ CSS ํ์ผ์ ์์ฑํ ์ ์์ต๋๋ค. ๋ฏน์ค์ธ ๋ฐ ๋ณ์์ ๊ฐ์ ๊ธฐ๋ฅ์ ์ ์คํ๊ฒ ์ฌ์ฉํ์ญ์์ค.
- ๊ณผ๋ํ ์ค์ฒฉ ํผํ๊ธฐ: ๊น๊ฒ ์ค์ฒฉ๋ CSS ๊ท์น์ ํ์ผ ํฌ๊ธฐ๋ฅผ ๋๋ฆฌ๊ณ ์ฑ๋ฅ์ ์ ํ์ํฌ ์ ์์ต๋๋ค. CSS ๊ท์น์ ๊ฐ๋ฅํ ํ ํํํ๊ฒ ์ ์งํ๋ ค๊ณ ๋ ธ๋ ฅํ์ญ์์ค.
- ์ด๋ฏธ์ง ์ต์ ํ: CSS์ ์ง์ ๊ด๋ จ์ ์์ง๋ง ์ด๋ฏธ์ง ์ต์ ํ๋ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค. WebP์ ๊ฐ์ ์ต์ ํ๋ ์ด๋ฏธ์ง ํ์์ ์ฌ์ฉํ๊ณ ์ด๋ฏธ์ง๋ฅผ ์์ถํ์ฌ ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ด์ญ์์ค.
์ต์ ํ ์ํฅ ์ธก์
CSS ์ต์ ํ ๊ธฐ์ ์ ๊ตฌํํ ํ์๋ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ๋ฏธ์น๋ ์ํฅ์ ์ธก์ ํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. Google PageSpeed Insights, WebPageTest, GTmetrix์ ๊ฐ์ ๋๊ตฌ๋ ๋ก๋ฉ ์๊ฐ, ํ์ผ ํฌ๊ธฐ ๋ฐ ๊ธฐํ ์ฑ๋ฅ ์งํ์ ๋ํ ๊ท์คํ ํต์ฐฐ๋ ฅ์ ์ ๊ณตํ ์ ์์ต๋๋ค.
๋ชจ๋ํฐ๋งํ ์ฃผ์ ์งํ:
- ์ต์ด ์ฝํ ์ธ ํ ํ์ธํธ (FCP): ํ๋ฉด์ ์ฒซ ๋ฒ์งธ ์ฝํ ์ธ ์กฐ๊ฐ์ด ๋ํ๋๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ธก์ ํฉ๋๋ค.
- ์ต๋ ์ฝํ ์ธ ํ ํ์ธํธ (LCP): ๊ฐ์ฅ ํฐ ์ฝํ ์ธ ์์๊ฐ ๋ณด์ด๊ฒ ๋๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ธก์ ํฉ๋๋ค.
- ์ด ์ฐจ๋จ ์๊ฐ (TBT): ํ์ด์ง๊ฐ ์ฌ์ฉ์ ์ ๋ ฅ์ ์๋ตํ์ง ๋ชปํ๋๋ก ์ฐจ๋จ๋ ์๊ฐ์ ์์ ์ธก์ ํฉ๋๋ค.
- ์ํธ์์ฉ๊น์ง์ ์๊ฐ (TTI): ํ์ด์ง๊ฐ ์์ ํ ์ํธ์์ฉ ๊ฐ๋ฅํด์ง๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ธก์ ํฉ๋๋ค.
- ํ์ด์ง ํฌ๊ธฐ: CSS, JavaScript, ์ด๋ฏธ์ง ๋ฐ ๊ธฐํ ์์ฐ์ ํฌํจํ์ฌ ํ์ด์ง๋ฅผ ๋ก๋ํ๋ ๋ฐ ํ์ํ ๋ชจ๋ ๋ฆฌ์์ค์ ์ด ํฌ๊ธฐ์ ๋๋ค.
์๊ฐ์ด ์ง๋จ์ ๋ฐ๋ผ ์ด๋ฌํ ์งํ๋ฅผ ์ถ์ ํจ์ผ๋ก์จ CSS ์ต์ ํ ๋ ธ๋ ฅ์ ํจ๊ณผ๋ฅผ ํ๊ฐํ๊ณ ์ถ๊ฐ ๊ฐ์ ์ด ํ์ํ ์์ญ์ ์๋ณํ ์ ์์ต๋๋ค.
๊ธ๋ก๋ฒ ๋ธ๋๋ ๋ฐ ์ต์ ํ ๊ธฐ์ ์ฌ๋ก
๋ง์ ๊ธ๋ก๋ฒ ๋ธ๋๋๋ ๋ค์ํ ์ฌ์ฉ์ ๊ธฐ๋ฐ์ ๋น ๋ฅด๊ณ ์์ ์ ์ธ ๊ฒฝํ์ ๋ณด์ฅํ๊ธฐ ์ํด CSS ์ต์ ํ๋ฅผ ์ฐ์ ์ํฉ๋๋ค. ๋ช ๊ฐ์ง ์๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- Google: Google์ ์น ์ฑ๋ฅ์ ๋ํ ํ์ ์ผ๋ก ์ ๋ช ํฉ๋๋ค. ๊ทธ๋ค์ ๋ค์ํ ์ ํ๊ณผ ์๋น์ค ์ ๋ฐ์ ๊ฑธ์ณ ๋น ๋ฅด๊ณ ๋ฐ์์ด ๋น ๋ฅธ ๊ฒฝํ์ ์ ๊ณตํ๊ธฐ ์ํด ๊ณ ๊ธ CSS ์ต์ ํ ๊ธฐ์ ์ ์ฌ์ฉํฉ๋๋ค.
- Amazon: Amazon์ ํ๋งค ๋ฐ ์ ํ์ ์ด์งํ๊ธฐ ์ํด ์น ์ฑ๋ฅ์ ํฌ๊ฒ ์์กดํฉ๋๋ค. ๊ทธ๋ค์ ์ถ์, ์์ถ ๋ฐ ์ฝ๋ ๋ถํ ์ ํฌํจํ ๋ค์ํ CSS ์ต์ ํ ๊ธฐ์ ์ ์ฌ์ฉํฉ๋๋ค.
- Netflix: Netflix๋ ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ๋ถ๋๋ฝ๊ณ ์ฆ๊ฑฐ์ด ์คํธ๋ฆฌ๋ฐ ๊ฒฝํ์ ์ ๊ณตํ๊ธฐ ์ํด CSS๋ฅผ ์ต์ ํํฉ๋๋ค. ๊ทธ๋ค์ ์ฑ๋ฅ์ ํฅ์์ํค๊ธฐ ์ํด ์ค์ CSS ๋ฐ ์ง์ฐ ๋ก๋ฉ๊ณผ ๊ฐ์ ๊ธฐ์ ์ ์ฌ์ฉํฉ๋๋ค.
- BBC: BBC๋ ๊ธ๋ก๋ฒ ๋ ์์๊ฒ ๋น ๋ฅด๊ณ ์ ๊ทผํ๊ธฐ ์ฌ์ด ๋ด์ค ๊ฒฝํ์ ์ ๊ณตํ๊ธฐ ์ํด CSS๋ฅผ ์ต์ ํํฉ๋๋ค. ๊ทธ๋ค์ ๋ชจ๋ ๊ธฐ๊ธฐ์์ ์ต์ ์ ์ฑ๋ฅ์ ๋ณด์ฅํ๊ธฐ ์ํด Gzip ์์ถ ๋ฐ ๋ฐ์ํ ๋์์ธ๊ณผ ๊ฐ์ ๊ธฐ์ ์ ์ฌ์ฉํฉ๋๋ค.
๊ฒฐ๋ก
CSS ํ์ผ ํฌ๊ธฐ ์ต์ ํ๋ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ๊ฐ์ ํ๊ณ ๊ธ๋ก๋ฒ ์ฌ์ฉ์์๊ฒ ๊ธ์ ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๋ฐ ์ค์ํ ์ธก๋ฉด์ ๋๋ค. ์ถ์, ์์ถ, ๋จ์ถ ์์ฑ ์ฌ์ฉ, ์ฌ์ฉํ์ง ์๋ CSS ์ ๊ฑฐ์ ๊ฐ์ ๊ธฐ์ ์ ๊ตฌํํจ์ผ๋ก์จ ํ์ผ ํฌ๊ธฐ๋ฅผ ํฌ๊ฒ ์ค์ด๊ณ ๋ก๋ฉ ์๊ฐ์ ๊ฐ์ ํ ์ ์์ต๋๋ค. ์์น๋ ๊ธฐ์ ์ธํ๋ผ์ ๊ด๊ณ์์ด ๋ชจ๋ ์ฌ์ฉ์์๊ฒ ์ผ๊ด๋๊ณ ์ฆ๊ฑฐ์ด ๊ฒฝํ์ ๋ณด์ฅํ๊ธฐ ์ํด ์ต์ ํ ํ๋ก์ธ์ค๋ฅผ ์๋ํํ๊ณ , CDN์ ์ฌ์ฉํ๊ณ , ์ฑ๋ฅ์ ๋ชจ๋ํฐ๋งํ๊ณ , ๋ค์ํ ๊ธฐ๊ธฐ ๋ฐ ๋คํธ์ํฌ์์ ํ ์คํธํ๋ ๊ฒ์ ์์ง ๋ง์ญ์์ค. ์น์ด ๊ณ์ ๋ฐ์ ํจ์ ๋ฐ๋ผ ์ต์ CSS ์ต์ ํ ๊ธฐ์ ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก์ ๋ํ ์ ๋ณด๋ฅผ ์ ์งํ๋ ๊ฒ์ ๊ฒฝ์ ์ฐ์๋ฅผ ์ ์งํ๊ณ ํ์ํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๋ฐ ํ์์ ์ ๋๋ค.