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

그러나 이제 나는 체크리스트에서 남은 노란색 점 하나에 눈부신 것을 발견했다.

내 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 섹션을 확인하십시오 .

• 또한 requireJS 와 같은 로더를 사용하는 경우 require-CSS 라는 CSS 로더 플러그인 중 하나를 살펴볼 수 있습니다. require-CSS 는 CSSO ( 구조 최적화를 수행하는 옵티 마이저 )를 사용합니다 . 동일한 속성을 가진 블록을 병합합니다. 나는 그것을 몇 번 사용했으며 경우에 따라 상당히 많은 CSS를 절약 할 수 있습니다.

질문에서 : 나는로드하는 모든 작은 아이콘에 대한 스프라이트를 만드는 데 @Enzino를 두 번째로 사용합니다. 파일 크기가 너무 작아서 각 아이콘에 대한 서버 왕복이 실제로 보장되지는 않습니다. 또한 브라우저가 수행 할 수있는 총 http 동시 요청 수를 명심하십시오. 따라서 많은 수의 작은 아이콘에 대한 요청도 "렌더링 차단"입니다. 빈 페이지가 귀하의 페이지와 비교되지만 duckduckgo가 어떻게 로드 되는지 좋아합니다 .

다음 페이지 https://varvy.com/pagespeed/render-blocking-css.html을 살펴보십시오 . 이를 통해 "렌더 차단 CSS"를 제거 할 수 있었습니다. " Render Blocking CSS " 를 제거하기 위해 다음 코드를 사용했습니다 . 이제 Google 페이지 속도 통찰력에서 렌더 차단 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>

나도이 새로운 페이지 속도 측정 항목으로 어려움을 겪었습니다.

점수를 100 %까지 올리는 실용적인 방법을 찾지 못했지만 도움이되는 몇 가지 사항이 있습니다.

모든 CSS를 하나의 파일로 결합하면 많은 도움이되었습니다. 내 모든 사이트가 % 95-% 98까지 백업되었습니다.

내가 생각할 수있는 유일한 다른 것은 첫 번째 페이지에서 필요한 모든 CSS (최소한 내 페이지에서는 대부분의 것으로 보입니다)를 인라인하여 달콤한 높은 점수를 얻는 것입니다. 속도 점수를 매기는 데 도움이 될 수 있지만 페이지로드 속도가 느려질 수 있습니다.

이를위한 2019 년 최적 솔루션은 HTTP / 2 Server Push 입니다.

해키 자바 스크립트 솔루션이나 인라인 스타일이 필요하지 않습니다. 그러나 HTTP 2.0 (모든 최신 서버 버전)을 지원하는 서버가 필요하며 서버 자체에서 SSL을 실행해야합니다. 그러나 Let 's Encrypt를 사용하면 SSL을 사용하지 않을 이유가 없습니다.

내 사이트 https://r.je/ 는 모바일과 데스크톱 모두 100/100 점을 받았습니다.

이러한 오류의 원인은 브라우저가 HTML을 가져온 다음 페이지를 렌더링하기 전에 CSS가 다운로드 될 때까지 기다려야하기 때문입니다. HTTP2를 사용하면 HTML과 CSS를 동시에 보낼 수 있습니다.

링크 헤더를 설정하여 HTTP / 2 푸시를 사용할 수 있습니다.

아파치 예제 (.htaccess) :

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

NGINX의 경우 서버 구성에서 위치 태그에 헤더를 추가 할 수 있습니다.

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

이 헤더가 설정되면 브라우저는 HTML과 CSS를 동시에 수신하여 CSS가 렌더링을 차단하지 못하게합니다.

CSS가 첫 번째 요청에서만 보내지도록 조정하려고하지만 링크 헤더는 "렌더 차단 Javascript 및 CSS 제거"에 대한 가장 완벽하고 해킹이없는 솔루션입니다.

자세한 내용은 내 게시물을 살펴보십시오. HTTP / 2 푸시를 사용하여 렌더 차단 CSS 제거

패키지를 사용하여 CSS 파일에서 인라인 스타일을 자동으로 생성하십시오. 좋은 것은 Laravel의 Grunt Critical 또는 Critical CSS입니다 .

안녕하세요 jQuery 당신은 이것처럼 사용할 수 있습니다

async 및 type = "text / javascript"만 사용하십시오.