국제 마케팅

다국어 웹사이트의 핵심 웹 바이탈을 개선하는 방법

작성자

닉 셰퍼호프

검토자

Eugène Ernoult

업데이트 날짜

2024년 4월 8일

2025년 5월 27일

핵심 웹 바이탈은 웹사이트의 사용자 경험 품질을 측정하는 지표 모음입니다. Google은 이를 순위 신호로 간주하므로 (다국어) SEO에도 중요합니다. 이를 소홀히 하면 방문자와 검색 엔진 모두로부터 외면당할 위험이 있습니다.

이러한 시나리오를 방지하기 위해 이 글에서는 다국어 웹사이트에서 이러한 메트릭을 개선하는 데 필요한 모든 것을 알려드립니다. 핵심 웹 바이탈이 무엇인지, 사이트의 현재 성능을 테스트하는 방법, 웹사이트의 각 메트릭을 개선하는 방법에 대한 단계별 지침을 설명합니다.

핵심 웹 바이탈이란 무엇인가요?

앞서 언급했듯이 핵심 웹 바이탈은 웹사이트의 사용자 경험을 측정합니다. 모두 로딩 속도 및 웹사이트 상호 작용과 어떤 식으로든 관련이 있습니다. 이 지표는 2020년에 Google에서 도입했으며 검색 알고리즘의 일부가 되었습니다. 하나씩 살펴보겠습니다.

가장 큰 콘텐츠가 풍부한 페인트(LCP)

첫 번째는 가장 큰 콘텐츠가 많은 페인트(LCP)입니다. 이 지표는 페이지가 로드되어 볼 수 있고 사용할 수 있게 될 때까지 걸리는 시간을 측정합니다. 웹 페이지에서 가장 큰 콘텐츠 요소(주로 이미지 또는 텍스트 블록)를 감지하고 방문자에게 표시되는 시점을 측정하여 이를 결정합니다.

페이지스피드 인사이트에서 가장 큰 콘텐츠가 많은 페인트 요소를 찾을 수 있는 위치

이 간격은 초 단위로 측정되며 LCP 점수로 사용됩니다. Google은 사이트가 촬영해야 하는 타이밍을 정의하기 위해 여러 가지 컷오프 지점을 정의했습니다.

위에서 볼 수 있듯이 LCP 요소가 로드되는 데 최대 2.5초가 걸리는 것이 좋은 점수입니다. 최대 4초까지는 허용되지만 개선되어야 하며, 그 이상이면 Google에서는 너무 긴 것으로 간주합니다.

누적 레이아웃 시프트(CLS)

다음 지표는 웹사이트 레이아웃이 로드되는 동안의 안정성, 즉 페이지에 새 요소가 표시될 때 얼마나 많은 움직임이 나타나는지를 추적합니다. 이를 누적 레이아웃 이동 또는 CLS라고 합니다.

이것이 왜 중요한가요?

높은 수준의 CLS는 사용자와 사이트의 상호 작용을 방해할 수 있습니다. 단순히 보기 좋지 않을 뿐만 아니라 텍스트 이동으로 인해 페이지에서 위치를 잃거나 잘못된 순간에 이동하여 실수로 잘못된 요소를 클릭하게 만들 수도 있습니다.

CLS는 로딩 중에 레이아웃이 얼마나 움직이는지, 그리고 그 움직임이 얼마나 큰지를 살펴서 계산합니다. 이 두 가지 비율을 서로 곱하여 점수를 구합니다.

CLS 점수가 0.1 미만이면 양호, 0.25까지는 개선이 필요하며 그 이상은 허용되지 않습니다.

한 가지 참고 사항: 사용자가 페이지와 상호 작용(예: 클릭)한 후 500ms 이내에 페이지를 이동하는 것은 CLS 점수에 영향을 미치지 않습니다. 이는 의도적인 것으로 간주됩니다.

다음 페인트와의 상호 작용(INP)

다음 페인트 또는 INP에 대한 상호 작용은 최신 핵심 웹 바이탈 지표에 추가되었습니다. 이 지표는 2024년 3월에 기존 측정 항목 중 하나였던 첫 번째 입력 지연(FID)을 대체할 예정입니다.

두 가지 모두 방문자가 페이지 요소와 상호 작용하는 시점과 반응하는 속도 사이의 시간을 추적합니다. 물론 반응이 빠르면 빠를수록 좋습니다.

첫 번째 입력 지연은 방문자의 첫 번째 상호 작용만 살펴보는 반면, 다음 페인트에 대한 상호 작용은 방문 중 모든 페이지 참여를 추적하여 최악의 점수를 표시합니다. 이렇게 하면 페이지의 반응성을 보다 정확하게 파악할 수 있습니다.

좋은 INP 점수는 어느 정도인가요?

최대 200밀리초, 최대 500밀리초가 적당하며, 그 이상이면 Google이 사이트를 보는 데 부정적인 영향을 미칩니다.

웹사이트의 핵심 웹 바이탈을 테스트하는 방법

핵심 웹 바이탈이 정확히 무엇인지 알았다면 다음 논리적 질문은 사이트의 현재 상태를 어떻게 알 수 있을까요? 이를 알아내는 가장 쉬운 방법은 PageSpeed Insights와 같은 속도 테스트 도구를 사용하는 것입니다.

상단에 웹사이트 URL을 입력하고 테스트를 실행하기만 하면 됩니다. 완료되면 웹사이트가 핵심 웹 바이탈 평가를 통과했는지 여부를 알려줄 뿐만 아니라 언급된 각 데이터 포인트에 대한 값도 제공합니다.

가능한 경우 실제 결과와 실험실 결과가 혼합되어 표시됩니다. 여기에는 Google이 Chrome 브라우저에서 웹사이트 사용자 데이터를 수집한 CrUX의 정보가 포함됩니다. 이러한 정보가 없는 경우 임시로 계산하는 Lighthouse의 측정값만 얻을 수 있습니다.

코어 웹 바이탈 성능을 알려줄 수 있는 다른 도구로는 GTmetrix, 웹페이지테스트 또는 Chrome 웹 바이탈 확장 프로그램이 있습니다.

다국어 웹사이트의 핵심 웹 바이탈 개선하기

그렇다면 여러분의 가치가 그다지 높지 않다면 어떻게 해야 할까요? 지금부터 이에 대해 이야기해 보겠습니다.

지금부터 다국어 사이트에서 각 핵심 웹 바이탈 지표를 개선하는 방법에 대해 단계별로 설명하겠습니다. 수동으로 수행하는 방법과 함께 워드프레스 사용자가 WP Rocket 플러그인을 사용하여 쉽게 수행할 수 있는 방법을 다룰 것입니다.

WP Rocket을 사용하면 기술 지식이 없는 사람도 정교한 성능 개선을 빠르고 쉽게 구현할 수 있습니다. 가장 강력하고 초보자 친화적인 캐싱 플러그인 중 하나입니다.

일반적인 성능 개선

웹사이트가 빠르게 로드되도록 하는 방법에 대한 일반적인 팁부터 시작하겠습니다:

좋은 호스팅 업체 선택 - 웹사이트가 배치되는 호스팅 제공업체의 품질은 로딩 속도에 많은 영향을 미칩니다. 결정을 내리기 전에 속도 비교와 사용자 리뷰를 읽고 평판이 좋은 업체를 선택해야 합니다.
사이트 업데이트 유지 - 웹사이트가 워드프레스와 같은 콘텐츠 관리 시스템을 기반으로 하는 경우 모든 것을 최신 상태로 유지해야 합니다. 즉, 소프트웨어 자체는 물론 플러그인, 테마, 서버의 PHP 버전, 기타 사이트에 속한 모든 것을 최신 상태로 유지해야 합니다. 그래야만 새로운 속도 개선의 혜택을 누릴 수 있습니다.
플러그인 사용 횟수 줄이기 - 동시에 사이트에 추가하는 플러그인이 지나치게 많지 않도록 하세요. 모든 플러그인과 확장 프로그램에는 추가 코드가 포함되어 있어 사이트 속도가 느려질 수 있습니다. 따라서 사이트에 있는 플러그인을 최소한으로 유지하세요.
고품질 구성 요소로 이동 - 웹 사이트에 자리를 잡는 확장 프로그램의 경우 다음과 같이 고품질이며 성능에 최적화되어 있는지 확인하십시오. Weglot.

위의 팁은 보다 구체적인 조치를 취하기 전에 일반적으로 빠른 성능을 위한 좋은 토대가 될 것입니다.

가장 큰 콘텐츠가 많은 페인트 수정

가장 큰 콘텐츠가 많은 페인트를 개선하는 방법에는 일반적으로 페이지 로딩 속도를 최적화하는 방법(위에서 다룬 대로)과 LCP 요소의 전달 속도를 높이는 방법 두 가지가 있습니다.

LCP 요소는 무엇인가요? 페이지스피드 인사이트는 진단 아래에서 이를 알려줍니다.

캐싱 및 압축 구현

캐싱과 압축은 사이트 성능을 개선하기 위한 두 가지 기본 기술입니다. 첫 번째는 렌더링된 페이지 데이터를 저장하여 방문자가 더 빠르게 액세스할 수 있도록 하는 것입니다. 특히 워드프레스를 사용하여 웹사이트를 운영할 때 효과적입니다.

왜 그럴까요?

워드프레스와 같은 CMS에서 페이지는 일반적으로 PHP 코드와 데이터베이스에서 가져온 콘텐츠로 동적으로 만들어집니다. 서버는 이를 HTML 문서로 변환하여 브라우저로 전송합니다.

캐싱은 웹 페이지의 미리 렌더링된 HTML 버전을 서버에 저장하여 방문자에게 직접 전송함으로써 이 프로세스의 속도를 높입니다. 이렇게 하면 방문당 여러 번의 왕복이 필요 없어지고 사용자 환경이 훨씬 빠르고 개선될 수 있습니다.

반면 압축은 zip 파일을 만드는 것과 동일하지만 가정용 컴퓨터가 아닌 서버에서 이루어진다는 점만 다릅니다. 압축은 웹사이트를 구성하는 파일을 축소하여 더 빠르게 다운로드하고 표시할 수 있도록 합니다.

서버에서 캐싱과 압축을 모두 활성화하려면 .htaccess라는 파일을 편집해야 합니다. 이 파일에는 웹 서버의 기능에 대한 중요한 지시문이 포함되어 있으며 일반적으로 웹사이트의 루트 디렉토리에 있습니다.

다음 코드를 복사하여 붙여넣으면 앞서 언급한 속도 최적화 기술을 모두 활성화할 수 있습니다:


<IfModule mod_deflate.c>
   # Compress HTML, CSS, JavaScript, Text, XML and fonts
   AddOutputFilterByType DEFLATE application/javascript
   AddOutputFilterByType DEFLATE application/rss+xml
   AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
   AddOutputFilterByType DEFLATE application/x-font
   AddOutputFilterByType DEFLATE application/x-font-opentype
   AddOutputFilterByType DEFLATE application/x-font-otf
   AddOutputFilterByType DEFLATE application/x-font-truetype
   AddOutputFilterByType DEFLATE application/x-font-ttf
   AddOutputFilterByType DEFLATE application/x-javascript
   AddOutputFilterByType DEFLATE application/xhtml+xml
   AddOutputFilterByType DEFLATE application/xml
   AddOutputFilterByType DEFLATE font/opentype
   AddOutputFilterByType DEFLATE font/otf
   AddOutputFilterByType DEFLATE font/ttf
   AddOutputFilterByType DEFLATE image/svg+xml
   AddOutputFilterByType DEFLATE image/x-icon
   AddOutputFilterByType DEFLATE text/css
   AddOutputFilterByType DEFLATE text/html
   AddOutputFilterByType DEFLATE text/javascript
   AddOutputFilterByType DEFLATE text/plain
   AddOutputFilterByType DEFLATE text/xml

   # Remove browser bugs (only needed for really old browsers)
   BrowserMatch ^Mozilla/4 gzip-only-text/html
   BrowserMatch ^Mozilla/4\.0[678] no-gzip
   BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
   Header append Vary User-Agent
</IfModule>

<IfModule mod_expires.c>
   ExpiresActive On

   # Images
   ExpiresByType image/jpeg "access plus 1 year"
   ExpiresByType image/gif "access plus 1 year"
   ExpiresByType image/png "access plus 1 year"
   ExpiresByType image/webp "access plus 1 year"
   ExpiresByType image/svg+xml "access plus 1 year"
   ExpiresByType image/x-icon "access plus 1 year"

   # Video
   ExpiresByType video/webm "access plus 1 year"
   ExpiresByType video/mp4 "access plus 1 year"
   ExpiresByType video/mpeg "access plus 1 year"

   # Fonts
   ExpiresByType font/ttf "access plus 1 year"
   ExpiresByType font/otf "access plus 1 year"
   ExpiresByType font/woff "access plus 1 year"
   ExpiresByType font/woff2 "access plus 1 year"
   ExpiresByType application/font-woff "access plus 1 year"
   ExpiresByType application/font-woff2 "access plus 1 year"

   # CSS, JavaScript
   ExpiresByType text/css "access plus 1 year"
   ExpiresByType text/javascript "access plus 1 year"
   ExpiresByType application/javascript "access plus 1 year"

   # Others
   ExpiresByType application/pdf "access plus 1 year"
   ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>

두 코드 스니펫은 모두 GTmetrix에서 제공한 것으로 Apache 서버에서 작동합니다. NGINX와 같은 다른 서버에 대한 지침은 온라인에서 찾을 수 있습니다(예: KeyCDN의 이 튜토리얼).

이 과정이 어렵게 느껴진다면 앞서 언급한 WP Rocket 플러그인을 사용하여 동일한 결과를 얻을 수 있습니다. 여기에서는 플러그인을 설치하고 활성화하기만 하면 모바일 디바이스를 포함하여 압축과 캐싱을 자동으로 구현합니다.

코드 및 코드 전달 최적화

웹사이트 코드의 전달과 처리를 간소화하기 위해 할 수 있는 모든 것이 다국어 웹사이트에서 가장 큰 콘텐츠가 풍부한 페인트를 개선하는 데 도움이 됩니다. 이를 위한 몇 가지 좋은 옵션을 살펴보겠습니다:

불필요한 마크업 제거 - 사이트에 중복되는 JavaScript 및 CSS 코드가 많은 경우 꼭 필요하지 않은 모든 코드를 제거하여 성능을 개선할 수 있습니다.
축소 - 웹사이트 파일에서 공백과 주석을 제거하는 것을 의미합니다. 이렇게 하면 파일 크기가 줄어들어 다운로드 및 처리 속도가 빨라집니다.
CSS 및 JavaScript 최적화 - 여기서는 웹사이트 파일이 나머지 웹사이트의 로딩을 방해하지 않도록 설정합니다. 속도 테스트 도구에서 악명 높은 "렌더링 차단 리소스 제거" 메시지가 표시될 수 있습니다. 이를 위해 널리 사용되는 두 가지 도구는 지연 및 비동기화 속성입니다. 각각 자바스크립트 실행을 로딩 대기열의 끝으로 옮기고 브라우저에 백그라운드에서 파일을 다운로드한 후 사용 가능할 때만 실행하도록 지시합니다.

수작업으로 축소하려면 Minifier 또는 Grunt와 같은 도구를 사용할 수 있습니다. CSS와 JavaScript를 최적화하려면 일반적으로 페이지 로딩을 방해하는 요소에 대한 많은 분석이 필요합니다. 속도 테스트 도구는 문제가 있는 스크립트를 알려줍니다.

그 후에는 수동으로 지연 및 비동기 태그를 추가하는 것은 사용자의 몫입니다. 다음과 같이 보입니다:


<script async src="important.js"></script>
<script defer src="not-so-important.js"></script>

일부 코드를 분할하여 처음에는 꼭 필요한 부분만 로드할 수도 있습니다. 이에 대한 자세한 내용은 아래에서 INP 최적화에 대해 설명합니다.

이러한 프로세스를 자동화하려면 몇 가지 확인란을 선택하기만 하면 코드를 최소화하고, 사용하지 않는 CSS를 제거하고, JavaScript를 지연시키고, 비동기식으로 로드할 수 있는 WP Rocket을 사용할 수 있습니다.

이미지 최적화

이미지 최적화는 품질 저하 없이 웹사이트의 비주얼 크기를 줄이는 것을 의미합니다. 이는 전반적인 성능을 크게 향상시키며 특히 이미지가 LCP 요소인 경우가 많으므로 가장 큰 콘텐츠가 많은 페인트를 개선하는 데 도움이 됩니다.

사이트의 이미지를 어떻게 최적화할 수 있나요?

이미지 번역 - 웹사이트 번역은 텍스트에만 국한되지 않습니다. 이미지의 텍스트를 변환하거나 문화적으로 더 적합한 이미지를 사용해야 할 수도 있습니다. 다행히도 Weglot 이 부분에 대한 지원을 제공합니다.
압축 - 텍스트 파일과 마찬가지로 이미지에서 불필요한 데이터를 제거하여 크기를 줄일 수 있습니다.
최신 형식 사용 - WebP 또는 AVIF와 같은 차세대 형식의 이미지는 JPG나 PNG보다 훨씬 작으면서도 보기에는 똑같이 좋습니다.
시각적 이미지 크기 조정 - 웹사이트에 표시되는 것과 같은 크기로 이미지를 표시합니다. 그렇지 않으면 방문자가 불필요한 데이터를 로드하게 됩니다.
지연 로딩 켜기 - 이 기술은 초기 로드 중에 브라우저에 실제로 표시되는 이미지만 로드하고 방문자가 스크롤할 때 페이지 아래쪽에 있는 이미지를 가져옵니다. 또한 비CP 이미지에 대역폭이 낭비되는 것을 방지하여 중요한 이미지를 더 빠르게 로드할 수 있습니다.

사용 가능한 도구

TinyPNG와 같은 도구를 사용하여 이미지를 압축하고 다른 파일 형식으로 변환할 수 있습니다. 이미지 리사이저와 같은 도구로 원하는 크기로 이미지를 잘라낼 수도 있습니다. 워드프레스 설정 > 미디어에서 해당 옵션도 찾을 수 있습니다.

또한 최신 버전의 워드프레스(또는 버전 5.4 이하)를 실행하는 경우 사이트에 기본적으로 지연 로딩이 활성화되어 있어야 합니다.

자동 솔루션을 원한다면 Imagify가 있습니다. WP 로켓과 함께 잘 작동하는 간편한 이미지 최적화 플러그인입니다. 이미지를 자동으로 처리하여 품질과 성능의 균형을 유지하면서 이미지를 더 가볍게 만들 수 있습니다. 이 플러그인은 시각적 이미지를 WebP 및 Avif로 변환하고, 큰 이미지의 크기를 조정하며, 최적화된 버전을 워드프레스 웹사이트에 자동으로 표시합니다.

또한 WP 로켓은 이미지뿐만 아니라 CSS 배경과 동영상과 같은 임베디드 미디어에 대해서도 지연 로딩을 제공합니다. 또한 적절한 경우 미디어를 지연 로딩에서 제외할 수도 있습니다.

CDN 사용

CDN(콘텐츠 전송 네트워크)은 웹사이트 파일이 포함된 전 세계 여러 지역에 위치한 여러 대의 상호 연결된 컴퓨터로 구성됩니다. 그 목적은 방문자와 가장 가까운 위치에서 방문자에게 파일을 최대한 빠르게 전송하는 것입니다. 이는 전 세계 고객을 대상으로 하는 다국어 웹사이트에 특히 중요합니다.

이러한 이유로 Weglot 번역된 콘텐츠를 전 세계에 빠르게 전달할 수 있도록 CDN을 자동으로 설정합니다. Weglot 사용자가 아닌 경우 일반적으로 CDN에 가입하고 사이트에 맞게 구성해야 합니다. 이는 제공업체마다 다르며 다음은 예시 지침입니다.

도움이 필요하다면 인기 있는 솔루션인 Sucuri와 Cloudflare 전용 애드온이 있는 WP Rocket을 이용하세요. 이 애드온을 사용하면 사이트에 이러한 콘텐츠 전송 네트워크를 더 빠르고 쉽게 구성할 수 있습니다.

공급업체의 CNAME을 제공하여 CDN 설정에서 다른 네트워크를 사용하도록 설정할 수도 있습니다.

마지막으로 WP Rocket에는 플러그인 내부에서 자동으로 구성할 수 있는 RocketCDN이라는 자체 네트워크도 있습니다. 또한 코드 파일을 축소하는 WP Rocket의 기능으로 CDN 트래픽과 비용을 줄일 수 있습니다.

누적 레이아웃 시프트 해결

다국어 웹사이트를 개선하기 위한 핵심 웹 바이탈 목록의 다음 항목은 CLS입니다. 이 부문에서 성공할 수 있는 방법은 다음과 같습니다.

이미지 크기 속성 포함

CLS 점수가 낮은 가장 큰 요인 중 하나는 정의된 높이 및 너비 속성이 없는 이미지인 경우가 많습니다.

최종 페이지에 이미지를 표시할 크기를 지정하지 않으면 브라우저에서 적절한 공간을 확보할 수 없습니다. 결과적으로 실제 크기가 플레이스홀더와 다르면 이미지가 갑자기 튀어나와 그 아래의 모든 것을 아래로 밀어내게 됩니다. 이는 특히 페이지를 처음 로드할 때 표시되지 않는 지연 로드된 미디어에서 발생할 수 있습니다.

따라서 CLS 최적화의 첫 번째 규칙은 이미지에 높이와 너비 정의를 추가하는 것입니다. 어떻게 할까요?

순수한 HTML에서는 다음과 같이 표시됩니다:


<img src="image.jpg" alt="Insert alt text" width="600" height="700">

워드프레스 블록 편집기를 사용하는 경우 자동으로 치수가 설정되지만 콘텐츠를 만들면서 특정 크기를 정의할 수도 있습니다.

또한 WP Rocket에는 누락된 너비 및 높이 선언을 미디어 파일에 추가할 수 있는 옵션이 있습니다.

임베드, 아이프레임 및 광고 슬롯을 위한 공간 예약하기

임베드된 요소나 광고와 같은 동적 콘텐츠에도 위와 동일한 규칙이 적용됩니다. 이러한 콘텐츠도 페이지 레이아웃의 나머지 부분에서 이동하지 않도록 높이와 너비를 정의해야 합니다.

문제는 이러한 요소가 타사 소스에서 제공되는 경우가 많기 때문에 이러한 요소의 크기를 항상 제어할 수 없다는 것입니다. 이 경우 최소한 공간을 예약하기 위해 추정치를 작성하는 것이 좋습니다. 최종 요소가 더 커지더라도 변화의 폭이 크지 않아 CLS 점수가 낮아질 수 있습니다.

워드프레스에서는 편집기에서 임베드된 콘텐츠의 너비와 높이도 자동으로 추가합니다. 또한 앞서 언급했듯이 WP 로켓에는 임베드된 미디어를 지연 로드하는 옵션이 제공됩니다. 이렇게 하면 미디어가 로드될 때 필요한 공간이 자동으로 예약됩니다.

웹 글꼴 제공 최적화

글꼴도 특히 웹사이트에서 사용자 정의 글꼴을 사용하는 경우 레이아웃 변화를 일으킬 수 있습니다. 가장 일반적인 두 가지 문제는 다음과 같습니다:

스타일이 지정되지 않은 텍스트의 플래시(FOUT) - 방문자가 웹사이트 텍스트를 표준 글꼴로 처음 보게 되면 글꼴 파일이 로드되는 순간 변경되어 레이아웃이 움직일 수 있습니다.
보이지 않는 텍스트 플래시(FOIT) - 처음에는 텍스트가 전혀 보이지 않습니다. 웹 글꼴 파일과 함께만 표시됩니다.

다음 전략을 통해 이러한 문제를 방지할 수 있습니다:

최신 글꼴 형식 사용 - 글꼴도 이미지와 마찬가지로 크고 작은 파일 형식이 있습니다. 로드 속도가 가장 빠른 것은 일반적으로 WOFF 또는 WOFF2입니다.
유사한 대체 글꼴 정의 - 실제 서체와 매우 유사한 대체 글꼴을 설정하면 전환 시 페이지 이동을 줄일 수 있습니다. 글꼴 스타일 일치기를 사용하여 좋은 조합을 찾을 수 있습니다.
글꼴 미리 로드 - 웹 글꼴 파일을 문서 앞부분에 배치하고 호출에 rel=preload를 추가하여 우선순위를 지정합니다. 이렇게 하면 브라우저에서 글꼴을 더 빨리 로드할 수 있습니다.

WP Rocket을 사용하는 경우 플러그인에는 글꼴 파일을 미리 로드하는 옵션이 제공됩니다. 글꼴이 있는 경로를 입력하기만 하면 됩니다.

참고로 다국어 웹사이트의 글꼴 최적화의 일부는 다른 알파벳과 호환되는 글꼴을 사용하는 것입니다. 사이트에서 RTL 언어 (오른쪽에서 왼쪽으로 쓰임)를 제공하는 경우 특히 그렇습니다.

동적 콘텐츠 처리

동적 콘텐츠란 페이지 로딩이 완료된 후에 표시되는 요소를 의미합니다. 지연 로드된 이미지, 배너, 양식 등이 그 예입니다.

CLS 점수에 미치는 영향을 낮게 유지하려면 위와 동일한 조언을 따르세요:

컨테이너를 미리 정의하고 고정된 치수를 지정하세요.
외관을 사용자 상호작용과 연결하세요. 이렇게 하면 CLS 페널티를 피할 수 있습니다.

참고로 Weglot 동적 콘텐츠를 완벽하게 번역할 수 있습니다. 따라서 청중이 이해하지 못하는 것에 대해 걱정할 필요가 없습니다.

다음 페인트로의 인터랙션 작업

마지막으로, INP가 제대로 작동하는지 확인하는 방법에 대해 이야기해 보겠습니다.

자바스크립트 최적화

JavaScript는 일반적으로 다음 페인트와의 상호 작용, 특히 소위 '긴 작업'과 관련된 문제를 일으키는 주요 요인 중 하나입니다. 이는 완료하는 데 50밀리초 이상 걸리는 자바스크립트 작업으로, 페이지에서 사용자 상호 작용을 처리하는 브라우저의 기능을 차단할 수 있습니다. 또한 일반적으로 사이트에 스크립트가 많으면 페이지의 응답성이 저하될 수 있습니다.

이미 LCP 섹션에서 JavaScript를 최적화하는 방법에 대해 설명한 바 있습니다. INP의 경우 사이트에서 긴 작업을 처리하는 것이 특히 중요합니다. 이러한 작업이 있는 경우 Chrome 개발자 도구에서 찾을 수 있습니다. 작은 빨간색 삼각형으로 표시되어 있습니다.

브라우저의 메인 스레드를 영구적으로 차단하지 않고 연속적으로 로드할 수 있는 작은 청크로 분할할 수 있는지 살펴보세요. 이에 대한 자세한 내용은 이 web.dev 튜토리얼에서 확인할 수 있습니다. 최소화, 지연, 비동기화, 불필요한 코드 제거도 브라우저의 사용자 상호 작용에 대한 반응성을 유지하는 데 도움이 됩니다.

WP Rocket을 사용하는 경우 플러그인을 사용하면 로딩을 지연시킬 JavaScript 파일과 지연시키지 않을 파일을 세부적으로 구성할 수 있습니다.

사용하지 않는 CSS 줄이기

자바스크립트에 적용되는 모든 것은 CSS에도 유효합니다. 스타일시트를 다운로드하고 처리하면 브라우저가 계속 바쁘고 사용자 입력에 대한 반응이 지연될 수 있습니다.

여기에서 속도 테스트 도구를 사용하여 사용하지 않는 CSS를 찾을 수도 있습니다. 또한 스타일 시트를 분할하여 중요한 CSS를 먼저 로드하거나 인라인으로 로드할 수 있습니다.

앞서 언급했듯이 WP 로켓에는 사용하지 않는 CSS를 자동으로 제거하는 옵션이 있습니다.

지연 로딩 추가

이미지 최적화를 위한 지연 로딩에 대해서는 이미 이야기했습니다. 또한 사용자 입력에 반응할 수 있는 브라우저 리소스를 확보할 수 있으므로 INP에 긍정적인 영향을 미칠 수 있습니다. 위의 지침에 따라 구현하세요.

그런데 지연 로드된 이미지를 번역하는 데 문제가 있는 경우 Weglot 기본적으로 데이터-src 또는 srcset 속성에 추가된 이미지 URL을 번역합니다. 지연 로딩이 사용자 정의 속성을 사용하는 경우 Weglot 즉시 번역하지 않으므로 특별히 WordPress 통합을 위한 PHP 필터를 추가해야 합니다.

Weglot 자바스크립트 통합을 사용 중이거나 여전히 이미지를 번역할 수 없는 경우 지원팀에 문의하여 자세한 정보를 확인하세요.