비동기적인 로딩이란 무엇이며 그것의 중요성은 무엇인가?
현대 웹사이트 개발에서 페이지 로딩 속도는 사용자 경험과 검색 엔진 순위(SEO)를 측정하는 중요한 지표입니다. 기존의 스크립트 로딩 방식은 “렌더링 차단”(render-blocking) 방식이었는데, 이는 브라우저가 HTML을 파싱하는 작업을 일시 중단하고 특정 스크립트 파일을 다운로드하여 실행한 후에야 페이지 렌더링을 계속할 수 있음을 의미합니다. WordPress 사이트에 여러 플러그인을 통합할 경우, 각 플러그인이 자체적인 JavaScript(JS) 및 CSS 파일을 포함하고 있으며, 이러한 파일들은 페이지의 헤더나 본문에 동시에 로드되어 사이트의 “최초 콘텐츠 표시 시간”(First Content Paint, FCP)과 “최대 콘텐츠 표시 시간”(Last Content Paint, LCP)을 현저히 지연시킬 수 있습니다.
비동기 로딩(Asynchronous Loading)은 브라우저가 비블로킹 방식으로 스크립트를 로드하는 기술입니다. 브라우저가 비동기 로딩을 사용하는 페이지를 만나면,async또는defer속성에 스크립트 태그가 포함되어 있을 때, 브라우저는 HTML 문서의 파싱을 계속 진행하는 동시에 해당 스크립트 파일을 병렬로 다운로드합니다. 두 가지 방식의 가장 큰 차이점은 스크립트가 실행되는 시점에 있습니다.
* async스크립트가 다운로드되는 즉시 즉시 실행되며, 이로 인해 HTML 파싱이 중단될 수 있습니다.
* defer스크립트는 전체 HTML 문서가 파싱되고(DOM이 준비되면) 문서 내에서 나타나는 순서대로 실행됩니다.
CSS의 경우에도 “비동기 로딩”이나 “렌더링을 방해하는 리소스의 제거”와 같은 기술을 사용하여, 비핵심 스타일시트(예: 첫 화면 이후에 표시되는 콘텐츠에 사용되는 스타일)의 로딩 우선순위를 낮출 수 있습니다.
추천 읽기 WordPress 웹사이트 속도 최적화 완벽 가이드: 기본 설정부터 고급 캐싱 전략까지。
비동기적인 로딩 전략을 사용하면, 소설媒体 공유 버튼, 댓글 상자, 통계 분석 코드 등과 같은 비중요한 플러그인 리소스를 핵심 렌더링 경로에서 제거할 수 있습니다. 이는 두 가지 주요 이점을 제공합니다. 首先, 웹사이트의 성능을 향상시키고 사용자가 페이지 내용을 더 빠르게 보고 상호 작용할 수 있게 해줍니다. 두번째로, SEO 성능을 최적화할 수 있습니다. 이는 페이지 속도가 Google 등 검색 엔진의 핵심 순위 요소 중 하나이기 때문입니다.
어떻게 비동기로 로드해야 하는 플러그인 리소스를 식별할 수 있을까요?
최적화를 시작하기 전에, 어떤 플러그인 리소스가 “렌더링을 방해하는지” 정확히 파악하고, 어떤 플러그인들이 비동기적으로 또는 지연 로딩하는 것이 적합한지 판단해야 합니다.
성능 분석 도구를 사용하세요.
먼저, 전문적인 성능 테스트 도구를 사용하여 보고서를 생성하세요. Google PageSpeed Insights, GTmetrix, WebPageTest 모두 훌륭한 선택지입니다. 이러한 도구들은 “렌더링을 방해하는 리소스”의 목록을 명확하게 제공하며, 각 JS 및 CSS 파일의 URL, 크기, 그리고 예상되는 성능 향상 시간을 상세히 보여줍니다. 일반적으로, 플러그인 디렉터리에서 발생하는 문제들도 이러한 도구들을 통해 쉽게 파악할 수 있습니다./wp-content/plugins/크기가 크고 첫 화면에 반드시 표시될 필요가 없는 리소스들이 최우선적인 최적화 대상입니다.
자원의 중요성을 판단하는 것
모든 리소스가 비동기 처리에 적합한 것은 아닙니다. 리소스의 기능에 따라 판단해야 합니다.
핵심 리소스: 첫 화면의 비주얼과 기능에 직접적인 영향을 미치는 리소스입니다. 예를 들면, 네비게이션 메뉴 상호 작용을 위한 JS, 첫 화면 내용의 스타일 시트 등이 이에 해당됩니다. 이러한 리소스는 일반적으로 동시에 로드되거나 인라인으로 제공되어야 합니다.
비중요한 리소스: 페이지 하단에 위치하거나 사용자 상호 작용 후에만 필요한 기능입니다. 전형적인 예로는 다음이 포함됩니다:
소셜 미디어 공유 플러그인(예: AddToAny, ShareThis)
코멘트 영역 JS(예: Disqus, 기본 코멘트 확장)
웹사이트 통계 분석 코드(예: Google Analytics. 비록 구글은 비동기적인 스크립트를 권장하고 있지만)
연락처 양식 플러그인의 첫 화면에 표시되지 않는 양식
輪播 플러그인의 첫 화면이 아닌 슬라이드들.
간단한 경험法则는 이렇습니다: 플러그인의 기능이 사용자가 페이지를 열은 첫 번째 순간에 바로 준비되어 있을 필요가 없다면, 그 플러그인의 리소스는 비동기로 로드될 후보입니다.
추천 읽기 CDN 기술 심층 분석: 초보자부터 전문가까지, 웹사이트 성능과 보안을 동시에 강화하는 방법。
실제로 비동기 로딩을 구현하는 방법들
WordPress 플러그인 리소스를 비동기로 로드하도록 전환하는 방법은 여러 가지가 있습니다. 자신의 기술적 역량에 맞는 방법을 선택하시면 됩니다.
최적화 플러그인을 사용하세요 (코드가 필요 없는 솔루션).
대부분의 사용자에게는 전용 최적화 플러그인을 사용하는 것이 가장 안전하고 편리한 방법입니다. 이러한 플러그인은 그래픽 인터페이스를 제공하여 리소스의 로딩 방식을 쉽게 관리할 수 있게 해줍니다.
추천 플러그인: WP Rocket과 Async JavaScript
WP Rocket은 강력한 캐싱 플러그인으로, “파일 최적화” 탭에서 JavaScript의 지연 로딩 기능을 직접 설정할 수 있으며 특정 스크립트를 제외시킬 수도 있습니다. 반면에 Async JavaScript 플러그인은 이 기능에 더 중점을 두고 있으며, 거의 모든 스크립트에 대해 지연 로딩 설정을 적용할 수 있도록 해줍니다.async또는defer속성을 포함하며, 상세한 제외 항목 목록도 제공합니다.
이러한 플러그인을 사용하는 일반적인 단계는 플러그인을 설치 및 활성화한 후, JS/CSS 최적화 옵션을 찾아서 “JavaScript 지연 로드” 또는 유사한 기능을 활성화하고, 도구의 이전 보고서에 따라 주요 스크립트(예: jQuery 핵심 라이브러리, DOMContentLoaded 이벤트와 강력히 연관된 스크립트)를 제외 목록에 추가하여 기능 손상을 방지하는 것입니다.
주제 파일을 수동으로 편집하기 (코드 솔루션)
만약 더 세밀한 제어를 원하신다면, 테마를 편집함으로써 가능합니다.functions.php이 기능은 파일을 통해 구현됩니다. WordPress에서는 이를 위한 도구와 지원을 제공합니다. script_loader_tag 그리고 style_loader_tag 필터를 사용하여 스크립트와 스타일시트의 HTML 출력을 수정할 수 있습니다.
추천 읽기 WordPress 웹사이트 속도 최적화 가이드: Core Web Vitals를 향상시키는 핵심 전략들。
다음은 예제 코드로, 이 코드는 대상 스크립트에 기능을 추가합니다.defer“속성(Attributes). 코드 내에서…”plugin-script-handle실제로 처리해야 할 스크립트 핸들(Handle)로 바꾸세요.
function add_async_defer_attribute($tag, $handle) {
// 将要延迟加载的脚本句柄添加到这个数组
$scripts_to_defer = array('plugin-script-handle', 'another-plugin-script');
foreach($scripts_to_defer as $defer_script) {
if ($defer_script === $handle) {
// 使用 defer， 如需 async 则替换为 async='async'
return str_replace(' src', ' defer="defer" src', $tag);
}
}
return $tag;
}
add_filter('script_loader_tag', 'add_async_defer_attribute', 10, 2);플러그인의 스크립트 핸들을 찾으려면, 플러그인이 출력하는 HTML 소스 코드를 확인하거나 플러그인의 소스 코드 자체를 살펴보면 됩니다.wp_enqueue_script()함수 호출의 첫 번째 매개변수.
CSS의 비동기 로딩 처리
CSS의 경우, “프리로딩(preloading)” 기능을 사용하면 더 효과적으로 페이지를 렌더링할 수 있습니다.onload이 이벤트를 통해 해당 작업이 비블로킹(non-blocking) 방식으로 처리됩니다. 다음은 특정 스타일시트를 비동기적으로 로드하는 예제 코드입니다:
function async_load_stylesheets() {
?>
<link rel="preload" href="<?php echo get_stylesheet_directory_uri(); ?>/path/to/plugin-style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/path/to/plugin-style.css"></noscript>
<?php
}
// 根据需求，将其挂载到 wp_head 或其它钩子上
add_action('wp_head', 'async_load_stylesheets', 1);이 방법은 다음과 같은 과정을 통해 작동합니다:rel=”preload”브라우저에게 리소스를 가능한 한 빨리 가져오도록 요청하지만, 즉시 적용하지는 않도록 합니다. 리소스가 모두 로드된 후에는 JavaScript를 통해 해당 리소스를 적용합니다.rel속성을 변경합니다.stylesheet그에 따라 스타일을 적용합니다.“JS가 비활성화된 사용자를 위한 대체 방안이 제공됩니다.”
비동기로 로드된 후의 테스트 및 문제 해결
비동기 로딩을 구현한 후에는 포괄적인 테스트가 매우 중요합니다. 이를 통해 웹사이트의 속도가 향상되면서도 기능이 온전히 유지되는지를 확인할 수 있습니다.
기능 및 호환성 테스트
웹사이트의 다양한 페이지(홈페이지, 기사 페이지, 개별 페이지 등)에서 수동 테스트를 수행해야 하며, 특히 비동기로 로드되는 플러그인 기능에 주의를 기울여야 합니다. 예를 들어:
비동기적으로 로드된 소셜 미디어 버튼이 공유 창을 제대로 열 수 있는지 테스트하세요.
페이지가 해당 위치로 스크롤되었을 때 지연 로드된 코멘트 영역이 올바르게 렌더되는지 확인하십시오.
모든 대화형 요소(예: 양식 제출, 버튼 클릭, 드롭다운 메뉴)가 정상적으로 작동하는지 확인하십시오.
특히 주의를 기울여야 할 것은, 다른 요소들에 의존하는 요소들입니다.DOMContentLoaded이러한 스크립트들은 jQuery가 페이지의 상단에 이미 준비되어 있을 때 실행되도록 설계되었습니다. 만약 이들의 실행이 지연된다면, DOM 요소를 찾을 수 없어서 오류가 발생할 수 있습니다. 이것이 바로 플러그인을 최적화할 때 “제외 목록(exclusion list)”을 설정하는 것이 매우 중요한 이유입니다. 어쩌면 jQuery를 제외해야 할 경우도 있을 수 있습니다(보통은…).jquery-core그 및 그 직접적인 의존 항목들은 비동기 로딩에서 제외됩니다.
성능의 이전과 이후 비교
이전에 언급한 성능 분석 도구들(PageSpeed Insights, GTmetrix)을 사용하여 웹사이트를 다시 테스트하세요. 최적화 전후의 보고서를 비교하면서 다음과 같은 핵심 지표들의 변화에 주목하세요:
첫 번째 내용 그리기(FCP): 분명히 미리 완료되었나요?
최대 콘텐츠 그리기(LCP): 가장 큰 콘텐츠 요소가 더 빠르게 표시되는 경우가 있나요?
속도 지수(Speed Index) : 페이지 내용이 더 빠르게 시각적으로 채워지는 것인가?
총 차단 시간(TBT): 주 스레드가 차단된 시간이 줄었는가?
“렌더링을 방해하는 리소스 제거” 제안: 보고서에 나열된 문제들이 줄었거나 사라졌나요?
성공적인 최적화를 통해 이러한 지표들이 현저히 개선되는 것을 확인할 수 있어야 하며, 동시에 렌더링 지연과 관련된 경고나 문제점들도 줄어들어야 합니다.
만약 특정 기능이 손상된 것을 발견하면, 최적화 플러그인 설정이나 자신의 코드로 돌아가서 문제를 일으키는 해당 스크립트 핸들을 비동기/지연 로딩 목록에서 제외시켜 주세요. 문제 해결은 반복적인 과정이며, 기능과 성능의 최적의 균형을 찾기 위해 여러 번의 조정이 필요할 수 있습니다.
요약
WordPress 플러그인 리소스의 비동기 로딩은 검증된 기술이며, 웹사이트의 성능을 효과적으로 향상시킵니다. 이 기술은 비핵심적인 JavaScript 및 CSS 파일을 페이지의 핵심 렌더링 경로에서 분리함으로써 브라우저가 페이지의 핵심 콘텐츠를 먼저 처리하고 렌더링할 수 있도록 해서 웹사이트의 로딩 속도와 사용자 경험을 크게 개선합니다. 구현 방법은 명확하며, WP Rocket과 같은 플러그인을 사용하면 쉽게 시작할 수 있으며, 코드를 직접 작성하여 더욱 세밀하게 제어할 수도 있습니다. 중요한 것은 비핵심 리소스를 정확하게 식별하고, 신중하게 적용하며, 최적화 후에는 기능과 성능에 대한 철저한 테스트를 수행하는 것입니다. 비동기 로딩 전략을 WordPress 유지보수 프로세스에 포함시키는 것은 현대 웹 성능 문제에 대처하고 SEO 순위를 향상시키는 효과적인 방법입니다.
자주 묻는 질문
어느 것을 선택해야 할까요? 비동기 로딩(async)과 지연 로딩(defer) 중에서요.
플러그인 스크립트의 경우, 일반적으로 다음과 같은 방법을 사용하는 것이 더 권장됩니다:defer. Becausedefer스크립트가 HTML 내에서 나타나는 순서대로 실행되도록 보장하는 것은 매우 중요합니다. 특히 서로 의존 관계에 있는 스크립트(예: 플러그인 스크립트가 jQuery에 의존하는 경우)의 경우에는 더욱 그렇습니다. 이를 통해 실행 순서가 잘못되어 발생할 수 있는 오류를 방지할 수 있습니다.async다른 스크립트에 의존하지 않으며, 어떤 스크립트에도 의존되지 않는 완전히 독립적인 코드 조각에 더 적합합니다. 예를 들어, 일부 독립적인 통계 분석 모듈과 같은 경우가 이에 해당합니다.
비동기로 플러그인 리소스를 로드하면 기능이 제대로 작동하지 않을 수 있나요?
가능합니다. 플러그인 스크립트의 실행이 특정 시점에 DOM의 상태에 크게 의존하는 경우(예를 들어, DOM이 특정 요소를 참조해야 하는 경우), 해당 시점에 DOM이 올바르게 구성되어 있지 않으면 문제가 발생할 수 있습니다.DOMContentLoaded이벤트가 발생할 때 즉시 DOM을 조작해야 하는 경우, 또는 해당 스크립트가 다른 동기화된 스크립트에 의존하는 경우, 비동기로 스크립트가 로드되면 예상보다 빨리 또는 늦게 실행될 수 있으며 이로 인해 오류가 발생할 수 있습니다. 따라서 최적화 작업을 완료한 후에는 전면적인 테스트를 수행해야 하며, 문제가 있는 스크립트들을 제외 목록에 추가할 준비를 해두어야 합니다.
모든 플러그인이 비동기로 로드하기에 적합한가요?
아닙니다. 첫 화면의 렌더링과 핵심 상호작용에 직접적인 영향을 미치는 플러그인 리소스는 비동기로 로드되어서는 안 됩니다. 예를 들어, 첫 화면의 시각적 효과를 구현하는 애니메이션 라이브러리, 네비게이션 메뉴의 반응을 처리하는 스크립트, 또는 웹 페이지의 글꼴 표시를 최적화하는 중요한 CSS 파일들은 동기적으로 로드되거나 내장되어야 합니다. 이를 통해 사용자 경험의 일관성과 즉각성을 보장할 수 있습니다. 최적화 작업은 항상 핵심 기능에 영향을 미치지 않는다는 원칙을 기반으로 이루어져야 합니다.
비동기 로딩 외에도 플러그인의 성능을 최적화할 수 있는 방법은 무엇이 있을까요?
비동기적인 로딩은 중요한 요소입니다. 그러나, 여러 조합 전략을 추가적으로 적용할 수도 있습니다. 1. 파일 합치고 최소화: 여러 작은 JS/CSS 파일을 합치고 공백 주석을 제거하십시오. 2. 필요에 따라 로딩: 복잡한 플러그인(예: 페이지 빌더)의 경우, 해당 리소스가 필요한 페이지에서만 로딩되도록 하십시오. 3. 경량 플러그인 선택: 새 플러그인을 선택할 때, 성능 평가가 좋고 코드가 간단한 대체 제품을 우선적으로 고려하십시오. 4. 캐시 사용: 모든 정적 리소스에 더 긴 캐시 만료 기간을 설정하고 그것들을 CDN을 통해 제공하십시오. 이러한 방법들은 비동기적인 로딩과 함께 사용하면 최고의 복합 성능 향상 효과를 내게 합니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어