Core Web Vitals & Performance Metrics
- Web Vitals
- Largest Contentful Paint (LCP)
- Optimize Largest Contentful Paint
- Largest Contentful Paint(최대 콘텐츠풀 페인트, LCP)
- Interaction to Next Paint(INP)
LCP 최적화
- AddyOsmani.com - Preload late-discovered Hero images faster
- How to improve the performance of your hero images - MeasureWorks
- Hack your PageSpeed LCP metric by enlarging your hero image | Erwin Hofman
- Optimising images for better LCP web vitals scores | by Javier Villanueva | ITNEXT
- Improve Largest Contentful Paint (LCP) With A JS + CSS Trick - Propel Digital Media Solutions
- Get a perfect Largest Contentful Paint (LCP) time with a single line of code - DevisedLabs
이미지 및 리소스 로딩 최적화
- The Humble
<img />Element And Core Web Vitals — Smashing Magazine - Preload, prefetch and other
<link />tags: what they do and when to use them · PerfPerfPerf - Optimizing resource loading with Priority Hints
- 향후 탐색 속도를 높이기 위해 리소스 미리 가져오기 | web.dev
- 즉각적인 페이지 탐색을 위해 Chrome에서 페이지 사전 렌더링 | Chrome for Developers
- Speculation Rules API - Web APIs | MDN
- https://csswizardry.com/2024/12/a-layered-approach-to-speculation-rules/
- https://blog.cloudflare.com/ko-kr/introducing-speed-brain/
사이트 속도 및 성능 최적화
- Fast load times
- Efficiently load third-party JavaScript
- How to Stop Lighthouse Complaining About Render Blocking Google Fonts | Codeboosh
- How To Leverage Browser Caching to Improve Site Speed | DebugBear
CSS 기반 성능 최적화
- Improving rendering performance with CSS content-visibility | Read the Tea Leaves
- CSS content-visibility for React devs - DEV Community
서드파티 스크립트 및 자원 관리
- Best practices for using third-party embeds
- Optimize loading third-parties
- A Next.js package for managing third-party libraries | Chrome for Developers
- Building a Faster Web Experience with the postTask Scheduler | by Callie | The Airbnb Tech Blog | Medium
Partytown 및 서드파티 스크립트 성능 개선
- Welcome To Partytown
- How we cut 99% of our JavaScript with Qwik + Partytown
- Introducing Partytown 🎉: Run Third-Party Scripts From a Web Worker - DEV Community
케이스 스터디: 웹 성능 개선 사례
- How We Improved Our Core Web Vitals (Case Study) — Smashing Magazine
- Case study: Analyzing Notion app performance · PerfPerfPerf
- A Netflix Web Performance Case Study | by Addy Osmani | Dev Channel | Medium
- React Performance Fixes on Airbnb Listing Pages | by Joe Lencioni | The Airbnb Tech Blog | Medium
- How We Improved SmashingMag Performance — Smashing Magazine
- Instagram 성능 개선 사례
메모리 및 성능 이슈 해결