Google Pagespeed에서 '접은 곳의 콘텐츠'란 무엇입니까?

최근까지 내 사이트 (www.heatexchangers.ca)는 Google Page Speed에서 98 %를 기록했습니다. 웹 글꼴의 쿼리 문자열과 같이 아무것도 할 수 없었던 몇 가지가있었습니다. 이것이 내가 할 수있는 모든 것을 대표했기 때문에 나는 이것에 매우 만족했습니다.

최근 Google은 페이지 속도 점수에 영향을 미치는 다른 것을 추가했으며 이제 Page Speed에서 89 % 만 받고 다음 제안을받습니다.

• 스크롤없이 볼 수있는 컨텐츠에서 외부 렌더링 차단 JavaScript 및 CSS를 제거합니다.

이 문제를 해결하기위한 제안은 모든 내 .css 및 .js 파일을 트롤링하고 일부를 분리하여 내 HTML에 인라인으로 추가하는 것으로 보입니다. 이로 인해 최대한 많은 JS와 CSS를 HTML에서 유지해야한다는 인상을 받고 혼란스러워지고 있습니다.

"폴드 위의"내용은 정확히 무엇입니까? 글꼴, 배경색 등과 같은 몇 가지 스타일 인 경우 그런 다음 인라인을 포함하기에는 너무 큰 거래가 아닐 수도 있습니다. 나는 이것이 정확히 무엇인지 목록을 찾을 수 없었습니다.

Google은 최근 모바일 웹에 점점 더 잘 반영되도록 페이지 속도 도구를 변경했기 때문입니다. 모바일 데이터 네트워크는 유선 또는 Wi-Fi와 다른 성능 특성을 가지므로이를 최적화하기 위해 다른 작업을 수행해야합니다.

ATF (Over-the-Fold)는 단순히 첫 번째 화면의 가치입니다. 스크롤 할 필요가 없습니다. 분명히 이것은 장치와 방향에 따라 달라 지므로 스마트 폰을 타겟팅하거나 태블릿, 대형 데스크톱을 위해 하나의 일반적인 옵션을 일반화하고 찾아야 할 수도 있습니다.

그들이 말하는 CSS는 실제로 ATF가 표시되는 모든 내용을 완전히 스타일링하는 데 필요한 모든 CSS를 의도하고 있습니다. ATF 컨텐츠의로드 시간을 결정하기 위해 최종 버전의 스크린 샷을 가져 와서로드 할 때 페이지와 시각적으로 비교하고 충분히 비슷할 때 ATF 컨텐츠가있는 지점을 고려합니다. 로드됩니다.

이 주제에 대한 Google의 비디오 프레젠테이션입니다.

http://www.youtube.com/watch?v=YV1nKLWoARQ

첫 번째 시간 내에 사용자가 할 일을 얻는 데 중점을 둡니다. ATF 컨텐츠의 CSS를 HTML에 직접 넣는 이유는 모바일 데이터 성능에 대한 연구를 반영한 ​​것으로 CSS가 없으면 첫 번째 초 내에로드 될 수있을 정도로 빨리로드되지 않음을 보여줍니다.

또한이 중 일부를 자동화 할 수있는 도구에 대한 링크도 제공합니다. 나는 그들과 YMMV를 시도하지 않았습니다.

Google 페이지 통계는 접기 위의 콘텐츠를 참조하는 CSS의 %가 너무 늦게로드되어 페이지가 더 일찍 렌더링되었을 수 있음을 명확하게 알려줍니다. 녹색 결과를 얻기 위해 CSS의 일부를 이동할 수있는 것보다. 나는 당신을 위해 그것을 할 수 있습니다 : goo.gl/GsRxNc

'접은 곳의 위'를 설명하는 Google의 링크 https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

스크롤없이 볼 수있는 콘텐츠는 웹 페이지에서 페이지가 처음로드 될 때 브라우저 창에 표시되는 부분입니다. Google은 기본 CSS 파일에서 추출되어 헤드 태그에 삽입 된 인라인 CSS를보고 먼저 보이는 모든 것을 먼저로드 할 수있게하려고합니다.

출처-https: //www.c2experience.com/blog/passing-googles-abovethefold-css#: ~: text=Above%2Dthe%2Dfold%20content%20is,first%20to%20be%20loaded%20first .

이들은 분석 또는 추적 코드와 같은 렌더 차단 js를 참조하므로 사용자가 화면에 사이트를 가지고 있으면로드 될 때 바닥 글에 "다른 모든 것보다 먼저로드"스크립트를 배치하는 것이 좋습니다.