ETag를 사용한 웹 최적화: WordPress의 예

내 이전 게시물 Optimización web con ETags의 영어 버전입니다. WordPress에 대한 예제

오랜만에 최적화에 대해 글을 쓰게 되었습니다. 저를 아시는 분들은 왜 그런 일이 일어났는지 아실 겁니다. 하지만 소위 WPO(웹 성능 최적화) 전문가들이 내가 좋아하는 것에 대해 글을 쓰는 것을 막을 수는 없습니다. 그래서 여기에 새로운 게시물이 있습니다.

이런 일이 당신에게 일어났다고 확신합니다. 직장에 도착하여 컴퓨터를 켜고 이메일을 열고 확인 후 터미널을 열고 git pull을 입력합니다. 단말기는 신속하게 응답합니다: 이미 최신 상태입니다..

git pull 뒤에 무슨 일이 일어나는지 궁금한 적이 있나요? 나는 가지고있다. 제가 추측해야 한다면, git pull을 수행할 때 마지막 변경 날짜를 서버에 투명하게 보내는 것이라고 말하고 싶습니다. 저장소는 전송한 마지막 변경 날짜를 마지막 변경 날짜와 비교하여 확인합니다.

• 날짜가 더 오래된 경우 그 이후에 발생한 모든 푸시/변경 사항이 전송됩니다. 또한 변경 사항과 함께 변경 날짜도 함께 보내드립니다. 따라서 git pull을 다시 입력하면 마지막 변경 날짜가 전송되고 모든 것이 다시 시작됩니다.
• 날짜가 저장소의 마지막 변경 날짜와 일치하면 모든 것이 최신 상태임을 알려줍니다.

나에게 가장 논리적으로 보였던 이 과정은 실제 과정이 아닙니다. 실제는 비슷하지만 정확하지는 않습니다. 푸시가 이루어질 때마다 저장소는 토큰(ae3d9735f280381d0d97d3cdb26066eb16f765a5와 같은 영숫자 식별 코드)을 최신 커밋과 연결합니다. git pull을 수행하면 보유한 마지막 토큰과 보유한 토큰 목록을 비교합니다. 토큰이 오래된 것이라면 해당 토큰과 함께 그 이후의 변경 사항을 보냅니다. 토큰이 최신이었다면 최신 상태임을 알려줍니다.

이 시점에서 다음과 같이 말할 수 있습니다. Manuel, 이 게시물은 WordPress로 웹사이트를 최적화하는 것에 관한 것이 아니었나요? 실제로 그렇습니다. 제시된 첫 번째 사례(날짜가 있는 사례)와 두 번째 사례(토큰이 있는 사례)는 모두 HTTP 프로토콜에서 작업하는 방법입니다. 자세히 살펴보겠습니다.

최종 수정됨

내 웹사이트의 파비콘을 다운로드하기 위해 브라우저가 내 서버에 요청을 보낸다고 상상해 보세요. 내 서버에서 귀하의 브라우저로 보내는 응답에는 다음과 같은 문자열(또는 HTTP 헤더)이 있습니다. 마지막 수정: Thu, 29 Dec 2016 11:55:29 GMT. 이는 파비콘이 마지막으로 수정된 시기를 브라우저에 알려줍니다. 따라서 브라우저가 이미지를 다운로드하면 메타데이터 "Last-Modified" 및 값이 Thu, 29 Dec 2016 11:55:29 GMT와 함께 캐시에 저장됩니다.

몇 초, 며칠 또는 몇 달 후에 내 웹사이트를 다시 방문하기로 결정하면 브라우저에 내 사이트의 파비콘이 다시 필요합니다. 그러나 캐시에 이미지 복사본도 있다는 것을 기억합니다. 캐시에 있는 파비콘이 최신인지, 아니면 다시 다운로드해야 하는지 어떻게 알 수 있나요? 간단합니다. "git pull"을 수행합니다. 즉, 브라우저는 파비콘에 대한 새로운 요청을 내 서버로 보내 특정 날짜의 이미지 버전이 있음을 나타냅니다. 내 서버에서는 두 가지 가능한 응답이 있습니다.

• 내 웹사이트의 현재 파비콘은 더 최신이므로 내 서버가 이 이미지의 새로운 마지막 수정 날짜와 함께 새 이미지를 귀하의 브라우저로 보냅니다.
• 현재 내 웹사이트의 파비콘은 귀하의 브라우저에 표시된 날짜와 일치합니다. 즉, 서버의 이미지와 브라우저의 캐시된 이미지가 모두 동일합니다. 그런 다음 내 서버는 이미지가 수정되지 않았음을 브라우저에 알립니다(HTTP 304 Not Modified 코드 사용). 그런 다음 브라우저는 캐시된 이미지를 사용하므로 이미지를 다시 다운로드할 필요가 없습니다(따라서 데이터 요금제의 많은 바이트가 절약됩니다).

ETag

기억하시면 게시물 시작 부분에서 Git이 토큰을 사용하여 변경 사항이 발생한 시점을 확인한다고 언급한 적이 있습니다. HTTP는 마지막 수정 날짜 외에도 ETag(엔티티 태그)라는 토큰 작업을 허용합니다. ETag는 미리 결정된 형식이 없는 영숫자 코드(예: 5864f9b1-47e)입니다(HTTP 표준은 토큰의 형식을 지정하지 않거나 거의 지정하지 않음). 형식은 사이트 소유자가 결정합니다.

기본적으로 Apache와 같은 웹 서버는 수정 날짜(및 경우에 따라 파일 크기)를 기준으로 각 파일에 대한 ETag를 생성합니다. 이는 중복되며(마지막 수정 날짜에 대한 HTTP 헤더는 동일한 기준을 기반으로 함) 최적이 아닙니다(사용하지 않는 요청에 더 많은 정보를 추가하기 때문). 이 경우 파일에 ETag를 사용하지 않도록 웹 서버를 구성하는 것이 좋습니다. 예를 들어 Apache에서 파일 ETags(또는 FileETags)를 비활성화하려면 .htaccess 파일에 FileETag None 코드를 추가합니다.

ETag를 사용하는 브라우저/서버 간의 대화가 마지막 수정 날짜에서 본 것과 동일한지 궁금할 수 있으며 두 방법을 모두 사용하는 것은 비효율적이고 중복됩니다. 그렇다면 ETag를 사용하는 이유는 무엇입니까?

최종 수정 날짜는 파일에 대한 HTTP 요청에는 충분하지만 웹페이지(HTML)에 대한 HTTP 요청에는 부족합니다. 웹 페이지는 단일 파일이 아닌 상호 관련된 여러 요소/요소(콘텐츠, 주석, HTML 구조 등)에 따라 달라집니다. 따라서 이러한 모든 요소에 대해 통합된 최종 수정 날짜를 찾는 것은 매우 복잡합니다. 따라하기 어려울 수도 있다는 것을 알고 있으므로 다르게 설명하겠습니다.

이 웹페이지(HTML)의 수정 날짜를 게시물 텍스트 수정 날짜에 할당한다고 상상해 보세요. 브라우저가 페이지를 방문하면 게시물의 마지막 수정 날짜와 함께 페이지를 캐시합니다. 1분 후에 다시 방문하면 게시물이 변경되지 않았으므로(따라서 수정 날짜도 변경되지 않았음) 브라우저는 캐시된 버전을 사용하게 됩니다. 누군가 댓글을 달고 다시 방문하면 해당 댓글이 보이지 않습니다. 게시물의 텍스트가 변경되지 않았기 때문에 수정 날짜도 변경되지 않았으므로 브라우저에 캐시된 버전이 다시 표시됩니다. HTML을 변경하고 새 CSS 파일을 추가하는 경우에도 마찬가지입니다. 게시물 내용이나 날짜가 변경되지 않았으므로 브라우저에 여전히 캐시된 버전이 표시됩니다.

게시물의 마지막 수정 날짜를 사용하는 대신 다음 형식으로 게시물의 웹 페이지에 ETag를 할당하는 경우: {post_content_modification_date}_{post_last_comment_date}_{WP_theme_version_number}

브라우저가 처음으로 게시물을 방문하면 관련 ETag가 포함된 웹페이지(HTML)를 메타데이터로 캐시합니다. 토큰 기준이 변경되면(게시물 수정 날짜, 마지막 댓글 날짜 또는 현재 WP 테마 버전) 웹 페이지와 연결된 ETag가 달라집니다. 따라서 해당 게시물을 다시 방문하시면 제 서버에서 귀하의 브라우저의 ETag가 최신이 아님을 알리고 새 ETag와 함께 전체 웹페이지를 다시 전송합니다.

변경된 사항이 없으면 토큰/ETag는 (브라우저와 서버 모두에서) 동일하므로 브라우저로 페이지를 방문하면 내 서버는 304 응답을 보내 변경된 사항이 없음을 알립니다. (WPO 용어로는 여전히 "최신" 상태임) 캐시된 버전을 사용해야 합니다.

ETag의 이점

지금까지 언급하지 않은 것이 ETag의 장점입니다. 다음은 몇 가지입니다:

• 서버와 브라우저 간에 전송되는 데이터가 적습니다. 이는 사용자(사용자의 웹 사이트 방문 비용이 얼마나 됩니까?)와 서버(데이터 전송 기반 호스팅 계획이 있는 경우 중요)에 대한 데이터 절약을 의미합니다.
• 서버는 메모리와 CPU를 절약하고 작업 데이터베이스를 완화함으로써 HTML 생성 노력을 줄여줍니다.
• 웹사이트 로딩 속도가 훨씬 빨라져 사용자 경험이 향상되었습니다.

워드프레스 플러그인

우리가 다룬 모든 내용은 높은 수준이므로 WordPress 페이지/게시물에 ETag를 사용하는 작은 플러그인을 살펴보겠습니다.

# etags.php
<?php

namespace trasweb\webperf\ETags;

/*
 * Plugin Name:       ETags en posts
 * Plugin URI:        https://trasweb.net/webperf/optimizacion-web-con-etags
 * Description:       Usa el cache en navegador para tus posts.
 * Version:           0.0.1
 * Author:            Manuel Canga / Trasweb
 * Author URI:        https://trasweb.net
 * License:           GPL
 */

add_action('wp', function () {
    if (is_admin() || ! is_singular()) {
        return;
    }

    $etag_from_navigator = $_SERVER[ 'HTTP_IF_NONE_MATCH' ]??'';
    $current_ETag        = get_current_ETag();

    if ($etag_from_navigator === $current_ETag) {
        status_header(304);
        exit;
    }

    header('ETag: ' . $current_ETag);
});

function get_current_ETag()
{
    $last_modified_time_of_content = (int)get_post_time();
    $date_of_last_comment          = get_date_of_last_comment();
    $theme_version                 = wp_get_theme()[ "Version" ]??'0.0.0';

    return md5("{$last_modified_time_of_content}_{$date_of_last_comment}_{$theme_version}");
}

function get_date_of_last_comment()
{
    $query = [
        'post_id' => get_the_ID() ?: 0,
        'orderby' => ['comment_date_gmt'],
        'status'  => 'approve',
        'order'   => 'DESC',
        'number'  => 1,
    ];

    $last_comment = get_comments($query)[ 0 ]??null;

    return $last_comment->comment_date_gmt??0;
}

먼저 이 플러그인은 교육 목적으로만 사용된다는 점을 말씀드리고 싶습니다. CSS/JS 리소스 축소/결합 또는 서버 측 캐싱 사용과 같은 웹 최적화 기술과 마찬가지로 먼저 사이트 연구가 필요합니다.

보시다시피 이보다 더 간단할 수는 없습니다. 먼저, 브라우저에서 ETag가 있으면 이를 가져옵니다(라인 20). 둘째, 현재 게시물/페이지와 연관된 ETag를 검색합니다(라인 21).

둘 다 동일하면 304 코드가 브라우저로 전송되고(24번째 줄, 이 게시물의 메인 이미지에 표시된 경우) 실행이 종료됩니다. 브라우저는 304 코드를 수신하고 페이지의 캐시된 버전을 사용해야 한다는 것을 알게 됩니다.

ETag가 다른 경우(브라우저가 처음 방문했거나 토큰이 변경되었기 때문에) ETag가 브라우저로 전송되고 WordPress는 프로세스를 계속할 수 있습니다(현재의 콘텐츠 전송). 게시물/페이지).

ETag는 게시물/페이지가 마지막으로 수정된 시간, 게시물에 대한 마지막 댓글 날짜, 현재 테마 버전을 기반으로 get_current_ETag 함수(31~38행)에서 생성됩니다. 이러한 매개변수 중 하나라도 변경되면 토큰이 변경되어 브라우저가 웹사이트의 새 버전을 다운로드하게 됩니다.

그게 다입니다. 이 게시물이 귀하의 웹사이트 속도를 높이는 데 도움이 되기를 바랍니다.

---

공유해주세요

위 내용은 ETag를 사용한 웹 최적화: WordPress의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!