페이지 속도를 높이는 10가지 방법

소개하다.

현재, 페이지 속도가 큰 문제다.
구글이 구글 로봇의 알고리즘을 바꾸고 신속하고 이동이 편리한 사이트를 고도로 지원한 이후 빠른 사이트를 가지는 것이 더욱 중요해졌다.만약 이것이 아직 나쁘지 않다면, 사용자는 통상적으로 더 적은 시간을 소비하고, 전환이 더욱 적으며, 사이트의 체험도 더욱 느릴 것이다.

페이지 속도란?

페이지 속도는 웹 페이지 내용을 완전히 불러오는 데 필요한 시간을 가리킨다.
주어진 사용자에게 페이지 속도가 느린 원인은 수십 가지가 있을 수 있다.사용자가 기차에서 신호가 미약한 터널을 통과하거나 인터넷이 느릴 수도 있다.
최선의 실천을 통해 우리는 적어도 가능한 한 일을 잘해서 문제를 완화시킬 수 있다.

10페이지 속도 향상

기왕 네가 이것이 무엇인지 알게 된 이상, 나는 너에게 너의 페이지를 가속화하기 위해 무엇을 보아야 하는지 가르쳐 줄 것이다.
이것들은 모두 난이도 순서에 따라 열거한 것이다.어느 때, 당신의 사이트를 최적화하는 데 도움을 줄 개발자가 필요합니다.
카탈로그

#1 - Use a CDN

#2 - Enable GZIP compression

#3 - Use smaller images

#4 - Reduce the number of requests your page makes

#5 - Avoid redirects where possible

#6 - Reduce Time to First Byte

#7 - Reduce and remove render blocking JavaScript

#8 - Minify your CSS and JS

#9 - Remove unused CSS

#10 - Keep track of your site's speed

#1. CDN 사용

CDN은 컨텐트 제공 네트워크를 나타냅니다.CDN을 사용하면 사이트 복제본을 호스팅하는 데 필요한 시간을 크게 줄일 수 있는 세계 각지의 수백 대의 소형 서버를 효과적으로 액세스할 수 있습니다.만약 CDN을 사용하지 않는다면, 웹 사이트의 모든 요청 (이미지, CSS, 자바스크립트 포함) 은 세계 각지에서 서버로 천천히 연결될 것이다.
미국의 4억6천800만개 요청에 따르면 48%의 요청은 CDN이 제공하지 않았다.이는 2억2천400만건이 넘는 요청으로, CDN을 자신의 사이트에 추가하는 데 몇 분 정도 걸리면 50% 이상 빠를 수 있다는 의미다.
CDN을 올바르게 설정했는지 확인해야 합니다. CDN의 캐시가 명중하지 않은 것은 CDN이 원본 서버에 자원을 요청해야 한다는 것을 의미합니다. 이것은 CDN을 사용하는 취지에 어긋납니다.

#2 - GZIP 압축 사용

일부 CDN에서 GZIP 압축은 압축 사용 확인란으로만 표시됩니다.이것은 대략 당신의 사용자가 당신의 사이트를 다운로드하여 사용하는 데 필요한 파일 크기의 절반 정도이며, 당신의 사용자는 이로 인해 당신을 사랑하게 될 것이다.

#3-작은 이미지 사용

이것은 해상도(예를 들어 카메라에서 출력한 4000x3000 픽셀에서 네트워크의 1000x750 픽셀까지)를 낮추고 파일을 압축해서 크기를 줄여야 한다는 것을 의미한다.
만약 당신의 사이트에서Word Press를 사용한다면, 일부 플러그인은 당신이 사진을 올릴 때 자동으로 당신을 도와 완성할 것입니다.
나는 개인적으로 TinyJPG를 사용하여 블로그 글을 쓸 때 이미지를 압축한다.

#4. 페이지의 요청 수 감소

목표는 페이지 상단(컨텐트 축소 위)을 로드하는 데 필요한 요청 수를 줄이는 것입니다.
여기에는 두 가지 사고방식이 있는데 너는 선택할 수 있다.

정교한 애니메이션을 삭제하거나 사이트 체험을 개선할 수 없는 이미지를 삭제함으로써 전체적으로 페이지의 요청 수량을 감소

또는 lazy loading 지연 로드를 통해 우선 순위가 낮은 컨텐츠를 로드할 수 있습니다.

#5 - 가능한 한 리디렉션 방지

방향을 바꾸는 것은 너의 사이트 속도를 크게 떨어뜨릴 것이다.모바일 사용자를 위해 전문적인 하위역을 설정하지 말고 응답식 CSS를 사용하여 한 구역에서 귀하의 사이트에 서비스를 제공합니다.
일부 방향을 바꾸는 것은 불가피하다. 예를 들어 www->root-domain 또는 root-domain->www이다. 그러나 대부분의 데이터는 당신의 사이트를 방문하기 위해 재정비를 겪어서는 안 된다.

#6 - 첫 번째 바이트로 시간 단축

Time to First Byte는 브라우저가 리소스를 요청한 후 서버에서 1바이트 데이터를 받기를 기다리는 시간입니다.
두 부분으로 나뉜다.

서버에 소요된 시간

데이터 전송에 소요되는 시간

서버 쪽 렌더링, 데이터베이스 조회, API 호출, 부하 균형, 응용 프로그램의 실제 코드와 서버 자체의 부하 (특히 저렴한 웹 트레이드를 사용하면 사이트 성능에 영향을 줄 수 있음) 를 최적화함으로써 서버에 걸리는 시간을 개선할 수 있습니다.
CDN을 사용하면 데이터를 보내는 시간을 크게 줄일 수 있다.

#7 - 렌더링 차단을 줄이고 제거하는 JavaScript

외부 스크립트 (특히 마케팅에 사용되는 스크립트) 는 보통 엉망으로 작성되어 페이지가 실행될 때까지 불러오는 것을 막습니다.
외부 스크립트를 비동기식으로 표시하여 이러한 영향을 줄일 수 있습니다.

<script async src="https://example.com/external.js"></script>

사용자가 스크롤을 시작하기 전에 다음을 수행할 수도 있습니다delay the loading of your marketing scripts.

window.addEventListener(
  'scroll',
  () =>
    setTimeout(() => {
      //insert marketing snippets here
    }, 1000),
  { once: true }
);

#8 - 너의 CSS와 JS를 줄여라

축소는 도구를 사용하여 공백, 줄 바꿈, 변수 이름을 삭제하는 것을 의미합니다.일반적으로 이것은 구축 과정의 일부분으로 자동으로 완성될 것이다.

JavaScript의 경우

JavaScript를 축소하려면 UglifyJS를 참조하십시오.

CSS의 경우

CSS를 축소하려면 cssnano를 참조하십시오.

#9 - 사용되지 않는 CSS 제거

크롬 59(2017년 4월 발표) 이후 가능성이 있다see unused JS and CSS in Chrome DevTools.
이 점을 보려면 DevTools를 열고 콘솔 서랍(Esc 키를 눌렀을 때 짜증나는 것들)을 표시하고 왼쪽 아래에 있는 세 점을 클릭한 다음'Coverage'를 엽니다.
다시 불러오는 아이콘이 있는 단추를 누르면 페이지를 새로 고침하고 CSS와 JS의 사용 상황을 심사합니다.
다음은 구글 크롬에서 시작 페이지를 검토할 때의 경우입니다.

#10- 정기적으로 웹 사이트의 속도 추적

사이트의 속도를 낮추는 순간 사이트의 속도 문제를 해결하는 것이 훨씬 쉽다.가장 중요한 것은 사이트 속도를 보는 습관이 들면 복구 속도가 느린 문제가 훨씬 간단해진다는 것이다.
웹 사이트의 속도를 감시할 수 있는 무료 도구가 있는데 그 중 두 가지가 가장 인기 있는 것은 WebPageTest과Google Lighthouse이다.이 도구들의 단점은 변경하기 전과 후에 실행하는 것을 기억해야 한다는 것이다.
PerfBeacon Google Lighthouse를 정기적으로 실행하는 서비스 (본고의 저자가 만든 것) 로 웹 사이트의 운행 속도를 추적할 수 있습니다.

파렴치한 플러그

만약 당신이 전방 네트워크 성능을 어떻게 향상시키는지에 대한 기교를 더 알고 싶다면, 당신은 subscribe to my newsletter 또는 내가 자주 그곳에서 글을 발표할 수 있습니다.