# lighthouse

77개의 포스트
post-thumbnail

[NextJs]Lighthouse로 웹페이지 최적화하기

🔴 LightHouse > LightHouse는 웹 사이트의 성능 및 품질을 평가하고 개선하는 도구이다. Google이 개발하였으며 사용자 경험, 성능, 접근성, SEO 등 다양한 측면을 평가할 수 있도록 도와준다. 간단히 이 정도만 알아보고 실제 어떻게 평가가 이

2023년 6월 1일
·
0개의 댓글
·

웹 성능 측정 툴 Lighthouse의 기본 용어 정리

: 초기 DOM 콘텐츠를 렌더링하는데 걸리는 시간을 측정한다. 즉, 첫 번째 텍스트 또는 이미지가 표시되는 시간을 가리킨다. FCP 측정 시점을 시작점으로 하는 다른 Metric들이 있기 때문에, 가장 먼저 찍히는 FCP는 다른 항목들의 점수 및 전체 점수에 큰 영향을

2023년 4월 24일
·
0개의 댓글
·
post-thumbnail

성능 개선 #4. LightHouse 진단해서 나온 문제점 개선하기

📖 이전 성능 개선 편을 참고해주세요. \[1. 성능 개선 \[2. 성능 개선 \[3. 성능 개선 \[4. 성능 개선 첫번째 컨텐츠가 페인트되는 지표를 바탕으로 개선점을 찾아주는 FCP관련 분석을 따로 필터링하여서 위의 사진과 같이 나타내어보았다.자바스크립트 줄이기

2023년 4월 14일
·
0개의 댓글
·

[웹 성능 최적화] Chrome Lighthouse (AUDITS)

왜 성능 최적화를 해야하는가? 페이지가 뜨는 시간이 늦을수록 사용자가 서비스를 떠날 확률이 높다. 성능 최적화를 통해 사용자가 쾌적한 환경에서 서비스를 이용할 수 있다면 그로 인해 사용자가 웹사이트를 자주 방문하거나 추천할 가능성이 높아지고 그만큼 수익증대의 기대도

2023년 4월 10일
·
0개의 댓글
·
post-thumbnail

배포된 프로젝트 성능 끌어올리기 - Part 2. userflow

이번에는 유저의 액션에 대해서 웹 서비스가 얼마나 빠르게 반응하는가! 에 대한 주제로 게시해보려한다. 웹 반응성 성능을 측정하고 개선해서 UI가 유저의 상호작용에 아주 빠르게 반응하도록하여 좋은 UX를 선사하는 서비스로 거듭나보겠다✨ GA 성능 테스트에 들어가기 앞

2023년 4월 3일
·
0개의 댓글
·

[최적화] Lighthouse, opportunities

🔗️ 참고사이트 최적화 참고 블로그 lighthouse 참고 블로그 숨고 블로그-Lighthouse 로 웹사이트 성능 측정하기 Lighthouse 공식사이트 - Opportunities [TOAST UI - 성능최적화](https://ui.toast.com/fe-guide/ko_PERFORMANCE#%EB%A0%88%EC%9D%B4%EC%95%84%EC...

2023년 3월 30일
·
0개의 댓글
·
post-thumbnail

S4-U8) Optimization

웹 사이트의 어떤 요소들이 높은 performance를 방해하늕를 확인하기 위한 지표, Metrics를 제시하고 개선할 수 있는 부분인 Opportunities를 제안한다. 또 추가적인 정보 Diagnostic을 제공한다.사용하지 않는 자바스크립트 코드를 최적화해서 최

2023년 3월 30일
·
0개의 댓글
·
post-thumbnail

📆 23.03.28 - 성능 개선 #2. 이미지 용량 줄이기

📖 이전 성능 개선 편을 참고해주세요. \[1. 성능 개선 2. 이미지 용량 줄이기최적화를 정~말 많이 해야되겠다는 것을 전편 LightHouse를 통해서 알게 되었다. 아무리 클라이언트 서버이지만 52점은 개선해야할 부분이 많다는 의미를 내포하고 있다.그래도 이번

2023년 3월 27일
·
0개의 댓글
·
post-thumbnail

플라잉 머니 Lighthouse 최적화 기록

토이 프로젝트를 Lighthouse로 최적화해본 후기

2023년 3월 26일
·
0개의 댓글
·
post-thumbnail

배포된 프로젝트 성능 끌어올리기 - Part 1. 로드 및 렌더링 성능

최근에 웹 앱 서비스 프로젝트를 배포하게 되었고, 유저가 느낄 수 있는 성능에 관련한 불편함을 최소화하고 싶었다. 적어도 사용성이 좋지 않아서 🏃‍♂️서비스를 탈출하는 일🏃‍♂️은 없게끔... 그리하여... 로딩, 렌더링, 반응성 성능을 측정한 뒤 개선해 볼 것

2023년 3월 20일
·
0개의 댓글
·
post-thumbnail

📆 23.03.18 - 성능 개선 #1. LightHouse로 성능 파악해보기

Lighthouse는 웹 앱의 성능, 품질 및 정확성을 개선하기 위한 오픈 소스 자동화 도구입니다. 페이지를 감사할 때 Lighthouse는 페이지에 대해 일련의 테스트를 실행한 다음 페이지가 얼마나 잘 수행되었는지에 대한 보고서를 생성합니다. 여기에서 실패한 테스트

2023년 3월 18일
·
0개의 댓글
·
post-thumbnail

[Ngether] Lighthouse로 최적화하기

Performance 부문이 52점으로 상당히 낮다.Best Practice, SEO 부문은 양호한 편업로드중..분석 결과를 보면 react dev tools 등 chrome extention이 성능 측정 시 저하 요소가 된다고 한다. react dev tools을 끄

2023년 3월 5일
·
0개의 댓글
·
post-thumbnail

{22-23년}코듀온(Codueon) - 회고

코딩 과외 매칭 플랫폼 Codueon 회고록

2023년 2월 22일
·
2개의 댓글
·
post-thumbnail

Lighthouse로 웹 성능 측정하고 개선하기

Lighthouse로 웹 성능 측정하고 개선하기

2023년 2월 20일
·
0개의 댓글
·
post-thumbnail

알고보니 너무나 간단한 LCP 개선 사례

학습용 사이드 프로젝트를 시작할 때만해도 90점대 성능 점수를 보였는데 오랜만에 측정한 Performance 점수는 매우 낮아져 있었다. 이번 글은 성능 이슈의 원인이었던 LCP를 아주 간단히 개선했던 사례를 소개하려고 한다.

2023년 2월 19일
·
0개의 댓글
·
post-thumbnail

Server Side Rendering #3

이 전 글에서 아주 간단하게 CSR, SSR에 대한 비교를 진행해보았다. 테스트를 마치고 생긴 의문점이 있는데 만약 유저가 실제로 접속해서 보는 환경과 유사하게 꾸민 다음에 테스트를 해보면 어떨까? 하는 생각이 들어 다시 한번 더 테스트 해보기로 하였다.

2023년 2월 18일
·
0개의 댓글
·
post-thumbnail

리팩토링을 진행해 보며... (lighthouse)

이번 리팩토링을 진행하면서, 꼭 적용해 보고싶었던 것들이 있었는데, 그 중 하나가 성능최적화에 대한 부분이었다.성능최적화란 ? UI를 최적화하여 애플리케이션의 속도를 높이는 것을 의미한다. 사용자의 경험이 웹/앱이 상당히 중요한데, 맨처음 웹페이지 진입했을떄, 다른 페

2023년 2월 18일
·
0개의 댓글
·
post-thumbnail

Lighthouse

Google에서 웹페이지 품질을 측정하기 위해서 만든 자동화된 오픈 소스 도구이다. Lighthouse는 웹 페이지의 성능, 접근성 및 SEO에 대한 부분을 최적화 할 수 있도록 도와준다.개발자 도구에 Lighthouse 항목으로 들어가면 사용할 수 있다.Metrics

2023년 2월 12일
·
0개의 댓글
·