WordPress : deffered jQuery를 실행 한 후 인라인 JS를 실행합니다.

Question

Google 페이지 인사이트 제안을 따르려고하면 "JS render block"권장 사항이 있으며 jQuery 주 파일과 관련이 있습니다.

내 사이트는 일부 플러그인과 함께 WordPress를 사용합니다. 플러그인 중 하나가 JS 인라인을 버립니다. 따라서 jQuery을 바닥 글에로드하거나 "지연"모드를 사용하여로드하면 인라인 코드가 실행되면 jQuery is not defined이됩니다.

필자는 jQuery 주 파일이 문서 끝 부분에서 실행 된 후 모든 인라인 스크립트를 '잡아'지연시키는 글로벌 솔루션을 찾으려고했습니다.

나는 저에게 큰 도움이되는 해결책을 썼습니다. 그것은 내 구체적인 상황에 대한 매우 직선적 인 솔루션이지만, 나는 이것을 the_content 또는 위젯 출력에 대한 필터로 만들지 못했습니다. 이 솔루션을 글로벌 솔루션으로 만들고 싶습니다. 따라서 JS가 어딘가에서 실행되는 것에 대해 걱정할 필요가 없습니다.

아이디어를 얻는 방법에 대한 아이디어가 있으십니까? 여기에 단축 코드를 통해 실행이 특정 사건에 대한 지금까지 내 코드 :

/* Get shortcode HTML */ 
$widget_shortcode = do_shortcode($shortcode); 

/* Take out all scripts into an array */ 
$delayed_scripts = array(); 
preg_match_all('#<script(.*?)</script>#is', $widget_shortcode, $match); 
foreach ($match as $val){ 
    $delayed_script = '<script '.$val[0].'</script>'; 
    array_push($delayed_scripts, $delayed_script); 
} 

/* Remove all scripts from HTML */ 
$widget_shortcode = preg_replace('#<script(.*?)</script>#is', '', $widget_shortcode); 

/* Echo filtered HTML */ 
echo $widget_shortcode; 

그리고 바로 닫는 </body> 태그 앞에는 :

foreach ($delayed_scripts as $script) { 
    echo $delayed_script; 
} 

Answer 1

나는이 같은 문제를 매우 열심히 일했다. 여기서 고려해야 할 몇 가지 사항이 있습니다. 이 문제는 모든 플러그인이 Wordpress의 스크립트를 대기열에 넣었을 때 쉽습니다. 불행히도 많은 플러그인이 스크립트를 반향하거나 표준 include를 사용하는 것은 쉽지 않습니다.

일부 의견 작성자는 모든 인라인 스크립트를 포착하려면 출력 버퍼에서 스크립트 태그를 검색하는 것 외에는 선택의 여지가 없으므로 플러그인이 스크립트를 에코하면 그 후에 WordPress에서 수행 할 수있는 작업이 없기 때문에 버퍼로 보내진다.

preg 문을 사용하고 전체 HTML 문서를 검색 한 다음 문자열을 조작하는 것은 머리에 jQuery로드를 두는 것보다 훨씬 비쌉니다. html 문서에 대한 서버 응답 시간이 늘어날 것이고이 대기 시간은 렌더링이 발생하지 않고 시간이 있기 때문에 사용자가 빈 화면으로 앉아 있기 때문에 나쁘다. 말할 것도없이 jQuery를 바닥 글로 이동한다는 것은 바닥 글이 파싱 될 때까지 작동하지 않는다는 것을 의미합니다. 이것은 Google이 분석 코드를 삽입하는 것과 동일한 이유입니다. 분석 코드가 구문 분석 될 수 있기 전에 사용자가 멀리 탐색하면 어떻게 될까요?

Google 페이지 속도는 가이드가 아니며, 규칙입니다. 완벽한 점수를 얻으려고 벽에 머리를 부딪치지 마십시오.