WordPress에서 브라우저 캐싱을 활용하는 방법은 무엇입니까?

게시 됨: 2022-06-25

이 튜토리얼에서는 WordPress의 브라우저 캐싱을 활용하여 사이트 속도를 높이는 방법을 배웁니다.

일반적으로 WordPress 웹 사이트의 속도를 높이는 방법에는 여러 가지가 있지만 웹 사이트 속도 최적화 분석 중에 브라우저 캐싱이 가장 자주 발견되는 문제입니다.

Google PageSpeed ​​Insights, GTMetrix 및 Pingdom을 비롯한 다양한 인터넷 도구를 사용하여 웹사이트의 속도를 추적하고 테스트할 수 있습니다. 그들은 정확한 결과를 제공하고 웹 사이트가 필요한 곳을 보여줍니다. 사이트 속도를 평가하는 동안 "Leverage Browser Caching" 경고를 본 적이 있을 것입니다.

또한 읽을 수 있습니다: 효율적인 캐시 정책으로 정적 자산 제공

목차

브라우저 캐싱 활용이란 무엇입니까?

캐싱은 브라우저가 웹사이트의 캐시 가능한 리소스를 로컬 시스템에 유지하는 시간입니다.

이미지, JavaScript, CSS 및 기타 리소스가 그 중 하나입니다. 컴퓨터에 저장된 캐시 가능한 자료는 누군가가 웹사이트를 볼 때마다 다시 업로드됩니다. 따라서 웹 사이트의 로딩 속도가 눈에 띄게 증가합니다. 사람들은 이러한 이유로 WordPress에서 브라우저 캐싱을 사용하기를 원합니다.

WordPress에서 브라우저 캐싱을 어떻게 활용합니까?

사용자가 특정 도메인에 들어갈 때마다 백그라운드에서 실행되는 수많은 프로세스가 있습니다.

WordPress 웹사이트는 사용자의 브라우저에 전달되는 모든 정보에 의해 표시됩니다. 이러한 웹사이트 요소에는 스크립트, 그래픽, 스타일시트, 콘텐츠 등이 포함됩니다. 필요한 경우 웹사이트의 서버에서 사용자의 브라우저로 전송해야 합니다. 이 프로세스의 단계는 다음과 같습니다.

  1. 방문자의 브라우저에 URL이 입력됩니다.
  2. 브라우저는 웹사이트를 호스팅하는 서버에 요청(HTTP 요청)을 합니다.
  3. 사용자는 서버에서 수집한 데이터를 수신합니다. 사용자는 이 시점에서 속도 저하를 경험하기 시작합니다. 사람들은 스크립의 크기를 최소화하고 이미지 크기를 최적화하고 이러한 속도 저하를 막기 위한 기타 조치를 취할 수 있습니다.
  4. 브라우저는 이제 데이터가 전송된 후 마침내 웹사이트를 표시할 수 있습니다. 사용자가 다른 페이지에 액세스하면 절차가 반복됩니다. 서버가 동시에 많은 수의 요청을 수신하면 성능이 저하될 수 있습니다. 따라서 사람들은 속도를 유지하기 위해 웹사이트를 최적화해야 합니다.
WordPress에서 브라우저 캐싱 활용

웹 브라우저와 소프트웨어 프로그램 모두 캐시된 콘텐츠를 사용합니다. 일시적으로 로컬 디스크에 저장됩니다. "웹 캐시" 또는 "HTTP 캐시"라는 용어는 이 데이터를 나타냅니다. 브라우저는 컴퓨터에서 데이터를 업로드하고 동일한 웹사이트를 방문할 때마다 웹사이트의 콘텐츠를 다운로드합니다.

WordPress 웹 사이트가 브라우저 캐싱을 효과적으로 활용하는지 확인하려면 특정 도구를 사용해야 합니다.

브라우저 캐싱과 서버 캐싱의 차이점 - 2020 - 다른 사람

웹 서버의 로드와 대기 시간을 줄이기 위해 서버 측 웹 캐싱(서버 측 캐싱의 경우 항상 WordPress용 LiteSpeed ​​Cache 권장)에는 앞에 있는 웹 서버의 웹 응답을 저장하는 웹 프록시 사용이 수반되는 경우가 많습니다. 클라이언트 측의 웹 캐싱에는 이전에 액세스한 웹 콘텐츠의 캐시된 복사본을 저장하는 브라우저 기반 캐싱도 포함될 수 있습니다.

이 절차에서는 웹 서버를 사용하여 웹 사이트에 대해 캐시된 웹 페이지를 생성합니다. 앞서 언급한 작업은 주로 서버 측인 웹 페이지 캐싱의 예입니다.

몇 가지 다른 방법으로 서버 캐싱 시스템을 향상시킬 수 있습니다. 최선의 선택은 Apache의 헤더를 업데이트하는 것입니다. 다음 단계는 WordPress 플러그인을 사용하고 CDN을 추가하는 것입니다.

방법 1: WordPress에서 브라우저 캐싱 수동 활용

참고: 이 방법은 LiteSpeed ​​Enterprise 또는 Apache에서만 작동합니다.

.htaccess 파일에 일부 코드를 포함하면 WordPress에서 브라우저 캐싱을 수동으로 활용할 수 있습니다. 세 가지 별개의 목표를 위해 실제로 세 비트의 코드를 추가해야 합니다.

  1. 만료 헤더 추가
  2. 캐시 제어 헤더 추가
  3. ETag 끄기

이 코드를 추가하려면 웹사이트 파일에 대한 액세스 권한이 있어야 합니다. 이 코드는 호스팅 계정 또는 CyberPanel에 로그인하여 수행할 수 있습니다.

CyberPanel 대시보드로 이동

왼쪽 메뉴에서 WordPress -> List WordPress 를 클릭합니다.

WordPress 웹사이트 목록 을 입력합니다. 여기에서 WordPress 사이트 제목 을 클릭하십시오.

이것은 CyberPanel WordPress 관리자 입니다. 파일 관리자를 클릭합니다.

public_html 에서 찾을 수 있습니다. htaccess 파일. htaccess 규칙 은 LiteSpeed ​​Enterprise에서만 지원됩니다. OpenLite Speed는 지원하지 않습니다. 그것을 마우스 오른쪽 버튼으로 클릭하고 CodeMirror 를 클릭하십시오.

의 끝에 다음 코드를 추가합니다. htaccess 파일의 내용을 복사하여 붙여넣습니다. 다른 방법으로 파일을 수정하지 마십시오.

 #Customize expires cache start - adjust the period according to your needs <IfModule mod_expires.c> FileETag MTime Size AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript ExpiresActive On ExpiresByType text/html "access 600 seconds" ExpiresByType application/xhtml+xml "access 600 seconds" ExpiresByType text/css "access 1 month" ExpiresByType text/javascript "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresDefault "access 1 month" </IfModule> #Expires cache end

앞서 언급한 코드는 브라우저에 새 리소스를 다운로드하는 대신 캐시된 정적 리소스 복사본을 전달하도록 지시합니다.

새로 고침/만료 시간도 설정에 포함됩니다.

HTML은 600초가 걸립니다.
한달간 자바스크립트와 CSS
이미지의 경우 1년

방문자는 만료 날짜 덕분에 특정 리소스를 너무 자주 다운로드할 필요가 없습니다. 필요한 경우 만료 시간을 빠르게 변경할 수 있습니다.

리소스가 캐시되는 방법, 캐시되는 위치 및 만료 전 최대 수명에 대한 브라우저 캐싱 정책을 설정하려면 캐시 제어 헤더를 포함해야 합니다. 앞에서 이미 언급했듯이 만료 시간을 반복할 필요가 없습니다.

다음 코드를 붙여넣습니다.

 # BEGIN Cache-Control Headers <IfModule mod_expires.c> <IfModule mod_headers.c> <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(css)$"> Header append Cache-Control "public" </filesMatch> <filesMatch "\.(js)$"> Header append Cache-Control "private" </filesMatch> <filesMatch "\.(x?html?|php)$"> Header append Cache-Control "private, must-revalidate" </filesMatch> </IfModule> </IfModule>

브라우저가 파일 확인 대신 만료 헤더와 캐시 제어를 사용해야 하도록 E-태그 가 비활성화됩니다. 핵심은 다음과 같습니다.

 Turn Etags off <IfModule mod_headers.c> Header unset ETag </IfModule> FileETag None

완료되면 저장 을 클릭합니다.

방법 2: 플러그인을 사용하여 WordPress에서 브라우저 캐싱 활용

한 번의 오류로 웹사이트가 완전히 망가질 수 있으므로 .htaccess 파일을 편집하는 것은 매우 위험할 수 있습니다. 따라서 불필요한 위험을 감수하고 싶지 않다면 W3 Total Cache와 같은 플러그인을 사용할 수 있습니다.

W3 토탈 캐시 플러그인

목적에 가장 적합한 플러그인 중 하나인 W3 Total Cache를 사용하여 브라우저 캐싱을 활용하는 방법은 다음과 같습니다.

WordPress 대시보드 입력

왼쪽 메뉴에서 플러그인 -> 새로 추가 를 클릭합니다.

W3 Total cache 를 검색합니다. 이제 이 플러그인 을 설치하고 활성화 하세요

왼쪽 메뉴에 성능 탭이 나타납니다. 왼쪽 메뉴에서 성능 -> 일반 설정 을 클릭합니다.

브라우저 캐시 까지 아래로 스크롤하여 활성화되었는지 확인하고 변경 사항을 저장 합니다.

이제 왼쪽 메뉴에서 성능 -> 브라우저 캐시 를 클릭합니다.

확인

  1. 만료 헤더 설정
  2. 캐시 제어 설정
  3. 엔티티 태그 설정

활성화됩니다. 모든 변경 사항을 저장 합니다.

LiteSpeed ​​캐시 플러그인

CyberPanel은 모든 WordPress 사이트 배포 시 기본적으로 모든 사용자에게 LiteSpeed ​​Cache를 제공합니다. CyberPanel을 사용하지 않는 경우 여기에서 다운로드할 수 있습니다.

기능을 켜기만 하면 캐싱 플러그인 LiteSpeed ​​Cache를 사용하여 브라우저 캐싱을 활용할 수 있습니다.

WordPress 대시보드 로 이동

왼쪽 메뉴에서 LiteSpeed ​​Cache -> Cache 를 클릭합니다.

상단 표시줄에서 브라우저 탭을 클릭합니다.

브라우저 캐시 가 활성화되어 있는지 확인하고 변경 사항 저장 을 클릭하십시오.

결론

플러그인을 설치한 후 변경 사항을 바로 알아차리지 못하는 경우가 있음을 기억하십시오. CSS/Stylesheet 파일은 이 지연에 대한 책임이 있습니다. 컴퓨터에 이미 저장한 브라우저 캐시로 인해 변경 사항을 볼 수 없습니다. 여러 번 수정한 후 웹사이트를 올바르게 보려면 브라우저의 시크릿 기능을 사용하여 웹사이트를 보는 것이 좋습니다. 이 기능을 사용하면 캐시 리소스를 소비하지 않으며 변경 사항을 명확하게 알 수 있습니다.

브라우저 캐싱을 활용하기 위해 선택한 접근 방식은 궁극적으로 관련이 없습니다. 행동을 관찰하는 것이 중요합니다. WordPress의 브라우저 캐싱 활용이 의도한 대로 작동하는 한 거기에 도달하는 데 사용한 방법은 관련이 없습니다. 옳고 그른 접근은 없습니다. 선택에 관계없이 결과는 동일합니다. 브라우저 캐싱을 활용하면 .htaccess 파일을 변경하든 플러그인을 사용하든 로딩 시간을 단축할 수 있습니다.