워드프레스 사이트 느릴 때 이미지를 살펴보는 이유

사이트가 느려지면 캐시 설정부터 바꾸기 쉽지만, 이미지 로딩 속도를 재면 지연 로딩이 필요한 정도를 가늠할 수 있습니다.⠀

처음에는 잘 열리던 워드프레스 사이트가 느려져 새로고침을 해도, 어느 이미지에서 지체되는지는 여전히 알 수 없습니다.⠀

블로그나 작은 쇼핑몰을 직접 운영한다면 이미지를 왜 살펴봐야 하고, 그 속도는 어디서 봐야 할까요?⠀

⠀⠀⠀

⠀⠀⠀

새로고침해도 이미지 속도는 안 보입니다⠀

⠀⠀⠀

처음에는 인터넷 연결을 의심하며 새로고침을 해보게 됩니다. 다른 사이트는 잘 열리는데 내 사이트만 느리다면 답답합니다.⠀

플러그인을 줄이거나 캐시 설정을 바꾸라는 조언도 보이지만, 지금 어떤 이미지가 느린지는 그 조언만으로 알 수 없습니다.⠀

이미지를 살펴보는 이유는 설정을 바꾸기 전에 로딩 상태를 측정해 지연 로딩의 필요성을 따져볼 수 있기 때문입니다.⠀

⠀⠀⠀

전체 사이트가 느린지, 사진이 들어간 페이지에서 특히 느리게 느껴지는지 방문자가 열 페이지를 직접 골라 봅니다.⠀

그 페이지를 기준으로 삼으면 이후에 측정한 이미지 로딩 속도가 어느 화면에 관한 것인지 구분할 수 있습니다.⠀

사이트 첫 화면과 사진이 있는 글 가운데, 지금 느리다고 느낀 페이지의 주소를 먼저 적어 둡니다.⠀

⠀⠀⠀

⠀⠀⠀

페이지스피드 화면에서 속도를 봅니다⠀

⠀⠀⠀

구글이 제공하는 웹페이지 성능 측정 도구인 PageSpeed Insights에서 선택한 페이지의 이미지 로딩 속도를 측정합니다.⠀

주소를 넣을 때는 방금 느리다고 느낀 페이지를 사용해야, 다른 페이지의 결과와 섞이지 않습니다.⠀

측정 화면에 나온 이미지 관련 내용은 표시된 이름과 결과를 그대로 읽고, 막연한 체감 속도와 구분합니다.⠀

⠀⠀⠀

이미지 로딩 속도가 눈에 띄는 페이지라면 지연 로딩을 검토할 이유가 될 수 있습니다.⠀

그 숫자 하나만 보고 느려진 원인을 이미지로 확정하지는 말고, 어느 페이지를 쟀는지 함께 남깁니다.⠀

측정 결과를 나중에 다시 볼 수 있도록 페이지 주소와 이미지 로딩에 관한 표시 내용을 같은 곳에 적습니다.⠀

⠀⠀⠀

⠀⠀⠀

다른 도구에서도 이미지를 봅니다⠀

⠀⠀⠀

GTmetrix는 웹페이지 성능을 측정하는 도구이며, 여기에서도 이미지 로딩 속도를 살펴볼 수 있습니다.⠀

PageSpeed Insights에 입력했던 페이지 주소를 GTmetrix에도 넣고, 이미지가 로딩되는 모습을 측정 결과에서 읽습니다.⠀

페이지를 바꾸지 않아야 두 화면에서 서로 다른 글을 측정하는 혼동을 피할 수 있습니다.⠀

⠀⠀⠀

각 도구 화면에 적힌 항목 이름을 그대로 두고, 이미지 로딩 속도에 관한 내용을 나란히 살펴봅니다.⠀

서로 다른 화면의 항목을 같은 값으로 취급하지 않고, 어느 도구에서 본 결과인지 붙여 둡니다.⠀

새 플러그인을 고르기 전에 지금 쓰는 페이지의 이미지가 어떻게 로딩되는지 보는 데 이 결과를 씁니다.⠀

⠀⠀⠀

⠀⠀⠀

워드프레스에 이미 기능이 있습니다⠀

⠀⠀⠀

워드프레스에는 5.4 버전부터 이미지 지연 로딩 기능이 기본으로 탑재되었습니다.⠀

이미지 때문에 느리다고 생각해 지연 로딩 플러그인을 찾았다면, 현재 사이트의 워드프레스 버전부터 살펴볼 만합니다.⠀

5.4 이상을 쓰는 사이트라면 지연 로딩 기능이 아예 없는 상태라고 가정하고 설정을 더하는 판단은 서두를 필요가 없습니다.⠀

⠀⠀⠀

관리자 화면에서 현재 버전을 읽고, 앞서 측정한 페이지의 이미지 로딩 상태와 함께 놓아 봅니다.⠀

기본 기능이 있다는 사실과 지금 측정한 페이지에서 이미지가 빠르게 로딩된다는 결과는 서로 다른 이야기입니다.⠀

현재 버전을 모른 채 플러그인부터 설치하면 이미 있는 기능을 살펴볼 기회를 놓칠 수 있습니다.⠀

⠀⠀⠀

⠀⠀⠀

지연 로딩은 측정값을 보고 고릅니다⠀

⠀⠀⠀

지연 로딩을 더 손볼지 판단할 때는 선택한 페이지에서 측정한 이미지 로딩 속도를 다시 봅니다.⠀

워드프레스 5.4부터 기본 기능이 있다는 사실만으로 지금 페이지의 로딩 상태까지 알 수는 없습니다.⠀

제가 고를 행동은 새 설정을 더하기 전에 같은 페이지의 이미지 측정 결과를 다시 읽는 것입니다.⠀

⠀⠀⠀

PageSpeed Insights와 GTmetrix의 결과에서 이미지가 어떻게 로딩되는지 살펴보고, 현재 버전도 함께 적어 둡니다.⠀

이미지 로딩 속도가 신경 쓰인다면 바꿀 설정 하나를 고르고, 백업해 둔 뒤 변경해 같은 페이지를 다시 측정합니다.⠀

측정한 페이지가 달라지면 변경 전후의 이미지 로딩 상태를 비교할 기준도 흐려집니다.⠀

⠀⠀⠀

⠀⠀⠀

사이트가 느릴 때 이미지를 살펴보는 이유는 측정한 이미지 로딩 속도로 지연 로딩의 필요성을 가늠할 수 있기 때문입니다.⠀

현재 워드프레스 버전을 읽고, 느리게 느껴지는 페이지의 이미지 로딩 속도를 측정해 보시기 바랍니다.⠀

• 워드프레스 속도 개선 방법: 2초대 로딩을 위한 사이트 최적화
• 사진 올릴수록 사이트 느려지는 이유, 원본 그대로 쓰고 있나요
• 예제 페이지
• PageSpeed 점수, WebP 적용만으로 올라갈 수 있을까