• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

PAHOMPU.COM

Info Teknologi Blog SEO dan Bisnis Online

  • Blogging & SEO
    • Themes
    • Script
  • Teknologi
    • Komputer
    • Mobile & App
  • Internet
  • Sosial Media
  • Other
    • Bisnis Rumahan
    • Bisnis Online
    • Ulasan Bisnis
    • Motivasi
Home / Blogging Dan SEO / Cara Memperbaiki Render Blocking JavaScript dan CSS di WordPress

7 May 2017 by pahompu Leave a Comment

Cara Memperbaiki Render Blocking JavaScript dan CSS di WordPress

Cara Mudah Memperbaiki Render Blocking JavaScript dan CSS di WordPress. Apakah Anda ingin menghilangkan render-blocking JavaScript dan CSS di blog WordPress anda? Atau coba perhatikan, Jika Anda pernah menguji situs web Anda di Google PageSpeed, Anda mungkin akan melihat saran untuk mengEliminate render-blocking JavaScript dan CSS yang mencekal loading page.

Cara memperbaiki Render Blocking JavaScript dan CSS di WordPress
Cara memperbaiki Render Blocking JavaScript dan CSS di WordPress
Table Of Contents show
1 Apa itu Render-Blocking JavaScript dan CSS?
2 Cara Mudah Memperbaiki Render Blocking JavaScript dan CSS di WordPress
2.1 Memperbaiki Render Blocking Scripts dan CSS dengan Plugin Autoptimize
2.2 Opsi JavaScript Lanjutan – Show Advanced Settings
2.3 Bagaimana cara kerjanya?

Apa itu Render-Blocking JavaScript dan CSS?

Setiap situs WordPress memiliki tema atau template dan plugin yang menambahkan file JavaScript dan CSS ke front-end situs web Anda. Mau tidak mau, Skrip ini akan meningkatkan waktu buka (Loading time) halaman situs Anda, dan juga dapat memblokir rendering halaman.

Browser terpksa dan harus memuat skrip dan CSS tersebut dahulu sebelum memuat sisa HTML pada halaman. Ini berarti bahwa pengguna atau pengunjung blog pada koneksi yang lebih lambat harus menunggu beberapa milidetik lebih untuk melihat halaman blog secara lengkap.

Hal ini tentunya juga akan mempengaruhi page rank dikarenakan, robot mesin pencari juga akan menilai laman blog anda banyak masalah sehingga tidak layak untuk di rekomendasikan. Dan ​​untuk mencapai skor pagerank yang lebih baik maka anda perlu untuk memperbaiki masalah ini.

Baca Juga :
Cara Mempercepat Loading Laman Website WordPress
5 Cara Ampuh Mempercepat Loading Blog

Cara Mudah Memperbaiki Render Blocking JavaScript dan CSS di WordPress

Pada artikel ini, kami akan menunjukkan Cara Mudah Memperbaiki Render Blocking JavaScript dan CSS di WordPress untuk meningkatkan skor Google PageSpeed ​​Anda.

Memperbaiki Render Blocking Scripts dan CSS dengan Plugin Autoptimize

Metode ini lebih sederhana dan direkomendasikan bagi sebagian besar pengguna.

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin Autoptimize.

Cara memperbaiki Render Blocking JavaScript dan CSS di WordPress 2

Setelah anda mengaktivasi plugin, Anda masuk halaman Pengaturan (settings) »Autoptimize untuk mengkonfigurasi pengaturan plugin.

Cara memperbaiki Render Blocking JavaScript dan CSS di WordPress 3

Anda dapat memulai dengan mencentang kotak di sebelah Pilihan JavaScript dan Pilihan CSS dan kemudian klik tombol simpan perubahan.

Sekarang Anda bisa menguji situs Anda menggunakan PageSpeed. Jika masih ada skrip pemblokiran, maka Anda harus kembali ke halaman pengaturan plugin dan klik tombol ‘Show Advanced Settings’ di bagian atas.Cara memperbaiki Render Blocking JavaScript dan CSS di WordPress 4

Opsi JavaScript Lanjutan – Show Advanced Settings

Di sini Anda dapat mengizinkan plugin memasukkan JS inline dan menghapus skrip yang dikecualikan secara default seperti seal.js atau jquery.js.

Selanjutnya, gulir ke bawah ke opsi CSS dan izinkan plugin untuk menggabungkan CSS menjadi sebaris.

Klik tombol ‘Save changes and Empty Cache’ untuk menyimpan perubahan plugin dan menghapus cache yang terbentuk sebelum plugin di rubah.

Setelah selesai, silakan periksa situs web Anda lagi dengan alat PageSpeed.Cara memperbaiki Render Blocking JavaScript dan CSS di WordPress 5

Cara memperbaiki Render Blocking JavaScript dan CSS di WordPress 6

Pastikan bahwa Anda benar-benar menguji situs Anda secara keseluruhan dan teliti dan Lihat dengan baik, karena terkadang ada beberapa Template justru menjadi Error karena Pluggin ini mengirim hampir semua Javascript ke bagian footer.

Bagaimana cara kerjanya?

Autoptimize akan mengagregat semua JavaScript dan CSS. Setelah itu, plugin akan menciptakan file CSS dan JavaScript yang diperkecil dan menyajikan salinan tembolok ke situs web Anda sebagai async atau javascript yang ditangguhkan.

Hal ini memungkinkan Anda memperbaiki skrip dan masalah gaya pemblokiran. Namun, ingatlah sekali lagi bahwa hal itu juga dapat mempengaruhi kinerja atau tampilan situs web Anda.

Demikian Cara Mudah Memperbaiki Render Blocking JavaScript dan CSS di WordPress, Selamat Mencoba, Dan Salam Pahompu.

Referensi :
Dari Berbagai Sumber
Gambar Diambil dari:
Screenshot dan Google Image

Filed Under: Blogging Dan SEO Tagged With: Cara Memperbaiki Render Blocking, Render Blocking JavaScript dan CSS, wordpress

Related Posts

  1. Trik WordPress: Cara Memindahkan JavaScript Ke Bagian Footer Tanpa Plugin
  2. Cara Mempercepat Loading Laman Website WordPress
  3. Trik WordPress: Cara Menampilkan Komentar Terbaru dengan Thumbnail di WordPress Tanpa Plugin
  4. Cara Menonaktifkan Emoji Atau Emoticons di Blog WordPress
  5. 5 Plugin WordPress Lazy Load Terbaik Untuk Mempercepat Loading Web
  6. Cara Merubah Logo Login WordPress
  7. Cara Menggabungkan Dua Situs WordPress Menjadi Satu
  8. 11 Plugin Untuk Mempercepat Loading Website

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

POPULAR POSTS

  • Cara Menghapus Riwayat Pembelian di App Store posted on 8 January 2017
  • Langkah Mudah Cara Bisnis Online Di Internet 4 Langkah Mudah Cara Bisnis Online Di Internet posted on 25 February 2017
  • hoax Hoax dan Social Engineering posted on 27 February 2017
  • cara memotong dan menggabungkan lagu di iPhone Cara Memotong Dan Menggabungkan Lagu Di Perangkat iPhone posted on 1 March 2017
  • Beberapa Kelebihan Adobe Photoshop CC posted on 4 November 2016
  • Trik Cara Menambahkan Google Maps Pada Artikel Tanpa Plugin posted on 8 September 2016
  • Tips Membuat Blog Menjadi User Friendly 5 Tips Membuat Blog Menjadi User Friendly posted on 15 January 2017

Recent Posts

  • 7 Reliable Email Advertising and Marketing Approaches to Produce More Sales 29 August 2021
  • 6 Elemen Penting dalam Strategi Pemasaran Digital 18 November 2020
  • 9 Halaman Penting Ini Harus Ada Pada Website Bisnis Kamu 29 October 2020
  • Lima Faktor Peringkat SEO Dasar yang Harus Anda Ketahui 21 July 2020
  • Kendala Yang Sering Dihadapi Saat Mengelola Sebuah Web Hosting 29 March 2020
  • Mending Mana? Beli Laptop atau Rakit PC? 4 February 2020
  • Cara Membuat Teks Warna Warni di Insta Story 23 January 2020

Recent Comments

  • Hartono Liem on Lima Faktor Peringkat SEO Dasar yang Harus Anda Ketahui
  • cotekno on Lima Faktor Peringkat SEO Dasar yang Harus Anda Ketahui
  • Komala maulana on 4 Langkah Mudah Cara Bisnis Online Di Internet
  • Roffif Syafruddin on Cara Menghapus Riwayat Pembelian di App Store
  • Roffif Syafruddin on Mending Mana? Beli Laptop atau Rakit PC?

Tags

affiliate marketing android anti virus aplikasi bisnis Bisnis Online blog blogging Custom Background Custom Colors Custom Menu Entertainment facebook Featured Images game Google Adsense internet iphone komputer Laptop Left Sidebar mobile Money Online News One Column online plugin Right Sidebar SEO smartphone Sticky Post teknologi template terbaik Theme Options Threaded Comments tips Tips dan Trik Translation Ready trik trik wordpress Tutorial Wordpress Two Columns Windows 10 wordpress
  • About
  • Contact Us
  • Privacy Policy
  • Disclaimer
  • Term Of Services
  • Subscribe Us

Copyright © 2023 · Gen Polos on Genesis Framework · WordPress · Log in