설명
오토옵티마이즈를 사용하면 사이트를 매우 쉽게 최적화할 수 있습니다. 스크립트와 스타일을 집계, 축소 및 캐시하고, 기본적으로 페이지 헤드에 CSS를 삽입하지만 중요한 CSS를 인라인 처리하고 집계된 전체 CSS를 지연시킬 수 있으며, 스크립트를 바닥글로 이동 및 지연시키고 HTML을 축소할 수도 있습니다. 이미지 최적화 및 지연 로드(WebP 및 AVIF 형식 지원), Google 글꼴 최적화, 비집계 JavaScript 비동기화, 워드프레스 핵심 이모티콘 크러프트 제거 등을 할 수 있습니다. 따라서 이미 HTTP/2를 사용하는 경우에도 사이트의 성능을 향상시킬 수 있습니다! 각 사이트의 특정 요구 사항에 맞게 오토옵티마이즈를 조정할 수 있는 광범위한 API가 제공됩니다.
성능이 정말 중요하다고 생각한다면 오토옵티마이즈를 보완하는 무료 페이지 캐싱 플러그인(예: 스피드 부스터 팩 또는 KeyCDN의 캐시 인에이블러)이나 페이지 캐싱뿐만 아니라 이미지 최적화, CDN, 중요한 CSS 등이 포함된 오토옵티마이즈 프로를 고려해보세요!
오토옵티마이즈 프로
오토옵티마이즈 프로는 이미지 최적화, CDN, 페이지 캐싱, 자동 중요 CSS 규칙 및 추가 “부스터” 옵션을 추가한 프리미엄 파워업으로, 한 번의 편리한 구독으로 사이트를 더욱 빠르게 만드세요!!프리미엄 지원
Accelera는 훌륭한 프리미엄 지원 및 웹 성능 최적화 서비스를 제공하고 있으며, https://accelerawp.com/에서 자세한 내용을 확인하세요!
(크리에이티브 커먼즈에 따른 스피드 서핑 이미지 by LL Twistiti)
설치
워드프레스 “플러그인; 새로 추가” 화면에서 설치하기만 하면 모든 것이 완료됩니다. 수동 설치도 매우 간단합니다:
- Zip 파일을 업로드하고
/wp-content/plugins/
디렉토리에 압축을 풉니다. - 워드프레스의 ‘플러그인’ 메뉴에서 플러그인을 활성화하세요.
설정 > 오토옵티마이즈
로 이동하여 원하는 옵션을 활성화합니다. 일반적으로 이것은 “HTML/ CSS/ JavaScript 최적화”를 의미합니다.
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”입니다.
-
오토옵티마이즈 문제 해결
-
문제 해결 지침을 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
를 추가해야 합니다. -
NextGen 갤러리를 사용하는데 많은 JS가 집계/축소되지 않나요?
-
넥스트젠 갤러리는 자바스크립트를 추가하기 위해 몇 가지 멋진 작업을 수행합니다. 오토옵티마이즈가 이를 집계할 수 있도록 하려면 다음 코드 스니펫을 사용하여 차세대 갤러리의 리소스 관리를 비활성화하거나
add_filter( 'run_ngg_resource_manager', '__return_false' );
또는 wp-config.php에 추가하여 오토옵티마이즈가 초기화하도록 지시할 수 있습니다:define("AUTOPTIMIZE_INIT_EARLIER","true");
-
Noptimize란 무엇인가요?
-
버전 1.6.6부터 오토옵티마이즈는 noptimize 태그 안에 있는 모든 것을 제외합니다:
<!--noptimize--><script>alert(‘자동 최적화되지 않습니다.’);</script><!--/noptimize-->페이지/글 콘텐츠, 위젯, 테마 파일에서 이 작업을 수행할 수 있습니다(테마 업데이트로 인해 작업 내용을 덮어쓰지 않으려면 하위 테마를 생성하는 것이 좋습니다).
-
캐시된 오토옵티마이즈 파일의 디렉토리 및 파일명을 변경할 수 있나요?
-
예, 기본 /wp-content/cache/autoptimize/autoptimize_12345.css 대신 /wp-content/resources/aggregated_12345.css 등의 파일을 제공하려면 wp-config.php에 추가하세요:
define('AUTOPTIMIZE_CACHE_CHILD_DIR','/resources/'); define('AUTOPTIMIZE_CACHEFILE_PREFIX','aggregated_');
-
기본값이 아닌 WP_CONTENT_URL에서도 작동하나요?
-
아니요, 오토옵티마이즈는 기본값이 아닌 WP_CONTENT_URL을 기본적으로 지원하지 않지만 오토옵티마이즈의 API에 몇 줄의 코드를 연결하면 이 작업을 수행할 수 있습니다.
-
생성된 JS/CSS를 미리 압축할 수 있나요?
-
예, 하지만 이 기능은 기본적으로 꺼져 있습니다. 오토옵티마이즈 필터 캐시 생성에 ´true´를 전달하여 활성화할 수 있습니다. 물론 압축되지 않은 파일 대신 이러한 파일을 사용하도록 웹서버를 구성해야 즉석 압축으로 인한 오버헤드를 피할 수 있습니다.
-
이모티콘 제거는 어떤 기능을 하나요?
-
오토옵티마이즈 2.3의 새로운 옵션은 워드프레스 코어에서 추가한 인라인 CSS, 인라인 JS 및 링크된 JS 파일을 제거합니다. 따라서 사이트 성능에 약간의 긍정적인 영향을 미칠 수 있습니다.
-
쿼리 문자열 제거가 유용하나요?
-
일부 온라인 성능 평가 도구에서는 “정적 파일에 대한 쿼리 문자열”을 성능 문제로 지적하기도 하지만, 일반적으로 이러한 영향은 거의 존재하지 않습니다. 따라서 버전 2.3부터 오토옵티마이즈에서는 쿼리 문자열(또는 더 정확하게는 “ver”-매개변수)을 제거할 수 있지만 “정적 리소스에서 쿼리 문자열 제거”를 체크해도 (밀리)초 단위로 측정된 사이트 성능에 미치는 영향은 거의 또는 전혀 없습니다.
-
Google 글꼴을 (어떻게) 최적화해야 하나요?
-
Google 글꼴은 일반적으로 “렌더링 차단” 링크된 CSS 파일에 의해 로드됩니다. Google 글꼴을 사용하는 테마와 플러그인이 있는 경우 이러한 CSS 파일이 여러 개 있을 수 있습니다. 이제 오토옵티마이즈(버전 2.3부터)를 사용하면 Google 글꼴을 모두 제거하거나 로드되는 방식을 최적화하여 Google 글꼴의 영향을 줄일 수 있습니다. 두 가지 최적화 방식이 있는데, 첫 번째는 “결합 및 링크”로, Google 글꼴에 대한 모든 요청을 하나의 요청으로 대체하여 렌더링 차단은 계속되지만 글꼴을 즉시 로드할 수 있습니다(페이지가 로드되는 동안 글꼴이 변경되지 않음). 대안으로 JavaScript를 사용하여 렌더링 차단이 아닌 방식으로 글꼴을 로드하는 ‘결합 및 비동기 로드’를 사용할 수 있지만 ‘스타일이 지정되지 않은 텍스트의 플래시’가 발생할 수 있습니다.
-
“미리 연결”을 사용해야 하나요?
-
사전 연결은 브라우저(지원하는 경우)에 연결이 즉시 필요하지 않더라도 특정 도메인에 연결하도록 지시하는 다소 고급 기능입니다. 이 기능은 예를 들어 타사 리소스가 HTTPS에 미치는 영향을 줄이기 위해 사용할 수 있습니다(DNS 요청, TCP 연결 및 SSL/TLS 협상이 조기에 실행되므로). 너무 많은 도메인에 사전 연결하면 역효과가 날 수 있으므로 주의해서 사용하세요.
-
언제 JS를 비동기화할 수 있나요?
-
제외되었거나 다른 곳에서 호스팅되어 오토옵티마이즈되지 않는 JavaScript 파일은 일반적으로 렌더링이 차단됩니다. 쉼표로 구분된 “async JS” 필드에 이러한 파일을 추가하면 오토옵티마이즈는 비동기 플래그를 추가하여 브라우저가 해당 파일을 비동기적으로 로드하도록 합니다(즉, 렌더링 차단이 되지 않음). 그러나 이 경우 사이트(페이지)가 손상될 수 있습니다. 예를 들어 “js/jquery/jquery.min.js”를 비동기화하면 “jQuery가 정의되지 않았습니다”라는 오류가 발생할 가능성이 높습니다. 주의해서 사용하세요.
-
이미지 최적화는 어떻게 작동하나요?
-
이미지 최적화가 켜져 있으면 오토옵티마이즈는 이미지 태그와 내 도메인에서 로드된 CSS 파일에서 png, gif, jpeg(.jpg) 파일을 찾아서 해당 이미지의 소스(소스)를 ShortPixel CDN으로 변경합니다. 중요: 이 기능은 공개적으로 사용 가능한 이미지에 대해서만 작동하며, 그렇지 않으면 이미지 최적화 프록시가 이미지를 가져와 최적화할 수 없으므로 방화벽이나 프록시, 비밀번호 보호 또는 핫링크 방지 기능을 사용하면 이미지 최적화가 중단될 수 있습니다.
-
인트라넷/보호된 사이트에 이미지 최적화를 사용할 수 있나요?
-
아니요, 이미지 최적화는 외부 이미지 최적화 서비스가 사이트에서 원본 이미지를 가져와서 최적화한 후 CDN에 저장하는 기능에 따라 달라집니다. 익명 방문자가 이미지를 다운로드할 수 없는 경우(방화벽/프록시/비밀번호 보호/핫링크 보호로 인해) 이미지 최적화가 작동하지 않습니다.
-
이미지 최적화에 대한 자세한 정보는 어디서 얻을 수 있나요?
-
쇼트픽셀의 FAQ를 살펴보세요.
-
페이지 캐시 퍼지를 수신하는 AO를 비활성화할 수 있나요?
-
AO 2.4부터 AO는 자체 캐시를 지우기 위해 페이지 캐시 퍼지를 “청취”합니다. 이 필터를 사용하여 이 동작을 비활성화할 수 있습니다;
add_filter('autoptimize_filter_main_hookpagecachepurge','__return_false');
-
최적화 후 일부 아스키가 아닌 문자가 손실됨
-
기본적으로 AO는 멀티바이트에 안전하지 않은 문자열 메서드를 사용하지만 PHP에 mbstring 확장자가 있는 경우 이 필터를 사용하여 멀티바이트에 안전한 문자열 함수를 활성화할 수 있습니다;
add_filter('autoptimize_filter_main_use_mbstring', '__return_true');
-
중요 CSS가 작동하지 않습니다.
-
(레거시) ‘전원 켜기’에 대한 FAQ를 여기에서 확인하세요(이 정보는 추후 이 FAQ에 통합될 예정입니다).
-
오토옵티마이즈 2.7 이상을 사용 중인데도 크리티컬 CSS 파워업이 필요한가요?
-
아니요, 이제 모든 기능(및 많은 수정/개선 사항)이 오토옵티마이즈 기능에 포함되어 있으므로 더 이상 중요 CSS 파워업이 필요하지 않습니다.
-
404 폴백 활성화는 어떤 기능을 하나요? 이것이 왜 필요한가요?
-
오토옵티마이즈 캐시 집계 및 최적화된 CSS/ JS 및 해당 캐시된 파일에 대한 링크는 페이지 캐시(플러그인, 호스트 수준, 타사, Google 캐시, 브라우저에 있을 수 있음)에 저장되는 HTML에 저장됩니다. 그 사이(캐시가 지워진 경우) 제거된 오토옵티마이즈 CSS/JS로 연결되는 HTML이 페이지 캐시에 있는 경우 CSS 또는 JS를 찾을 수 없으므로 캐시에서 페이지가 예상대로 보이지 않거나 작동하지 않습니다(404 오류).
이 설정은 “폴백” CSS 또는 JS를 제공하는 것을 방지하는 데 목적이 있습니다. 폴백 파일은 캐시가 비워진 후 생성된 첫 번째 오토옵티마이즈 CSS 및 JS 파일의 복사본이므로 홈페이지를 기반으로 합니다. 즉, 다른 페이지에 100% 적용되지는 않지만 적어도 누락된 CSS/JS의 영향은 (종종 상당히) 줄어들게 됩니다.
이 옵션을 활성화하면 오토옵티마이즈는 (Apache에서 사용하는) .htaccess에
ErrorDocument 404
를 추가하고 워드프레스에서 처리하는 404를 캡처하기 위해 워드프레스 코어template_redirect
에도 연결합니다. NGINX를 사용하는 경우 아래와 같은 방법이 효과가 있습니다(저는 NGINX 전문가는 아니지만 저에게는 효과가 있습니다);location ~* /wp-content/cache/autoptimize/.*\.(js|css)$ { try_files $uri $uri/ /wp-content/autoptimize_404_handler.php; }
그리고 이것은 좋은 대안적 접근 방식입니다(fboylovesyou에서 제공);
location ~* /wp-content/cache/autoptimize/.*\.(css)$ { try_files $uri $uri/ /wp-content/cache/autoptimize/css/autoptimize_fallback.css; } location ~* /wp-content/cache/autoptimize/.*\.(js)$ { try_files $uri $uri/ /wp-content/cache/autoptimize/js/autoptimize_fallback.js; }
-
오토옵티마이즈에는 어떤 오픈 소스 소프트웨어/프로젝트가 사용되나요?
-
다음과 같은 훌륭한 오픈 소스 프로젝트가 어떤 형태로든 오토옵티마이즈에 사용됩니다:
- 미스터 클레이의 미니파이 JS 및 HTML 축소용
- YUI CSS 압축기 PHP 포트 CSS 축소를 위한 기능
- 지연 로드를 위한 Lazysizes
- 관리자 공지사항 해지에서 관리 화면의 공지사항을 확인합니다.
- 플러그인 업데이트 검사기에서 베타 버전에 대한 깃허브의 자동 업데이트를 확인하세요.
- LoadCSS로 전체 CSS를 연기합니다.
- jQuery 쿠키로 “futtta about” 카테고리 선택 항목을 쿠키에 저장합니다.
- 중요한 CSS 규칙/작업 표시를 위한 jQuery tablesorter 사용
- 메인 설정 페이지의 오른쪽 상단에 있는 미니 슬라이더에 대한 jQuery 언슬라이더(리포지토리가 사라짐)
- 자바스크립트-md5 중요한 CSS 규칙 편집용
- 고급 JS 디퍼링을 위한 스피드 부스터 팩
- Google 글꼴 제거 비활성화에서 추가 Google 글꼴 제거를 확인하세요.
-
어디에서 도움을 받을 수 있나요?
-
wordpress.org 지원 포럼에서 도움을 받을 수 있습니다. 오토옵티마이즈 설정으로 문제를 해결할 수 없고 실제로 코드에서 버그를 발견했다고 100% 확신하는 경우 GitHub에서 이슈를 만들 수 있습니다. 프리미엄 지원이 필요한 경우 오토옵티마이즈 프로 지원 및 웹 성능 최적화 서비스를 확인하세요.
-
오토옵티마이즈를 해제하려면 어떻게 해야 하나요?
-
- 플러그인 비활성화(옵션과 캐시가 제거됨)
- 플러그인 제거
- 오토옵티마이즈 CSS/JS를 참조하는 페이지가 여전히 있을 수 있는 캐시(예: WP 슈퍼 캐시 같은 페이지 캐싱 플러그인)를 모두 지웁니다.
-
어떻게 돕거나 기여할 수 있나요?
-
Github에서 오토옵티마이즈를 포크하고 코딩하세요.
후기
기여자 & 개발자
“오토옵티마이즈”(은)는 오픈 소스 소프트웨어입니다. 다음의 사람들이 이 플러그인에 기여하였습니다.
기여자변경이력
3.1.13
- 여러 가지 사소한 변경/개선/버그 수정은 GitHub 커밋 로그를 참조하세요.
3.1.12
- 이미지 최적화: 파비콘 정규식 개선 사항
- 자바스크립트 최적화: 최신 버전의 jsmin.php 통합
- 중요 CSS: 차단 목록 개선(작업 대기열에 추가해서는 안 되는 URL/경로)
- 기타 사소한 변경 사항/개선 사항/필터에 대해서는 GitHub 커밋 로그를 참조하세요.
3.1.11
- 코드 품질 개선에 대해서는 GitHub 커밋 로그를 참조하세요.
- 기타 사소한 변경 사항/개선 사항/필터에 대해서는 GitHub 커밋 로그를 참조하세요.
3.1.10
- 개선: “집계하지 않고 지연” 및 “또한 인라인 JS도 지연”을 켜면 비동기 플래그가 있는 JS도 지연하여 인라인 JS가 실행되기 전에 (이전) 비동기화된 JS가 실행되지 않도록 합니다.
- 개선: “호환성 로직”에서 기본값을 비활성화하는 옵션을 표시합니다.
- 오토옵티마이즈에서 이미지 최적화가 꺼져 있어도 JetPack 이미지 최적화가 작동하지 않던 3.1.9의 회귀 문제를 수정했습니다.
- API: 중요 CSS에 몇 가지 추가 후크를 추가하여 다른 도구(및 AOPro)가 중요 CSS 규칙의 변경 사항에 따라 작동할 수 있도록 합니다.
- 기타 사소한 변경 사항/개선 사항/필터에 대해서는 GitHub 커밋 로그를 참조하세요.
3.1.9
- 개선: 플러그인 활성화 시 JS, CSS 및 HTML 최적화 활성화(아담 실버스타인(Google의 개발자 관계 엔지니어)의 도움)
- 개선: 비동기 JS도 지연(실행 순서가 그대로 유지되도록 하기 위해, 비동기 JS가 의존할 수 있는 지연된 인라인 JS보다 먼저 실행되어서는 안 됨).
- 개선: fetchpriority 속성이 높음으로 설정된 이미지의 경우 지연 로드에서 제외(6.3 이후 워드프레스 코어에서 수행).
- 버그픽스: 경우에 따라 브라우저 문제를 일으켰던 CSS 텍스트 영역(스크롤 위 CSS/ 중요 CSS)에서 맞춤법 검사를 비활성화합니다.
- 오토옵티마이즈 프로를 설명하는 탭을 추가하세요.
- 워드프레스 6.4(베타 3)에서 작동 확인
- 기타 사소한 변경 사항/개선 사항/필터에 대해서는 GitHub 커밋 로그를 참조하세요.
3.1.8.1
- php 오류에 대한 긴급 수정, 죄송합니다!
3.1.8
- 이미지: 배경 이미지에 대한 최적화 로직 개선
- 중요 CSS: is_singular가 아닌 경우 custom_post 규칙을 트리거하지 않음 + 규칙 선택에 대한 디버그 로깅 추가
- 기타 사소한 변경 사항/개선 사항/필터에 대해서는 GitHub 커밋 로그를 참조하세요.
3.1.7
- 보안: 중요한 CSS 규칙의 유효성 검사(가져오기) 및 살균(출력)을 개선하여 WP Scan Security에서 보고한 중간 심각도 관리자+ 저장된 교차 사이트 스크립팅 취약점을 수정합니다.
3.1.6
- CSS: 링크 태그에서 후행 슬래시 제거로 더 많은 W3 HTML 유효성 검사 지원
- 추가: “워드프레스 블록 CSS 제거” 옵션이 활성화된 경우 우커머스 블록 CSS도 대기열에 추가합니다.
- imgopt: 집계되지 않은 인라인 CSS에도 작동
- imgopt: 쇼트픽셀이 사이트에 도달할 수 없는 경우 사용자에게 경고하는 로직 추가
- 백엔드: AO 툴바 JS/CSS도 마침내 축소되었습니다.
- 로그인 페이지의 최적화를 명시적으로 비활성화합니다.
- 기타 사소한 변경 사항/개선 사항/필터에 대해서는 GitHub 커밋 로그를 참조하세요.
3.1.5
- 로버트 에렌라이트너의 JSMin 개선(로버트에게 큰 감사를 드립니다!).
- 더 이상 jquery.js를 축소된 것으로 간주하지 않습니다(워드프레스는 이제 기본적으로 jquery.min.js를 사용하며 jquery.js는 축소되지 않은 버전입니다).
- 오토옵티마이즈에서 “정의되지 않은 배열 키 ” PHP 오류 수정CriticalCSSCron.php.
- 기타 사소한 변경 사항/개선 사항/필터에 대해서는 GitHub 커밋 로그를 참조하세요.
3.1.4
- 개선: 모든 CSS를 인라인 처리할 때 SEO 메타태그(대부분의 SEO 플러그인이 목록의 마지막 항목으로 추가하는 ld+json 스크립트 태그 바로 앞) 뒤에 인라인 처리하세요.
- 이미지 옵트: 데이터-배경 및 데이터-망막 속성으로 설정된 이미지도 최적화(+ 필터로 다른 속성을 쉽게 추가할 수 있음)
- CSS 옵션: AO가 CSS에서 계산식 축소를 건너뛰도록 필터링(드물게 CSS 축소기가 이를 깨뜨리는 경우가 있으므로)
- 다른 여러 필터 추가
- 기타 사소한 변경 사항/개선 사항/필터는 GitHub 커밋 로그를 참조하세요.
3.1.3
- 메타박스 LCP 이미지 프리로드에 대한 여러 수정 사항(디버깅을 위한 스테이징 환경을 제공한 Kishorchand에게 감사드립니다.)
- Revslider 호환성 수정(모자 팁 신고 및 도움을 주신 Waqar Ahmed ).
- 로컬 호스트 설치 시 이미지 최적화 또는 CSS 시도가 더 이상 발생하지 않으며 로컬 호스트가 감지되면 해당 사실을 알려줍니다.
- 기타 사소한 변경 사항/개선 사항/필터는 GitHub 커밋 로그를 참조하세요.
3.1.2
- 구글 글꼴: 더 많은 제거 로직
- 404 폴백 버그 수정 (발견 및보고를위한 Asif에 대한 모자 팁)
- 기타 사소한 변경 사항/개선 사항/필터는 GitHub 커밋 로그를 참조하세요.
3.1.1.1
- AO 설정 페이지에서 심각한 오류를 유발하는 JetFormBuilder(및 다른 크로코블록 플러그인?)와의 자동 로드 충돌에 대한 빠른 해결 방법.
3.1.1
- 이미지: 이미지를 최적화하고 지연 로딩이 켜져 있는 경우 기본적으로 LQIP(저품질 이미지 플레이스홀더)를 더 이상 설정하지 않습니다(이유: 보기에는 좋지만 성능에 약간의 페널티가 따릅니다). 이 기능은
autoptimize_filter_imgopt_lazyload_dolqip
필터에 true를 반환하여 다시 활성화할 수 있습니다. - 보안 : 중요한 CSS 설정 페이지에 대한 추가 개선 (다시 한 번 WPScan 보안의 큰 도움으로).
- 기타 사소한 변경 사항/개선 사항/필터에 대해서는 GitHub 커밋 로그를 참조하세요.
3.1.0
- 새로운 HTML 하위 옵션: “인라인 CSS/ JS 최소화”(기본적으로 꺼짐).
- 새로운 기타 옵션: “호환성 로직 실행 안 함” 플래그가 영구적으로 제거되도록 허용합니다(이 플래그는 AO 2.9.*에서 AO 3.0.*으로 업그레이드하는 사용자를 위해 설정되었지만 어쨌든 작동한다는 가정 하에 설정되었습니다).
- 보안 : WPScan Security에서보고 한대로 인증 된 교차 사이트 스크립팅 문제를 해결하기 위해 중요한 CSS 설정 페이지가 개선되었습니다.
- 버그픽스: 매우 큰 인라인 JS 청크의 “인라인 JS 지연”은 서버 오류(실제로 PCRE 충돌)를 유발할 수 있으므로 문자열이 200000자 이상인 경우 지연하지 않습니다(필터 사용 가능).
- 기타 사소한 변경/개선/후크에 대해서는 GitHub 커밋 로그에서 확인할 수 있습니다.
3.0.4
- 게시물/페이지 편집 화면에서 “정의되지 않은 배열 키 ao_post_preload” 수정
- 지연로드가 활성화되지 않은 경우 이미지 최적화가
<img
태그가 포함된 인라인 JS를 변경하는 문제 수정 - 설문조사 종료 개선
- 워드프레스 6.0에서 작동 확인
3.0.3
- 지연로드가 켜져 있고 페이지별/글별 설정이 꺼져 있을 때 이를 구성하지 않은 상태에서 이미지가 미리 로드되는 문제를 수정했습니다.
- 중요 CSS 일정을 항상 알고 있는지 확인합니다.
- 집계되지 않은 JS를 지연시킬 때는 최적화 제외에 src URL만 고려하지 말고 전체 스크립트 태그를 고려하세요.
3.0.2
- 자동 “인라인 CSS/ JS 축소” 롤백은 예상보다 많은 문제를 일으켰으나 나중에 별도의 기본값 해제 옵션으로 돌아올 예정이며 이제 간단한 필터로 활성화할 수 있습니다:
add_filter( 'autoptimize_html_minify_inline_js_css', '__return_true');
. - autoptimizeVersionUpdatesHandler.php에서 “정의되지 않은 메서드 autoptimizeOptionWrapper::delete_option()”에 대한 호출 수정.
3.0.1
- 템플릿을 깨는 텍스트/템플릿 유형(예: 닌자 양식)이 있는 인라인 스크립트 축소 수정, @bobsled에 팁 제공.
- bobsled의 도움으로 fontawesome CSS가 다시 이스케이프되어 깨졌던 CSS 파일 가져오기 회귀 문제를 수정했습니다.
3.0.0
- 신규 설치에 대한 근본적인 변경: 기본적으로 오토옵티마이즈는 더 이상 JS/CSS를 집계하지 않습니다(HTTP/2는 보편화되어 있으며 특히 인라인 JS/CSS 및 종속성을 집계하지 않는 데에는 다른 장점이 있습니다).
- 신규: 수동으로 중요한 CSS 규칙을 만드는 데 더 이상 API가 필요하지 않습니다.
- new: “추가” 탭에 “워드프레스 블록 CSS 제거” 옵션을 추가하여 블록 및 전역 스타일(및 SVG)을 제거할 수 있습니다.
- 신규: 제외되지 않더라도 jQuery가 필요한 비집계 인라인 JS(=jQuery 자동 제외) 및 JS가 많은 워드프레스 블록(구텐베르크)에 대한 “엘리멘터로 편집”, “회전 슬라이더” 호환성 로직이 추가되었습니다.
- 새로운 기능: 페이지/글 단위로 이미지를 미리 로드하도록 구성하여 LCP를 개선합니다.
- 개선: 이제 인라인 JS에 nonce 또는 post_id가 포함된 경우에도 인라인 지연이 허용됩니다.
- 개선: 중요 CSS 탭의 설정 내보내기/가져오기는 이제 중요 CSS 설정뿐만 아니라 모든 오토옵티마이즈 설정을 고려합니다.
- 기술적 개선: 모든 중요 CSS 클래스가 리팩터링되어 전역 변수의 사용이 제거되었습니다.
- 기술적 개선: PHP 버전 7.2~8.1용 트래비스-CI에서 자동화된 단위 테스트.
- 수정: Divi가 오토옵티마이즈 캐시를 지우지 못하게 하는 것은 매우 비생산적입니다.
- 기타 소규모 수정/개선 사항은 GitHub 커밋 로그에서 확인하세요.