PageSpeed Insights: 사이트 속도를 높게 유지하는 방법

웹사이트를 운영한다면 Google PageSpeed Insights에 대해 들어보셨을 것입니다. 모바일 및 데스크톱 장치 모두에서 웹 페이지의 성능을 측정하는 Google의 무료 도구입니다. 그러나 높은 점수를 얻는 것은 종종 이길 수없는 게임처럼 느껴질 수 있습니다.

오늘은 PageSpeed Insights에 대한 자세한 검토를 하고, 점수를 떨어뜨릴 수 있는 모든 문제를 살펴보고, 웹사이트를 최적화하는 방법을 정확히 설명하겠습니다.

사이트 속도가 왜 그렇게 중요한가요?

기술적인 문제를 살펴보기 전에, 왜 당신이 관심을 가져야 하는지에 대해 이야기해 보겠습니다. 사이트 속도는 단순한 허영 측정 기준이 아닙니다. 이는 귀하의 비즈니스에 직접적인 영향을 미칩니다.

첫째, 속도는 SEO의 주요 순위 요소입니다. Google은 Core Web Vitals를 사용하여 페이지 순위를 결정한다고 공식적으로 밝혔습니다. 사이트를 로드하는 데 너무 오랜 시간이 걸리면 Google이 검색 결과를 아래로 밀어냅니다.

둘째, 속도는 사용자 경험과 전환율에 영향을 미칩니다. 대부분의 사용자는 페이지가 나타나는 데 3초 이상이 걸리면 페이지를 포기합니다. 빠른 사이트는 방문자의 참여를 유지하고 제품을 구매하거나 기사를 읽을 가능성을 훨씬 높입니다.

PageSpeed Insights 지표 이해

PageSpeed Insights에 URL을 입력하면 실험실 데이터와 현장 데이터라는 두 가지 유형의 데이터가 제공됩니다.

현장 데이터는 실제 사용자가 사이트를 어떻게 경험하는지 보여줍니다. Chrome 사용자 경험 보고서 (CrUX) 를 사용하여 28 일에 걸쳐 수집됩니다. SEO에 정말 중요한 것은 바로 이것입니다. 실험실 데이터는 통제된 환경에서 수집되어 문제 디버깅에 도움을 줍니다.

주목해야 할 주요 지표는 다음과 같습니다:

• 첫 번째 만족스러운 페인트(FCP): 브라우저가 첫 번째 텍스트나 이미지를 렌더링하는 데 걸리는 시간입니다.
• 가장 큰 내용성 페인트(LCP): 가장 큰 콘텐츠 블록이 표시되는 데 걸리는 시간입니다.
• 누적 레이아웃 이동(CLS): 페이지 레이아웃이 로드될 때 얼마나 이동하는지 측정합니다.
• 다음 페인트와의 상호 작용(INP): 사용자가 무언가를 클릭하거나 탭한 후 페이지가 얼마나 빨리 응답하는지.

점수를 망치는 일반적인 문제

나쁜 점수를 얻는 것은 쉽습니다. 그것을 고치려면 근본 원인을 찾아야합니다. PageSpeed Insights 진단 보고서에서 볼 수 있는 가장 일반적인 문제는 다음과 같습니다.

1. 렌더링 차단 리소스

이는 자바스크립트나 CSS 파일이 페이지 로딩을 완전히 차단할 때 발생합니다. 브라우저는 사용자에게 아무것도 표시하기 전에 파일을 중지하고 다운로드하고 구문 분석해야 합니다.고치는 방법: 중요하지 않은 모든 자바스크립트를 연기하거나 비동기적으로 로드해야 합니다. CSS의 경우 중요한 CSS를 추출하여 대상에 인라인으로 배치합니다그런 다음 나머지를 비동기적으로 로드합니다.

2. 최적화되지 않은 거대한 이미지

이미지는 일반적으로 웹페이지 총 가중치에서 가장 큰 부분을 차지합니다. 작은 로고에 5MB 이미지를 업로드하는 것은 모든 속도를 늦추는 확실한 방법입니다.고치는 방법: 항상 WebP와 같은 최신 형식을 사용하여 이미지를 압축하세요. 또한 다음을 사용해야 합니다loading="lazy"속성이므로 접힌 부분 아래의 이미지는 사용자가 아래로 스크롤할 때만 로드됩니다. 레이아웃 이동을 방지하려면 항상 이미지 태그에 명시적인 너비와 높이를 설정하세요.

3. 사용하지 않는 자바스크립트가 너무 많습니다

최신 웹사이트는 종종 무거운 라이브러리나 타사 스크립트를 로드하지만 코드의 극히 일부만 사용합니다. 브라우저는 여전히 모든 것을 다운로드하고 평가해야하므로 귀중한 처리 시간이 소요됩니다.고치는 방법: 사용하지 않는 플러그인을 제거하고 코드를 분할해 보세요. 해당 특정 페이지에 실제로 필요한 스크립트만 로드합니다.

4. 느린 서버 응답 시간

첫 번째 바이트까지의 시간 (TTFB) 은 호스팅 서버가 초기 HTML 을 반환하는 데 걸리는 시간을 측정합니다. 서버가 느리면 다른 모든 최적화는 크게 중요하지 않습니다.고치는 방법: 빠른 웹 호스트를 사용하세요. 서버 측 캐싱을 구현하고 CDN (콘텐츠 전달 네트워크) 을 사용하여 사용자에게 물리적으로 더 가까운 서버에서 사이트를 제공합니다.

이 도구는 당신이 정확히 어디에서 실수를했는지 말하고 심지어 정확한 스크린 샷을 보여주기 때문에 훌륭합니다. 따라서 이러한 오류를 단계별로 수정하면 SEO가 향상됩니다.

예를 들어, 당사 웹사이트에서는.jpg를.webp 이미지로 변환하는 것이 좋습니다.

하지만100%에 도달하지 못하더라도 화를 내지 마십시오, 사실 정말 하기 어렵습니다. 귀하의 웹 사이트가 복잡하고 많은 이미지, 일부 특정 js 라이브러리가 필요한 경우 – 더 이상 최적화할 것이 없다고 생각할 수 있습니다. 왜 내 점수는 여전히 80-90%입니까? 이것은 절대적으로 정상입니다. 귀하의 웹사이트가 “그린존”에 있다면, 그것은 이미 좋은 징조입니다. 또한 다른 시간에 속도를 테스트하면 결과가 몇 퍼센트 포인트 – 아무런 변경 없이 – 달라질 수도 있습니다.
그러나 목록의 모든 오류를 살펴보고 수정하여 성능을 극대화하려고 노력해야 합니다.

우리의 번역 스크립트가 속도를 높게 유지하는 이유

웹사이트에 새로운 위젯을 추가할 때는 성능에 매우 주의해야 합니다. 번역 플러그인이 PageSpeed 점수를 파괴하는 것은 매우 일반적입니다. 그들은 종종 클라이언트 측에서 대규모 언어 데이터베이스를 로드하고, 무거운 자바스크립트 지연을 실행하고, 표시할 언어를 파악하는 동안 렌더링을 차단합니다.

우리는 성능을 염두에 두고 번역 스크립트를 엄격하게 구축했습니다. 당사의 솔루션이 가볍고 성능 속도에 미치는 영향이 최소화된 이유는 다음과 같습니다

• 작은 탑재량 제한: 우리의 핵심 스크립트는 엄청나게 작습니다. 우리는 대규모 타사 라이브러리를 번들로 제공하지 않습니다. 페이지 크기에 몇 킬로바이트만 추가됩니다.
• 비동기 로딩: 스크립트는 비동기적으로 실행되도록 설계되었습니다. 주요 콘텐츠의 렌더링을 차단하지 않습니다.
• 글로벌 CDN 배송: 우리는 글로벌 네트워크에서 스크립트와 번역된 텍스트를 전달합니다. 이는 데이터가 방문자에게 가능한 가장 짧은 거리를 이동한다는 것을 의미합니다.
• 네이티브 DOM 주입: 페이지를 숨기거나 레이아웃 이동을 생성하는 대신 스크립트는 기본적으로 번역된 문자열을 원활하게 주입합니다. 밀리초 단위로 실행되므로 누적 레이아웃 이동이 완벽하게 0으로 유지됩니다.

기술적 발자국을 가능한 한 작게 유지함으로써 우리는 귀하가 힘들게 얻은 SEO 순위나 사용자 경험을 희생하지 않고 웹사이트를 완전히 번역할 수 있도록 보장합니다.