Autoptimize

FAQ

플러그인은 사이트 속도를 높이기 위해 어떤 기능을 하나요?

모든 스크립트와 스타일을 최소화하고 좋은 만료 헤더로 압축하도록 웹서버를 구성합니다. 자바스크립트는 렌더링 차단을 하지 않는 기본값으로 설정하고 중요한 CSS를 추가하여 CSS도 렌더링 차단을 할 수 있습니다. CSS와 JS 파일을 결합(통합)하도록 구성할 수 있으며, 이 경우 스타일은 페이지 헤드로, 스크립트는 바닥글로 이동합니다. 또한 HTML 코드를 최소화하고 이미지와 Google 글꼴을 최적화하여 페이지를 매우 가볍게 만들 수 있습니다.

HTTP/2를 사용하는데 오토옵티마이즈가 필요하지 않나요?

HTTP/2는 확실히 큰 진전으로, 동일한 연결을 사용하여 여러 개의 동시 요청을 수행함으로써 동일한 서버에서 여러 요청이 미치는 영향을 크게 줄였으며, 이러한 이유로 새 설치에서 Autoptimize는 더 이상 CSS 및 JS 파일을 집계하지 않습니다. 즉, CSS/ JS의 연결은 여전히 의미가 있을 수 있습니다, 이 css-tricks.com 글과 이 Ebay 엔지니어의 블로그 게시물에 설명된 대로 말입니다. 결론은 구성하고, 테스트하고, 재구성하고, 다시 테스트하고, 조정하고, 상황에 가장 적합한 것을 찾아보세요. 그냥 HTTP/2일 수도 있고, HTTP/2 + 집계 및 축소일 수도 있고, HTTP/2 + 축소일 수도 있습니다(AO도 가능하며, “JS 파일 집계” 및/또는 “CSS 파일 집계” 옵션을 선택 해제하기만 하면 됩니다). 그리고 오토옵티마이즈는 JS 및 CSS를 “그냥” 최적화하는 것보다 훨씬 더 많은 일을 할 수 있습니다.)

내 블로그에서도 작동하나요?

오토옵티마이즈는 보증 없이 제공되지만, 일반적으로 올바르게 구성하면 완벽하게 작동합니다. 문제 발생 시 구성하는 방법에 대한 자세한 내용은 아래의 “문제 해결”을 참조하세요. 원하는 경우 tastewp.com에서 제공하는 새로운 무료 더미 사이트에서 오토옵티마이즈를 테스트할 수 있습니다.

자바스크립트를 집계할 때 jquery.min.js가 최적화되지 않는 이유는 무엇인가요?

AO 2.1부터 워드프레스 코어의 jquery.min.js는 많은 인기 플러그인이 집계되지 않는 인라인 JS를 삽입하는 단순한 이유(인라인 JS의 고유 코드에 캐시 크기 문제가 있을 수 있기 때문)로 인해 최적화되지 않았으므로 jquery.min.js를 제외하면 대부분의 사이트에서 바로 작동할 수 있습니다. jquery도 최적화하려면 JS 최적화 제외 목록에서 제거하면 됩니다(“또한 인라인 JS 집계”를 활성화하거나 “head에서 JS 강제 적용”으로 전환해야 할 수도 있습니다).

오토옵티마이즈 JS 렌더링이 차단되는 이유는 무엇인가요?

이 문제는 자바스크립트를 집계하고 ‘헤드에 강제 적용’ 옵션을 선택하거나 집계하지 않고 지연하지 않을 때 발생합니다. 설정 변경을 고려하세요.

오토옵티마이즈 CSS가 여전히 렌더링 차단으로 호출되는 이유는 무엇인가요?

기본 오토옵티마이즈 구성을 사용하면 CSS가 헤드에 링크되는데, 이는 안전한 기본값이지만 구글 페이지스피드 인사이트에서 불만을 제기합니다. 이 FAQ에 설명된 “모든 CSS 인라인”(쉬운 방법) 또는 “CSS 인라인 및 지연”(더 나은 방법)을 살펴볼 수 있습니다.

인라인 및 디퍼 CSS의 용도는 무엇인가요?

일반적으로 CSS는 문서 머리에 넣어야 합니다. 최근 구글은 필수적이지 않은 CSS는 뒤로 미루고, 스크롤 위에 페이지를 만드는 데 필요한 스타일은 인라인으로 처리하는 것을 장려하기 시작했습니다. 이는 모바일 기기에서 페이지를 최대한 빠르게 렌더링하는 데 특히 중요합니다. 오토옵티마이즈 1.9.0부터 ‘CSS 인라인 및 지연’을 선택하고 입력 필드(텍스트 영역)에 ‘스크롤 위 CSS’ 블록을 붙여넣기만 하면 됩니다!

하지만 “위쪽 CSS”가 무엇인지 어떻게 알 수 있습니까?

접힌 부분 위’는 접힌 위치에 따라 달라지며, 이는 다시 화면 크기에 따라 달라지므로 이에 대한 쉬운 해결책은 없습니다. 하지만 ‘접힌 부분 위’에 무엇이 있는지 식별하는 몇 가지 도구가 있습니다. 이 도구 목록이 좋은 출발점이 될 수 있습니다. 사이트 로시티 크리티컬 CSS 생성기와 요나스 올슨의 크리티컬 경로 생성기는 좋은 기본 솔루션이며 http://criticalcss.com/는 같은 Jonas Ohlsson이 만든 프리미엄 솔루션입니다. 또는 이 북마클릿(Chrome 전용)도 도움이 될 수 있습니다.

아니면 모든 CSS를 인라인 처리해야 하나요?

짧은 대답은 아마도 아닐 것입니다. 모든 CSS를 인라인 처리하면 렌더링이 차단되지 않지만 기본 HTML 페이지가 상당히 커져 ‘왕복 시간’이 더 많이 소요됩니다. 또한 브라우징 세션에서 여러 페이지가 요청되는 경우 인라인 CSS는 매번 전송되지만 인라인이 아닌 경우 캐시에서 제공될 수 있습니다. 마지막으로 인라인 CSS는 HTML의 메타태그를 Facebook이나 Whatsapp에서 더 이상 찾지 않을 수 있는 위치로 밀어내어 이러한 플랫폼에서 공유할 때 썸네일 등을 깨뜨릴 수 있습니다.

캐시가 점점 커지는데 오토옵티마이즈가 캐시를 제거하지 않나요?

오토옵티마이즈에는 적절한 캐시 제거 메커니즘이 없기 때문에 다른 캐시에서 여전히 참조되는 최적화된 CSS/JS가 제거되어 사이트가 손상될 수 있습니다. 또한 캐시가 빠르게 증가하는 것은 피해야 할 다른 문제를 나타냅니다.

대신 캐시 크기를 허용 가능한 수준으로 유지할 수 있습니다:

• 집계 인라인 JS 및/또는 “집계 인라인 CSS” 옵션 비활성화하기
• 페이지 단위(또는 페이지 로드 단위)로 변경되는 JS 변수(또는 때로는 CSS 선택자)는 제외합니다. 이 블로그 게시물에서 그 방법을 확인할 수 있습니다.

위의 반대에도 불구하고 이 코드 또는 이 플러그인과 같이 AO 캐시를 자동으로 삭제하는 타사 솔루션이 있지만, 위의 이유로 이러한 솔루션은 사용자가 실제로 무엇을 하고 있는지 알고 있는 경우에만 사용해야 합니다.

“캐시 지우기”가 작동하지 않는 것 같나요?

관리자 도구 모음의 오토옵티마이즈 드롭다운에서 “캐시 삭제” 링크를 클릭하면 “캐시가 성공적으로 제거되지 않았을 수 있습니다”라는 메시지가 표시될 수 있습니다. 이 경우 오토옵티마이즈 설정 페이지로 이동하여 “변경 사항 저장 및 캐시 지우기”버튼을 클릭하세요.

또한 오토옵티마이즈(버전 2.2부터)는 캐시가 지워지면 즉시 캐시를 자동으로 미리 로드하여 추가 축소 속도를 크게 높여주므로 캐시가 0파일/0KB까지 내려가지 않더라도 걱정하지 마세요.

오토옵티마이즈 캐시를 지우면 사이트가 깨진 것처럼 보입니다!

AO의 캐시를 지울 때 페이지 캐시에는 제거된 최적화된 CSS/JS를 참조하는 페이지(HTML)가 포함되지 않아야 합니다. 이를 위해 오토옵티마이즈와 일부 페이지 캐시가 통합되어 있지만 이 통합 기능이 모든 설정을 100% 커버하지는 않으므로 페이지 캐시를 수동으로 지워야 할 수도 있습니다.

Cloudflare의 로켓 로더를 계속 사용할 수 있나요?

Cloudflare 로켓 로더는 자바스크립트를 렌더링 차단하지 않게 만드는 꽤 진보된 방법이지만, 아직은 클라우드플레어는 베타 버전으로 간주하고 있습니다. 오토옵티마이즈 및 로켓 로더가 함께 작동하는 경우도 있지만 그렇지 않은 경우도 있습니다. 가장 좋은 방법은 로켓 로더를 비활성화하고 오토옵티마이즈를 구성한 후 (도움이 된다고 생각되면) 로켓 로더를 다시 활성화한 다음 모든 것이 여전히 작동하는지 테스트하는 것입니다.

현재(2017년 6월) RocketLoader가 Filamentgroup의 loadCSS를 기반으로 하는 AO의 “인라인 & 지연 CSS”를 중단하여 지연된 CSS가 로드되지 않을 수 있는 것으로 보입니다.

오토옵티마이즈를 시도했지만 Google 페이지 속도 점수가 거의 개선되지 않았습니다.

오토옵티마이즈는 단순한 “내 페이지 속도 문제 해결” 플러그인이 아니라 (로컬) JS 및 CSS와 이미지를 집계하고 축소하며 Google 글꼴을 제거하고 CSS 로딩을 지연하는 등 몇 가지 멋진 추가 기능을 허용합니다. 따라서 오토옵티마이즈를 사용하면 성능(초 단위로 측정된 로드 시간)을 개선할 수 있으며 특정 페이지 속도 경고를 해결하는 데도 도움이 될 수 있습니다. 더 개선하려면 페이지 캐싱과 웹서버 구성 등을 살펴보고 실제 성능(예: https://webpagetest.org 에서 측정한 로드 시간)과 ‘성능 모범 사례’ 페이지 속도 등급을 개선해야 할 것입니다.

API로 무엇을 할 수 있나요?

요청별로 오토옵티마이즈를 조건부로 비활성화하고, CSS 및 JS 제외를 변경하고, CSS에서 인라인으로 표시되는 CSS 배경 이미지의 제한을 변경하고, 집계된 파일 뒤로 이동되는 JS 파일을 정의하고, 집계된 JS 스크립트 태그의 defer-속성을 변경하는 데 사용할 수 있는 필터가 많이 있습니다…. 일부 필터에 대한 예제는 autoptimize_helper.php_example과 이 FAQ에 있습니다.

CDN은 어떻게 작동하나요?

버전 1.7.0부터는 CDN 블로그 루트 디렉토리(예: http://cdn.example.net/wordpress/)에 들어가면 CDN이 활성화됩니다. 해당 URL이 있는 경우 해당 URL은 CSS의 배경 이미지를 포함하여 오토옵티마이즈로 생성된 모든 파일(예: 집계된 CSS 및 JS)에 사용됩니다(데이터 우리를 사용하지 않는 경우).

업로드한 이미지도 CDN에 저장하려면 워드프레스 설정(/wp-admin/options.php)에서 upload_url_path를 대상 CDN 업로드 디렉터리(예: http://cdn.example.net/wordpress/wp-content/uploads/)로 변경하면 됩니다. 이 방법은 해당 시점부터 업로드되는 이미지에 대해서만 작동하며 이미 업로드된 이미지에는 적용되지 않는다는 점을 고려하세요. 팁을 제공해 주신 BeautyPirate에게 감사드립니다!

왜 내 글꼴이 CDN에도 표시되지 않나요?

오토옵티마이즈는 이를 지원하지만 비로컬 글꼴은 추가 구성이 필요할 수 있으므로 기본적으로 활성화되어 있지 않습니다. 그러나 교차 출처 요청 정책이 정돈되어 있는 경우 API에 연결하여 autoptimize_filter_css_fonts_cdn를 true로 설정하여 Autoptimize에 글꼴을 CDN에 넣도록 지시할 수 있습니다;

add_filter( 'autoptimize_filter_css_fonts_cdn', '__return_true' );

Cloudflare를 사용 중인데 CDN 루트 디렉토리로 무엇을 입력해야 하나요?

아니요, Cloudflare를 사용하면 오토옵티마이즈 CSS/JS가 Cloudflare의 CDN에 자동으로 적용됩니다.

집계된 파일을 PHP가 아닌 정적 CSS 또는 JS로 강제하려면 어떻게 해야 하나요?

웹서버가 압축(압축 또는 압축 해제) 및 캐시 만료(캐시 만료 및 충분한 캐시 제어)를 처리하도록 올바르게 구성된 경우 오토옵티마이즈를 통해 이를 처리할 필요가 없습니다. 이 경우 “집계된 스크립트/css를 정적 파일로 저장할까요?” 옵션을 선택하면 오토옵티마이즈가 집계된 파일을 .css 및 .js 파일로 저장합니다(즉, 이러한 파일을 제공하는 데 PHP가 필요하지 않음). 이 설정은 오토옵티마이즈 1.8부터 기본값입니다.

최적화에서 제외는 어떻게 작동하나요?

CSS 및 JS 최적화 모두 쉼표로 구분된 제외 목록에 “식별자”를 추가하여 코드가 집계 및 최소화되는 것을 건너뛸 수 있습니다. 사용할 정확한 식별자 문자열은 이 방법으로 결정할 수 있습니다:

• 특정 파일(예: wp-content/plugins/funkyplugin/css/style.css)을 제외하려는 경우 “funkyplugin/css/style.css”를 제외하기만 하면 됩니다.
• 특정 플러그인의 모든 파일(예: wp-content/plugins/funkyplugin/js/*)을 제외하려면 예를 들어 “funkyplugin/js/” 또는 “plugins/funkyplugin” 등을 제외하면 됩니다.
• 인라인 코드를 제외하려면 해당 코드 블록에서 특정 고유 문자열을 찾아 제외 목록에 추가해야 합니다. 예: &l;script<funky_data='Won\'t you take me to, Funky Town'&l;/script<에서 제외하려면 식별자는 “funky_data”입니다.

Autoptimize 문제 해결

문제 해결 지침을 https://blog.futtta.be/2022/05/05/what-to-do-when-autoptimize-breaks-your-site/ 에서 확인하세요.

파일을 제외했는데도 여전히 오토옵티마이즈가 진행되나요?

파일명이 아직 축소되지 않은 파일임을 나타내는 경우 AO는 제외된 JS/CSS를 축소합니다. AO 2.5부터는 기타 옵션 아래의 “JS, CSS & HTML”탭에서 “제외된 파일 축소”를 선택 해제하여 이 기능을 비활성화할 수 있습니다.

도움말, 오토옵티마이즈를 활성화한 후 빈 페이지가 표시되거나 내부 서버 오류가 발생했어요!

오토옵티마이즈와 동시에 다른 HTML, CSS 또는 JS 축소 플러그인(BWP 축소, WP 축소, …)을 실행하고 있지 않은지 확인하거나 페이지 캐싱 플러그인(W3 총 캐시, WP 가장 빠른 캐시, …)의 해당 기능을 비활성화하세요. CSS만 활성화하거나 JS 최적화만 활성화하여 어떤 것이 서버 오류의 원인인지 확인한 다음 일반적인 문제 해결 단계에 따라 해결 방법을 찾아보세요.

하지만 여전히 오토옵티마이즈 된 CSS 또는 JS 파일이 비어 있습니다!

아파치를 실행하는 경우 오토옵티마이즈에서 작성한 .htaccess 파일이 경우에 따라 아파치 구성의 AllowOverrides 설정과 충돌하여(일부 우분투 설치의 기본 구성과 마찬가지로) 오토옵티마이즈 CSS 및 JS 파일에 “내부 서버 오류”가 발생할 수 있습니다. 이 문제는 AllowOverrides를 모두로 설정하면 해결할 수 있습니다.

도메인 매핑된 멀티사이트에 로그인할 수 없습니다.

도메인이 매핑된 멀티사이트는 다른 워드프레스 작업에서 오토옵티마이즈를 초기화해야 하므로 wp-config.php에 이 코드 줄을 추가하여 예를 들어 setup_theme에 연결되도록 합니다:

define( 'AUTOPTIMIZE_SETUP_INITHOOK', 'setup_theme' );

오류는 발생하지 않지만 페이지가 전혀 최적화되지 않았나요?

오토옵티마이즈는 실제로 최적화하기 전에 여러 가지 검사를 수행합니다. 다음 중 하나에 해당하면 페이지가 최적화되지 않습니다:

• 커스터마이저에서 언제
• 여는 <html 태그가 없는 경우
• 응답에 <xsl:stylesheet가 있는 경우(출력이 HTML이 아니라 XML임을 나타냄)
• 응답에 <html amp가 있는 경우(AMP 페이지가 이미 최적화되어 있으므로)
• 출력이 RSS 피드인 경우(is_feed() 함수)
• 출력이 워드프레스 관리 페이지인 경우(is_admin() 함수)
• 페이지가 URL에 ?ao_noptimize=1을 추가하여 요청된 경우
• 코드가 오토옵티마이즈에 연결되어 최적화를 비활성화하는 경우(비주얼 컴포저에 대한 주제 참조)
• 다른 플러그인이 호환되지 않는 방식으로 출력 버퍼를 사용하는 경우 (범인을 식별하기 위해 다른 플러그인을 선택적으로 비활성화).

비주얼 컴포저, 비버 빌더 및 유사한 페이지 빌더 솔루션이 고장났습니다!!

로그온한 사용자에 대해 오토옵티마이즈를 활성화하는 옵션을 비활성화하고 드래그 앤 드롭에 열중하세요 😉

도와주세요, 내 상점 결제/결제가 작동하지 않아요!!!

카트/결제 페이지 최적화 옵션 비활성화(우커머스, 쉬운 디지털 다운로드 및 WP 전자상거래에서 작동).

레볼루션 슬라이더가 고장났습니다!

쉼표로 구분된 JS 최적화 제외 목록에 js/jquery/jquery.min.js가 있는지 확인합니다(기본 구성에서는 제외되어 있습니다).

JQuery가 정의되지 않았습니다 오류가 발생합니다.

이 경우 jQuery를 로드해야 하는 집계되지 않은 JavaScript가 있으므로 쉼표로 구분된 JS 최적화 제외 목록에 js/jquery/jquery.min.js를 추가해야 합니다.