it-swarm-ko.tech

스크롤없이 볼 수있는 컨텐츠에서 렌더링 차단 JavaScript 및 CSS 제거

Drupal 7 사이트를 구축하고 있습니다. 이들은 내가 사용하는 모듈 중 일부입니다 : Adaptivetheme (테마),보기 및 컨텐츠 창, 패널, 미니 패널, 모든 패널, 페이지 관리자, 메뉴를위한 Superfish , 추가, 선택 (드롭 다운).

내 사이트 성능을 개선하고 CSS 및 JS 파일을 처리하기 위해 Advagg module 을 사용하고 있습니다.

Google의 Pagespeed test 를 실행할 때 "수정해야 함"이라는 오류가 나타납니다.

접지에서 렌더링 차단 JavaScript 및 CSS 제거
content 페이지에 6 개의 차단 스크립트 리소스와 8 개의 차단 CSS 리소스가 있습니다. 이로 인해 페이지 렌더링이 지연됩니다.
다음 리소스가로드 될 때까지 기다리지 않고 페이지에서 볼 수없는 콘텐츠는 렌더링 할 수 없습니다. 차단 리소스를 지연 시키거나 비동기 적으로로드하거나 HTML에서 해당 리소스의 중요한 부분을 직접 인라인하십시오.

이것은 Google이 제공하는 정보입니다.

Advagg 모듈 또는 Drupal 코어의 설정을 변경하고이 문제를 해결할 수있는 방법이 있습니까?

이 목표를 달성 할 수있는 다른 방법이 있습니까?

pdate-mikeytown2에 따라 변경 사항을 구현 한 후 Google의 Pagespeed 테스트에 다음 메시지가 표시됩니다.

접지 된 컨텐츠에서 렌더링 차단 JavaScript 및 CSS 제거
이 페이지에는 6 개의 차단 스크립트 리소스와 4 개의 차단 CSS 리소스가 있습니다. 이로 인해 페이지 렌더링이 지연됩니다.
다음 리소스가로드 될 때까지 기다리지 않고 페이지에서 볼 수없는 콘텐츠는 렌더링 할 수 없습니다. 차단 리소스를 지연 시키거나 비동기 적으로로드하거나 HTML에서 해당 리소스의 중요한 부분을 직접 인라인하십시오.

30
EB84

README 에는 현재 7.x-2.31 + AdvAgg 버전 을 사용하여이를 수행하는 방법에 대한 지침이 있습니다. 고성능 그룹의 위키 페이지 도 참조하십시오. 대부분의 사이트는 https://developers.google.com/speed/pagespeed/insights/ 에서 완벽한 100/100 점수를 얻을 수 있습니다. 아래 AdvAgg를 새로 설치하기 위해이를 달성하는 방법에 대한 지침.

변경 사항이 사이트를 손상시키지 않도록 모든 섹션 후에 사이트를 확인하십시오. AdvAgg Modifier의 변경 사항은 일반적으로 가장 문제가 많지만 가장 큰 개선 사항을 제공합니다.

이동 admin/config/development/performance/advagg

  • "권장 (최적화 된) 설정 사용"을 선택하십시오.

활성화되지 않은 경우 AdvAgg Compress Javascript를 설치하고 admin/config/development/performance/advagg/js-compress

  • 가능한 경우 JSMin을 선택하십시오. 그렇지 않으면 JSMin +를 선택하십시오
  • 모든 항목 제거 (가장 작은 파일)
  • 이러한 파일을 처리하려면 배치 압축 링크를 클릭하십시오.

활성화되어 있지 않으면 AdvAgg Async Font Loader를 설치하고 admin/config/development/performance/advagg/font

  • 집계에 포함 된 로컬 파일 (버전 : X.X.X)을 선택하십시오. 이 옵션을 사용할 수없는 경우 설치 방법에 대한 옵션 바로 아래의 지시 사항을 따르십시오.
  • "스타일이없는 텍스트 (FOUT)의 플래시가 한 번만 발생하도록 localStorage를 사용하십시오."
  • "스타일이없는 텍스트 (FOUT)의 플래시가 한 번만 발생하도록 쿠키를 설정하십시오."

활성화되어 있지 않으면 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 Relocate를 사용하지 않으면 설치하고 admin/config/development/performance/advagg/relocate

  • "권장 (최적화 된) 설정 사용"을 선택하십시오.

활성화되지 않은 경우 AdvAgg 수정자를 설치하고 admin/config/development/performance/advagg/mod

  • "권장 (최적화 된) 설정 사용"을 선택하십시오.

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 파일을 적용하고 인라인합니다. 아래는 이것이 어떻게 작동하는지 보여주는 몇 가지 예입니다.

"front"페이지의 올바른 파일 위치 예 : 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-theme

43
mikeytown2

사전 구축 된 drupal 모듈을 사용하면 절대 높은 점수를 얻을 수 없습니다.이를 달성하는 유일한 방법은 google speed tool , 각각을 독립적으로 처리합니다.

매우 활발한 뉴스 사이트 에서 95를 달성하기 위해 수행 한 몇 가지 사항은,이 기사를 작성할 때 nytimes (현재는 그렇지 않습니다)보다 점수가 높습니다.

  • [blocking scripts] sharethis, facebook widgets, google plus 등과 같은 타사 스크립트의 실행이 지연되어 페이지가 완전히 렌더링 된 후에 만 ​​실행됩니다. 이를 위해서는 html.tpl.php 출력에 대한 간단한 문자열 대체가 필요하여 해당 스크립트를 잡아서 나중에 실행할 수 있도록 대기시켜야합니다.
  • [blocking scripts] html.tpl.php의 $ scripts 변수 (json_encode와 함께)를 자바 스크립트 변수에 저장하여 첫 페이지로드 후 실행되도록 대기시킵니다. 이것은 부자연 스럽지만 필요합니다. 일부 브라우저 관련 문제를 정리해야했습니다.
  • [blocking css] Keith Clark 's technique 와 비슷하지만 rel = "prefetch"를 사용하여 구현했습니다. 이것은 FOUC 을 풀어야 할 필요성을 소개합니다.
  • [최소화 및 압축] drupal 설치를 관리 할 수없는 혼란으로 만들지 않고 imagemagic, yui-compressor, pngoptim 등을 사용하여 이러한 규칙을 극복 할 수있는 배포 서버로 압축 및 축소를 외부화합니다. .
2
jacmkno