중요한 CSS를 어떻게 그리고 왜 내려야하는지

웹 성능 향상 : 주요 CSSS를 인화하기위한 전략 및 팁 이 기사는 웹 사이트 성능을 최적화하기 위해 키 CSS (CSS 규칙을 직접 HTML 문서에 직접 포함)하는 방법을 살펴 봅니다. 중요한 CSS를 인화함으로써 웹 렌더링, 특히 첫 번째 스크린 컨텐츠의로드를 크게 가속화 할 수 있으며 외부 CSS 파일을 얻기위한 추가 HTTP 요청으로 인한 렌더링 지연을 피할 수 있습니다.

키 포인트 :

Key CSS를 정확하게 식별합니다. Critical CSS는 첫 번째 화면에서 컨텐츠를 렌더링하는 데 필요한 최소 CSS 코드를 나타냅니다. 이는 페이지마다 다르며 Google Pagespeed Insights, Critical Path CSS Generator 및 Penthouse.js와 같은 도구로 인식 및 추출이 필요합니다.

시험 오프 : 인라인 임계 CSS는 로딩 속도를 향상시킬 수 있지만 HTML 문서 크기를 증가시킬 수 있으며 코드 중복성을 유발할 수 있습니다 (특히 동일한 CSS 규칙이 여러 페이지에서 재사용 될 때). 따라서, 상감 된 CSS가 실제로 웹 페이지에 결정적인지 확인하는 것이 중요합니다.

자동화 도구 : grunt, npm 모듈 (예 : 중요), Gulp 및 WordPress 플러그인 (예 : 폴드 최적화 및 W3 총 캐시)과 같은 도구는 자동으로 식별 할 수 있습니다. , 추출 및 인라인 키.

인터넷 초기에 웹 사이트는 주로 텍스트 정보를 표시했습니다. 네트워크 속도가 증가함에 따라 사용자는 다양한 CSS 및 JavaScript 프레임 워크, 플러그인 등을 사용하여 고화질 사진 및 비디오를 빠르게 다운로드 할 수 있으며 웹 사이트 기능이 점점 복잡해지고 있습니다. 필요한 모든 파일을로드하는 데는 시간이 걸리고 더 빠른 웹 사이트는 더 나은 사용자 경험으로 이어 지므로 웹 사이트 성공에 중요합니다. 중요한 CSS를 인화하고 비정규 CSS를 비동기로로드하는 것은 성능 향상을위한 핵심 전략입니다.
• 주요 CSS는 무엇입니까? 키 CSS는 홈페이지의 컨텐츠 스타일에 사용되는 CSS 코드를 말합니다 (탐색 및 기타 요소를 포함하여 사용자의 첫 번째 부분). 첫 번째 화면에서 컨텐츠를 빠르게 렌더링하는 것이 중요합니다.
사용자는 다양한 장치와 Windows를 사용하여 웹 사이트에 액세스 할 수 있으므로 홈 화면의 콘텐츠를 고려해도 모든 문제를 해결하기에 충분하지 않습니다. 기본 레이아웃 및 타이포그래피와 관련된 CSS도 중요한 CSS로 간주되어야합니다.
• 현대 웹 개발 관행은 인라인 CSS를 권장합니다. 왜 인라인해야합니까?
Google Pagespeed Insights와 같은 도구는 CSS로드의 최적화를 자극 할 수 있으며, 이는 중요한 CSS와 비동기로로드 된 차단 스타일 시트를 암시합니다.
• 브라우저는 모든 CSS 파일이로드 된 후에 만 ​​홈페이지에서만 컨텐츠를 렌더링합니다. 많은 수의 파일을로드해야 할 때 병목 현상이됩니다. 모든 사용자가 고속 네트워크 연결을 가지고있는 것은 아니며 컨텐츠를로드하기 전에로드 할 라이브러리, CSS 및 JavaScript를 기다리는 것이 실망 스러울 수 있습니다. 고속 네트워크 사용자조차도 경우에 따라 (예 : 터널을 통한) 연결을 잃을 수 있습니다. 웹 사이트가 임계 CSS를 상환하고 기본 컨텐츠가 표시되기 전에 다른 파일이로드되지 않으면 사용자는 연결이 끊어진 경우에도 기본 컨텐츠에 액세스 할 수 있습니다.

  다음 그림은 일반 웹 페이지와 최적화 된 웹 페이지의 차이를 보여줍니다. 최적화 된 버전을 사용하면 사용자가 약 0.5 초 전에 콘텐츠에 액세스 할 수 있습니다. 많은 수의 추가 라이브러리를로드해야 할 때 개선이 더 분명 할 것입니다.

  주요 CSS가 인쇄되어야합니까? 상황에 따라 다릅니다. 큰 프레임 워크 나 라이브러리를 사용하지 않고 자신의 CSS 파일 크기도 작 으면 CSS를 인라인 할 필요가 없습니다.

  부트 스트랩과 같은 프레임을 사용하는 경우 프레임의 모든 기능이 사용되지 않을 수 있습니다. 이 경우 프레임 워크 스타일 시트에서 중요한 CSS 만 추출하고 실제 프레임 워크를 비동기로로드 할 수 있습니다. 이것은 웹 사이트의 속도를 크게 증가시킬 것입니다.

  인라인 스타일 시트를 캐시 할 수 있지만 HTML은 일반적으로 캐시되지 않습니다 (일반적으로 권장되지 않습니다!). 이것은 때때로 둘 사이에 차이가 있음을 의미합니다. 업데이트를 할 때 이것을 명심하십시오! 또한 인라인 CSS는 사용자가 웹 사이트를로드 할 때마다 페이지 크기가 증가합니다. 예를 들어, 웹 사이트에 페이지 당 30KB 인라인 CSS가있는 경우 단일 사용자는 10 페이지보기에 300KB를 소비합니다. 이것은 큰 문제가 될 수는 없지만 세계의 일부 지역 (및 일부 3G/4G 데이터 계획)에서는 데이터가 비싸다. 인라인하려는 CSS가 페이지에 실제로 중요하고 모든 것을 인화하지 않도록하십시오. (다음 내용은 원본 텍스트와 유사합니다. 복제를 피하기 위해 주요 CSS를 찾는 방법에 대한 자세한 단계, Grunt, NPM 모듈, Gulp 및 기타 도구를 사용하면 최종 FAQ 섹션이 생략됩니다. 이것들은 원래 텍스트를 통해 찾을 수 있습니다 요약

  중요한 CSS를 인화할지 여부는 사용자의 액세스 패턴 및 웹 사이트 구조에 따라 다릅니다. 귀하의 사이트가 단일 페이지 웹 사이트 인 경우 방문자가 자주 액세스하지 못하거나 프레임 워크 및 플러그인이있는 복잡한 웹 사이트가있는 경우 Inline Critical CSS는 성능을 크게 향상시킬 수 있습니다.

  인라인 CSS의 유일한 관심사는 방문 당 페이지 크기를 증가 시킨다는 것입니다. 이는 쿠키를 사용하여 첫 번째 방문시에만 중요한 CSS를 보내는 동시에 전체 CSS 파일을 비동기로로드하고 캐시함으로써 완화 할 수 있습니다. 이것은 약간 복잡하지만 동시에 두 세계를 모두 최대한 활용할 수 있습니다.

위 내용은 중요한 CSS를 어떻게 그리고 왜 내려야하는지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!