웹사이트 성능 및 상태 모니터링: 팁 및 모범 사례

게시 됨: 2022-11-01

웹 사이트 또는 전자 상거래 프로젝트를 설정하고 실행하는 것은 훌륭하지만 일단 사이트가 실행되고 나면 작업이 완료되지 않습니다.

적절한 상태 및 성능 모니터링이 없으면 웹 사이트는 단순히 로드 속도를 느리게 하는 것보다 훨씬 더 큰 결과를 겪을 수 있습니다.

전 세계의 모든 웹 사이트가 제대로 작동하는 가상의 이상적인 시나리오에 대해 살펴보겠습니다. 치솟는 사용자 만족도 외에도 더 나은 환경에도 기여한다는 사실을 알고 계셨습니까?

성능이 좋지 않은 웹사이트는 웹사이트를 만들거나 사용하는 모든 사람에게 영향을 미칠 뿐만 아니라 더 큰 탄소 발자국을 남깁니다.

웹사이트 탄소 계산기에 따르면 웹사이트에는 탄소 발자국이 있으며 평균 웹사이트 페이지는 조회당 0.5g의 이산화탄소를 방출합니다. 그것은 바로 중앙값입니다.

오염이 심한 웹사이트도 고려한 평균을 보면 그 수치는 0.9그램까지 올라갑니다.

전 세계적인 규모의 문제를 제외하고, 건강에 좋지 않고 성능이 좋지 않은 웹 사이트는 시간, 비용 및 수익을 낭비하게 됩니다. 웹사이트 상태는 우리와 비슷합니다. 무시하기 쉽고 개선하기 어렵습니다.

처리 시간을 절약하는 데 도움이 되는 적절한 모니터링 방법을 수행하려면 웹 사이트 상태를 구성하는 주요 구성 요소를 알고 있어야 합니다.

빠르고 쉬운 웹사이트 빌더의 등장으로 모든 사람이 웹사이트 제작에 액세스할 수 있게 되었습니다. 가입하고, 도메인을 선택하고, 템플릿을 선택하고 짜잔! 몇 초 만에 웹사이트를 만들 수 있습니다.

그러나 많은 웹 사이트 소유자는 웹 사이트 생성이 첫 번째 단계일 뿐이라는 사실을 일축합니다. 적절한 성능 유지 및 상태 모니터링도 중요합니다.

그런 점에서 웹사이트 상태 및 성능 지표의 정의, 모니터링 방법, 개선 방법 등 몇 가지 필수 웹사이트 상태 및 성능 지표를 살펴보겠습니다.

높은 웹사이트 상태 점수를 모니터링하기 위한 측면

핵심 웹 바이탈

Core Web Vitals를 통한 높은 웹사이트 상태 점수 작성자의 이미지, 2022년 10월

Google PageSpeed ​​통계

성능 테스트를 수행할 때 고려해야 하는 첫 번째 메트릭은 핵심 웹 바이탈입니다. 이러한 성능 지표는 속도, 안정성 및 응답성을 보여주어 웹사이트 사용자 경험의 품질을 이해하는 데 도움이 됩니다.

여러 도구가 핵심 성능 향상을 추적하지만 많은 웹사이트 소유자는 Google PageSpeed ​​Insights라는 간단한 도구에 끌립니다.

도구에 URL을 입력하면 핵심 핵심 성능 테스트를 통과했는지 여부와 주시해야 할 기타 측면을 보여주는 보고서가 표시됩니다. 다음은 세 가지 주요 측정항목입니다.

최대 함량 페인트(LCP)

2.5초 이하 의 점수를 목표로 합니다.

점수가 2.5초를 넘으면 서버가 지연되고 리소스 로드 시간이 빠르지 않거나 렌더링 차단 JavaScript 및 CSS가 많거나 클라이언트 측에서 느린 렌더링이 있음을 나타낼 수 있습니다.

첫 번째 입력 지연(FID)

100밀리초 이하 의 점수를 목표로 합니다.

점수가 이 시간을 초과하면 타사 코드 영향을 줄이고 JavaScript 실행 시간을 줄이고 기본 스레드 작업을 최소화하고 전송 크기를 작게 유지하고 요청 수를 줄여야 할 수 있습니다.

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

0.1 이하 의 점수를 목표로 합니다.

점수가 이 값을 초과하면 시각적 및 비디오 콘텐츠에 크기 속성을 포함하여 임의의 레이아웃 이동을 피할 수 있습니다(또는 CSS 종횡비 상자로 공간을 예약). 콘텐츠가 겹치지 않도록 하고 전환을 애니메이션할 때 주의하세요.

페이지 속도 차단기

여러 요인이 웹사이트 로드 속도에 영향을 줄 수 있습니다. 그러나 시간 예산이 있고 먼저 주요 원인에 집중하고 싶다면 다음 요소에 세심한 주의를 기울이십시오.

  • 사용하지 않는 JavaScript 및 CSS 코드.
  • 렌더링 차단 JavaScript 및 CSS 코드.
  • 축소되지 않은 JavaScript 및 CSS 코드.
  • 큰 이미지 파일 크기(자세한 내용은 아래 참조).
  • 리디렉션 체인이 너무 많습니다.

JavaScript 및 CSS 파일의 로드를 개선하려면 미리 로드하는 것이 좋습니다.

또 다른 옵션은 "서버 생각 시간"을 활용하여 다운로드를 시작해야 하는 리소스를 HTTP 서버 응답에서 브라우저에 알려주는 초기 힌트를 활성화하여 페이지 로드 속도를 높이는 것입니다.

웹사이트를 테스트하려면:

  1. https://pagespeed.web.dev/로 이동합니다.
  2. 스캔하려는 페이지의 URL을 입력합니다.

먼저 홈페이지를 선택하는 것이 좋습니다.

또 다른 편리한 도구는 WebPageTest.org로, 웹사이트 성능과 상태를 획기적으로 개선하는 데 도움이 되는 핵심 성과 및 기타 지표를 보여줍니다. 또한, 그것은 무료입니다!

사이트에 표시된 검색창에 페이지 URL을 붙여넣기만 하면 기본 위치에서 전체 테스트가 수행됩니다.

또한 사용자로 등록하고 위치 목록에서 선택하여 다른 국가, 장치 및 브라우저에서 웹사이트를 테스트할 수 있습니다.

WebPageTest는 기회 및 실험, 관찰된 메트릭, 실제 사용자 측정 및 개별 실행의 네 가지 주요 섹션으로 구성된 성능 요약을 통해 성능 측면에서 웹사이트의 위치와 속도를 늦출 수 있는 요소를 정확하게 보여줍니다.

관찰된 측정항목 작성자의 이미지, 2022년 10월

UCRAFT에서는 PageSpeed ​​Insights, Chrome Dev Tools, WebPageTest 및 기타 여러 도구를 조합하여 웹사이트 성능과 관련하여 작업해야 하는 작업에 대한 명확한 이해를 얻습니다. 이미 경쟁이 치열합니다.

디자인 요소

디자인 요소 작성자의 스크린샷, 2022년 10월

웹 사이트 성능 및 상태 모니터링에 대해 생각할 때 일반적으로 기술 팀이 처리하도록 합니다.

하지만 웹사이트를 디자인하는 방법과 선택한 요소가 실적을 높이거나 낮출 수 있다고 말하면 어떻게 될까요?

맞습니다. 이제 디자인 팀을 참여시켜야 할 때입니다.

이미지 최적화

이미지는 훌륭하지만 크기가 적절하지 않으면 웹사이트 속도가 느려질 수 있습니다. 이미지 크기를 조정하고 전체가 표시되지 않을 때 거대한 파일을 업로드하지 않도록 하십시오.

마찬가지로 이미지를 압축하고 더 무거운 JPEG 또는 PNG 파일을 선택하는 대신 WebP, JPEG 2000 및 JPEG XR과 같은 다양한 파일 형식을 사용해 보십시오.

이미지를 한 번에 모두 로드하는 대신 사용자가 이미지를 볼 때 로드되도록 기본 지연 로드를 구현하는 것이 좋습니다.

Chrome, Safari, Firefox를 포함한 거의 모든 브라우저는 <img> 또는 <iframe>에서 loading=”lazy” 속성을 지원합니다. 이 속성은 사용자가 더 가까이 스크롤할 때 브라우저에 로드하도록 지시합니다.

스크롤 없이 볼 수 있는 부분의 이미지를 지연 로드하면 페이지의 LCP 점수가 저하되므로 Google에서는 스크롤 없이 볼 수 있는 부분의 이미지에 fetchpriority="high" 속성을 사용하여 LCP를 개선할 것을 권장합니다.

해당 속성을 사용하면 이미지를 미리 로드할 필요가 없습니다. 스크롤 없이 볼 수 있는 이미지에 'fetchpriority' 속성을 미리 로드하거나 설정해야 합니다.

또한 "srcset" 속성의 응답성을 활용하여 화면 크기에 따라 적절한 크기의 이미지를 로드하고 작은 화면에서 중복으로 큰 이미지를 로드하지 않도록 합니다. 이것은 LCP 점수 향상에 크게 도움이 될 것입니다.

글꼴

사치스러운 사용자 정의 글꼴은 20/20 비전이 없는 사용자가 읽기 어려운 경우가 많지만 웹 사이트 속도를 상당히 저하시킬 수도 있습니다.

더 많은 웹 안전 글꼴을 위해 외부 호스팅 글꼴을 전환하고 Google의 CDN을 통해 호스팅되는 한 Google 글꼴을 사용해 보십시오.

또한 이 글꼴 사양은 글꼴 파일 크기를 크게 줄일 수 있으므로 가변 글꼴을 웹사이트의 일반적인 미학에 통합하는 것을 고려하십시오.

글꼴을 미리 로드해야 합니다.

애니메이션/추가 기능

애니메이션, 비디오, 특수 효과, 슬라이더 또는 기타 멋진 요소를 지나치게 사용하지 마십시오.

여기 저기에 대화형 요소를 포함하는 것은 좋지만 너무 많은 움직이는 "것"으로 웹사이트를 포화시키면 사용자와 서버 모두에게 좌절감을 줄 수 있습니다.

합성되지 않은 애니메이션은 페이지를 다시 칠하게 하여 메인 스레드 작업을 증가시키고 웹 페이지가 로드될 때 시각적으로 불안정하게 나타날 수 있으므로 사용하지 마십시오.

모바일 최적화를 위한 PWA 솔루션

전체 모바일 친화적인 경로로 이동하여 모바일 사이트를 PWA(프로그레시브 웹 앱)로 바꾸지 않겠습니까?

PWA는 서비스 워커로 구축되기 때문에 캐시된 콘텐츠를 더 빠른 속도로 로드합니다. 그뿐만 아니라 PWA는 성능과 UX 면에서 뛰어난 네이티브 모바일 앱과 유사합니다.

추가 기술 성과 지표

가동 시간

가동 시간은 웹 사이트가 얼마나 잘 작동하는지 보여줍니다.

웹사이트가 자주 다운되거나 다운되면 사용자 경험, Google 순위 및 수익에 해를 끼칩니다.

가능하면 99.999% 가동 시간을 목표로 하고 다른 위치에서 웹사이트를 테스트하십시오.

가동 시간 모니터링을 위한 도구:

  • 스테이터스케이크.
  • 핑덤.
  • 더 나은 가동 시간.
  • 업타임로봇.

데이터베이스 성능

기본 사항을 확인했지만 웹 사이트가 여전히 응답하지 않는 경우 데이터베이스 성능이 좋지 않기 때문일 수 있습니다.

쿼리에 대한 응답 시간을 모니터링하고 가장 많은 시간을 차지하는 데이터베이스 쿼리를 찾아 이를 확인할 수 있습니다.

이 작업을 완료한 후에는 최적화를 시작하십시오! Blackfire.io와 같은 도구를 사용하면 병목 현상을 쉽게 식별하고 정확한 데이터를 기반으로 솔루션을 찾을 수 있습니다.

웹 서버의 하드웨어

디스크 공간이 로그 파일, 이미지, 비디오 및 데이터베이스 항목으로 가득 차면 웹 사이트가 지연될 수 있습니다. 특히 업데이트 또는 디자인 변경을 구현한 후에는 중앙 처리 장치(CPU) 부하를 정기적으로 모니터링해야 합니다.

New Relic과 같은 도구는 효율적인 모니터링 및 디버깅을 통해 전체 스택을 개선하는 데 도움이 될 수 있습니다.

검색 가시성

위에서 논의한 많은 측정항목은 이미 검색 가시성에 상당한 영향을 미치고 있습니다.

따라서 Google PageSpeed ​​Insights를 통해 웹사이트 페이지를 실행하고 최적화할 때 SEO에도 중요한 일을 하고 있는 것입니다.

Semrush 또는 Sitechecker.pro, Screaming Frog, DeepCrawl 또는 필요에 가장 적합한 기타 도구와 같은 웹사이트 크롤링 도구를 선택할 수도 있습니다.

웹사이트 크롤러는 다음과 같은 모든 유형의 문제를 찾는 데 도움이 됩니다.

  • 깨진 링크.
  • 깨진 이미지.
  • 핵심 웹 필수 지표를 모니터링합니다.
  • 체인을 리디렉션합니다.
  • 구조화된 데이터 오류.
  • 색인이 생성되지 않은 페이지.
  • 제목과 메타 설명이 누락되었습니다.
  • 혼합 콘텐츠.

다음 사항에 관한 모든 준비가 되었는지 확인하십시오.

  • XML 사이트맵 – 사이트맵 형식이 올바른지 확인하고 업데이트가 필요한지 확인하고 Google Search Console을 통해 사이트맵을 다시 제출하십시오.
  • Robots.txt – 특히 서버에 과부하가 걸렸다고 의심되는 경우 웹 페이지용 robots.txt 파일(HTML, PDF 또는 검색 엔진이 읽을 수 있는 기타 비미디어 형식)을 활용하여 크롤링 트래픽을 더 잘 관리하십시오. Google 크롤러의 요청

웹사이트 보안 및 캐싱

SSL 인증서를 받으십시오!

건강한 웹사이트는 안전한 웹사이트입니다.

웹사이트가 완벽한 시간에 로드되어 100/100 점수를 얻더라도 https://로 시작하지 않으면 사용자(또는 검색 엔진)가 사이트를 신뢰할 수 없습니다.

SSL 인증서는 본질적으로 사용자 데이터가 안전하게 유지되도록 보장하는 암호화된 연결을 구축하는 서버의 코드입니다.

SSL 인증서를 얻는 것은 특별히 어려운 과정은 아니지만 수동으로 수행할 경우 시간이 오래 걸릴 수 있습니다.

그러나 BlueHost와 같이 잘 정립된 호스팅 제공업체를 사용하는 경우 제공업체에서 도메인에 대해 무료 SSL을 발급할 수 있는 경우가 많습니다.

CDN 사용 고려

CDN(콘텐츠 전송 네트워크)은 빠른 인터넷 콘텐츠를 전달하기 위해 함께 작동하는 분산 서버입니다.

즉, CDN은 지리적 위치에 관계없이 사용자와 가까운 서버의 콘텐츠를 유지하여 웹사이트 성능을 가속화하는 도구입니다. 이를 캐싱이라고도 합니다.

글로벌 입지를 가지고 있다면 CDN은 필수입니다! 페이지 로드 속도를 높이고 대역폭 비용을 줄이며 트래픽을 분산하고(사이트가 다운될 가능성을 줄임) DDoS 완화와 같은 기능을 통해 보안을 강화합니다.

업계 최고의 플레이어로는 Cloudflare, Amazon Cloudfront 및 Google Cloud CDN이 있습니다. 그러나 다른 많은 옵션이 있으므로 조사를 통해 웹 사이트 및 비즈니스 요구 사항에 가장 적합한 CDN을 선택하십시오.

웹 애플리케이션 방화벽 설정

WAF(웹 응용 프로그램 방화벽)는 의심스러운 HTTP 트래픽을 필터링하여 웹 응용 프로그램을 보호합니다. 다음과 같은 공격으로부터 애플리케이션을 방지하는 것을 목표로 합니다.

  • 사이트 간 위조.
  • XSS(교차 사이트 스크립팅).
  • 파일 포함.
  • SQL 인젝션.

다음은 가장 인기 있고 신뢰할 수 있는 웹 애플리케이션 방화벽 목록입니다.

  • 클라우드플레어 WAF.
  • GoDaddy 방화벽.
  • 마이크로소프트 애저.

또는 WordPress를 사용하는 경우 다음과 같은 플러그인 설치를 고려할 수 있습니다.

  • 워드펜스.
  • 수쿠리.
  • 올인원 보안(AIOS).

평결

그건 랩이야! 알 수 있듯이 웹 사이트 성능과 상태는 다양한 측면에 따라 다릅니다.

웹 사이트가 지연되는 경우 논리적인 첫 번째 단계는 핵심 성능 향상을 확인하고 개선할 수 있는 부분을 확인하는 것입니다. 다른 기술 지표를 살펴보고 개선할 수도 있습니다.

SEO는 웹사이트의 상태에도 매우 중요하므로 검색 가시성, 링크 및 잠재적인 로드 차단기를 확인하여 개선할 수 있는 부분을 확인하세요.

SSL 인증서와 캐싱도 잊지 마십시오.

웹사이트 디자인은 로드 속도와 성능에도 영향을 줄 수 있습니다. 특히 귀하 또는 귀하의 디자이너가 무거운 디자인 요소를 사용하는 것을 좋아하는 경우에 그렇습니다.

이미지를 최적화하고, 무거운 글꼴을 피하고, 애니메이션을 적당히 사용하는 것을 잊지 마십시오.

추가 리소스:

  • 사이트 성능을 개선하기 위해 Chrome UX 보고서를 사용하는 방법
  • Google 디스플레이 네트워크 성능 향상을 위한 6가지 팁
  • 고급 기술 SEO: 완벽한 가이드

주요 이미지: JulsIst/Shutterstock