CSS์ ์นํ์ด์ง ์ฑ๋ฅ๊ณผ์ ๊ด๊ณ
๋ด ์ผ์ด ์๋๋ผ๊ณ ์๊ฐํ๋ฉด ๊ด์ฌ์ด ์๊ฐ๋๋ผ๊ณ
20 POSTS
Web-performance 3
๊ทธ๋ฐ๋ฐ ์ brotli๋ฅผ ์ฌ์ฉํ์ง ์๋ ๊ฒ์ผ๊น? ๐ค
ํญ์ ์ ๊ทธ๋ด๊น๋ฅผ ๊ณ ๋ฏผํด ๋ด์ผ ํ๋ ๊ฒ ๊ฐ๋ค
๋ ๋์ ์์ถ ์๊ณ ๋ฆฌ์ฆ, Brotli
์ ์ด๊ฑธ ์ด์ ์์๋ ์๊ดด๊ฐ ๋ค๊ณ ๊ดด๋ก์
ํํฐ์ ๋ ์บ์ (partitioning cache)
Google Font ๋ฅผ ์จ๋ ์ด์ ์บ์ ํจ๊ณผ๋ ๋ชป๋ฐ๊ฒ ๋ค์
๋ ๋น ๋ฅธ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ
์๋ ๊ทธ๋์ IE 11 ์ธ์ ์์จ ๊ฑด๋ฐ์
์๋ฐ์คํฌ๋ฆฝํธ ํจ์์ ์ฑ๋ฅ ์ธก์ ํ๊ธฐ
์ฌ์ค ์ค์ ์์ ํด๋ณธ์ ์ ๊ฑฐ์ ์์ ๐
์ moment ๋ deprecated ๋์์๊น
๐๐
๋ค๋ก๊ฐ๊ธฐ, ์์ผ๋ก๊ฐ๊ธฐ์ ์บ์ aka bfcache
ํญ์ ๋ธ๋ผ์ฐ์ ์ ๊ฐ์ฌํ์ญ์์ค frontend developers.
PWA ์ ์ฉ ํ๊ธฐ ๋ฐ ์ฅ๋จ์
๋ ธ๋ ฅ์ ๋๋ง ํ๊ณ ์ฆ๊ธฐ๋๊ฒ๋ ๋๋ง ์ฆ๊ธด๋ค
์น์์ ์ฌ์ฉ ๊ฐ๋ฅํ ์คํ ๋ฆฌ์ง ์ดํด๋ณด๊ธฐ
PWA์์ ๊ฐ์ฅ ์ ์ ํ ๊ฒ์ ๋ฌด์์ผ๊น
Nodejs ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ํ ๋ฐฉ๋ฒ
์ฑ๋ฅ์ ์ข์ ์๋ก ์ข๋ค ๊ทธ๊ฒ์ด ์ฑ๋ฅ์ด๋๊น
๋ฆฌ์กํธ์ ๋ฉ๋ชจ์ด์ ์ด์
๋ธ๋ก๊ทธ์์ ๊ณ์ ๊ฐ์ ๊ธ์ ์ฐ๋ ๊ฒ ๊ฐ์๋ฐ๐คช
Nextjs 10 ๋ฆด๋ฆฌ์ฆ ๋ฐ ์ ์ฉ ํ๊ธฐ
nextjs ์ ๋ง ์ด์ผํ๋ค
HTTP Cache๋ก ๋ถํ์ํ ๋คํธ์ํฌ ์์ฒญ ์ค์ด๊ธฐ
HTTP Cache์ ๋ํ ์ดํด
์ Async ๋ณด๋ค๋ Defer๋ฅผ ์จ์ผํ ๊น
์คํฌ๋ฆฝํธ ์คํ ์ต์ ํ๋ฅผ ์ํด ์ ๊ณ ๋ฏผํด๋ด์ผ ํ๋ค.
ํฌ๋กฌ์์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ก๋ฉ ์์
ํฌ๋กฌ์์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ก๋ฉํ๋ ์์
Create React App์ serviceWorker๋ ๋ฌด์์ผ๊น
๊ฐ๋ ๋ดค์ง๋ง ์ ํ ๊ถ๊ธํด ํ์ง ์์๋ ๊ทธ ๊ฒ
Referer์ Referer-Policy๋ฅผ ์ํ ๊ฐ์ด๋
์น ์ดํ๋ฆฌ์ผ์ด์ ์์ request๋ฅผ ๋ฐ๊ธฐ ์ํ ์ต์ ์ Referer์ Referrer ์ ์ฑ
๋ธ๋ก๊ทธ ์ ๋ฐ์ดํธ์ ๋ํ ํ๊ณ
๋ฐฑ์๊ฐ ๋ ๋๋ง๋ค ๋ธ๋ก๊ทธ๋ฅผ ๊ฐ์์๋ ์ต๊ด
Webpack์ ํ์ฉํ ์ฑ๋ฅํฅ์ - ์บ์ฑ ํ์ฉํ๊ธฐ
[Make use of long-term caching](https://developers.google.com/web/fundamentals/performance/webpack/use-long-term-caching)์ ๋ฒ์ญํ ๊ธ์ ๋๋ค. ์ฑ ๋ก๋ฉ ์๋๋ฅผ ํฅ์์ํฌ ์ ์๋ ๋ฐฉ๋ฒ ์ค ...