사이트 로딩 속도. 4가지 주요 요인.

태그: 검색 엔진 최적화

사이트 로딩 속도. 다운로드 속도를 높이는 방법은 무엇입니까? 주요 문제.

추천 사이트 로딩 속도 Google - 2초. (그리고 지금 당신의 속도를 봐)

(웹사이트 로딩 속도는 어떻게 확인하나요?가장 쉽고 빠른 방법은 개발자 도구 CTRL+SHIFT+I그런 다음 "네트워크" 탭을 선택한 다음 페이지를 새로고침하여 페이지를 새로 고치는 데 필요한 다운로드 속도를 확인합니다. 캐시 없이 새로 고침: CTRL + F5 / CTRL + R을 눌러야 합니다. 그리고 아래는 다운로드 속도입니다.)

사이트 로딩 속도 확인
Google 서비스 사용: PageSpeed Insights

가장 큰 영향을 미치는 주요 사항:

은닉처
CSS (스타일)
JS (스크립트)
이미지 (그들의 무게, 크기 - 예, 정확히 HxW 크기, 메타 데이터 - 예, 그런 것이 있습니다. 이것은 날짜, 제목, 주제 등과 같은 정보입니다.)

특별히 영향을 끼치지 않거나 무시할 수 있는 작은 순간들에 대해 불필요한 정보를 많이 그리지 않기 위해 나는 그것들에 대해 쓰지 않겠습니다.

#1 현금

캐싱 (또는은닉처) 데이터가 저장되는 버퍼(장소)입니다. 우리의 경우 그림, 코드, 스타일 등이 있습니다.

제일 쉬운 스스로 할 수 있는 것은 호스팅에서 캐싱을 활성화합니다.
(만약 당신이 Ukraine.com.ua 호스팅을 가지고 있다면, 당신은 "사이트 설정" -> "기본 설정"으로 이동해야 하며 "캐싱" 항목이 있을 것이고 거기에서 당신의 사이트가 필요한 시간을 선택합니다 나 자신에서는 2주로 설정하는 것이 좋습니다. 이 캐싱 기간으로 Google 페이지 속도 통계에 많은 포인트가 추가됩니다.)

htaccess, 브라우저 태그 등과 관련된 다른 방법은 인터넷에서 꽤 많은 기사를 찾을 수 있으며 다시 칠할 의미가 없습니다. Habré에 대한 기사에서 캐싱 유형에 대해 읽을 수 있습니다.

#2 CSS(스타일)

CSS - (Cascading Style Sheets - CSS 스타일 시트).
스타일로 무엇을 할 수 있습니까?
잘 먼저 그들을 짜내십시오.
두 번째로 파일 수를 줄입니다. 서버에 대한 호출 수를 줄이기 위해 가능한 한 많이 병합합니다.
세 번째로첫 번째 화면의 보이는 부분의 표시에 영향을 미치는 주요 스타일을 에 직접 포함하고 나머지는 파일에 남겨둡니다.

또한 몇 가지 유용한 링크를 남깁니다.

CSS 압축 서비스
CSS 파일을 압축하는 방법

#3 JS(스크립트)

여기에 스크립트를 최적화하는 몇 가지 방법도 있습니다.

스크립트 로딩 연기. 가능한 한 낮추고 뒤에 두거나 더 낮추면 도움이 되지만 때로는 선택 사항이 아닐 수도 있습니다. 그러나 포인트 번호 2가 구출됩니다.
비동기 – 비동기 스크립트 로딩. 이것은 "async" 매개변수를 사용하여 수행됩니다.
```
<스크립트 src="1.js" 비동기>
```
여기에 비동기에 대한 자세한 내용이 있습니다.
JS와 그 영향에 대한 추가 정보.
사소한 점.
JS도 압축할 수 있습니다. 또한 1개의 파일로 병합합니다.

#4 사진

항상 세 가지를 할 수 있습니다. 불 보기, 물 보기, 사진 최적화하기.

주제가 상당히 광범위하므로 중요한 정보만 제공하려고 합니다.

무게를 최적화하십시오.

어떻게? 프로그램이나 서비스를 통해

사진으로 대량 작업을위한 프로그램 패스트 스톤 이미지그것으로 당신은 할 수 있습니다
대량 이미지 크기 조정. 이미 구글링을 하는 방법과 내용은 어렵지 않습니다.
Faststone 이미지를 다운로드합니다.
이미지 크기 줄이기 서비스 - 팬더. 또는 오히려 TinyPNG 및 TinyJPG.
온라인의 주요 장점. 파일을 업로드하고 압축된 버전으로 되돌리기만 하면 됩니다. 품질은 전혀 저하되지 않습니다(Magic).
링크: tinypng.com 및 tinyjpg.com

크기를 최적화합니다.

위에서 작성한대로 크기는 프로그램을 사용하여 변경할 수 있습니다 빠른 돌 이미지입니다.
크기는 높이 x 무게(높이 x 너비)입니다.

예시:

크기	픽셀	파일 크기
100x100	10 000	39KB
200x200	40 000	156KB
300 x 300	90 000	351KB
500x500	250 000	977KB
800x800	640 000	2500KB

(이에 대해 더 알고 싶다면 이 주제에 대한 Google의 도움말을 읽을 수 있습니다. Google의 ARTICLE이지만 어느 정도는 엉터리임을 경고합니다)

예를 들어 2개의 이미지가 있습니다.
1) 무게 100kb, 크기 500x500
2) 무게 100kb, 크기 2500x2500
무슨 차이가 있는 것 같고 무게도 같기 때문에 로딩도 똑같이 복잡하거나 간단해야 하지만 구글 페이지 속도 정보로 확인하면 거기에 없었고 여전히 더 높은 해상도에서 맹세할 것입니다. 영상.

요약: 크기가 중요합니다. 무게도. (나머지는 그다지 중요하지 않지만 일부 전문가의 주장에 따르면 영향도 있습니다. 이제 Image Metadata에 대해 이야기하고 있습니다.)

메타데이터에 대해서는 딱히 글을 쓴게 아니라 글쎄요...
범례에 따르면 모든 이미지에 대한 모든 메타 데이터를 지우면 크기를 2배 줄일 수 있습니다. 나는 최근에 알았다 (파일 크기의 영향에 대해서는 상당히 미미하다고 생각함).

릴리스에 대해 간략하게: