워드프레스 속도향상: 레이지 로딩 플러그인

워드프레스 사이트의 접속 속도를 빠르게 하기 위한 방법 중 이미지나 iframe, 유튜브 등이 화면에 보일때 로딩하게 하는 레이지 로딩(lazy loading) 플러그인이 있다.

워드프레스 레이지 로딩

사이트에 접속 했을때 페이지내의 모든 파일을 다 전송하면 네트워크에 전달되는 데이터도 많으니 화면에 보이는 속도가 드리게 된다.

이미지 레이지 로딩이란 사용자가 스크롤 해서 화면에 이미지가 보일 때 이미지를 요청해서 가져와서 보여주는 방식이다.

말그대로 게으론 로딩인데, 사용자가 안 볼 수도 있는데 모든 이미지나 파일을 접속하자마자 다 가져오면 사용자가 보는 속도도 느리고, 서버 부하도 많다.

특히 유튜브 영상을 블로그에 삽입하면 처음 접속할때 유튜브 영상과 관련된 js 파일이 요청되어 속도가 느렸다.

사용자 경험을 고려한 개발이고 서버 관리이기도하다.

워드프레스 5.5 부터 이미지 레이지 로딩이 기본으로 들어 있는데, 플러그인을 사용하면 IFRAME 등 좀 더 다양한 레이지 로딩 기능을 사용할 수 있다.

워드프레스 레이지 로딩 플러그인

워드프레스 플러그인 중에 레이지 롱딩 플러그인들이 있다. 초기에는 이미지만 해서 이미지 레이지 로딩이었는데, 요즘은 유튜브 iframe 도 볼 때 로깅하게 해서 그냥 레이지 로딩이라고 하는 것 같다.

플러그인을 적용하니 구글 Page Speed Insights 로 해보니 이미지가 많거나 유튜브 삽입이 된 글은 성능이 10점 정도 높아졌다.

W3 Total Cache 플러그인

W3 Total Cache 에 옵션으로 이미지 레이지 로딩이 있다.

W3 Total Cache 플러그인을 사용한다면 별도로 이미지 레이지 로딩 플러그인을 사용하지 않아도 된다.

WP Rocket

WP Rocket 캐시 플러그인에 옵션으로 레이지 로딩이 있다.

LazyLoad 플러그인

LazyLoad 는 WP Rocket 에서 무료로 제공하는 플러그인이다.

iframe 도 레이지 로딩이 되니 구글맵이 될 것 같다.

다른 플러그인에 비해 특이한 점은 유튜브를 이미지 썸네일로 대체하는 옵션이 있다.

이 옵션을 끄고 켠 후 구글 페이지 스피드를 측정해봤는데, 점수가 오락가락 했는데 이미지를 썸네일로 할 때 성능 점수가 조금 더 좋은 것 같았다.

아래는 유튜브 영상을 페이지에 삽입했을 때 보이는 화면을 캡처한 이미지다. 상단에 제목과 버튼이 보인다.

다음은 썸네일 옵션을 켠 후에 보이는 화면을 캡처한 이미지다. 자세히보니 상단에 제목과 오른쪽에 버튼이 없다.

재생 버튼을 누르면 유튜브가 로딩되고 재싱이 된다.

유튜브를 페이지에 넣어 두면 눌러서 바로 재생할 수 있지만, 이거 때문에 유튜브 플레이어와 관련된 js 파일을 다룬로드 하는데 이 파일이 좀 큰 것 같다. 썸네일로 바꾸니 모바일에서는 한 번 더 눌러야 재생되었지만, 컴에서는 바로 재생이 되어 썸네일인지 잘 몰랐다.

a3 Lazy Load 플러그인

a3 Lazy Load 은 이미지 뿐만 아니라 iframe도 레이지 로딩하게 해주니 유튜브도 레이지 로딩이 가능하다. 이 플러그인도 괜찮았다.

구글맵도 레이지 로딩이 된다. W3 Total Cache 플러그인에서 구글맵 레이지 로딩하려면 유료로 구입해야한다.

마치며

이미지 레이지 로딩은 사용자가 페이지를 좀 더 빠르게 접속하게 해준다.

이미지 파일이 많고 파일 사이즈가 큰 페이트를 빠르게 스크롤하면 이미지가 바로 보이지 않고 로딩되는게 보이기도 한다. 그러나 그렇지 않은 상황이면 스크롤 되기 전에 미리 로딩도 하기 때문에 사용할 때에는 별 문제는 없다.

특히 유튜브를 페이지에 넣을 경우 유튜브 관련 js 코드가 미리 다운로드 되지 않아 성능이 향상되는 것 같다.