2021년 WordPress에서 브라우저 캐싱 활용을 수정하는 방법

WordPress에서 브라우저 캐싱 활용을 수정하는 방법

소개

웹사이트가 느리게 로드됩니까? WordPress에서 브라우저 캐싱 활용 경고를 해결 하기 위한 효과적인 솔루션을 찾고 있습니까? 페이지 속도는 사용자 경험의 필수적인 측면입니다. 이 게시물에서는 WordPress에서 브라우저 캐싱 활용을 수정하는 방법에 대한 기본에서 고급 포인트까지 공유합니다. 따라서이 문제에 직면하고 있다면 더 나은 이해를 위해 전체 게시물을 읽어야합니다.

사용자의 브라우저에서 요청된 페이지를 로드하는 데 걸리는 시간은 예를 들어 판매를 완료하기 위해 사용자가 사이트에 남아 있다는 사실에 큰 영향을 미칩니다. 페이지 로드 시간은 여러 요인에 따라 달라집니다. 브라우저 캐시가 그 중 하나입니다.

먼저 브라우저 캐싱 활용이 무엇이며 웹사이트 속도를 높이는 데 도움이 될 수 있는지 살펴보겠습니다. 따라서 WordPress 사이트에 브라우저 캐싱이 필요한지 평가하는 방법을 살펴보겠습니다. 마지막으로 플러그인을 사용하거나 사용하지 않고 WordPress에서 브라우저 캐싱 활용 경고를 해결하는 몇 가지 방법을 살펴보겠습니다.

레버리지 브라우저 캐싱이란 무엇입니까?

캐시는 임시 저장 공간입니다. 방문자가 웹사이트에서 페이지를 요청하면 서버는 데이터베이스에서 필요한 정보를 수집하여 HTML 문서로 구성하여 브라우저에 제공합니다. 브라우저는 이 문서를 분석하고 모든 관련 리소스를 다운로드하여 페이지를 봅니다.

캐싱은 페이지의 페이로드 일부를 캐시에 저장하여 향후 페이지 로드 속도를 높이는 과정입니다. 캐시는 방문자의 서버 또는 장치에 있을 수 있습니다.

서버 캐시에는 요청된 페이지에 대한 데이터베이스 쿼리와 정적 HTML 응답을 저장할 수 있습니다.

브라우저 캐싱 활용은 지정된 기간 동안 스타일 시트, 스크립트 및 이미지와 같은 리소스를 저장하기 위해 방문자의 장치에서 임시 저장 활용 프로세스입니다.

이후에 페이지를 방문하면 사용자가 페이지를 요청할 때마다 브라우저가 동일한 리소스를 반복적으로 다운로드합니다. 이러한 정적 리소스는 WordPress 사이트에 대한 상당한 양의 페이로드를 구성하므로 브라우저 캐싱은 페이지 로드 시간을 줄입니다.

브라우저 캐싱이 필요합니까?

페이로드 리소스 크기 분포에 대한 웹사이트 확인은 일반적으로 리소스의 크기와 페이지를 표시하기 전에 브라우저가 리소스를 다운로드하기 위해 보내야 하는 요청 수를 보여줍니다. 웹 페이지의 상당 부분이 정적 파일로 구성되어 있다는 사실을 알게 되면 브라우저를 캐싱하여 페이지 속도를 향상시키는 것을 고려해야 합니다.

브라우저 캐싱이 필요한지 여부를 결정하는 보다 자연스러운 방법은 GTmetrix와 같은 페이지 속도 테스트 도구를 사용하는 것입니다. 웹사이트의 URL을 입력하기만 하면 자세한 테스트를 시작할 수 있습니다. 테스트 결과는 웹사이트 속도를 높이는 방법을 보여줍니다. 보시다시피 결과 섹션의 일반적인 경고는 브라우저 캐싱 활용입니다.

또는 페이지 속도 테스트 도구인 Think with Google을 사용하여 모바일 장치에서 웹사이트를 평가할 수 있습니다. 이 도구의 주요 권장 사항은 웹 사이트의 브라우저 캐싱을 활용하는 것입니다.

웹사이트 페이지 속도를 테스트하기 위한 또 다른 Google 도구인 PageSpeed ​​​​Insights는 페이지 속도를 개선하기 위해 효과적인 캐시 정책을 만들 것을 제안할 수 있습니다. 브라우저 캐싱은 효과적인 캐시 정책의 중요한 부분입니다.

플러그인 없이 WordPress에서 브라우저 캐싱 활용 경고 해결

플러그인을 사용하지 않으려면 웹 서버 설정을 변경하여 브라우저 캐싱 활용을 수정할 수 있습니다. 이 경우 웹 서버는 방문자의 브라우저에 브라우저 캐시에 특정 리소스를 저장하도록 지시합니다. 브라우저는 이러한 파일을 특정 기간 동안 로컬에 저장하고 이후에 페이지를 방문할 때 사용합니다.

방문자의 브라우저에 캐싱을 시작하도록 지시하는 웹 서버 설정은 서버마다 다릅니다. 이 게시물에서는 가장 많이 사용되는 두 웹 서버인 Apache와 Nginx에서 브라우저 캐싱을 활성화하는 방법을 보여줍니다.

다음 단계에 따라 브라우저 캐싱 활용을 수정할 수 있습니다.

1. Expires 헤더 추가: 이 헤더는 서버에서 새 버전의 리소스를 요청할 때 브라우저에 알려줍니다.
2. 캐시 확인 헤더 변경: 이 헤더를 사용하여 캐시 기준을 설정할 수 있습니다.
3. 엔티티 태그 헤더(ETags) 설정: 로컬 파일과 비교하여 서버의 리소스가 변경되었는지 식별할 수 있습니다.

Apache에서 브라우저 캐싱 활용 수정

1. .htaccess 파일 생성 또는 편집

Apache 서버에서는 .htaccess 파일에 필요한 모든 매개변수를 설정할 수 있습니다. 이 파일을 사용하면 Apache 설정을 수동으로 구성할 수 있습니다. Apache 매개변수를 저장하고 해당 파일이 있는 디렉토리에 대한 권한 및 구성을 설정하는 간단한 텍스트 파일입니다.

더 읽어보기: 페이지 내 SEO 체크리스트: 순위를 높이는 10가지 실행 가능한 최적화 팁

.htaccess 파일을 웹사이트의 선두 디렉토리에 넣으면 해당 규칙이 사이트의 모든 페이지에 적용됩니다. 하위 디렉토리 중 하나에 다른 .htaccess 파일을 배치하여 해당 위치에 대해서만 특정 권한을 설정할 수도 있습니다. 하위 수준 의 .htaccess 파일 은 루트 디렉터리에 있는 .htaccess 파일의 설정 보다 우선 합니다.

서버에 대한 터미널 액세스 권한이 있는 경우 원격으로 로그인 하여 적절한 위치에 .htaccess 파일을 생성할 수 있습니다(사이트 수준 브라우저 캐싱 규칙의 경우 루트 폴더여야 함).

또는 cPanel 파일 관리자를 사용하는 경우 필요한 위치로 이동하고 .htaccess 파일을 만듭니다.

이미 .htaccess 파일이 있는 경우 새 브라우저 캐싱 규칙을 추가하기만 하면 됩니다.

2. 만료 헤더 추가

.htaccess 파일 의 첫 번째 설정 은 만료 헤더 기능을 활성화하는 것입니다. 파일에 다음 줄을 추가합니다.

만료일 활성

그런 다음 아래 표시된 구문을 사용하여 다른 텍스트 파일의 기간을 설정할 수 있습니다.

ExpiresByType 텍스트 / CSS "1개월 액세스"

ExpiresByType 텍스트 / HTML "액세스 1개월"

이미지의 만료 시간을 설정하려면 텍스트 슬래시 대신 이미지를 사용하고 이미지 확장자를 대신 사용하세요.

ExpiresByType 이미지 / jpeg "액세스 1개월"

ExpiresByType 이미지 / svg "액세스 1개월"

지원 마감일을 설정하려면 application을 사용하고 파일 확장자를 지정하십시오.

ExpiresByType 신청서 / pdf “1개월 이용”

특정 설정이 적용되지 않는 다른 모든 파일의 경우 ExpiresDefault 정의를 사용합니다.

ExpiresDefault "액세스 1개월."

3. 캐시 정책 정의

다음으로 캐시 확인 설정을 사용하여 캐시 기준을 정의해야 합니다.

캐시 정책에는 세 가지 주요 부분이 있습니다.

• 리소스가 캐시되는 방법
• 캐싱의 위치
• 리소스가 만료되기 전의 시간

공용 캐시는 리소스를 어디에서나 캐시할 수 있음을 브라우저에 나타냅니다. 대조적으로, 개인 캐시는 클라이언트 장치에만 저장을 허용합니다.

예를 들어 로그인한 사용자의 프로필 페이지는 클라이언트 장치에서만 캐시되어야 합니다.

반대로 블로그의 홈 ​​페이지도 CDN에 캐시될 수 있습니다. 다음 규칙을 추가하여 공개 캐시 정책을 설정할 수 있습니다.

<IfModule mod_headers.c>

공개 캐시 제어 헤더 세트

</ IfModule>

헤더 모듈에 다음 필터를 추가하여 파일 유형에 따라 다른 기준을 지정할 수도 있습니다.

<ifModule mod_headers.c>

<filesMatch “\. (ico | jpeg | jpg | png) $”>

공개 캐시 제어 헤더 세트

</ 파일 매치>

<filesMatch “\. (php) $”>

개인 캐시 제어 헤더 세트

</ 파일 매치>

</ IfModule>

위의 코드는 브라우저가 이미지 파일을 어디에나 저장할 수 있지만 PHP 파일은 클라이언트 장치에 저장해야 함을 지정합니다.

각 파일 일치 규칙에 Expires 구성을 추가할 수도 있습니다. 만료 시간은 초 단위로 정의해야 합니다. 0으로 설정하면 브라우저는 페이지가 로드될 때마다 파일을 요청해야 합니다.

헤더 세트 만료 0

4. Apache에서 엔티티 태그 비활성화

마지막으로 다음 코드를 사용하여 엔티티 태그를 비활성화해야 합니다.

파일ETag 없음

ETag를 비활성화하려면 브라우저가 캐시 기준에 의존하고 페이지가 로드될 때마다 파일의 유효성을 다시 검사하는 것을 방지해야 합니다.

변경 사항을 적용하려면 .htaccess 파일을 저장하고 Apache를 다시 시작하십시오.

Nginx에서 브라우저 캐싱 활용 해결

Nginx에서는 /etc/nginx/site-enabled/default 위치에서 nginx.conf 설정 파일을 찾을 수 있습니다.

다음 코드를 사용하여 특정 파일 형식에 Expires 헤더를 추가할 수 있습니다.

위치 ~ * \. (ico | jpeg | jpg | png) $ {

만료 30일;

}

동일한 코드 블록에 Cache-Control 헤더를 추가할 수도 있습니다.

위치 ~ * \. (ico | jpeg | jpg | png) $ {

만료 30일;

add_header 캐시 제어 "공개";

}

변경 사항을 적용하려면 구성 파일을 저장하고 Nginx를 다시 시작하십시오.

플러그인으로 브라우저 캐시 활용 해결

WordPress용 캐싱 플러그인을 사용하는 경우 이미 브라우저 캐싱을 지원하고 있을 수 있습니다.

이제 가장 유명한 캐시 플러그인 중 일부를 사용하여 브라우저 캐싱 활용을 해결하는 방법을 살펴보겠습니다.

1. WP 로켓

WP Rocket은 단 몇 번의 클릭으로 모든 속도 최적화를 관리할 수 있는 가장 빠르고 가장 권장되는 WordPress 플러그인 중 하나입니다. WP Rocket을 사용하면 브라우저 캐싱 활용을 해결할 수 있을 뿐만 아니라 다음과 같은 다양한 기술을 사용하여 사이트를 최적화할 수 있습니다.

• 정적 파일 압축(GZip) – 총 데이터 크기 줄이기(WordPress에서 GZip 압축을 활성화하는 방법에 대한 전체 게시물 읽기)
• 파일 캐시 활성화(캐시 사전 로드 포함) - 서버에 대한 스트레스를 줄이고 각 페이지의 사전 스캔 사본을 복구합니다.
• Google 글꼴 최적화 – 더 많은 글꼴을 빠르게 로드할 수 있도록
• 지연 로딩 – 사용자가 이미지가 필요한 페이지 섹션으로 스크롤할 때만 이미지가 청구됩니다.
• 축소 및 조합 – 최종 사용자에게 보다 신속하게 전달하기 위해 텍스트 리소스의 크기 및 조합 축소
• JS 로드 연기 – 모든 리소스가 다운로드될 때까지 기다리지 않고 페이지가 빠르게 표시되도록 합니다.
• CDN 네트워크를 통합하고 활성화하여 더 무거운 이미지를 더 빠르게 제공
• DNS 프리페칭 – 타사 콘텐츠의 출처를 확인하는 데 걸리는 시간을 줄이기 위해

이 모든 것이 웹사이트 최적화에 직접 관여하지 않는 사람에게는 이해하기 힘든 것처럼 보일 수 있습니다. 그러나 실제로는 WordPress의 속도를 높이려면 이 모든 조치를 취해야 합니다.

WP Rocket 리뷰를 읽는 것이 좋습니다.

2. LiteSpeed ​​캐시

LiteSpeed ​​​​Cache는 단순히 기능을 활성화하여 브라우저 캐싱 활용을 해결할 수 있는 캐싱 플러그인입니다. 플러그인을 설치 및 활성화하고 캐시 설정으로 이동합니다. 브라우저 탭 으로 전환 하고 브라우저의 캐시 옵션을 허용합니다.

만료 시간 설정도 가능합니다. 그러나 이 설정은 웹사이트의 모든 캐시된 파일에 적용됩니다.

3. WP 가장 빠른 캐시

WP Fastest Cache는 간단한 사용자 지정 옵션이 있는 또 다른 WordPress 캐시 플러그인입니다. 무료 버전을 사용하면 브라우저 캐싱을 활성화할 수 있습니다. 설정 페이지로 이동하여 브라우저 캐싱 확인란을 선택합니다.

4. W3 총 캐시

W3 Total Cache는 널리 사용되는 또 다른 브라우저 캐시 플러그인입니다. 다양한 캐싱 옵션을 사용자 지정할 수 있습니다. 설치가 완료되면 설정 페이지 의 캐시 브라우저 섹션으로 이동합니다.

이 플러그인을 사용하면 이미지, 스크립트 및 스타일 시트와 같은 여러 범주의 파일에 대한 권한을 설정할 수 있습니다. 각 그룹에 대해 Expires 헤더, Expires 수명 및 ETag를 설정할 수 있습니다.

자주 묻는 질문

결론

이 게시물에서는 페이지 속도의 중요성과 WordPress에서 브라우저 캐싱 활용을 수정해야 하는 이유를 살펴보았습니다. WordPress 사이트에 브라우저 캐싱이 필요한지 여부를 나타내는 속도 테스트 도구를 보았습니다. 다음으로 플러그인을 사용하지 않고 브라우저 캐싱을 활성화하도록 다양한 웹 서버를 구성하는 방법에 대해 논의했습니다. 마지막으로 WordPress에서 레버리지 브라우저 캐싱을 수정할 수 있는 세 가지 인기 있는 플러그인을 살펴보았습니다.