Cara Memperbaiki Render-Blocking JavaScript dan CSS di WordPress

Adakah anda ingin menghilangkan JavaScript dan CSS yang menyekat render di WordPress? Sekiranya anda menguji laman web anda pada pandangan Google PageSpeed, maka kemungkinan anda akan melihat cadangan untuk menghilangkan skrip dan CSS yang menyekat perenderan. Dalam artikel ini, kami akan menunjukkan kepada anda cara memperbaiki JavaScript dan CSS yang menyekat perenderan dengan mudah di WordPress untuk meningkatkan skor Google PageSpeed ​​anda.


Cara memperbaiki JavaScript dan CSS blocking render di WordPress

Apa itu Render-Blocking JavaScript dan CSS?

Setiap laman WordPress mempunyai tema dan plugin yang menambahkan fail JavaScript dan CSS ke bahagian depan laman web anda. Skrip ini dapat meningkatkan waktu muat halaman laman web anda, dan skrip ini juga dapat menyekat rendering halaman.

Penyemak imbas pengguna harus memuatkan skrip dan CSS tersebut sebelum memuatkan sisa HTML di halaman. Ini bermaksud bahawa pengguna pada sambungan yang lebih perlahan perlu menunggu beberapa milisaat lagi untuk melihat halaman tersebut.

Skrip dan lembaran gaya ini disebut sebagai JavaScript dan CSS yang menyekat render.

Pemilik laman web yang berusaha mencapai skor 100 PageSpeed ​​Google perlu menyelesaikan masalah ini untuk mencapai skor yang sempurna.

Apa itu Skor PageSpeed ​​Google?

Google PageSpeed ​​Insights adalah alat dalam talian yang dibuat oleh Google untuk membantu pemilik laman web mengoptimumkan dan menguji laman web mereka. Alat ini menguji laman web anda terhadap garis panduan Google untuk kepantasan dan menawarkan cadangan untuk meningkatkan masa muat halaman laman web anda.

Ini menunjukkan skor berdasarkan jumlah peraturan yang dilalui oleh laman web anda. Sebilangan besar laman web berada di antara 50-70. Walau bagaimanapun, sebilangan pemilik laman web merasa terdorong untuk mencapai 100 (tertinggi yang dapat dicapai oleh halaman).

Adakah Anda Benar-benar Memerlukan Skor Google PageSpeed ​​“100” yang Sempurna?

Tujuan pandangan Google PageSpeed ​​adalah untuk memberi anda panduan untuk meningkatkan kelajuan dan prestasi laman web anda. Anda tidak perlu mengikuti peraturan ini dengan ketat.

Ingat bahawa kelajuan hanyalah salah satu daripada banyak metrik SEO yang membantu Google menentukan cara memberi peringkat laman web anda. Sebab kelajuan sangat penting adalah kerana meningkatkan pengalaman pengguna di laman web anda.

Pengalaman pengguna yang lebih baik memerlukan lebih daripada sekadar kelajuan. Anda juga perlu menawarkan maklumat berguna, antara muka pengguna yang lebih baik, dan kandungan menarik dengan teks, gambar, dan video.

Matlamat anda adalah untuk membuat laman web pantas yang menawarkan pengalaman pengguna yang hebat.

Kami baru-baru ini merancang semula WPBeginner, dan kami tetap fokus pada kelajuan serta meningkatkan pengalaman pengguna.

Kami mengesyorkan agar anda menggunakan peraturan Google Pagespeed sebagai cadangan, dan jika anda dapat menerapkannya dengan mudah tanpa merosakkan pengalaman pengguna, itu bagus. Jika tidak, anda harus berusaha untuk melakukan sebanyak yang mungkin dan kemudian jangan bimbang tentang yang lain.

Setelah itu, mari kita lihat apa yang boleh anda lakukan untuk memperbaiki JavaScript dan CSS yang menyekat render di WordPress.

Kami akan merangkumi dua kaedah yang akan memperbaiki JavaScript dan CSS yang menyekat render di WordPress. Anda boleh memilih yang paling sesuai untuk laman web anda.

1. Betulkan Render Blocking Skrip dan CSS dengan Autoptimize

Kaedah ini lebih mudah dan disyorkan untuk kebanyakan pengguna.

Perkara pertama yang perlu anda lakukan ialah memasang dan mengaktifkan plugin Autoptimize. Untuk maklumat lebih lanjut, lihat panduan langkah demi langkah kami mengenai cara memasang pemalam WordPress.

Setelah diaktifkan, anda perlu mengunjungi Tetapan »Optimumkan secara automatik halaman untuk mengkonfigurasi tetapan pemalam.

Tetapan automatik

Anda boleh memulakan dengan mencentang kotak di sebelah Pilihan JavaScript dan Pilihan CSS dan kemudian klik pada butang simpan perubahan.

Anda kini boleh menguji laman web anda menggunakan alat PageSpeed. Sekiranya masih ada skrip pemblokiran render, maka anda perlu kembali ke halaman tetapan pemalam dan klik butang ‘Tunjukkan Tetapan Lanjutan’ di bahagian atas.

Pilihan JavaScript Lanjutan

Di sini anda boleh membenarkan pemalam memasukkan JS sebaris dan membuang skrip yang dikecualikan secara lalai seperti seal.js atau jquery.js.

Seterusnya, tatal ke bawah ke pilihan CSS dan benarkan pemalam untuk menggabungkan CSS sebaris.

Klik pada butang ‘Simpan perubahan dan Kosongkan Cache’ untuk menyimpan perubahan anda dan mengosongkan cache pemalam.

Setelah selesai, teruskan dan periksa laman web anda sekali lagi dengan alat PageSpeed.

Pastikan bahawa anda menguji laman web anda dengan teliti untuk melihat bahawa tidak ada yang rosak dengan mengoptimumkan JavaScript atau CSS anda.

Bagaimanakah ia berfungsi?

Optimumkan agregat semua JavaScript dan CSS yang diaktifkan. Selepas itu, ia membuat fail CSS dan JavaScript yang dikurangkan dan menyajikan salinan cache ke laman web anda sebagai tidak segerak atau ditangguhkan.

Ini membolehkan anda menyelesaikan masalah skrip dan gaya penyekat render. Namun, ingat bahawa ia juga boleh mempengaruhi prestasi atau penampilan laman web anda.

2. Betulkan Render Blocking JavaScript menggunakan W3 Total Cache

Kaedah ini memerlukan sedikit kerja lagi dan disyorkan untuk pengguna yang sudah menggunakan plugin W3 Total Cache di laman web mereka.

Mula-mula anda perlu memasang dan mengaktifkan plugin W3 Total Cache. Sekiranya anda memerlukan bantuan, lihat panduan kami mengenai cara memasang dan menyiapkan W3 Total Cache for Beginners.

Seterusnya, anda perlu melawat Prestasi »Tetapan Umum halaman dan tatal ke bawah ke bahagian Minify.

W3 Total Cache membolehkan meminimumkan

Mula-mula anda perlu menyemak ‘Enable’ di sebelah pilihan Minify dan kemudian pilih ‘Manual’ untuk pilihan mod minify.

Klik pada butang simpan semua tetapan untuk menyimpan tetapan anda.

Seterusnya, anda perlu menambahkan skrip dan CSS yang ingin anda kurangkan.

Anda boleh mendapatkan URL semua skrip dan lembaran gaya yang menyekat penyekat dari alat Google PageSpeed ​​Insights.

Di bawah cadangan yang tertera: ‘Hapuskan JavaScript dan CSS yang menyekat perenderan dalam kandungan paro atas’, klik pada ‘Tunjukkan cara membetulkannya’. Ia akan menunjukkan kepada anda senarai skrip dan helaian gaya.

Dapatkan URL JavaScript dan Lembaran Gaya dari alat Google PageSpeed

Arahkan tetikus anda ke skrip dan itu akan menunjukkan URL lengkap kepada anda. Anda boleh memilih URL ini dan kemudian menggunakan kekunci CTRL + C (Command + C pada Mac) papan kekunci anda untuk menyalin URL.

Sekarang pergi ke kawasan pentadbir WordPress anda dan pergi ke Prestasi »Minimumkan halaman.

Mula-mula anda perlu menambahkan fail JavaScript yang anda mahu dikurangkan. Tatal ke bahagian JS dan kemudian di bawah ‘Operations in area’ tetapkan jenis embed ke ‘Non-block async’ untuk bahagian tersebut.

Tambahkan skrip untuk mengurangkan

Seterusnya, anda perlu mengklik butang ‘Tambah skrip’ dan kemudian mula menambahkan URL skrip yang anda salin dari alat Google PageSpeed.

Setelah selesai, tatal ke bawah ke bahagian CSS dan kemudian klik pada butang ‘Tambah helaian gaya’. Sekarang mulailah menambahkan URL helaian gaya yang anda salin dari alat Google PageSpeed.

Tambahkan helaian gaya untuk dikurangkan

Sekarang klik pada butang ‘Simpan tetapan dan bersihkan cache’ untuk menyimpan tetapan anda.

Lawati alat Google PageSpeed ​​dan uji laman web anda sekali lagi.

Pastikan bahawa anda juga menguji laman web anda dengan teliti untuk melihat bahawa semuanya berjalan lancar.

Penyelesaian masalah

Bergantung pada cara plugin dan tema WordPress anda menggunakan JavaScript dan CSS, agak sukar untuk menyelesaikan semua masalah JavaScript dan CSS yang menyekat render.

Walaupun alat di atas dapat membantu, plugin anda mungkin memerlukan skrip tertentu pada tahap keutamaan yang berbeza untuk berfungsi dengan baik. Sekiranya demikian, penyelesaian di atas boleh mematahkan pemalam anda atau mereka mungkin berkelakuan tidak dijangka.

Google mungkin masih menunjukkan kepada anda masalah tertentu seperti mengoptimumkan penghantaran CSS untuk kandungan paro atas. Autoptimize membolehkan anda memperbaikinya dengan menambahkan CSS sebaris secara manual yang diperlukan untuk memaparkan bahagian lipatan di atas tema anda.

Walau bagaimanapun, agak sukar untuk mengetahui kod CSS apa yang anda perlukan untuk dipaparkan di bahagian atas kandungan.

Itu sahaja, kami harap artikel ini dapat membantu anda mempelajari cara memperbaiki JavaScript dan CSS yang menyekat perenderan di WordPress. Anda mungkin juga ingin melihat panduan utama kami meningkatkan kelajuan dan prestasi WordPress untuk pemula.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map