Apakah Anda ingin menghilangkan pemblokiran JavaScript dan rendering CSS di WordPress?
Jika Anda menguji situs web Anda di Google PageSpeed ​​insights, Anda mungkin akan melihat saran untuk menghapus skrip dan blok rendering CSS. Namun, itu tidak memberikan detail tentang cara melakukan ini di situs WordPress Anda.
Pada artikel ini, kami akan menunjukkan kepada Anda cara memperbaiki JavaScript dan pemblokiran rendering CSS dengan mudah di WordPress untuk meningkatkan skor Google PageSpeed ​​Anda.
Tapi sebelumnya, mari kita temukan bersama Bagaimana menginstal sebuah blog WordPress langkah 7 et Bagaimana menemukan, menginstal dan mengaktifkan tema WordPress di blog Anda.
Apa itu JavaScript dan CSS Render-Blocking?
Memblokir JavaScript dan rendering CSS adalah file yang mencegah situs web menampilkan halaman web sebelum memuatnya.
Setiap situs WordPress memiliki tema dan plugin yang menambahkan file JavaScript dan CSS ke bagian depan situs web Anda. Skrip ini dapat meningkatkan waktu buka halaman situs Anda, dan juga dapat memblokir perenderan halaman.
Browser pengguna perlu memuat skrip dan CSS ini sebelum memuat kode HTML lainnya di halaman. Artinya, pengguna dengan koneksi yang lebih lambat harus menunggu beberapa milidetik lagi untuk melihat halaman.
Skrip dan stylesheet ini disebut JavaScript dan pemblokir render CSS.
Pemilik situs web yang mencoba mencapai skor Google PageSpeed ​​100 perlu memperbaikinya untuk mencapai skor sempurna itu.
Apakah Skor Google PageSpeed ​​itu?
Google PageSpeed ​​Insights adalah alat pengujian kecepatan yang dibuat oleh Google untuk membantu pemilik situs web mengoptimalkan dan menguji situs web mereka. Alat ini menguji situs web Anda terhadap pedoman kecepatan Google dan menawarkan saran untuk meningkatkan waktu muat laman situs web Anda.
Ini menunjukkan skor berdasarkan jumlah aturan yang dilewati situs web Anda. Sebagian besar situs web berusia antara 50 dan 70. Namun, beberapa pemilik situs web merasa tertekan untuk mencapai 100.
Apakah Anda benar-benar membutuhkan skor "100" di Google PageSpeed?
Tujuan dari Wawasan Google PageSpeed adalah memberi Anda pedoman untuk meningkatkan kecepatan dan kinerja situs web Anda. Anda tidak diharuskan untuk mengikuti aturan ini dengan ketat.
Ingat, kecepatan hanyalah salah satu dari banyak metrik SEO yang membantu Google menentukan cara menentukan peringkat situs Anda. Alasan mengapa kecepatan sangat penting adalah karena kecepatan itu meningkat pengalaman pengguna di situs web Anda.
Pengalaman pengguna yang lebih baik membutuhkan lebih dari sekedar kecepatan. Anda juga harus menawarkan informasi yang berguna, antarmuka pengguna yang lebih baik dan melibatkan konten dengan teks, gambar, dan video.
Tujuan Anda adalah membuat situs web cepat yang menawarkan pengalaman pengguna yang luar biasa.
Selama desain ulang BlogPasCher terbaru, kami tetap fokus pada kecepatan serta meningkatkan pengalaman pengguna.
Kami menyarankan Anda menggunakan aturan Google Pagespeed sebagai saran, dan jika Anda dapat menerapkannya dengan mudah tanpa merusak pengalaman pengguna, maka itu bagus. Jika tidak, Anda harus berusaha untuk melakukan sebanyak yang Anda bisa, dan kemudian jangan mengkhawatirkan sisanya.
Karena itu, mari kita lihat apa yang dapat Anda lakukan untuk memperbaiki JavaScript dan pemblokiran rendering CSS di WordPress.
Kami akan membahas dua metode yang akan memperbaiki masalah ini. Anda dapat memilih salah satu yang bekerja paling baik di situs web Anda.
1. Perbaiki membuat skrip pemblokiran dan CSS dengan WP Rocket
Untuk metode ini, kami akan menggunakan plugin WP Rocket. Ini adalah plugin caching WordPress terbaik di pasar dan memungkinkan Anda dengan cepat meningkatkan kinerja situs web Anda tanpa menyiapkan keahlian teknis atau rumit.
Pertama-tama, Anda perlu menginstal dan mengaktifkan plugin WP Rocket. Untuk lebih jelasnya, lihat panduan langkah demi langkah kami tentang cara memasang plugin WordPress..
WP Rocket mengaktifkan cache-nya dengan pengaturan optimal. Secara default, ini tidak mengaktifkan opsi pengoptimalan JavaScript dan CSS. Pengoptimalan ini berpotensi memengaruhitampilan website Anda atau fitur tertentu, itulah mengapa plugin memungkinkan Anda mengaktifkan pengaturan tersebut sebagai opsi.
Untuk melakukan itu, Anda harus melanjutkan Pengaturan »WP Rocket, lalu alihkan ke 'Pengoptimalan File '. Dari sana, gulir ke bawah ke bagian tersebut File CSS dan centang kotaknya Minimalkan CSS, Gabungkan File CSS et Optimalkan Pengiriman CSS.
Ucapan : WP Rocket akan mencoba mengecilkan semua file CSS Anda, menggabungkannya dan hanya memuat CSS yang diperlukan untuk bagian yang terlihat dari situs web Anda. Hal ini dapat mempengaruhitampilan website Anda, jadi Anda harus menguji situs web Anda secara menyeluruh di beberapa perangkat dan ukuran layar.
Kemudian Anda harus menggulir ke bagian tersebut File JavaScript. Dari sini Anda dapat mencentang semua opsi untuk peningkatan kinerja maksimal.
Anda dapat mengecilkan dan menggabungkan file JavaScript seperti yang Anda lakukan pada file CSS.
Anda juga dapat mencegah WordPress mengupload file. jQuery Bermigrasi. Ini adalah skrip yang dimuat WordPress untuk menyediakan kompatibilitas untuk plugin dan tema menggunakan versi jQuery yang lebih lama.
Sebagian besar situs web tidak memerlukan file ini, tetapi sebaiknya periksa situs web Anda untuk memastikan penghapusannya tidak memengaruhi tema atau plugin Anda.
Kemudian gulir ke bawah sedikit lebih jauh dan periksa opsi 'Muat JavaScript Ditunda'dan'Mode Aman untuk jQuery'.
Opsi ini menunda pemuatan JavaScript yang tidak penting, dan Mode Aman jQuery memungkinkan Anda memuat jQuery untuk tema yang dapat menggunakannya secara inline.
Ingatlah untuk mengklik tombol Simpan Perubahan untuk menyimpan pengaturan Anda.
Setelah itu, Anda juga dapat menghapus cache di WP Rocket sebelum menguji situs web Anda lagi dengan Google Page Speed ​​Insights.
Di situs pengujian kami, kami dapat mencapai skor 100% di desktop dan masalah render stuck telah diselesaikan di skor seluler dan desktop.
2. Perbaiki pemblokiran JavaScript dan rendering CSS dengan pengoptimalan otomatis
Untuk metode ini, kami akan menggunakan plugin berbeda yang dibuat khusus untuk meningkatkan pengiriman file CSS dan JS situs Anda. Meskipun plugin ini menyelesaikan pekerjaan, plugin ini tidak memiliki fitur canggih lainnya yang ditawarkan WP Rocket.
Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin Autoptimize. Untuk detail lebih lanjut, lihat panduan langkah demi langkah tentang cara memasang plugin WordPress.
Saat mengaktifkan, Anda harus mengunjungi halaman tersebut Pengaturan »Pengoptimalan otomatis untuk mengkonfigurasi pengaturan plugin.
Pertama-tama, Anda perlu memeriksa opsi 'Optimalkan Kode JavaScript'di bawah blok JavaScript Opsi. Pastikan opsi 'Agregat semua file JS tertaut' tidak dicentang.
Kemudian gulir ke bawah ke area tersebut Opsi CSS dan periksa opsi ' Optimalkan Kode CSS?'. Pastikan bahwa opsi 'Gabungkan semua file CSS yang ditautkan'tidak dicentang.
Sekarang Anda dapat mengklik tombol 'Simpan perubahan dan hapus cache' untuk menyimpan pengaturan Anda.
Lanjutkan dan uji situs web Anda dengan Wawasan Kecepatan Laman. Di situs web demo kami, kami dapat menyelesaikan masalah render stuck dengan pengaturan dasar ini.
Jika masih ada skrip pemblokiran render, Anda harus kembali ke halaman pengaturan plugin dan melihat opsi JavaScript dan CSS.
Misalnya, Anda dapat mengizinkan plugin untuk menyertakan JS Inline dan menghapus skrip yang dikecualikan secara default seperti seal.js atau jquery.js.
Klik tombol 'Simpan perubahan dan hapus cache' untuk menyimpan perubahan Anda dan menghapus cache plugin.
Setelah selesai, lanjutkan dan periksa kembali situs web Anda dengan alat Wawasan Kecepatan Halaman.
Bagaimana cara kerjanya?
Pengoptimalan otomatis menggabungkan semua file JavaScript dan CSS. Setelah itu dia menciptakan file CSS dan JavaScripts yang diperkecil dan menyajikan salinan cache dari situs web Anda secara tersinkronisasi atau ditangguhkan.
Ini memungkinkan Anda untuk menyelesaikan masalah pemblokiran rendering skrip dan gaya pemblokiran. Namun, harap diingat bahwa ini juga dapat memengaruhi kinerja atautampilan website Anda.
membantu
Bergantung pada bagaimana plugin dan tema WordPress Anda menggunakan JavaScript dan CSS, mungkin cukup sulit untuk menyelesaikan semua masalah pemblokiran dari JavaScript dan rendering CSS.
Meskipun alat di atas dapat membantu, plugin Anda mungkin memerlukan skrip tertentu pada tingkat prioritas yang berbeda agar berfungsi dengan baik. Dalam kasus ini, solusi di atas dapat merusak fungsionalitas plugin ini, atau mungkin berperilaku tidak terduga.
Google masih dapat menunjukkan kepada Anda beberapa masalah seperti pengoptimalan pengiriman CSS. WP Rocket memungkinkan Anda memperbaikinya dengan secara manual menambahkan CSS penting yang diperlukan untuk menampilkan tema WordPress Anda dengan sempurna.
Namun, mungkin agak sulit untuk mengetahui kode CSS apa yang perlu Anda tampilkan.
Temukan juga beberapa tema dan plugin WordPress premium
Anda dapat menggunakan plugin WordPress lainnya untuk memberikan tampilan modern dan mengoptimalkan cengkeraman blog atau situs web Anda.
Kami menawarkan kepada Anda beberapa plugin WordPress premium yang akan membantu Anda melakukannya.
1. Plugin Optimasi Kecepatan WordPress
Apakah Anda kesulitan mengelola beberapa plugin pengoptimalan kecepatan situs web? Apakah Anda khawatir hal itu menghambat kecepatan eksekusi situs web Anda? Maka, plugin WordPress ini akan menjadi solusi terbaik untuk semua kekhawatiran Anda.
Plugin ini dirancang untuk memberi Anda fungsionalitas dari hampir 6-8 plugin WordPress yang berbeda. Anda hanya perlu menginstal dan mengkonfigurasinya untuk melihat peningkatan yang nyata dalam pemuatan halaman Anda.
Kami ingin menunjukkan bahwa ini bukan plugin cache atau CDN, namun hasil yang ditawarkannya tetap mengesankan. Jangan ragu untuk mencoba plugin WordPress ini untuk melihat kemampuannya.
Download | Demo | Hébergement Web
2. Berbagi Sosial & Locker Pro
Ekstensi Social Share & Locker Pro telah dirancang untuk membantu situs web Anda lebih terlihat di jejaring sosial. Hanya dengan beberapa klik, Anda dapat mengatur posisi ikon sosial Anda atau mengunci konten Anda dengan meminta berbagi di salah satu jejaring sosial yang Anda tawarkan.
Anda memiliki tema 10 yang telah ditentukan dan ini harus mencakup keinginan yang paling umum. Semua temanya adalah Retina dan keajaiban pekerjaan.
Selain itu, dengan Social Share & Locker Pro, Anda akan dapat menampilkan nama lengkap jejaring sosial atau hanya ikonnya. Itu akan tergantung pada desain Anda, ruang yang tersedia, atau keinginan Anda.
Download | Demo | Hébergement Web
3. Gambar WordPress WordPress Lightbox
WordPress PDF Lightbox adalah Ekstensi WordPress yang memungkinkan Anda membuat viewer file PDF. Penampil PDF adalah kumpulan foto yang dapat disimpan sebagai PDF.
Dengan ekstensi ini, Anda dapat membuat penampil PDF sebanyak yang Anda inginkan. Untuk setiap viewer, administrator dapat mengatur beberapa pilihan seperti:
- Gambar sampul: yang akan ditambahkan sebagai halaman pertama PDF buatan pengguna
- Gambar maksimum per penonton
- Gambar tanda air: untuk diterapkan pada halaman PDF
- Mengirim melalui email: jika fitur ini diaktifkan, a formulir kontak akan ditawarkan tepat setelah galeri gambar. Melalui formulir ini, pengguna akan dapat mengirim PDF yang dibuat melalui email kepada siapa pun.
Download | Demo | Hébergement Web
Sumber Daya yang Direkomendasikan
Cari tahu tentang sumber daya lain yang direkomendasikan untuk membantu Anda membangun dan mengelola situs web Anda.
- Plugin 10 WordPress untuk meningkatkan SEO situs web Anda
- Plugin WordPress premium 5 untuk mengoptimalkan kategori Anda
- 10 plugin WordPress untuk mengkonversi mata uang
- plugin 10 WordPress untuk mengintegrasikan pemutar audio di website
Kesimpulan
Sini! Itu saja untuk tutorial ini. Kami harap artikel ini membantu Anda mempelajari cara memperbaiki JavaScript dan pemblokiran rendering CSS di WordPress. Anda juga bisa melihat kami panduan utama tentang cara mempercepat kinerja WordPress untuk pemula.
Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress.
Jangan sungkan berbagi dengan teman-teman Anda di jejaring sosial favorit Anda. Dan jika Anda memiliki saran atau komentar, tinggalkan di bagian kami komentar.
...
