dev_H dev_H

라이트 하우스의 검사결과를 보고 번들 크기를 줄여야 겠다는 생각이 들었다 구글링을 해보니 next/analyze-bundler를 많이 사용하고 있었다 시각적으로 자바스크립트 번들 파일들을 볼 수 있어서 해당 라이브러리를 사용하기로 했다 https://nextjs.org/docs/app/building-your-application/optimizing/bundle-analyzer Optimizing: Bundle Analyzer | Next.js Analyze the size of your JavaScript bundles using the @next/bundle-analyzer plugin. nextjs.org 설치 npm i @next/bundle-analyzer # or yarn add @next/..

라이트하우스 검사 결과에서 나온 퍼포먼스 항목을 하나씩 고쳐보고자 한다 1. Properly size images 페이지에서 사용자 화면에 렌더링된 사이즈보다 큰 이미지를 제공하면 쓸데없는 용량이 낭비되고 페이지 로드 시간이 느려진다고 한다(참고) 즉, 실제로 화면에 렌더링되어야 할 크기보다 실제 이미지의 크기가 너무 크면 느려지고 낭비니까 고치라는 항목이었다 캐러셀에 있는 프로젝트 이미지1,2와 로고 이미지에 대해서 적절한 사이즈를 주어야했다 살펴보니 로고의 경우 렌더된 사이즈는 최대 40*40인데 실제 사이즈는 200*200이었다 프로젝트 이미지들도 실제로 렌더링되어야하는 사이즈에 비해 컸다 밑에 작성할 Serve images in next-gen formats 항목과 같이 해결하기 위해 Next...

포트폴리오 웹을 제작하고 나서 뭔가 렌더링도 느리고, 최적화 관련 책을 읽은 김에 한번 최적화를 해보고 싶어서 라이트 하우스를 사용해 검사를 해보았다 결과는 좀 충격적^^... Light House란? Lighthouse는 웹 페이지의 품질을 개선하기 위한 오픈소스 자동 도구입니다 - 출처 : 라이트하우스 공식 홈페이지 모든 웹 페이지에 대해 실행할 수 있는 웹 품질 검사기라고 생각하면 된다 라이트 하우스에서는 점수를 어떻게 계산할까? The Performance score is a weighted average of the metric scores. Naturally, more heavily weighted metrics have a bigger effect on your overall Performa..