Pengaturan Plugin Minifikasi Cache W3 Total: Bagaimana Memilih Tipe Penyematan? Pengalaman Pemecahan Masalah dan Saran yang Sangat Membantu

Bingung memilih tipe embedding yang tepat untuk W3 Total Cache Minify? Artikel ini berbagi pengalaman nyata seorang webmaster dan memberikan panduan langkah demi langkah untuk memilih tipe embedding Minify yang tepat, menghindari inkonsistensi gaya situs web dan crash saat memuat. Artikel ini juga menyertakan solusi pengaturan yang mudah dipahami bahkan oleh pemula.WordPress Berakselerasi tanpa menabrak!

Saya sedang mengoptimalkan sebuah situs web dan ketika saya membuka pengaturan Minify di W3 Total Cache, saya benar-benar tercengang. Menu tarik-turun untuk tipe tersemat memiliki empat pilihan: Default (Blokir), Gunakan JS untuk Non-Blokir, Gunakan "Asinkron" untuk Non-Blokir, dan Gunakan "Tertunda" untuk Non-Blokir.

Aku memikirkannya sejenak, sebenarnya semua ini tentang apa?

Percayalah, Anda tidak sendirian. Keempat opsi ini kemungkinan besar akan membuat pemula pun bingung, apalagi seseorang yang telah menggunakan WordPress selama bertahun-tahun. Artikel ini menyajikan jebakan yang saya temui dan pelajaran yang saya pelajari, langsung kepada Anda. Anda tidak perlu merujuk ke dokumentasi; cukup ikuti instruksi saya.

Sebenarnya, keempat tipe embedding ini apa saja?

Pertama-tama, mari kita bahas seperti apa karakter keempat pilihan ini.

Default (blok)Ini disebut pemblokiran default. Ini adalah pendekatan yang paling sederhana: browser berhenti ketika menemukan skrip, mengunduh dan mengeksekusinya sepenuhnya, lalu melanjutkan rendering halaman. Kedengarannya andal, bukan? Tetapi konsekuensinya adalah pemuatan halaman awal Anda akan diblokir; pengguna harus menunggu skrip selesai berjalan sebelum mereka dapat melihat apa pun.

Menggunakan JS untuk non-blockingIni cukup menarik. Alih-alih langsung menulis tag `<script>` di halaman, ia pertama-tama mengeluarkan skrip kecil, dan kemudian secara dinamis menyuntikkan skrip yang perlu dimuat ke halaman melalui JavaScript setelah halaman berjalan. Dengan cara ini, halaman dapat dirender terlebih dahulu, dan skrip dapat dimuat secara bertahap. Kedengarannya bagus, bukan? Namun, masalahnya adalah proses penyuntikan dinamis ini dapat mengganggu urutan eksekusi asli skrip. Jika beberapa skrip di halaman Anda sangat bergantung pada urutan eksekusi, masalah mungkin akan muncul.

Gunakan "asynchronous" untuk non-blocking.Ini melibatkan penambahan atribut `async` ke tag `<script>`. Skrip akan diunduh secara asinkron di latar belakang dan dieksekusi segera setelah diunduh, tanpa halaman menunggunya. Namun, kekurangannya adalah urutan eksekusi sama sekali tidak dapat dikontrol; skrip mana pun yang selesai diunduh terlebih dahulu akan dieksekusi terlebih dahulu, terlepas dari urutan yang Anda tentukan dalam kode.

Menggunakan "delay" untuk non-blockingInilah arti menambahkan atribut `defer`. Skrip akan menunggu hingga seluruh halaman selesai diurai sebelum dieksekusi, dan yang penting, skrip akan mempertahankan urutan asli yang Anda tulis. Ini cukup ramah pengguna, karena tidak memblokir layar pertama maupun mengganggu urutan.

Yang mana yang harus saya pilih?

Sederhananya, keempat opsi ini seperti pertanyaan pilihan ganda:Anda menginginkan kecepatan atau keteraturan?

Saran saya adalah sebagai berikut:

Jika situs web Anda kecil, memiliki sedikit skrip, dan Anda tidak memiliki persyaratan yang sangat tinggi untuk kecepatan pemuatan, menggunakan pengaturan default (diblokir) adalah pilihan termudah. ​​Meskipun sedikit lebih lambat, hal itu tidak akan menimbulkan masalah.

Jika Anda ingin meningkatkan kecepatan tampilan layar pertama dan skrip Anda tidak memiliki ketergantungan yang kuat seperti "A harus dieksekusi sebelum B", prioritaskan...Menggunakan "delay" untuk non-blocking(Tunda). Ini hampir merupakan solusi paling ideal saat ini, karena tidak menghambat rendering maupun mengganggu urutan.

Jika Anda mencoba menunda dan masih menemukan bahwa beberapa fungsi bermasalah, maka pertimbangkan...Menggunakan JS untuk non-blockingSolusi ini lebih radikal, tetapi kompatibilitasnya sedikit lebih buruk.

Gunakan "asynchronous" untuk non-blocking.(async) adalah opsi yang paling tidak saya rekomendasikan. Karena urutan eksekusinya benar-benar kacau, mudah terjadi crash kecuali Anda benar-benar yakin bahwa semua skrip Anda berjalan secara independen.

Dua jebakan besar yang pernah saya alami

Omong kosong belaka. Saya telah menuliskan dua kesalahan yang pernah saya buat; Anda dapat membandingkannya dengan pengalaman Anda sendiri untuk melihat apakah Anda dapat menghindarinya.

Kendala pertama: Tema WordPress kustom tidak dapat dipratinjau secara real-time.

Untuk beberapa waktu, saat menyesuaikan tema, setelah mengklik simpan, pratinjau tidak akan diperbarui. Saya akan melakukan beberapa perubahan, menyegarkan halaman, dan hasilnya tetap sama.

Setelah melakukan beberapa penyelidikan, saya menemukan bahwa fungsi kompresi Minify adalah penyebabnya. Solusinya sederhana:

Akses plugin W3 Total Cache常规设置,muncul"kompresi"Hilangkan tanda centang pada opsi tersebut. Kemudian klik panah kecil di bawah "Simpan Pengaturan" di pojok kanan atas dan pilih "..."Simpan pengaturan dan bersihkan cache.Langkah ini sangat penting; jika Anda tidak menghapus cache, Anda masih akan melihat versi lama.

Setelah selesai, kembali ke penyesuaian tema, dan pratinjau langsung akan kembali normal.

Masalah kedua: Kotak pencarian tema Astra tidak merespons saat diklik.

Saya pernah mengalami masalah ini beberapa waktu lalu. Saya menggunakan tema Astra, dan suatu hari tiba-tiba saya mendapati kotak pencarian tidak merespons meskipun saya mengkliknya dengan berbagai cara. Awalnya, saya mengira itu masalah pada tema itu sendiri, tetapi kemudian saya menemukan bahwa itu disebabkan oleh pengaturan Minify dari W3TC.

Solusinya adalah sebagai berikut:

Buka W3 Total Cache → Pengaturan Umum → Pengaturan Kompresi Lanjutan → JS → Pengaturan Mesin Minifikasi → Pengaturan Lokal, dan ubah tipe penyematan menjadi salah satu dari dua pilihan berikut:

1. Sebelumnya, non-blocking dicapai menggunakan JavaScript.
2. Setelah itu, gunakan JS untuk proses non-blocking.

Demikian pula, membersihkan cache dan menyegarkan halaman akan memungkinkan kotak pencarian berfungsi dengan benar.

Mengenai mengapa kedua opsi ini dipilih daripada yang lain, saya telah melakukan beberapa riset. Sederhananya, komponen front-end tema Astra cukup sensitif terhadap waktu eksekusi skrip, dan metode non-blocking tertentu dapat menyebabkan pengikatan event gagal. Menggunakan mode "non-blocking dengan JS" memastikan bahwa skrip hanya dieksekusi setelah halaman selesai dimuat, sekaligus menghindari eksekusi yang tidak teratur seperti yang terlihat pada async.

Daftar tempat yang harus dikunjungi

Terakhir, berikut daftar periksa yang dapat Anda ikuti secara langsung:

Langkah pertama adalah memperjelas tujuan Anda. Apakah Anda menginginkan pemuatan halaman awal tercepat, atau Anda memprioritaskan stabilitas dan operasi tanpa kesalahan? Ini akan menentukan jenis penyematan mana yang harus Anda gunakan.

Langkah kedua adalah jangan mengubah semuanya sekaligus. Pertama, temukan halaman yang kurang penting untuk diuji, amati selama satu atau dua hari, dan baru promosikan ke seluruh situs jika Anda yakin tidak ada masalah.

Ketiga, selalu bersihkan cache setelah setiap modifikasi. Mekanisme caching W3TC akan mencegah Anda melihat perubahan terbaru, jadi langkah "bersihkan cache dan uji lagi" sangat penting.

Keempat, gunakan alat pengembang peramban Anda atau alat seperti PageSpeed ​​​​Insights untuk membandingkan kecepatan pemuatan sebelum dan sesudah. ​​Biarkan data berbicara sendiri, bukan hanya firasat Anda.

Tulis di akhir

Jujur saja, ketika pertama kali melihat pengaturan tipe terintegrasi ini, saya terkejut untuk waktu yang lama. Mode pemblokiran default tampak terlalu lambat, sementara mode asinkron tidak menjamin urutan operasi, dan penundaan dapat menyebabkan masalah kompatibilitas. Saya merasa ragu tentang pilihan mana yang harus dipilih.

Namun kemudian saya menyadari bahwa ini adalah sebuah kompromi. Anda tidak bisa mendapatkan yang tercepat dan yang paling stabil sekaligus; Anda selalu harus mengorbankan salah satunya. Pengalaman saya adalah menggunakan defer terlebih dahulu, yang saat ini merupakan solusi non-blocking teraman, dan kemudian menggunakan callback jika terjadi masalah.

Jika Anda menemui masalah serupa, atau jika Anda masih memiliki masalah lain setelah mengikuti metode saya, jangan ragu untuk mendiskusikannya. Pengembangan situs web adalah tentang coba-coba; tidak ada yang terkecuali.

Terima kasih telah membaca artikel saya. Sampai jumpa lagi.