Pengoptimuman web dengan ETags. Contoh dengan WordPress

Pengoptimuman web dengan ETags. Contoh dengan WordPress

Siaran ini pada mulanya diterbitkan pada 2014 pada 2019 dalam Pengoptimuman Web dengan ETags. Contoh dengan WordPress

Sudah lama saya tidak menulis tentang pengoptimuman. Anda sudah tahu apa yang anda kenal saya, mengapa ia perlu dibayar. Walau bagaimanapun, saya tidak boleh membiarkan apa yang dipanggil penjaja WPO menghalang saya daripada menulis tentang sesuatu yang saya suka. Jadi, di sini anda mempunyai siaran baharu.

Saya pasti ia berlaku kepada anda. Anda tiba di tempat kerja anda suatu hari, hidupkan komputer anda, buka e-mel anda dan selepas melihatnya, anda membuka terminal dan taip: git pull. Maklum balas daripada terminal tidak menunggu: Sudah terkini..

Pernahkah anda terfikir tentang apa yang berlaku di sebalik tarikan git itu? saya buat. Meneka, saya akan mengatakan bahawa dengan melakukan git pull anda secara telus menghantar ke pelayan tarikh perubahan terakhir yang anda miliki. Repositori menyemak tarikh perubahan terakhir yang anda hantar dengan tarikh perubahan terakhir yang dimilikinya, supaya:

• Jika tarikh anda lebih lama, ia menghantar kepada anda semua dorongan/perubahan yang telah dibuat sejak itu. Ia juga akan menghantar kepada anda, bersama-sama dengan perubahan tersebut, pada tarikh ia dibuat. Oleh itu, jika anda menulis 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 mengembalikan bahawa anda mempunyai segala-galanya yang terkini.

Prosedur ini, yang bagi saya paling logik, bukanlah yang sebenar. Yang sebenar adalah serupa, tetapi tidak tepat. Setiap kali tolakan dilakukan. Repositori mengaitkan token (kod pengenalan abjad angka, seperti ae3d9735f280381d0d97d3cdb26066eb16f765a5) kepada komit terakhir. Apabila anda melakukan git pull, token terakhir yang anda miliki dibandingkan dengan senarai token yang dia ada. Jika token anda adalah yang lama, ia menghantar kepada anda perubahan sejak itu dengan token yang sepadan. Jika token itu adalah yang terakhir, ia akan memberitahu anda bahawa anda telah dikemas kini.

Pada ketika ini, anda akan memberitahu saya: Manuel, tetapi bukankah siaran ini mengenai mengoptimumkan tapak web dengan WordPress? Sudah tentu, dan masih ada. Kedua-dua kes pertama yang dibentangkan (yang pada tarikh), dan yang kedua (yang dari token) adalah cara kerja protokol HTTP. Jom tengok.

Terakhir Diubah Suai

Bayangkan penyemak imbas 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. Dengan itu, pelayan saya memaklumkan pelayar anda apabila favicon kali terakhir diubah suai. Jadi penyemak imbas, sebaik sahaja imej dimuat turun, akan menyimpannya dalam cachenya dengan metadata "Terakhir Diubah Suai" dan nilai Kha, 29 Dis 2016 11:55:29 GMT

Jika selepas beberapa saat, beberapa hari atau beberapa bulan, anda memutuskan untuk memasuki laman web saya semula, penyemak imbas anda akan memerlukan favicon tapak saya sekali lagi. Walau bagaimanapun, ingat bahawa ia juga mempunyai salinan imej dalam cachenya. Bagaimanakah anda tahu jika favicon cache anda adalah yang terbaharu atau anda perlu memuat turunnya semula? Mudah, melakukan "tarik git". Iaitu, penyemak imbas menghantar permintaan favicon kepada pelayan saya sekali lagi, tetapi memaklumkan bahawa ia mempunyai versi imej dari tarikh tertentu. Terdapat dua kemungkinan jawapan dari pelayan saya:

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

ETags

Jika anda masih ingat, pada permulaan siaran, saya memberitahu anda bahawa Git bekerja dengan token untuk menentukan apabila perubahan dibuat. HTTP, sebagai tambahan kepada tarikh pengubahsuaian terakhir, membolehkan anda bekerja dengan token yang dipanggil ETags (Teg Entiti). ETag ialah kod abjad angka (seperti 5864f9b1-47e) tanpa format lalai (iaitu, standard HTTP tidak menyatakan atau hampir tidak menyatakan, format yang sepatutnya ada pada token). Pemilik tapaklah yang menentukan formatnya.

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

Saya pasti anda tertanya-tanya sama ada dialog antara penyemak imbas/pelayan menggunakan ETag adalah sama dengan apa yang kita lihat untuk tarikh pengubahsuaian terakhir dan menggunakan kedua-dua borang adalah tidak optimum dan berlebihan. Mengapa menggunakan ETags?

Tarikh pengubahsuaian adalah mencukupi untuk permintaan HTTP ke fail, tetapi dengan permintaan HTTP ke halaman web (HTML) ia menjadi pendek. Halaman web bergantung pada banyak faktor/elemen yang saling berkaitan (kandungan, ulasan, struktur HTML, ...) dan bukan pada satu fail. Oleh itu, amat sukar untuk mencari tarikh terakhir diubah suai bersatu untuk semua elemen tersebut. Saya tahu apa yang saya katakan rumit untuk diikuti, saya akan cuba menerangkannya dengan cara lain:

Bayangkan bahawa saya menetapkan sebagai tarikh pengubahsuaian halaman web (HTTML) entri ini, tarikh pengubahsuaian teks entri. Pelayar anda apabila memasuki akan cache halaman ini bersama-sama dengan tarikh pengubahsuaian terakhir siaran. Jika anda log masuk semula seminit kemudian, memandangkan siaran itu tidak berubah (dan, oleh itu, tarikh pengubahsuaiannya), penyemak imbas anda akan kembali menggunakan versi cache. Jika seseorang menulis ulasan kepada saya dan anda masuk semula, anda tidak akan melihat ulasan itu. Nah, teks siaran itu tidak berubah, oleh itu, tarikh pengubahsuaian terakhir juga tidak berubah, jadi penyemak imbas anda akan menunjukkan kepada anda versi dari cachenya sekali lagi. Perkara yang sama akan berlaku jika saya menukar HTML dan menambah CSS baharu. Kandungan siaran tidak berubah, tarikhnya juga tidak ada dan penyemak imbas anda akan terus menunjukkan versi cache.

Jika bukannya menggunakan tarikh pengubahsuaian terakhir siaran, kami memberikan ETag pada halaman web siaran dengan format berikut: {fecha_modificacion_contenido_post}_{date_last_commentario_post}_{number_version_del_tema_WP}

Apabila penyemak imbas anda memasuki siaran buat kali pertama, ia akan cache halaman web (HTML) dengan ETag yang berkaitan sebagai metadata. Jika anda menukar mana-mana kriteria token (tarikh pengubahsuaian siaran, tarikh ulasan terakhir atau versi tema WP semasa), ETag yang dikaitkan dengan halaman web akan berbeza. Jadi, jika anda memasukkan siaran itu sekali lagi, pelayan saya akan memberitahu bahawa ETag penyemak imbas anda bukanlah yang terkini dan akan menghantar keseluruhan halaman web kepada anda sekali lagi, bersama-sama dengan ETag baharu.

Jika tiada apa-apa yang berubah, token/ETag akan sama (dalam penyemak imbas dan pada pelayan), jadi apabila anda melawat halaman dengan penyemak imbas anda, pelayan saya akan menghantar 304 kepada anda memberitahu anda bahawa tiada apa-apa diubah (dalam istilah WPO ia dikatakan masih segar ) dan oleh itu gunakan versi daripada cache anda.

Faedah Etags

Sesuatu yang saya tidak nyatakan sehingga kini adalah kebaikan ETags. Berikut adalah antaranya:

• Kurang data yang dipindahkan antara pelayan/pelayar. Ini bermakna menyimpan data pada pengguna supaya tapak web anda tidak terlalu mahal kepada pengguna anda dan juga pada pelayan (penting jika anda telah mengikat pengehosan berdasarkan pembayaran untuk jumlah data yang dipindahkan).
• Pelayan disimpan daripada perlu menjana HTML, dengan semua yang membayangkan: menjimatkan memori dan CPU dan membebaskan pangkalan data yang berfungsi.
• Pemuatan tapak web anda dengan lebih pantas, sekali gus meningkatkan pengalaman pengguna.

Pemalam WordPress

Semua yang kami lihat berada pada tahap yang tinggi, kami akan melihat pemalam kecil yang menggunakan ETag untuk halaman/siaran WordPress.

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

Pertama sekali, katakan bahawa pemalam ini hanya latihan. Seperti mana-mana teknik pengoptimuman web, seperti pengurangan/penyatuan sumber CSS/JS atau penggunaan caching sebelah pelayan, kajian tapak diperlukan terlebih dahulu.

Seperti yang anda lihat, ia tidak boleh menjadi lebih mudah. Pertama, ETag pelayar diperoleh jika ada (baris 20). Kedua, Etag yang dikaitkan dengan siaran/halaman semasa diperolehi (baris 21).

Jika kedua-duanya adalah sama, kod 304 dihantar ke penyemak imbas (baris 24, ini adalah kes yang ditunjukkan dalam imej utama siaran ini) dan pelaksanaan tamat. Penyemak imbas akan menerima kod 304 dan akan mengetahui bahawa ia perlu menggunakan versi halaman dalam cachenya.

如果 Etag 不同（或者因为浏览器第一次进入或者因为 token 发生了变化），则将 ETag 发送到浏览器，并且允许 WP 继续其进程（发送当前帖子的内容） /页）。

Etag 是在 get_current_ETag 函数（第 31 到 38 行）中根据帖子/页面的上次修改时间、帖子的最后评论日期和当前主题的版本生成的。如果这些参数中的任何一个发生变化，令牌就会发生变化，迫使浏览器下载网站的新版本。

这就是全部。我希望您喜欢它，它可以帮助您使您的网站更快。

---

请分享

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