Tetapan Plugin W3 Total Cache Minify: Bagaimana untuk Memilih Jenis Penyematan? Pengalaman Penyelesaian Masalah dan Nasihat Menyelamatkan Nyawa Saya

Sukar untuk memilih jenis penyematan yang betul untuk W3 Total Cache Minify? Artikel ini berkongsi pengalaman dunia sebenar seorang webmaster dan menyediakan panduan langkah demi langkah untuk memilih jenis penyematan Minify yang betul dengan tepat, mengelakkan kesilapan gaya laman web dan ranap pemuatan. Ia juga termasuk penyelesaian persediaan yang sangat mudah yang boleh digunakan oleh pemula dengan mudah, memastikan pengalaman WordPress yang lancar dan pantas!

Saya sedang mengoptimumkan laman web dan apabila saya membuka tetapan Minify dalam W3 Total Cache, saya benar-benar tercengang. Menu lungsur turun untuk jenis terbenam mempunyai empat pilihan: Lalai (Sekat), Gunakan JS untuk Tidak Menyekat, Gunakan "Asynchronous" untuk Tidak Menyekat dan Gunakan "Delayed" untuk Tidak Menyekat.

Aku terfikir sejenak, apa sebenarnya yang menyebabkan semua ini?

Percayalah, anda tidak keseorangan. Keempat-empat pilihan ini mungkin akan membuatkan orang baru keliru, apatah lagi seseorang yang telah menggunakan WordPress selama bertahun-tahun. Artikel ini membentangkan perangkap yang saya temui dan pengajaran yang telah saya pelajari secara langsung. Anda tidak perlu merujuk dokumentasi; hanya ikut arahan saya.

Apakah sebenarnya empat jenis penyematan ini?

Mari kita bincangkan dahulu tentang jenis watak keempat-empat pilihan ini.

Sekatan lalai adalah pendekatan yang paling mudah. ​​Apabila pelayar menemui skrip, ia berhenti, memuat turun dan melaksanakan skrip sepenuhnya, dan kemudian terus memaparkan halaman. Kedengaran boleh dipercayai, bukan? Tetapi kerugiannya ialah pemuatan halaman awal anda akan ditangguhkan; pengguna perlu menunggu skrip selesai dijalankan sebelum mereka dapat melihat apa-apa.

Menggunakan JavaScript untuk tujuan tanpa sekatan agak menarik. Daripada menulis tag `<script>` secara langsung pada halaman, ia terlebih dahulu mengeluarkan skrip kecil, dan kemudian menyuntik skrip yang diperlukan secara dinamik ke dalam halaman melalui JavaScript selepas halaman dijalankan. Dengan cara ini, halaman boleh dipaparkan dahulu, dan skrip boleh dimuatkan secara beransur-ansur. Kedengaran hebat, bukan? Walau bagaimanapun, masalahnya ialah proses suntikan dinamik ini boleh mengganggu susunan pelaksanaan asal skrip. Jika sesetengah skrip pada halaman anda sangat bergantung pada susunan pelaksanaan, masalah mungkin timbul.

Penggunaan "asynchronous" untuk pelaksanaan tanpa sekatan hanya melibatkan penambahan atribut `async` pada tag `<script>`. Skrip akan dimuat turun secara asynchronous di latar belakang dan dilaksanakan serta-merta setelah selesai, tanpa halaman menunggunya. Walau bagaimanapun, kelemahannya ialah susunan pelaksanaan tidak dapat dikawal sepenuhnya; apa sahaja muat turun yang pertama akan dilaksanakan, tanpa mengira susunan yang anda tentukan dalam kod.

Penggunaan "delay" untuk pelaksanaan tanpa sekatan dicapai dengan menambah atribut `defer`. Skrip akan menunggu sehingga keseluruhan halaman telah dihuraikan sebelum dilaksanakan, dan yang penting, ia akan mengekalkan susunan asal anda menulisnya. Ini agak mesra pengguna, kerana ia tidak menyekat skrin pertama mahupun mengganggu susunan skrip.

Yang mana satu patut saya pilih?

Secara ringkasnya, empat pilihan ini seperti soalan aneka pilihan: adakah anda mahukan kelajuan, atau adakah anda mahukan susunannya?

Cadangan saya adalah seperti berikut:

Jika laman web anda kecil, mempunyai sedikit skrip, dan anda tidak mempunyai keperluan kelajuan pemuatan yang terlalu tinggi, menggunakan tetapan lalai (disekat) adalah pilihan yang paling mudah. ​​Walaupun ia agak perlahan, ia tidak akan menyebabkan sebarang masalah.

Jika anda ingin meningkatkan kelajuan skrin pertama dan skrip anda tidak mempunyai kebergantungan yang kuat seperti "A mesti dilaksanakan sebelum B," utamakan penggunaan "defer" untuk pelaksanaan tanpa penyekatan . Ini hampir merupakan penyelesaian ideal yang tersedia pada masa ini, kerana ia mengelakkan penyekatan pemaparan sambil mengekalkan susunan pelaksanaan.

Jika anda mendapati sesetengah fungsi masih mengalami masalah selepas mencuba defer, pertimbangkan untuk menggunakan JavaScript untuk fungsi tanpa sekatan . Pendekatan ini lebih agresif, tetapi keserasiannya sedikit lebih teruk.

Menggunakan "async" untuk tanpa sekatan adalah pilihan yang paling tidak saya cadangkan. Oleh kerana susunan pelaksanaannya sangat kucar-kacir, ia mudah ranap melainkan anda benar-benar pasti skrip anda berjalan secara bebas.

Dua perangkap besar yang saya alami

Cakap sahaja murah. Saya telah menuliskan dua kesilapan yang saya lakukan; anda boleh menyemaknya berdasarkan pengalaman anda sendiri untuk melihat sama ada anda boleh mengelakkannya.

Perangkap pertama: Tema WordPress tersuai tidak boleh dipratonton dalam masa nyata.

Untuk seketika, apabila menyesuaikan tema, selepas mengklik simpan, pratonton tidak akan dimuat semula. Saya akan membuat beberapa perubahan, memuat semula halaman, dan ia masih sama.

Selepas beberapa siasatan, saya mendapati bahawa fungsi pemampatan Minify adalah puncanya. Penyelesaiannya mudah:

Pergi ke tetapan umum pemalam W3 Total Cache , cari pilihan "Mampatan" , dan nyahtandakannya. Kemudian, klik anak panah kecil di bawah "Simpan Tetapan" di penjuru kanan sebelah atas, dan pilih " Simpan Tetapan dan Kosongkan Cache ." Langkah ini penting; tanpa mengosongkan cache, anda masih akan melihat versi lama.

Selepas selesai, kembali ke penyesuaian tema dan pratonton langsung akan kembali seperti biasa.

Masalah kedua: Kotak carian tema Astra tidak bertindak balas apabila diklik.

Saya menghadapi masalah ini agak lama dahulu. Saya menggunakan tema Astra, dan pada suatu hari saya tiba-tiba mendapati kotak carian tidak memberi respons walau bagaimana saya mengkliknya. Pada mulanya, saya sangkakan ia adalah masalah dengan tema itu sendiri, tetapi kemudian saya mendapati bahawa ia disebabkan oleh tetapan Minify W3TC.

Penyelesaiannya adalah seperti berikut:

Pergi ke W3 Total Cache → Tetapan Umum → Tetapan Mampatan Lanjutan → JS → Tetapan Enjin Minimumkan → Tetapan Lokasi, dan tukar jenis penyematan kepada salah satu daripada dua ini:

1. Sebelum ini, penyekatan tanpa sekatan dicapai menggunakan JavaScript.
2. Selepas itu, gunakan JS untuk tidak menyekat

Begitu juga, mengosongkan cache dan menyegarkan halaman akan membolehkan kotak carian berfungsi dengan baik.

Mengenai sebab kedua-dua pilihan ini dipilih dan bukannya yang lain, saya telah melakukan beberapa kajian. Secara ringkasnya, komponen bahagian hadapan tema Astra agak sensitif terhadap masa pelaksanaan skrip, dan kaedah tanpa sekatan tertentu boleh menyebabkan kegagalan pengikatan peristiwa. Menggunakan mod "tanpa sekatan dengan JS" memastikan skrip hanya dilaksanakan selepas halaman selesai dimuatkan, sambil mengelakkan pelaksanaan tidak teratur yang dilihat dengan async.

Senarai tempat yang akan dilawati

Akhir sekali, berikut ialah senarai semak yang boleh anda ikuti secara langsung:

Langkah pertama adalah untuk menjelaskan matlamat anda. Adakah anda mahukan pemuatan halaman awal yang terpantas, atau adakah anda mengutamakan kestabilan dan operasi bebas ralat? Ini akan menentukan jenis penyematan yang harus anda gunakan.

Langkah kedua adalah untuk tidak mengubah semuanya sekaligus. Pertama, cari halaman yang kurang penting untuk mengujinya, perhatikannya selama satu atau dua hari, dan hanya promosikannya ke seluruh laman web jika anda pasti tiada masalah.

Ketiga, sentiasa kosongkan cache selepas setiap pengubahsuaian. Mekanisme caching W3TC akan menghalang anda daripada melihat perubahan terkini, jadi langkah "kosongkan cache dan uji sekali lagi" adalah sangat penting.

Keempat, gunakan alat pembangun pelayar anda atau alat seperti PageSpeed ​​​​Insights untuk membandingkan kelajuan pemuatan sebelum dan selepas. Biarkan data berbicara sendiri, bukan hanya perasaan anda.

Tulis di akhir

Sejujurnya, apabila saya mula-mula melihat tetapan jenis terbenam ini, saya terpegun untuk masa yang lama. Mod sekatan lalai kelihatan terlalu perlahan, manakala mod tak segerak tidak menjamin susunan, dan penangguhan mungkin menyebabkan masalah keserasian. Saya rasa tidak pasti tentang pilihan mana yang hendak dipilih.

Tetapi saya kemudian menyedari ia adalah satu pertukaran. Anda tidak boleh mempunyai kedua-dua yang terpantas dan paling stabil; anda sentiasa perlu mengorbankan satu. Pengalaman saya ialah menggunakan penangguhan dahulu, yang kini merupakan penyelesaian tanpa sekatan yang paling selamat, dan kemudian menggunakan panggilan balik jika timbul masalah.

Jika anda menghadapi masalah yang serupa, atau jika anda masih mempunyai masalah lain selepas mengikuti kaedah saya, sila bincangkannya. Pembangunan laman web adalah tentang percubaan dan kesilapan; tiada siapa yang terkecuali.

Terima kasih kerana membaca artikel saya. Jumpa lagi di lain masa.