# lighthouse

zelly

오늘 배운 것.

favorcho

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

doodream

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

edie_ko

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

dahyeyudev

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

swanious

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

dell_mond

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

jduckling_1024

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

got1000

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

muchogusto

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

yeonseo07

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