README는 이 사용하여 현재 수행하는 방법에 대한 안내가 AdvAgg의 7.x의-2.31 + 버전 . 또한 고성능 그룹에서이 위키 페이지를 참조하십시오 . 대부분의 사이트는 https://developers.google.com/speed/pagespeed/insights/ 에서 완벽한 100/100 점수를 얻을 수 있습니다 . 아래 AdvAgg를 새로 설치하기 위해이를 달성하는 방법에 대한 지침.
변경 사항이 사이트를 손상시키지 않도록 모든 섹션 후에 사이트를 확인하십시오. AdvAgg 수정 자의 변경 사항은 일반적으로 가장 문제가 많지만 가장 큰 개선 사항을 제공합니다.
고급 CSS / JS 집계
로 이동 admin/config/development/performance/advagg
- "권장 (최적화 된) 설정 사용"을 선택하십시오.
AdvAgg 압축 자바 스크립트
활성화되어 있지 않으면 AdvAgg Compress Javascript를 설치하고
admin/config/development/performance/advagg/js-compress
- 가능한 경우 JSMin을 선택하십시오. 그렇지 않으면 JSMin +를 선택하십시오
- 모든 항목 제거 (가장 작은 파일)
- 이러한 파일을 처리하려면 배치 압축 링크를 클릭하십시오.
AdvAgg 비동기 글꼴 로더
활성화되지 않은 경우 AdvAgg Async Font Loader를 설치하고
admin/config/development/performance/advagg/font
- 집계에 포함 된 로컬 파일 (버전 : XXX)을 선택하십시오. 이 옵션을 사용할 수없는 경우 설치 방법에 대한 옵션 아래의 지시 사항을 따르십시오.
- "스타일이없는 텍스트 (FOUT)의 플래시가 한 번만 발생하도록 localStorage를 사용하십시오."
- "스타일이없는 텍스트 (FOUT)의 플래시가 한 번만 발생하도록 쿠키를 설정하십시오."
AdvAgg 번 들러
활성화되지 않은 경우 AdvAgg Bundler를 설치하고
admin/config/development/performance/advagg/bundler
HTTP / 2.0 설정
- "페이지 당 CSS 번들 수"에서 25를 선택하십시오.
- "페이지 당 JS 번들 수"에서 25를 선택하십시오.
- "그룹화 로직"에서 "파일 크기"를 선택하십시오.
HTTP / 1.1 설정 (기본값)
- "페이지 당 CSS 번들 수"에서 2를 선택하십시오.
- "페이지 당 JS 번들 수"에서 5를 선택하십시오.
- "그룹화 로직"에서 "파일 크기"를 선택하십시오.
25 개 번들 대 2 및 5는 브라우저 캐싱과 관련이 있습니다. 더 많은 파일은 브라우저가 캐시에 해당 콤보를 가질 가능성이 높지만 더 많은 파일은 HTTP 1.1에서 더 많은 연결이 설정되어 열려 있음을 의미합니다. 이 번호는 새로운 연결을 기다리지 않으므로 CSS에 2를 사용하십시오. 대부분의 브라우저의 동시 연결 제한이 6이므로 JS는 5입니다.이 번들 수는 많은 테스트 후에 선택되었습니다. HTTP 2.0에는 하나의 스트리밍 연결이 있으며 여러 CSS 및 JS 파일에 대한 패널티는 거의 없습니다. 따라서 브라우저 캐시를 최적화하는 것이 최선의 선택입니다. 따라서 HTTP / 2.0을 제공 할 때 CSS와 JS에 25를 사용해야합니다.
AdvAgg 재배치
활성화되지 않은 경우 AdvAgg Relocate를 설치하고
admin/config/development/performance/advagg/relocate
- "권장 (최적화 된) 설정 사용"을 선택하십시오.
AdvAgg 수정 자
활성화되지 않은 경우 AdvAgg 수정자를 설치하고
admin/config/development/performance/advagg/mod
- "권장 (최적화 된) 설정 사용"을 선택하십시오.
중요한 CSS 파일 생성
https://www.sitelocity.com/critical-path-css-generator로 이동하여 중요한 CSS에 필요한만큼의 방문 페이지를 입력 하십시오 . 톱 10은 일반적으로 좋은 출발입니다. Google 웹 로그 분석이있는 경우 상단 방문 페이지를 찾는 방법 ( https://developers.google.com/analytics/devguides/reporting/core/v3/common-queries#top-landing-pages
또는 Piwik https) 을 보여줍니다 . //piwik.org/faq/how-to/faq_160/ . 어떤 페이지로 시작할지 모르는 경우 사이트 홈페이지를 수행하십시오. CSS를 생성하기 위해 이것을 https://chrome.google.com/webstore/detail/critical-style-snapshot/gkoeffcejdhhojognlonafnijfkcepob?hl=ko
아래의 파일 이름과 경로는 "bootstrap"테마에 대한 것입니다. 그들은 모두 시작합니다 sites/all/themes/bootstrap/critical-css/; 테마에서 critical-css/디렉토리를 작성하십시오 . 다음 디렉토리는 사용자를 기반으로합니다. anonymous/, all/또는 authenticated/사용할 수 있습니다.
다음 디렉토리는 urls/또는 일 수 있습니다 type/. 보고 urls/; front는 프론트 페이지의 특별한 경우이며, 다른 모든 경로는 current_path ()를 디렉토리에 .css추가 하고 파일 이름을 끝에 추가합니다. https://api.drupal.org/api/drupal/includes%21path.inc/function/current_path/7.x를 참조 하십시오
type/이것을 보면 노드 유형에 대한 특별한 경우입니다. 기계 이름을 사용하여 .css끝에 추가 하십시오. 이 유형의 모든 노드는이 중요한 CSS 파일을 적용하고 인라인합니다. 아래는 이것이 어떻게 작동하는지 보여주는 몇 가지 예입니다.
"프론트"페이지의 유효한 파일 위치 예 :
sites/all/themes/bootstrap/critical-css/anonymous/urls/front.css
"node / 1"current_path () 페이지의 유효한 파일 위치 예 :
sites/all/themes/bootstrap/critical-css/anonymous/urls/node/1.css
"page"노드 유형에 유효한 파일 위치 예 :
sites/all/themes/bootstrap/critical-css/anonymous/type/page.css
:이 CSS 파일 fourkitchens을 생성하는 자동화 된 방법의 일종을 원하는 경우에 그 설정하는 방법에 대한 좋은 기사가
https://fourword.fourkitchens.com/article/use-grunt-and-advagg-inline-critical-css을 -drupal-7- 테마