Mengambil fail tambahan (plugin) WordPress secara tidak serentak: Panduan Terakhir untuk Meningkatkan Kelajuan dan Prestasi Laman Web

function add_async_defer_attribute($tag, $handle) {
    // 将要延迟加载的脚本句柄添加到这个数组
    $scripts_to_defer = array('plugin-script-handle', 'another-plugin-script');

foreach($scripts_to_defer as $defer_script) {
        if ($defer_script === $handle) {
            // 使用 defer， 如需 async 则替换为 async='async'
            return str_replace(' src', ' defer="defer" src', $tag);
        }
    }
    return $tag;
}
add_filter('script_loader_tag', 'add_async_defer_attribute', 10, 2);

Untuk mencari pengekstrakan skrip bagi sebuah plugin, anda boleh melihat kod sumber HTML yang dihasilkan oleh plugin tersebut, atau merujuk terus ke kod sumber plugin itu sendiri.wp_enqueue_script()Parameter pertama untuk pemanggilan fungsi.

Hosting Bersama InterServer

Hosting kongsi: 1TB/bulan pada $2.50 USD, bulan pertama pada $0.10 USD dengan kod promo tryinterserver. 461 skrip aplikasi awan tersedia untuk pemasangan satu klik.

Lawati halaman

Mengendalikan muat turun CSS secara asinkron

Untuk CSS, anda boleh menggunakan teknik “preloading” (memuatkan terlebih dahulu) dan menggabungkannya dengan kaedah lain untuk meningkatkan prestasi dan pengalaman pengguna.onloadAcara tersebut mengubahnya menjadi sumber yang tidak menghalang proses lain (non-blocking resource). Berikut adalah contoh kod untuk memuat turun fail gaya (style sheet) secara berulang-alik (asynchronously):

function async_load_stylesheets() {
    ?>
    <link rel="preload" href="<?php echo get_stylesheet_directory_uri(); ?>/path/to/plugin-style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/path/to/plugin-style.css"></noscript>
    <?php
}
// 根据需求，将其挂载到 wp_head 或其它钩子上
add_action('wp_head', 'async_load_stylesheets', 1);

Metode ini melalui…rel=”preload”Beritahu pelayar untuk mendapatkan sumber-sumber tersebut secepat mungkin, tetapi jangan terus menggunakannya sebaik sahaja ia dimuat turun. Setelah sumber-sumber tersebut selesai dimuat turun, gunakannya melalui JavaScript.relCiri-ciri diubah menjadistylesheetOleh itu, gaya dapat digunakan.Tag tersebut menyediakan penyelesaian alternatif untuk pengguna yang mempunyai pengaturan “JS dibatalkan” (JS disabled).

Ujian dan penyelesaian masalah selepas muat turun secara asinkron

Setelah pelaksanaan pengunduhan berterusan (asynchronous loading), ujian yang menyeluruh adalah sangat penting untuk memastikan bahawa laman web berfungsi dengan baik dan semua ciri-cirinya kekal lengkap, sambil meningkatkan kelajuan prestasinya.

Ujian Fungsi dan Keserasian

Anda perlu melakukan ujian manual pada halaman-halaman yang berbeza dalam laman web (halaman utama, halaman artikel, halaman individu, dll.), dengan memberi tumpuan khusus kepada fungsi-fungsi plugin yang dimuat turun secara berselang (asynchronously). Sebagai contoh:
Uji jika butang media sosial yang dimuatkan secara asinkron dapat membuka tetingkap perkongsian dengan betul.
Semak sama ada ruangan komen yang dimuatkan secara berangsur-angsur dapat dirender dengan betul apabila halaman digulung ke kedudukan yang sesuai.
Verifikasi semua elemen interaktif (seperti penyerahan borang, klik butang, menu drop-down) berfungsi dengan normal.

Perlu memberi perhatian khusus kepada mereka yang bergantung pada…DOMContentLoadedSkrip yang menganggap jQuery sudah siap di bahagian kepala (header) web. Jika pelaksanaannya ditangguhkan, ralat mungkin berlaku kerana elemen DOM tidak dapat ditemui. Inilah sebabnya mengapa penting untuk menetapkan “senarai pengecualian” (exclusion list) semasa mengoptimumkan plugin; anda mungkin perlu mengatur penggunaan jQuery dengan sewajarnya.jquery-coreKomponen tersebut serta semua kebergantungan langsungnya dikecualikan daripada proses muat turun secara berterusan (async loading).

Perbandingan prestasi sebelum dan selepas

Gunakan alat analisis prestasi yang telah disebutkan sebelum ini (PageSpeed Insights, GTmetrix) untuk menguji semula laman web anda. Bandingkan laporan sebelum dan selepas pengoptimuman, dan perhatikan perubahan pada petunjuk utama berikut:
Penyuntingan pertama (FCP): Adakah ia jelas lebih awal?
Pelukis kandungan maksimum (LCP): Adakah elemen kandungan terbesar dipaparkan dengan lebih cepat?
Indeks Kelajuan: Adakah kelajuan isian visual kandungan halaman dipercepatkan?
Masa pemblokiran keseluruhan (TBT): Adakah masa pemblokiran thread utama berkurangan?
*Saranan “Menghapuskan sumber yang menyebabkan gangguan dalam proses rendering”: Adakah masalah yang disenaraikan dalam laporan berkurangan atau hilang?*

Sebuah pengoptimuman yang berjaya seharusnya menyebabkan peningkatan yang ketara dalam petunjuk-petunjuk tersebut, dan pada masa yang sama, mengurangkan amaran berkaitan masalah penghalangan rendering dalam bahagian “Peluang” atau “Diagnosis”.

Jika anda mendapati bahawa beberapa fungsi tidak berfungsi dengan betul, sila kembali ke tetapan plugin pengoptimuman atau kod anda, dan buang pengekstrakan skrip yang menyebabkan masalah daripada senarai muat turun yang bersifat asinkron/dilambatkan. Proses penyelesaian masalah adalah proses yang berulang-ulang, dan mungkin memerlukan beberapa penyesuaian sebelum anda dapat mencapai keseimbangan terbaik antara fungsi dan prestasi.

RINGKASAN

Menggunakan teknik muat turun beransur-ansur (asynchronous loading) untuk sumber tambahan (plugins) WordPress merupakan kaedah yang terbukti berkesan dalam mengoptimumkan prestasi laman web. Dengan memindahkan fail JavaScript dan CSS yang tidak penting keluar dari laluan rendering utama, pelayar dapat mengutamakan pemprosesan dan penampilan kandungan utama laman web, seterusnya meningkatkan kelajuan muat turun dan pengalaman pengguna. Pelaksanaannya adalah mudah, sama ada melalui plugin seperti WP Rocket atau dengan menulis kod untuk kawalan yang lebih disesuaikan. Kuncinya adalah mengenal pasti sumber yang tidak penting dengan tepat, melaksanakan proses muat turun dengan berhati-hati, dan melakukan ujian fungsi serta prestasi yang menyeluruh selepas pengoptimuman. Mengintegrasikan strategi muat turun beransur-ansur ke dalam proses penyelenggaraan WordPress anda adalah cara yang berkesan untuk menghadapi cabaran prestasi rangkaian moden dan meningkatkan kedudukan SEO.

FAQ - Soalan Lazim

Manakah yang lebih baik untuk dipilih, muat turun secara tak segerak (async) atau muat turun yang ditangguhkan (defer)?

Untuk skrip tambahan (plugins), biasanya lebih disyorkan untuk menggunakan…deferKeranadeferMemastikan skrip dijalankan mengikut susunan kemunculan mereka dalam HTML adalah sangat penting, terutama untuk skrip-skrip yang bergantung pada satu sama lain (seperti skrip plugin yang bergantung pada jQuery). Ini dapat mengelakkan ralat yang disebabkan oleh kesilapan dalam susunan pelaksanaan.asyncLebih sesuai untuk segmen kod yang benar-benar berdiri sendiri, tidak bergantung pada sebarang skrip lain, dan juga tidak bergantung pada mana-mana skrip, seperti beberapa modul analisis statistik yang berdiri sendiri.

Adakah memuat turun sumber plugin secara tidak serentak (asynchronous loading) akan menyebabkan fungsi menjadi tidak berfungsi?

Ia mungkin. Jika pelaksanaan skrip tambahan sangat bergantung pada keadaan DOM yang tersedia pada masa tertentu (contohnya, semasa...DOMContentLoadedApabila acara dipicu, operasi terhadap DOM dilakukan dengan segera. Namun, jika skrip tersebut bergantung pada skrip lain yang dijalankan secara serentak (synchronous), pengunduhan skrip secara asinkron (asynchronous) boleh menyebabkan ia dijalankan terlalu awal atau terlambat, yang seterusnya boleh menyebabkan ralat. Itulah sebabnya penting untuk melakukan ujian yang menyeluruh selepas proses pengoptimuman, dan bersedia untuk memasukkan skrip yang bermasalah ke dalam senarai pengecualian (exclusion list).

Adakah semua plugin sesuai untuk dimuat turun secara berasingan (async loading)?

Tidak. Sumber tambahan (plugin resources) yang mempengaruhi secara langsung rendering skrin utama dan interaksi pengguna tidak sepatutnya dimuat secara berasingan (async). Sebagai contoh, perpustakaan animasi yang digunakan untuk mencipta efek visual pada skrin utama, skrip yang bertanggungjawab untuk respons menu navigasi, atau kod CSS yang penting untuk mengoptimumkan penampilan font pada halaman web, semuanya harus dimuat secara serentak atau disertakan secara langsung (inline) untuk memastikan pengalaman pengguna yang konsisten dan segera. Pengoptimuman harus selalu dilakukan dengan syarat tidak mempengaruhi fungsi utama aplikasi.

Selain daripada memuat turun secara beransur-ansur (async loading), apakah lagi cara yang boleh digunakan untuk mengoptimumkan prestasi plugin?

Pemuatan asinkron merupakan langkah penting, namun anda juga boleh menggunakan strategi gabungan lain: 1. Menggabungkan dan meminimumkan fail: Gunakan plugin untuk menggabungkan beberapa fail JS/CSS kecil dan membuang komen ruang putih. 2. Memuat mengikut permintaan: Untuk plugin yang kompleks (seperti pembina halaman), pastikan sumbernya hanya dimuat untuk halaman yang memerlukannya. 3. Memilih plugin ringan: Semasa memilih plugin baru, beri keutamaan kepada alternatif dengan prestasi yang baik dan kod yang ringkas. 4. Menggunakan cache: Pastikan semua sumber statik mempunyai masa luput cache yang lama dan diedarkan melalui CDN. Kaedah-kaedah ini, apabila digabungkan dengan pemuatan asinkron, dapat menghasilkan peningkatan prestasi gabungan yang optimum.