# lighthouse

8개의 포스트
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일
·
0개의 댓글
post-thumbnail

PWA

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

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

React Rendering 속도 측정

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

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

웹 사이트 최적화

방법에 따라 분류를 나누는게 좋을 듯 싶다 웹사이트 최적화 로딩 성능 (리소스를 불러오는 성능) 이미지 사이즈 최적화 , code splitting ( 컴포넌트, 페이지 ), 텍스트 압축, 컴포넌트 preloading, 이미지 preloading 다운로

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

웹사이트 퍼포먼스

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

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

React Rendering 속도 개선 해보기

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

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