PHP로 만든 웹사이트 페이지 로딩이 느린 이유?

Question

안녕하세요. PHP로 웹페이지를 개발중인 학생입니다.

제가 만든 사이트가 메인 페이지에 배너를 보여주는 기능이 있습니다.

배너는 백그라운드 이미지로 넣어주는데 페이지 로딩시 다른 HTML 태그들은 전부 바로 나오는데

백그라운드 이미지만 2~3초 있다가 보여집니다. ( 크롬은 괜찮은데 익스플로어에서만 느려요 ㅠㅠ )

처음에 사진 용량이 문제인가 싶었는데 사용중인 사진 용량들은 1mb도 안되는 kb 파일들 입니다.

( 70kb부터 700kb 정도입니다.)

백그라운드 이미지는 CSS로 바로 넣어주는게 아니라 ajax로 DB에서 이미지 이름을 가져와서

javascript로 백그라운드 이미지를 넣어주는 방식으로 했는데

로딩이 느린 원인이 궁급합니다 . ( 구글 폰트도 3개정도 사용중인데 영향이 클까요? )

해결방법까지 알려주시면 너무 고맙겠지만 원인만 알려주셔도 감사하겠습니다!

Answer 1

우선 디비에서 가져오는 속도를 체크하셔야 하는데요

이미지 출력을 하지 마시고

디비에 있는 이미지이름을 가져와 echo 와 같은 명령어로 출력을 해봐주세요

이렇게 했을때 바로 출력이 된다면, img src=파일위치/파일명.jpg 이렇게 처리하는 부분은

이상이 없다는것이구요

다른쪽에서 살펴봐주셔야 합니다

아마도 구글폰트도 전부 없애서 체크해보시구요

1개씩 1개씩 추가하시면서 속도체크해보시는걸 추천드립니다

Answer 2

페이지 로딩이 느린 경우는 어떤 문제 때문에 느린지 디버깅을 하지 않고는 쉽게 파악할 수 없습니다.

가장 기본 사항은 크롬에서 개발자도구를 펼친 뒤

Network 탭에서 Time 정렬로 하고 가장 로딩이 긴 것이 어떤 것인지 파악하는 것이 중요합니다.

이미지 용량이 크지 않을 경우에는 아마도 ajax 에서 이름 가져오는 부분이 가장 큰 문제일 듯 싶긴한데

1. DB 의 Connection 속도가 느린건지

2. SELECT 쿼리가 조건문이 까다로워 쿼리 자체가 느린건지

파악을 하셔야 할겁니다.

Answer 3

1. 폰트는 어지간한 경우 별로 큰 차이를 못줍니다. 폰트를 로딩해오는 서버 자체속도에 문제가 없는 경우 폰트 몇개 쓴다고 페이지 랜더링에 큰 영향 주지 않습니다.

2. 이미지를 서버자원에서 바로 뽑는게 아니라 로딩 후 ajax 로 DB 커넥션 후 다시 가져오시는 부분이 문제일 확률이 매우 큽니다.

개발자도구를 사용하여 아래 부분 중 개선 가능한 부분이 있는지 살펴보시기 바랍니다.

2-1. ajax 로딩이 지연없이 바로 진행되는가

2-2. ajax call 하는 서버 응답속도에 지연이 없는가

2-3. ajax 응답 후 화면 조작시 지연이 없는가

보통 2번일 확률이 크다고 봅니다.