Skip to content
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

[Refactor] LightHouse 성능 개선 #175

Merged
merged 6 commits into from
Aug 20, 2024
Merged

[Refactor] LightHouse 성능 개선 #175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5a30d49
chore: 헤드라인 이미지 preload 추가
jhj2713 Aug 19, 2024
aa51b08
chore: font display 설정
jhj2713 Aug 19, 2024
808f338
fix: preload image type 수정
jhj2713 Aug 19, 2024
537f541
chore: meta 태그 추가 및 robots.txt 추가
jhj2713 Aug 19, 2024
e0594f1
chore: prize image size 설정
jhj2713 Aug 19, 2024
03a9473
chore: 이미지 width, height 설정
jhj2713 Aug 19, 2024
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
41 changes: 41 additions & 0 deletions client/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,49 @@
<meta property="og:image" content="/assets/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

<link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />

<link
rel="preload"
fetchpriority="high"
as="image"
type="image"
href="/assets/main/car-1.jpg"
/>
<link
rel="preload"
fetchpriority="high"
as="image"
type="image/webp"
href="/assets/main/title.webp"
/>

<link
rel="preload"
fetchpriority="high"
as="image"
type="image/webp"
href="/assets/lottery/electric-line.webp"
/>
<link
rel="preload"
fetchpriority="high"
as="image"
type="image/webp"
href="/assets/lottery/casper-badges.webp"
/>

<link
rel="preload"
fetchpriority="high"
as="image"
type="image"
href="/assets/rush/two-car.jpg"
/>

<title>Hybrid-JGS</title>
<meta name="description" content="캐스퍼 일렉트릭 출시 기념 이벤트" />
</head>
<body>
<div id="root"></div>
Expand Down
Binary file modified client/public/assets/main/lottery/prize-1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions client/robots.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
User-agent: *
Allow: /
2 changes: 1 addition & 1 deletion client/src/components/LotteryEvent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default function LotteryEvent({ rank, image, prizeName, winnerCount }: Lo
return (
<div className="flex flex-col gap-400 w-[100px] h-[156px]">
<div className="relative w-[100px] h-[100px] rounded-500 bg-n-white flex justify-center items-center">
<img src={image} alt="event prize" className="w-[80px] h-[80px] object-cover" />
<img src={image} alt="event prize" className="w-[80px] h-[80px]" />
<p className="absolute bottom-0 right-0 translate-x-1/4 z-10 h-detail-1-bold rounded-full bg-s-red p-2 text-n-white">
{rank}등
</p>
Expand Down
4 changes: 2 additions & 2 deletions client/src/components/RushEvent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,12 @@ export default function RushEvent({

return (
<div
className={`relative w-[160px] h-[200px] py-7 px-5 rounded-500 bg-n-white flex flex-col gap-4 justify-between items-center border ${borderClass} ${opacityClass}`}
className={`relative w-[160px] h-[200px] py-7 px-[15px] rounded-500 bg-n-white flex flex-col gap-4 justify-between items-center border ${borderClass} ${opacityClass}`}
>
<p className={`h-body-2-bold ${textClass} text-nowrap`}>
{isTodayEvent ? "Today" : formatSingleDateWithSlash(date)}
</p>
<img src={image} alt="event prize" className="object-cover" />
<img src={image} alt="event prize" className="w-[130px] h-[80px] object-contain" />
<p className="h-body-2-medium text-n-neutral-950 text-nowrap">{prizeName}</p>
{isPastEvent && (
<p
Expand Down
6 changes: 6 additions & 0 deletions client/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,29 +23,35 @@ p {
@font-face {
font-family: "HyundaiSansHeadOffice-Bold";
src: url("/public/fonts/hyundai-sans/HyundaiSansHeadKROTFBold.otf") format("opentype");
font-display: swap;
}

@font-face {
font-family: "HyundaiSansHeadOffice-Medium";
src: url("/public/fonts/hyundai-sans/HyundaiSansHeadKROTFMedium.otf") format("opentype");
font-display: swap;
}

@font-face {
font-family: "HyundaiSansHeadOffice-Regular";
src: url("/public/fonts/hyundai-sans/HyundaiSansHeadKROTFRegular.otf") format("opentype");
font-display: swap;
}

@font-face {
font-family: "HyundaiSansTextOffice-Bold";
src: url("/public/fonts/hyundai-sans/HyundaiSansTextKROTFBold.otf") format("opentype");
font-display: swap;
}

@font-face {
font-family: "HyundaiSansTextOffice-Medium";
src: url("/public/fonts/hyundai-sans/HyundaiSansTextKROTFMedium.otf") format("opentype");
font-display: swap;
}

@font-face {
font-family: "HyundaiSansTextOffice-Regular";
src: url("/public/fonts/hyundai-sans/HyundaiSansTextKROTFRegular.otf") format("opentype");
font-display: swap;
}
Loading