JavaScript Dilokalkan dan Digabung di WP, Caranya?

[iidbae]

Desain lapak jualan saya berubah lagi setelah lebaran kemarin https://tarjiem.com/

Nah kebetulan ada kode tambahan eksternal Kalkulator yang pakai JavaScript di halaman depan saja.

Pertanyaanya:
Bagaimana supaya kode javascript dari jscalc.io dipanggil atau disimpan ke ke satu halaman saja di WordPress tanpa plugin?

Apa mungkin digabungkan kode-kode JS? caranya?

Alasannya, biar nilai pagespeed/gtmetrix jadi agak hijau-hijau sedikit.

Leverage browser caching for the following cacheable resources:

    https://jscalc.io/api/calc/k1e89szIMDXBwKvV (expiration not specified)
    https://www.google-analytics.com/analytics.js (2 hours)
    https://jscalc.io/bower_components/ace-builds/src-min-noconflict/ace.js (4 hours)
    https://jscalc.io/bower_components/angular-material/angular-material.css (4 hours)
    https://jscalc.io/bower_components/mathjs/dist/math.min.js (4 hours)
    https://jscalc.io/img/icons/email.svg (4 hours)
    https://jscalc.io/img/icons/facebook-box.svg (4 hours)
    https://jscalc.io/img/icons/ic_add_24px.svg (4 hours)
    https://jscalc.io/img/icons/ic_delete_24px.svg (4 hours)
    https://jscalc.io/img/icons/ic_menu_24px.svg (4 hours)
    https://jscalc.io/img/icons/ic_more_vert_24px.svg (4 hours)
    https://jscalc.io/img/icons/ic_save_24px.svg (4 hours)
    https://jscalc.io/img/icons/ic_settings_24px.svg (4 hours)
    https://jscalc.io/img/icons/ic_warning_24px.svg (4 hours)
    https://jscalc.io/img/icons/link-variant.svg (4 hours)
    https://jscalc.io/img/icons/twitter-box.svg (4 hours)
    https://jscalc.io/img/icons/twitter.svg (4 hours)
    https://jscalc.io/js/worker.js (4 hours)

Defer parsing JavaScript to reduce blocking of page rendering.

    https://jscalc.io/assets/index-5a2763d64ddcd6eb5280b13b188a6b4b.js (475.8KiB)
    https://jscalc.io/bower_components/ace-builds/src-min-noconflict/ace.js (286.4KiB)
    https://jscalc.io/embed/k1e89szIMDXBwKvV (35.9KiB of inline JavaScript)

terima kasih

 

[mgilank]

bukannya seharusnya malah lebih baik file js taruh di luar/eksternal source? karena menghemat resource.
dan jika memungkinkan js taruh di footer, agar loadnya "belakangan"
yang begini2 jika tidak memungkinkan, di skip saja.

 

[iidbae]

bukannya seharusnya malah lebih baik file js taruh di luar/eksternal source? karena menghemat resource.

Kalau ini kurang begitu paham. Kalau memang baik untuk sumber daya cPanel share hosting, mungkin akan tetap eksternal. Cuma masih penasaran saja simpan di dalam.

dan jika memungkinkan js taruh di footer, agar loadnya "belakangan"
yang begini2 jika tidak memungkinkan, di skip saja.

siap, nanti coba dipelajari dulu.

 

[natanetwork]

lbh bagus ambil dari source nya kaya nge remote..
btw ga pindah lg om host nya ?

 

[Lukmanul Hakim]

JS External itu masalah jika provider js itu gk pake CDN.

Termasuk yg TS gunakan, dia sistemnya embedded https://jscalc.io/embed/qwerty123456, dan tidak pakai CDN.

Dan kalau dibuka URL itu, ada Page khusus yang isinya banyak fail .js, .css, dsb

Itulah yang disebut "Optimasi PageSpeed/YSlow yang Diluar Kuasa Kita", karena Hosted, bukan Self Hosted.

JSCalc pun sudah melakukan optimasi yakni Minify dan Marge.


Apakah bisa dibikin local di server sendiri ?, mungkin bisa, coba saja

Copy saja semua source HTML, CSS, JS di halaman embed itu, dan buat di local.

Soalnya JSCalc itu sebenarnya hanya Generator/Builder saja setau saya.

CMIIW

 

[Rockman]

Kalau saya sih tidak begitu mempermasalahkan tools dari pagespeed/gtmetrix, lebih baik js, img ditaruh di internal hosting kita saja. namun file js, img saya compress lebih dulu sebelum saya upload ke hosting kita. selain itu saya tetap pakai plugin wordpress lazyload untuk keringanan loadingnya, coba kunjungi blog saya web.unmetered.co.id ada hampir 2000 ribuan artikel, namun load masih lumayan cepat, walau pagespeed/gtmetrix banyak merahnya...
Menghabiskan resource ? Memangnya habis bandwidth berapa sih per-bulannya ?

 

[Lukmanul Hakim]

Wah salah ketik, maksudnya "file", bukan "fail"

 

[mgilank]

Cek di cdnjs.com ternyata ada jscalc, https://cdnjs.com/
mungkin sama dengan yg ts pakai. lebih baik pakai yg ini (jika sama)

alternatifnya, pakai http://www.jsdelivr.com/ (ga ada jscalcnya)

 

[iidbae]

lbh bagus ambil dari source nya kaya nge remote..
btw ga pindah lg om host nya ?

Iya tuan hendra. Pindah hosting lagi. Berharap share hosting yang terakhir ini banyak membantu.

Kebetulan JS nya pengen dipanggil dari dalam. Coba-coba dulu siapa tahu cocok.

JS External itu masalah jika provider js itu gk pake CDN.

Termasuk yg TS gunakan, dia sistemnya embedded https://jscalc.io/embed/qwerty123456, dan tidak pakai CDN.

Dan kalau dibuka URL itu, ada Page khusus yang isinya banyak fail .js, .css, dsb

Itulah yang disebut "Optimasi PageSpeed/YSlow yang Diluar Kuasa Kita", karena Hosted, bukan Self Hosted.

JSCalc pun sudah melakukan optimasi yakni Minify dan Marge.


Apakah bisa dibikin local di server sendiri ?, mungkin bisa, coba saja

Copy saja semua source HTML, CSS, JS di halaman embed itu, dan buat di local.

Soalnya JSCalc itu sebenarnya hanya Generator/Builder saja setau saya.

CMIIW

Nah itu dia Mas Lukman, saya gak tahu urutan gabungin JS nya. Yang mana mesti di taruh paling atas duluan, gak tahu. belum coba juga sih.
Kalau dilihat kurang lebih ada 3 file JS, mungkin CSS juga ada.

Siapa tahu Mas Lukman ada panduan untuk dasar pengurutan JS ini.

Kalau saya sih tidak begitu mempermasalahkan tools dari pagespeed/gtmetrix, lebih baik js, img ditaruh di internal hosting kita saja. namun file js, img saya compress lebih dulu sebelum saya upload ke hosting kita. selain itu saya tetap pakai plugin wordpress lazyload untuk keringanan loadingnya, coba kunjungi blog saya web.unmetered.co.id ada hampir 2000 ribuan artikel, namun load masih lumayan cepat, walau pagespeed/gtmetrix banyak merahnya...
Menghabiskan resource ? Memangnya habis bandwidth berapa sih per-bulannya ?

JS ini memang mau ditaruh di internal (share) hosting. Caranya yang belum tahu, utamanya urutannya.
Lazyload sudah beres tuan.
Web sudah dikunjungi. Saya kebetulan pakai themes yang 'menghebohkan' jadi gampang-gampang susah dioptimasinya. Apalagi untuk urusan JS dan CSS.

Soal hemat resources ini hanya persiapan saja tuan.

Cek di cdnjs.com ternyata ada jscalc, https://cdnjs.com/
mungkin sama dengan yg ts pakai. lebih baik pakai yg ini (jika sama)

alternatifnya, pakai http://www.jsdelivr.com/ (ga ada jscalcnya)

Terima kasih tuan Gilang, jadi tambah ilmu saya.
Ternyata JS itu bisa di CDN-kan juga secara terpisah.

----
Masih belum dapat solusinya. Solusi yang saya tahu, pakai CDN. Cuma kasus saya share hosting di Indonesia.

Mungkin ada yang mau menambahkan biar JS eksternal ini bisa dipanggil dari dalam.

terima kasih

 

[Nucky]

coba masukkan ke functions.php javasciptnya contohnya seperti ini :

wp_enqueue_script( 'ipt_kb-owlcarausel12-js', get_stylesheet_directory_uri() . '/web/js/owl.carousel.js', array( 'jquery' ), $ipt_kb_version );

buka thema lalu cari functions.php lalu edit dan cari kata kunci js pada tema yang tuan pake. kalau ada seperti diatas tinggal di copas bikin line baru dan jangan lupa file js nya di upload pada folder tema dan rubah juga web/js/owl.carousel.js sesuai dengan nama dimana folder dan file js berada.