Wp-rocket: 최신 업데이트 후 종속성 스크립트가 지연되면 문의 양식 7에서 작동이 중지됩니다.

관련 티켓:

https://secure.helpscout.net/conversation/1437159796/242644/
https://secure.helpscout.net/conversation/1437431153/242713/

관련: https://secure.helpscout.net/conversation/1437701881/242861/
그러나 해결 방법에 대해 언급된 파일이 없습니다. 아직 확인 중입니다.

@wp-media/productrocket

나는 우리가 손질할 수 있는 두 가지 옵션이 있다고 생각합니다.

1. wp-includes/js/dist/(.*).js 패턴이 지연되는 것을 제외할 수 있습니다. 이러한 파일은 해당 기능이 페이지 자체에서 호출되는 라이브러리이기 때문입니다.
2. 내가 알아차린 것처럼 dist 디렉토리 내의 모든 파일은 wp. 사용하여 호출됩니다(i18n 내부의 _ 제외). DOMContentLoaded 이벤트 리스너에 포함하여 jquery 스크립트로 수행하십시오.

어떻게 생각하나요?

이것은 #2850 및 다음과 관련된 것으로 보입니다.
https://github.com/wp-media/wp-rocket/issues/2318

해결 방법 2번은 다른 스크립트가 wp. 사용하지 않는다고 가정하면 1이 해당 파일을 PageSpeed ​​Insights에서 렌더링 차단으로 플래그 지정하기 때문에 더 좋습니다.

@vmanthos @engahmeds3ed 솔루션 2번이 100% 작동하고 다른 문제를 촉발할 수 없다고 확신할 수 있습니까?

나는 @vmanthos 에 1번 솔루션이 이러한 파일을 렌더링 차단으로 플래그 지정하고 PSI 등급이 더 나

@vmanthos 중요한 점을 잊어 버렸습니다. JS 파일이 바닥글에 위치할 때까지는 렌더링 차단으로 간주되지 않습니다!

직접 시도하고 지연 없이 헤더에 JS 파일을 넣을 수 있습니다. 그러면 PSI에서 렌더링 차단으로 보고됩니다. defer 속성 없이 동일한 JS 파일을 바닥글에 넣으면 이 JS는 더 이상 PSI에서 렌더링 차단으로 보고되지 않습니다.

@GeekPress 해당 파일을 바닥글에 넣는 것을 의미하는 경우 인라인 스크립트 내부에서 해당 파일(함수/클래스)이 사용되는 것과 동일한 결과를 초래할 것이라고 생각합니다. 여기?

@engahmeds3ed 이 파일은 이미 바닥글에 로드되었습니다.

@GeekPress 좋은 캐치!
내 테스트 사이트에서 Contact Form 7로 시도해 보았지만 PSI는 파일에 플래그를 지정하지 않았습니다.

관련 티켓
https://secure.helpscout.net/conversation/1438795814/243070
https://secure.helpscout.net/conversation/1439134214/243130
https://secure.helpscout.net/conversation/1438701667/243053
https://secure.helpscout.net/conversation/1438623587/243038

따라서 option 1 는 유효합니까? 아니면 option 2 를 시도해야 합니까?

옵션 1은 유효하지만 모든 /dist/ 파일을 제외하는 정규식 없이도 가능합니다.

이 문제를 해결하기 위한 최신 SG Optimizer 버전을 기반으로 다음 3개의 스크립트만 제외할 수 있습니다.
https://plugins.trac.wordpress.org/changeset/2481447/sg-cachepress/trunk/core/Front_End_Optimization/Front_End_Optimization.php

@GeekPress 로컬에서 테스트한 후 지연에서 제외할 파일의 최종 목록은 다음과 같습니다.

'/wp-includes/js/dist/vendor/lodash(.min)?.js',
'/wp-includes/js/dist/api-fetch(.min)?.js',
'/wp-includes/js/dist/i18n(.min)?.js',
'/wp-includes/js/dist/vendor/wp-polyfill(.min)?.js',
'/wp-includes/js/dist/url(.min)?.js',

다음 줄을 확인하십시오

'api-fetch.js' => array('dependencies' => array('wp-i18n', 'wp-polyfill', 'wp-url'),

여기
https://github.com/wordpress/wordpress-develop/blob/9ca0ce7275fdaea1b9635deeba6bd3f821529270/src/wp-includes/assets/script-loader-packages.php#L1

그래서 url.js 를 목록에 추가 lodash.js 는 이미 SG 코드에 있습니다.

지금 바로 PR을 작성하겠습니다.

관련: https://secure.helpscout.net/conversation/1438422069/242990?folderId=3864740

위의 댓글을 확인하려면 다음 단계를 따르세요.

JS 파일이 바닥글에 위치할 때까지는 렌더링 차단으로 간주되지 않습니다!

한 고객의 사이트를 확인했는데 연기에서 제외될 때 스크립트가 렌더링 차단으로 언급되지 않았습니다.

@engahmeds3ed 정보 감사합니다. 그 접근 방식으로 가자 :)

12-24시간 후에 양식이 작동하지 않는 문제도 해결됩니까?

JavaScript는 CF7 업데이트의 문제의 절반에 불과했습니다. 두 번째 문제는 "nonce" 사용으로 인해 양식이 일정 시간 후에 작동을 멈춘다는 것입니다. 물론 이것은 12-24시간마다 전체 웹 사이트를 캐싱하여 해결할 수 있지만 CloudFlare 및 CloudFlare Argo와 같은 외부 캐시의 가치를 저하시켜 다소 쓸모 없게 만듭니다.

@PCAviation 수정 사항은 CF7이 사용 중인 새 종속성에 따라 다릅니다. 자동으로 제외하기 시작합니다.
불행히도 주기적으로 갱신해야 하는 nonce에 대해 아무 것도 할 수 없습니다. 페이지 캐싱과 호환되는 방식으로 양식을 보호하는 것은 CF7 개발자의 몫입니다.
유일한 해결 방법은 캐시 수명 기능을 사용하여 임시 수명 주기와 호환되는 간격으로 캐시를 갱신하는 것입니다.

@PCAviation 수정 사항은 CF7이 사용 중인 새 종속성에 따라 다릅니다. 자동으로 제외하기 시작합니다.
불행히도 주기적으로 갱신해야 하는 nonce에 대해 아무 것도 할 수 없습니다. 페이지 캐싱과 호환되는 방식으로 양식을 보호하는 것은 CF7 개발자의 몫입니다.
유일한 해결 방법은 캐시 수명 기능을 사용하여 임시 수명 주기와 호환되는 간격으로 캐시를 갱신하는 것입니다.

네, 알겠습니다. CF7 플러그인을 다루는 많은 사람들이 "자바스크립트는 CF7 업데이트의 문제의 절반에 불과했다"는 사실을 모르기 때문에 나중에 참조할 수 있도록 이 점을 지적하는 것입니다.

또한 JS 축소도 CF7에서 작동하지 않는다는 인상을 받았습니다. CF7이 작동하도록 하려면 JS "축소"와 "지연"을 모두 비활성화해야 했습니다. 그런 경우인지 아십니까?

이유는 모르겠지만 wp-rocket 팀은 이러한 JS 파일을 지연에서 제외하는 것이 페이지 속도 점수에 좋은 영향을 미친다는 점을 고려하지 않고 결정을 내리고 있습니다. 올바른 순서로 결합하는 대신 제외하는 지름길을 취하는 것은 wp-rocket 측면에서 큰 실수일 뿐입니다. 이전에 contact-form-7을 사용하여 최적화한 많은 사이트에서 이 최신 업데이트 이후에 모바일 페이지 속도 점수가 20-25포인트 하락한 것을 관찰했습니다. 친절하게 이 변경 사항을 되돌리고 이러한 JS 파일을 올바른 순서로 연기하는 올바른 방법을 찾으십시오.

이유는 모르겠지만 wp-rocket 팀은 이러한 JS 파일을 지연에서 제외하는 것이 페이지 속도 점수에 좋은 영향을 미친다는 점을 고려하지 않고 결정을 내리고 있습니다. 올바른 순서로 결합하는 대신 제외하는 지름길을 취하는 것은 wp-rocket 측면에서 큰 실수일 뿐입니다. 이전에 contact-form-7을 사용하여 최적화한 많은 사이트에서 이 최신 업데이트 이후에 모바일 페이지 속도 점수가 20-25포인트 하락한 것을 관찰했습니다. 친절하게 이 변경 사항을 되돌리고 이러한 JS 파일을 올바른 순서로 연기하는 올바른 방법을 찾으십시오.

이것은 WP-Rocket뿐만 아니라 모든 Wordpress 캐싱 플러그인에 영향을 미칩니다. 잘못은 CF7의 작성자에게 있습니다.

그러면 사람들은 wp-rocket이 아주 사소한 문제를 해결하기 위해 수천 개의 사이트 속도를 늦추기로 결정하는 대신 contact-form-7을 제거할 수 있습니다. 그리고 아니요, 모든 캐시 플러그인에 영향을 미치지 않습니다. Litespeed JS 지연이 훨씬 더 좋습니다. 페이지 속도 점수가 떨어졌을 뿐만 아니라 페이지와 상호 작용하는 시간도 증가했으며 경우에 따라 LCP도 증가했습니다. 잘 했어요!

@GeekPress 좋은 캐치!
내 테스트 사이트에서 Contact Form 7로 시도해 보았지만 PSI는 파일에 플래그를 지정하지 않았습니다.

관련 티켓
https://secure.helpscout.net/conversation/1438795814/243070
https://secure.helpscout.net/conversation/1439134214/243130
https://secure.helpscout.net/conversation/1438701667/243053
https://secure.helpscout.net/conversation/1438623587/243038

이러한 파일은 중요한 렌더 경로의 일부가 됩니다. 페이지 속도 테스트에 나타납니다!

그러면 사람들은 wp-rocket이 아주 사소한 문제를 해결하기 위해 수천 개의 사이트 속도를 늦추기로 결정하는 대신 contact-form-7을 제거할 수 있습니다. 그리고 아니요, 모든 캐시 플러그인에 영향을 미치지 않습니다. Litespeed JS 지연이 훨씬 더 좋습니다. 페이지 속도 점수가 떨어졌을 뿐만 아니라 페이지와 상호 작용하는 시간도 증가했으며 경우에 따라 LCP도 증가했습니다. 잘 했어요!

CF7에서 "nonce"를 사용한다는 것은 캐시를 24시간마다 새로 고쳐야 한다는 의미이기도 합니다. 그렇지 않으면 양식이 작동을 멈춥니다. 유일한 다른 대안은 24시간마다 해당 단일 페이지를 다시 캐싱하거나 해당 페이지에서 캐싱을 끄는 것입니다.

캐싱에서 연락처 양식 페이지를 제외합니다. 단순한!

그것은 여전히 ​​wp-rocket 팀이 JS 결정을 배제한 실수를 정당화하지 못할 것입니다.

이유는 모르겠지만 wp-rocket 팀은 이러한 JS 파일을 지연에서 제외하는 것이 페이지 속도 점수에 좋은 영향을 미친다는 점을 고려하지 않고 결정을 내리고 있습니다.

@akkiverma 이 파일은 바닥글에서 로드할 때 렌더링 차단이 전혀 되지 않으며 여기에서 언급한 헤더가 아닙니다.
https://github.com/wp-media/wp-rocket/issues/3625#issuecomment -787847496

그리고 그것은 우리 팀의 다른 누군가에 의해 검증되었습니다:
https://github.com/wp-media/wp-rocket/issues/3625#issuecomment -787853885

결정을 내릴 때마다 그것이 PSI 등급 및 로딩 시간에 미칠 수 있는 영향에 대해 확신할 수 있습니다.

내가 말하는 파일은 중요한 렌더 경로에 추가됩니다. 이러한 파일은 렌더 차단이 아니지만 여전히 병렬로 로드되므로 JS가 로드되는 즉시 실행을 시작하기 때문에 페이지 속도 점수에 크게 영향을 미칩니다. 이것은 변경해야합니다!

바닥글에서 로드되기 때문에 PSI에 전혀 영향을 미치지 않습니다...

모바일의 경우 20-25로 이미 PSI 점수에 영향을 미쳤으며 데스크톱의 경우 변경 사항이 없습니다. 나는 속도 전문가이며 나보다 더 잘 말할 수 있는 사람은 없습니다!

죄송합니다. 우리도 «속도 전문가»가 아니라는 사실을 잊었습니다...

이것은 제 정규직이며 문의 양식 7과 함께 wp-rocket을 사용하는 많은 사이트에서 이미 모바일 점수가 떨어졌습니다. 다시 충전해서 수정했어요! 당신의 실수 덕분에 더 많은 돈을 벌었습니다! ㅋ

나는 당신도 속도 전문가라고 확신합니다. 중요한 렌더 경로나 PSI 점수 하락 부분에서 어떻게 놓쳤는지 궁금합니다!

내가 말했듯이 바닥글의 JS 파일은 렌더링 차단이 아닙니다.

원하는 대로 이 동영상을 촬영하세요.
https://share.getcloudapp.com/X6u9P0Rr

동영상에서 보여주려는 내용은 JS 파일이 문의 양식 7에서 추가한 것과 동일하지 않습니다.

내기를 하시겠습니까? 연락처 양식 7에서 추가한 JS가 모바일의 PSI 점수에 영향을 미친다는 것을 보여 드리겠습니다. wp-rocket의 최신 업데이트에서 해당 파일을 제외하고 PSI 점수가 떨어졌습니다. 이것이 내 클라이언트가 플러그인 업데이트 후 무엇이 잘못되었는지 확인하기 위해 저에게 다시 연락한 이유입니다. PSI 점수가 떨어진 이유. 그렇지 않으면 내가 왜 귀찮게 하겠습니까!

어떤 플러그인의 변경 로그, 업데이트 중인 항목 및 기타 항목을 모니터링하지 않습니다. 다시 말하지만 해당 파일은 중요한 렌더링 경로의 일부가 되지만 렌더링 차단은 아닙니다.

JS가 로드되고 즉시 실행을 시작하여 상호 작용 시간이 늘어나고 FID에도 영향을 미치므로 페이지 속도 점수가 떨어지는 것을 이해하십시오.

안녕하세요, 특히 @GeekPress , 최고의 캐싱 플러그인에 감사드립니다

나는 또한 최근에 이 변경 사항에 대해 알아차리고 지원 팀에 연락하여 이것이 wp 로켓의 새로운 변경 사항임을 확인했습니다.

예를 들어 플러그인의 최신 버전으로 업데이트하기 전입니다.

https://gtmetrix.com/reports/www.angrybbq.com/mJysMHp4/

이제 다음과 같이 변경되었습니다.

https://gtmetrix.com/reports/www.angrybbq.com/yRcr0X7z/

홈페이지에는 문의 양식이 전혀 없는데 왜 이러한 자산을 문의 양식에서 전혀 사용하지 않는 곳에서 제외하는 것입니까?

이에 대한 다른 솔루션을 제공할 수 있습니까?

다시 한번 감사합니다

홈페이지에는 문의 양식이 전혀 없는데 왜 이러한 자산을 문의 양식에서 전혀 사용하지 않는 곳에서 제외하는 것입니까?

양식이 페이지에 없는 경우에도 CF7이 약 7개의 스크립트 파일을 로드한다는 점은 언급할 가치가 있습니다.

@akkiverma 방금 여러 웹 사이트에서 몇 가지 테스트를 수행했는데 똑같은 결과를 얻었습니다. JS 파일에 defer 속성이 포함되어 있는지 여부는 이러한 파일이 바닥글에 삽입될 때까지 PSI 등급에 영향을 미치지 않습니다.

동작이 다르면 구성도 다릅니다.

defer 속성은 한 가지만 변경합니다. 우선 순위는 defer가 있는 경우 낮음으로 설정되고 defer가 없는 경우 중간으로 설정됩니다. 그러나 JS 파일은 로드할 최신 파일이어야 하므로 로드 순서가 어떤 식으로든 변경되지 않습니다.

요점을 공유해 주셔서 감사합니다. 하지만 여기에서 우리는 아무데도 갈 수 없다고 생각합니다.

그러면 사람들은 wp-rocket이 아주 사소한 문제를 해결하기 위해 수천 개의 사이트 속도를 늦추기로 결정하는 대신 contact-form-7을 제거할 수 있습니다.

그것에 대한 빠른 설명.

어쨌든 Defer JS에서 이러한 파일을 자동으로 제외하는 것이 우리가 제공할 수 있는 유일한 솔루션입니다. 문의 양식 7에서 문제를 수정해야 합니다...

우리는 고객의 웹사이트를 깨뜨리고 싶지 않습니다. 그것은 또한 우리의 책임입니다. 이러한 파일을 지연에서 제외하지 않으면 웹 사이트가 중단됩니다. 이것은 허용되지 않습니다.

@amiremami 피드백 주셔서 감사합니다. 오래된 GT Metrix 보고서를 사용하고 있습니다. 그리고 실제로 이 하나에서 GT Metrix는 스크립트 태그에 defer 속성이 포함되어 있는지 확인하고 있습니다. 하지만 그것은 오래된 보고서입니다... 그리고 당신은 Lighthouse 측정항목(Google PageSpeed와 동일)을 사용하는 새로운 보고서에 집중해야 합니다.