Pengoptimuman Web dengan ETags: Contoh dengan WordPress

Versi bahasa Inggeris bagi catatan lama saya Optimización web con ETags. Contoh dengan WordPress

Sudah agak lama sejak kali terakhir saya menulis tentang pengoptimuman. Mereka yang mengenali saya sedar mengapa ia berlaku. Walau bagaimanapun, saya tidak boleh membiarkan apa yang dipanggil pakar WPO (Web Performance Optimization) menghalang saya daripada menulis tentang sesuatu yang saya gemari. Jadi, inilah siaran baharu untuk anda.

Saya pasti ini telah berlaku kepada anda. Anda tiba di tempat kerja anda, hidupkan komputer anda, buka e-mel anda, dan selepas menyemaknya, buka terminal dan taip: git pull. Terminal bertindak balas dengan pantas: Sudah terkini..

Pernahkah anda terfikir apa yang berlaku di sebalik tarikan git itu? saya ada. Jika saya terpaksa meneka, saya akan mengatakan bahawa apabila anda melakukan git pull, anda secara telus menghantar pelayan tarikh perubahan terakhir yang anda miliki. Repositori menyemak tarikh perubahan terakhir yang anda hantar berbanding tarikh perubahan terakhir yang dimilikinya, jadi:

• Jika tarikh anda lebih lama, ia menghantar kepada anda semua dorongan/perubahan yang telah berlaku sejak itu. Ia juga akan menghantar kepada anda, bersama-sama dengan perubahan tersebut, tarikh ia dibuat. Jadi, jika anda menaip git pull sekali lagi, anda akan menghantar tarikh terakhir perubahan tersebut dan semuanya akan bermula semula.
• Jika tarikh anda sepadan dengan tarikh repositori mempunyai untuk perubahan terakhir, ia akan memberitahu anda bahawa semuanya adalah terkini.

Proses ini, yang nampaknya paling logik bagi saya, bukanlah yang sebenar. Yang sebenar adalah serupa tetapi tidak tepat. Setiap kali tolakan dibuat, repositori mengaitkan token (kod pengenalan abjad angka, seperti ae3d9735f280381d0d97d3cdb26066eb16f765a5) dengan komitmen terkini. Apabila anda melakukan tarikan git, ia membandingkan token terakhir yang anda miliki dengan senarai token yang dimilikinya. Jika token anda adalah yang lama, ia menghantar perubahan sejak itu dengan token yang sepadan. Jika token itu adalah yang terbaharu, ia memberitahu anda bahawa anda telah dikemas kini.

Pada ketika ini, anda mungkin berkata: Manuel, bukankah siaran ini sepatutnya mengenai mengoptimumkan tapak web dengan WordPress? Memang betul. Kedua-dua kes pertama yang dibentangkan (yang mempunyai tarikh) dan yang kedua (yang mempunyai token) adalah cara bekerja dalam protokol HTTP. Mari lihat lebih dekat.

Terakhir Diubah Suai

Bayangkan pelayar anda menghantar permintaan kepada pelayan saya untuk memuat turun favicon tapak web saya. Dalam respons daripada pelayan saya kepada penyemak imbas anda, akan terdapat rentetan (atau pengepala HTTP): Terakhir Diubah Suai: Kha, 29 Dis 2016 11:55:29 GMT. Ini memberitahu pelayar anda bila favicon kali terakhir diubah suai. Jadi, sebaik sahaja penyemak imbas anda memuat turun imej, ia akan menyimpannya dalam cachenya dengan metadata "Terakhir Diubah Suai" dan nilai Kha, 29 Dis 2016 11:55:29 GMT.

Jika, selepas beberapa saat, hari atau bulan, anda memutuskan untuk melawati tapak web saya semula, penyemak imbas anda akan memerlukan favicon dari tapak saya sekali lagi. Walau bagaimanapun, ia ingat ia juga mempunyai salinan imej dalam cachenya. Bagaimanakah ia mengetahui jika favicon dalam cachenya adalah yang terkini atau jika ia perlu memuat turunnya semula? Mudah, ia melakukan "tarik git." Iaitu, penyemak imbas menghantar permintaan baharu untuk favicon ke pelayan saya, menunjukkan bahawa ia mempunyai versi imej dari tarikh tertentu. Terdapat dua kemungkinan respons daripada pelayan saya:

• Favicon semasa di tapak web saya adalah lebih baharu, jadi pelayan saya akan menghantar imej baharu ke penyemak imbas anda, bersama-sama dengan tarikh baharu yang terakhir diubah suai bagi imej ini.
• Favicon semasa di tapak web saya sepadan dengan tarikh yang ditunjukkan oleh penyemak imbas anda. Iaitu, kedua-dua imej pelayan dan imej cache penyemak imbas adalah sama. Kemudian, pelayan saya memberitahu penyemak imbas anda bahawa imej itu belum diubah suai (dengan kod HTTP 304 Not Modified). Penyemak imbas anda kemudian menggunakan imej cache, menyelamatkan dirinya daripada perlu memuat turun imej itu semula (dengan itu menjimatkan banyak bait pelan data anda).

ETags

Jika anda masih ingat, pada awal siaran, saya menyebut bahawa Git menggunakan token untuk menentukan apabila perubahan dibuat. HTTP, sebagai tambahan kepada tarikh terakhir diubah suai, membenarkan bekerja dengan token yang dipanggil ETags (Teg Entiti). ETag ialah kod alfanumerik (seperti 5864f9b1-47e) tanpa format yang telah ditetapkan (standard HTTP tidak menyatakan, atau hampir tidak menentukan, format yang sepatutnya ada pada token). Pemilik tapak menentukan format.

Secara lalai, pelayan web seperti Apache mencipta ETag untuk setiap fail berdasarkan tarikh pengubahsuaiannya (dan kadangkala juga saiz fail). Ini berlebihan (pengepala HTTP untuk tarikh terakhir diubah suai adalah berdasarkan kriteria yang sama) dan tidak optimum (kerana ia menambahkan lebih banyak maklumat kepada permintaan yang tidak berguna). Dalam kes ini, anda dinasihatkan untuk mengkonfigurasi pelayan web anda untuk tidak menggunakan ETags untuk fail. Contohnya, untuk melumpuhkan fail ETags (atau FileETags) dalam Apache, tambahkan kod berikut pada fail .htaccess anda: FileETag None.

Sie fragen sich vielleicht, ob der Dialog zwischen dem Browser/Server, der einen ETag verwendet, derselbe ist, den wir für das Datum der letzten Änderung gesehen haben, und ob die Verwendung beider Methoden ineffizient und redundant ist. Warum dann ETags verwenden?

Das Datum der letzten Änderung reicht für HTTP-Anfragen für Dateien aus, reicht jedoch für HTTP-Anfragen für Webseiten (HTML) nicht aus. Eine Webseite hängt von vielen miteinander verbundenen Faktoren/Elementen (Inhalt, Kommentare, HTML-Struktur usw.) ab und nicht nur von einer einzelnen Datei. Daher wäre es sehr kompliziert, für alle diese Elemente ein einheitliches Datum der letzten Änderung zu finden. Ich weiß, dass es schwierig sein könnte, dem zu folgen, deshalb versuche ich es anders zu erklären:

Stellen Sie sich vor, ich ordne das Änderungsdatum dieser Webseite (HTML) dem Änderungsdatum des Beitragstextes zu. Wenn Ihr Browser die Seite besucht, speichert er die Seite zusammen mit dem Datum der letzten Änderung des Beitrags im Cache. Wenn Sie den Beitrag eine Minute später erneut aufrufen, verwendet Ihr Browser die zwischengespeicherte Version, da sich der Beitrag nicht geändert hat (und sich somit auch sein Änderungsdatum nicht geändert hat). Wenn jemand einen Kommentar schreibt und Sie ihn erneut besuchen, wird Ihnen der Kommentar nicht angezeigt. Da sich der Text des Beitrags nicht geändert hat, hat sich auch das Änderungsdatum nicht geändert, sodass Ihr Browser Ihnen erneut die zwischengespeicherte Version anzeigen würde. Das Gleiche würde passieren, wenn ich den HTML-Code ändere und eine neue CSS-Datei hinzufüge. Der Inhalt des Beitrags hat sich nicht geändert, ebenso wenig wie das Datum, daher würde Ihr Browser immer noch die zwischengespeicherte Version anzeigen.

Wenn wir, anstatt mit dem Datum der letzten Änderung für den Beitrag zu arbeiten, der Webseite des Beitrags einen ETag mit dem folgenden Format zuweisen: {post_content_modification_date}_{post_last_comment_date}_{WP_theme_version_number}

Wenn Ihr Browser den Beitrag zum ersten Mal besucht, speichert er die Webseite (HTML) mit dem zugehörigen ETag als Metadaten zwischen. Wenn sich eines der Token-Kriterien ändert (das Änderungsdatum des Beitrags, das Datum des letzten Kommentars oder die aktuelle WP-Theme-Version), würde der mit der Webseite verknüpfte ETag anders sein. Wenn Sie den Beitrag also erneut besuchen, benachrichtigt Sie mein Server, dass der ETag Ihres Browsers nicht der neueste ist, und sendet die gesamte Webseite zusammen mit dem neuen ETag erneut.

Wenn sich nichts geändert hat, wäre das Token/ETag dasselbe (sowohl im Browser als auch auf dem Server). Wenn Sie also die Seite mit Ihrem Browser besuchen, würde mein Server eine 304-Antwort senden und ihn darüber informieren, dass sich nichts geändert hat (in WPO-Begriffen ist es noch „frisch“) und dass es die zwischengespeicherte Version verwenden sollte.

Vorteile von ETags

Etwas, das ich bisher noch nicht erwähnt habe, sind die Vorteile von ETags. Hier sind einige:

• Weniger Daten werden zwischen dem Server und dem Browser übertragen. Dies bedeutet Dateneinsparungen für den Benutzer (damit Ihre Website für Ihre Benutzer kostengünstiger ist „Wie viel kostet der Besuch Ihrer Website?“) und auch für den Server (wichtig, wenn Sie ein Hosting-Paket haben, das auf Datenübertragung basiert).
• Der Server erspart Ihnen den Aufwand für die HTML-Generierung, mit allem, was dazu gehört: Speicher und CPU sparen und die Datenbank entlasten.
• Viel schnelleres Laden Ihrer Website, was das Benutzererlebnis verbessert.

WordPress-Plugin

Alles, was wir behandelt haben, ist auf hohem Niveau, also schauen wir uns ein kleines Plugin an, das ETags für WordPress-Seiten/-Beiträge verwendet.

# 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;
}

Zunächst möchte ich erwähnen, dass dieses Plugin nur zu Bildungszwecken dient. Wie bei jeder Weboptimierungstechnik, wie etwa der Minimierung/Kombination von CSS/JS-Ressourcen oder der Verwendung von serverseitigem Caching, ist zunächst eine Site-Studie erforderlich.

Wie Sie sehen, einfacher geht es nicht. Zunächst wird der ETag vom Browser abgerufen, sofern vorhanden (Zeile 20). Zweitens wird der mit dem aktuellen Beitrag/der aktuellen Seite verknüpfte ETag abgerufen (Zeile 21).

Wenn beide identisch sind, wird ein 304-Code an den Browser gesendet (Zeile 24, was im Hauptbild dieses Beitrags der Fall ist) und die Ausführung endet. Der Browser erhält den 304-Code und weiß, dass er die zwischengespeicherte Version der Seite verwenden soll.

Wenn die ETags unterschiedlich sind (entweder weil der Browser zum ersten Mal zugreift oder weil sich das Token geändert hat), wird das ETag an den Browser gesendet und WordPress darf seinen Prozess fortsetzen (Senden des Inhalts des aktuellen Beitrag/Seite).

Der ETag wird in der Funktion get_current_ETag (Zeilen 31 bis 38) basierend auf dem letzten Zeitpunkt der letzten Änderung des Beitrags/der Seite, dem Datum des letzten Kommentars zum Beitrag und der Version des aktuellen Themes generiert. Wenn sich einer dieser Parameter ändert, ändert sich auch das Token, wodurch der Browser gezwungen wird, die neue Version der Website herunterzuladen.

Das ist alles. Ich hoffe, Ihnen hat dieser Beitrag gefallen und er hilft Ihnen, Ihre Website schneller zu machen.

---

Teilen Sie es bitte

Atas ialah kandungan terperinci Pengoptimuman Web dengan ETags: Contoh dengan WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!