블로그 페이지로드 시간을 줄이는 17 가지 효과적인 팁

게시 됨: 2020-11-10

모든 페이지를로드하는 데 몇 초가 걸리는 사이트를 방문한다고 상상해보십시오.

실망스럽지 않습니까?

사실, 많은 블로거는 이미지 캐 러셀에서 대화 형 위젯에 이르기까지 멋진 시각적 요소를로드 할 때 웹 사이트의 로드 속도 를 무시합니다.

그것은 청중을 감동시키는 방법이 아닙니다.

필요한 것은 빠르게로드되고 가독성을 극대화하며 원하는 정보를 빠르게 전달하는 블로그입니다 .

그들이 원하는 것을 제공하는 방법을 논의합시다.

블로그 로딩 속도 최적화에 대한 궁극적 인 가이드

  • 1. 페이지 로딩 속도가 중요한 이유
    • 1.1 더 많은 트래픽 유지
    • 1.2 전환 증가
    • 1.3 더 높은 검색 엔진 순위
  • 2. 웹 사이트 로딩 속도를 테스트하는 방법
  • 3. 블로그 로딩 시간을 줄이는 방법
    • 3.1 원하지 않는 플러그인 제거
    • 3.2 더 많은 일을하는 플러그인 찾기
    • 3.3 호스팅 계획 업그레이드
    • 3.4 더 나은 테마 선택
    • 3.5 이미지 최적화
    • 3.6 핫 링크 비활성화
    • 3.7 CDN에 투자
    • 3.8 코드 축소
    • 3.9 렌더링 차단 리소스 방지
    • 3.10 홈페이지의 게시물 수 줄이기
    • 3.11 광고로 독자를 넘치지 마십시오
    • 3.12 서버 정리
    • 3.13 웹 사이트 캐싱 활성화
    • 3.14 GZIP 압축 사용
    • 3.15 웹 사이트 데이터베이스 최적화
    • 3.16 사용자 의견 최적화
    • 3.17 상위 페이지에 초점 최적화
  • 4. 결론

페이지 로딩 속도가 중요한 이유

향상된 사용자 경험 외에도 빠른 로딩 속도는 마케팅 관점에서 많은 이점을 제공합니다.

더 많은 트래픽 유지

통계에 따르면 약 40 %의 사용자가 3 초 이내에로드되지 않는 사이트를 떠납니다. 모바일 사용자 에 대해 이야기 할 경우이 수치는 53 %로 증가 합니다.

사용자 이탈률 (3 초)
  • 저장

그리고 당신의 블로그가 왜 그렇게 비참한 이탈률을 가지고 있는지 궁금합니다.

블로그의 로딩 속도를 계속 무시하면 기본적으로 트래픽 잠재력이 약 절반으로 줄어 듭니다.

전환 증가

로드 시간이 1 초 지연되면 전환 수가 7 % 감소한다는 사실을 알고 계셨습니까?

관점을 살펴보면 $ 100 가치의 전환을 확보 할 때마다 $ 7의 손실이 발생합니다.

1 초 지연 효과
  • 저장

거대해 보이지는 않지만 경쟁 업체의 웹 사이트는 몇 번의 클릭 만 있으면됩니다.

독자가 더 나은 사용자 경험을 가진 다른 블로그로 이동하면 결코 뒤돌아 볼 수 없습니다.

더 높은 검색 엔진 순위

모르는 경우를 대비하여 Google과 같은 검색 엔진은 사용자 경험과 관련하여 매우 특별합니다.

그렇기 때문에 그들은 데스크톱뿐만 아니라 모바일 웹 사이트에서도 로딩 속도를 중요한 순위 요소로 간주합니다.

속도와 현서
  • 저장

SEO 또는 검색 엔진 최적화 라는 용어에 익숙하지 않은 경우이 게시물을 사용하여 학습을 시작하는 것이 좋습니다.

지금은 최고의 블로그 성능을 달성하기위한 다음 단계 인 블로그 의 실제로드 속도 측정 을 보여 드리겠습니다 .

웹 사이트 로딩 속도를 테스트하는 방법

웹 사이트가 이미 충분히 빠르게 실행되고 있다고 생각할 수 있지만 Google의 PageSpeed ​​Insights와 같은 도구 만이이를 증명할 수 있습니다.

간단히 말해, 웹 사이트의 속도를 분석하고 속도에 영향을 미치는 문제를 감지하며 유용한 리소스와 함께 제안 목록을 제공하는 성능 최적화 도구입니다.

PageSpeed ​​Insights를 사용하려면 블로그 URL을 입력하고 '분석'을 클릭 하십시오.

페이지 속도 인사이트
  • 저장

PageSpeed ​​Insights가 작동하도록 몇 초만 기다리면됩니다.

완료되면 가장 먼저 찾을 수있는 것은 속도 점수, 로딩 속도에 영향을 미치는 요인, 예상 대기 시간 또는 사용자 입력이 등록되기 전의 지연을 포함하여 웹 사이트 성능에 대한 심층적 인 평가입니다.

pagespeed 통찰력 결과
  • 저장

'모바일' 탭으로 전환하여 모바일 성능을 위해 PageSpeed ​​Insights를 사용할 수도 있습니다. 이 도구는 스마트 폰 및 태블릿에서의 블로그 실적을 반영하는 다른 보고서를 즉시 제공해야합니다.

모바일 용 페이지 속도 인사이트
  • 저장

속도 점수를 아직 찾았습니까?

이제부터 웹 사이트 성능을 측정하는 기본 수단으로 사용하는 것이 좋습니다.

목표는 간단합니다. 속도 점수 척도의 "빠른"끝에 도달하는 데 필요한만큼 최적화를 수행하는 것입니다.

제가 무슨 말을하는지 보여 드리겠습니다.

속도 점수 척도
  • 저장

속도 점수가 최소 85 점이면 충분하다고 읽을 수 있습니다. Facebook과 같은 큰 사이트의 점수가 90 점 미만이라는 점을 감안할 때 실제로는 사실입니다.

Facebook 속도 점수
  • 저장

그러나 틈새 시장을 개척하려는 신진 브랜드로서 " 충분히 좋은 "제품에 정착하는 것은 결코 선택 사항이 아닙니다.

경쟁에서 앞서 나가는 데 도움이되는 기회를 항상 포용해야합니다.

로딩 속도를 높여 웹 사이트에서 사용자 경험을 개선하는 것은 이러한 기회 중 하나입니다.

다음 단계를 수행 할 준비가 되셨습니까? 그럼 시작하겠습니다.

블로그 로딩 시간을 줄이는 방법

이제 페이지 로딩 속도 최적화의 " 이유 "를 다루었으므로 이제 " 방법 "에 대해 이야기 할 차례 입니다. ”

웹 개발에 대해 한두 가지를 알고 있다면 PageSpeed ​​Insights에 표시된 권장 사항을 수행하면 실적 최적화 캠페인을 시작할 수 있습니다. " 실습 데이터 "섹션 바로 아래에서 찾을 수 있습니다.

pagespeed 통찰력 기회
  • 저장

당연히 PageSpeed ​​Insights에서 얻을 수있는 제안은 웹 사이트의 전체 상태에 따라 다릅니다. 그러나 대부분의 일반적인 최적화 권장 사항은 아래에 정리 한 전략 목록에 포함됩니다.

더 이상 고민하지 않고 훨씬 빠르고 수익성이 높은 블로그로의 입증 된 단계는 다음과 같습니다.

1. 원하지 않는 플러그인 제거

WordPress와 같은 블로그 게시 플랫폼 및 콘텐츠 관리 시스템은 일반적으로 즉시 사용할 수있는 플러그인을 대량으로 지원하므로 모든 종류의 기능을 쉽게 구현할 수 있습니다.

온라인 예약 위젯을 제공하고, 사용자 지정 옵트 인 양식을 만들고, 인상적인 랜딩 페이지를 구축 할 수 있습니다.-전체 시간 동안 한 줄의 코드 를 작성하지 않아도됩니다. 통합 검색 창을 사용하여 필요에 맞는 플러그인을 빠르게 찾으십시오.

워드 프레스 플러그인 검색
  • 저장

편의에 대해 이야기하십시오.

그러나 플러그인을 사용하는 것은 양날의 검이 될 수 있습니다.

원하는만큼의 플러그인으로 웹 사이트를로드 할 수는 없습니다.

한 페이지에 너무 많은 플러그인이 있으면 서버 리소스가 소모되고 사이트가 크롤링 속도가 느려질 수 있습니다.

플러그인 라이브러리에 많은 관심을 기울이지 않았다면 비슷한 핵심 기능을 가진 중복 플러그인을 설치했을 가능성이 있습니다.

같은 유형의 플러그인을 여러 개 설치하려고하면 WordPress에서 경고 할 것이라고 생각할 것입니다.

불행히도 그렇지 않습니다.

WordPress 대시 보드에 넣을 수있는 다양한 양식 작성기를 살펴보십시오.

여러 페이지 빌더
  • 저장

좋은 소식은 더 이상 필요하지 않은 플러그인을 비활성화하면 유사한 플러그인 간의 충돌을 쉽게 해결할 수 있다는 것입니다.

이렇게하려면 대시 보드에서 '플러그인' 메뉴를 확장하고 '설치된 플러그인'으로 이동합니다 . 여기에서 필요하지 않은 모든 플러그인을 선택하고 "대량 작업"드롭 다운 메뉴에서 '비활성화' 또는 '삭제' 명령을 적용합니다.

플러그인 제거
  • 저장

유사한 플러그인 간의 충돌 외에도 특정 플러그인 (특히 현재 버전의 WordPress에서 테스트되지 않은 플러그인)으로 인해 대시 보드가 불안정해질 수 있습니다.

" 테스트되지 않은 "플러그인을 피하면서 한 번에 하나의 플러그인을 설치하여이를 방지 할 수 있습니다.

테스트되지 않은 플러그인
  • 저장

WordPress 대시 보드에서 로딩 시간이 길어 지거나 충돌 또는 기타 문제가 발생하면 마지막으로 설치 한 플러그인을 비활성화하십시오. 문제가 지속되면 다른 플러그인으로 인한 것일 수 있습니다.

이때 모든 플러그인을 비활성화하고 범인을 찾을 때까지 하나씩 켤 수 있습니다. 그런 다음 대체 플러그인을 찾거나 최신 버전으로 업데이트하십시오.

2. 더 많은 기능을 제공하는 플러그인 찾기

플러그인을 사용하는 동안 플러그인 선택에 대해 간단히 말씀 드리겠습니다.

WordPress에서는 플러그인이 적을수록 좋습니다.

구현하려는 모든 기능에 대해 새 플러그인을 설치하는 대신 가능한 한 많은 모자를 쓸 수있는 플러그인을 찾으십시오.

예를 들어 연락처 양식, 별점 평가, 리뷰 및 랜딩 페이지 디자인에 별도의 플러그인을 사용하는 대신 이러한 모든 기능을 하나로 통합하는 Elementor Page Builder와 같은 플러그인을 사용하면됩니다.

Elementor 페이지 빌더
  • 저장

CMS에서 초과 플러그인을 제거한 후 웹 사이트가 느리게 실행될 수있는 또 다른 요인을 살펴 보겠습니다.

3. 호스팅 계획 업그레이드

새로운 블로거에게 웹 사이트를위한 1 달러 호스팅 계획은 저항하기가 정말 어렵습니다.

그러나 한 달에 수천이 아니라 수백 명의 방문자를 생성하기 시작하면 호스팅 회사가이 가격대에서 계획을 제공하는 이유를 이해할 수 있습니다.

잦은 속도 저하, 다운 타임, 열악한 고객 지원 등 저렴한 웹 호스팅 솔루션을 선택하는 데 따른 몇 가지 단점이 있습니다. 이는 주로 1 달러 호스팅 서비스가 일반적으로 전력이 부족한 기본 서버 하드웨어를 사용하기 때문입니다.

'블로그에 대해 진지하게 생각한다면 웹 사이트는 가장 저렴한 호스팅 계획보다 더 나은 것을받을 자격이 있습니다.' – Ankit Singla

조사를 수행하고 다음과 같은 많은 긍정적 인 리뷰로 뒷받침되는 웹 호스팅 회사를 찾으십시오.

  • BlueHost
  • HostGator
  • SiteGround
  • WPX 호스팅

의심스러운 경우 Pickuphost와 같은 도구를 사용하여 고려중인 호스트의 속도를 테스트 할 수 있습니다. 드롭 다운 메뉴에서 호스팅 제공 업체를 선택하고 서버 위치를 선택한 다음 '테스트 시작'을 클릭하기 만하면됩니다.

이상적으로는 대상 고객 근처의 서버 위치를 선택해야합니다.

픽업 호스트 속도 테스트
  • 저장

대부분의 호스팅 회사는 공유, 가상 사설 서버 또는 VPS 및 전용을 포함한 여러 계획을 제공합니다.

대부분의 블로그에서 VPS 호스팅 계획은 웹 사이트의 대역폭 요구 사항을 처리하기에 충분해야합니다. 반면에 공유 호스팅 계획은 아직 트래픽이 많지 않은 경우 실행 가능할 수도 있습니다.

먼저 공유 호스팅으로 시작하고 블로그 트래픽이 증가하면 VPS 기반 요금제로 업그레이드하는 것이 좋습니다.

전용 호스팅을 선택하는 유일한 이유는 사이트에 수백 개의 제품이있는 온라인 상점이있는 경우 일 것입니다. 이 경우 VPS 호스트조차도 디지털 상점을 계속 운영하는 데 필요한 대역폭 용량이 없을 수 있습니다.

4. 더 나은 테마 선택

대역폭에 대해 말하면 더 간단하고 미니멀 한 테마를 선택하여 웹 사이트의 대역폭 요구 사항을 줄일 수 있습니다.

WordPress 사용자는 내가 말하는 내용을 즉시 이해해야합니다.

결국 WordPress 테마 라이브러리에는 이미 몇 가지 무료 미니멀리즘 테마가 있습니다. 타사 테마 디자이너조차도 웹 사이트의 성능을 향상시킬 수있는 가벼운 테마를 많이 갖추고 있습니다.

상업 워드 프레스 테마
  • 저장

여기서 핵심은 이미지 슬라이더, 애니메이션 및 CSS 효과와 같은 불필요한 시각적 세부 사항으로 가득 차 있지 않은 테마를 찾는 것입니다.

WordPress 테마 디렉토리를 포함하여 대부분의 테마 마켓 플레이스에서 필수 기능인 테마를 미리 보면서 이러한 요소를 직접 확인할 수 있습니다.

테마 미리보기
  • 저장

Studiopress의 Genesis 자식 테마는 WordPress에서 가장 좋아하는 테마 중 하나입니다. WordPress 버전 5.0 이상의 기본 콘텐츠 편집기 인 Gutenberg 편집기 와도 호환되는 최소한의 모바일 친화적 인 수십 가지 테마를 제공합니다.

더 중요한 것은 이러한 테마가 사이트로드 속도를 높이는 데 도움이된다는 것입니다.

Genesis 테마와 그 이점에 대해 자세히 알아 보려면이 리뷰를 확인해야합니다.

5. 이미지 최적화

웹 사이트의 성능에 영향을 미치는 모든 시각적 요소가 테마에 포함되는 것은 아닙니다.

웹 사이트의 로고, 추천 이미지, 버튼 또는 인포 그래픽 등 웹 사이트에 업로드하는 모든 이미지는 블로그의 대역폭 요구 사항을 부풀려 성능에 영향을줍니다.

그러나 시각적 콘텐츠는 모든 블로그에서 필수 항목이므로 이미지로 게시물을 꾸미는 것을 멈출 수는 없습니다. 대신 Kraken.io와 같은 이미지 압축 도구를 사용하여 눈에 띄는 품질 변화없이 이미지 크기를 줄일 수 있습니다.

크라켄
  • 저장

Kraken.io는 이미지를 대량으로 최적화 할 수있는 무료 클라우드 기반 무손실 압축 도구와 함께 제공됩니다. 이미지를 도구에 끌어다 놓거나 압축 된 폴더를 업로드하여 압축 프로세스를 시작하십시오.

최종 이미지가 흐릿하게 보이지 않도록 압축 모드를 " 무손실 "로 설정하는 것을 잊지 마십시오.

무손실 압축 방법
  • 저장

자체 호스팅 블로거의 경우 WP Smush와 같은 플러그인으로 WordPress 속도를 높여 미디어 라이브러리의 모든 이미지를 한 번에 압축 할 수 있습니다. 시작하려면 대시 보드에서 'Smush' 와 'Bulk Smush Now' 를 클릭하기 만하면됩니다.

대량 스 머시
  • 저장

WP Smush는 이미지가 업로드되는 즉시 자동으로 압축하는 옵션도 제공합니다. 이 기능을 활성화하려면 플러그인 인터페이스의 "설정"섹션에서 '자동 Smush'를 켜십시오.

자동 스 머시
  • 저장

이미지 압축은 나처럼 시각적 콘텐츠의 팬이라면해야 할 일 중 하나 일뿐입니다. 따라서 이미지 최적화 및 SEO에 대한 자세한 가이드를 읽어 보시기 바랍니다.

블로그 이미지 서구
  • 저장

6. 핫 링크 비활성화

무손실 압축을 적용하더라도 이미지는 여전히 서버 리소스를 소모하고 핫 링크 로 인해 사이트 속도를 느리게 할 수 있습니다 .

이것은 다른 사이트가 사용자의 이미지 또는 파일에 직접 링크하는 일반적인 관행이며, 이러한 리소스를 자신의 페이지에 표시 할 수 있습니다.

물론 다른 웹 사이트에서 콘텐츠를 공유하는 것은 올바른 방법으로 수행 할 때 유용합니다. 그러나 핫 링크를 사용하면 이러한 사이트는 궁극적으로 사이트에서 콘텐츠를 가져 와서 지불 한 대역폭을 사용합니다.

이것이 바로 핫 링크를 일반적으로 대역폭 도용 이라고도하는 이유입니다.

다음 코드를“.htaccess 파일”에 추가하여 핫 링크를 한 번에 중지 할 수 있습니다.

gzip on;

gzip_disable“msie6”;

gzip_vary on;

gzip_proxied any;

gzip_comp_level 6;

gzip_buffers 16 8k;

gzip_http_version 1.1;

gzip_types application / javascript application / rss + xml application / vnd.ms-fontobject application / x-font application / x-font-opentype application / x-font-otf application / x-font-truetype application / x-font-ttf application / x-javascript application / xhtml + xml application / xml font / opentype font / otf font / ttf image / svg + xml image / x-icon text / css text / javascript text / plain text / xml;

웹 사이트의 .htaccess 파일을 어디에서 찾을 수 있는지 모르는 사람들은 호스팅 계정의 제어판에서 찾을 수 있습니다.

해야 할 일은 호스팅 서비스의“ 파일 관리자 ”를 찾아 웹 사이트의 루트 폴더로 이동하는 것입니다. .htaccess 파일은 메모장과 비슷한 아이콘과 함께 바로 거기에 있어야합니다.

.htaccess
  • 저장

7. CDN에 투자

이미지 압축 및 핫 링크 방지를 완료 했습니까?

좋은.

이미지를 더 빠르게로드 할 수있는 방법이 있다고 말하면 어떻게됩니까?

콘텐츠 전송 네트워크 또는 CDN을 사용하면 프록시 서버의 전체 네트워크를 활용하여 웹 사이트 데이터를 사용자에게 전송하는 속도를 높일 수 있습니다.

가장 좋은 점은 CDN 서비스 제공 업체가 자신의 서버가 전 세계 주요 위치에 분산되어 있다는 점입니다. 이렇게하면 먼 지역의 방문자가 일반적으로 경험하는 지연 문제가 크게 줄어 듭니다.

콘텐츠 전달 네트워크
  • 저장

웹 호스트와 마찬가지로 블로그 용 CDN을 선택할 때주의해야합니다.

걱정하지 마세요. 사용할 수있는 WordPress 블로그 용 최고의 CDN 서비스 목록을 만들었습니다.

비용과 기능면에서 지금까지 최고의 CDN 중 하나 인 MaxCDN을 개인적으로 보증 할 수 있습니다.

8. 코드 축소

웹 사이트의 대역폭 요구 사항을 증가시킬 수있는 것은 이미지 만이 아닙니다.

HTML, CSS 및 JavaScript와 같은 코드도 웹 페이지 크기에 영향을 줄 수 있습니다.

수정? 공백, 추가 줄 및 주석과 같이 코드 내에서 불필요한 문자를 제거 하여 축소 하십시오.

이러한 문자는 어떤 식 으로든 코드의 기능에 영향을주지 않지만 파일 크기를 증가시킵니다. 결과적으로 브라우저는 페이지를로드 할 때 코드를 다운로드하고 실행하는 데 더 오래 걸립니다.

불필요한 공백
  • 저장

잠시만 기다려주세요. 사이트의 각 코드를 검토하여 불필요한 문자를 하나씩 제거해야합니까?

진정해.

이미지 압축과 마찬가지로이 프로세스를 자동화하는 데 사용할 수있는 도구가 있습니다.

예를 들어 코드 최소화는 몇 초 내에 코드를 다듬을 수있는 무료 도구입니다. 웹 사이트에있는 모든 JavaScript, CSS 및 HTML 파일에서 작동합니다.

축소 코드
  • 저장

WordPress를 사용하는 경우 대안은 W3 Total Cache와 같은 플러그인을 사용하는 것입니다.이 플러그인은 코드 자산을 한 번에 축소 할 수 있습니다.

설치가 완료되면 메인 대시 보드에서 '성능' 을 클릭하고 '최소화' 를 클릭하여 옵션을 확인하십시오.

minifycode 대시 보드
  • 저장

성능 향상을 위해 웹 사이트 코드를 최적화하려면 다음 설정을 사용하는 것이 좋습니다.

  • HTML 축소 설정
  • JS 축소 설정
  • CSS 축소 설정
코드 축소 활성화
  • 저장

모든 최적의 설정에 대해서는이 W3 Total Cache Tutorial을 읽으십시오.

9. 렌더링 차단 리소스 방지

우리는 코드 주제에 대해 다루었으므로 더 고급 사항을 살펴 보겠습니다.

PageSpeed ​​Insights를 실행하고 "렌더링 차단 리소스를 제거"하라는 지시를받은 경우 블로그 성능을 극대화하기 위해 약간의 코딩으로 손을 더럽혀 야 할 수 있습니다.

렌더링 차단 리소스 제거
  • 저장

간단히 말해, 렌더링 차단 리소스는 웹 사이트의 핵심 HTML 콘텐츠로드를 방해하는 코드입니다. 즉, 문제가있는 리소스가로드되지 않으면 로고, 메뉴, 게시물 및 페이지의 기타 필수 요소가로드되지 않습니다.

렌더링 차단 리소스는 스타일 시트, HTML 가져 오기 및 다양한 스크립트가 될 수 있습니다. PageSpeed ​​Insights는 다음 코드의 전체 목록을 제공해야합니다.

렌더링 차단 리소스 목록
  • 저장

렌더링 차단 리소스를 처리하려면 가장 쉬운 단계는 자바 스크립트를 웹 사이트의 HTML 하단 (닫는 "</ body>"태그 바로 앞)으로 이동하는 것입니다.

또한 "defer"속성을 사용하여 HTML이 완전히로드 된 후에 만 스크립트를로드 할 수 있습니다. "<script>"태그 내에 defer = "defer" 를 삽입하면됩니다.

태그 연기
  • 저장

렌더링 차단 리소스와이를 최적화하기 위해 수행 할 수있는 작업에 대한 자세한 내용은이 게시물을 확인하세요.

물론 코드 작업이 불편한 경우 언제든지 웹 개발자의 도움을받을 수 있습니다. 또는 Autoptimize와 같은 플러그인을 사용하여 스크립트를 웹 사이트 바닥 글에 자동으로 연기 할 수 있습니다. 또 다른 WordPress 속도 최적화 플러그인은 작업을 수백 배 더 쉽게 만듭니다.

자동 최적화
  • 저장

10. 홈페이지의 게시물 수 줄이기

다음으로 홈페이지에 표시되는 게시물 수에 대해 이야기하겠습니다.

WordPress 및 블로그 게시 플랫폼과 같은 CMS에는 종종 처음부터 블로그 게시물을 보여주는 많은 테마가 있습니다.

각 게시물에 고품질의 추천 이미지를 사용하면 사용자는 필연적으로 홈페이지를로드하는 데 더 많은 시간이 필요합니다.

나는 개인적으로 좋은 측정을 위해 내 홈페이지에 네 개의 게시물 만 표시합니다.

페이지 당 4 개의 게시물
  • 저장

물론, 브라우저는 이미지가로드되는 동안 블로그 게시물의 제목 (때로는 설명 또는 콘텐츠의 처음 몇 줄 포함)을 가져올 수 있습니다. 그러나 이는 여전히 웹 사이트에서 사용자 경험의 전반적인 유동성을 감소시킵니다.

장점으로는 대부분의 웹 사이트 플랫폼과 CMS를 사용하여 홈페이지에 표시되는 게시물 수를 줄일 수 있습니다.

이를 위해 조정해야하는 설정은 플랫폼마다 다르므로 WordPress에서 어떻게 수행되는지 살펴 보겠습니다.

메인 대시 보드에서 '설정'을 클릭하고 '읽기' 섹션으로 이동합니다.

WordPress 읽기 설정
  • 저장

" 블로그 페이지가 최대 표시 "설정이 즉시 표시되어야합니다. 기본값을 더 작은 숫자로 자유롭게 조정하고 이것이 웹 사이트의 로딩 속도를 향상시키는 지 확인하십시오.

페이지 당 표시되는 블로그 게시물
  • 저장

11. 광고로 독자를 넘치지 마십시오

홈페이지의 게시물 미리보기는 로딩 속도에 부정적인 영향을 미칠 수 있지만 적어도 독자의 경험에 긍정적 인 이점이 있습니다.

그러나 광고는 종종 그렇지 않습니다.

광고가 블로그에서 수익을 창출하는 데 확실히 유용하다는 것은 사실이지만, 한 페이지에 여러 개의 광고가 표시되는 경험을 방해한다면 독자들은 아마 그것을 좋아하지 않을 것입니다. 더 중요한 것은 웹 사이트의 모든 구석에 광고를 설정하면 성능이 저하된다는 것입니다.

광고 및 사이트 속도
  • 저장

즉, 청중이 블로그의 중요한 요소에 집중하고 광고를 최소한으로 유지하는 것이 가장 좋습니다.

제 웹 사이트에서 광고가 전혀없는 것을 볼 수 있듯이 저는 추가 수입을 위해 독자들의 경험을 타협하지 않습니다.

제로 광고
  • 저장

내가 당신이라면 제휴 링크를 주요 수익 창출 전략으로 우선시 할 것입니다. 사용자에게 도움이 될 수있는 제품 또는 서비스를 가리키는 상황 별 링크입니다.

제휴 마케팅으로 어떻게 수익을 창출합니까?

좋은 질문.

관심이 있으시면 제 제휴 마케팅 가이드를 참조하십시오.

12. 서버 정리

이 시점에서 이미 로딩 속도와 웹 사이트의 복잡함 사이의 상관 관계를 파악 했어야합니다.

정말 간단합니다. 블로그를 최소화하고 가볍게 유지하면 브라우저가 모든 것을로드하고 사용자에게 표시하는 데 많은 시간이 걸리지 않습니다.

시각적 콘텐츠, 스크립트, 광고 등 웹 사이트에 더 많은 요소를 추가 할 때는 항상 신중해야합니다. 동시에 웹 사이트를 원활하게 운영 할 수 있도록 호스팅 계정에 충분한 디스크 공간 이 있는지 확인하십시오.

호스팅 계정에는 전체 디스크 사용량을 추적 할 수있는 기본 제공 도구가 있어야합니다. 아이디어를 제공하기 위해 다음은 SiteGround의 디스크 공간 사용 도구의 스크린 샷입니다.

디스크 사용 도구
  • 저장

호스팅 계정의 공간이 부족한 경우 수행 할 수있는 작업은 다음과 같습니다.

  • 로컬 드라이브로 백업 이동
     오래된 웹 사이트는 호스팅 서버에 기가 바이트의 백업을 저장하는 경향이 있습니다. 로컬 드라이브에 다운로드하고 서버에서 삭제하는 것은 공간을 확보하는 좋은 방법입니다.
  • 비활성 계정 삭제
     호스팅 계획에 비활성 계정이 있으면 제거하여 많은 디스크 공간을 절약하십시오. 이것은 되돌릴 수없는 프로세스이므로 삭제하기 전에 먼저 계정의 로컬 백업을 만드는 것이 좋습니다.
  • .TMP 파일 삭제
     웹 사이트 플랫폼 또는 CMS는 플러그인 업데이트 및 세션 데이터 추적과 같은 작업에서 임시 파일을 생성 할 수 있습니다. 삭제하는 것이 안전해야하지만 안전을 위해 "tmp"폴더의 오프라인 백업을 만드는 것도 문제가되지 않습니다.

확실하지 않은 경우 호스팅 서비스 공급자의 고객 지원에 디스크 공간을 절약하는 방법에 대해 문의하십시오.

13. 웹 사이트 캐싱 활성화

이미지 압축, 코드 축소, 광고 축소, 호스팅 계정 정리 등 웹 사이트의 로딩 속도는 이러한 전략을 통해 그 어느 때보 다 빨라야합니다.

하지만 아직 긴장하지 마세요. 웹 사이트의 로딩 속도를 더욱 높일 수있는 몇 가지 전략이 아직 남아 있습니다.

웹 사이트 캐싱을 사용하면 재 방문자를 위해 블로그를 거의 즉시로드 할 수 있습니다.

웹 사이트 캐싱은 스크립트, 이미지, 미디어 파일 및 기타 다운로드 가능한 콘텐츠 형식을 포함한 데이터의 임시 저장을 가능하게하여 브라우저가 작성해야하는 HTTP 요청 수를 줄임으로써 작동합니다.

웹 사이트 캐싱을 구현하려면 긴 방법은 웹 사이트의 .htaccess 파일 상단에 다음 코드를 삽입하는 것입니다.

## 캐싱 종료 ##

<IfModule mod_expires.c>

만료 됨

ExpiresByType image / jpg "액세스 1 년"

ExpiresByType 이미지 / jpeg "액세스 1 년"

ExpiresByType 이미지 / gif "액세스 1 년"

ExpiresByType image / png "액세스 1 년"

ExpiresByType text / css "액세스 1 개월"

ExpiresByType text / html“1 개월 액세스”

ExpiresByType application / pdf“액세스 1 개월”

ExpiresByType text / x-javascript“1 개월 액세스”

ExpiresByType 애플리케이션 / x-shockwave-flash "액세스 1 개월"

ExpiresByType 이미지 / x-icon "액세스 1 년"

ExpiresDefault "액세스 1 개월"

</ IfModule>

## 캐싱 종료 ##

원하는 경우 특정 캐시가 만료되기 전에 다른 시간 제한을 설정할 수 있습니다. 예를 들어 PNG 이미지 캐시의 만료 시간을 1 개월로 줄이려면 "ExpiresByType image / png"줄을 다음과 같이 수정하면됩니다.

ExpiresByType image / png“access 1 month ”

다시 말하지만, WordPress 사용자는 도구를 사용하여이 최적화 전략을 쉽게 만들 수 있습니다. 사실, 우리는 이미 필요한 플러그인 인 W3 Total Cache를 살펴 보았습니다.

WordPress 대시 보드에서 '성능' 하위 메뉴로 돌아가서 '페이지 캐시'로 이동 하여 '게시물 캐시 캐시' 확인란을 선택합니다.

캐시 게시물 페이지
  • 저장

14. GZIP 압축 사용

W3 Total Cache를 닫고이 가이드의 마지막 나머지 전략을 진행하기 전에해야 할 일이 한 가지 더 있습니다.

'성능' 하위 메뉴에서 '브라우저 캐시'로 이동 하여 'HTTP (gzip) 압축 사용' 옵션을 선택합니다.

GZIP 압축 활성화
  • 저장

GZIP 압축은 텍스트 기반 파일의 크기를 줄여 다운로드 속도를 향상시킵니다. 로컬 파일을 압축 폴더로 압축하는 과정과 크게 다르지 않습니다. 웹 사이트 속도 최적화에 GZIP 압축이 널리 채택되는 주된 이유는 1.1 버전부터 HTTP에서 기본적으로 지원되기 때문입니다.

WordPress 또는 GZIP 관련 추가 기능이있는 다른 플랫폼을 사용하지 않는 경우 웹 사이트의 .htaccess 파일 수정 과 같은 전통적인 방법을 사용하여 활성화해야 합니다 .

.htaccess 파일을 찾을 수있는 위치를 이미 알고 있기 때문에 남은 것은 웹 사이트에서 GZIP 압축을 활성화하는 코드뿐입니다.

이동 — 복사하여 붙여 넣으십시오.

Apache 서버

<IfModule mod_deflate.c>

# HTML, CSS, JavaScript, 텍스트, XML 및 글꼴 압축

AddOutputFilterByType DEFLATE 애플리케이션 / 자바 스크립트

AddOutputFilterByType DEFLATE 응용 프로그램 / rss + xml

AddOutputFilterByType DEFLATE application / vnd.ms-fontobject

AddOutputFilterByType DEFLATE 응용 프로그램 / x-font

AddOutputFilterByType DEFLATE 응용 프로그램 / x-font-opentype

AddOutputFilterByType DEFLATE 응용 프로그램 / x-font-otf

AddOutputFilterByType DEFLATE 응용 프로그램 / x-font-truetype

AddOutputFilterByType DEFLATE 응용 프로그램 / x-font-ttf

AddOutputFilterByType DEFLATE 애플리케이션 / x-javascript

AddOutputFilterByType DEFLATE 응용 프로그램 / xhtml + xml

AddOutputFilterByType DEFLATE 응용 프로그램 / xml

AddOutputFilterByType DEFLATE 글꼴 / opentype

AddOutputFilterByType DEFLATE 글꼴 / otf

AddOutputFilterByType DEFLATE 글꼴 / ttf

AddOutputFilterByType DEFLATE 이미지 / svg + xml

AddOutputFilterByType DEFLATE 이미지 / x- 아이콘

AddOutputFilterByType DEFLATE 텍스트 / css

AddOutputFilterByType DEFLATE text / html

AddOutputFilterByType DEFLATE 텍스트 / 자바 스크립트

AddOutputFilterByType DEFLATE 텍스트 / 일반

AddOutputFilterByType DEFLATE 텍스트 / xml

# 브라우저 버그 제거 (정말 오래된 브라우저에만 필요)

BrowserMatch ^ Mozilla / 4 gzip-only-text / html

BrowserMatch ^ Mozilla / 4 \ .0 [678] no-gzip

BrowserMatch \ bMSIE! no-gzip! gzip-only-text / html

헤더 추가 사용자 에이전트 변경

</ IfModule>

NGINX 서버

gzip on;

gzip_disable“msie6”;

gzip_vary on;

gzip_proxied any;

gzip_comp_level 6;

gzip_buffers 16 8k;

gzip_http_version 1.1;

gzip_types application / javascript application / rss + xml application / vnd.ms-fontobject application / x-font application / x-font-opentype application / x-font-otf application / x-font-truetype application / x-font-ttf application / x-javascript application / xhtml + xml application / xml font / opentype font / otf font / ttf image / svg + xml image / x-icon text / css text / javascript text / plain text / xml;

NGINX 사용자의 경우 GZIP을 구현하려면 ".conf"파일에 코드를 붙여 넣어야합니다.

GZIP 압축 테스트

GZIP 압축을 수동으로 활성화 한 경우 GiftOfSpeed의 GZIP 압축 테스트와 같은 도구를 사용하여 성공적인 구현을 확인하십시오.

PageSpeed ​​Insights와 마찬가지로 GZIP 압축 테스트를 사용하는 유일한 단계는 웹 사이트의 URL을 입력하고 '확인' 버튼을 클릭하는 것입니다.

giftofspeed gzip 테스트
  • 저장

도구는 몇 초 내에 웹 사이트에서 GZIP 압축이 활성화되었는지 여부를 확인해야합니다. 또한 압축 전과 후의 크기와 함께 압축률도 표시됩니다.

Gzip 테스트 결과
  • 저장

15. 웹 사이트 데이터베이스 최적화

렌더링 차단 리소스를 수정하고 GZIP 압축을 활성화하는 것은이 게시물에서 가장 발전된 전략 중 하나이지만 아직 완료되지 않았습니다.

다음 단계는 서버가 사용자에게 필요한 데이터를 더 빨리 가져올 수 있도록 MySQL 데이터베이스 테이블 을 최적화하는 것입니다.

MySQL 데이터베이스 테이블이란 무엇입니까?

간단히 말해서 MySQL 데이터베이스에는 게시물, 댓글, 날짜 및 기타 콘텐츠를 포함하여 웹 사이트에서 찾을 수있는 거의 모든 것이 포함되어 있습니다. 블로그 게시 플랫폼과 WordPress와 같은 CMS는 사이트에 더 많은 정보를 추가 할 때 자동으로 데이터베이스에 테이블을 생성합니다.

MySQL 데이터베이스는 다음과 같습니다.

MySQL 데이터베이스 테이블
  • 저장

그러나 데이터베이스는 시간이 지남에 따라 핑백, 스팸 댓글 및 게시물 수정을 포함하여 모든 종류의 정크를 축적합니다. 꾸준히 크기가 커지고 웹 사이트 성능에 영향을 미칩니다.

MySQL 데이터베이스를 정리하기위한 한 가지 옵션은 호스팅 계정의 제어판에서 통합 테이블 최적화 도구를 사용하는 것입니다.

예를 들어 SiteGround에는 'With Selected :' 드롭 다운 메뉴에서 'Optimize tables' 명령이 있습니다.

테이블 최적화
  • 저장

이러한 옵션은 제어판의 "데이터베이스"섹션 아래에있는 "phpMyAdmin"도구에서 찾을 수 있습니다.

phpMyAdmin
  • 저장

경험상 최적화를 수행하기 전에 항상 데이터베이스 백업을 만드십시오. 호스팅 계정의 디스크 공간을 절약하려면 로컬 드라이브에 다운로드하십시오.

서버에서 뭔가 엉망이 될까봐 걱정 되시나요?

WP-Sweep과 같은 WordPress 플러그인을 사용하면 CMS 인터페이스 내에서 데이터베이스 테이블을 최적화 할 수 있습니다. 플러그인을 설치하고 활성화 한 후 '도구' 로 이동하여 '스윕' 을 클릭하여 사이트에서 찾은 데이터베이스 테이블을 확인하십시오.

대시 보드 스윕
  • 저장

여기에서 개별 데이터베이스 항목에 대해 'Sweep' 을 클릭하여 삭제할 수 있습니다. 또는 플러그인 페이지 하단으로 스크롤하여 'Sweep All'을 클릭하십시오 .

스윕 옵션
  • 저장

데이터베이스 테이블의 전체 스윕도 삭제되므로 포스트 초안이 없는지 확인하십시오. 여기에있는 동안 승인되지 않은 댓글을 확인하여 독자가 표명 한 질문, 귀중한 피드백 및 기타 문제를 실수로 제거하지 않도록하십시오.

16. 사용자 의견 최적화

댓글에 대해 말하면 WordPress 블로그에는 Gravatar 또는 Globally Recognized Avatar 서비스를 통해 댓글 작성자의 프로필 사진을 즉시 가져올 수있는 편리한 기능도 있습니다.

gravatars는 블로그의 댓글 섹션에 멋진 터치를 추가하지만 웹 사이트의 로딩 속도에 영향을 미칩니다. 이로 인해 일부 WordPress 블로거가 모두 표시하지 않도록 강제합니다.

동일한 작업을 수행하려면 '설정'으로 이동 한 다음 '토론' 을 클릭하십시오 . 은 "아바타 디스플레이"섹션 optionbelow '쇼 아바타'을 찾아 그것을 선택을 취소합니다.

주석 gravatars 비활성화
  • 저장

그래 바타를 유지하고 싶지만 로딩 속도에 미치는 영향이 마음에 들지 않는 경우, BJ Lazy Load와 같은 플러그인을 사용하여 중요한 웹 사이트 리소스 이후에 아바타가로드되도록 할 수 있습니다.이 프로세스를 지연로드라고 합니다.

아바타 외에도 포스트 썸네일, 이미지, iframe 및 기타 유형의 콘텐츠에 대해 지연로드를 활성화 할 수도 있습니다. '설정' 으로 이동하여 ' BJ Lazy Load' 를 선택한 다음 사용하려는 옵션에서 '예' 를 선택하기 만하면됩니다.

BJ 지연로드 옵션
  • 저장

WordPress 댓글에 관한 한 페이지 로딩 속도를 높이는 방법에 대한 또 다른 팁은 pagination 을 사용하는 것입니다. 이렇게하면 게시물의 댓글이 여러 페이지로 분할되어 브라우저에서 댓글을로드하고 렌더링하는 데 걸리는 시간이 줄어 듭니다.

페이지 매기기를 사용하려면 '토론' 설정 페이지로 돌아가서 ' 페이지 당 X 개의 최상위 댓글이있는 페이지로 댓글 나누기' 옵션을 활성화하면 됩니다.

주석을 페이지로 나누다
  • 저장

페이지 당 표시되는 댓글 수를 기본값 인 50에서 약 10 개로 줄이십시오. 이렇게하면 댓글 및 블로그 콘텐츠의로드 시간이 크게 향상됩니다.

17. 상위 페이지에 집중 최적화

이 게시물을 끝내기 전에 마지막 조언이 있습니다.

가장 인기있는 페이지의 성능 최적화를 시작하십시오 .

트래픽이 거의없는 게시물의 우선 순위를 지정하는 것은 이치에 맞지 않습니다. 반대로, 상위 페이지를 우선 순위로 설정하면 노력이 대부분의 사용자에게 도움이 될 것입니다.

Google Analytics는 상위 페이지를 식별하는 데 도움이되는 또 다른 무료 도구입니다. '동작' 하위 메뉴를 확장하고 '개요'를 클릭하면됩니다.

상위 10 개 페이지는 '페이지'섹션 아래에 표시되어야합니다.

GA 톱 페이지
  • 저장

쉽죠?

Google Analytics를 사용하여 심도있는 키워드 조사를 수행 할 수도 있습니다.이 주제는 Google Analytics로 실적이 가장 좋은 키워드를 찾는 방법에 대한 게시물에서 논의한 주제입니다.

결론

블로거는 사용자 경험을 위해 무엇이든 할 준비가되어 있어야합니다.

웹 사이트의 로딩 속도는 피상적 인 요소처럼 보일 수 있지만, UX 측면뿐만 아니라 SEO 측면에서도 단독으로 블로그의 성공을 만들거나 깨뜨릴 수 있습니다.

이제 위의 모든 전략을 하루에 모두 적용 할 수 없다는 것을 알고 있습니다. 즉,이 페이지를 북마크에 추가하고 더 많은 킬러 블로그 가이드를 위해 공개 Facebook 그룹에 가입하는 것을 잊지 마십시오!

블로그로드 시간 단축
  • 저장