웹 사이트 속도 최적화 : 2020 년에 수행하는 방법 # 단계별

약 10 년 전 Google은 사이트 속도가 웹 검색 순위에 영향을 줄 것이라고 발표했습니다. 게시물에서 속도가 순위에 미치는 영향을 명확하게 밝히지는 않았지만 발표를 읽는 웹 마스터는 웹 사이트 속도 최적화가 개발 계획의 최상위에 있어야 함을 이해했습니다..


이외에 속도 최적화의 SEO 이점, 웹 사이트에 남아있는 사용자 수를 결정하는 데 페이지로드 시간이 중요합니다. HubSpot은 전환 감소는 페이지로드 시간 증가와 관련이 있습니다. –로드 시간이 1 초 지연되면 전환이 ~ 20-30 % 감소 할 수 있음!

웹 사이트 속도 최적화 안내서

지난 몇 년 동안 평균 페이지 크기가 증가했습니다. 실제로 2018 년, 평균적으로 페이지 크기가 2MB를 초과했습니다.! 이 페이지로드의 상당 부분은 이미지, 정적 파일 및 비디오로 구성됩니다..

최소한 웹 사이트의 크기와 전체 사이트 속도는 중요합니다. 페이지로드가 계속 증가하더라도 사이트 처리 방식을 개선하기 위해 수행 할 수있는 작업이 있습니다. 이 포스트는 모든 것을 논의합니다.

웹 사이트 속도 최적화 : 시작하기 전에 필요한 것

이 게시물은 이미 두 가지 중요한 사항을 처리했다고 가정합니다.

  • WordPress 자체에 많은 팽창을 유발하지 않는 최적화 된 테마를 사용합니다..
  • 당신은 충분히 빠른 호스트에 있습니다.

이 두 상자를 선택하면 다음 섹션으로 진행하여 웹 사이트로드 시간을 최소화하기 위해 수행 할 수있는 포괄적 인 작업 목록을 탐색 할 수 있습니다..

웹 사이트 속도 최적화 시작하기

웹 페이지의 해부학

해부

빠른 속도로 웹 페이지를 최적화하는 방법은 웹 페이지로 들어오는 내용을 이해하는 것입니다. 가장 인기있는 구성 요소를 살펴 보겠습니다.

  • 웹 페이지에 구조와 내용을 제공하는 HTML 코드 – WordPress가 사이트에서 파티를 실행하더라도 데이터베이스에있는 모든 내용 (모든 내용)을 정적 HTML 출력으로 변환하기 만하면됩니다.
  • 디자인, 기능 및 대화 형 작업을 돕는 정적 파일 (CSS, JavaScript)
  • 배경, 로고 및 내용 이미지

페이지를 렌더링하기 위해 브라우저는 웹 페이지의 각 요소 (HTML, 정적 파일, 이미지, 외부 컨텐츠 형식의 페이지 자체)를 요청합니다. 따라서 HTTP 요청 또한 웹 사이트 속도 최적화에 중요한 역할을합니다.

현재 위치 파악 : 웹 사이트 속도 최적화 도구

웹 사이트 최적화에 도움이되는 특정 기술로 넘어 가기 전에 잠시 웹 페이지 속도 분석에 도움이되는 도구를 검토하겠습니다..

간단한 테스트 도구를 찾는 초보자라면 Pingdom 도구 당신의 웹 사이트의 빠른 평가를위한 한 벌. 보다 완벽한 솔루션을 원하신다면 Google의 Page Speed ​​Insights.

핑돔 속도 테스트속도 테스트를위한 Pingdom 도구

그 외에도 브라우저 플러그인 형태의 빠른 옵션을 찾고 있다면 시도해 볼 수 있습니다 YSlow, 웹 사이트를 테스트하고 브라우저 내에서 제안을 제공합니다. 또한 GTmetrix 도구 YSlow의 테스트 결과를 보고서에 활용.

�� 사이트 속도를 테스트하기위한 추가 옵션을 원한다면이 게시물 목록 최고의 속도 확인 도구 5 가지.

이 게시물에 나열된 기술을 살펴보기 전에 벤치 마크 역할을하기 위해 여기에 나열된 도구 중 하나에서 웹 사이트를 실행하십시오. 웹 사이트 속도를 최적화하자마자 도구로 돌아가서 속도 향상을 확인하십시오.

1 단계 : 정적 파일 최적화

이 안내서의 첫 번째 단계는 정적 파일의 최적화에 초점을 맞추고 있습니다. 가장 일반적으로 스타일 시트 (CSS 파일) 및 스크립트 (JS 파일) 형식입니다..

(a) CSS를 머리로, JS를 아래로 이동

가장 먼저 수행해야 할 최적화는 스타일 시트가 페이지 구조의 섹션으로 이동하는 반면 모든 스크립트는 페이지의 닫는 태그 바로 위로 이동하는 것입니다. 이것의 논리는 간단합니다.

  • 일반적으로 스타일 시트는 스크립트보다 크기가 작습니다.
  • 브라우저가 페이지 본문을 렌더링하기 전에 스타일 시트가 태그에로드되면 페이지에 렌더링되는 모든 요소의 스타일이 적절합니다.
  • 페이지의 내용이로드되면 스크립트의 기능은 일반적으로 작동하므로 스크립트는 일반적으로 맨 아래에 배치 할 수 있습니다

이 방법을 사용하면 웹 사이트 방문자가 페이지가로드되기를 기다리는 동안 좌절감을 느끼지 않습니다..

스크립트 부분을 빠르게 처리하기 위해 WordPress 용 Scripts to Footer 플러그인을 설치할 수 있습니다. 그것은 자동 조종 장치에서 작동하고 잘 작동합니다.


바닥 글에 스크립트 바닥 글에 스크립트

저자 : 조슈아 데이비드 넬슨

현재 버전 : 0.6.4.1

최종 업데이트 : 2020 년 4 월 15 일

scripts-to-footerphp.0.6.4.1.zip


94 % 등급


20,000 회 이상 설치


3.1.0 필요

(b) 축소 설정

축소는 파일에서 실행에 필요하지 않은 부분을 제거하는 프로세스입니다. 예를 들어, 스타일 시트 나 스크립트에서 다음을 실행할 필요가 없습니다.

  • 들여 쓰기를위한 공백
  • 코멘트
  • 긴 함수 및 변수 이름
  • 사용하지 않은 코드

축소는 정적 파일의 크기를 줄임으로써 크게 도움이됩니다. 다음과 같은 서비스를 사용하여 파일을 축소 할 수 있습니다 작게 하다, 또는 이들 중 하나를 설치 워드 프레스의 축소 플러그인.

(c) 비동기 로딩 사용

웹 브라우저는 웹 페이지에 나타날 때 순차적으로 리소스를 렌더링하고 요청합니다. 이를 동기 로딩이라고합니다. 그러나 다음을 사용하여 브라우저의이 기본 기능을 변경할 수 있습니다 비동기 속성 가능한 빨리 리소스를로드합니다. 예를 들어 다음과 같이 스크립트를 비동기 적으로로드 할 수 있습니다.

여기 WordPress에서 비동기 로딩을 도와주는 플러그인 목록.

(d) GZIP 압축 사용

GZip 압축은 HTTP 요청을 통해 리소스를 압축하는 기술입니다. GZip 압축을 사용하면 서버는 압축 된 리소스 파일을 전송하여 웹 페이지를 렌더링하는 동안 브라우저가 압축을 풉니 다.

리소스를 압축 및 압축 해제하는 데 필요한 시간과 리소스는 서버에서 클라이언트로 더 작은 파일을 전송하는 데 절약되는 시간과 대역폭보다 중요합니다. 이 기술은 페이지를 더 빨리로드 할뿐만 아니라 서버 비용을 절약합니다..

GZip 압축은 WP Fastest Cache와 같은 몇 가지 WordPress 캐싱 플러그인의 일부입니다.

(e) 인기있는 라이브러리에 Google CDN 사용

이 단계의 최종 최적화 기술은 사이트에서 사용되는 공통 라이브러리를 가져올 때 Google 또는 Microsoft CDN을 사용하기 위해. 이 CDN의 인기로 인해 방문자가 브라우저에 이미 캐시 된 버전의 리소스를 가지고있을 가능성이 있습니다..

2 단계 : 이미지 최적화

위에서 논의한 바와 같이, 수년간 웹 페이지의 크기가 증가하는 주요 원인은 이미지입니다..

CodeinWP의 고유 번호도 살펴보십시오.

이미지로드

따라서, 이미지를 처리하면 웹 사이트 속도가 가장 크게 향상됩니다., 그리고 그것은.

이미지는 웹 사이트에 필수적이지만 웹에 최고 품질의 이미지를 사용하는 것은 권장되지 않습니다. 공정한 시각적 품질을 제공하면서 크기를 크게 줄 이도록 이미지를 압축해야합니다..

이를 위해 몇 가지 작업을 수행하고 웹 사이트 속도 최적화를 염두에 두십시오.

(a) 적절한 크기의 이미지 업로드

현재 테마에 표시 할 수있는 최대 이미지 크기가 치수별로있을 수 있습니다. 그것이 무엇인지 확인한 다음 그보다 최대 두 배 큰 이미지 만 업로드하십시오..

왜 두 번? 또한 테마가 이미지의 망막 품질 버전을 표시 할 수 있습니다.

(b) 올바른 유형의 이미지를 사용하십시오.

웹에서 가장 일반적으로 사용되는 이미지 유형은 JPG 및 PNG입니다..

그들은 비슷하지 않다.

  • JPG 이미지는 색상 정보가 많은 사진 및 기타 복잡한 이미지를위한 것입니다
  • PNG 이미지는 인터페이스 스크린 샷과 같이 색상 정보가 거의없는 그래픽에 적합합니다..

PNG 이미지의 예테마

(c) 업로드하기 전에 이미지를 로컬에서 최적화

사이트에 이미지를 업로드하기 전에 사용할 수있는 다양한 도구가 있습니다.

tinypng
이미지 최적화

(d) 게으른 이미지로드

이미지를 최적화하는 또 다른 기술은 지연 로딩으로, 방문자가 이미지를보기 위해 아래로 스크롤 할 때까지 이미지를 다운로드하지 않는 방법입니다..

게으른 데모CodeinWP의 지연 로딩 데모

사이트에 이미지를 느리게로드하는 방법에 대한 전체 안내서.

(e) 이미지 최적화 플러그인 받기

마지막으로 워드 프레스 사이트를위한 고품질 이미지 최적화 플러그인이 있어야합니다. 어떤 시스템을 사용 하느냐에 따라 자동 조종 장치에서 이미지 최적화 요구 사항을 대부분 얻을 수 있습니다..

여기에 최고의 이미지 최적화 플러그인 6 개 비교.

빠른 추천이 필요한 경우 당사에서 직접 확인하십시오. 최적. 무료 플랜의 CDN 외에도 매우 효율적인 이미지 압축을 제공합니다! Optimole은 또한 주요 경쟁사와 비교할 때 몇 가지 훌륭한 결과를 제공합니다.

PNG 최적화 결과

최적화 최적화 후 압축 원래 플러그인 PNG 크기
최적301KB34KB88.7 %손실과 무손실
상상하다301KB67KB77.7 %로시
TinyPNG301KB79.7 KB73.5 %로시
숏 픽셀301KB90.4KB69.96 %로시
스 머시301KB247KB17.9 %무손실
EWWW301KB257.4 KB14.6 %무손실

JPG 최적화 결과

최적화 후 플러그인 원래 JPG 크기 최적화 % 압축
숏 픽셀518KB169 킬로바이트67.36 %로시
TinyPNG518KB248.6 KB52 %로시
최적518KB274KB47 %손실과 무손실
상상하다518KB338.7KB34.64 %로시
EWWW518KB488.9KB5.7 %무손실
스 머시518KB493 KB4.9 %무손실


Optimole의 이미지 최적화 및 지연로드 이미지 최적화 & Optimole의 지연로드

저자 : 최적

현재 버전 : 2.3.1

최종 업데이트 : 2020 년 4 월 21 일

optimole-wp.zip


96 % 등급


50,000 회 이상 설치


WP 4.7+ 필요

3 단계 : HTTP 요청 최적화

이 글의 앞부분에서 사용자 브라우저가 웹 페이지로드를 시작할 때 실제 전송은 개별 HTTP 요청을 통해 수행된다고 설명했습니다. 단일 요청이 각 리소스를 가져옵니다. 따라서 이러한 요청 수가 증가하면 웹 페이지의로드 시간이 늘어납니다..

사이트 요청웹 페이지의 HTTP 요청

(a) 파일 결합

HTTP 요청의로드를 최소화하는 첫 번째 작업은 유사한 리소스를 결합하는 것입니다. 리소스를 축소 할 때 유사한 파일을 함께 결합 할 수 있습니다. 예를 들어, 모든 스타일 시트 (CSS 파일) 및 모든 사용자 정의 JavaScript 파일을 단일 파일로 결합 할 수 있습니다. 이렇게하면 클라이언트가 모든 리소스를로드하기 위해해야하는 요청 수가 줄어 듭니다..

다시, 이것들 WordPress 용 축소 플러그인 당신이 그것을 도울 수 있습니다.

(b) DNS 조회 최소화

www.codeinwp.com과 같은 도메인에 HTTP 요청을하면 서버의 IP 주소를 찾기 위해 DNS (도메인 이름 시스템) 조회가 수행됩니다. 결과적으로 웹 사이트 로딩 속도를 높이기 위해 모든 요청에서 DNS 조회 수를 최소화하는 것이 목표입니다..

여기에 Kinsta의 멋진 가이드 그렇게하는 방법에.

(c) 연결 유지 활성화

최적화없이 브라우저는 모든 리소스에 대해 단일 HTTP 요청을 보냅니다. 다운로드가 완료되면이 연결이 종료됩니다. 그런 다음 브라우저는 서버에 새로운 리소스를 새로 요청합니다. 연결 유지는 리소스 다운로드가 완료 될 때 요청을 종료하지 않는 기술입니다.

다음과 같은 방법으로 생명 유지를 활성화 할 수 있습니다.

(d) 리디렉션 최소화

리디렉션은 클라이언트를 한 위치에서 다른 리소스 위치로 자동으로 이동시키는 지침입니다. 각 리디렉션은 웹 페이지의로드 시간을 증가 시키며 반드시 필요한 경우가 아니면 코드에서 리디렉션을 피해야합니다.

(e) CDN 사용

CDN (content delivery network)은 광범위한 지리적 위치에 존재하는 웹 서버 모음으로 클라이언트에게 컨텐츠를 빠르고 효율적으로 제공합니다..

리소스를 요청하는 클라이언트에게는 지리적으로 클라이언트 위치와 가장 가까운 서버에서 리소스가 제공됩니다. 이렇게하면 요청한 콘텐츠가 가능한 가장 짧은 시간에 클라이언트에 도달합니다.!

Google은 WordPress 사이트를위한 최고의 CDN 솔루션과 별표 표시 방법에 대한 정보를 비교하는 별도의 리소스를 보유하고 있습니다..

4 단계 : 캐싱

캐싱에 대한 섹션이 없으면 웹 사이트 속도 최적화 안내서가 존재할 수 없습니다. GZip 압축 및 축소와 같은 앞에서 설명한 일부 기술은 오늘날 많은 캐싱 솔루션의 일부입니다..

캐싱은 필요할 때 빠르게 검색 할 수 있도록 리소스를 임시 저장소에 저장하는 현상을 말합니다. 다양한 형태의 캐싱이 있습니다.

  • 페이지 캐싱 : 서버에 저장된 페이지의 정적 HTML 버전
  • 데이터베이스 캐싱 : 서버에 저장된 일반적인 데이터베이스 쿼리 (예 : 사이트의 상위 10 개 게시물)의 결과
  • 브라우저 캐싱 : 페이지의 일부를 브라우저에 저장

이 게시물에서 가장 인기있는 WordPress 캐싱 플러그인을 비교했습니다. TL; DR : 체크 아웃 WP 로켓 완벽한 솔루션을 찾고 있다면. 또는 무료 인 것을 선호하는 경우 다음에 대한 가이드가 있습니다. W3 총 캐시를 구성하는 방법.

5 단계 : 모바일 최적화

이 기사의 앞부분에서 우리는 데스크탑 및 모바일과 관련된 최적화 기술에 대해 논의했습니다. 그러나 모바일 컨텐츠의 소비가 증가하고 있으며, 작은 화면으로 인해 새로운 과제가 발생하고 있습니다. 따라서이 섹션에서는 모바일 장치의 웹 사이트 속도 최적화 방법에 대해 설명합니다..

모바일 최적화는 웹 페이지의 모바일 방문자가 데스크톱과 동일한 기능과 효율성을 경험할 수 있도록하는 관행을 말합니다. 다음 목록에는 모바일 장치 용 웹 콘텐츠를 관리하기위한 특정 위생 요소가 포함되어 있습니다.

  • 반응 형 웹 디자인을 사용하여 다른 장치가 다른 버전의 웹 페이지를 얻도록 보장
  • 모바일 장치에서 지원하지 않을 수 있으므로 플래시 및 팝업 사용을 피하십시오
  • 링크와 같은 상호 작용을 서로 너무 가까이 배치하지 마십시오

이러한 요소 외에도 AMP (Accelerated Mobile Pages)는 여러 장치에서 빠르고 일관된 컨텐츠를 만드는 것을 목표로하는 프로젝트입니다..

다음은 WordPress에서 AMP를 시작하는 방법에 대한 안내서입니다.


AMP

저자 : AMP 프로젝트 기고자


74 % 등급


500,000+ 설치


WP 4.9 이상 필요

더 많은 정보

amp.1.5.3.zip

현재 버전 : 1.5.3

최종 업데이트 : 2020 년 4 월 15 일


74 % 등급


500,000+ 설치


WP 4.9 이상 필요

WordPress.org 플러그인 페이지


AMP

결론

이 가이드가 사이트의 전체 웹 사이트 속도 최적화 수준을 개선하기 위해 수행해야 할 작업에 대한 팁을 제공했으면합니다.

간단히 요약하면; 먼저 개선 할 특정 영역을 다루기 위해 웹 페이지의 구조를 살펴 보았습니다. 그런 다음 최적화를 위해 특정 단계로 넘어갔습니다.

  • 1 단계에서는 스타일 시트 및 스크립트 형식으로 정적 파일 최적화에 대해 설명했습니다.
  • 2 단계 : 이미지 해결 및 최적화
  • 3 단계는 HTTP 요청을 최적화하는 기술에 관한 것입니다.
  • 4 단계에서는 몇 가지 인기있는 캐싱 기술에 대해 설명했습니다
  • 5 단계는 모바일 장치에 대한 최적화를 다루었습니다.

웹 사이트 속도 최적화와 관련하여 어려움을 겪고있는 것이 있습니까? 아래 의견에 알려주십시오.

WordPress 사이트 속도를 높이기위한 충돌 과정에 참여하는 것을 잊지 마십시오. 몇 가지 간단한 수정으로로드 시간을 50-80 % 줄일 수 있습니다.

Karol K의 레이아웃, 프리젠 테이션 및 편집.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map