지연 로딩을 사용하여 완벽한 모바일 속도 결과를 얻는 방법

사이트가 Google 모바일 사이트 속도 테스트를 통과했습니까? 아니? 지연 로딩 이미지를 보고 싶을 수도 있습니다.

웹사이트 성능이 중요합니다. 블로그나 웹사이트가 느리게 로드되면 사용자 경험에 좋지 않습니다.

아무도 귀하의 사이트가 로드될 때까지 5초 또는 10초를 기다리지 않을 것입니다. 인터넷 속도나 다운로드 속도가 빨라야 합니다. 느린 웹사이트는 이탈률을 높이고 전환율을 낮춥니다.

사이트에 대한 웹 사이트 속도 테스트를 수행할 때 데스크톱 속도는 일반적으로 괜찮습니다. 그러나 모바일 속도 테스트에서 페이지 성능은 어떻습니까?

모바일 사용자를 위한 준비

대부분의 블로깅 및 웹 사이트 프로그램은 데스크탑 보기용으로 합리적으로 잘 구축되어 있습니다.

반응형 디자인을 사용하여 모바일 버전을 제공합니다.

이것은 실용적인 솔루션이지만 상당한 단점이 있습니다.

사이트가 반응형이면 모바일 장치에서 작동합니다.

그러나 이미지의 파일 크기는 데스크톱용이므로 모바일 사이트 속도가 훨씬 느립니다.

Google Pagespeed Insights 테스트를 수행하는 경우 결과가 합리적이고 데스크톱 의 경우 녹색 일 수 있지만 모바일 버전의 경우 이와 같이 보입니다.

웹 사이트 방문자의 절반 또는 그 이상이 모바일 장치를 사용하고 있다고 생각할 때 페이지 로드 시간과 모바일 속도를 개선해야 합니다.

Google은 모바일 퍼스트 인덱스를 순위 요소로 사용하기 위해 움직이고 있습니다.

성능 모니터링에 사용할 수 있는 무료 웹 사이트 속도 테스트 서비스가 많이 있습니다.

그러나 모든 속도 테스트 앱이 모바일 사이트 속도를 측정하는 것은 아닙니다. 따라서 데스크톱 사이트 페이지 속도에 대한 좋은 결과에 안심하지 마십시오.

WebpageTest를 사용하면 다른 모바일 버전을 선택할 수 있으므로 Google의 대안입니다.

장치는 훨씬 느린 인터넷 연결 속도로 연결되므로 항상 모바일 버전을 확인할 수 있는지 확인하십시오.

결과가 만족스럽지 않으면 해야 할 일이 있습니다.

모바일 성능을 어떻게 향상시키나요?

데스크톱과 모바일 모두에서 사이트 속도 저하에 영향을 미치는 요인은 많습니다.

Javascript 및 CSS 파일은 너무 일찍 로드되어 렌더링을 차단할 수 있습니다. WordPress를 사용하는 경우 캐싱 플러그인을 사용하여 쉽게 수정할 수 있습니다.

TTFB(Time To First Byte)가 0.5초보다 약간 높게 만드는 웹 호스트에 문제가 있을 수 있습니다.

그러나 대부분의 호스트는 이 시간보다 기껏해야 10~20%만 높으므로 큰 문제가 되지 않습니다.

가장 큰 문제는 거의 항상 이미지와 iframe입니다. 게시물에 이미지를 추가하면 모바일용으로 압축, 크기 또는 형식이 지정되지 않습니다.

플러그인을 사용하여 도움을 받을 수 있습니다. Smush는 업로드할 때 이미지를 압축하는 데 널리 사용되는 플러그인입니다. 그 결과 데스크톱 버전은 약간 향상되지만 모바일 버전은 그렇지 않습니다.

모바일에서 페이지 로드 시간을 개선하려면 훨씬 더 작은 이미지를 제공해야 합니다. 그러나 여기에는 많은 작업이 필요합니다.

최근까지 최상의 솔루션은 사이트의 별도 모바일 버전을 사용하거나 AMP 페이지를 사용하는 것이었습니다. 어느 쪽이든 기존 사이트의 모든 이미지를 차세대 이미지로 교체해야 했습니다.

솔루션과 관련된 작업은 사이트 크기에 따라 몇 주 또는 몇 달이 걸릴 수 있습니다.

대부분의 사이트 소유자는 Intersection observer API 또는 img src, data src 속성, class lazy, img 태그 또는 img 클래스에 대해 모른다면 새로운 모바일 사이트를 구축하지 않을 것입니다.

현실을 직시하자. 너무 힘들고 시간이 많이 걸립니다.

더 읽어보기: 연락처 양식 및 댓글 스팸을 중지하는 방법

지연 로딩 동작 적용

다행히 모바일 페이지 로드 시간을 쉽게 수정할 수 있는 방법이 있습니다. 답은 모든 이미지를 느리게 로드하는 것입니다.

지연 로딩은 독자가 이미지를 필요로 할 때까지 이미지 전달을 지연시킵니다. 독자가 웹 페이지를 스크롤할 때 볼 수 있는 것 아래의 이미지가 뒤로 밀려납니다.

이렇게 하면 페이지의 초기 로드 시간이 즉시 로드 시간보다 훨씬 줄어듭니다. 블로그나 웹사이트에 지연 로딩을 추가하기 위한 많은 플러그인과 솔루션이 있습니다.

지연 부하 테스트 실행

지난 몇 주 동안 저는 모바일 사이트를 활기차게 만드는 새로운 방법을 베타 테스트했습니다.

콘텐츠 전송 네트워크, 지연 로딩 및 지연된 오프스크린 이미지에 대해 들어보셨을 것입니다.

그렇지 않은 경우 페이지가 로드되고 사용자가 페이지를 아래로 스크롤할 때만 이미지를 제공하는 요소입니다. Medium과 같은 사이트에서 실제로 본 적이 있을 것입니다.

사이트를 처음 방문하면 이미지가 잠시 동안 흐리게 표시됩니다. 자리 표시자 이미지라고 합니다.

그러면 이미지가 순식간에 선명하게 나타납니다.

이것은 지연 로딩입니다. 사용자가 페이지를 아래로 스크롤하면 이미지가 필요할 때까지 로드되지 않습니다.

특히 모바일 장치에서 페이지 작업을 매우 빠르게 만듭니다. 지연 로더는 웹 페이지의 이미지 수에 관계없이 적용할 수 있습니다.

하지만 이 솔루션에는 여전히 한 가지 요소가 빠져 있습니다. 이미지는 차세대 형식이 아닙니다.

다행히 이제 솔루션이 있으므로 모든 이미지를 교체할 필요가 없습니다. Optimole은 많은 작업을 수행하는 WordPress 플러그인입니다.

이미지를 지연 로드할 뿐만 아니라 차세대 이미지를 제공하는 새로운 이미지 URL로 이미지를 대체합니다.

또한 이미지 크기를 즉석에서 조정합니다.

옵티몰 테스트하기

많은 테스트를 했고 페이지를 확인할 때마다 Google 모바일 속도 테스트에서 매우 높은 점수를 받았습니다.

내 테스트 중 하나는 10개의 큰 비압축 및 크기 조정되지 않은 이미지가 포함된 전체 너비 웹 페이지를 사용하는 것이었습니다.

즉, 페이지에 큰 이미지 더미를 두드려서 게시했습니다. (이미지는 픽사베이에서 제공되었으므로 크리에이티브 커먼즈 속성이 필요하지 않았습니다.)

페이지가 너무 커서 이미지를 보여드릴 수 없었습니다. 그래서 동영상으로 보여드리겠습니다.

Google에서 페이지를 테스트했을 때 이것이 결과였습니다.

모든 이미지의 크기를 고려하면 놀라운 일이 아닙니다.

그런 다음 Optimole을 활성화했습니다. 아래에서 사용한 설정을 볼 수 있습니다. 그게 당신이해야 할 전부입니다.

결과는 어땠습니까?

데스크톱의 경우 만점입니다.

모바일의 경우 만점에 가까운 점수입니다.

GTmetrix에서 점수는 다시 완벽에 가깝습니다.

이것은 고해상도의 거대한 이미지로 가득 찬 페이지에 대한 실제 결과임을 기억하십시오.

플러그인을 설치하고 API 키를 받는 데 몇 분밖에 걸리지 않았고 설정을 활성화하는 데 몇 초밖에 걸리지 않았습니다.

그래서 5분도 안 되어 거의 완벽한 모바일 페이지와 사이트를 갖게 되었습니다.

옵티몰에 대해 자세히 알아보기

실제로 작동하는 플러그인을 보려면 CodeinWP 웹 사이트를 방문하십시오. Optimole에서 실행 중이므로 사이트 속도에 대한 테스트를 실행할 수 있습니다.

Optimole 웹 사이트로 이동하여 사이트를 확인할 수 있습니다.

내 사이트 확인 버튼을 클릭하고 사이트의 URL을 입력합니다. 모든 이미지 목록과 웹사이트에서 절약할 수 있는 금액이 표시됩니다.

소규모 사이트가 있는 경우 무료 버전의 플러그인을 사용할 수 있습니다. 그러나 대규모 사이트가 있는 경우 프리미엄 옵션을 고려하는 것이 좋습니다.

모바일 방문자를 위해 웹 사이트를 초고속으로 실행하는 데 걸리는 시간보다 이 기사를 읽는 데 더 오래 걸렸습니다. 그래서 당신은 무엇을 기다리고 있습니까?

더 많은 지연 로딩 대안

Nextgen 이미지의 CDN 제공을 설정하지 않으려는 경우 사용할 수 있는 무료 옵션이 많이 있습니다.

WordPress는 이제 기본적으로 지연 로딩을 통합합니다. 그러나 작동 방식을 거의 제어할 수 없습니다. 일반적으로 성능을 미세 조정할 수 있도록 플러그인을 사용하는 것이 좋습니다.

Smush는 이미지를 미디어 라이브러리에 로드할 때 이미지를 줄이는 인기 있는 무료 WordPress 플러그인입니다.

그러나 지연 로딩을 활성화하는 옵션이 있습니다. 내 사이트에서 몇 번 시도했지만 완벽하게 작동합니다. 옵션을 활성화하기만 하면 완료됩니다.

A3 Lazy Load는 또 다른 무료 플러그인입니다. 나는 이것을 포함하여 많은 내 사이트에서 오랫동안 그것을 사용했습니다.

내가 좋아하는 것은 많은 옵션을 다듬을 수 있다는 것입니다. 일부 테마의 점프 문제를 해결하는 위젯을 제외하는 옵션이 있습니다.

BJ Lazy Load는 오랫동안 존재해 왔습니다. 90,000명 이상의 사용자가 있습니다. 그러나 한동안 업데이트되지 않았습니다.

Lazy Load는 60,000회 설치되는 무료 플러그인입니다. 사이트 속도 최적화를 위한 올인원 솔루션인 WP Rocket의 무료 구성 요소입니다.

마지막 플러그인은 동영상용 지연 로드입니다. 사이트에 Youtube 동영상이 많은 경우 사용하기에 좋은 도구입니다.

정말 좋은 선택입니다! 이제 느린 모바일 웹사이트를 가질 이유가 전혀 없습니다.

참고: 저는 이 제품과 아무런 관련이 없습니다. 내 Optimole 리뷰는 사용자로서의 내 경험을 기반으로 합니다.

더 읽어보기: 무료 웹사이트 검사기 및 SEO 도구