Titik awal yang baik adalah menemukan file JavaScript terbesar Anda di laporan cakupan Alat Pengembang Chrome. Dengan cara ini, Anda akan tahu apakah itu dari tema Anda, plugin tertentu, atau kode pihak ketiga
Sejauh ini cara termudah untuk mengurangi JavaScript adalah dengan tema/plugin ringan (Gutenberg, Query Monitor, dan WP Hive akan menjadi teman terbaik Anda). Elementor dan Divi terlalu banyak mengasapi dan Anda jauh lebih baik dengan sesuatu seperti GeneratePress (apa yang saya gunakan), Blocksy, atau Kadence
Jika JavaScript berasal dari kode pihak ketiga, ini sering kali dapat dihosting secara lokal seperti Google Font, Analytics, dan gambar mini YouTube (video/iframe juga dapat dimuat dengan lambat). Untuk kode pihak ketiga yang tidak dapat dihosting secara lokal, sebagian besar plugin cache memungkinkan Anda menunda JavaScript atau Anda dapat menggunakan FlyingScripts untuk ini. Anda bahkan dapat memindahkannya ke Cloudflare menggunakan fitur Zaraz yang baru
Ada juga cara lain untuk menghapus JavaScript yang tidak terpakai. mengaktifkan pengaturan tertentu di Elementor Experiments (atau pengaturan kinerja bawaan Divi), dan menggunakan pengelola skrip Perfmatters untuk menonaktifkan plugin atau file JavaScript tertentu pada halaman yang tidak digunakan semuanya dapat membantu
Tapi seperti yang saya katakan, jika Anda membuka laporan cakupan dan file JavaScript terbesar Anda berasal dari tema atau plugin tertentu, Anda mungkin ingin mengevaluasi kembali bagaimana situs Anda dirancang.
1. Temukan File JavaScript Terbesar Anda
Temukan file JS besar di Chrome Dev Tools (disarankan), PageSpeed Insights, atau bagan Air Terjun GTmetrix Anda. Untuk Dev Tools, kunjungi situsnya dan gunakan Ctrl + Shift + J (PC) atau Ctrl + Option + J (Mac)
- Apakah itu jQuery?
- Apakah ini sebuah plugin?
- Apakah pembuat tema/halaman Anda?
- Apakah ini kode pihak ketiga dari domain eksternal?
URL biasanya akan memberi tahu Anda dari mana asalnya. Anda dapat memfilter berdasarkan jenis untuk melihat semua file JavaScript Anda atau melihat visualisasi penggunaan untuk melihat total byte dan byte yang tidak terpakai. Itu harus memberi tahu Anda segalanya
2. Gunakan Tema Ringan
Jika Anda tidak tahu, Elementor dan Divi membengkak
Tentu Anda dapat mengoptimalkannya dengan Eksperimen Elementor dan pengaturan kinerja Divi, lalu kodekan header/footer Anda dalam CSS sehingga tidak menggunakan kode yang membengkak sebanyak mungkin. Tetapi jauh lebih mudah untuk mendesain situs web Anda tanpa khawatir pembuat halaman Anda menambahkan beban
Saya mendesain ulang situs saya di GeneratePress + GenerateBlocks, tetapi Blocksy dan Kadence juga merupakan pilihan populer. Bukan penggemar Astra karena etika mereka dan Pembuat Oksigen adalah kurva pembelajaran yang besar
Mulailah menambahkan Elementor Pro dan plugin pembuat halaman lainnya ke dalam gambar dan Anda meminta bencana pengoptimalan kecepatan
Saya menggunakan Elementor dan melakukan semua yang saya bisa untuk mengurangi JavaScript, tetapi saya masih mendapatkan kesalahan di PageSpeed Insights. Saya memutuskan untuk mendesain ulang situs saya (lagi) menggunakan GeneratePress dan langsung melihat peningkatan skor, waktu muat, dan saat mengklik blog saya
Ada kecenderungan besar orang menjauh dari pembuat halaman yang lambat
3. Hindari Plugin Kembung
Beberapa plugin menambahkan JavaScript/CSS ekstra ke frontend sementara yang lain menjalankan tugas latar belakang yang membutuhkan banyak sumber daya dan meningkatkan penggunaan memori
Meskipun tidak ada yang bagus, plugin berat JavaScript biasanya adalah "plugin desain" seperti galeri, penggeser, komentar, atau formulir kontak. Lihat daftar lengkap plugin lambat saya dan hindari jika memungkinkan. Jika Anda menggunakan laporan cakupan Alat Pengembang Chrome atau Monitor Kueri, penyebabnya akan terlihat jelas
PluginKategoriDampak MemoriPageSpeed ImpactAll In One SEOSEOXXDisqusKomentar✓XDivi BuilderPage BuilderXXElementorPage BuilderXXElementor Premium AddonsPage Builder✓XElementor ProPage BuilderXXElementor Ultimate AddonsPage Builder✓XEssential GridGallery✓XJetElementsPage BuilderXXNextGEN GalleryGaleriXXPopup BuilderPopupXXSlider RevolutionSliderXXSocial Media Tombol BagikanDisswXXpSosialAlternatif Ringan
- Berbagi Sosial – Bertumbuh Sosial
- Komentar – komentar asli di CSS
- Galeri – Galeri Gutenberg atau Galeri Meong
- Terjemahkan – Pers Multibahasa, Polylang (bukan WPML)
- Keamanan – gunakan firewall dan gunakan daftar periksa keamanan ini
- Penggeser – Soliloquy atau MetaSlider, tetapi saya tidak merekomendasikan penggeser
- SEO – Rank Math atau SEOPress (tidak sebesar Yoast dengan lebih banyak fitur)
4. Kurangi Kode Pihak Ketiga
Kode pihak ketiga adalah sumber JavaScript lainnya. Anda dapat menggunakan PageSpeed Insights atau Chrome Dev Tools untuk melihat semua pemuatan kode pihak ketiga di situs Anda
Cara Mengoptimalkan Kode Pihak Ketiga
- Host file secara lokal – font, Google Analytics, Tag Manager, dan kode pihak ketiga lainnya dapat dihosting secara lokal di server Anda alih-alih menarik dari domain eksternal. Untuk blog dengan banyak komentar, gunakan plugin avatar lokal untuk mencegah gravatar pihak ketiga. permintaan com
- Penundaan – sebagian besar plugin cache dapat menunda JavaScript atau menggunakan FlyingScripts (lihat bagian #9)
- lazy Load – sebagian besar plugin cache memiliki pengaturan untuk memuat iframe/Maps dengan malas, mengganti iframe YouTube dengan gambar pratinjau, dan FlyingPress bahkan dapat menghosting thumbnail YouTube secara lokal
- Prefetch – untuk domain yang tidak dapat dihosting secara lokal, gunakan petunjuk sumber daya prefetch. URL CDN dan font eksternal biasanya merupakan satu-satunya domain yang seharusnya menggunakan prakoneksi
- Batasi kode pihak ketiga – jika Anda harus menggunakan kode pihak ketiga, hindari memuatnya di paro atas dan batasi penggunaannya. Misalnya, hanya muat Peta di halaman kontak/SEO lokal, jangan muat AdSense di paro atas, dan hindari pelacakan berlebih di Pengelola Tag. Gunakan Perfmatters untuk hanya memuat plugin berbagi sosial Anda di blog Anda, bukan di seluruh situs web
5. Menunda JavaScript Pihak Ketiga
Menunda JavaScript tidak menghapusnya, tetapi menunda memuatnya hingga interaksi pengguna (mis. e. gulir, klik mouse, sentuh layar di ponsel). Ini dapat meningkatkan waktu muat awal secara signifikan sambil memperbaiki beberapa item di PageSpeed Insights (termasuk menghapus item JavaScript yang tidak terpakai)
WP Rocket dan LiteSpeed Cache secara otomatis menunda JavaScript (cukup aktifkan ini di pengaturan pengoptimalan file WP Rocket atau pengaturan JS LiteSpeed Cache di bawah "muat JS ditangguhkan")
FlyingPress dan Pefmatters mengharuskan Anda menambahkan file JavaScript secara manual untuk menunda. Periksa laporan penggunaan pihak ketiga Anda di PageSpeed Insights atau lihat daftar file JS umum saya untuk ditunda
Pengoptimal SiteGround dan sebagian besar plugin cache lainnya tidak mendukung penundaan JavaScript, dalam hal ini Anda perlu menggunakan Skrip Terbang. Ini juga membutuhkan penambahan file JavaScript secara manual
Anda mungkin perlu menambah periode waktu tunggu untuk melihat hasil yang lebih baik (biasanya saya merekomendasikan 5-7 detik). Berhati-hatilah saat menunda AdSense atau Analytics karena ini dapat memengaruhi data/pendapatan
6. Aktifkan Pengaturan Kinerja Elementor/Divi
Jika Anda menggunakan Elementor, buka Elementor → Pengaturan → Eksperimen dan aktifkan pengaturan pemuatan aset yang ditingkatkan. Ini mengurangi file JavaScript Elementor dengan memuat widget penangan JS dan Swiper secara dinamis hanya jika ini benar-benar digunakan. Elementor mengatakan “agar eksperimen ini berfungsi dengan baik, Anda harus menggunakan Elementor Pro 3. 0. 9 versi ke atas. ”
Divi memiliki opsi serupa untuk menghapus JavaScript yang tidak digunakan di Opsi Tema → Umum → Kinerja. Pasti aktifkan kerangka kerja modul dinamis dan pustaka JavaScript dinamis
7. Hapus JavaScript yang Tidak Digunakan Dengan Plugin Bongkar Aset
Perfmatters (berbayar) dan Pembersihan Aset (gratis) memungkinkan Anda menonaktifkan JavaScript yang tidak terpakai di halaman tempat file/plugin tertentu tidak perlu dimuat
Saya lebih suka Perfmatters karena memiliki lebih banyak pengoptimalan daripada Pembersihan Aset, banyak di antaranya tidak ditemukan di sebagian besar plugin cache (seperti menghosting font/analitik secara lokal dan menunda JS). Antarmuka lebih bersih dan fitur baru lebih sering dirilis dengan dokumentasi yang lebih baik. Plus, ini memungkinkan Anda menonaktifkan file CSS/JS yang tidak digunakan di perangkat seluler. Inilah yang saya gunakan saat ini
Langkah 1. Instal Perfmatters atau Pembersihan Aset
Langkah 2. Aktifkan pengelola skrip jika menggunakan Perfmatters
Langkah 3. Aktifkan mode uji di pengaturan. Ini mencegah pengelola skrip merusak situs web Anda karena hanya Anda yang akan melihat perubahannya. Setelah Anda selesai mengonfigurasi pengelola skrip (dan dengan asumsi itu tidak merusak apa pun), nonaktifkan ini dan itu akan membuat perubahan Anda ditayangkan
Langkah 4. Buka pengelola skrip dan nonaktifkan file JavaScript (atau seluruh plugin) yang tidak perlu dimuat. Misalnya, Anda mungkin dapat menonaktifkan plugin formulir kontak di mana pun kecuali halaman kontak, plugin berbagi sosial di mana saja kecuali posting, dan komentar di mana saja kecuali posting. Itu tergantung di mana plugin digunakan dan apakah mereka memuat JS/CSS di situs Anda
8. Kodekan Header/Footer Anda di CSS
Jika Anda tidak ingin sepenuhnya menghapus pembuat halaman Anda, cobalah mengkodekan header, footer, dan sidebar Anda dengan keras di CSS alih-alih mengandalkan kode / plugin pembuat halaman yang membengkak. CSS jauh lebih cepat dan Anda masih dapat mendesain halaman Anda yang sebenarnya (area konten utama) di Elementor atau Divi
Saya menyewa WP Johnny untuk melakukannya tetapi itu mahal dan dia orang yang sibuk. Anda mungkin ingin mencoba dan menyewa pengembang WordPress sebagai freelancer. com atau upwork. com jika saat ini Anda belum memilikinya
9. Perkecil JavaScript
Memperkecil JavaScript menghapus karakter yang tidak perlu dari kode Anda. Jika ini merusak situs web Anda, temukan file bermasalah di kode sumber Anda, lalu kecualikan dari minifikasi
10. Gabungkan JavaScript (Atau Tidak)
Menggabungkan JavaScript tidak selalu merupakan hal yang baik
WP Johnny merekomendasikan hanya menggabungkan JavaScript di situs web kecil di mana total ukuran file CSS + JavaScript di bawah 10KB (kebanyakan situs web lebih dari 10KB). Periksa bagan Air Terjun GTmetrix Anda, lihat seberapa besar file CSS dan JS Anda, lalu putuskan apakah Anda harus menggabungkannya
11. Nonaktifkan jQuery
Beberapa tema/plugin menggunakan jQuery, jadi berhati-hatilah saat menonaktifkannya
Dimungkinkan untuk menonaktifkan bagian tertentu dari jQuery (mis. g. jquery-migrate) tanpa merusak situs Anda. Uji di Perfmatters atau Pembersihan Aset dan lihat apakah Anda setidaknya dapat menghapus beberapa KB
12. Nonaktifkan Kebingungan Email Cloudflare
Kebingungan email Cloudflare memuat file JavaScript yang sangat kecil
Entah Anda mengaktifkannya sendiri atau menggunakan "pengaturan optimal" WP Rocket untuk Cloudflare. Ini menghentikan bot mengumpulkan email Anda. Jadi kecuali Anda menunjukkan alamat email Anda secara publik di situs Anda, Anda tidak memerlukannya. Anda juga dapat mencoba daftar seperti ini. tom(at)onlinemediamasters. com
13. Nonaktifkan Skrip WooCommerce
Jika Anda menggunakan WooCommerce, coba plugin Disable WooCommerce Bloat. Selain menonaktifkan skrip/gaya WooCommerce pada halaman non-eCommerce, ini juga memiliki opsi penghapusan yang membengkak seperti menghapus sampah WooCommerce di dasbor. GitHub juga memiliki beberapa solusi
14. Gunakan Kode Pelacakan Google Analytics yang Lebih Kecil
Anda dapat menghemat hingga 50KB dengan menggunakan while juga mencegah permintaan kedua ke DoubleClick. Ini mengasumsikan Anda boleh saja tidak menggunakan fitur Google Analytics tertentu (demografi, minat, pemantauan kecepatan situs, pemasaran ulang, data periklanan). Periksa dokumentasi Perfmatters untuk mempelajari apa yang masing-masing lacak dan tidak lacak. Plugin berikut mendukung analitik-minimal. js. Perfmatters, CAOS, dan Flying Analytics
- minimal. 1. 5KB
- analitik. js. 18. 4 KB
- gtag. js. 39. 3KB
- gtag. js v4. 51. 5KB
Pertanyaan yang Sering Diajukan
Bagaimana cara menghapus JavaScript yang tidak terpakai di WordPress?
Gunakan laporan cakupan Alat Dev Chrome untuk melihat file JavaScript terbesar Anda yang biasanya berasal dari tema WordPress yang membengkak dan pembuat halaman, plugin, dan kode pihak ketiga
Bagaimana cara menghapus JavaScript yang tidak terpakai di WP Rocket?
WP Rocket menghapus JavaScript yang tidak terpakai dengan memperkecil/menggabungkan JavaScript dan menunda kode pihak ketiga. Sebagian besar pengoptimalan JavaScript lainnya tidak dapat dilakukan menggunakan WP Rocket
Bisakah Autoptimize menghapus JavaScript yang tidak digunakan?
Optimalisasi otomatis dapat memperkecil/menggabungkan file JavaScript dan menundanya, tetapi kemungkinan hal ini tidak akan banyak meningkatkan skor karena rekomendasi penghapusan JavaScript yang tidak digunakan