워드프레스를 운영하다 보면 검색 상단 노출을 위해서 SEO 최적화를 하는 경우가 있습니다. 이는 이미지 최적화라는 방식도 있는데요. 그중 Lazy Load에 대해 설명하도록 하겠습니다.
많은 분들이 그냥 이미지 최적화를 하면 좋다고 생각하여 마구 적용하시는 분들이 많은데 그러면 안됩니다. 최적화 기술이 여러 개라고 완벽한 최적화가 진행될까요? 다다익선 일까요? 아닙니다. 정확히 이 기술이 뭔지 이해하고 적용을 하셔야 나중에 관리도 쉽습니다. 그중에서 Lazy Load가 무엇인지 제가 쉽게 알려드리고 적용까지 알려드릴테니 한번 따라해 보세요.
Lazy Load가 무엇일까?
우리가 이미지 최적화가 되지 않은 사이트에 들어가게 되면 이미지를 불러오는데 상당한 시간이 걸린다는 것을 알 수 있습니다. 다들 게시물을 읽다가 이미지를 불러오는 시간까지 기다려본 경험이 있으시지요?. 우리가 사이트에서 일반적으로 게시물을 볼 때 이미지가 한개만 있는 경우는 적습니다. 하나의 게시물에는 여러 가지 이미지를 사용을 하지요. 이렇게 되면 유저는 사이트에 접속할 때 여러 개의 이미지를 불러오는 상황이 생기는 것입니다. 이미지를 여러 개 불러오게 되면 당연히 오랜 시간이 걸리겠지요. 이건 사실 사용자 입장에서 봐도 내 데이터를 테러 당하는 그런 일입니다.
그렇다면 어떻게 이미지 최적화를 해야 될까요? 이미지의 용량을 줄여 여러 개를 불러와도 사용자에게 부담이 없게 하는 방법도 있습니다. 하지만 좀 더 깊게 생각해보면 유저가 이미지를 볼 때만 불러오면 안될까요? 왜 게시물을 들어오는 그 첫 순간에 모든 이미지를 불러와야 되나요? 그래서 나온 방식이 바로 LazyLoad입니다. 유저가 볼 필요가 없는 이미지까지 다 불러오지 않고 유저가 이미지를 보는 그 타이밍에 이미지를 불러오는 것입니다.
이해 되셨나요? 영어라고 그렇게 어려운 게 아니었습니다. 쓸데없이 게시물을 보는 첫 순간에 모든 이미지를 불러오지 않고 이미지를 보는 타이밍에. 이미지를 받아와서 최적화를 진행하는 것입니다.
Lazy Load 워드프레스 적용하기
그렇다면 워드프레스에서는 이미지를 레이지로드를 어떻게 적용해야 될까요? 방법은 진짜 어렵지 않습니다. 바로 워드프레스의 최고 장점인 플러그인에서 무료로 제공하는 서비스가 있기 때문입니다.
바로 이 Smush 플러그인을 사용할 거예요. 해당 플러그인은 별점도 높고 설치 수도 많고 업데이트 주기도 빠릅니다. 가장 좋은 블로그인이에요.
상단의 있는 플러그인을 설치를 해주십시오.
해당 플러그인을 활성화시켜 주세요.
해당 플러그인 설정으로 이동합니다.
설정 페이지에 처음 들어가면 이렇게 옵션을 처음 설정하는 창이 뜰 텐데, 네 단계 모두 그냥 다음 눌러주세요. 도중에 내가 끄고 싶은 최저크옵션이 있으면 끄셔도 돼요. 이 플러그에 있는 이미지 용량 최적화도 지원해주기 때문에 여러가지를 물어볼 거예요. 그냥 마지막 핵심인 enable lazy loading을 키시고 셋업을 완료해주세요.
자 이제 적용됐는지 확인해 볼까요?
Lazy Load 확인하기
이 레이지 로드가 적용된 걸 확인하는 방식은 솔직히 조금 재밌습니다. 저도 한번 적용해 보고 몇 번을 확인해 봤는지 몰라요.
일단 이미지가 많은 게시물로 이동합니다. 그다음 스크롤을 빠르게 내려볼까요? 그렇다면 스크롤의 이미지에 닿는 그 순간의 이미지를 불러오는 게 보이실겁니다. 이미지 구역이 비어 있다가 이미지가 서서히 나타납니다. 이게 바로 Lazy Load 최적화입니다.
마무리
자 여러분 열심히 따라서 레이지로드를 적용하셨나요? 이렇게 하나하나 최적화를 해나가며 SEO 점수를 꼭 챙기시길 바랍니다. 역시 블로그를 운영하며 사용자 경험을 개선하는 건 정말 재밌는 일인 것 같습니다. 다음에도 SEO 최적화 팁 있다면 바로 게시해 드릴게요. 그리고 잘 모르시는 분들도 이해하기 쉽도록 설명하려고 노력하겠습니다.