등대에 대한 초보자 가이드

웹 사이트 성능을 향상시키고 사용자 경험을 최적화하십시오! 이 기사는 Lighthouse 도구를 사용하여 웹 페이지 성능, 접근성, SEO 및 기타 측면을 분석하고 개선하여 웹 사이트 순위 및 사용자 참여를 개선하는 방법을 자세히 살펴 봅니다.

Lighthouse는 Google을위한 강력한 오픈 소스 도구로 웹 페이지 품질을 자동으로 분석하고 개선 제안을 제공합니다. Lighthouse 점수를 최적화하면 검색 엔진에서 더 많은 사용자를 유치하고 높은 순위를 얻을 수 있습니다. 이 기사는 다음과 같이 초점을 맞 춥니 다 질문. 또한 또 다른 강력한 웹 사이트 성능 평가 도구 인 WebPagetest를 소개합니다.

키 포인트 :

성능 개선은 높은 SEO 순위와 더 나은 사용자 참여와 직접 관련이 있으며 빠른 로딩 시간이 중요합니다. 크롬 개발자 도구와 함께 Lighthouse를 사용하는 것은 매우 간단하며 모바일 또는 데스크탑 설정에서 성능, 접근성, SEO 및 모범 사례를 검토 할 수 있습니다.

등대의 주요 성능 메트릭에는 사용자 참여 및 만족도를 유지하는 데 중요한 최초의 콘텐츠 페인트 (FCP), 첫 대화 형 시간 (TTI) 및 최대 콘텐츠 페인트 (LCP)가 포함됩니다. Lighthouse의 접근성 기능은 장애가있는 사람들이 웹 사이트를 사용할 수 있도록하여 포함을 증가시킬 수 있도록 도와줍니다.

일반 등대 감사는 웹 페이지 문제를 식별하고 수정하고 전반적인 사용자 경험을 향상시키고 웹 개발 모범 사례에 따라 도움이 될 수 있습니다.

• 웹 사이트 성능의 중요성
• 최고의 글로벌 웹 사이트의 일반적인 기능 중 하나는 우수한 사용자 경험입니다. 그중에서도 성능이 중요합니다. 사용자는 빠르게로드하는 웹 사이트를 선호합니다. 로딩 시간이 너무 길면 사용자는 더 편리한 대안을 떠나고 전환 할 가능성이 높습니다.
웹 사이트 성능 향상은 SEO 순위가 향상 될 수 있으며 (이 기사에 대한 자세한 내용) 클릭 스루 및 전환율을 향상시킬 수 있습니다. 따라서 더 많은 영업, 등록 된 사용자 또는 트래픽을 받으려면 먼저 웹 사이트가 표준을 수행해야합니다.
Lighthouse를 선택하는 이유
Lighthouse는 Google의 오픈 소스 도구입니다. 잘 알려진 신뢰할 수있는 회사 인 Google의 결과는 다른 도구보다 더 안정적입니다. 또한 Google 검색 엔진이 지난 10 년 동안 길을 이끌고 있었기 때문에 Google 검색 엔진에서 높은 순위를 차지하면 더 많은 트래픽이 발생할 수 있습니다. 결과적으로 Google의 성능 감사 도구에서 더 높은 점수를 받으면 웹 사이트의 검색 결과 순위가 향상 될 수 있습니다.
• Google의 승인 외에도 등대의 우수성은 항상 사용자의 관심사에 중점을 둔 상세한 결과입니다. Lighthouse는 페이지로드 시간, 페이지 (및 궁극적으로 웹 사이트) 보안, 페이지 접근성 관행 및 구현 등을 포함하여 많은 결과를 제공합니다.
  등대를 사용하는 방법

  이 섹션에서는 먼저 Lighthouse를 사용하여 웹 스코어를 분석하고 확인하는 가장 쉬운 방법을 소개합니다. 즉, Chrome 브라우저를 통해 직접 작동합니다. 그런 다음보다 자세한 결과 나 옵션을 제공 할 수있는 다른 등대 도구를 탐색합니다. 크롬 사용 Chrome과 Lighthouse를 사용하는 것이 웹 사이트 성능을 측정하는 가장 쉬운 방법입니다. 먼저 측정하려는 웹 페이지를 엽니 다. 데모를 위해 다양한 샘플 결과를 볼 수 있도록 웹 사이트 및 GitHub에서 실행되는 감사 결과를 사용합니다. 다음, shift

  > 컨트롤

  j 또는

  f12

  를 클릭하여 개발자 도구를 엽니 다. 옵션

  command j 또는 fn f12 > f12 . 볼 수 있듯이 포함 할 카테고리를 검토하도록 선택할 수 있습니다. 이러한 범주에는 성능, 프로그레시브 웹 응용 프로그램, 모범 사례, 접근성 및 SEO가 포함됩니다. 감사가 모바일 또는 데스크탑 장치에서 실행되는지 여부를 선택할 수도 있습니다. 이 섹션에서는 데스크탑에서 실행할 성능, 모범 사례, 접근성 및 SEO와 같은 네 가지 감사를 수행합니다. 그러나 최상의 결과를 얻으려면 모바일 장치 및 인터넷 속도로 다양한 조건에서 페이지를 테스트하십시오. 따라서 측정하려는 페이지에서 위에서 언급 한 네 가지 범주와 데스크탑을 선택하고 "보고서 생성"을 클릭하십시오. 여기에는 몇 분이 걸릴 수 있으며 프로세스에서 브라우저의 창이 더 커지고 작아 질 수 있습니다. 보고서에는 웹 페이지의 다양한 화면 크기와 조건이 포함되어 있기 때문입니다. 완료되면 Lighthouse 탭에는 성능, 모범 사례, 접근성 및 SEO를 포함한 각 점수를 포함하여 검토 결과가 포함됩니다.

  인터넷 연결에 따라 결과가 다를 수 있습니다. 또한 등대가 일부 확장이 결과에 영향을 줄 수 있다는 알림을 표시 할 수 있습니다. 그렇다면 보이지 않는 창에서 테스트를 실행하는 것이 가장 좋습니다.
  등대가 실행되면 모든 카테고리를 클릭하여보다 자세한 보고서를 볼 수 있습니다. (다음 내용은 원본 텍스트에서 성능 부분을 단순화하고 다시 작성하는 것이며 다른 부분도 비슷하게 처리되었으며 공간 관계도 관련이 있습니다. 성능 부분의 재 작성 만 여기에 표시됩니다. )

  성능 성능은 웹 사이트로드 속도를 높이는 방법에 중점을 둡니다. 우리는 6 가지 중요한 성능 지표, 각각 포함 된 내용 및 각 메트릭에서 더 나은 점수를 얻는 방법을 다룰 것입니다.

  첫 번째 콘텐츠 도면 (fcp) 첫 번째 컨텐츠 도면 (FCP)은 사용자가 웹 페이지로 탐색하는 순간부터 측정을 시작합니다. 첫 번째 DOM 컨텐츠를로드하는 데 걸리는 시간을 측정합니다. DOM 컨텐츠에는 이미지, 백인이 아닌 캔버스 요소 및 SVG 요소가 포함될 수 있습니다.

  FCP는 몇 초 만에 측정됩니다. 페이지에 "녹색"점수를 갖기 위해서는 FCP가 빠르다는 것을 의미합니다. 첫 번째 DOM 컨텐츠는 최대 1.8 초까지로드해야합니다. 이 시간이 초과되면 중간 정도 또는 느리게 될 수 있습니다.

  FCP는 사용자를 이해하는 데 도움이되기 때문에 FCP가 중요합니다. 앞에서 언급했듯이 사용자는 인내심이 없으며 너무 오랫동안로드되면 웹 사이트를 떠날 것입니다. 빠른 FCP는 사용자의 참여를 유지할 수 있습니다. 웹 페이지가로드 될 예정이므로 사용자에게 대기하도록 지시하는 간단한로드 화면이 될 수 있습니다.

  웹 사이트의 FCP 시간에 영향을 미치는 한 가지 요소는 글꼴입니다. 글꼴은 오랫동안로드 될 수 있으며 때로는 텍스트가로드되기 전에 보이지 않습니다. 이 문제를 해결하는 좋은 방법은 CSS 속성 글꼴을 사용하는 것입니다. 예를 들면 :

  Google Fonts를 사용하는 경우이 속성은 이제 기본적으로 활성화됩니다. 이 속성을 사용하면 웹 사이트의 글꼴이로드 될 때까지 사용자의 시스템 기본 글꼴을 사용하여 텍스트를 표시 할 수 있습니다.

  FCP에 영향을 미치는 또 다른 요인은 차단 리소스를 렌더링하는 것입니다. 이들은 일반적으로

  동기로로드 된 JavaScript 또는 CSS 파일이며로드 시간이 길다. 이 리소스는 페이지의 나머지 페이지가 페이지를 완전히로드하기 전에로드되기를 기다리며 DOM 컨텐츠의 FCP에 영향을 미칩니다. 다음은 몇 가지 솔루션입니다.

  • 는 입니다
    사용중인 JavaScript 및 CSS 파일을 압축하여 크기를 줄여 이러한 리소스를로드하는 데 너무 오래 걸리지 않도록합니다. 사용중인 프레임 워크 또는 프로그래밍 언어에 따라 다르지만 거의 모든 프레임 워크 또는 프로그래밍 언어가이를 수행 할 수 있습니다. Web.dev 웹 사이트에서 다양한 인기있는 프레임 워크를 사용하여 JavaScript 압축에 대한 간단한 팁을 확인할 수 있습니다.
    • 웹 페이지에서 사용되지 않은 CSS를 삭제하십시오. CSS 크기가 증가함에 따라 페이지에서 사용되지 않은 규칙 및 속성을 제거하여 CSS 파일의 크기를 줄이면로드 속도를 높일 수 있습니다. 다시 말하지만, 사용중인 프레임 워크에 따라이 작업을 수행하는 방법이 다릅니다. 그러나 Chrome의 개발자 도구를 사용하여 "적용 범위"탭에서 사용하지 않은 CSS를 볼 수 있습니다. Tailwind CSS와 같은 프레임 워크를 사용하여 (트리 쉐이킹 메커니즘을 사용하여 CSS 스타일을 줄이기 위해, 절대 사용할 수없는 많은 스타일로 웹 사이트를 팽창시키지 않고) 웹 사이트로드 속도를 높일 수 있습니다.
    서버의 응답 시간을 줄입니다. 이는 비동기 요청을 사용하여 페이지로드에 필요한 논리를 수행하거나 서버에서 자주 사용하는 숫자를 캐시하거나 서버 코드를 최적화하여 원하는 결과를 더 빨리 얻음으로써 달성 할 수 있습니다.
    성능 감사를 수행 할 때 페이지에 글꼴, 콘텐츠 차단 리소스, 미사용 CSS 또는 위에서 언급 한 기타 문제가있는 경우 Lighthouse는 문제를 일으키는 각 파일을 강조하고 개선을위한 제안을 제공합니다. 예를 들어, 글꼴이 텍스트의 가시성을 차단하면 Lighthouse는 문제를 일으키는 글꼴 파일과 문제를 해결하는 방법이 페이지의 FCP 시간을 가속화하는 방법을 표시합니다.
    • 다음은 CSS 파일을 "렌더링 차단 자원"으로 표시하는 GitHub 감사 보고서의 예입니다.

    나머지 메트릭을 읽을 때이 메트릭의 결과에 어느 정도 의존한다는 것을 알고 있습니다. 따라서 좋은 FCP 점수를 얻는 것이 매우 중요합니다.

    (원본 텍스트 및 기타 부분의 나머지 성능 지표는 여기에서 생략됩니다)

    요약

    웹 사이트 성능 향상은 개발 프로세스에서 중요한 단계입니다. 무시하거나 과소 평가하지 마십시오. 검색 엔진에서 빠르고 액세스 할 수 있고 잘 실적이 좋은 웹 사이트를 제공하면 웹 사이트 트래픽을 늘리고 등록 된 사용자 또는 판매를 늘릴 수 있습니다. Lighthouse는 웹 사이트를 개선하고 더 많은 사용자를 유치 할 수 있도록 포괄적 인 통찰력과 분석을 제공하는 훌륭한 오픈 소스 도구입니다.

    (원본 텍스트의 FAQ 부품은 여기에서 생략됩니다)

위 내용은 등대에 대한 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!