IT/Application

웹사이트 최적화 방법

AMG. Labs
728x90

예전 웹사이트 이용자들은 주로 PC을 통해서 접속을 많이 하였으나

현재는 모바일을 통한 웹사이트 이용비율 높아졌습니다.

 

무제한 요금제를 사용하지 않는 분들은 웹페이지 하나 열어보는데

많은 데이타가 쓰여지면 싫어 하겠죠.

그래서 그런지 구글에서 제공하는 웹사이트 분석 도구도

모바일을 첫머리에 두었습니다.

그만큼 중요하단 이야기겠죠.

 

구글에서 예전부터 제공해 오던 웹사이트 분석 도구 입니다.

PageSpeed Insights 와 Lighthouse 두가지 인데요.

 

첫번째는 웹사이트 이용방식이고,

두번째는 설치를 해야하는 크롬 확장프로그램 방식입니다.

 

여러분이 분석을 원하시는 사이트의 주소만 알고 있으면

분석을 해준다고 하니 좋을 뿐입니다.

 

 

 

 

PageSpeed Insights

모든 기기에서 웹페이지 속도를 개선해 보세요.

developers.google.com

 

 

Lighthouse  |  Tools for Web Developers  |  Google Developers

Learn how to set up Lighthouse to audit and improve your web apps.

developers.google.com

 

PageSpeed Insights 사이트 접속 후 분석을 의뢰한 화면입니다.

사용방법은 간단히 분석을 원하는 사이트를 입력 후 분석을 클릭하시면

결과에 대해서 알려줍니다.

첫머리을 보시면 모바일, 데스크톱이 있습니다.

데스크톱 탭을 눌어보시면 아시겠지만,

인터넷 선이 연결이 되어 있는 상태가 대부분으로

분석완료 된 점수가 모바일 보다 높습니다.

 

 

오프스크린 이미지 때문에 로딩이 12.93s 걸린다고 분석이 되었네요.

첫번째, 두번째 정도만 개선해도 많이 빨라질것 같습니다.

 

 

리스트 오른쪽에 있는 " ∨ " 모양을 클릭하시면 아래와 같이 Detail 내용을 보실 수가 있습니다.

 

 

사이트에 올라간 그림 중 최적화를 하면 절감 효과까지 나타내고 있습니다.

이를 위해서는 구글에서 최신 형식의 이미지 파일을 사용하라고 권장하고 있습니다.

JPEG2000, JPEG XR, WebP 파일등은 기존 PNG, JPG 보다 압축률이

높아서 다운로드 속도를 높이고, 데이터 사용량줄고 그리고 로딩속도가 늘어난다고 합니다.

 

이미지 압축하는 도구들은 많이 있지만 그중에서도

Pym을 사용해 보실것은 추천드립니다.

 

 

Pym 이미지 압축 앱 (마이크로소프트 스토어)

이미지 대표 파일 형식 중 대부분 알고 계신 포맷은 JPG, PNG, GIF 파일들입니다. 그래픽 용량을 줄이기 위한 기술들은 계속해서 업그레이드 되고 있습니다. 점점 눈길을 끌고 있는 포맷방식은 JPEG 2

amglabs.tistory.com

 

예제 분석자료 기준으로 본다면 20초 개선효과가 있을 것으로

분석이 되네요.

 

제 사이트 이미지 압축 후 빨라진것을 체감합니다.

 

 

Good day !! 

 

 

728x90