Skip to content

LCP 과제 #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
ui-kimjisu wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

LCP 과제 #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 31 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,18 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LCP - BEFORE</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<!-- 1. 웹 폰트 preconnect / CSS preload -->
<!-- crossorigin : 해당 요소에 링크된 외부 출처의 리소스와 현재 웹 페이와의 상호작용을 할 수 있도록 CORS(교차 출처 리소소 공유, Cross-Origin Resource Sharing)를 설정하는 속성 -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" onload="this.onload=null;this.rel='stylesheet'">


<!-- 2.normalize 삭제 -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"> -->

<!-- 3. 이미지 preload -->
<link rel="preload" as="image" media="(max-width:640px)" href="https://naradesign.github.io/html5/img/small.avif">
<link rel="preload" as="image" media="(min-width:641px)" href="https://naradesign.github.io/html5/img/large.avif">
<style>
body { font-family: 'Noto Sans KR', sans-serif; }
.img {
Expand All @@ -20,19 +30,33 @@
background:linear-gradient(#ddd 100vh, transparent 100vh) 0 0 / 100vw 200vh repeat-y
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<!-- 4. 제이쿼리 라이브러리 삭제 -->
<!-- <script src="https://code.jquery.com/jquery-3.6.0.js"></script> -->
</head>
<body>
<h1>LCP 문제 해결하기</h1>
<p>이 페이지는 웹 사이트의 <a href="//web.dev/lcp/">LCP(Largest Contentful Paint)</a> 문제를 유발하는 큰 이미지를 포함하고 있다. 구글 크롬 <a href="//developers.google.com/web/tools/lighthouse">라이트하우스</a> 또는 <a href="//developers.google.com/speed/pagespeed/insights/?hl=ko">페이지 스피드 인사이트</a>를 통해 LCP 문제를 확인하고 개선해 보자. 이 문제를 해결하면 <a href="//developers.google.com/search/docs/guides/page-experience?hl=ko">고급 검색엔진 최적화</a>에 도움이 된다.</p>
<img class="img" src alt>
<!-- 5. 이미지 picture 작성: 지원하는 확장자별 이미지, 디바이스별 제공 이미지 -->
<picture class="picture">
<source srcset="https://naradesign.github.io/html5/img/small.avif" type="image/avif" media="(max-width:640px)">
<source srcset="https://naradesign.github.io/html5/img/large.avif" type="image/avif">
<source srcset="https://naradesign.github.io/html5/img/small.webp" type="image/webp" media="(max-width:640px)">
<source srcset="https://naradesign.github.io/html5/img/large.webp" type="image/webp">
<img class="img" src="https://naradesign.github.io/html5/img/small.jpg" decoding="async" alt>
</picture>
<p class="space">...</p>
<img class="img" src alt>
<script>
<!-- 6. 레이지로딩, 이미지 디코딩 병렬처리 -->
<picture class="picture">
<source srcset="https://naradesign.github.io/html5/img/example.avif" type="image/avif">
<source srcset="https://naradesign.github.io/html5/img/example.webp" type="image/webp">
<img class="img" src="https://naradesign.github.io/html5/img/example.jpg" loading="lazy" decoding="async" alt>
</picture>
<!-- 7. 제이쿼리삭제 -->
<!-- <script>
jQuery(function($){
$('img').eq(0).attr('src', 'https://naradesign.github.io/html5/img/large.jpg')
$('img').eq(1).attr('src', 'https://naradesign.github.io/html5/img/example.jpg')
})
</script>
</script> -->
</body>
</html>