AJAX란 무엇이며 WordPress에서 사용하는 방법(단계별 가이드)

AJAX는 웹 페이지를 다시 로드할 필요 없이 백엔드에서 데이터를 검색하고 보기를 새로 고칠 수 있는 웹 사이트 개발에 사용되는 널리 사용되는 기술입니다. 따라서 웹 사이트의 상호 작용, 속도 및 유용성을 개선하는 데 도움이 됩니다. AJAX는 댓글을 남기거나 트윗을 게시하는 등의 작업을 수행할 때마다 작동합니다.

이 기사에서는 AJAX가 무엇이며 WordPress(WP AJAX라고도 함)에서 AJAX를 사용하는 방법에 대해 설명합니다. 계속 읽어봅시다!

AJAX란 무엇입니까?

AJAX는 Asynchronous JavaScript And XML의 약자로 서버에 비동기적으로 요청하고 페이지를 다시 로드할 필요 없이 페이지를 변경할 수 있는 기술입니다. AJAX 스크립트는 서버에 일부 데이터를 반환하도록 요청한 다음 얻은 데이터로 웹 페이지를 수정합니다.

예를 들어, 약속 날짜를 선택하는 드롭다운 메뉴와 예약 가능한 시간을 동적으로 표시하는 다른 드롭다운 목록을 상상해 보십시오. 스크립트를 통해 서버는 치료 드롭다운 선택에 사용할 수 있는 시간을 요청받았습니다.

AJAX는 어떻게 작동합니까?

AJAX의 사명은 웹사이트와 서버 사이의 다리 역할을 하는 것입니다. 이 비동기 기술의 핵심은 데이터 교환을 허용하는 XMLHttpRequest 객체입니다. 다음은 AJAX 호출을 위한 기본 단계입니다.

– 출처: W3Schools

• 보낼 정보 지정
• 통화 설정
• XMLHttpRequest 객체를 사용하여 데이터 보내기
• 서버로부터 응답 수신 및 처리

좋은 점은 jQuery 라이브러리를 사용하여 이 프로세스를 단순화할 수 있다는 것입니다.

WordPress에서 AJAX를 사용하는 방법?

WordPress는 기본적으로 AJAX를 지원합니다. wp-admin 폴더 안에 "admin-ajax.php"가 있습니다.

처음에는 WordPress 관리자로부터 AJAX 요청을 만드는 모든 기능을 위해 만들어졌습니다. 웹의 공개 부분에도 사용됩니다.

모든 WordPress AJAX 요청은 PHP 스크립트를 거쳐야 합니다. 즉, admin-ajax.php는 콘텐츠를 반환하는 액션이 ​​호출되는 PHP 파일이어야 합니다.

2013년에 WordPress는 다른 사용자가 WordPress 게시물을 작성하거나 편집하는 동안 자동 저장 기능, 로그인 만료 및 게시물 잠금 경고와 같은 몇 가지 중요한 기능을 제공하는 WordPress Heartbeat API를 도입했습니다.

Heartbeat API의 두 가지 매우 두드러진 기능은 다음과 같습니다.

1. 자동 저장

게시물의 초안을 저장하거나 계속 작업하면 WordPress가 자동으로 변경 사항을 저장합니다. 자동 저장과 초안을 수동으로 저장하는 것 사이에는 분명한 차이가 있습니다. 두 가지 유형의 저장을 모두 보여주는 다음 스크린샷을 확인하세요.

– WordPress의 자동 저장

2. 포스트 잠금

다른 사용자가 이미 작업 중인 게시물을 편집하려고 하면 상황에 대한 팝업 경고가 나타납니다. 세 가지 작업이 표시됩니다.

– WordPress의 게시물 잠금

위에서 언급한 기능은 적절한 통신 및 응답을 위해 서버와 브라우저 사이에 연결을 생성하는 WordPress Heartbeat API가 있기 때문에 가능합니다.

WordPress Heartbeat API는 서버와의 통신 요청을 생성하고 데이터/응답 수신 시 이벤트를 트리거합니다. 이것은 일반적으로 서버의 부하를 증가시키고 결국 WordPress 관리자의 속도를 늦춥니다.

실제 사례

내 WordPress 대시보드에 로그인하고 게시물 작성을 시작합니다. 그런 다음 몇 분 동안 탭을 열어두고 다른 탭을 탐색하기 시작합니다. 대시보드는 여전히 로그인되어 있으며 admin-ajax가 계속해서 요청을 보내는 것을 볼 수 있습니다.

– admin-ajax.php 서버에 요청 보내기

위에서 언급한 티켓에 따르면 WordPress의 admin-ajax.php는 15초마다 요청을 생성합니다. 요청은 서버와의 모든 통신일 수 있습니다.

플러그인이 admin-ajax.php를 어떻게 오버로드합니까?

WordPress의 admin-ajax.php에서 발생하는 대부분의 문제는 설치된 플러그인의 요청에 기인할 수 있습니다. 이러한 플러그인은 팝업 실행 또는 소셜 공유 카운터 업데이트와 같은 특정 기능을 얻기 위해 요청을 보내 WordPress 관리자를 느리게 만듭니다.

즉, 요청이 반드시 admin-ajax.php 파일을 급증시키지는 않습니다. 요청이 제대로 처리되고 플러그인 개발자가 플러그인에서 AJAX 호출을 활용하는 모범 사례를 따른다면 admin-ajax.php 파일은 문제가 없을 것입니다. 따라서 비활성화하기 전에 플러그인을 진단하는 것도 중요합니다.

WordPress에서 플러그인을 진단하는 방법은 무엇입니까?

플러그인이 admin-ajax.php 파일에 미치는 영향을 식별하려면 플러그인을 올바르게 진단하는 것이 중요합니다. 이는 WordPress 관리자의 속도를 늦출 수 있습니다. 이를 위해 GTmetrix 및 WebPageTest의 두 가지 도구를 사용합니다.

GTmetrix의 경우 전체 요청 목록을 보려면 Waterfall 탭으로 이동하십시오. 목록을 자세히 보면 admin-ajax.php 파일에 의해 만들어진 POST 요청을 볼 수 있습니다.

– WordPress의 플러그인 진단

제 경우 이러한 요청은 주로 소셜 공유 플러그인에 의해 이루어졌습니다. 이 특정 플러그인은 업데이트된 공유 수를 가져오기 위해 15초마다 API를 통해 소셜 미디어 계정에 ajax 요청을 보냅니다.

자세한 정보를 보려면 탭을 확장하십시오. 응답 탭에는 이러한 요청을 트리거하는 정확한 지점이 표시됩니다.

Chrome에는 다양한 플러그인의 요청을 분석하는 데 도움이 되는 개발자 도구가 함께 제공됩니다. 이를 확인하려면 Chrome에서 웹사이트를 열고 CTRL + Shift + I을 클릭한 다음 네트워크 탭을 클릭합니다.

– 크롬에서 admix-ajax.php 요청

페이지를 새로고침하고 업데이트된 요청으로 채워지는 목록을 확인합니다. 필터 상자에 ajax 또는 admin-ajax를 입력하여 필요한 파일을 필터링합니다. 이를 통해 요청 수와 빈도 및 요청 소스에 대한 통찰력을 얻을 수 있습니다.

다음으로 파일을 클릭하면 추가 정보를 볼 수 있습니다. 응답 탭에서 이 요청을 일으키는 플러그인에 대한 힌트를 제공합니다. 제 경우에는 특정 시간 동안 가장 인기 있는 게시물을 강조 표시하는 플러그인인 WP Popular 플러그인(WPP)에 의해 트리거되었습니다.

이를 방지하려면 사용 중인 플러그인이 업데이트되었는지 확인하십시오. 그렇지 않은 경우 개발자가 문제를 해결할 수 있도록 지원 티켓을 열어보십시오. 가능하면 업데이트되고 admin-ajax.php 파일에 과부하가 걸리지 않는 다른 플러그인으로 교체할 수도 있습니다.

일부 플러그인은 WordPress 사이트에 중요하므로 플러그인을 제거하기 전에 철저한 진단을 실행하는 것이 중요합니다. 이러한 도구는 근본 원인을 찾고 문제를 해결할 수 있는 최상의 솔루션을 선택하는 데 도움이 될 수 있습니다.

다음 섹션에서는 이러한 요청을 줄이고 admin-ajax.php 파일이 오버로드되는 것을 방지하는 방법을 살펴보겠습니다.

WordPress 대시보드 속도 향상

WordPress 백엔드 속도를 높이려면 Heartbeat API를 비활성화하거나 최소한 몇 초마다 서버에 도달하지 않도록 더 긴 시간 간격을 설정하는 것이 가장 좋습니다.

하트비트 제어 플러그인 설치

– 하트비트 제어 플러그인

WordPress 관리자 대시보드에 로그인합니다. 플러그인 → 새로 추가로 이동합니다. 하트비트 컨트롤을 검색합니다. 설치하고 활성화하십시오.

– WordPress에 Heartbeat Control 설치

하트비트 제어 플러그인 구성

설정 → 하트비트 제어 설정으로 이동합니다. 플러그인 구성을 위한 세 가지 드롭다운 메뉴가 있습니다.

1. 하트비트 허용

Heartbeat API가 작동할 영역을 선택할 수 있습니다. 다음 세 가지 옵션 중에서 선택할 수 있습니다.

• WordPress 대시보드: WordPress 대시보드에 대한 Heartbeat API를 활성화합니다.
• 프론트엔드: 프론트엔드에서 API를 활성화합니다.
• Post Editor: 자동 저장 및 사후 잠금 기능에서 Heartbeat API를 활성화하려면 이 확인란을 선택합니다.

– Heartbeat 제어의 Heartbeat 허용

2. 하트비트 비활성화

WordPress Heartbeat API가 특정 위치를 비활성화하도록 하려면 이것을 선택하십시오. 다른 플러그인도 WordPress Heartbeat API를 사용할 수 있으므로 위치를 선택할 때 주의하십시오. WordPress 백엔드의 유일한 사용자인 경우 모든 곳에서 비활성화한 다음 웹 사이트가 중단되는지 확인하는 것이 좋습니다.

그러나 사이트에 정기적으로 기여하는 사용자가 두 명 이상인 경우 편집 후 페이지에서만 Heartbeat API를 허용하는 것이 좋습니다.

– 하트비트 제어에서 하트비트 비활성화

3. 하트비트 수정

이 드롭다운을 사용하면 0~300초 범위에서 admin-ajax 요청을 실행하는 시간 간격을 설정할 수 있습니다. 120초로 설정하면 120초마다 요청이 생성됩니다. 그러면 서버의 부하가 크게 줄어듭니다. 필요에 따라 조정하십시오.

– Heartbeat Control에서 Heartbeat 수정

여러 규칙 만들기

요구 사항에 따라 여러 규칙을 만들 수 있습니다. 예를 들어 WordPress 대시보드는 120초 후에 실행되고 포스트 편집기는 60초 후에 실행되도록 할 수 있습니다. 이렇게 하려면 WordPress 대시보드용 규칙과 포스트 편집기용 규칙의 두 가지 규칙을 만들어야 합니다. 주파수를 각각 120 및 60으로 설정합니다.

Heartbeat API를 사용하는 플러그인 감지

이제 모든 설정이 완료되었으므로 어떤 플러그인이 admin-ajax.php 파일을 사용하여 웹사이트 속도를 늦추는지 확인할 차례입니다.

GTmetrix로 이동하여 사이트의 URL을 입력하십시오. 사이트를 분석하는 데 몇 분 정도 걸립니다. 완료되면 폭포 탭으로 이동하여 파일이 연결하고 응답하는 데 걸리는 시간을 확인할 수 있습니다. 조금 아래로 스크롤하여 POST admin-ajax.php에 대한 항목이 있는지 확인하십시오. 그렇다면 확장하고 게시물 탭으로 이동하십시오. 여기에서 범인 플러그인을 식별할 수 있습니다.

제 경우 "데스크톱 스위치" 플러그인은 admin-ajax.php 파일을 사용하고 있으며 계속해서 서버에 요청을 보내고 있습니다. 결정을 내릴 때입니다. 다른 플러그인으로 교체하거나 손가락을 교차하십시오.

– POST 관리자-ajax.php

요약

기능 세트를 고려할 때 Heartbeat API는 WordPress 웹 사이트에서 매우 유용합니다. 그러나 올바르게 사용하지 않으면 WordPress Ajax 요청을 주고받아 WordPress 백엔드와 프런트 엔드의 로드 시간이 늘어날 수 있습니다.

이 문제에 대한 해결책은 두 가지뿐입니다. Heartbeat API를 비활성화하거나 일부 위치에서만 활성화할 수 있습니다. 또는 요청 로드를 처리하고 서버 응답 시간도 줄일 수 있는 관리형 호스팅으로 업그레이드할 수 있습니다.