Google PageSpeed ​​Insights 도구를 활용하는 방법은 무엇입니까?

소개

무엇이든 모든 것 위에 있다는 것은 항상 좋은 느낌입니다. Google Page Speed 는 웹사이트의 성능에 큰 영향을 미칩니다. Google Page Speed 는 일반적으로 웹사이트 로딩 속도입니다. 웹사이트에 부담을 주는 요소를 줄여야 합니다. 이렇게 하면 웹사이트 의 페이지 속도 를 높이고 순위를 높일 수 있습니다. 이것은 전체 SEO 순위에도 추가됩니다. 이 기사에서 Google Page Speed ​​Insights 의 본질을 추론 하고 Google Page Speed ​​Test 에서 최상위에 가장 적합한 알고리즘을 공식화 및 구현하는 방법을 살펴보겠습니다 !

1. 구글 페이지 스피드 인사이트

900,000개의 광고를 탐색한 후 Google Page Speed ​​Insights의 분석가는 일반 휴대용 프레젠테이션 페이지가 굴욕적인 22초 만에 스택된다는 것을 발견했습니다. 이는 대부분의 불안한 웹 클라이언트가 페이지를 포기하기 전에 참는 것보다 몇 배 이상 더 긴 시간입니다(정확한 경우 53%). 귀하의 페이지가 쌓이는 데 3초 이상 걸릴 가능성이 높으면 잠재 고객이 페이지를 보기도 전에 떠나는 경우가 더 많습니다. 그것이 충분히 끔찍하지 않은 것처럼 페이지 인사이트 는 페이지가 쌓이지 않는 모든 고통스러운 순간마다 더 많은 손님이 건너뛸 것이라는 사실을 발견했습니다.

과학자들은 SOASTA의 혁신에 대한 기계 학습의 도움으로 로드 시간, 페이지 가중치(데이터 측정) 및 변환 속도 간의 연결을 발견했습니다. 기본적으로 "무거운"은 느린 것을 의미합니다. 특히, 페이지의 구성 요소(콘텐츠, 사진 등)의 수가 400개에서 6,000개로 증가하면 게스트가 바뀔 확률이 95% 감소합니다.

그러나 페이지가 점진적으로 쌓이는 경우에는 문제를 정확히 찾아내는 것이 모든 경우에 간단하지 않습니다. 콘텐츠와 사진 수에 영향을 미치는 Google 페이지 속도 의 측정값은 처음에는 식별할 수 있지만 불필요한 JavaScript 및 너무 많은 사이드트랙과 같은 문제는 식별할 수 없습니다.

2. Google PageSpeed ​​Insights 추론

Google PageSpeed ​​Insights 는 사이트 페이지의 속도를 빠르고 쉽게 테스트할 수 있는 도구입니다. 운 좋게도 페이지 로딩 시간을 조절하는 요소를 정확하게 발견하는 데 사용할 수 있는 무료 도구입니다. URL을 입력하고 "분석"을 누르면 두 가지 매개변수에 따라 사이트 페이지를 약화시키는 핵심 보고서를 신속하게 얻을 수 있으며, 이를 해결하는 가장 좋은 방법에 대한 제안이 완료됩니다.

• 매개변수 1: 스크롤 없이 볼 수 있는 부분까지 걸리는 시간. 이것은 클라이언트가 요청한 후 프로그램이 스크롤 없이 볼 수 있는 바로 아래에 콘텐츠를 렌더링하는 데 걸리는 시간을 측정한 것입니다.
• 매개변수 2: 전체 페이지 로드 시간. 클라이언트가 요청한 후 브라우저가 페이지를 완전히 렌더링하는 데 걸리는 시간입니다.

그렇다면 PageSpeed ​​Insights는 귀하의 사이트를 어떻게 평가합니까? 페이지 실행의 시스템 자율적인 부분(서버 배열, 페이지의 HTML 구조, 그림, JavaScript 및 CSS와 같은 외부 자산의 활용)을 살펴봅니다.

PageSpeed ​​Insights를 사용 하여 사이트를 테스트하는 것은 사이트 개선을 시도하지 않은 모든 개인에게 눈을 뜨게 할 수 있으며 더 나아가 Page Insights 는 사이트 실행을 향상 시키려는 사람들에게 특별한 시작 단계를 제공합니다.

그렇긴 해도 사이트가 Google Page Speed ​​Test 에서 예상보다 낮은 점수를 반환 하거나 사이트에 설정한 추정치를 반대하는 권장 사항을 반환하는 경우에도 마찬가지로 무의미한 열광에 빠질 수 있습니다. 이 기기는 현재 두 가지 주요 측정을 기반으로 합니다.

1.First Contentful Paint
2.첫 입력 지연

위의 두 매개변수는 세 가지 다른 방식으로 점수가 매겨집니다.

1.빠르다
2.평균
3.천천히.

이 두 가지 측정값이 일반 언어로 의미하는 것은 다음과 같습니다.

2.1.First Contentful Paint(FCP)

FCP는 프로그램 내부에 렌더가 표시될 때를 추정하는 메트릭인 "첫 번째 페인트"에 대한 정교화입니다(예를 들어 기초 음영 조정에서도 확인할 수 있음). FCP 메트릭은 실제 물질이 페이지에 쌓일 때까지의 시간을 추정하여 보다 가치 있는 고객 만남 평가를 제공합니다.

2.2.첫 입력 지연(FIP)

FIP는 Google Page Speed ​​Test 의 중요한 매개변수로 사이트 로딩 시간을 의미합니다. 기본적으로 사용자가 사이트와 통신할 때부터 브라우저가 실제로 브라우저와 통신하기 시작할 때까지의 시간입니다.

3. PageSpeed가 중요한 이유

누군가가 귀하의 사이트에 도착하면 눈을 사로 잡고 건너 뛰지 않고 주변에 머물도록 설득 할 수 있는 몇 가지 시간이 있습니다. 양질의 물질과 매력적인 주제는 필수적입니다. 그러나 귀하의 페이지가 점차적으로 쌓이는 경우, 귀하의 내용을 볼 기회를 주기도 전에 개인을 잃을 수 있습니다.

Kissmetrics에 따르면 웹 클라이언트의 거의 50%가 웹사이트가 2초 이내에 스택될 것으로 예상하고 일반적으로 3초 이내에 스택되지 않는 대상을 포기합니다. 웹사이트 실행에 어려움을 겪는 온라인 고객의 합계 79%는 다시 구매하기 위해 웹페이지를 다시 방문하지 않으며 약 44%는 오프 기회에 동료에게 웹에서 쇼핑하는 데 어려움을 겪었다고 말했습니다. 웹사이트에 부정적인 영향을 미칩니다. 이것이 PageSpeed 가 매우 중요한 이유 입니다.

4. PageSpeed ​​Insights의 본질

페이지 속도 는 Google이 전체 순위를 결정하는 데 사용하는 200가지가 넘는 기호 중 하나이고 사냥 질문의 1% 미만이 사이트 속도 플래그의 영향을 받지만 강조해야 하는 것은 변환입니다.

좋은 페이지 속도와 좋은 사이트는 당신의 손님이 당신의 품목 또는 혜택을 믿고 돈을 넘겨 설득 제공 할 것입니다. 페이지 실행은 각 사이트의 기본적인 부분입니다. 매우 비범한 내용과 보기 좋은 사이트를 가질 수 있지만 쌓이는 데 너무 오래 걸리거나 다재다능하지 않은 경우 개인이 빠르게 라이벌 사이트로 이동할 것입니다.

그러면 우리 전체가 그렇게 한다는 근거에서 그것이 진짜임을 깨닫게 됩니다. Google PageSpeed ​​Insights 는 사이트 실행 방식을 분석 하고 사이트의 실행, 스택 시간 및 하늘의 한계를 증가시키는 데 대한 답변을 제공할 수 있습니다 .

5. Google PageSpeed ​​Insights를 사용하면 어떤 이점이 있습니까?

5.1. PageSpeed 는 발견에 대한 예외적으로 항목화된 보고서를 제공합니다.

귀하의 사이트가 어떻게 진행되고 있으며 어떤 변경 사항(기본적인 경우)을 적용해야 하는지 보여주는 보고서를 받으십시오. 사이트 속도를 높이는 데 매우 유용한 조사 및 발전 관리 기능을 모두 제공합니다.

5.2. PageSpeed 는 사용자 경험을 향상시킵니다

오늘날 많은 사람들이 휴대전화를 사용하여 사이트를 방문하며 페이지가 모바일 반응형이 아닌 경우 상당한 양의 트래픽을 잃을 수 있습니다. Google PageSpeed ​​Insights 는 현재 점수를 명확하게 보고하고 페이지가 모바일 단계를 고려하는지 여부를 알려줍니다. 작업 영역과 모바일 웹 실행을 모두 향상시키기 위해 실행 팁을 활용할 수 있습니다.

5.3. PageSpeed에는 추가 언어가 포함됩니다.

이 도구는 러시아어, 스페인어, 세르비아어 등 다양한 언어로 매우 쉽게 사용할 수 있습니다.

5.4. PageSpeed 는 사용하기 쉽습니다.

Google PageSpeed ​​Insights 는 귀하가 귀하의 사이트를 Google과 함께 또는 Google의 고객이 되기를 기대하지 않습니다. 등록 프레임을 완성하거나 기록을 작성하거나 이메일 주소를 제공하여 활용할 필요가 없습니다.

5.5. PageSpeed 는 무료입니다

Google PageSpeed ​​Insights 는 전 세계에서 무료로 사용할 수 있습니다. 이 놀라운 도구를 사용하기 위해 단 한 푼도 지불할 필요가 없습니다.

6. Google Pagespeed Insights에서 100% 만점을 받는 팁

다음은 Google PageSpeed ​​Insights 에서 100% 만점을 받기 위해 배포할 수 있는 몇 가지 팁입니다 .

6.1. DNS

우리는 Cloudflare를 활용하지만 그 어느 것도 간소화를 가속화하지 않습니다. 우리는 테스트에서 속도가 느리다는 것을 발견했습니다. 귀하가 상호 촉진 조건에 있는 경우 Cloudflare가 많은 도움을 줄 것입니다. 어쨌든 우리에게는 특히 전용 서버가 있으면 모든 것이 꺼져있는 것이 좋습니다. Cloudflare를 옵션으로 도입할 적성이나 시간이 없는 경우 WP-Engine, Presslabs, Pantheon.io와 같은 촉진 공급업체를 활용할 수 있습니다. 그들은 서버 저장소와 CDN 배치에서 함께 일했습니다.

6.2. MFI

Mobile-First Index - 현재 SEO 순위에서 가장 중요한 기준 중 하나입니다. 웹사이트를 구축할 때 스마트폰 및 기타 전자 기기에서 볼 수 있도록 최적화되어야 합니다. 이는 오늘날 브라우징이 주로 휴대전화에서 발생하기 때문입니다. 따라서 웹사이트가 Google Page Speed에 크게 기여하므로 그에 따라 웹사이트를 최적화하는 것이 중요합니다.

6.3. 서버 응답 시간 전달

벤치마크는 0.2초입니다. 그 이상이면 Google에서 귀하를 표시합니다. 우리 사이트는 많은 레코드가 있는 높은 사양의 커밋된 서버에서 계속 실행됩니다. 온라인에서 읽는 내용의 대부분은 가장 직접적인 방법인 더 빠른 WordPress 계정(파트너 가입 포함)으로 변경할 것을 권장하지만, 저는 어떤 시도도 하지 않고 우리 자신의 상태를 포기할 준비가 되어 있지 않았습니다.

많은 서버 관리자와 마주 치면서 Pagespeed 를 증가시키기 위해 서버에서 실행 중인 무의미한 관리를 해제했습니다 . 그럼에도 불구하고 큰 효과는 없었습니다.

서버 반응 시간을 줄이기 위해 우리가 본 가장 큰 차이점은 PHP 7로 변경한 것입니다. 모든 호스트가 PHP 7을 지원하는 것은 아니지만 다행스럽게도 우리 고유의 로케일이 있기 때문에 지원합니다. 온라인 혼합 보고서는 PHP 7로 변경 시 20~50%의 속도 증가를 보여줍니다.

실제 속도에도 불구하고 Pagespeed에 대한 요구 사항이 있었고 이를 테스트해야 했습니다. 실행 중인 PHP의 변형을 인식하지 못하는 경우 이 모듈을 소개하면 관리 대시보드의 "한눈에 보기"에서 확인할 수 있습니다.

더 진행하기 전에 사이트가 좋은지 확인해야 합니다. 다행히도 WordPress용으로 다운로드할 수 있는 PHP 유사성 검사기 모듈이 있습니다. 이 모듈은 코드를 살펴보고 PHP 7로 변경하는 것과 관련된 문제를 인식합니다. Page Insights 의 결과는 관리가 필요한 몇 가지 사항을 보여주었으며, 우리는 이를 신속하게 처리했습니다. .

우리는 마침내 PHP 7로 변경할 준비가 되었습니다. 변경하려면 WHM에서 "Multi PHP Manager"로 이동하여 필요한 웹 사이트를 선택하고 PHP 버전을 변경하십시오. WHM에 접근하지 않을 가능성이 있는 경우 서버 관리자에게 문의하되 테스트/진행 조건에서 수행하고 있는지 확인하십시오. 프로덕션 사이트를 중단하는 것은 모범 사례가 아닙니다.

6.4. 업데이트된 웹사이트 디자인 및 레이아웃

그리드 레이아웃은 웹 사이트 디자인 및 레이아웃 측면에서 도시의 이야기입니다. Google Page Speed ​​Insight 측면 에서 그리드 디자인은 더 많은 이점이 있습니다. 또한 내 사이트에서 필요한 것보다 더 많은 하이라이트를 제공한다는 것을 알았기 때문에 기본적이고 적당한 주제를 찾아갔습니다. 나는 특히 속도를 위해 계획된 주제인 Frank를 발견했습니다. 부모 주제의 기본 랜딩 페이지는 9개의 데이터베이스 조회를 하고 약 29kb의 무게를 지닌 2개의 HTTP 요청으로 구성됩니다. 이 주제는 지나치게 가볍습니다. JavaScript 구조와 불필요한 그림이 없고 기본적이고 반응이 빠른 주제만 있습니다. Frank의 주제를 소개한 후 내 사이트를 로드할 것으로 예상되는 HTTP 요청 수가 31개에서 4개로 감소했습니다.

6.5. 홈페이지 최적화

사이트를 추가로 가속화하는 몇 가지 간단한 방법이 있습니다.

• 랜딩 페이지에 블로그 항목을 배포하는 경우 선택 항목이나 개요만 배포하고 선물 수를 5개 이하로 줄이십시오.
• 가제트를 바닥에 보관하십시오. 완전히 필수적인 가제트를 활용하십시오.
• 유휴 또는 무의미한 모듈을 제거합니다.

일반적으로, 흠집이 없고 중앙에 사이트를 구성하면 페이지가 멋지게 보일 뿐만 아니라 PageSpeed가 더 빨라집니다.

6.6. 이미지 최적화

고해상도 사진은 업그레이드된 사진보다 쌓이는 데 훨씬 오랜 시간이 걸리며 지나치게 많이 갈면 페이지 속도 가 확실히 떨어질 수 있습니다 . WPMU DEV는 WP-Smush.it이라는 멋진(무료!) 모듈을 제공합니다. 이 모듈로 사진을 대량으로 스매시하면 시각적 품질을 희생하지 않고도 사진의 크기가 엄청나게 감소한다는 것을 알게 될 것입니다. 우리는 사진의 주제에있는 동안, 무관심 스태킹 사진은 마찬가지로 페이지 속도 향상시킬 수 있습니다.

JPEG 2000, JPEG XR 및 WebP는 보다 확고한 JPEG 및 PNG 파트너와 비교하여 더 나은 압력 및 품질 속성을 가진 사진 형식입니다. JPEG 또는 PNG와 대조적으로 이러한 배열로 사진을 인코딩하면 더 빨리 로드되고 모바일 데이터를 덜 차지하므로 Google Page Speed ​​성능 이 향상 됩니다 . WebP는 Chrome 및 Opera에서 강화되었으며 웹상의 사진에 대해 더 나은 손실 및 무손실 압축을 제공합니다.

6.7. 사용하지 않는 CSS 연기

미사용 CSS는 프로그램의 렌더 트리 개발을 중단합니다. 렌더 트리는 DOM 트리와 비슷하지만 실제로는 모든 허브의 스타일을 추가로 통합합니다. 렌더 트리를 구축하려면 프로그램이 전체 DOM 트리를 살펴보고 모든 허브에 적용되는 CSS 규칙을 확인해야 합니다. 사용하지 않는 CSS가 많을수록 프로그램에서 Google Page Insight Speed에 부정적인 영향을 미치는 모든 노드의 스타일을 파악하는 데 추가 시간이 필요할 수 있습니다 .

6.8. 텍스트 압축 활성화 및 이미지 인코딩

Google Page Speed 를 최적화하려면 텍스트 파일도 압축해야 합니다 . 텍스트 압축은 더 빠른 네트워크 전송을 가능하게 하므로 더 쉽게 할 수 있습니다. 이미지 인코딩은 이미지 저장 및 전송을 압축할 수 있는 데이터 압축 유형입니다.

6.9. CSS, HTML, JavaScript 축소

"축소화"는 Google Page Speed 결과를 향상시키는 프로그램에서 페이지를 처리하는 방식에 영향을 주지 않고 무의미하거나 반복적인 정보를 추방하는 것을 의미 합니다. 잘못된 코딩이 이 문제의 원인이 될 수 있으며 여러 가지 방법으로 해결되는 경향이 있습니다.

페이지의 소스 코드를 물리적으로 연구하는 것 외에 Google은 다음과 같은 자산을 시도할 것을 제안합니다.

• HTML을 축소하는 HTML 축소기.
• CSS를 축소하기 위한 CSSNano 및 csso.
• JavaScript를 축소하기 위한 UglifyJS2 및 클로저 컴파일러.

또 다른 선택은 분명히 프로모션 시스템 을 위해 Google의 AMP 및 AMP 를 활용하는 것 입니다. 두 프로젝트를 통해 엔지니어는 HTML, CSS 및 JavaScript의 제거된 형태로 페이지를 제조할 수 있습니다. 결과는 짧은 순간에 쌓이는 페이지와 프로모션입니다.

6.10. 방문 페이지 리디렉션 방지

페이지가 반응형으로 구조화되지 않은 경우 결과는 PageSpeed 를 증가시키는 다양한 가젯에 대한 고급 페이지로의 다양한 사이드트랙이 될 수 있습니다 . Google에서 표시한 몇 가지 기본 전환 설계:

• com은 반응형 웹 사이트 아키텍처를 활용하므로 전환이 필요하지 않습니다. 빠르고 이상적입니다!
• 컴 ? m.example.com/home – 다재다능한 고객을 위한 다중 왕복 처벌.
• 컴 ? www.example.com ? m.example.com – 중간 정도의 다양한 경험.

클라이언트가 전환되어야 할 때마다 페이지 렌더링이 중지되어 페이지의 힙 시간에 귀중한 시간(초)이 추가됩니다. 잠재 고객이 어떤 기기를 사용하고 있는지에 관계없이 고객이 고품질로 만날 수 있도록 보장하는 기술인 반응형 계획으로 페이지를 구축하여 안팎으로 부적합한 상황을 피하십시오. 이렇게 하면 최종 Google Page Speed ​​Test 결과가 더 좋아질 것입니다.

6.11. 렌더링 차단 JavaScript 제거

다른 것들 외에도 JavaScript는 놀라운 외부 장치와 직관적인 페이지 구성 요소를 강화합니다. 문제는 HTML 코드의 구문 분석을 추가로 중지한다는 것입니다.

"렌더링 차단 JavaScript 제거"를 자세히 살펴보는 오류 메시지가 표시되면 Google Page Speed ​​Test 결과에 부정적인 영향을 미치는 페이지의 위 주름 부분에 대한 스태킹 절차를 지연시키는 약간의 JavaScript 코드가 있음을 의미 합니다. 특히 외부인 콘텐츠는 이 문제에 대해 잘못이 있을 것입니다. 세 가지 다른 방법으로 처리하십시오.

• 스태킹 절차에 중요하지 않은 스크립트는 의도적으로 연기되어야 합니다. 페이지가 완전히 렌더링된 후에 가져와 실행됩니다.
• 비동기적으로 힙하는 스크립트는 동기적으로 힙하는 스크립트보다 더 많이 활용되어야 합니다. 동기식 콘텐츠는 페이지 렌더링 프로세스를 중지하는 반면 비동시적 콘텐츠는 프로그램이 그 동안 다른 구성요소를 쌓을 수 있도록 합니다.
• 프로그램에 필요한 요청 수를 줄이기 위해 콘텐츠를 인라인하는 것을 고려하십시오. JavaScript 자산 외부에 약간의 내용을 HTML 보고서에 직접 포함하는 것입니다.

위의 단계를 구현하려고 하면 전체 Google Page Speed ​​테스트 결과가 향상됩니다.

6.12. 브라우저 캐싱 활용

페이지가 클라이언트를 위해 완전히 쌓이기 전에 서버와 프로그램 간에 다른 요구 사항이 필요할 수 있습니다. 시간에 관한 한 모든 사람이 포함됩니다. 저장은 프로그램을 가능하게 합니다. 헤더, 경로, 로고 등 최근에 쌓인 특정 구성 요소를 "회상"합니다. 프로그램이 저장할 수 있는 구성 요소가 많을수록 클라이언트가 요구하는 순간에 더 적은 수의 구성 요소를 스택해야 하며 마지막으로 페이지가 더 빨리 스택되어 PageSpeed 가 증가합니다 . Google은 기본 예약 전략을 여러 주간으로 규정하며 일반적으로 변경되지 않는 구성 요소의 경우 1년이 이상적입니다.

7. 결론

웹은 꽉 차게 되어가고 있으며 사이트가 제대로 운영되지 않거나 제대로 작동하지 않는 경우 유명하고 효과적이기를 바라는 월계관을 놓을 수 없습니다. Google PageSpeed ​​Insights ' 제안은 작업 영역 및 다용도 웹 실행에 대한 플로우 업계 모범 사례에 따라 다르므로 점진적으로 기다리지 말고 더 많은 구경꾼 그룹을 확보하고 웹사이트 실행 및 웹 인덱스 위치를 확장하고 배경을 통해 게스트를 강화하십시오. 이제 Google PageSpeed ​​Insights 에 대한 전체 소문에 대해 잘 알고 있습니다.

위에서 언급한 팁을 사용하면 좋은 결과와 긍정적인 변화를 볼 수 있습니다. 또한 로마는 하루아침에 이루어지지 않았으므로 Google PageSpeed ​​Insight Test 점수 를 개선하기 위해 취한 조치가 효과가 있는지 여부를 최종적으로 판단할 수 있으려면 시간이 필요합니다 .