문제 URL
https://devchallenges.io/challenge/minimal-blog-card
나의 풀이
Demo URL
https://35y2d.github.io/Minimal-Blog-Card
Repository URL
https://github.com/35y2d/Minimal-Blog-Card
HTML & CSS 코드 리뷰 및 첨삭
네 코드와 피드백을 비교하면서, 하나하나 대응해서 첨삭해줄게! 🚀
1️⃣ LCP 요청 탐색 최적화 (LCP Request Discovery)
📌 문제:
- HTML에서 LCP(가장 큰 콘텐츠 요소) 이미지가 즉시 탐색되지 않음
- Lazy-loading을 피하고 브라우저가 바로 찾을 수 있도록 해야 함
🛠 해결 방법:
img태그에loading="eager"속성을 추가하여 즉시 로드되도록 설정preload태그를 추가하여 브라우저가 LCP 이미지를 빠르게 찾도록 유도
🔹 수정 전 (index.html)
<img src="Cactus.jpg" alt="A cactus in front of the pink background">✅ 수정 후
<link rel="preload" as="image" href="Cactus.jpg">
<img src="Cactus.jpg" alt="A cactus in front of the pink background" loading="eager" width="336" height="152">✔️ 이렇게 하면 브라우저가 이미지를 미리 불러오고, CLS 문제도 해결됨!
2️⃣ 서드파티 코드 최적화 (Third-Party Code Optimization)
📌 문제:
- Google Fonts가 렌더링을 차단할 가능성이 있음
- 페이지 주요 콘텐츠보다 먼저 불러오면 속도 저하 발생
🛠 해결 방법:
display=swap을 추가하여 웹 폰트가 로딩될 때 기본 폰트로 대체rel="stylesheet"을rel="preload"로 변경하여 폰트 로딩을 최적화
🔹 수정 전
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Sora:wght@100..800&display=swap" rel="stylesheet">✅ 수정 후
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">✔️ 이렇게 하면 폰트가 더 빨리 로딩되고, 페이지 렌더링 속도가 향상됨!
3️⃣ 렌더링 차단 리소스 제거 (Eliminate Render-Blocking Resources)
📌 문제:
MBC.css가 렌더링을 차단하고 있음- 크리티컬 스타일을 inline으로 넣고, 나머지는
defer처리 필요
🛠 해결 방법:
- 핵심 CSS를
<style>태그로 삽입 rel="stylesheet"을media="print"로 변경하여 페이지 로딩 후 적용
🔹 수정 전
<link rel="stylesheet" href="MBC.css">✅ 수정 후
<style>
body { padding-left: 16px; padding-right: 16px; }
</style>
<link rel="stylesheet" href="MBC.css" media="print" onload="this.media='all'">✔️ 이제 CSS가 페이지 로딩을 방해하지 않음!
4️⃣ 이미지 크기 명확하게 지정 (Prevent CLS Issue)
📌 문제:
Cactus.jpg의width와height가 지정되지 않아 레이아웃 시프트 (CLS) 발생
🛠 해결 방법:
img태그에width="336" height="152"추가
🔹 수정 전
<img src="Cactus.jpg" alt="A cactus in front of the pink background">✅ 수정 후
<img src="Cactus.jpg" alt="A cactus in front of the pink background" width="336" height="152">✔️ 이제 CLS 발생 없이 이미지가 올바르게 렌더링됨!
5️⃣ 정적 자산 캐시 정책 개선 (Efficient Cache Policy)
📌 문제:
Cactus.jpg,MBC.css의 캐시 수명이 짧아 페이지를 다시 방문할 때 성능 저하
🛠 해결 방법:
.htaccess또는 서버 설정에서Cache-Control을 추가- HTML에서
versioning을 사용하여 브라우저가 필요 시만 리소스를 새로 가져오도록 설정
✅ 수정 후
<link rel="stylesheet" href="MBC.css?v=1.1">
<img src="Cactus.jpg?v=1.1" alt="A cactus in front of the pink background" width="336" height="152">✔️ 이렇게 하면 브라우저가 불필요한 리소스 로드를 방지함!
6️⃣ 차세대 이미지 포맷 사용 (Serve Images in Next-Gen Formats)
📌 문제:
Cactus.jpg가 JPEG 형식이므로 WebP, AVIF로 변환하면 더 빠르게 로딩 가능
🛠 해결 방법:
picture태그를 사용하여 브라우저가 WebP를 우선 로드하도록 설정
✅ 수정 후
<picture>
<source srcset="Cactus.webp" type="image/webp">
<source srcset="Cactus.jpg" type="image/jpeg">
<img src="Cactus.jpg" alt="A cactus in front of the pink background" width="336" height="152">
</picture>✔️ 이제 지원되는 브라우저에서는 WebP를 불러오고, 그렇지 않으면 JPEG 사용!
7️⃣ SEO 개선 - 메타 설명 추가 (Meta Description)
📌 문제:
meta description이 누락되어 검색 엔진 최적화(SEO)에 좋지 않음
🛠 해결 방법:
<meta name="description">태그 추가
🔹 수정 전
<head>
<meta charset="UTF-8">
</head>✅ 수정 후
<head>
<meta charset="UTF-8">
<meta name="description" content="A minimalist blog card featuring a cactus and a simple, clean design.">
</head>✔️ 이제 검색 엔진이 페이지 내용을 제대로 인식할 수 있음!
🔥 최종 정리: 네 코드에서 개선한 핵심 포인트
✅ LCP 이미지 최적화 → loading="eager" 추가 & preload 적용
✅ 서드파티 코드 최적화 → 폰트 preload 처리
✅ 렌더링 차단 리소스 제거 → CSS를 media="print"로 로딩
✅ 이미지 크기 명확히 설정 → width & height 추가
✅ 정적 자산 캐시 최적화 → ?v=1.1로 버전 관리
✅ 차세대 이미지 포맷(WebP) 적용 → picture 태그 활용
✅ SEO 개선 → meta description 추가
