새로운! iThemes Sync Pro와 Google Lighthouse 통합

iThemes Sync Pro는 이제 Google Lighthouse API를 활용하여 Sync 대시보드에 있는 모든 웹사이트 의 성능, SEO 및 접근성 을 감사 할 수 있는 기능을 제공합니다.

감사하려는 URL을 입력하기만 하면 Sync Pro가 Google Lighthouse를 사용하여 페이지에서 일련의 검사를 실행합니다.

검사가 완료되면 Sync Pro 대시보드에 페이지가 얼마나 잘 작동했는지 알려주는 요약을 받게 됩니다. 감사 요약은 페이지가 성공한 부분과 주의가 필요한 부분을 보여줍니다.

정말 멋진 부분은 각 감사에 감사 요약 에서 발견된 문제를 해결하기 위해 취할 수 있는 필수적이고 실행 가능한 단계인 확인의 여러 요소에 대한 설명이 포함되어 있다는 것입니다.

구글 라이트하우스란?

Google의 Lighthouse는 웹 페이지의 품질을 개선하기 위한 자동화된 오픈 소스 도구입니다. 모든 웹 페이지, 공개 또는 인증이 필요한 웹 페이지에 대해 실행할 수 있습니다. 성능, 접근성, 프로그레시브 웹 앱, SEO 등에 대한 감사가 있습니다.

Google Lighthouse 대 Pagespeed

Google에서 제공하는 두 가지 감사 도구인 Google PageSpeed와 Lighthouse의 차이점은 무엇입니까?

• PageSpeed ​​Insights는 성능 지표만 측정 하지만 Lighthouse는 웹사이트의 다른 측면(SEO, 접근성, 프로그레시브 웹 앱 등)도 감사합니다.
• Google PageSpeed는 실험실 및 실제 데이터의 "조합"을 사용하는 반면 Lighthouse는 실험실 데이터만 (일관된 조건에서) 감사 요약을 작성하는 데 사용합니다.

Lighthouse는 이제 PageSpeed ​​Insights에 통합되었습니다. PageSpeed의 통합 분석 엔진입니다.

웹 페이지의 품질을 감사해야 하는 8가지 이유

사이트 감사가 실제로 작동하는지 살펴보기 전에 웹 페이지의 품질을 감사해야 하는 이유에 대해 잠시 논의해 보겠습니다.

1. 검색 엔진 검색 가능성 향상 - Google은 순위에서 데스크톱 및 모바일 페이지의 페이지 속도를 사용합니다. 사이트 감사의 성능 팁을 사용하여 순위를 향상시키십시오.
2. 이탈률 낮추기 – 모바일 페이지가 로드되는 데 3초 이상 걸리면 방문자의 절반 이상이 웹사이트를 떠나게 됩니다.
3. 잠재고객 확대 – 장애가 있는 사람들이 웹사이트에 액세스할 수 있도록 하면 웹사이트를 사용할 수 있는 사람들의 수가 늘어납니다.
4. 마진 향상 – 웹 개발 모범 사례를 따르면 더 나은 고객 경험을 제공할 수 있습니다. 실제로 구매자의 86%는 더 나은 고객 경험을 위해 더 많은 비용을 지불할 의향이 있습니다.
5. 검색 엔진과의 향상된 커뮤니케이션 – 사이트 감사의 팁을 사용하여 검색 엔진이 콘텐츠를 이해할 수 있는지 확인하십시오.
6. 알려진 보안 취약점이 있는 JavaScript 라이브러리 – 사이트 감사는 알려진 보안 취약점 이 있는 프런트 엔드 JavaScript 라이브러리가 포함된 페이지를 확인하고 플래그를 지정합니다. 개발자는 플러그인 및 테마에서 JS 라이브러리와 같은 타사 코드를 사용하는 것이 일반적입니다. 불행히도 라이브러리가 제대로 유지 관리되지 않으면 공격자가 웹 사이트를 해킹하는 데 활용할 수 있는 취약점을 만들 수 있습니다. 알려진 취약점이 있는 구성 요소 사용은 OWASP Top 10 목록에 있습니다.
7. 교차 출처 목적지에 대한 안전하지 않은 링크 – 이 감사는 페이지 교차 출처 목적지의 링크가 안전한지 확인합니다. target="_blank" 속성을 사용하여 다른 사이트의 페이지에 링크하면 사이트가 성능 및 보안 문제에 노출될 수 있습니다.
8. HTTPS에 있지 않은 페이지 – 사이트 감사는 초기 페이지 요청이 HTTPS를 통해 제공되는지 확인할 뿐만 아니라 페이지 리소스가 모두 HTTPS를 통해 로드되는지 확인합니다. SSL로 암호화되지 않은 리소스를 사용하는 경우 침입자가 방문자와 웹사이트 간의 통신을 가로챌 수 있습니다.

현장 감사 실행 보기

사이트 감사를 시작하려면 iThemes Sync Pro 대시보드에 로그인하고 목록에서 사이트를 클릭하십시오.

그런 다음 새 사이트 감사 탭을 클릭하여 Lighthouse 설정을 봅니다.

여기에서 사이트 감사에 대한 몇 가지 다른 옵션을 찾을 수 있습니다.

1. 기본 URL – 이 선택 항목을 사용하여 웹 사이트의 홈 페이지에서 감사를 실행합니다.
2. 페이지 URL – 감사할 웹 페이지의 URL을 입력하려면 이 옵션을 선택합니다.
3. 기존 감사 요약 로드 – 이 드롭다운에서 이전에 완료된 감사의 요약을 볼 수도 있습니다.
4. 생성 – 새 웹 페이지 감사를 실행하려면 이 버튼을 클릭합니다.

생성 버튼 을 클릭하면 동기화 대시보드에서 바로 첫 번째 사이트 감사 요약을 만들고 볼 수 있습니다.

사이트 감사 카테고리

페이지 상단에서 성능 , 접근성 , 모범 사례 및 SEO 의 4가지 감사 범주의 점수를 볼 수 있습니다. Sync Pro 사이트 감사의 각 섹션을 자세히 살펴보겠습니다.

1. 성능

감사의 성능 섹션에서는 사용자가 웹 페이지의 콘텐츠를 보고 상호 작용할 수 있도록 페이지가 최적화되어 있는지 확인합니다. 아래에서 추가 정보와 함께 상단에 전체 점수가 표시됩니다.

메트릭 토글을 클릭하여 웹사이트를 스캔하는 데 사용되는 각 메트릭에 대한 설명을 봅니다.

이 보기는 실적이 어떻게 평가되었는지에 대한 몇 가지 세부 정보를 분류합니다.

• 첫 번째 콘텐츠가 포함된 페인트 – 첫 번째 텍스트 또는 이미지가 로드되는 시간입니다.
• 대화형 시간 – 페이지가 완전히 대화형이 되는 데 걸리는 시간입니다.
• 속도 지수 – 속도 지수는 페이지의 콘텐츠가 얼마나 빨리 시각적으로 채워지는지를 보여줍니다.
• 총 차단 시간 – FCP와 대화형 시간 사이의 모든 기간의 합계입니다.
• 가장 큰 콘텐츠가 포함된 페인트 – 가장 큰 콘텐츠가 포함된 페인트는 가장 큰 텍스트 또는 이미지가 로드되는 시간을 표시합니다.
• 누적 레이아웃 이동 – 누적 레이아웃 이동은 뷰포트 내에서 보이는 요소의 움직임을 측정합니다.

성과 점수가 어떻게 집계되는지 더 잘 보려면 계산기 보기 링크 를 클릭 하십시오 .

추천 섹션에서는 페이지 로드 속도를 높이는 데 도움이 되는 제안 사항을 제공합니다.

진단 섹션에서 페이지 성능에 대한 몇 가지 정보를 찾을 수 있습니다. 요약은 웹 페이지가 통과한 성능 검사 목록도 제공합니다.

2. 접근성

접근성 감사는 장애가 있는 사이트 방문자가 웹페이지를 사용할 수 있는지 확인합니다.

감사가 모든 접근성 관련 고려 사항을 테스트할 수는 없음을 명심하십시오. 하지만 걱정하지 마세요. Lighthouse는 당신을 매달리게 하지 않을 것입니다. 감사 요약은 확인할 수 있는 추가 항목 목록과 테스트 지침을 제공합니다.

또한 이 섹션의 하단에서 귀하의 페이지가 성공적으로 통과한 모든 접근성 검사 목록을 찾을 수 있습니다.

3. 모범 사례

감사에서는 웹 페이지가 웹 개발 모범 사례를 따르고 있는지 확인하기 위해 자동화된 검사도 실행합니다.

모범 사례 감사는 페이지가 HTTPS를 사용하고 있으며 사용자가 비밀번호 필드에 붙여넣을 수 있도록 허용하는지 여부를 포함하여 페이지가 기본 모범 사례를 따르고 있는지 확인합니다.

4. 검색엔진 최적화

마지막으로 SEO 감사는 귀하의 페이지가 검색 엔진 결과 순위에 최적화되어 있는지 확인합니다.

이 SEO 감사는 콘텐츠 모범 사례를 따르고 있는지 확인하고 페이지가 통과한 SEO 감사 항목 목록을 제공합니다.

페이지가 감사에 실패한 경우 수행할 작업

웹 페이지가 사이트 감사의 일부에 실패하더라도 걱정하지 마십시오. 요약은 검토에서 발견한 문제를 해결하기 위해 취해야 하는 단계를 제공합니다.

제 감사 요약을 살펴보겠습니다. 내 웹 페이지가 SEO 메타 설명 감사에 실패했음을 알 수 있습니다. 더 많은 정보를 얻으려면 토글 화살표 를 클릭하세요.

토글 화살표를 클릭하면 메타 설명이 무엇인지, 왜 중요한지에 대한 설명과 자세히 알아볼 수 있는 링크가 표시됩니다.

링크를 클릭하면 Lighthouse 문서 로 연결됩니다. 이 문서는 페이지가 메타 설명 감사에 실패한 이유를 설명하고 실패를 해결하기 위한 지침을 제공합니다.

지침에 따라 요약에서 발견된 문제를 수정한 후 감사를 다시 실행하여 새 점수를 확인할 수 있습니다.

마무리

새로운 iThemes Sync Pro 사이트 감사는 웹사이트의 성능 , 접근성 , SEO 및 웹 개발 모범 사례 를 감사하는 새로운 자동화 도구입니다. 감사 요약은 페이지 로드 속도를 높이고 모든 방문자에게 훌륭한 경험을 제공하며 잠재고객을 늘리기 위해 취할 수 있는 구체적인 조치를 제공합니다.

마이클 무어

Michael은 매주 WordPress 취약점 보고서를 작성하여 사이트를 안전하게 보호합니다. iThemes의 제품 관리자로서 그는 iThemes 제품 라인업을 지속적으로 개선하는 데 도움을 줍니다. 그는 거대한 괴짜이며 기술, 오래된 및 새로운 모든 것에 대해 배우는 것을 좋아합니다. 마이클이 아내와 딸과 어울리고, 일하지 않을 때는 책을 읽거나 음악을 듣는 것을 볼 수 있습니다.