귀하의 웹 사이트 속도를 높이는 8 팁

업데이트 : 03 년 2021 월 XNUMX 일 / 기사 작성자 : Timothy Shim

비록 제가 확신 할 수있는 것이 하나도 없다하더라도, 한 가지 확실한 점은 당신의 인생에서 고통스럽고 느린 웹 사이트가 적어도 한 번은 발생했습니다. 익숙한 소리가 들리면 지난 몇 년 동안 얻은 몇 가지 도움말을 전달하여 웹 사이트 속도를 높일 수 있습니다.

웹 사이트 속도가 중요한지 확신 할 수없는 경우 사이트가로드 될 때까지 기다리는 동안 브라우저 창을 닫은 시간을 생각해보십시오. 사실 53 %의 사람들이 3 초 이상로드하는 웹 사이트를 포기합니다.

그리고, 귀하의 웹 사이트 성능 중요한 것은 검색 엔진 순위에 영향을 미칩니다. 예를 들어, Google은 빠른 웹 사이트를 선호하며 검색 결과에서 높은 순위를 제공합니다.

다른 업계의 평균 웹 페이지로드 시간 ( ).

웹 사이트 속도 테스트

성능을 개선하기 위해 사이트를 조정할 수있는 광범위한 범위가 있습니다. 일부는 옵션을 토글하는 것만 큼 간단 할 수 있지만 다른 것은 더 복잡합니다. 여전히, 당신이 그들을 고려한다면 모든 프로세스는 시간이 걸릴 수 있습니다.

한 번에 모든 변경을 수행하는 대신 성능 개선에 느리고 점진적으로 접근하는 것이 가장 좋습니다. 기술 기반의 모든 것과 마찬가지로 무언가 잘못 될 가능성이 있습니다.

시간이 지남에 따라 변경 사항을 구현하고 테스트와 함께 문서화하면 사이트를 사용할 수 없게되거나 충돌을 일으킬 수있는 변경 사항을 더 쉽게 식별 할 수 있습니다. 저를 믿으십시오 – 그것은 결국 일어날 것입니다.

웹 사이트 속도 테스트 도구

시작하려면 먼저 사이트로드 속도를 테스트하십시오. 권장 도구는 다음과 같습니다.

  • WebPageTest: 일반적인 운영 체제를 실행하는 실제 브라우저에서 웹 페이지 성능을 수집합니다.
  • 핑덤: 웹 사이트 실적에서 병목 현상을 분석하고 발견하는 데 도움이됩니다.
  • GTmetrix: 웹 페이지 속도를 최적화하는 최선의 방법을 분석하고 실용적인 통찰력을 제공하십시오.
  • 비트 캣차: 8 개국의 사이트 속도를 확인하십시오.
사이트 속도 측정기를 사용하면 현재 사이트가 얼마나 잘 최적화되었는지 확인할 수 있습니다.

다음은 웹 사이트 속도를 높이는 방법입니다.

1. 멋진 웹 호스트 선택

제 경험상, 웹 호스팅은 아마도 가장 중요한 선택 중 하나 일 것입니다. 웹 사이트 호스팅. 웹 호스트가 있고 우수한 웹 호스트. 각 웹 호스트는 서로 다른 기능을 가지므로 독점적 인 캐싱 기술, 솔리드 스테이트 드라이브 또는 중요 영역 제어와 같은 핵심 항목을 찾아보십시오. Nginx에.

나는 충분히 이것을 강조 할 수 없다. 귀하의 웹 호스트 선택은 매우 중요합니다. 만약 당신이 그들에게 익숙하지 않다면 우리의 포괄적 인 호스팅 리뷰 정보에 입각 한 결정을하도록 안내합니다.

나는 당신이 고려하는 것이 좋습니다 더 나은 웹 호스트로 전환 TTFB가 지속적으로 너무 높다는 것을 발견하면.

체크 아웃 Jerry의 최고의 웹 호스팅 회사 목록.

2. 축소 : 더 작은 것이 더 낫다.

오늘날 웹 사이트가 자바 스크립트 및 CSS 파일로 넘쳐나는 것은 일반적입니다. 이렇게하면 방문 중에 많은 HTTP 요청이 발생하여 사이트 속도가 상당히 느려질 수 있습니다. 이것이 바로 소출이 일어나는 곳입니다.

Javascript 및 CSS 파일을 축소하는 것은 모든 스크립트를 하나의 단일 파일 (각 유형의 파일)로 결합하여 수행됩니다. 이것은 쉬운 일이 아니지만 걱정하지 마세요, 당신을 위해 이것을 처리 할 수있는 WordPress 플러그인이 있습니다.

다음 중 하나를 시도해보십시오. Autoptimize, 빠른 속도 최소화 or 병합 + 축소 + 새로 고침

미세화로 인해 코드가 뒤죽박죽으로 보일 수 있습니다. 놀라지 마십시오! 이것은 정상입니다.

3. KISS 원리 따르기

이것은 일반적으로 대부분의 웹 전문가가 가르치는 내용이 아니지만 여러면에서 매우 유용하다는 것을 알았습니다. KISS는“Keep it simple, stupid”의 약자입니다. 그것은 단순한 시스템의 효율성을 강조한 1960 년대의 몇몇 현명한 챕터에 의해 만들어졌습니다.

엄지 손가락의 규칙에 따라, 나는 이것이 삶의 거의 모든 것에 적용된다는 것을 안다. 지나치게 복잡한 구현 및 디자인을 피함으로써 신속하고 중요하게 관리 및 유지가 용이 한 사이트의 이점을 누릴 수 있습니다.

디자인 및 비주얼

당신의 디자인과 시각적 인면을 간결하게 유지함으로써, 나는 주로 오버 헤드를 줄이는 형태로 진행됩니다. 거대한 숨 막힐듯한 이미지와 멋진 비디오가 많은 사이트는 나쁜 날에 나태처럼 빨리로드 될 것입니다. 깔끔하고 깔끔하게 유지하고 다양한 페이지에서 비디오 및 이미지로드를 분리하십시오.

코드 및 플러그인

WordPress는 매우 모듈 식이며 사용하기가 쉽기 때문에 멋진 일입니다. 어떤 일을 하던지간에 누군가가 이미 그 플러그인을 디자인했습니다..

흥미로운 점은 플러그인으로 사이트에 과부하가 걸리지 않도록주의하십시오. 각 플러그인은 다른 사람 (그리고 아마 다른 회사)이 디자인 한 것임을 기억하십시오. 그들의 목적은 특정 목표를 달성하는 것이지 사이트 실적을 간소화하는 것이 아닙니다.

가능한 경우 직접 관리 할 수있는 플러그인을 피하십시오. 예를 들어 테이블을 텍스트에 삽입하는 데 도움이되는 플러그인을 예로 들어 보겠습니다. 플러그인을 사용하지 않고 표를 그리는 기본 HTML 코드를 쉽게 배울 수 있습니다. 맞습니까?

일부 개별 플러그인은 사이트 속도를 크게 저하시킬 수 있으므로 새 플러그인을 설치할 때마다 속도 테스트를 수행하십시오!

4. 콘텐츠 전달 네트워크의 활용

저에게 Content Delivery Networks는 신들의 선물입니다. 같은 회사 CloudflareLimeLight Networks 다른 사람들이 전 세계에 위치한 서버 네트워크를 통해 안정적이고 빠른 컨텐츠 전달을 즐길 수 있도록 도와줌으로써 생계를 꾸려 나가십시오.

CDN을 사용하면 방문자가 어디서 왔는지에 상관없이 웹 페이지를 훨씬 빠르게 제공하고 로딩 속도를 향상시킬 수 있습니다.

그 외에도 CDN을 사용하면 다음과 같은 악의적 인 공격으로부터 보호 할 수 있습니다. 분산 서비스 거부 (DDoS).

작은 웹 사이트의 소유자 인 경우 Cloudflare에는 잘 작동하는 무료 옵션이 있습니다. 기업과 대규모 사이트는 더 나은 계획을 세우기 위해 비용을 지불해야하지만 CDN의 장점을 감안할 때 그만한 가치가 있습니다!

팁 : 여기 다른 기사에서 Cloudflare에 대해 자세히 알아보십시오.

5. 캐싱 활용

캐싱은 정적 파일을 저장하는 것과 똑같습니다. 방문자가 따라 오면 사이트는 이전에 구축 된 페이지에서 공유 할 수 있으므로 처리 시간이 단축됩니다. 대부분의 경우 관심을 가져야 할 것은 서버 측 캐싱입니다.

서버 측 캐싱을 구현하는 가장 효율적인 방법은 아파치 or Nginx에 섬기는 사람. 이러한 문서를 검토하고 서버 캐싱을 설정하는 데 도움이되는 올바른 설정을 찾아야합니다.

엄지의 규칙은 가능한 많은 서버 지원 작업 (처리)이 필요한 모든 것을 캐시해야한다는 것입니다.

플러그인이 너무 이상 해지면 플러그인도 또 다른 옵션이지만이 경우에는 플러그인을 사용하지 않는 것이 좋습니다.

팁 : WordPress 사이트의 경우 다음을 확인하세요. 빠른 성과. 코딩 지식이없는 사용자는 Swift Performance로 몇 번의 클릭만으로 WordPress 사이트를 최적화 할 수 있습니다. 플러그인은 다양한 WordPress 속도 문제를 조정하고 WEBP 형식으로 무제한 이미지를 자동으로 생성하는 데 도움이됩니다.

6. 이미지 돼지 대역폭, 당신의 최적화!

이것은 KISS 원칙에 따라 거대한 이미지와 비디오에 대한 나의 초기 호언 장담을 조금 연장 한 것입니다. 그 점을 감안할 때 영상을 사이트를 멋지게 보이게하는 열쇠임을 이해합니다. 우리가 사용을 완전히 피할 수는 없으므로 사용하는 이미지가 가능한 한 간소화되었는지 확인하십시오.

웹 콘텐츠는 대부분 이미지의 기본 부분입니다. 죽어가는 돼지와 같은 부하에 직면 한 대부분의 웹 사이트는 실제 목적을 달성하지 못하는 방대한 이미지로 인해 종종 끌려옵니다.

더 큰 이미지를 가질 수는 없지만 이미지를 업로드하기 전에 제대로 최적화되었는지 확인하는 것이 아닙니다.

당신이 이것을 할 수있는 두 가지 방법이 있습니다. 다시 말하지만 첫 번째 플러그인은 WP Smush or 빠른 성과. 대안 또는 WordPress를 사용하지 않는 사용자는 다음과 같은 타사 이미지 최적화 도구를 사용할 수 있습니다. 이미지 압축기 or JPEG 최적화 도구.

대부분의 이미지 최적화 도구를 사용하면 이미지의 해상도 세부 정보를 미세하게 조정할 수 있으므로 점차적으로 색조를 낮출 수 있습니다. 훈련받지 않은 사람의 눈에는 거의 비슷하지만 크기는 훨씬 작습니다.

팁 : WEBP 이미지는 기존 JPEG 이미지보다 1.5 배 더 빠르게로드되며 현재 94 % 웹 브라우저에서 지원. 가능할 때마다 사이트에 WEBP 이미지를 제공해야합니다.

HD 이미지의 영역이 확대됩니다 (왼쪽). 원본은 2.3MB이었고 최적화 후 331kb로 축소되었습니다!

7. gzip 압축 사용

이미지 압축이나 아카이브 (ZIP 또는 RAR)에 대해 들어 본 적이 있다면 아마도 gzip 압축의 이론에 익숙 할 것입니다. 이렇게하면 웹 사이트 코드가 압축되어 최대 300 %의 속도 향상을 얻을 수 있습니다 (결과는 다양합니다).

이것과 같은 기술적 인 것조차도, 바로 갈 수 있고 다음과 같은 플러그인을 사용할 수 있습니다. PageSpeed ​​Ninja. 그러나 .htaccess 파일을 한 번만 편집하면 훨씬 효율적인 방법이 있습니다.

.htaccess 파일에 아래 코드를 추가하면 설정됩니다.

# HTML, CSS, JavaScript, 텍스트, XML 및 글꼴 압축 AddOutputFilterByType DEFLATE application / javascript AddOutputFilterByType DEFLATE application / rss + xml AddOutputFilterByType DEFLATE application / vnd.ms-fontobject AddOutputFilterByType DEFLATE application / x-font AddOutputFilterByType DEFLATE application / x-font-opentype AddOutputFilterByType DEFLATE application / x-font-otf AddOutputFilterByType DEFLATE application / x-font-truetype AddOutputFilterByType DEFLATE application / x-font-ttf AddOutputFilterByType DEFLATE application / x-javascript AddOutputFilterByType DEFLATE application / xhtml + xml AddOutputFilterByType DEFLATE application / xml AddOutputFilterByType DEFLATE font / opentype AddOutputFilterByType DEFLATE font / otf AddOutputFilterByType DEFLATE font / ttf AddOutputFilterByType DEFLATE image / svg + xml AddOutputFilterByType DEFLATE image / x-icon AddOutputFilterByType DEFLATE text / css AddOutputFilterByType DEFLATE text / html AddOutputFilterByType DEFLATE text / javascript AddOutputFilterByType DEF LATE 텍스트 / 일반 AddOutputFilterByType DEFLATE 텍스트 / xml

* 참고 : .htaccess 파일에 현재있는 내용을 아래 코드에 추가해야합니다.

8. 리디렉션 줄이기

일반적으로 브라우저는 다양한 형태의 주소를 받아 들여 서버에서 공식 주소로 변환합니다. 예를 들어 보자. www.example.com 및 example.com. 두 사이트 모두 동일한 사이트로 이동할 수 있지만 서버는 공식적으로 인식 된 주소로 리디렉션해야합니다.

리다이렉션은 시간과 자원을 필요로하므로 사이트 리디렉션을 통해 사이트에 도달 할 수 있는지 확인해야합니다. 이것을 사용하십시오 리디렉션 매퍼 네가 제대로하고 있는지 알아봐.

이 권리를 수행하는 복잡성과 지속적으로 관련된 시간을 감안할 때 이것은 한 번만 다음과 같은 플러그인을 사용하는 것이 좋습니다. 리디렉션.

얼마나 빠른가?

Google PageSpeed ​​Insight
Google PageSpeed ​​Insight는 검색 거인이 귀하의 사이트 실적을 보는 방식에 대한 훌륭한 벤치 마크입니다.

방문자 경험 외에도 웹 사이트 성능도 검색 순위의 가시성에 영향을줍니다. 검색의 왕은 Google이므로 목표로 삼고 싶은 바입니다. 그들에 따르면 사이트는 XNUMX 초 안에 이상적으로로드되어야합니다.

불행히도 많은 사이트가 여전히이 벤치 마크를 충족하지 않습니다. 실제로,로드하는 데 5 ~ 6 분 정도 걸리는 일부 사이트를 측정했습니다. 즉, 사이트를로드하는 데 7 초 이상 걸리는 경우 이미 Google에 비해 너무 오래 걸립니다.

보다 빠른 웹 사이트 방문자 및 Google 유지하기

오늘날의 광대역 속도는 모바일에서도 매우 증가하여 훨씬 더 늘어날 것입니다. 즉, 웹 사이트 소유자가 느린 로딩 사이트를 방문하도록 방문자를 남겨 둘 변명의 여지가 거의 없음을 의미합니다.

저를 믿으십시오, 당신은 잃는 방문자를 계속할 것이고 어느 시점에서, 당신이 "Oh로 알려질 저 나쁜 명망을 얻습니다. 웹 사이트 ". 온라인 사업을하는 경우, 자신의 황금 거위를 죽일 것이기 때문에 악화 될 수 있습니다.

위의 8 팁은 절대로 모두가 끝나지는 않지만 모든 것을 끝내고 조금 더 잘 관리하는 방법에 대한 아이디어를 제공해야합니다. 오늘 웹 사이트를 빠르게하고 고객이나 방문자를 유지하십시오.

끝내지 마라. 웹 사이트.

관련 독서

Timothy Shim 정보

Timothy Shim은 작가, 편집자 및 기술 괴짜입니다. 정보 기술 분야에서 경력을 쌓기 시작하면서 그는 빠르게 인쇄물을 발견하고 ComputerWorld, PC.com, Business Today 및 The Asian Banker를 포함한 국제, 지역 및 국내 언론 매체에서 근무했습니다. 그의 전문 기술은 소비자 관점뿐만 아니라 기업 관점에서 기술 분야에 자리 잡고 있습니다.