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를 비활성화하거나 최소한 몇 초 후에 서버에 도달하지 않도록 더 긴 시간 간격을 설정하는 것이 가장 좋습니다.

Heartbeat API 플러그인 설치

WordPress 관리자 대시보드에 로그인합니다. 플러그인 → 새로 추가 → Breeze 검색 → 설치 및 활성화로 이동합니다.

– WordPress에 Breeze 설치

Breeze 플러그인 구성

설정 → Breeze → Heartbeat API로 이동합니다. 하트비트를 구성하기 위한 4가지 옵션이 있습니다.

1. 하트비트 제어: 버튼을 토글하여 백엔드, 포스트 편집기 및 프론트엔드에 대한 하트비트 API를 켜거나 끌 수 있습니다.
2. Heartbeat Frontend: 이를 통해 Front-end의 동작을 변경하거나 완전히 비활성화할 수 있습니다.
3. Heartbeat Post Editor: WP Post Editor의 동작을 변경하거나 완전히 비활성화할 수 있습니다.
4. 하트비트 백엔드: 백엔드 의 동작을 변경하거나 완전히 비활성화할 수 있습니다.

– Breeze의 Heartbeat API 설정

여러 규칙 만들기

기본적으로 WordPress Heartbeat API의 기본 빈도를 가져오지만 요구 사항에 따라 여러 규칙을 만들 수 있습니다. 예를 들어 WordPress 백엔드(대시보드)는 2분(120초) 후에 실행되고 포스트 편집기는 3분(180초) 후에 실행되도록 할 수 있습니다. 이렇게 하려면 두 가지 규칙을 만들어야 합니다. 하나는 WordPress 대시보드용이고 다른 하나는 포스트 편집기용입니다. 주파수를 각각 2분과 3분으로 설정합니다.

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를 비활성화하거나 일부 위치에서만 활성화할 수 있습니다. 또는 요청 로드를 처리하고 서버 응답 시간도 단축할 수 있는 관리형 호스팅으로 업그레이드할 수 있습니다.

자주 묻는 질문