개요

Query Monitor는 WordPress 용 개발자 도구 패널입니다. 

이 플러그인은 데이터베이스에서 값을 가져오는데 걸리는 시간과 오류가 있는지를 알려주는데 중점을 두고 있습니다. 예를 들어, 데이터베이스 관련하여 사이트가 느려진 원인을 찾을 수 있습니다.

플러그인, 테마, 기능별로 정리해서 보여줌으로써 어떤 요소가 사이트 성능에 영향을 미치는지 파악할 수 있게 해줍니다. 특히 느린 데이터베이스 쿼리나 과도한 리소스를 사용하는 플러그인을 찾아내는 데 유용합니다.

데이터 베이스 최적화는 아래의 게시글의 WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance 으로 가능합니다. 참조하세요.

페이지의 성능(사이트 속도, 로딩 속도) 측정 및 향상 방법 : PageSpeed Insights, Webpagetest.org

Query Monitor – The developer tools panel for WordPress

• Version:3.7.1
• Last updated:2 weeks ago
• Active installations:100,000+
• WordPress Version:3.7 or higher
• Tested up to:5.7.2
• PHP Version:5.3.6 or higher

내 워드프레스 사이트의 상태 확인 – Query Monitor 에서는 이 플러그인을 아래와 같이 소개하고 있습니다.

현재 이 워드프레스 사이트의 상태를 이처럼 알기쉽게 잘 알려주는 플러그인이 없기 때문입니다.

조금 더 자세하게 설명하자면

예를들어 사이트가 플러그인을 몇개 설치했더니 뭔가 상태가 좀 이상하다, 혹은 사이트가 이전보다 느려진것같다고 느껴질때가 있는데 원인을 알아야 해결을 할 수 있습니다.

이 쿼리 모니터는 이 원인을 파악하는데 도움이 되며 특히 워드프레스로 사이트를 제작하는 개발자에게는 필수라고 생각됩니다.

개인적으로 워드프레스 개발은 이 쿼리모니터 플러그인이 나오기 전과 후가 많이 달라졌다고 생각하며 번거로운 확인 작업이 정리해서 깔끔하게 표시해주기때문에 한번에 끝나게 됐습니다.

이 쿼리 모니터를 보고 속도에 영향을 준다거나 에러가 발생하는 플러그인은 아예 도입을 하지 않습니다. 관리를 하게 된다는 뜻입니다.

개인적으로 플러그인이 아니라 워드프레스 기본 기능에 추가해도 좋을만한 잘 만들어진 플러그인이라고 생각합니다.

Query Monitor는 WordPress 용 개발자 도구 패널입니다. 다음을 포함하여 사이트의 여러 측면 을 검사하고 디버깅 할 수있는 플러그인입니다 .

• Database queries( 데이터베이스 쿼리 )
• PHP errors(PHP 오류)
• Hooks and actions( 후크와 액션 )
• Enqueued scripts and styles( 대기열에 넣은 스크립트 및 스타일 )
• Theme template files( 테마 템플릿 파일 )
• Languages and translations( 언어 및 번역 )
• Rewrite rules( 재 작성 규칙 )
• Block editor blocks( 블록 편집기 블록 )
• HTTP API calls( HTTP API 호출 )
• 그리고 훨씬 더 …

Query Monitor는 WordPress와 마찬가지로 무료이며 오픈 소스 소프트웨어입니다. 또한 Altis 및 WordPress.com VIP를 포함하여 세계에서 가장 많이 트래픽을 유발하는 WordPress 플랫폼 중 일부에 기본적으로 번들로 제공됩니다. 이 플러그인의 후원사인 오토매틱 Automattic 은 WordPress.com를 소유하고 있을뿐 아니라, 또한,   WooCommerce ,  jetpack ,  Simplenote ,  Longreads ,  VaultPress ,  Akismet 플러그 ,  Gravatar ,  Polldaddy ,  Cloudup  등 워드 프레스의 주위에 많은 플러그인과 서비스를 소유하고 있습니다.

개발자 John Blackbourn 

Contribution History

John Blackbourn’s badges:

•   Accessibility Contributor
•   bbPress Contributor
•   BuddyPress Contributor
•   Core Contributor
•   Core Team
•   Documentation Contributor
•   Meetup Organizer
•   Meta Contributor
•   Plugin Developer
•   Translation Contributor
•   WordCamp Organizer
•   WordCamp Speaker

Query Monitor( https://querymonitor.com/ ) 웹사이트에 블로그를 보시면 아주 전문적으로 이해하실 수 있습니다.

Guides

• How to use Query Monitor
• Logging Variables
• Configuration Constants

Helpful blog posts:

• Debugging WordPress REST API Requests
• Debugging WordPress Template Part Loading
• Clickable Stack Traces and Function Names
• Silencing Errors from Certain Plugins and Themes
• Profiling and Logging in Query Monitor

How to use Query Monitor

이 플러그인은 데이터베이스에서 값을 가져오는데 걸리는 시간과 오류가 있는지를 알려주는데에 중점을 두고 있습니다.

관리자로 로그인하면 관리자 도구 모음 메뉴에 아래와 이미지와 같은 새 메뉴 항목이 표시됩니다.

상단의 숫자는 순서대로 표시됩니다.

1. Page generation time in seconds : 페이지 생성 시간 (초), 이 페이지가 로딩에 걸린 시간 ( 참고용이며 정확하지 않을수 있습니다. ). 1초대에 로딩이 끝난다고 한다면 특별한 문제는 없다고 생각하셔도 됩니다.
2. Total memory usage in kilobytes : 총 메모리 사용량 (KB), 이 페이지 로딩에 사용된 메모리
3. Total time taken by SQL queries in seconds : SQL 쿼리에 걸린 총 시간 (초). 이 페이지에 사용된 데이터베이스에서 값을 가져올때(쿼리) 걸린 시간의 합
4. Total number of SQL queries :  총 SQL 쿼리 수, 이 페이지에 사용된 쿼리의 총 수

쿼리 모니터에 표시되는 모든 정보는  현재 페이지로드에 대한 것 입니다. 아직 정보의 역사를 사용할 수 없습니다 (이 기능은 향후 버전으로 계획되어 있음).

메뉴 상단을 클릭하여 Overview 패널 을 열거 나 메뉴 항목을 클릭하여 해당 패널을 엽니 다.

처음에는 Queries 페이지로드 중에 수행된 모든 데이터베이스 쿼리를 표시하고 이를 필터링 및 정렬하고 각 쿼리를 담당하는 구성 요소를 결정할 수 있는 패널에 가장 관심이있을 것입니다  .

내 워드프레스 사이트의 상태 확인 – Query Monitor 에 의하면,  여기서 위 숫자보다 중요한것은 “배경색” 입니다. 뭔가 문제가 있을경우에는 아래와 같이 빨간색으로 표시됩니다.

( 이미지 출처 : 내 워드프레스 사이트의 상태 확인 – Query Monitor )

이렇게 나온다는것은 아파치 에러 로그에도 기록될 정도의 에러가 발생했다는 뜻이며 이 페이지를 불러올때 뭔가가 정상적으로 동작하지 않은게 있다는 의미입니다. 우선적으로 해결하는것이 좋습니다.

제 경험상 빨간색이 뜰때는 PHP 코드에 문제가 있거나 외부 사이트에서 값을 받아오는 동작이 있는데 못받아오는 경우 ( 예 : 플러그인이나 테마 버전 체크 등 ) 가 많았습니다.

오렌지색으로 뜰 경우도 있는데 이건 치명적이지는 않지만 DB 에서 값을 받아오는 동작이 느릴경우, 즉 슬로우 쿼리가 발생했다거나 PHP 코드에 기본값 설정이 안되있는 등의 경우입니다.

패널 상세 내용

아래의 초록색은 내 워드프레스 사이트의 상태 확인 – Query Monitor 의 내용을 원본 그대로 가져온 것입니다.

항목이 많으므로 간략하게 설명드리겠습니다

1. PHP deprecated : php 코드에 에러가 있을 경우 혹은 권장사항 알림. deprecated 는 치명적인 에러는 아닙니다. 그러나 개선해야할 에러입니다.
2. Queries(데이터 베이스 쿼리) : 이 페이지에 사용된 쿼리들 목록
3. Queries by caller : 쿼리 정보를 호출한 펑션 단위로 표시
4. Queries by Component : 쿼리 정보를 컴포넌트 ( 플러그인, 테마 등..) 단위로 표시
5. request : 이 페이지에 사용된 값, 정보,
6. rewrite rules : 이 페이지의 URL 규칙
7. template : 이 페이지의 파일
8. scripts & styles : 이 페이지를 표시할때 사용된 스크립트와 스타일
9. hook : 이 페이지에 사용된 훅, 액션 및 필터 목록
10. languages : 현재 사이트에 플러그인과 테마의 언어파일이 있는지 여부
11. http requests : 외부 사이트와 연동할 경우 동작 목록
12. transients set : 이 페이지에 사용된 워드프레스 db 캐시 목록
13. environment(환경) : 서버 환경 정보. 아래의 Environment(환경) 패널 를 참조하세요.
14. 이 페이지에서 사용할 수 있는 true false 펑션 정보, 아래의 스크린샷을 설명하자면 이 사이트는 멀티 사이트이고(is_main_network()) 그중 메인 사이트이며(is_main_site()) SSL 이 적용됐으며(is_ssl()) 글 상세페이지(is_single() 또는 is_singular())라는것을 알 수 있습니다.

( 이미지 출처 : 내 워드프레스 사이트의 상태 확인 – Query Monitor )

여기서 중요한것은 1,2,11 번입니다.

1번은 PHP 코드가 에러가 났을 경우인데 플러그인 혹은 테마의 코드가 잘못 만들어져 있다면 발생합니다.

2번은 DB 인데 에러는 잘 발생하지 않지만 한꺼번에 많은 값을 가져오는 큰 쿼리일 경우 슬로우쿼리로 표시됩니다. DB 의 설정값마다 다를수 있지면 여기서는 0.05초 이상이 걸리면 슬로우쿼리로 취급하며 0.05초면 빠른거 아냐? 라고 생각할수 있는데 DB 가 느리면 페이지에 별 내용이 없더라도 속도가 느려지는 일차적인 원인이 됩니다.

이 슬로우쿼리는 여러 원인이 있을수 있는데, 어쩌다 한번이 아닌 모든 페이지에서 지속적으로 같은 슬로우쿼리가 발생한다거나 하면 수정을 하는것이 좋습니다. 1초 이상이 걸린다면 심각하다고 봐야하며 그 페이지는 빨라질 수가 없습니다.

8번은 필요한 스크립트나 스타일을 불러오지 못했을경우 빨간색으로 표시됩니다. 간혹 발생합니다.

11번은 생각보다 자주 발생하며 외부 사이트와 연동, 예를들어 관리자의 플러그인 목록 페이지에 가면 워드프레스 공식 사이트에서 내 플러그인과 최신 버전과의 버전 체크를 하게 되는데

이 동작이 시간이 걸리거나 값을 못받아오는 경우입니다. 서버 환경 (호스팅이 아닌 자체 서버) 에 따라서는 아예 값을 받아오지 못하는 경우도 봤으며 이때문에 페이지 로딩에 1분정도 걸리는 경우도 봤습니다.

느린 사이트 디버깅

사이트가 느려진 원인을 찾기 위해 먼저 살펴 봐야 할 몇 가지 패널이 있습니다.

1. 구성 요소 별 쿼리(Queries by Component )

이  Queries(데이터베이스 쿼리) -> Queries by Component(컴포넌트별 쿼리) 패널에는 페이지로드 중에 각 플러그인 및 테마에서 실행된 데이터베이스 쿼리에 대한 집계 정보가 표시됩니다. 성능이 저조한 테마나 플러그인을 식별하는 좋은 방법입니다.

이 패널은 각 구성 요소에서 실행한 모든 쿼리에 소요된 총 시간을 기준으로 정렬됩니다. 많은 수의 쿼리를 수행하거나 느린 쿼리를 수행하는 플러그인은 사이트를 로드하는 데 걸리는 시간을 늘리는 역할을 하므로 비활성화하거나 제거해주시면 로딩 속도를 단축시켜줍니다.  아래의 이미지에서 Theme(Parent Theme)의 경우, 0.0003초가 걸리므로  거의 영향을 주지 않으나 각자 사용하는 테마의 속도를 확인해 보실 필요가 있습니다.

2. HTTP API 호출(HTTP API Calls)

이  HTTP API Calls 패널에는 페이지로드 중에 수행 된 서버측 HTTP 요청에 대한 정보가 표시됩니다. 이들은 일반적으로 느린 사이트의 “보이지 않는”원인이며 산발적으로 발생할 수 있습니다.

플러그인 또는 테마가 페이지를로드하는 동안 정기적으로 HTTP API 호출을 트리거하면 사이트를로드하는 데 걸리는 시간이 늘어납니다.

The HTTP API Calls panel shows you information about the server-side HTTP requests that were performed during the page load. These are usually “invisible” causes of a slow site, and can occur sporadically.

If a plugin or theme regularly triggers an HTTP API call during the loading of a page, this will increase the time your site takes to load.

3. PHP 오류(PHP Errors)

PHP Errors 패널은 페이지의 로딩 동안 실행 몇 가지 코드가 이러한 통지 나 경고 등의 PHP 오류가 발생하는 경우에만 나타납니다. Query Monitor의 관리 도구 모음 메뉴에 빨간색 또는 주황색 강조 표시가 있으면 오류가 발생했음을 의미하므로 조사해야합니다.

를 트리거하는  Warning 코드는 코드가 예상대로 작동하지 않고 사이트에서 작동이 중단 될 수 있음을 의미합니다. 즉시 경고를 조사해야합니다. 또한 경고는 각 오류가 서버에 기록되기 때문에 사이트를로드하는 데 걸리는 시간을 늘릴 수 있습니다.

a를 트리거하는 코드  Notice 는 덜 중요하지만 잘못 작성된 코드를 나타낼 수 있으므로 조사해야합니다. 통지는 구성에 따라 서버에 기록되거나 기록되지 않을 수 있습니다.

The PHP Errors panel will appear only if some code that executed during the loading of the page caused a PHP error, such as a notice or a warning. If you see a red or orange highlight in Query Monitor’s admin toolbar menu, this means an error occurred and you should investigate it.

Code that triggers a Warning means the code is not operating as expected and may be causing broken behaviour on your site. You should investigate warnings straight away. In addition, warnings can increase the time your site takes to load because each error gets logged by your server.

Code that triggers a Notice is less critical but should still be investigated as it can be indicative of poorly written code. Notices may or may not be logged by your server depending on its configuration.

4. 스크립트와 스타일(Scripts and Styles)

사이트에서 많은 JavaScript 또는 CSS 파일을로드하는 경우 서버에서 페이지 생성 시간이 반드시 느려지지는 않지만 방문자의 페이지로드 시간이 느려집니다.

Scripts 및  Styles 패널 파일이 워드 프레스 의존성 시스템을 통해 대기 행렬되어있는 방법을 보여줍니다. 이러한 패널에 많은 수의 파일이 표시되는 경우 파일을 축소하고 결합하는 플러그인 설치를 고려해야합니다.

If your site loads many JavaScript or CSS files it won’t necessarily slow down the page generation time on your server but it will slow down the page load time for your visitors.

The Scripts and Styles panels show you which files have been enqueued via the WordPress dependency system. If these panels show a large number of files you should consider installing a plugin which minifies and combines them.

기타 모든 것(Everything Else)

Query라는 이름에도 불구하고 쿼리 모니터에는 데이터베이스 쿼리와 관련이없는 많은 기능이 포함되어 있습니다.

예를 들어 Request 패널 에서  다시 쓰기 규칙 및 쿼리 변수에 대한 정보를 볼 수 있습니다.

Template 패널에서 당신은 테마 템플릿 계층 구조 및 템플릿 부품에 대한 정보를 볼 수 있습니다;(in the Template panel you can see information about the theme template hierarchy and template parts)

Environment 패널 에서  서버에 대한 구성 설정 및 정보를 볼 수 있습니다.

각 패널을 클릭하면 흥미로운 것을 찾을 수있을 것입니다!

Environment(환경) 패널

워드프레스 프로그래밍 언어인 PHP와 mysql로 만든 database, WordPress 그리고 Server에 대한 개요를 한눈에 보여줍니다.

아래의 이미지를 보시면, 서버환경이 표시되는 것을 확인할 수 있습니다. 서버인 PHP의 버전은 7.0이고 빨강색으로 표시되는데, 업데이트를 권장한다는 의미입니다. WordPress 에서는 WP_DEBUG 상수(워드프레스 에러를 볼 수 있도록 하는 WP_DEBUG 상수가 true(볼 수 있도록 설정)인지 false(볼 수 없도록 설정)인지 확인할 수 있습니다)와 WP_DEBUG_DISPLAY, WP_DEBUG_LOG를 보여지게 했는지(true)인지 보여지지 않게 했는지도 (wp-config.php 를 열어보지 않아도) 쉽게 확인할 수 있어 편리합니다.

Logging Variables

Logging Variables 는 개발자가 자신이 개발한 테마, 플러그인등의 로그를 추적하여 개선하는 것으로 개발자용입니다. 일반 CMS 편집자 또는 사이트의 로딩 속도 걔선을 위해 이 플러그인을 살펴보시는 분은 Logging Variables 는 건너 띄어주세요. 저도 이 부분에서 이 플러그인의 컨텐츠를 마무리하고자 합니다.

Query Monitor는 개발자가 WordPress 사이트에서 코드의 실행 시간과 메모리 사용량을 프로파일링하고, 디버깅 메시지를 Query Monitor 인터페이스에 로깅할 수 있게 해줍니다.

프로파일링은 코드의 성능을 분석하는 과정을 의미합니다. 구체적으로는 코드의 실행 시간(얼마나 빠르게 실행되는지)과 메모리 사용량(얼마나 많은 컴퓨터 자원을 사용하는지)을 측정하고 모니터링하는 것입니다.

WordPress에서 Query Monitor를 사용한 프로파일링은 개발자가 다음과 같은 것을 할 수 있게 해줍니다:

• 어떤 코드 부분이 느리게 실행되는지 파악
• 메모리를 과도하게 사용하는 부분 식별
• 성능 병목 현상을 찾아내기
• 최적화가 필요한 부분을 정확히 알아내기

이러한 정보를 통해 개발자는 웹사이트의 속도와 효율성을 향상시키기 위해 코드를 개선할 수 있습니다.

프로파일링과 로깅에 대해 자세히 살펴보겠습니다.

프로파일링​

기본 프로파일링은 코드에서 작업을 사용하여 Query Monitor의 Timings 패널에서 수행 및 표시할 수 있습니다. 아래의 프로파일링 코드를 추가하면 패널 상세 내역을 클릭하였을때 모니터의 하단에 표시되는 상세 내역에 Timings 패널이 추가되고 그 내용을 볼 수 있습니다.

아래의 프로파일링 코드는 당신이 성능을 측정하고 싶은 WordPress 코드 영역에 추가해야 합니다. 일반적으로 다음과 같은 곳에 추가할 수 있습니다:

1. 테마 파일 – 예를 들어 functions.php, 템플릿 파일 등
2. 플러그인 파일 – 당신이 만들거나 수정 중인 플러그인 코드
3. mu-plugins 폴더 내의 파일 – 사이트 전체에 영향을 미치는 필수 플러그인

구체적인 예시로, 어떤 함수의 성능을 측정하고 싶다면 다음과 같이 사용할 수 있습니다:

phpfunction my_theme_function() {
    // Start the 'my_function_timer' timer:
    do_action( 'qm/start', 'my_function_timer' );
    
    // 측정하고자 하는 코드
    heavy_calculation_function();
    complex_database_query();
    
    // Stop the 'my_function_timer' timer:
    do_action( 'qm/stop', 'my_function_timer' );
    
    // 함수의 나머지 부분...
}

또는 특정 템플릿 부분의 성능을 측정하고 싶다면:

php// header.php 또는 다른 템플릿 파일 내
do_action( 'qm/start', 'header_rendering' );

// 헤더 렌더링 코드...

do_action( 'qm/stop', 'header_rendering' );

이 타이머 코드를 추가한 후에는 WordPress 관리자 페이지 또는 프론트엔드에서 Query Monitor 인터페이스의 “Timings” 탭에서 결과를 확인할 수 있습니다.

PHP

// Start the 'foo' timer:
do_action( 'qm/start', 'foo' );

// Run some code
my_potentially_slow_function();

// Stop the 'foo' timer:
do_action( 'qm/stop', 'foo' );

qm/start주어진 함수 이름에 대해 각 작업 사이에 소요된 시간과 대략적인 메모리 사용량이 qm/stop기록되어 타이밍 패널에 표시됩니다. 타이머는 중첩될 수 있지만, 중첩될 경우 메모리 사용량 계산의 정확도가 떨어질 수 있습니다.

타이머는 액션에 랩을 활용할 수도 있습니다 qm/lap.

PHP

// Start the 'bar' timer:
do_action( 'qm/start', 'bar' );

// Iterate over some data:
foreach ( range( 1, 10 ) as $i ) {
    my_potentially_slow_function( $i );
    do_action( 'qm/lap', 'bar' );
}

// Stop the 'bar' timer:
do_action( 'qm/stop', 'bar' );

타이밍 패널의 모습은 다음과 같습니다.

타이밍 패널에 표시되는 시간과 메모리 사용량은 PHP 수준에서 기록되므로 근사치로 간주해야 합니다. 이는 사용자 환경이나 다른 코드에 의해 왜곡될 수 있습니다. 매우 정확한 타이밍이 필요한 경우 XHProf와 같은 저수준 프로파일링 도구를 사용해야 합니다.

로깅​

WordPress에서 JavaScript를 호출하여 콘솔에 데이터를 기록하는 것과 유사하게 Query Monitor에 메시지와 변수를 기록할 수 있습니다 console.log. 이는 . 대신 사용할 수 있습니다 var_dump().

PHP

do_action( 'qm/debug', 'This happened!' );

PSR-3 및 syslog 로그 수준에 해당하는 다음 작업을 사용할 수 있습니다.

• qm/debug
• qm/info
• qm/notice
• qm/warning
• qm/error
• qm/critical
• qm/alert
• qm/emergency

로그 수준이 warning100 이상인 경우 Query Monitor의 관리 도구 모음에서 알림이 표시됩니다.

로그 패널의 모습은 다음과 같습니다.

문맥적 보간은 중괄호 구문을 통해 사용할 수 있습니다.

PHP

do_action( 'qm/warning', 'Unexpected value of {foo} encountered', [
    'foo' => $foo,
] );

A WP_Error, Exception, 또는 Throwable객체를 로거에 직접 전달할 수 있습니다.

PHP

if ( is_wp_error( $response ) ) {
    do_action( 'qm/error', $response );
}

PHP

try {
    // your code
} catch ( Exception $e ) {
    do_action( 'qm/error', $e );
}

모든 유형의 변수는 기록될 수 있으며 적절한 형식이 지정됩니다.

경고

게시물 객체 배열이나 HTTP 요청의 원시 응답과 같이 매우 큰 값을 로깅하지 않도록 주의하세요. 큰 값의 디버깅이 정말 필요하다면 Xdebug의 단계 디버깅 이나 Ray의 디버깅 과 같은 도구를 사용하세요 .

PHP

$var = [ 1, 2, 3 ];
do_action( 'qm/debug', $var );

QM마지막으로, 다음을 호출하는 대신 클래스 의 정적 로깅 메서드를 사용할 수 있습니다 do_action().

PHP

QM::error( 'Everything is broken' );

이 QM클래스는 PSR-3와 호환되지만 실제로는 구현하지 않습니다 Psr\Log\LoggerInterface.

동영상 자료

What are these WordPress plugins doing?! Using Query Monitor Plugin(12:20)

The Amazing Optimizing Query Monitor plugin for WordPress Developers(2:43)

Query Monitor (WordPress 플러그인)와 Google Lighthouse (pagespeed.web.dev/analysis/) 비교

Google Lighthouse (pagespeed.web.dev/analysis/)는 아래의 게시글로 정리하였습니다.

페이지의 성능(사이트 속도, 로딩 속도) 측정 및 향상 방법 : PageSpeed Insights, Webpagetest.org

https://pagespeed.web.dev/analysis/ (Google Lighthouse)와 Query Monitor 플러그인 모두 “왜 내 사이트가 느린가?”를 진단하고 해결책을 찾는 데 도움을 주는 분석 도구입니다. 하지만 이 둘은 분석의 범위, 접근 방식, 대상, 그리고 목적에 있어 중요한 차이점을 가집니다.

1. Google Lighthouse (pagespeed.web.dev/analysis/)

• 분석 범위: 웹사이트의 프론트엔드 성능에 중점을 둡니다. 즉, 브라우저에서 웹페이지가 사용자에게 어떻게 렌더링되고 상호작용하는지에 대한 전반적인 분석을 제공합니다. 이는 모든 종류의 웹사이트에 적용 가능하며, 특정 플랫폼(예: WordPress)에 국한되지 않습니다.
• 측정 지표:
  • 성능(Performance): FCP (First Contentful Paint), LCP (Largest Contentful Paint), TBT (Total Blocking Time), CLS (Cumulative Layout Shift), Speed Index 등 핵심 웹 바이탈(Core Web Vitals)을 포함한 다양한 속도 관련 지표를 측정합니다.
  • 접근성(Accessibility): 웹페이지가 장애인을 포함한 모든 사용자가 쉽게 접근할 수 있도록 설계되었는지 평가합니다.
  • 모범 사례(Best Practices): 웹 개발의 일반적인 모범 사례(HTTPS 사용, 취약점 없음 등)를 준수하는지 확인합니다.
  • SEO (Search Engine Optimization): 검색 엔진 최적화에 필요한 기본적인 요소(메타 태그, 크롤링 가능성 등)를 확인합니다.
  • PWA (Progressive Web App): 웹사이트가 프로그레시브 웹 앱의 기준을 충족하는지 평가합니다.
• 분석 방식: **실험실 데이터(Lab Data)**를 기반으로 합니다. 즉, 통제된 환경(시뮬레이션된 모바일 기기 및 네트워크 환경)에서 테스트를 실행하여 일관된 결과를 제공합니다. PageSpeed Insights를 통해 Lighthouse 보고서를 보면, 실제 사용자 데이터(Field Data)도 함께 볼 수 있지만, Lighthouse 자체는 실험실 테스트입니다.
• 주요 대상: 웹 개발자, SEO 전문가, 웹사이트 관리자 등 웹사이트의 전반적인 사용자 경험과 기술적 건강 상태를 파악하고자 하는 모든 사람.
• 특징: 웹사이트 전반적인 성능 병목 현상(이미지 최적화, JavaScript 번들 크기, 렌더링 차단 리소스 등)을 광범위하게 식별하고, 개선을 위한 구체적인 권장 사항을 제공합니다.

2. Query Monitor (WordPress 플러그인)

• 분석 범위: WordPress 웹사이트의 백엔드 성능 및 디버깅에 특화된 도구입니다. WordPress 코어, 테마, 플러그인 내부에서 발생하는 문제를 깊이 있게 파고듭니다.
• 측정 지표:
  • 데이터베이스 쿼리: 느리거나 중복되거나 오류가 있는 데이터베이스 쿼리를 식별하고, 각 쿼리가 어떤 플러그인, 테마 또는 WordPress 코어에 의해 발생했는지 보여줍니다.
  • PHP 오류 및 경고: PHP 코드에서 발생하는 오류, 경고, 알림 등을 상세한 스택 트레이스와 함께 표시합니다.
  • HTTP API 호출: 외부 서비스로의 HTTP 요청(API 호출)을 모니터링하고 응답 시간 등을 보여줍니다.
  • 스크립트 및 스타일시트: Enqueue된 JavaScript 및 CSS 파일, 그들의 종속성, 깨진 종속성 등을 표시합니다.
  • 템플릿 계층: 현재 페이지를 렌더링하는 데 사용된 워드프레스 템플릿 파일들을 보여줍니다.
  • 메모리 사용량: 각 페이지 로드 시의 PHP 메모리 사용량을 보여줍니다.
  • 훅 및 액션: 워드프레스 훅과 액션의 실행 여부를 추적합니다.
• 분석 방식: 웹사이트에 플러그인 형태로 설치되어 실시간으로 서버 측에서 발생하는 모든 동작을 모니터링합니다. 이는 “실제” 환경에서 어떤 코드가 실행되고 있는지 직접적으로 보여줍니다.
• 주요 대상: WordPress 개발자, 숙련된 워드프레스 사용자, 웹사이트의 백엔드 로직이나 특정 플러그인/테마의 문제를 해결하려는 사람.
• 특징: 워드프레스 특정 환경에서 발생하는 복잡한 성능 문제(예: 특정 플러그인이 데이터베이스 쿼리를 과도하게 실행하는 경우, 테마의 특정 함수가 느린 경우)의 근본 원인을 파악하는 데 매우 강력합니다. 일반적으로 개발 환경에서 사용되며, 라이브 운영 환경에서는 성능 오버헤드를 일으킬 수 있어 사용 후 비활성화하는 것이 권장됩니다.

요약 및 차이점 비교:

특징	Google Lighthouse (pagespeed.web.dev)	Query Monitor (WordPress 플러그인)
분석 범위	웹사이트 전반의 프론트엔드 성능, SEO, 접근성, 모범 사례, PWA	WordPress 백엔드 성능, PHP 오류, 데이터베이스 쿼리, HTTP 요청 등
분석 대상	모든 종류의 웹사이트	WordPress 웹사이트에 특화
측정 환경	통제된 실험실 환경 (시뮬레이션), 일부 실제 사용자 데이터(PSI) 포함	실제 웹사이트 서버에서 실시간 모니터링
주요 사용자	웹 개발자, SEO 전문가, 웹마스터 (종합적인 웹 품질 분석)	WordPress 개발자, 숙련된 워드프레스 사용자 (내부 문제 해결)
진단 방식	미리 정의된 감사 기준에 따라 점수 및 일반적인 최적화 권장 사항 제공	코드 실행, 쿼리, 오류 등을 상세히 로깅하여 문제의 근본 원인 제시
사용 시점	개발 단계, 배포 전후, 주기적인 성능 모니터링	주로 개발 및 디버깅 단계, 문제 발생 시 즉각적인 원인 분석
오버헤드	외부 서비스이므로 웹사이트에 직접적인 부하 없음	활성화 시 서버에 미미한 부하를 줄 수 있음 (진단 목적)

두 도구는 상호 보완적입니다. Lighthouse가 웹사이트의 전반적인 건강 상태와 사용자 경험 관점에서의 성능 문제를 넓게 알려준다면, Query Monitor는 WordPress 사이트에서 발생하는 특정 백엔드 문제의 깊은 원인을 파헤치는 데 필수적인 도구입니다. 웹사이트 속도 문제를 해결하려면 두 가지 도구를 적절히 활용하는 것이 가장 효과적입니다.

---

참고자료 : 1. 내 워드프레스 사이트의 상태 확인 – Query Monitor