모바일 메인 화면의 로딩속도가 느려졌다는 이슈로 인해서 크롬 브라우저의 lighthouse를 사용해서 메인화면의 성능, 접근성, 권장사항, 검색엔진 최적화의 내용을 확인 할 수 있다.
이후 문제사항들의 점검표를 확인하여 수정하면된다.
1. 차세대 방식을 사용한 이미지를 제공하는 경우 : gif, jpg, png 등 기존 사용하던 이미지를 webp로 변경하여 올리고자 하였는데 재직중인 회사의 관리자에서 webp의 확장자는 등록을 할 수 없는 구조여서 내부적으로 수정을 해야하는 이슈가 발생하였고, 아직 IE유저를 고려하는 웹 사이트여서 ie에서 사용할 수 없기에 webp는 사용하지 못 하였다.
이미지의 경우 용량을 최대한 줄여서 사용하는 방향으로 진행하였다.
- http/2 를 사용하라고 나오지만 이 내용을 해결하기 위해서는
자바 버전업을 해야하는데 내부적으로 반대가 많아 못 하였다.
웹 사이트 진입 시 로딩 크롬 브라우져에서 프레임으로 스크린샷을 보면 어디서부터 로딩되는지 알 수 가 있었으며, 메인 화면에 여러기능들이 포함되어있어서 보여졌다가 숨겨지는 요소들도 있어서 그러한 부분들을 개선하였다.
첫 화면 진입시 나타났다가 숨겨지는 부분들을 처리하였고, 자연스럽게 로딩되거나, 내가 보여주고자 하는 화면의 노출 순서를 정하여 수정하였다.
ksb