# lighthouse

67개의 포스트
post-thumbnail

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

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

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

플라잉 머니 Lighthouse 최적화 기록

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

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

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

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

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

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

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

2023년 3월 18일
·
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개의 댓글
·
post-thumbnail

Server Side Rendering #2

계속해서 SSR로 구현 된 동일한 웹페이지의 테스트 결과를 확인해보도록 하자.<SSR 1회><SSR 2회><SSR 3회>SSR의 총 3회 테스트 결과 FCP 평균 값 = 212msSSR의 총 3회 테스트 결과 SI 평균 값 = 3,389msCSR FCP

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

Lighthouse

구글에서 개발한 웹 앱 품질 개선에 도움을 주는 자동화 도구. 웹 성능 측정기크롬의 개발자 도구에 기본으로 내장되어 있어서 쉽게 작동할 수 있다.성능 | 웹 접근성 | SEO 등 사이트에 대한 전반적인 진단을 할 수 있다.실제 속도가 어떻든 간에 화면에 콘텐츠가 얼마나

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

Lighthouse 사용해 보기

내가 좋아하는 애니메이션 짱구는 못말려 투니버스 사이트로 Lighthouse를 사용해 보려고 한다. 다음과 같이 각 지표에 맞는 결과를 확인할 수 있다.Performance의 Opportunities 항목으로는 총 3가지가 나오는 것을 확인해 볼 수 있다.Reduce

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

[최적화] Lighthouse

사이트를 검사하여 성능 측정을 할 수 있는 도구다양한 지표를 이용하여 웹페이지의 성능 검사를 해줄 뿐만 아니라 그에 대한 개선책도 제공구글에서 개발한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 사

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

Lighthouse

오늘은 Lighthouse에 대해 알아보자!먼저, Lighthouse란 무엇일까?Lighthouse구글에서 개발한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴. Lighthouse는 성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 사용자는 어떤

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

Lighthouse

Serve images in next-gen formatsWebP와 AVIF와 같은 이미지 포맷은 PNG나 JPEG보다 더 나은 압축을 제공하고 이것은 빠른 다운로드와 적은 데이터 소모를 가능하게 한다.Reduce initial server response time메인

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

[최적화] Optimization

주어진 상황에서 원하는 가장 알맞은 결과를 얻을 수 있도록 처리하는 과정.최적화는 허용된 자원의 한계 내에서 주어진 요구사항을 만족시키면서 최선의 결과를 얻는 과정이다. 수익과 관련되는 분야에서는 이익을 최대로 내는 과정을 말하기도 한다. 다양한 분야와 때에 따라 다르

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

Lighthouse

Lighthouse는 사이트를 검사하여 성능 측정을 할 수 있는 도구이자 다양한 지표를 이용하여 웹페이지의 성능 검사를 해줄 뿐만 아니라 그에 대한 개선책도 제공한다.일단 설명으로는 모르겠으니 네이버로 실습을 해봤다.뭘 잘못했는지 죄다 빨간색으로 나온다두번째 URL을

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

[동네북] Google Lighthouse로 웹사이트 성능 측정하기

👉🏻 Lighthous는 Google Chrome에서 제공하는, 웹앱의 품질 개선에 도움을 주는 자동화 도구이다. 성능, 접근성, SEO 등 사이트에 대한 전반적인 진단을 할 수 있다. 이번에는 우리의 동네북 서비스를 Lighthous로 진단하고 웹 사이트 성능 최

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