"폴더 이상의 컨텐츠에서 렌더 차단 CSS 제거"

"폴더 이상의 컨텐츠에서 렌더 차단 CSS 제거"

---

Google PageSpeed ​​통계를 사용하여 내 사이트의 성능을 개선하려고 노력해 왔으며 지금까지는 매우 성공적이었습니다. .ready()페이지를 완전히로드 할 때까지 스크립트를 연기하기 위해 사내 jQuery 버전이 이미 있었기 때문에 스크립트 연기와 같은 것들이 아름답게 작동했습니다. 필자는 그 특정 기능을 인라인하고 전체 스크립트를 페이지의 끝으로 옮기는 것입니다. 잘 작동했습니다.

그러나 이제 나는 체크리스트에 남은 노란색 점 하나에 눈부신 것을 발견했다. "접은 컨텐츠에서 렌더링 차단 CSS 제거".

내 CSS가 설정되는 방식 _.css은 일반적으로 페이지 구조에 적용되거나 사이트의 1-2 곳 이상에서 사용되는 스타일을 포함하는 하나의 전역 파일을 갖는 것입니다. 그런 다음 대부분의 페이지 party.php에는 party.css해당 특정 페이지에 특정한 스타일을 포함 하는 관련 CSS 파일 (예 :)이 있습니다 . 파일 /t=FILEMTIME이 변경 될 때 업데이트되도록 파일 이름을 추가 하고 나중에 .htaccess로 제거하면 모든 CSS 파일이 무기한 캐시됩니다 .

어쨌든 Google은 접는 컨텐츠에 필요한 중요한 스타일을 인라인하는 것이 좋습니다. 문제는 ... 음,이 스크린 샷을보십시오 : http://prntscr.com/1qt49e

당신이 볼 수 있듯이 ... 모든 내용은 이상입니다! 사람들은 특히 많은 페이지를로드하는 게임에서 스크롤을 싫어합니다. 그래서 사이트를 한 화면에 맞도록 디자인했습니다 (충분한 해상도로 가정). 즉 ... 모든 스타일이 스크롤없이 볼 수있는 컨텐츠에 적용됩니다! 그래서 ... 어떤 해결책이 있습니까? 아니면 거의 완벽한 점수에 노란색 표시가 붙어 있습니까?

---

관련 질문이 이전에 요청되었습니다. Google Pagespeed에서 '접은 콘텐츠'란 무엇입니까?

먼저 이것이 ' 모바일 페이지 ' 에 관한 것임을 알아야합니다 .
따라서 귀하의 질문과 스크린 샷을 올바르게 해석하면 귀하의 사이트 가 아닙니다!

반대로, 가이드 라인에서 Google이 조언 한 사항 중 일부를 수행하면 '정상적인'웹 사이트보다 상황이 나빠질 수 있습니다.
구글에서 오는 모든 것이 "거룩한 성배"인 것은 아닙니다. 단지 구글에서 온 것입니다. HTML 마크 업을 살펴 ​​본다면 그 자체로는 좋은 역할 모델이 아닙니다.

내가 줄 수있는 최선의 조언은 :

• 브라우저에서 요소를 레이아웃하고 교체 된 내용을 기다릴 필요가 없도록 CSS에서 교체 된 요소의 너비와 높이를 설정하십시오!

또한 왜 하나의 파일이 아닌 다른 CSS 파일을 사용합니까?
추가 요청이 적은 양의 데이터 볼륨보다 나쁩니다. 그리고 첫 번째 요청 후 CSS 파일은 어쨌든 캐시됩니다.

항상주의해야 할 사항은 다음과 같습니다.

• 요청 횟수를 최대한 줄이십시오
• 전체 페이지 무게를 가능한 한 낮게 유지하십시오

Google의 PageSpeed ​​Insights 도구를 100 % 활용하는 방법에 대해 걱정하지 마십시오. ;-)

추가 1 : 다음은 Google에서 제공하는 페이지이며, CSS 게재 최적화에 권장되는 사항입니다 .

앞에서 말했듯이, 이것이 현실적이지 않고 "정상적인"웹 사이트에는 의미가 없다고 생각하지 않습니다! 반응 형 웹 디자인을 주로 사용하는 경우 미디어 쿼리 및 기타 레이아웃 스타일을 사용해야합니다. 따라서 CSS를 먼저로드하지 않으면 차단 방식으로 FOUT ( 스타일이없는 텍스트의 플래시)을 얻습니다 . 나는 이것이 페이지를 렌더링하는데 적어도 몇 밀리 초보다 더 낫다는 것을 정말로 믿지 않는다!

Imho Google은 새로운 "hype"를 시작하고 있습니다 (Stackoverflow에서 여기에 대한 모든 질문을 볼 때) ...!

---

Google Page Speed에서 99/100을 얻는 방법 (모바일 용)

TLDR : 전체 CSS 스크립트를 압축하고 <style></style>태그 사이에 포함시킵니다 .

---

나는 약 일주일 동안 그 100/100 점수를 추격하고 있습니다. 당신과 마찬가지로, 마지막으로 남은 항목은 "접은 컨텐츠 위의 렌더링 차단 CSS"를 제거하는 것이 었습니다.

확실히 쉬운 해결이 있습니까 ?? 아니. 필라멘트 그룹의 loadCSS 솔루션을 사용해 보았습니다 . 내가 좋아하는 .js가 너무 많습니다.

무엇에 대한 async(JS 등) CSS의 속성? 존재하지 않습니다.

포기할 준비가되었습니다. 그런 다음 나에게 새벽. 경우 연결 스크립트는 내가 대신 대신 머리에 내 전체 CSS를 포함 어떤 경우 렌더링 차단했다. 그렇게하면 막을 것이 없었습니다.

내 스타일 태그에 1263 줄의 CSS를 포함시키는 것이 절대적으로 잘못되었습니다. 그러나 나는 그것을 소용돌이 쳤다. 먼저 다음을 사용하여 압축하고 접두사를 붙였습니다.

postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -u cssnano --cssnano.autoprefixer false *.css -d min/ NPM postcss 패키지를 참조하십시오 .

이제는 공간이없는 CSS의 한 줄이었습니다. <style>your;great-wall-of-china-long;css;here</style>내 홈페이지의 태그에 CSS를 넣었습니다 . 그런 다음 페이지 속도 통찰력으로 다시 분석했습니다.

나는 모바일에서 90/100에서 99/100으로 갔다!

이것은 내 (그리고 아마도 당신)의 모든 것에 위배됩니다. 그러나 문제가 해결되었습니다. 필자는 현재 홈페이지에서 사용하고 있으며 PHP include를 통해 프로그래밍 방식으로 압축 CSS를 포함시킵니다.

CSS 길이에 따라 YMMV (마일리지가 다를 수 있음) 접기 콘텐츠보다 너무 많이 Google에서 찌를 수 있습니다. 그러나 가정하지 마십시오. 테스트!

노트

1. 지금은 내 홈페이지에서만이 작업을 수행하므로 사람들이 가장 중요한 페이지에서 FAST 렌더링을 얻습니다.

2. CSS가 캐시되지 않습니다. 그래도 걱정하지 않습니다. 그들이 내 사이트의 다른 페이지를 두 번째로 누르면 .css 가 캐시됩니다 (주 1 참조).

---

도움이 될만한 몇 가지 팁 :

• 어제 CSS 최적화 에서이 기사를 보았습니다 : CSS를위한 CSS 프로파일 링 ... 최적화 CSS에 대한
  유용한 정보와 CSS가 가장 많은 성능 저하를 일으키는 원인은 무엇입니까?

• jQueryUK에서 Googe Chrome (카나리아) 개발자 도구의 "숨겨진 비밀"에 대한 다음 프레젠테이션을 보았습니다. DevTools Can do that . Time to First Paint , 다시 칠하기 및 비용이 많이 드는 CSS 섹션을 확인하십시오 .

• Also, if you are using a loader like requireJS you could have a look at one of the CSS loader plugins, called require-CSS, which uses CSSO - a optimzer that also does structural optimization, eg. merging blocks with identical properties. I used it a few times and it can save quite a lot of CSS from case to case.

Off the question: I second @Enzino in creating a sprite for all the small icons you are loading. The file sizes are so small it does not really warrant a server roundtrip for each icon. Also keep in mind the total number of concurrent http requests are browser can do. So requests for a larger number of small icons are "render-blocking" as well. Although an empty page compare to yours, I like how duckduckgo loads for example.

---

Please have a look on the following page https://varvy.com/pagespeed/render-blocking-css.html . This helped me to get rid of "Render Blocking CSS". I used the following code in order to remove "Render Blocking CSS". Now in google page speed insight I am not getting issue related with render blocking css.

<!-- loadCSS -->
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/cssrelpreload.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/loadCSS.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/onloadCSS.js"></script>
<script>
      /*!
      loadCSS: load a CSS file asynchronously.
      */
      function loadCSS(href){
        var ss = window.document.createElement('link'),
            ref = window.document.getElementsByTagName('head')[0];

        ss.rel = 'stylesheet';
        ss.href = href;

        // temporarily, set media to something non-matching to ensure it'll
        // fetch without blocking render
        ss.media = 'only x';

        ref.parentNode.insertBefore(ss, ref);

        setTimeout( function(){
          // set media back to `all` so that the stylesheet applies once it loads
          ss.media = 'all';
        },0);
      }
      loadCSS('styles.css');
    </script>
    <noscript>
      <!-- Let's not assume anything -->
      <link rel="stylesheet" href="styles.css">
    </noscript>

---

I too have struggled with this new pagespeed metric.

Although I have found no practical way to get my score back up to %100 there are a few things I have found helpful.

Combining all css into one file helped a lot. All my sites are back up to %95 - %98.

The only other thing I could think of was to inline all the necessary css (which appears to be most of it - at least for my pages) on the first page to get the sweet high score. Although it may help your speed score this will probably make your page load slower though.

---

The 2019 optimal solution for this is HTTP/2 Server Push.

You do not need any hacky javascript solutions or inline styles. However, you do need a server that supports HTTP 2.0 (any modern server version will), which itself requires your server to run SSL. However, with Let's Encrypt there's no reason not to be using SSL anyway.

My site https://r.je/ has a 100/100 score for both mobile and desktop.

The reason for these errors is that the browser gets the HTML, then has to wait for the CSS to be downloaded before the page can be rendered. Using HTTP2 you can send both the HTML and the CSS at the same time.

You can use HTTP/2 push by setting the Link header.

Apache example (.htaccess):

Header add Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload"

For NGINX you can add the header to your location tag in the server configuration:

location = / {
    add_header Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload";
}

With this header set, the browser receives the HTML and CSS at the same time which stops the CSS from blocking rendering.

You will want to tweak it so that the CSS is only sent on the first request, but the Link header is the most complete and least hacky solution to "Eliminate Render Blocking Javascript and CSS"

For a detailed discussion, take a look at my post here: Eliminate Render Blocking CSS using HTTP/2 Push

---

Consider using a package to automatically generate inline styles from your css files. A good one is Grunt Critical or Critical css for Laravel.

참고URL : https://stackoverflow.com/questions/18761251/eliminate-render-blocking-css-in-above-the-fold-content