Apakah Anda ingin menghapus file (CSS & JS) yang memblokir pemuatan halaman di WordPress? Jika Anda menguji situs Anda di Google Insights PageSpeed, Anda mungkin akan melihat saran untuk menghilangkan skrip yang memblokir halaman agar tidak dimuat. Dalam tutorial ini, kami akan menunjukkan kepada Anda cara memperbaiki file-file ini yang memblokir pemuatan halaman Anda, untuk meningkatkan skor Google PageSpeed ​​Anda.
Apa yang memblokir pemuatan halaman?
Setiap situs WordPress memiliki tema dan plugin yang menambahkan file JavaScript dan CSS di bagian akhir dan sebelum halaman tersebut terlihat di browser. Script ini dapat meningkatkan waktu pemuatan halaman situs Anda, dan mereka juga dapat memblokir rendering halaman.
Browser pengguna perlu memuat skrip dan CSS sebelum konten halaman dimuat. Artinya, pengguna dengan koneksi yang lebih lambat harus menunggu beberapa milidetik lagi untuk melihat halaman.
Pemilik situs yang mencoba mencapai skor Google PageSpeed ​​yang baik perlu menyelesaikan masalah ini.
1 - Cara memperbaiki rendering halaman dengan Autoptimize
Metode ini lebih sederhana dan direkomendasikan untuk sebagian besar pengguna.
Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin " Autoptimize ". Untuk lebih jelasnya, lihat panduan langkah demi langkah kami tentang cara memasang plugin WordPress.
Setelah mengaktifkan plugin, Anda harus mengunjungi " Pengaturan> Pengoptimalan Otomatis Untuk mengkonfigurasi pengaturan plugin.
Anda dapat memulai dengan mencentang kotak opsi JavaScript dan CSS, lalu mengklik tombol "Simpan perubahan".
Anda sekarang dapat menguji situs jaringan menggunakan alat PageSpeed. Jika masih ada skrip yang memblokir rendering halaman, maka Anda harus kembali ke halaman pengaturan plugin dan klik tombol "Tampilkan pengaturan lanjutan" di bagian atas.
Di sini Anda dapat mengizinkan plugin untuk menyertakan JS sebaris dan menghapus skrip yang dikecualikan secara default seperti "seal.js" atau "jquery.js".
Kemudian gulir ke bawah ke opsi CSS dan izinkan plugin untuk menggabungkan semua file CSS.
Klik tombol "Simpan perubahan dan Kosongkan Cache" untuk menyimpan perubahan dan bersihkan cache plugin.
Setelah selesai, lanjutkan dan periksa situs jaringan lagi dengan alat PageSpeed.
Pastikan Anda menguji situs Anda dengan cermat untuk melihat bahwa semuanya berfungsi dengan baik setelah mengoptimalkan file JavaScripts atau CSS Anda.
2 - Memperbaiki rendering file dengan W3 Total Cache
Metode ini memerlukan sedikit usaha lebih dan direkomendasikan bagi mereka yang sudah memiliki W3 Total Cache situs web.
Pertama, Anda perlu menginstal dan mengaktifkan plugin W3 Total Cache. Jika Anda membutuhkan bantuan, Lihat panduan lengkap kami W3 Total Cache.
Kemudian Anda perlu mengunjungi "Kinerja> Pengaturan Umum" dan gulir ke bawah ke bagian "minify".
Pertama-tama, Anda perlu mencentang kotak "Enable" dan kemudian pilih "Manual" untuk opsi mode minification.
Klik pada tombol Simpan semua pengaturan Untuk menyimpan pengaturan Anda.
Kemudian Anda perlu menambahkan script dan CSS Anda ingin menyusut.
Anda bisa mendapatkan URL semua skrip dan stylesheet yang harus digabungkan sesuai dengan Google PageSpeed ​​Insights.
Di bawah saran di mana dikatakan, " Hilangkan render-blocking JavaScript dan CSS ", Klik" Tunjukkan cara memecahkan ". Ini akan menunjukkan kepada Anda daftar skrip dan stylesheet.
Arahkan mouse Anda ke atas skrip dan itu akan menampilkan URL lengkapnya. Anda dapat memilih URL ini, lalu gunakan CTRL + C di keyboard Anda (Command + C di Mac) untuk menyalin URL.
Sekarang, masuklah ke papan admin WordPress Anda dan buka " prestasi > minifier '.
Pertama, Anda perlu menambahkan file JavaScript yang ingin Anda kompres. Gulir ke bawah ke bagian JS lalu di bawah set "operasi di zona" dari jenis sematkan ke "jangan blokir menggunakan 'asinkron'" untuk bagian tersebut .
Maka Anda harus mengklik tombol menambahkan Script Dan kemudian mulai menambahkan URL skrip yang Anda salin dari alat Google PageSpeed.
Setelah Anda selesai, gulir ke bawah ke bagian CSS dan klik tombol "Add Style Sheet". Sekarang mulailah menambahkan url stylesheet yang Anda salin dengan alat Google PageSpeed.
Sekarang klik tombolnya Simpan Pengaturan & Bersihkan Cache Untuk menyimpan pengaturan Anda.
Kunjungi alat Google PageSpeed ​​dan uji situs web Anda lagi.
Pastikan Anda juga menguji situs web Anda dengan cermat untuk melihat bahwa semuanya berfungsi dengan baik.
Itu saja untuk tutorial ini, saya harap ini akan memungkinkan Anda untuk meningkatkan kinerja Anda blog WordPress.
