더이상 무작정 프로젝트를 늘리는 것이 효과적이지 않았기 때문에, 이제는 기존의 프로젝트를 보완하려고 한다. 처음에는 그 성능 개선을 어떻게 측정해야하는지 막막했는데, 일단 가볍게 LightHouse를 체크해보기로 했다. 아주 초창기에 다들 개선하려면 LightHouse 100점 맞으면 된다고 얘기해서 체크했다가 뭐가 뭔지 몰라서 그냥 점수만 보고 만족했던 경험이 있다. 이번에 다시 체크해보니, 이제는 그래도 굳이 찾아보지 않아도 어떤 개선사항이 필요한지 이해할 수 있어서 공부한 보람을 느꼈다. 그리고 기본이 가장 중요하고 아직 멀었다는 걸 느낄 수도 있었다,,
1. 화질이 엄청나게 중요하지 않는 이상 이미지는 최대한 Webp로 변환하자
2. 이미지의 사이즈를 지정해주자
현재는 Image/next를 활용하고 있으며 relative 요소에서 크기를 지정하고 있어서 크게 의미는 없어보인다. 사이즈를 지정하면 미리 해당 크기만큼의 자리를 남길 수 있다.
import Image, { StaticImageData } from "next/image";
const AdBanner = ({ src }: { src: StaticImageData }) => {
return (
<Image
src={src}
alt="배너 광고 이미지"
className="absolute top-0 right-0 left-0 bottom-0"
/>
);
};
export default AdBanner;
3. 이미지는 lazy loading을 고려하자
Image/next
4. 자바스크립트의 번들 사이즈를 줄여보자
5. 반복해서 불러오는 값을 주의하자
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={cn(inter.className, "w-[1200px] m-auto")}>
<Script
type="text/javascript"
strategy="beforeInteractive"
src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_MAP_API_KEY}&autoload=false`}
/>
<div id="portal" />
<ChatFloat />
<Header />
{children}
<Footer />
</body>
</html>
);
}/** @type {import('next').NextConfig} */
const nextConfig = {
async headers() {
return [
{
source: "/_next/static/:path*",
headers: [
{
key: "Cache-Control",
value: "public, max-age=31536000, immutable",
},
],
},
];
},
};
export default nextConfig;
6. Screen Leader에 입력해주자. 버튼은 그냥 버튼으로 보인다
이미지의 alt같은 경우는 ESLint를 통해서 항상 경고를 받았기 때문에, 늘 자연스럽게 작성했다. 하지만 당연하게도, 버튼에 텍스트가 없다면 Screen Leader는 그게 어떤 버튼인지 알 수 없다. 각 HTML 태그들이 어떤 props를 받고 어떻게 사용하는지 알고 있어야 활용할 수 있다.
7. 배경색과 확실하게 대조되는 색상을 사용하자
8. 콘솔은 완전히 다 삭제하자. 에러도 안된다.
이제는 네트워크 탭으로 에러를 확인하는데도, 처음에 try ~ catch 문에서 에러를 잡으면 콘솔에 찍어서 확인했던 습관이 있다. 사실 이게 잘못된건지 몰랐는데, 이제는 꼭 reject 콜백을 넣어줘야겠다.
SEO 같은 경우는 처음에 메타데이터와 og 태그부터 넣어주는 습관이 있어서 좋은 점수를 받았다.
결과는?
흑흑,,
해결~~
'트러블이슈' 카테고리의 다른 글
| 시도를 해보자 (0) | 2024.07.08 |
|---|---|
| 프로젝트 구조 변경하기 (0) | 2024.07.06 |
| OAuth의 Redirect URL이 향하는 곳 (0) | 2024.07.03 |
| Axios에 익숙해져서 Fetch를 믿지 말자 (0) | 2024.07.02 |
| Next.js를 s3+clouldFront에 배포하기 (0) | 2024.06.24 |