ETag を使用した Web 最適化: WordPress の例-PHPチュートリアル-php.cn

私の古い投稿「Optimización Web con ETags」の英語版。 WordPress の使い方

Web Optimization with ETags: An Example with WordPress

最後に最適化について書いてからしばらく時間が経ちました。私を知っている人は、なぜそうなったか知っています。しかし、いわゆる WPO (Web Performance Optimization) の専門家に、自分が楽しんでいることについて書くことを止めるわけにはいきません。そこで、新しい投稿をお送りします。

これはあなたにも起こったことがあると思います。職場に到着し、コンピューターの電源を入れ、電子メールを開き、確認した後、ターミナルを開いて「git pull」と入力します。端末はすぐに応答します: すでに最新です..

その git pull の背後で何が起こっているのか疑問に思ったことはありますか?私は持っている。推測する必要があるとすれば、git pull を実行すると、最後に変更された日付が透過的にサーバーに送信されることになると思います。リポジトリは、送信された最後の変更の日付と、リポジトリが保持している最後の変更の日付をチェックします。

日付が古い場合は、それ以降に発生したすべてのプッシュ/変更が送信されます。また、それらの変更とともに、変更が行われた日付も送信されます。したがって、もう一度 git pull と入力すると、それらの変更が最後に行われた日付が送信され、すべてが再び開始されます。
日付がリポジトリの最終変更日と一致する場合、すべてが最新であることがわかります。

このプロセスは私にとって最も論理的であるように見えましたが、本当のプロセスではありません。本物は似ていますが、正確ではありません。プッシュが行われるたびに、リポジトリはトークン (ae3d9735f280381d0d97d3cdb26066eb16f765a5 のような英数字の識別コード) を最新のコミットに関連付けます。 git pull を実行すると、最後に取得したトークンとそのトークンのリストが比較されます。トークンが古い場合は、それ以降の変更が対応するトークンとともに送信されます。トークンが最新の場合は、最新の状態であることがわかります。

この時点で、あなたはこう言うかもしれません: マヌエル、この投稿は WordPress によるウェブサイトの最適化に関するものではなかったのですか?確かにそうです。最初に示したケース (日付を含むケース) と 2 番目のケース (トークンを含むケース) は両方とも、HTTP プロトコルで動作する方法です。もう少し詳しく見てみましょう。

最終更新日

あなたのブラウザが私のサーバーに私のウェブサイトのファビコンをダウンロードするリクエストを送信すると想像してください。私のサーバーからブラウザへの応答には、次の文字列 (または HTTP ヘッダー) が含まれます。 Last-Modified: Thu, 29 Dec 2016 11:55:29 GMT。これにより、ファビコンが最後に変更された時期がブラウザーに通知されます。したがって、ブラウザが画像をダウンロードすると、その画像はメタデータ「Last-Modified」と値 Thu, 29 Dec 2016 11:55:29 GMT.

とともにキャッシュに保存されます。

数秒後、数日後、または数か月後、再び私の Web サイトにアクセスすることにした場合、ブラウザには私のサイトのファビコンが再度必要になります。ただし、キャッシュ内にイメージのコピーも存在することを覚えています。キャッシュ内のファビコンが最新かどうか、または再ダウンロードする必要があるかどうかをどのようにして知るのでしょうか?シンプルに、「git pull」を実行します。つまり、ブラウザーはファビコンに対する新しいリクエストをサーバーに送信し、特定の日付の画像バージョンがあることを示します。私のサーバーからの応答は 2 つあります:

私の Web サイト上の現在のファビコンは新しいため、サーバーは新しい画像をこの画像の新しい最終更新日とともにブラウザーに送信します。
私の Web サイト上の現在のファビコンは、ブラウザーで示された日付と一致します。つまり、サーバーの画像とブラウザのキャッシュされた画像は両方とも同じです。次に、サーバーは画像が変更されていないことをブラウザーに通知します (HTTP 304 Not Modified コードを使用)。その後、ブラウザはキャッシュされた画像を使用し、画像を再度ダウンロードする手間を省きます (これにより、データプランの多くのバイトが節約されます)。

Eタグ

この投稿の冒頭で、Git はトークンを使用して変更がいつ行われたかを判断すると述べました。 HTTP では、最終変更日に加えて、ETag (エンティティタグ) と呼ばれるトークンを操作することができます。 ETag は、事前に定義された形式を持たない英数字コード (5864f9b1-47e など) です (HTTP 標準では、トークンの形式が指定されていないか、ほとんど指定されていません)。サイト所有者が形式を決定します。

デフォルトでは、Apache などの Web サーバーは、変更日 (場合によってはファイルサイズも) に基づいて各ファイルの ETag を作成します。これは冗長であり (最終変更日の HTTP ヘッダーは同じ基準に基づいています)、最適ではありません (役に立たない情報がリクエストに追加されるため)。この場合、ファイルに ETag を使用しないように Web サーバーを構成することをお勧めします。たとえば、Apache でファイル ETag (または 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 を使用した Web 最適化: WordPress の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。