sharingStorage

서론최근 성능에 대한 관심을 보이면서 몇몇 글모임의 상세페이지에서만 유독 좋지 않은 LCP지표를 보이고 있는 것을 확인하였습니다. 이것에 대한 원인을 유추하던 중 presigned url을 활용하여 서비스를 운영하며 10MB에 육박하는 대용량 이미지가 아무런 전처리나 최적화 작업 없이 S3에 업로드되었고 이것이 곧 LCP의 Load Time과 전체 Network 요청 리소스에 큰 영향을 주고있는 것을 확인하였습니다. 이러한 문제를 NEXT JS에서는 모든 이미지를 WebP로 변환하는 과정을 통해 이미지 최적화를 진행한다는 것에서 착안하여 업로드 과정에서 이미지 최적화를 진행하여 개선해보려고 합니다.  위에서 말씀드린 성능에 대해 조금 더 자세히 확인해보자면 아래와 같이 유독 LCP점수만 낮게 측정된 것을..

들어가며이전 시간엔 web성능에서 중요한 지표인 core web vitals와 성능을 확인할 수 있는 도구인 Lighthouse를 알아보았으니 이를 통해 현재 서비스중인 mile의 성능을 확인하고 개선해보려고 합니다.가장 먼저 Lighthouse로 현재 mile의 성능을 측정해본 결과 main페이지부터 아래와 같은 엄청나게 성능이 좋지 않다는 것을 확인했고 vite-bundle-visualizer 와 같은 도구로 번들사이즈를 확인하며 데모데이를 향해 달려가면서 놓친 부분과 크고 작은 실수들을 바로 잡으면서 성능을 개선해보겠습니다.성능 확인과 번들사이즈 확인아래와 같이 Lighthouse로 엄청나게 좋지 않은 메인페이지의 성능을 확인하였고 이와 관련해서 vite-bundle-visualizer를 사용하여 ..

이번엔 웹서비스의 성능지표 core web vitals를 공부해보고 lighthouse의 성능지표에는 무엇이 있는지 알아보겠습니다.웹 성능 개선을 고려해야하는 이유웹 성능은 객관적인 측정치(로딩 시간, 초당 프레임 수, 상호작용에 반응할 수 있게 되는 시간)와 유저의 주관적인 경험(콘텐츠의 로딩 시간이 얼마나 길게 느껴지는지)이 포함됩니다. 우리는 웹 성능 개선을 왜 고려해야할까요?웹성능 지표는 비지니스에도 많은 영향을 주기 때문입니다. 일반적으로 빠른 로딩은 좋은 사용자경험(UX)을 제공하고 반대로 사용자가 웹사이트에 들어갔을 때 하얀 화면을 노출시키거나 로딩이나 지연이 길게 발생하면 사용자는 자연스럽게 이탈하게 됩니다.아래는 2017년 Google 모바일 부문 글로벌 제품 리드인 Daniel An이 ..