웹 사이트가 가능한 빨리로드하는 것이 매우 중요합니다. 사용자는보고 싶은 페이지를 빠르게보고 싶어하며, 만족할 수 없다면 다른 곳에서 페이지를 찾을 것입니다. 이 기사에서는 웹 페이지 속도를 높이는 5 가지 간단하고 효과적인 기술에 대한 토론을 볼 수 있습니다.
웹 사이트의로드 시간을 아는 것은 무엇이 잘못되는지 결정하기 전에 첫 번째 단계입니다. 또한 웹 사이트 속도를 변경 해야하는지 알려줍니다.
시작하기 전에 YSLOW를 아직 설치하지 않은 경우 설치하십시오. Mozilla Firefox의 확장이며 아래 링크에서 찾을 수 있습니다.
먼저, 6 개의 개정 웹 사이트를 찾아 보자. 우리는 모두 같은 예제를 사용하여 테스트합니다 (새 탭이나 브라우저 창에서만 열면).
브라우저에는 주행 거리계의 열이 있습니다 (그림 1과 같이). 그 옆에 웹 페이지가로드를 마치면 Yslow와 숫자가 표시됩니다. 숫자는 브라우저가 웹 사이트를로드하는 데 걸리는 시간 (초)을 나타냅니다. 우리는이 숫자가 가능한 한 낮기를 원합니다.
그림 1 : 웹 페이지 로딩 시간을 보여주는 YSLOW 아이콘 및 주행 거리계
대부분의 경우, 웹 페이지의 긴로드 시간을 유발하는 하나 또는 이유가 있습니다.
나중에 논의하겠습니다.
자신의 웹 사이트의로드 시간이 표시되도록하려면 일부 웹 사이트를 찾아보십시오. Google, Facebook 및 원하는 블로그 및 웹 사이트를 확인하십시오. 웹 사이트가 사용하는 이미지가 많을수록 JS 페이지의 응답 시간이 길어질 수 있습니다.
Yslow는 얼마나 빨리로드되는지 측정하는 것 외에도 웹 사이트 성능을 향상시키기 위해 할 수있는 일과 웹 사이트의로드 성능 부족과 같은 심층적 인 통찰력을 제공합니다.
아래 그림은 '성능'탭입니다 (그림 2와 같이). 그러나 클릭하면 로딩 시간과 전반적인 성능에 영향을 미치는 각 영역의 세부 사항이 표시됩니다.
그림 2 : 성능 태그
이 분야에서 가장 주관적인 선택은 CDN (Content Distribution Network)을 사용하는 것입니다 .CDN은 대형 웹 사이트에 매우 효과적입니다. 그들이하는 일은 다양한 지역의 서버에 웹 사이트 콘텐츠를 전파하는 것입니다. 물리적 서버가 웹 사이트를로드하는 사용자에 가까울수록 페이지가 더 빠릅니다. 따라서 본질적으로 CDN을 사용하는 것은 서버에서 가장 가까운 페이지 사용자로 컨텐츠를 배포하는 것입니다.
그림 3 : 성능 태그는 문자 (A, B, C, D, F)를 사용하여 성적 및 현재 성적 (1-100)을 나타냅니다.
CDN을 사용하는 것 외에도 비용이 많이 드는 것 외에도 다른 모든 것이 가능합니다.
각 레벨 요인을 통해 실행합시다. 여기 각 레벨 필드에 대한 간단한 두 번째 속도와 이러한 문제를 해결하여 최적의 성능을 달성하는 방법이 있습니다.
HTTP 요청 감소 : 웹 페이지가 서버에서 파일을 얻으면 HTTP 요청이 생성됩니다. 이 범위에는 스크립트, CSS 파일, 사진 및 비동기 클라이언트/서버 요청 (AJAX 및 기타 변화하는 기술)이 포함됩니다. 이것이 성능에 대해 이야기 할 때 핵심 요점이지만 약간의 노력으로 쉽게 해결할 수 있습니다. 예를 들어, 사용자 컴퓨터의 파일을 캐시하는 스크립트, CS 및 이미지를 최대한 병합하는 것이 도움이됩니다.
용어 헤더 추가 : 페이지 로딩 시간의 80%는 다운로드 스크립트, 사진 및 CSS와 관련이 있습니다. 대부분의 경우 이러한 요소는 사용자의 컴퓨터에서 변경되지 않습니다. 사용자의 로컬 컴퓨터에서 .htaccess의 코드를 캐시 할 수 있습니다 (기사의 뒷부분에서 작동하는 방법에 대해 논의 할 것입니다).
GZIP 구성 요소 : Gziping 또는 압축 된 JS 파일, 그림, HTML 문서, CSS 문서 등 사용자는 작은 파일 버전을 다운로드하여 웹 페이지의로드 속도를 높일 수 있습니다. 이렇게하면 서버 소비가 줄어들 수 있지만 감압 구성 요소는 사용자의 브라우저에 따라 페이지 응답이 느려질 수 있습니다.
CSS를 상단에 넣으십시오 . CSS 파일을 웹 사이트 상단에 넣으면 이미지 및 텍스트와 같은 다른 부분을 동시에로드 할 수 있습니다.
하단에 JS를 넣으십시오 : CSS를 문서의 헤드에 넣으면 <boby>를 닫기 전에 JS를 삽입하면됩니다. 이 스크립트는 백그라운드에로드되지만 사용자는 먼저 겉보기에 완전한 페이지를 얻습니다.
CSS 표현을 피하십시오 . CSS 표현식 (동적 피처라고 함)을 사용한 적이 없습니다. 이는 IE8을 기준으로 프로그래밍 개념 (제어/조건부 구조와 같은)을 추가하는 CSS 기능인 Trident 레이아웃 엔진 (IE에 사용)이 더 이상 지원되지 않습니다. 어쨌든, 그들은 사용하기에 좋은 생각이 없습니다. 어느 정도까지 PHP 스크립트를 사용하여 임의의 숫자, 시간 또는 브라우저와 같은 다른 조건에 따라 다른 CSS 스타일 규칙을로드합니다.
JS 및 CSS에 대한 외부 통화 : JS 및 CSS 파일을 외부 파일에 넣고 브라우저는 각 호출보다 빠른 페이지로드 속도로 캐시합니다.
DNS 검색 감소 : 사용자가 브라우저 주소 표시 줄에 도메인 이름을 입력하는 한 브라우저는 항상 IP 주소를 검색하는 DNS를 수행합니다. 웹 사이트가 더 많을수록 DNS 검색이 더 필요합니다. 레벨을 최대한 낮게 유지하고 평균 60-100 밀리 초의 DNS 쿼리를 수행하십시오.
JS 확대 : 일반적인 GZIP 압축과 달리 JS 문서의 축구는 불필요한 공간, 탭 및 Zhonghe Yang의 기타 선택 문자를 제거하고 파일의 총 크기를 줄이고 더 작은 페이지가로드 속도가 빨라질 수 있습니다. JSMIN을 사용하여 JavaScript를 확대 할 수 있습니다.
리디렉션을 피하십시오 : 서버 헤더 리디렉션, JS 리디렉션 또는 HTML 요소 리디렉션이든. 웹 사이트에 빈 페이지의 헤더와 새 페이지가로드됩니다. 사용자는 필요한 페이지를 얻는 데 점점 더 많은 시간을 소비하므로 모든 비용으로 피해야합니다.
중복 스크립트 제거 : 동일한 스크립트를로드하는 브라우저는 페이지의로드 시간이 증가합니다. 이는 매우 간단한 수학 문제이며 더 많은 파일이 더 많은로드 시간과 같습니다. jQuery를 두 번 또는 3 번 또는 다른 스크립트로 호출하지 않도록 웹 사이트를 두 번 확인하십시오.그 일이 많았을 때, 웹 사이트의 성능을 높이기 위해 다른 기술에 들어가기 직전에 Yslow의 다음 탭으로 넘어 갑시다.
그림 4 : 부품 레이블.
부품 태그 (그림 4에 표시된 바와 같이)는 웹 사이트 로딩 속도 증가의 효과에 대한 통찰력을 제공 할 수 있습니다. 여기서는 현재 문서를로드 해야하는 시간, 이러한 파일이 압축되는 경우 응답 시간 및 사용자 시스템에 캐시 된 경우 및 캐시가 만료되는 경우를 확인할 수 있습니다. 이것은 성능과 속도 최적화를 측정하여 웹 사이트를 잘 평가 한 것입니다. 마지막으로, 통계 태그 (그림 4에 표시된대로)는 모든 HTTP 요청, 동시에 다운로드 된 문서 및 캐시 된 파일을 보여줍니다. 빈 캐시는 브라우저가 렌더링 페이지를 다운로드 해야하는 파일을 표시합니다. 반면에 Primed Cache는 사용자의 브라우저 캐시에 이미 존재하는 파일 목록을 표시하므로 브라우저의 요청이 다시 파일을 다운로드하지 않아도됩니다.
그림 5 : 통계 탭.