W3 Total Cache Minify 플러그인 설정: 임베딩 유형 선택 방법? 문제 해결 경험과 유용한 팁을 공유합니다.

W3 Total Cache Minify에 맞는 임베딩 유형을 선택하는 데 어려움을 겪고 계신가요? 이 글에서는 웹마스터의 실제 경험을 바탕으로 웹사이트 스타일 불일치 및 로딩 오류를 방지하면서 올바른 Minify 임베딩 유형을 정확하게 선택하는 단계별 가이드를 제공합니다. 초보자도 쉽게 적용할 수 있는 완벽한 설정 방법도 포함되어 있습니다.워드프레스(WordPress) 충돌 없이 가속하세요!

웹사이트 최적화 작업을 하던 중 W3 Total Cache의 Minify 설정을 열어보고 완전히 당황했습니다. 임베디드 유형의 드롭다운 메뉴에는 기본(차단), 비차단을 위한 JavaScript 사용, 비차단을 위한 "비동기" 사용, 비차단을 위한 "지연" 사용 이렇게 네 가지 옵션만 있었습니다.

나는 잠시 생각해 보았다. 이게 다 무슨 이야기일까?

저를 믿으세요, 당신만 그런 게 아닙니다. 이 네 가지 옵션은 초보자조차도 당황하게 만들 가능성이 높고, 하물며 워드프레스를 수년간 사용해 온 사람이라면 더욱 그럴 겁니다. 이 글에서는 제가 직접 겪었던 어려움과 그 과정에서 얻은 교훈을 공유합니다. 문서를 참조할 필요 없이, 제 설명만 따라하면 됩니다.

이 네 가지 임베딩 유형은 정확히 무엇인가요?

먼저 이 네 가지 선택지가 어떤 유형의 캐릭터인지 이야기해 보겠습니다.

기본값(차단됨)이를 기본 차단(Default blocking)이라고 합니다. 가장 간단한 접근 방식인데, 브라우저가 스크립트를 만나면 로딩을 멈추고 스크립트를 완전히 다운로드하여 실행한 다음 페이지 렌더링을 계속하는 것입니다. 안정적으로 들리죠? 하지만 단점은 페이지 초기 로딩이 차단된다는 것입니다. 사용자는 스크립트 실행이 완료될 때까지 기다려야만 페이지를 볼 수 있습니다.

자바스크립트를 사용하여 비차단 처리를 구현합니다.이건 꽤 흥미롭네요. 페이지에 직접 `<script>` 태그를 쓰는 대신, 먼저 작은 스크립트를 출력하고, 페이지 실행 후에 JavaScript를 사용하여 필요한 스크립트들을 동적으로 페이지에 삽입합니다. 이렇게 하면 페이지가 먼저 렌더링되고 스크립트들이 점진적으로 로드될 수 있습니다. 좋아 보이죠? 하지만 문제는 이 동적 삽입 과정이 스크립트의 원래 실행 순서를 뒤바꿀 수 있다는 점입니다. 페이지의 일부 스크립트가 실행 순서에 크게 의존하는 경우 문제가 발생할 수 있습니다.

비차단 방식을 사용하려면 "asynchronous"를 사용하세요.이 방법은 `<script>` 태그에 `async` 속성을 추가하는 것입니다. 스크립트는 백그라운드에서 비동기적으로 다운로드되고 다운로드가 완료되는 즉시 실행되므로 페이지가 기다릴 필요가 없습니다. 하지만 단점은 실행 순서를 전혀 제어할 수 없다는 것입니다. 코드에서 지정한 순서와 관계없이 다운로드가 먼저 완료된 스크립트가 먼저 실행됩니다.

논블로킹에 "지연" 사용`defer` 속성을 추가하는 것은 바로 이런 의미입니다. 스크립트는 페이지 전체가 파싱될 때까지 기다린 후 실행되며, 중요한 것은 작성한 원래 순서를 그대로 유지한다는 점입니다. 이는 첫 화면을 가리지도 않고 순서를 흐트러뜨리지도 않으므로 사용자에게 매우 편리합니다.

어떤 걸 선택해야 할까요?

간단히 말해서, 이 네 가지 선택지는 객관식 문제와 같습니다.속도를 원하세요, 아니면 질서를 원하세요?

제 제안은 다음과 같습니다.

웹사이트 규모가 작고 스크립트 수도 적으며 로딩 속도에 대한 요구 사항이 그다지 높지 않다면 기본 설정(차단됨)을 사용하는 것이 가장 쉬운 방법입니다. 속도는 약간 느리지만 문제 발생 가능성은 낮습니다.

첫 화면 로딩 속도를 개선하고 싶고 스크립트에 "A가 B보다 먼저 실행되어야 한다"와 같은 강력한 종속성이 없다면, 우선순위를 다음과 같이 설정하세요...논블로킹에 "지연" 사용(지연). 현재로서는 렌더링을 차단하지도 않고 순서를 방해하지도 않으므로 거의 가장 이상적인 해결책입니다.

지연 로딩을 시도했는데도 일부 함수에서 문제가 발생한다면 다음 사항을 고려해 보세요...자바스크립트를 사용하여 비차단 처리를 구현합니다.이 해결책은 좀 더 급진적이지만 호환성은 약간 떨어집니다.

비차단 방식을 사용하려면 "asynchronous"를 사용하세요.(비동기) 방식은 제가 가장 권장하지 않는 옵션입니다. 실행 순서가 완전히 뒤죽박죽이 되기 때문에 스크립트들이 모두 독립적으로 실행되고 있다는 확신이 없으면 쉽게 오류가 발생할 수 있습니다.

내가 빠졌던 두 가지 큰 함정

말은 쉽죠. 제가 저지른 두 가지 실수를 적어봤습니다. 여러분도 자신의 경험과 비교해보고 같은 실수를 피할 수 있는지 확인해 보세요.

첫 번째 문제점: 사용자 정의 워드프레스 테마는 실시간으로 미리 볼 수 없습니다.

한동안 테마를 커스터마이징할 때, 저장 버튼을 클릭한 후 미리보기가 새로 고쳐지지 않는 문제가 있었습니다. 변경 사항을 적용하고 페이지를 새로고침해도 미리보기는 그대로였습니다.

조사 결과, Minify의 압축 기능이 문제의 원인임을 발견했습니다. 해결책은 간단합니다.

W3 Total Cache 플러그인에 액세스하세요.常规设置, 일어나"압축"해당 옵션의 체크를 해제하세요. 그런 다음 오른쪽 상단의 "설정 저장" 아래에 있는 작은 화살표를 클릭하고 "..."을 선택하세요.설정을 저장하고 캐시를 지우세요이 단계는 매우 중요합니다. 캐시를 지우지 않으면 이전 버전이 계속 표시됩니다.

작업을 완료한 후 테마 사용자 지정으로 돌아가면 라이브 미리보기가 정상적으로 표시됩니다.

두 번째 문제: Astra 테마의 검색 상자가 클릭해도 반응하지 않습니다.

이 문제는 꽤 오래전에 겪었습니다. 아스트라 테마를 사용하고 있었는데, 어느 날 갑자기 검색창이 아무리 클릭해도 반응하지 않는 것을 발견했습니다. 처음에는 테마 자체의 문제라고 생각했지만, 나중에 W3TC의 Minify 설정 때문이라는 것을 알게 되었습니다.

해결 방법은 다음과 같습니다.

W3 Total Cache → 일반 설정 → 고급 압축 설정 → JS → 축소 엔진 설정 → 로케일 설정으로 이동하여 임베딩 유형을 다음 두 가지 중 하나로 변경하세요.

1. 이전에는 자바스크립트를 사용하여 비차단 방식을 구현했습니다.
2. 그 후에는 비차단 처리를 위해 JavaScript를 사용하십시오.

마찬가지로 캐시를 삭제하고 페이지를 새로고침하면 검색 상자가 제대로 작동합니다.

다른 옵션 대신 이 두 가지 옵션을 선택한 이유에 대해서는 조사를 통해 알아봤습니다. 간단히 말해서, Astra 테마의 프런트엔드 구성 요소는 스크립트 실행 시점에 매우 민감하며, 특정 비동기 메서드는 이벤트 바인딩 오류를 발생시킬 수 있습니다. "JS를 사용한 비동기" 모드를 사용하면 페이지 로딩이 완료된 후에만 스크립트가 실행되므로 비동기 방식에서 발생하는 불규칙적인 실행을 방지할 수 있습니다.

방문할 장소 목록

마지막으로, 바로 따라할 수 있는 체크리스트를 소개합니다.

첫 번째 단계는 목표를 명확히 하는 것입니다. 페이지 초기 로딩 속도를 최대한 빠르게 하고 싶은지, 아니면 안정성과 오류 없는 작동을 우선시하는지 결정해야 합니다. 이러한 목표에 따라 사용할 임베딩 유형이 결정됩니다.

두 번째 단계는 모든 것을 한 번에 바꾸지 않는 것입니다. 먼저 중요도가 낮은 페이지를 선택하여 테스트하고, 하루 이틀 정도 관찰한 후, 문제가 없다고 확신할 때만 전체 사이트에 적용하세요.

셋째, 수정 후에는 항상 캐시를 지우십시오. W3TC의 캐싱 메커니즘 때문에 최신 변경 사항이 표시되지 않을 수 있으므로 "캐시를 지우고 다시 테스트"하는 단계는 필수적입니다.

넷째, 브라우저 개발자 도구나 PageSpeed ​​Insights와 같은 도구를 사용하여 변경 전후의 로딩 속도를 비교해 보세요. 직감에만 의존하지 말고 데이터를 통해 결과를 확인하세요.

끝에 쓰기

솔직히 말해서, 처음 이 내장형 타입 설정을 봤을 때는 한참 동안 어리둥절했습니다. 기본 블로킹 모드는 너무 느려 보였고, 비동기 모드는 순서를 보장하지 않았으며, 지연 실행은 호환성 문제를 일으킬 수 있을 것 같았습니다. 어떤 옵션을 선택해야 할지 확신이 서지 않았습니다.

하지만 나중에 깨달았습니다. 가장 빠른 속도와 가장 안정적인 성능을 동시에 얻을 수는 없다는 것을요. 항상 하나를 포기해야 합니다. 제 경험상, 현재 가장 안전한 비동기 처리 방식인 `defer`를 먼저 사용하고, 문제가 발생하면 콜백 함수를 사용하는 것이 좋습니다.

만약 비슷한 문제를 겪으시거나, 제가 제시한 방법을 따라했는데도 여전히 다른 문제가 발생한다면 언제든지 편하게 문의해 주세요. 웹사이트 개발은 시행착오의 연속이며, 누구도 예외는 아닙니다.

제 글을 읽어주셔서 감사합니다. 다음에 또 뵙겠습니다.