2011-12-04 3 views
3

불필요한 CSS를 포함하면 브라우저 속도가 느려 집니까 (Chromium, Mobile Safari)?불필요한 CSS 및 최적화

내 말은, 모든 PHP 파일에

function insert_style_sheet() 
{ 
    include "style_sheet.tpl"; 
} 

. 템플릿 파일 style_sheet.tpl은 다음과 같습니다.

<link rel="StyleSheet" type="text/css" href="css/main.css"> 
<link rel="StyleSheet" type="text/css" href="css/controls.css"> 
<link rel="StyleSheet" type="text/css" href="css/whatever.css"> 

답변

5

예, YSlow와 같은 성능 분석기로 차이를 측정 해 볼 수 있습니다. 크기가 큰지 여부에 따라 추가 스타일 시트 또는 두 개는 속도 효과가 무시할 수 있습니다. 기본적으로, 더 스타일 시트 파이프 라인이 추가 : 브라우저 (HTTP 호출의 수를 감소 CSS 파일을 잡기 위해 여행의 둘레에

  • 더 HTTP에 대해 각 요소를 확인하는

    • 더 CSS 규칙은 위대한입니다 중요성은, 당신이 당신의 사이트/애플리케이션의 성능을 최적화 할 때, 우선 순위는 1. 네트워크 연결이는 스타일 시트) 폴 아일랜드어 recently tweeted "으로

  • 을 다운로드해야
  • 더 많은 바이트를 결합 조사 DOM 액세스 3. Javascript 선택 imizations. "

  • +0

    그러면 CSS의 일반적인 규칙은 무엇입니까? 모든 CSS를 항상 병합하여 네트워크 연결 수를 줄여야합니까? – noober

    +1

    다릅니다. CSS를 병합하는 것은 대개 좋은 아이디어이며, 최소화하는 것은 항상 좋은 생각입니다. CSS를 병합하는 유일한 단점은 대부분의 CSS 규칙을 필요로하지 않을 수도 있지만 사용자는 여전히 전체 병합 스타일 시트를 다운로드해야한다는 것입니다. 특정 CSS가있는 고유 한 페이지가 많고 개별 CSS 파일이 많은 경우 병합하면 다른 페이지에 불필요한 부 풀림이 생길 수 있습니다. –

    3

    확실히 사이트 속도가 느려질 수 있습니다. 가능한 경우 CSS 파일을 결합하여 CSS 파일 수를 줄이는 것이 가장 좋습니다. 그것은 또한 각 파일에 얼마나 많은 CSS가 있는지에 따라 달라지며 부풀어 오르지 않느냐에 달려 있습니다.

    3

    페이지로드 시간에 의해 영향을 받는다 : .CSS 파일의

    1. 수는
    2. 은 .CSS 파일의
    3. 크기는
    4. 을 다운로드 다운로드

    페이지 성능 : (브라우저 창을 스크롤하거나 크기를 조정 할 때 가장 볼)

    1. 브라우저에서 찾아야하는 선택기의 수. 각 선택

    의 속성의

  • 수 그래서 ... 파일을 결합하지 않는 CSS 속성 및 선택기를 제거합니다. css를 압축하면 압축되지 않은 버전이 저장되므로 의미론을 편집하고 압축 한 후 저장할 수 있습니다.

    내가 CSS로 작업하는 방법입니다. 희망이 당신에게 도움이!