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

나는을 실행 중이며 홈페이지에서 Magento 1.9와 함께 제공 magento 1.9되는 RWD slider것을 사용하고 있습니다.

Google PageSpeed은 이것을 좋아하지 않으며 말합니다.

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

슬라이더를 호출하는이 자바 스크립트 파일에 대해 어떻게 할 수 있습니까?

http://www.MYDOMAIN/media/js/sdhfksjfhdsjvbskj8e4w.js

Magento-1.9.x에서 렌더 차단 JavaScript 문제를 다음과 같이 해결합니다.

<script src="filename.js"></script>
Replace with Following:  
<script src="filename.js" defer></script>
<script src="filename.js" async="async"></script>

또는

<action method="addJs"><script>prototype/prototype.js</script></action>  
Replace with Following:  
<action method="addJs"><script>prototype/prototype.js</script><params>defer</params></action>  
<action method="addJs"><script>prototype/prototype.js</script><params>async</params></action>

힌트 : 기본 테마를 찾을 수 있습니다

line : 38에 대한 app \ design \ frontend \ base \ default \ layout \ page.xml :

활성 테마를 사용하는 경우 app \ design \ frontend \ base \ default \ layout \ page.xml과 같이 rwd에 대해 다른 경로 ex

"Mohan Gs"에 설명 된 기술은 여기서 작동하지 않습니다.

js 경로 /media/js/때문에 js merging 을 사용하는 것 같습니다 . 즉, 모든 js 파일은 xml 표준 방식으로 추가됩니다.

• <action method="addJs">...
• <action method="addItem"><type>js</type>..

에 큰 하나로 병합됩니다 /media/js/<hash>.js.

마 젠토 코어 JS 파일 추가

• <action method="addJs"><script>prototype/prototype.js</script></action>

이 방법도.

인라인 js를 사용하는 템플릿도 많으며, head js 파일로 정의 된 객체 / 함수에 따라 다릅니다.

이 시점에서 head js 파일 만 맨 아래로 이동하는 것만으로는 충분하지 않습니다. 헤드 js 이후 및 이전 </body>에도 모든 인라인 js 선언을 이동해야합니다 .

대부분의 경우 템플릿 특정 변수를 사용하므로 인라인 j를 템플릿과 분리 할 수 ​​없습니다.

최종 HTML을 파싱하는 것과 같은 일반적인 방법 만 사용 하고이 것들을 올바른 순서로 함께 이동할 수 있습니다.

확장 프로그램 Pagespeed를 살펴보십시오 .

이 코드는 전체 문서가로드 될 때까지 기다렸다가 외부 파일을로드한다고 말합니다 defer.js.

<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "defer.js";
        document.body.appendChild(element);
    }
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>

다음 단계를 따라야합니다.

1. 위 코드를 복사하십시오.

2. </body>HTML 파일의 맨 아래 근처에있는 태그 바로 앞에 HTML에 코드를 붙여 넣습니다 .

3. defer.js외부 JS 파일의 이름으로 변경 하십시오.

4. 파일 경로가 올바른지 확인하십시오. 예 : 방금 입력 defer.js한 경우 파일 defer.js은 HTML 파일과 동일한 폴더에 있어야합니다.

자세한 내용은 이 기사를 참조하십시오.

https://github.com/mediarox/pagespeed 를 해결하기위한 오픈 소스 확장 프로그램입니다.

현재 기능

• 모든 자바 스크립트 태그 (헤드 및 인라인)를 맨 아래로 이동하십시오. ({stripped_html} {js})
• 조건부 js 단위 포함 ({multiple js tags})
• "인라인"js 태그를 포함한 외부 js 태그 포함
• 모든 CSS 태그 (헤드 및 인라인)를 맨 아래로 이동하십시오. ({stripped_html} {css})
• 조건부 CSS 단위 포함 ({multiple css tags})
• 외부 CSS 태그 포함
• 인라인 CSS 태그 포함

적합성

Magento 1.5.x에서 Magento 1.9.x로.

백엔드 구성

모든 모듈 (Pagespeed_Js, Pagespeed_Css)은 기본적으로 비활성화되어 있습니다.

구성 경로 : 시스템> 구성> 고급> Pagespeed

어떻게 작동합니까?

이벤트 "controller_front_send_response_before"에서 최종 HTML 스트림을 간단히 구문 분석하십시오.