17 단계의 쉬운 단계에서 모바일 장치 용 WordPress를 최적화하는 방법

모바일 장치 용 WordPress 사이트를 최적화하는 것은 더 이상 사치가 아닙니다. 화면 크기에 관계없이 웹 사이트가 반응이 좋고, 빠르게로드되며, 탐색하기에 직관적이라는 것이 필요합니다. 그것 없이는, 당신은 모바일이 사람들이 온라인으로 정보에 액세스하는 주요 방법 인 세계에서 방문객을 잃고 기회를 잃게됩니다.

2024 년 11 월 현재 모든 웹 사이트 트래픽의 64.04%가 모바일 장치에서 나옵니다. 이 숫자는 단순한 진실을 강조합니다. 귀하의 사이트가 모바일 친화적이지 않으면 대부분의 온라인 사용자를 놓치게됩니다. 이 기사에서는 모바일 장치의 WordPress 사이트를 최적화하여 잠재 고객을 만나는 방법에 대해 논의합니다.

먼저 모바일 최적화의 가장 중요한 측면 중 하나 인 성능을 살펴 보겠습니다.

모바일 장치에서 속도가 중요한 이유

모바일 속도의 중요성은 절제 될 수 없습니다. 방문객들은 즉각적인 결과를 기대합니다. 따라서 사이트를로드하는 데 너무 오래 걸리면 다른 것으로 빠르게 이동합니다. 느리게로드하는 사이트는 사용자를 좌절시키고 참여를 줄이고, 이탈률을 높이고, 전환을 제한합니다.

대조적으로, 빠른로드 시간은 쾌적한 탐색 경험을 만들어 방문자를 참여시키고 콘텐츠를 탐색하거나 구매할 가능성이 높아집니다. 연결이 다양하고주의 범위가 짧을 수있는 모바일 장치에서는 속도가 훨씬 더 중요해집니다. 잘 최적화 된 사이트는 신뢰를 구축하고 유용성을 향상 시키며 긍정적 인 사용자 경험을위한 단계를 설정합니다.

방문자가 귀하의 사이트에서 경험 한 경험 외에도 모바일 사이트 속도는 전반적인 가시성에도 영향을 미칩니다. 검색 엔진은 빠르고 모바일 친화적 인 사이트를 선호하여 순위를 높이고 더 많은 트래픽을 주도합니다. 우선 순위 지정 속도는 모든 장치에서 예상대로 사이트를 수행 할 수 있도록합니다.

WordPress 웹 사이트에 영향을 미치는 일반적인 모바일 문제

모바일 최적화는 웹 사이트를 멋지게 보이게하는 것이 아닙니다. 이는 모바일 사용자 경험을 방해하는 주요 문제를 해결하는 것을 의미합니다. 다음은 종종 WordPress 사이트에 영향을 미치는 세 가지 일반적인 문제입니다.

느린로드 시간

모바일 사용자는 페이지가 빠르게로드 될 것으로 예상합니다. 귀하의 사이트가 지연되면 방문자가로드를 마치기 전에 떠날 가능성이 높습니다. 느린로드 시간은 종종 최적화되지 않은 이미지, 과도한 플러그인 또는 서버 성능 저하로 인해 발생하며 참여 및 변환이 모두 손상됩니다.

일관되지 않은 레이아웃 및 깨진 페이지

데스크톱 친화적 인 디자인이 항상 작은 화면으로 잘 번역되는 것은 아닙니다. 요소 이동, 이미지는 제대로 확장되지 않으며 특정 기능은 완전히 파손됩니다. 이러한 불일치는 실망스러운 경험을 만들어 사이트 방문자에게 비전문적이거나 신뢰할 수없는 것처럼 보이게합니다.

불쌍한 사용자 경험 (UX)

혼란스러운 메뉴, 작은 버튼 및 읽기 어려운 텍스트는 모바일 장치의 일반적인 문제입니다. 사용자가 귀하의 사이트를 쉽게 탐색하거나 원하는 것을 찾을 수 없다면, 고집하거나 돌아올 가능성이 적습니다. 깨끗하고 모바일 친화적 인 디자인의 우선 순위를 정하면 사이트가 기능적이고 사용하기에 즐겁습니다.

WordPress 모바일 최적화에 대한 점검 목록

각 단계를 거치면서 아래 점검 목록을 사용하여 중요한 것을 놓치지 않도록하십시오! 미래의 사이트 방문자는 감사합니다.

• 크로스 브라우저 기능이있는 모바일 응답 테마를 사용하십시오
• 고성능 호스팅 제공 업체를 확보하십시오
• 평판이 좋은 속도 최적화 플러그인을 설치하십시오
• CDN을 사용하십시오
• 이미지를 최적화하고 압축하십시오
• 모바일 친화적 인 탐색 및 메뉴 구조를 확인하십시오
• 모바일 가독성을 위해 글꼴 크기 및 타이포그래피를 조정하십시오
• 터치 대상의 크기가 적절하고 간격이 있는지 확인하십시오
• 모바일 친화적 인 양식 및 입력 필드를 구현하십시오
• 모바일의 팝업 및 간극을 제거하거나 최적화합니다
• 모바일 레이아웃에서 불필요한 위젯 및 사이드 바를 제거하십시오
• 모바일 페이지에서 불필요한 플러그인 및 스크립트를 비활성화하십시오
• 모바일 사용자를위한 클릭 간 버튼을 구현하십시오
• 모바일 용 소셜 공유 버튼을 최적화합니다
• 지도와 같은 내장 된 컨텐츠가 모바일 친화적인지 확인하십시오
• 사이트 서버에서 비디오를 호스팅하지 마십시오
• 모바일 페이지 속도와 로딩 시간을 정기적으로 테스트하십시오

각 단계에 대해 자세히 설명해 봅시다.

17 단계의 쉬운 단계에서 WordPress 사이트를 모바일 친화적으로 만드는 방법 :

1. 가벼운 반응 형 WordPress 테마를 선택하십시오

반응 형 테마는 장치 전체에 걸쳐 다양한 크기의 화면에 맞게 자동으로 조정됩니다. 버튼에서 텍스트 블록에 이르기까지 사이트의 모든 요소를 ​​볼 수 있고 액세스 가능하며 유연하게 만들기 위해 노력합니다.

경량 테마는 불필요한 코드와 사이트를 늦출 수있는 기능을 최소화하여 속도와 적응성을 모두 제공함으로써이를 더욱 향상시킵니다.

테마를 선택할 때는 모바일 친화적이거나 반응 형이라고 명시 적으로 라벨을 지정하는 테마의 우선 순위를 정하십시오. 다양한 장치에서 데모 버전을 테스트하여 기능 수행 방법을 확인하고 내비게이션 메뉴, 페이지로드 시간 및 전체 레이아웃에 세심한주의를 기울입니다.

2. 고성능 호스팅 제공 업체를 선택하십시오

모바일 최적화를위한 빠르고 신뢰할 수있는 호스팅 제공 업체도 선택합니다. 품질이 낮은 호스팅은 로딩 및 응답 시간이 느려집니다. 저렴한 호스트는 돈을 절약 할 수 있지만 종종 서버를 웹 사이트로 과부하시키고 모든 사람을 위해 속도를 늦출 수 있습니다.

대신, 신뢰할 수 있고 WordPress 관련 호스팅을 찾으십시오. 관리되는 WordPress 호스팅 경로를 가고 있다면 Pressable은 몇 가지 훌륭한 옵션 중 하나입니다.

3. 평판이 좋은 속도 최적화 플러그인을 설치하십시오

대부분의 경우 고품질 플러그인은 시작하는 데 필요한 부스트 만 제공 할 수 있습니다.

JetPack Boost는 즉각적인 성능 향상을 제공하는 잘 알려진 WordPress 플러그인입니다. 특히 Google이 사용자 경험을 측정하기 위해 사용하는 필수 메트릭 (필수 메트릭)을 대상으로 한 클릭만으로 점수를 높일 수 있습니다.

또한 서버의로드를 줄이고 개별 방문자의 브라우저를 기반으로 이미지를 자동으로 크기를 조정하고 제공하는 이미지 콘텐츠 전달 네트워크가 제공됩니다. 또한 CSS로드를 최적화하고 필수 할 수없는 JavaScript를 방어합니다.

이것은 약간 기술적으로 들릴 수 있지만, 본질적으로 모바일 최적화를위한 다른 모범 사례를 따르지만 값 비싼 개발자를 고용하지 않고 추가 성능 푸시가 필요하다면 Jetpack Boost는 가장 친한 친구가 될 것입니다.

4. CDN (Content Delivery Network) 구현

CDN (Content Delivery Network)은 서버와 방문자 간의 물리적 거리를 줄임으로써 웹 사이트의 성능을 향상시킵니다. 여러 지리적 위치에 배포 된 서버에 사이트의 정적 파일 (예 : 이미지, CSS 및 JavaScript)의 캐시 된 버전을 저장하여 작동합니다. 사용자가 귀하의 사이트를 방문하면 CDN은 서버에서 위치에 가장 가까운 곳에서 이러한 파일을 전달하여로드 시간 속도를 높입니다.

CDN은 기본 호스팅 서버에서 대기 시간과 대역폭을 오프로드하여 교통량이 많은 기간 동안에도 더 빠르고 일관된 성능을 보장합니다.

Jetpack에서 권장하는 일부 호스트와 마찬가지로 많은 호스트에는 패키지의 일부로 CDN을 사용하는 것이 포함됩니다. 호스팅 옵션과 관련 비용을 측정 할 때 고려해야 할 귀중한 추가 사항입니다.

5. 이미지를 최적화하고 압축하십시오

모바일 장치에는 대역폭과 처리 능력이 제한되어 있습니다. 비 압축 이미지 및 비디오는 사이트 효율성에 영향을 미치고 사용자 경험을 방해합니다. 이를 해결하려면 이미지를 적절한 차원으로 조정하고 품질을 손상시키지 않고 압축하십시오.

Webp는 JPEG 및 PNG에 비해 크기가 작은 최신 이미지 형식입니다. 데이터를 잃지 않고 이미지를 압축하며 주요 브라우저에서 널리 사용할 수 있습니다. Webp는 GIF 및 PNG에 대한 훌륭한 대안이며 크기가 줄어든 애니메이션 이미지를 지원합니다.

JetPack Boost는 업로드시 이미지를 자동으로 크게 크기로 바꾸고 Webp로 변환하며 이미지 CDN을 사용하여 이미지로드 시간 속도를 높입니다.

6. 모바일 친화적 인 탐색 및 메뉴 구조를 확인하십시오

반응 형 WordPress 테마는 레이아웃을 작은 화면에 적응하는 데 도움이되지만 항상 직관적 인 내비게이션 구조를 보장하지는 않습니다. 사이트의 메뉴 및 내비게이션을 사용하기 쉽고 모바일 장치에서 액세스 할 수 있는지 확인하는 것은 귀하에게 달려 있습니다.

이렇게하려면 내비게이션을 간단하게 유지하고 필수 요소에 집중하십시오. 필요한 경우 접을 수있는 메뉴에서 메뉴 항목 및 그룹 관련 링크 수를 제한하십시오. 깨끗하고 간단한 구조는 방문자가 좌절없이 필요한 것을 더 쉽게 찾을 수있게합니다.

널리 알려진 "햄버거"메뉴 (3 라인 아이콘)는 모바일 탐색에 적합합니다. 이를 사용하여 슬라이드 아웃 또는 드롭 다운 패널 내에서 사이트의 주요 섹션을 구성하십시오.

가장 작은 화면 크기의 우선 순위를 지정하여 모바일 우선 사고 방식으로 탐색을 설계하십시오. 기본 기능을 얻는 데 중점을 둔 모바일 장치에 최적화 된 메뉴를 구축하여 시작하십시오. 모바일 경험이 정제되면 더 큰 화면의 설계를 확장하십시오.

7. 모바일 가독성을 위해 글꼴 크기 및 타이포그래피를 조정하십시오

웹 사이트의 모든 요소는 글꼴 크기 및 타이포그래피를 포함하여 반응이 있어야합니다. 데스크탑에서 너무 큰 것으로 간주되는 것은 모바일 화면에 적합한 크기 일 수 있습니다. 글꼴 크기의 응답 성을 최대화하려면 픽셀 (PX) 대신 상대 사이징 EM 또는 rem 단위를 사용하십시오. 픽셀은 화면 크기에 관계없이 특정 글꼴 크기를 페이지에 하드 코딩하는 반면 EM 또는 Rem Unit은 사용자 화면에서 사용할 수있는 공간의 양과 관련하여 위 또는 아래로 크기를 조정합니다.

데스크탑보기에서 좋아 보인다고 생각하는 글꼴은 모바일에서 완전히 읽을 수없는 것처럼 보일 수 있습니다. 다른 글꼴로 놀고 가독성과 일관성을 보장하기 위해 다른 디스플레이에 어떻게 나타나는지 테스트하십시오.

텍스트가 포함 된 이미지를 포함하는 경우 이미지 내부에서 디자인 된 텍스트가 응답하지 않습니다. 대신 커버 블록을 사용하여 이미지 꼭대기에 텍스트를 작성하십시오. 이제 텍스트가 화면으로 줄어들고 확장됩니다.

8. 터치 대상의 크기가 적절하고 간격이 있는지 확인하십시오

괜찮은 탐색으로는 충분하지 않습니다. 터치 대상 크기에 대해서도 생각해야합니다. 즉, 링크와 버튼은 모바일 장치에서 눌러질 정도로 커야합니다. 버튼 사이의 간격도 고려해야합니다. 방문자가 실수로 의도하지 않는 버튼을 누르는 것을 원하지 않습니다.

적절한 간격은 또한 손가락이나 이동성 문제가 더 큰 사람들의 접근성을 향상시켜 모든 사람이 사이트를 편안하게 탐색 할 수 있도록합니다. 다양한 장치에서 사이트를 테스트하여 버튼과 링크를 쉽게 탭하고 대화식 요소를 서로 너무 가깝게 배치하지 마십시오.

9. 모바일 친화적 인 양식 및 입력 필드를 구현하십시오

모든 사이트에는 기능적 모바일 양식이 필요하지만 사람들이 실제로 그것을 채우도록하려면 모바일 접근성과 기능에주의를 기울이십시오. 다음은 몇 가지 팁입니다.

• 입력 필드 제한 . 양식을 짧게 유지하고 필수 정보 만 요구합니다. 불필요한 필드가있는 방문자 과부하는 포기 율이 증가합니다.
• 명확한 필드 레이블을 포함하십시오 . 사람들이 제공 할 정보를 알 수 있도록 각 입력 필드에 레이블을 지정하십시오.
• 입력 방법을 최적화하십시오 . 바이너리 선택에는 확인란 또는 토글 스위치를 사용하고 소수의 상호 배타적 인 옵션을위한 라디오 버튼 및 더 긴 목록을위한 드롭 다운 메뉴를 사용하십시오. 이 옵션은 작은 화면에서 쉽게 선택할 수 있습니다.
• 강력한 통화 유도 문안이있는 큰 버튼을 사용하십시오 . 제출 버튼이 눈에 띄게 표시되고 탭하기 쉽고“지금 가입”과 같은 매력적인 액션 지향 텍스트를 특징으로합니다. 또는 "시작하십시오."

이 설정 프로세스를 단순화하려면 JetPack 플러그인에 포함 된 양식 블록을 사용하십시오.

10 모바일의 팝업 및 간극을 제거하거나 최적화합니다

팝업 및 간극 (전체 화면 광고)을 둘러싼 일반적인 합의는 특히 모바일 화면에서 성가시고 원치 않는다는 것입니다. 많은 웹 브라우저가 자동으로 팝업을 차단합니다.

팝업 또는 간극을 사용하기로 선택한 경우 크기를 최소화하고 명확하고 접근 가능한 닫기 버튼으로 쉽게 기각 할 수 있도록 모바일 친화적인지 확인하십시오. 쿠키 동의 또는 중요한 프로모션과 같은 필수 메시지로의 사용을 제한하고 사용자의 탐색 경험을 방해하지 않도록 전략적으로 시간을 보냅니다.

11. 모바일 레이아웃에서 불필요한 위젯 및 사이드 바를 제거하십시오

사이드 바 또는 위젯이있는 작은 모바일 화면에있는 제한된 양의 공간을 차지하지 마십시오. 이러한 요소는 데스크탑 레이아웃에 유용하지만 종종 모바일 화면을 혼란스럽게하고 기본 콘텐츠에서 산만 해집니다.

대신, 사용자 경험을 향상시키는 가장 중요한 요소 만 표시하는 데 집중하십시오. 검색 창 또는 호출 버튼과 같은 필수 위젯을 헤더 또는 바닥 글과 같은보다 접근하기 쉬운 위치로 이동하십시오. WordPress 테마의 사용자 정의 옵션 또는 Jetpack과 같은 플러그인을 사용하여 모바일 장치에 대해 특별히 위젯 가시성을 조정하십시오.

좋은 소식은 데스크탑보기에 사이트에 사이드 바가 있더라도 반응 형 테마를 사용하면 햄버거 메뉴로 이동하거나 붕괴된다는 것입니다.

12. 모바일 페이지에서 불필요한 플러그인 및 스크립트를 비활성화하십시오

불필요한 플러그인과 스크립트를 피하는 것도 큰 도움이됩니다. 과도한 플러그인은 사이트를 늦추고 호환성 문제를 만듭니다. 이로 인해로드 시간과 잠재적 오류가 더 길어집니다.

현재 플러그인을 감사하여 모바일 사이트에 적극적으로 가치를 추가하지 않는 것을 식별하십시오. 중복, 구식 또는 데스크탑 기능과 관련된 플러그인을 비활성화하거나 제거하십시오. 마찬가지로, 애니메이션, 배경 비디오 또는 추적 도구와 같은 모바일 사용자에게는 필수적이지 않은 무거운 스크립트의 사용을 제한하십시오.

13. 모바일 사용자를위한 강력한 클릭 유도기 버튼 및 클릭 간 버튼 구현

CTA (Call-to-Action) 버튼은 가입, 구매 또는 리소스 다운로드와 같은 특정 조치에 대한 모바일 방문자를 안내합니다. 이 버튼을 사용하면 방문자와 교류하고 전환을 추적하고 사이트의 노력의 성공을 측정 할 수 있습니다.

모바일 사용자의 경우 클릭 간 버튼이 특히 효과적입니다. 이 전문화 된 CTA는 한 번의 탭으로 전화를 통해 방문자를 비즈니스에 즉시 연결합니다. 모바일 사용자가 이미 장치에 있기 때문에이 기능은 쉽고 편리하게 도달 할 수 있습니다.

14. 모바일 용 소셜 공유 버튼을 최적화합니다

최적화 된 소셜 공유 버튼은 특히 모바일 장치에서 사이트의 가시성 및 참여를 향상시킵니다. 제대로 설계되지 않았거나 대형 크기의 버튼은 작은 화면을 혼란스럽게하고 탐색을 방해하며 사람들을 좌절시킵니다. 이를 피하려면 버튼을 공유하고 탭하기 쉽고 방문자가 자연스럽게 콘텐츠와 상호 작용하는 위치에 전략적으로 배치하십시오.

블로그 게시물 또는 제품 페이지의 상단 또는 하단과 같은 키 포인트의 위치 버튼은 모바일 인터페이스를 압도하지 않고 공유를 장려합니다.

15. 맵과 같은 내장 된 컨텐츠가 모바일 친화적인지 확인하십시오

맵과 같은 임베디드 컨텐츠는 원활한 사용자 경험을 유지하기 위해 모바일 장치가 완전히 대응하고 최적화되어야합니다. 어리석거나 반응이없는지도는 좌절감을 유발하며 특히 심각한 경우 이탈률이 높아집니다.

Google지도, Bing Maps 또는 OpenStreetMap과 같은 응답 형 맵 제공 업체를 선택하고 장치에서 올바르게 확장해야합니다. 맵 임베드를 드물게 사용하여 연락처 나 위치 별 페이지와 같이 전략적으로 배치하여 사이트를 빠르고 사용자 친화적으로 유지하십시오.

JetPack Maps 블록을 사용하면 추가 플러그인이 필요없이 WordPress 사이트에 모바일 최적화 된 맵을 쉽게 추가 할 수 있습니다.

16. 사이트 서버에서 비디오를 호스팅하지 마십시오

사이트 서버에서 직접 비디오를 호스팅하면 상당한 저장 공간이 소비되고 특히 모바일 사용자에게 성능이 느려집니다. 대신 Videopress와 같은 도구를 사용하여 고품질 비디오를 .mp4 와 같은 가벼운 형식으로 업로드하십시오. 이것은 비디오 전달을 간소화하고 사이트의 속도를 손상시키지 않고 원활한 재생을 보장합니다.

17. 정기적으로 모바일 페이지 속도 및로드 시간을 테스트하십시오.

모바일 페이지 속도 및 성능을 테스트하면 최적화 노력이 결과를 제공 할 수 있습니다. 실행 가능한 통찰력을 제공하는 도구를 사용하여 모바일 장치에서 사이트를 원활하고 효율적으로 실행하도록합니다.

PagesPeed Insights는 사이트의 모바일 속도 및 성능을 분석하고 점수를 지정하며 대상 권장 사항을 제공합니다. 실제 사용자 데이터를 기반으로 한 로딩 속도, 상호 작용 및 시각적 안정성과 같은 핵심 웹 생명력을 평가하여 모든 약점을 해결하는 데 도움이됩니다.

Chrome Lighthouse는 성능, 접근성, SEO 및 모범 사례를 포함한 주요 영역에서 사이트의 모바일 유용성을 평가하는 또 다른 옵션입니다. 점수와 전반적인 모바일 경험을 향상시키기위한 구체적인 제안이 포함 된 자세한 보고서를 생성합니다.

이러한 도구로 WordPress 사이트를 정기적으로 테스트하여 문제를 식별하고 개선 사항을 구현하며 모바일 경험을 빠르고 사용자 친화적으로 유지하십시오.

자주 묻는 질문

다음은 모바일 장치의 WordPress 최적화에 대한 일반적인 질문에 대한 답변입니다. 사이트를 최대한 활용할 수 있도록 도와줍니다.

모바일 장치 용 WordPress 사이트를 최적화하려면 코딩 기술이 필요합니까?

아니요, 모바일 용 WordPress 사이트를 최적화하기 위해 코딩 기술이 필요하지 않습니다. 반응 형 테마를 사용하여 시작하고 필요에 따라 플러그인을 설치하여 모바일 기능을 향상시킵니다. 기본 코딩 지식은 고급 사용자 정의에 도움이 될 수 있지만 WordPress의 내장 도구 및 플러그인으로 대부분의 모바일 최적화 작업이 가능합니다.

내 WordPress 사이트가 진정으로 모바일 친화적인지 여부를 어떻게 테스트 할 수 있습니까?

Browserstack Speedlab과 같은 도구를 사용하여 사이트의 모바일 성능을 확인하여 WordPress 사이트가 모바일 친화적인지 확인하십시오. 터치 입력 및 네트워크 속도를 포함하여 실제 장치 및 브라우저를 시뮬레이션하므로 다양한 장치에서 사이트를 테스트 할 수 있습니다.

모바일 장치의 이미지를 최적화하기위한 가장 좋은 플러그인은 무엇입니까?

모바일 장치의 이미지를 최적화하기위한 최고의 플러그인에는 Jetpack Boost, Shortpixel Image Optimizer 및 Smush가 포함됩니다. JetPack Boost는 이미지뿐만 아니라 여러 웹 사이트 측면에서 즉각적인 속도 최적화를 제공하기 때문에 가장 인기있는 것 중 하나입니다.

게으른 하중이란 무엇이며 모바일 사이트 성능에 어떤 도움이됩니까?

게으른로드는 방문자가 필요할 때까지 웹 페이지의 필수 부품을로드하는 것을 지연시키는 것을 포함합니다 (예 : 방문자가 스크롤 할 때까지 페이지가 더 많이로드되지 않음). 이것이 활성화되면 웹 사이트는 유용한 상태로 더 빨리로드되어 방문자의 경험을 향상시킵니다.

Google의 Mobile-First Indexing은 WordPress 사이트에 어떤 영향을 미칩니 까?

모바일 우선 인덱싱은 Google이 주로 검색 결과에서 인덱싱 및 순위를 위해 WordPress 사이트의 모바일 버전을 사용한다는 것을 의미합니다. 이러한 변화는 모바일 최적화가 필수적입니다. 모바일 사이트가 반응이 좋거나 사용자 친화적이지 않은 경우 SEO 성능이 다운 그레이드되어 순위가 낮아집니다.

핵심 웹 생명체는 무엇이며 모바일 최적화와 관련이 있습니까?

Core Web Vitals는 Google이 정의한 메트릭 세트로, 성능, 상호 작용 및 시각적 안정성을로드하여 웹 페이지의 사용자 경험을 평가합니다. 기본 메트릭에는 최대 규모의 콘텐츠 페인트 (LCP), 다음 페인트와의 상호 작용 (INP) 및 누적 레이아웃 시프트 (CLS)가 포함됩니다. 모바일 장치에 대한 이러한 메트릭을 최적화하면 사용자 만족도 및 검색 엔진 순위에 직접 영향을 미칩니다.