Google PageSpeed ​​수정 접이식 위의 콘텐츠에서 렌더링 차단 JavaScript 및 CSS 제거

Google PageSpeed ​​[1] 테스트에서 스크롤없이 볼 수있는 부분의 JavaScript 및 CSS 렌더링 차단은 HTML이 완전히로드 된 후 사이트의 JS 및 CSS 파일을 제공하도록 제안하므로 HTML로드를 일시 중지하지 않습니다. 그들을 다운로드하십시오.


렌더 차단 자바 스크립트 및 CSS 해결

Google PageSpeed ​​[1] 테스트에서 스크롤없이 볼 수있는 부분의 JavaScript 및 CSS 렌더링 차단은 HTML이 완전히로드 된 후 사이트의 JS 및 CSS 파일을 제공하도록 제안하므로 HTML로드를 일시 중지하지 않습니다. 그들을 다운로드하십시오.

[1]-PageSpeed ​​Insights – developers.google.com
렌더링 차단 스크립트 정의 : 전체 HTML DOM이 구문 분석되기 전에로드되는 스크립트입니다. 예를 들어, HTML 페인트 이후까지 스크립트로드를 지연시키는 브라우저에 대한 특정 지침없이 헤더 또는 콘텐츠 내에 포함 된 스크립트가 있습니다.

스크롤없이 볼 수있는 콘텐츠에서 렌더링 차단 자바 스크립트 및 CSS 제거 : 수정 방법보기

  1. 외부 시스템이 웹 사이트를 최적화하도록합니다.
  2. 렌더링 차단 리소스 제거를 수정하는 데 필요한 다음 세 가지 최적화를 포함하여 사용자를 대신하여 가능한 모든 최적화를 수행하는 CDN을 사용합니다.
  3. 자바 스크립트 파일로드 연기
  4. HTML로드 후 CSS로드
  5. WordPress 플러그인 사용

렌더링 차단 리소스 제거를 수정하는 데 필요한 많은 최적화가 있으며 직접 구현하는 데 지루할 수 있습니다. 또한 다른 페이지 속도 테스트 중에서 Chrome LightHouse 및 Google PageSpeed에 포함 된 새로운 테스트를 지속적으로 찾아야합니다.

htaccess 코드에서 렌더링 차단 리소스를 제거하는 기존 솔루션은 없습니다.이 문제는 DOM (웹 사이트 콘텐츠, Javascript 및 CSS 등 포함 된 리소스가로드되는 순서)과 관련되어 있기 때문입니다. 이들은 Htaccess에서 트리거 될 수 없지만 HTML DOM 콘텐츠에서만 트리거됩니다.

데스크톱에서 이러한 문제를 해결하면 둘 다 정확히 동일하므로 동시에 모바일 용 렌더링 차단 리소스를 제거 할 수 있습니다!

Did you know that you can even have all these steps executed automatically for you by using an external  사이트 속도 가속기   technology, which through artificial intelligence will preload your site, optimize it, and deliver it to your visitors? It is possible with tools such as Ezoic platform offering, with a free trial and no credit card required. Otherwise, implement below optimizations in your website!

자바 스크립트 파일로드 지연

JS 파일의로드를 지연하려면 [2], 스크립트 링크에 ​​async 또는 defer 명령어를 추가 할 수 있습니다. 비동기가 동일한 순서로로드되는 것을 보장하지 않습니다. 따라서 여러 스크립트를 차례대로 실행해야하는 경우 순서를 보장하기 위해 연기가 바람직합니다.

[2]-렌더링 차단 JavaScript 제거 | PageSpeed ​​Insights | 좋은 개발자 – developers.google.com

HTML로드 후 CSS로드

전체 HTML을 전송 한 후에 CSS를로드하기 위해 Google은 바닥 글 태그를 닫고 태그를 닫을 때와 같이 HTML의 끝에 추가 할 코드 조각을 제안합니다.

[3]-CSS 전달 최적화 | PageSpeed ​​Insights | 좋은 개발자 – developers.google.com

웹 사이트를 최적화하려면 사용하지 않는 CSS 코드를 제거하는 것도 좋은 아이디어이기도합니다. 웹 디자인에 대한 지식이없는 경우 지루할 수있는 작업입니다. 웹 사이트 테마를 직접 작성하지 않은 경우 Ezoic Leap (예 : 새 (및 완전히 무료) 버전의 놀라운 사이트와 같은 대신에 사용되지 않은 CSS 코드를 사용하여 미사용 CSS 코드를 제거하는 것이 좋습니다. 속도 가속기.

Google 사이트 속도 테스트를 통과하십시오!

이를 통해  Google PageSpeed   ​​[1] 테스트를 통과 할 수있었습니다. 스크롤없이 볼 수있는 콘텐츠에서 렌더링 차단 자바 스크립트와 CSS를 제거하고 (웹 페이지에서 레버리지 브라우저 캐싱 [4]와 함께) 모바일에서 51 점의 점수를 얻었습니다 그림 1)에서 72 (그림 2), 데스크톱에서 59 (그림 3)에서 79 (그림 4)로 증가했습니다.

[4]-htaccess에서 브라우저 캐싱을 활용하는 Google PageSpeed ​​수정-Yoann Bierling, 국제 SAP / 웹 컨설턴트-www.ybierling.com

WordPress에서 렌더링 차단 리소스를 제거하는 방법

WordPress의 렌더링 차단 리소스를 제거하려면 JetPack과 같은 플러그인을 설치해야합니다.

그런 다음 관리자가되어야하는 옵션으로 이동하여 JetPack 옵션> 쓰기> 성능 및 속도> 사이트 액셀러레이터 사용, 이미지로드 시간 가속화, 정적 파일로드 시간 가속화 및 지연로드 활성화를 선택하십시오. 이미지.

마스터 웹 사이트 생성 : 지금 등록하십시오!

포괄적 인 웹 사이트 제작 과정으로 디지털 입지를 바꾸십시오 - 오늘 웹 전문가가되기위한 여정을 시작하십시오!

여기에 등록하십시오

포괄적 인 웹 사이트 제작 과정으로 디지털 입지를 바꾸십시오 - 오늘 웹 전문가가되기위한 여정을 시작하십시오!

이렇게하면 WordPress의 렌더링 차단 리소스가 제거되고 JetPack이 이미지를 최적화하고 전역 네트워크 서버에서 이미지와 정적 파일 (예 : CSS 및 JavaScript)을 제공 할 수 있으므로 페이지를 더 빨리로드 할 수 있습니다.

WordPress에서 렌더링 차단 자바 스크립트 및 CSS를 제거하는 방법

또한 게으른로드 기능을 사용하여 이미지를 오프 스크린로드하는 것을 잊지 마십시오. 어려워지고 이미지 로딩을 연기하는 외부 라이브러리를 필요로하는 동안 HTML5에서는 기본적으로 가능합니다!

이미지의 게으른로드 : 웹 사이트가 웹 페이지를 스크롤 할 때만 웹 사이트 이미지가 서버에만 요청되며 표시 될 수 있습니다.

웹 사이트에서 이미지의 게으른로드를 구현하려면 웹 사이트 이미지의 속성에 게으른 값을 추가하기 만하면 최근 브라우저는 사용자가 스크롤하는 경우이 이미지 만 요청하고로드해야한다는 것을 이해합니다. 이미지 자리 표시 자.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>
게으른로드 - 웹 성능 - Mozilla Developer Network.

그 위에 Lazy Loading은 IFrame에서도 작동하며 웹 페이지에서 렌더링 차단 리소스를 제거하는 중요한 구현입니다.

렌더링 차단 리소스가 주요 내용 이후로드하기위한 지침이 있으면 HTML DOM을 의미하는 경우 Google 등대 테스트, 페이지 속도 통찰력 테스트 또는 Google 코어 웹 바이언스에서 이미 많은 점수를 얻게됩니다.

외부 시스템을 통해 웹 사이트를 최적화하십시오

무료 평가판을 등록하고 DNS를 변경하는 것을 제외하고 사이트에서 많은 노력을 기울이지 않고도 실제로 모든  Google PageSpeed   ​​문제를 해결할 수 있다는 것을 알고 있습니까?

Ezoic 플랫폼 Site Speed ​​Accelerator 기술을 사용하면 모든 일반적인  Google PageSpeed   ​​문제가 시스템에서 해결되어 웹 사이트와 방문자 사이의 중개자가됩니다. 방문자에게 웹 페이지를 표시하기 전에 웹 페이지를 최적화합니다.

Ezoic 유료 사이트 속도 가속기는 무료 Ezoic Leap가되며 웹 사이트가 핵심 웹 바이러스 그린 스코어에 도달하는 데 도움이됩니다!

간단하게 Ezoic 플랫폼에 무료 평가판을 등록하여 직접 시험해보십시오. 며칠 내에 웹 사이트가 최고 수준의 페이지 속도 최적화 표준에 도달하도록합니다. 차세대 webp 이미지 렌더링, 사용하지 않는 CSS를 제거하여 CSS 및 JavaScript 최적화 JS, 지연 이미지로드, 이미지 크기 조정, 사이트 페이지 캐시, 글꼴 최적화, 포함 된 모든 사이트에 대한 사전 연결 등을 포함합니다.

신용 카드가 필요하지 않습니다 – 무료로 등록하고 사용해보십시오. 또한 웹 사이트에서 디스플레이 광고를 통해 돈을 버는 경우 웹 사이트를 훨씬 빠르게 만드는 것 외에도 기계 학습 및 고급 인공 지능으로 광고를 최적화하여 Google 애드 센스보다 몇 배나 더 많은 수익을 올릴 수 있습니다.

자주 묻는 질문

렌더링 블로킹 JavaScript 및 CSS를 뒷받침 컨텐츠에서 제거하는 방법은 무엇입니까?
컨텐츠 이상의 콘텐츠에 대한 렌더 블로킹 JavaScript 및 CSS를 제거하려면 HTML이 완전히로드 된 후 사이트의 JS 및 CSS 파일이로드되어야합니다. 즉,이 파일을 다운로드하기 위해 HTML로드 프로세스를 일시 중지하지 않음을 의미합니다. Async 또는 Defer 속성으로 JavaScript 파일을 연기 할 수 있으며 CSS의 경우 특정 코드를 사용하여 HTML 이후로드 할 수 있습니다. Ezoic와 같은 외부 최적화 시스템도이를 자동으로 처리 할 수 ​​있습니다.
웹 개발자는 렌더 블로킹 JavaScript 및 CSS를 제거하기 위해 Google Pagespeed의 권장 사항을 어떻게 해결할 수 있습니까?
웹 개발자는 JavaScript 및 CSS 파일을 조정하고 JavaScript에 비동기로드를 사용하여 HTML에 중요한 CSS를 직접 내리고 비정규 CSS 및 JavaScript 파일의로드를 연기하여 사이트를 최적화 할 수 있습니다. 이러한 전략을 구현하면 로딩 시간과 페이지 스피드 점수를 크게 향상시킬 수 있습니다.

완벽한 크롬 등대 점수 : 어떻게됩니까?


Yoann Bierling
저자 정보 - Yoann Bierling
Yoann Bierling은 웹 게시 및 디지털 컨설팅 전문가로서 기술의 전문 지식과 혁신을 통해 글로벌 영향을 미칩니다. 그는 디지털 시대에 개인과 조직이 번창 할 수 있도록 권한을 부여하는 데 열정을 갖고 있으며, 교육 컨텐츠 제작을 통해 탁월한 결과를 제공하고 성장을 이끌어 내고 있습니다.

마스터 웹 사이트 생성 : 지금 등록하십시오!

포괄적 인 웹 사이트 제작 과정으로 디지털 입지를 바꾸십시오 - 오늘 웹 전문가가되기위한 여정을 시작하십시오!

여기에 등록하십시오

포괄적 인 웹 사이트 제작 과정으로 디지털 입지를 바꾸십시오 - 오늘 웹 전문가가되기위한 여정을 시작하십시오!




코멘트 (8)

 2018-08-19 -  quranapk
콘텐츠를 계속해서 읽는 것을 좋아합니다. 렌더링 차단 CSS를 수정하는 데 도움이되었습니다.
 2018-09-23 -  Monica
그래서 이것이 우리가하는 방법입니다. 렌더링 차단 리소스 제거를 해결하는 방법을 아는 것이 좋습니다.
 2018-09-25 -  Van
좋습니다. 바로 제가 찾던 것입니다. 이제 모바일에서 렌더링 차단 리소스를 제거 할 준비가되었습니다.
 2018-11-03 -  utumikaji0
놀랍습니다. 이제 시도해보고 렌더 차단 리소스 제거를 수정해야 할 때입니다!
 2019-01-12 -  Leo
어떻게 감사해야할지 모르겠지만 그건 순전히 천재입니다. 감사합니다. WordPress에서 렌더링 차단 리소스를 제거했습니다.
 2019-04-21 -  Ludanulema
안녕하세요, 귀하의 기사를 보았고 PHP에서 렌더링 차단 리소스를 제거하는 문제를 해결하는 데 도움이되었습니다. 감사합니다.
 2019-06-12 -  animeg2Q
지금 시도해 보겠습니다. 공유해 주셔서 감사합니다. 렌더링 차단 리소스 제거 수정
 2019-07-02 -  Gasfackele
그것은 저에게 잘 작동했으며 HTML 웹 사이트에서 렌더링 차단 리소스를 제거하기 위해 더 이상 볼 필요가 없습니다.

코멘트를 남겨주세요