# lighthouse

18개의 포스트
post-thumbnail

lighthouse를 이용한 성능 개선 경험기 (번들링 개선)

lighthouse 점수 올리기 대작전..

4일 전
·
0개의 댓글
·
post-thumbnail

최적화(Optimization)

2-1. 최적화 기법2-2. Tree Shaking2-3. Lighthouse주어진 상황에서 원하는 가장 알맞은 결과를 얻을 수 있도록 처리하는 과정.최적화는 허용된 자원의 한계 내에서 주어진 요구사항을 만족시키면서 최선의 결과를 얻는 과정이다. 수익과 관련되는 분야에

2022년 8월 4일
·
0개의 댓글
·
post-thumbnail

Lighthouse - 웹 개선

성능 점수는 메트릭 점수의 가중치 평균이다. 가중치가 더 높은 메트릭이 전체 성능 점수에 더 큰 영향을 미친다.FCP는 사용자가 페이지에 접속했을 때 브라우저가 DOM 컨텐츠의 첫 번째 부분을 렌더링하는 데 걸리는 시간LCP는 뷰포트를 차지하는 가장 큰 콘텐츠(이미지

2022년 8월 4일
·
0개의 댓글
·

[개발자되기: 최적화] Day-56

(컴퓨터 공학) 가능한 적은 리소스를 소모하면서 가능한 한 빠르게 원하는 결과를 얻을 수 있도록 하는 것(웹개발) 주어진 조건 아래 최대한 빠르게 화면을 표시하도록 하는 것화면 로딩 시간이 길어지면 사용가의 페이지 이탈확률도 높아짐 전환율: 웹사이트 방문자 중 회원가입

2022년 8월 4일
·
0개의 댓글
·
post-thumbnail

Optimization

Optimization

2022년 8월 4일
·
0개의 댓글
·
post-thumbnail

LightHouse - 웹 최적화

lighthouse를 통한 웹 최적화

2022년 8월 4일
·
0개의 댓글
·
post-thumbnail

[5/24 TIL] 강의 정리

https://codeclimate.com/내 깃 계정을 연결하면 내가 짠 코드에대해서 분석해주고, 평가해준다.https://storybook.js.org/https://www.chromatic.com/내가 만든 컴포넌트를 배포해서 디자인팀과

2022년 5월 24일
·
0개의 댓글
·
post-thumbnail

선비 성능평가

2022년 5월 23일
·
0개의 댓글
·
post-thumbnail

React 메모제이션을 이용한 웹 페이지 성능개선(feat. lighthouse)

Lighthouse를 통해 웹 페이지 성능향상을 해보자.

2022년 1월 5일
·
0개의 댓글
·
post-thumbnail

라이트하우스와 함께한 성능 개선 고군분투기

정말 아~무것도 몰랐던 신입 개발자가 라이트하우스로 퍼포먼스 점수 30점을 올렸던 경험담을 소개합니다.

2021년 10월 24일
·
7개의 댓글
·
post-thumbnail

Chrome lighthouse를 이용하여 웹 최적화 하기

WebP 이미지를 css에서 사용하기 위해서는 Modernizr가 가장 쉬운 방법이다. Modernizr는 브라우저에서 감지할 수 있는 특성을 감지하는 라이브러리인데, 이를 이용하면 .no-webp 아니면 .webp 를 이용하여 <link rel=preload>

2021년 7월 7일
·
0개의 댓글
·

[project] perfomance 측정 & 최적화 과정에서 얻은 것

기존 프로젝트에서 IT보고서 탭 최적화를 진행하고 있습니다. lazy-loading라이브러리를 이용해서 viewport가 일정위치에 이동하면 애니메이션이 동작하게끔 했습니다. 코드를 간략하게 살펴보면 다음과 같습니다.각 섹션에는 각 차트(amchart.js)가 존재하고

2021년 6월 12일
·
0개의 댓글
·
post-thumbnail

Lighthouse 사용법

Lighthouse는 구글에서 개발한, 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구이다. 어떤 웹 페이지든 (그것이 공개되었든, 인증이 필요하든) 사용할 수 있다.

2021년 6월 1일
·
1개의 댓글
·
post-thumbnail

PWA

리액트를 사용하여 진행하는 프로젝트에서 모바일 상에서도 쉽게 접근할 수 있도록 하고자 PWA를 사용하게 되었다.PWA는 Progressive Web Application의 약자로 웹 애플리케이션과 네이티브 애플리케이션의 장점을 합친 것이라고 볼 수 있다. 또한, 오프라

2021년 5월 24일
·
0개의 댓글
·
post-thumbnail

React Rendering 속도 측정

React 프로젝트에서 서버사이드 렌더링, 클라이언트사이드 렌더링 중 어느 것이 렌더링 속도가 더 빠른지 시각적으로 비교해야할 자료가 필요했다. 그래서 렌더링 측정 툴을 구글링하던 도중 lighthouse라는 툴을 발견했다. 이번 글은 lighthouse를 쓰면서 새로

2021년 4월 21일
·
0개의 댓글
·
post-thumbnail

lighthouse

https://developers.google.com/web/tools/lighthouse형남님이 알려준 퍼포먼스 측정하고 리포트까지 만들어주는 크롬 익스텐션!80점으로 높여보자..!

2020년 12월 10일
·
0개의 댓글
·

React Rendering 속도 개선 해보기

누구보다 빠르게 남들과는 다르게

2020년 7월 5일
·
1개의 댓글
·