DevOps/Optimization

🚨 고민 발생판매 상품 등록 시 이미지가 필수로 등록되어야 한다. 등록된 이미지는 firebase storage에 저장되고 storage url을 통해 이미지를 불러오게 된다. 전체 상품을 조회하는 페이지에서 다량의 상품 이미지를 불러오는데 이때 소요되는 로딩 시간이 너무 길어 사용자 경험이 떨어지는 문제가 발생한다. 📍 고민 해결 방법크기가 작은 썸네일용 이미지를 만들자!긴 로딩시간의 원인이 불필요하게 큰 이미지 크기라고 생각했고, 전체 상품 조회 페이지에서 보여질 크기가 작은 썸네일을 별도로 저장하는 방법을 선택했다.  📍 이미지 최적화 과정이미지 크기를 줄이기 위해서 두 가지 방법을 쓸 수 있었다.1. 이미지 크기 압축2. 이미지 포맷 변환 썸네일 크기에 맞는 수치로 이미지 크기를 압축하고, ..

📌 개선 전 SEOSPA는 하나의 웹 페이지에서 동적으로 컨텐츠를 업데이트 된다.이때 컨텐츠는 클라이언트에서 렌더링 되기 때문에 크롤러가 컨텐츠를 제대로 인식하지 못해 SEO 문제가 발생한다.next.js 프레임워크로 SSR을 사용하여 개선할 수 있지만, 이번 프로젝트는 next를 사용하는 프로젝트가 아닌 관계로 별도의 세팅으로 SEO를 개선해볼 생각이다.  📌 개선 방법1 ) robots.txt과 sitemap.xml 생성검색엔진 크롤러가 사이트 구조를 이해하고 정확하게 인덱싱 할 수 있도록 하기 위해 robots.txt와 sitemap.xml 파일을 생성해야한다. robots.txt - 검색 엔진 크롤러에게 크롤링 할 수 있는 페이지에 대해 알려준다.- 개인 정보가 포함된 페이지는 크롤링 하지 않..

📍 개선 전 퍼포먼스 점수 내 프로젝트 랜딩페이지의 초기 Lighthouse 점수는 73점이었다. 만족스럽지 못한 점수로 최적화를 진행하기로 했다. 📍 성능저하 원인 분석 Lighthouse 퍼포먼스 지표에 대해 알아보았다.TTI - 사용자가 처음으로 이벤트를 발생시킬 수 있기까지 걸리는 시간FCP - 브라우저에 첫번째 컨텐츠가 로딩되는 시간SI - 컨텐츠가 얼마나 빠르게 로딩 되는 지LCP - 가장 큰 컨텐츠가 로딩되는 시간TBT - 로딩 중 중간중간 Block이 발생한 시간 그리고 지표를 기반으로 점수를 분석해보았고, 크게 두 가지 원인으로 성능이 저하된 거라 판단하였다.1) 가장 큰 컨텐츠인 배너 이미지의 로딩 시간이 길다2) 렌더링 차단 요소가 차지하는 시간이 길다 배너이미지 로딩시간 단축과 ..

말로만 들어본 웹팩. 평소에 CRA를 통해 프로젝트를 만드는데, 이 CRA설치에 웹팩이 포함되어있어 웹팩파일을 직접 설정하는 경우가 없었다. 이번에 VSCode 익스텐션을 만들어보며 웹팩 설정도 같이 해보게 되어 기록! 🌟 Webpack이란? 웹의 규모가 커질 수록 파일 간의 관계가 복잡하고 무거워져서 브라우저 로딩 시간이 길어지는 현상이 나타난다. 이때 웹팩을 사용하여 파일 정리 및 최적화를 해줄 수 있다. 웹팩은 여러개의 파일을 하나로 합쳐주는 자바스크립트 모듈 번들러이다. 쉽게 말해 웹팩을 통해 여러개로 나눠진 파일을 하나의 번들로 모듈화하여 로딩 속도도 줄이고 가독성과 유지보수성도 향상시키는 역할을 한다. 만약 번들의 크기가 너무 커질 경우 초기 로딩 속도는 저하될 수 있는데 이땐 웹팩에 코드 스..

리액트와 파이어베이스 DB를 사용하여 테니스 커뮤니티 프로젝트를 진행하였다. 기능 구현을 마치고 최적화 단계에 들어섰고, 처음으로 경험해보았던 최적화 과정이었기 때문에 나름 고군분투를 겪어 이와 관련된 내용을 정리해보고자 글을 작성하게 되었다. 😥 처참한 초기 성능 Lighthouse를 사용하여 성능 평가를 하였다. 결과는 처참.. 기능 구현에 초점을 맞춰 프로젝트를 진행하다보니 이런 처참한 결과가 나온 것 같다. (ㅠㅠ..) 여러 페이지가 있지만 일단 가장 맨 처음 보이는 메인 페이지를 기준으로 성능 최적화를 진행하였다. 이 게시물에서는 Lighthouse의 performance만 살펴볼 예정이다. accessibility는 다음 게시물에..! 👁‍🗨 현상 파악 성능 최적화 = 로딩 최적화 + 렌더링 ..