나는)이PHP CSS - 머리 속에 외부 파일이나 메아리를로드하는 속도가 더 빠릅니다.
A)에 더 나은 <link> 또는
B를 사용하여 외부 CSS 파일 등이 있는지 알고 싶은 <head>에 CSS 직접/높이/인쇄 에코 것입니다. 그것은 여러 CSS 파일 = 압축 루트 디렉토리
, 나는, 옵션 B를 좋아하는 작은 HTTP는
이것을 실천하기에 앞서해야 할 큰 이유가 있습니까?
옵션 A는 추가 HTTP 요청을 제공하지만 브라우저는 CSS 파일을 캐시에 보관하므로 큰 문제는 아닙니다.
반면에 옵션 B를 사용하여 HTTP 요청을 저장하더라도 HTML 페이지가 상당히 커지면 HTML 페이지가 상당히 커지고 브라우저에서 HTML 페이지를 캐시 할 수 없습니다. 따라서 서버는 더 많은 데이터 전송을 처리해야합니다.
내용이 매우 드물게 변경되지 않습니다 페이지의 경우사용 옵션 B. 그렇지 않으면 사용 옵션 A.
옵션 B는 매우 큰 초기 페이로드를 제공 할 것입니다. 제 생각에는 나쁜 것입니다! 메서드 B를 사용할 때 페이지를 캐쉬하기가 어렵습니다. – Alfred
그게 내 답변에서 말하는거야, 안 그래? –
그리고 프로그래머가 아닌 프로그래머가 CSS를 변경해야하는 경우 옵션 B는 no-go입니다. 대부분의 경우 .php 페이지를 여는 것이 두렵습니다. 더 많은 유연성 (변수와 같은)을 원한다면, 적은 수의 코드를 생각할 수도 있습니다. –
정말 트래픽이 많은 웹 사이트를 계획하고 있다면 B (google 프론트 페이지처럼 html이 거의 변경되지 않는 한, 아래에 설명 된대로 좋은 아이디어가 아닙니다.)로 이동하십시오. 저는 개인적으로 A를 좋아합니다. HTML을 사용하지 않고 스타일을 유지할 수있게 해주 며, 다른 미디어에 대한 특정 스타일 시트를 사용하거나 심지어 다른 스타일 시트로 쉽게 전환 할 수있게 해줍니다. 또한 유지 보수 (버전 포함) 및 확장이 용이합니다.
요청이 걱정되면 이미지에서 작업하십시오. 당신은 당신의 CSS에 base64로 모든 이미지를 추가하고 그것으로 많은 요청을 방지하거나 여러 아이콘에 이미지 패닝 기술을 사용할 수 있습니다.
또한 CSS를 오프라인으로 축소하고 모든 CSS 스타일 시트를 스크립트 또는 서버 측 코딩을 사용하여 하나의 파일에 넣을 수도 있습니다.
내 5 센트.
,하지만 두려움, 당신이 얻을 수 없습니다 B 옵션의 이점! PHP 확장명을 사용하여 CSS 파일의 이름을 지정하고 링크 태그와 함께 포함 시키십시오. 그런 다음 PHP는 브라우저로 보내기 전에이 파일을 구문 분석하여 주석을 제거하거나 축소하거나 서버의 임의의 위치에있는 CSS 파일을 포함 할 수 있습니다. 세 번째 요점은 브라우저가 캐시하면 처음에는 2 개의 요청이지만 두 번째에는 1 개의 요청 만하므로 전반적으로 요청이 적어집니다.
문서 머리 부분의 태그를 통해 외부 스타일 시트를로드하는 것이 훨씬 나을 것입니다. 이렇게하면로드 된 스타일 시트를 브라우저가 캐시 할 수 있으므로 모든 페이지 요청시 스타일 시트를 다운로드 할 필요가 없습니다.
스타일 시트를 축소하는 데 관심이있는 경우 많은 도구를 사용하여 스타일 시트를 축소 할 수 있습니다. 많은 권장 사항은 Any recommendations for a CSS minifier?을 참조하십시오.
짧은 대답은 B 방법을 사용하지 않아야한다는 것입니다.왜 그렇게 생각해서는 안되는지 아래에서 읽을 수 있습니다.
주 HTML 파일의 파일 크기는 가능한 한 작게 유지해야합니다. 그 파일은 캐시 할 수 없기 때문에 (대부분 동적 특성으로 인해).
로컬로 테스트 할 때 조기 최적화를해서는 안됩니다. 그러나 코드를 배포 할 때 CSS를 축소하고 모든 파일을 단일 파일로 결합해야합니다. 또한 CSS 파일에 미래의 만료 헤더를 제공하는 것을 잊지 마십시오 (캐싱은 매우 중요합니다).
Yahoo!의 best practices for speeding up your website은 또한 많은 정보를 제공합니다 (내 대답은 그 책을 기반으로합니다). 웹 사이트의 속도를 높이는 방법은 매우 유용합니다.
+1 "그 파일을 캐시 할 수 없습니다"- 좋은 지적입니다. @ Marc-Franc가 말하는 것을 이해합니다. – Ben
정답은 페이지의 목적과 스타일이 어떻게 구성되어 있는지에 따라 다릅니다.
사이트에서 우리는 페이지 속도가 핵심 요소 (사람들이 예를 들어 우리 소프트웨어를 다운로드 할 수있는 방문 페이지) 인 몇 개의 핵심 페이지를 가지고 있지만 더 많은 방문자를 위해 CSS를 캐싱하려고합니다 한 페이지보다 많거나 가까운 장래에 다시 올 수도 있습니다.
당신은 또한 거의 하나 개의 CSS 파일이 없습니다는, 일반적인 설정이 될 수있다 : CSS를 재설정 파일 모든 페이지 특정 규칙을 정의하는 페이지 당 CSS 파일 공유 사이트의 일반적인 스타일과 template.css 파일 캐싱이 필요하지 않은 페이지 Internet Explorer 호환성을위한 IEfix CSS 파일
css reset, template.css 및 IRfix 파일은 캐싱 될 단일 외부 파일로 축소하기에 적합합니다.
페이지 당 CSS 파일은 재사용하기위한 것이 아니며 HTTP 요청의 비용이 일반적으로 전송 된 바이트의 시간 비용보다 높기 때문에 태그에 포함시킬 수있는 좋은 후보입니다.
특정 스타일이 사이트 전체에서 공유되지 않는 페이지가있는 경우 모든 것을 인라인하십시오.
(A)는 스타일 시트 캐싱을 선호하고 들어오는 HTML 페이지의 크기를 줄입니다. 마크 업 유효성 문제를 제거 할 것입니다. – BoltClock
@ Bolt - 마크 업 타당성에 대해 자세히 설명해 주시겠습니까? 축소 된 CSS를 에코 화하는 것이 이미 유효하다고 생각했습니다. – Ben
실은 찰과상이다. 유효성 검사를 망칠 지 확신 할 수 없다. – BoltClock