---
type: bookmarks
tags: ['performance', 'speculation']
status: release
ctime: 2022-10-16
mtime: 2026-10-06
---

import QuoteLink from '@components/QuoteLink.astro'

<QuoteLink url="https://web.dev/articles/vitals">
  Web Vitals
</QuoteLink>

---

- [prefetch 와 prerender — Tachyon](/memo/268)
- [`blocking=render` 는 `<body>` 전에만 등록된다](/memo/567)
- [CSS containment](/memo/117)

---

Core Web Vitals & Performance Metrics

- [Web Vitals](https://web.dev/vitals/)
- [Largest Contentful Paint (LCP)](https://web.dev/lcp/)
- [Optimize Largest Contentful Paint](https://web.dev/optimize-lcp/)
- [Largest Contentful Paint(최대 콘텐츠풀 페인트, LCP)](https://web.dev/i18n/ko/lcp/)
- [Interaction to Next Paint(INP)](https://web.dev/articles/inp?hl=ko)

LCP 최적화

- [AddyOsmani.com - Preload late-discovered Hero images faster](https://addyosmani.com/blog/preload-hero-images/)
- [How to improve the performance of your hero images - MeasureWorks](https://measure.works/how-to-improve-the-performance-of-your-hero-images/)
- [Hack your PageSpeed LCP metric by enlarging your hero image | Erwin Hofman](https://www.erwinhofman.com/blog/hack-pagespeed-lcp-metric-by-enlarging-hero-image/)
- [Optimising images for better LCP web vitals scores | by Javier Villanueva | ITNEXT](https://itnext.io/optimising-images-for-better-lcp-web-vitals-scores-7e9866087973)
- [Improve Largest Contentful Paint (LCP) With A JS + CSS Trick - Propel Digital Media Solutions](https://www.pdms.ca/improve-largest-contentful-paint-lcp-with-a-js-css-trick/)
- [Get a perfect Largest Contentful Paint (LCP) time with a single line of code - DevisedLabs](https://www.devisedlabs.com/blog/largest-contentful-paint-lcp-hack)

이미지 및 리소스 로딩 최적화

- [The Humble `<img />` Element And Core Web Vitals — Smashing Magazine](https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/)
- [Preload, prefetch and other `<link />` tags: what they do and when to use them · PerfPerfPerf](https://3perf.com/blog/link-rels/)
- [Optimizing resource loading with Priority Hints](https://web.dev/priority-hints/)
- [향후 탐색 속도를 높이기 위해 리소스 미리 가져오기 | web.dev](https://web.dev/articles/link-prefetch?hl=ko)
- [즉각적인 페이지 탐색을 위해 Chrome에서 페이지 사전 렌더링 | Chrome for Developers](https://developer.chrome.com/docs/web-platform/prerender-pages?hl=ko)
- [Speculation Rules API - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API)
- https://csswizardry.com/2024/12/a-layered-approach-to-speculation-rules/
- https://blog.cloudflare.com/ko-kr/introducing-speed-brain/

사이트 속도 및 성능 최적화

- [Fast load times](https://web.dev/fast/)
- [Efficiently load third-party JavaScript](https://web.dev/efficiently-load-third-party-javascript/)
- [How to Stop Lighthouse Complaining About Render Blocking Google Fonts | Codeboosh](https://codeboosh.com/how-to-stop-lighthouse-complaining-about-render-blocking-google-fonts/)
- [How To Leverage Browser Caching to Improve Site Speed | DebugBear](https://www.debugbear.com/blog/browser-caching)

CSS 기반 성능 최적화

- [Improving rendering performance with CSS content-visibility | Read the Tea Leaves](https://nolanlawson.com/2024/09/18/improving-rendering-performance-with-css-content-visibility/)
- [CSS content-visibility for React devs - DEV Community](https://dev.to/sebastienlorber/css-content-visibility-for-react-devs-4a3i)

서드파티 스크립트 및 자원 관리

- [Best practices for using third-party embeds](https://web.dev/embed-best-practices/)
- [Optimize loading third-parties](https://www.patterns.dev/posts/third-party/)
- [A Next.js package for managing third-party libraries | Chrome for Developers](https://developer.chrome.com/blog/next-third-parties)
- [Building a Faster Web Experience with the postTask Scheduler | by Callie | The Airbnb Tech Blog | Medium](https://medium.com/airbnb-engineering/building-a-faster-web-experience-with-the-posttask-scheduler-276b83454e91)

Partytown 및 서드파티 스크립트 성능 개선

- [Welcome To Partytown](https://partytown.builder.io/)
- [How we cut 99% of our JavaScript with Qwik + Partytown](https://www.builder.io/blog/how-we-cut-99-percent-js-with-qwik-and-partytown)
- [Introducing Partytown 🎉: Run Third-Party Scripts From a Web Worker - DEV Community](https://dev.to/adamdbradley/introducing-partytown-run-third-party-scripts-from-a-web-worker-2cnp)

케이스 스터디: 웹 성능 개선 사례

- [How We Improved Our Core Web Vitals (Case Study) — Smashing Magazine](https://www.smashingmagazine.com/2021/05/core-web-vitals-case-study/)
- [Case study: Analyzing Notion app performance · PerfPerfPerf](https://3perf.com/blog/notion/)
- [A Netflix Web Performance Case Study | by Addy Osmani | Dev Channel | Medium](https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9)
- [React Performance Fixes on Airbnb Listing Pages | by Joe Lencioni | The Airbnb Tech Blog | Medium](https://medium.com/airbnb-engineering/recent-web-performance-fixes-on-airbnb-listing-pages-6cd8d93df6f4)
- [How We Improved SmashingMag Performance — Smashing Magazine](https://www.smashingmagazine.com/2021/01/smashingmag-performance-case-study/)
- Instagram 성능 개선 사례
  - [Making Instagram.com faster: Part 1](https://instagram-engineering.com/making-instagram-com-faster-part-1-62cc0c327538)
  - [Making Instagram.com faster: Part 2](https://instagram-engineering.com/making-instagram-com-faster-part-2-f350c8fba0d4?source=false---------3)
  - [Making Instagram.com faster: Part 3 — cache first](https://instagram-engineering.com/making-instagram-com-faster-part-3-cache-first-6f3f130b9669?source=false---------1)
  - [Making instagram.com faster: Code size and execution optimizations (Part 4)](https://instagram-engineering.com/making-instagram-com-faster-code-size-and-execution-optimizations-part-4-57668be796a8?source=false---------2)

메모리 및 성능 이슈 해결

- [Detached window memory leaks](https://web.dev/detached-window-memory-leaks/)
- [Performance Signals For Customizing Website UX — Smashing Magazine](https://www.smashingmagazine.com/2022/03/signals-customizing-website-user-experience/)