React 또는 Next.js 앱을 프로파일링하고 숫자로 더 빠르게 만들겠습니다.

느린 페이지로 인해 가입자 또는 검색 트래픽이 손실되고 있다고 생각하고 현재 앱을 유지하고 싶다면 이 서비스를 주문하십시오. React 및 Next.js는 이미 빠른 앱에 필요한 대부분의 기능을 제공하므로 스택을 전환하는 대신 이러한 도구를 잘 활용하여 이점을 얻을 수 있습니다.

형용사가 아닌 숫자를 얻습니다. LCP, CLS, INP 및 경로당 번들 크기가 동일한 스로틀링된 연결에서 전후로 측정되어 하나의 테이블에 표시됩니다.

Starter는 한 페이지 감사입니다. 실행, 성과에 따라 순위가 매겨진 결과, 코드 변경 없음. Standard는 해당 감사부터 시작하여 나머지 시간을 해당 숫자를 움직이는 수정 사항에 사용합니다. Advanced는 최대 5 경로를 다루고, 렌더링 및 캐싱을 조정하며, CI에 번들 예산을 남겨두어 다음 릴리스에서 작업을 조용히 되돌릴 수 없도록 합니다.

작업은 귀하의 리포지토리의 브랜치에서 커밋별로 진행되며, 각 커밋에는 이유가 있습니다. 귀하가 요청하지 않는 한 저는 아무것도 배포하지 않습니다.

통화는 없습니다. 저와 의견이 다른 측정값을 포함하여 모든 내용은 서면으로 제공됩니다.

프로젝트 완료 단계
1. 사용자가 실제로 얻는 것을 측정합니다. 라이브 페이지의 Lighthouse와 느린 페이지의 React 프로파일러 세션을 스로틀링된 연결에서 측정합니다. LCP, CLS, INP 및 경로당 번들 크기를 아무것도 건드리지 않고 기록합니다.
2. 가장 비용이 많이 드는 것을 찾습니다. 번들 및 네트워크 워터폴: 아무도 사용하지 않는 것, 첫 번째 페인트를 차단하는 것, 어떤 구성 요소가 다시 렌더링되는지, 그 이유는 무엇인지. 모든 결과에는 밀리초 또는 킬로바이트 단위의 예상 절감액이 포함됩니다.
3. 가장 큰 이득부터 수정합니다. 코드 분할, 이미지 및 글꼴 처리, 렌더링 차단 작업, 프로파일러가 요청하는 경우 메모이제이션, 중요한 경로에서 데이터 가져오기 이동. 변경당 하나의 커밋, 각 커밋에는 이유가 있습니다.
4. 나란히 다시 측정합니다. 변경된 빌드에서 동일한 실행: 하나의 테이블에 전후, 경로별 및 메트릭별. 변경으로 인해 상황이 악화된 경우 테이블에 그렇게 표시되고 변경은 되돌려집니다.
5. 리포지토리에서 인계합니다. 귀하의 리포지토리의 브랜치 또는 패치, 보고서, 그리고 제가 하지 않은 일과 그 가치에 대한 솔직한 목록. 배포는 귀하의 손에 달려 있습니다.