Cara menghapus squarespace javascript yang tidak terpakai

Ketika datang ke JavaScript yang tidak digunakan, semuanya sederhana. semakin banyak kode yang tidak terpakai di halaman Anda, semakin lama waktu yang dibutuhkan untuk membuka situs. Karena tidak seorang pun ingin menghadapi kinerja situs yang buruk dan konsekuensi lebih lanjut, penting untuk mengetahui cara mendeteksi dan menghapus file JavaScript yang tidak perlu dari halaman web

Apa Artinya “JavaScript yang Tidak Digunakan”?

Ada dua jenis JavaScript yang memblokir perenderan

1. JavaScript non-kritis — tidak digunakan untuk konten di bagian atas halaman web tetapi dapat digunakan di tempat lain
2. JavaScript mati — tidak digunakan lagi. Mungkin ada fragmen dari versi halaman sebelumnya yang tidak lagi ditautkan atau digunakan sementara

Apa yang Memicu Masalah Ini?

File JS yang berat dan tidak perlu biasanya disebabkan oleh kode pihak ketiga (tombol berbagi sosial, misalnya), plugin, atau pembuat halaman yang digunakan situs web Anda. Selain itu, bisa terjadi jika Anda lupa menghapus beberapa baris kode yang digunakan untuk pengujian atau keperluan sementara lainnya

Cara Memeriksa Masalah

Deteksi file CSS atau JavaScript yang tidak perlu sudah setengah dari perjuangan. Ada beberapa alat yang menggarisbawahi kode yang tidak digunakan. Anda dapat memeriksanya dengan panel jaringan Google Chrome DevTools. Panduan ini menjelaskan secara bertahap cara mendeteksi kode yang tidak diperlukan menggunakan tab cakupan Chrome

Analisis tidak hanya Menghapus JavaScript yang tidak terpakai tetapi seluruh situs

Lakukan audit penuh untuk mengetahui dan memperbaiki SEO teknis Anda untuk meningkatkan hasil SERP Anda

Ada yang salah. Silakan, coba lagi nanti

Luncurkan audit

Mengapa ini penting?

Fungsi yang tidak terpakai akan memperlambat kecepatan loading website Anda karena browser memiliki lebih banyak pekerjaan yang harus dilakukan, termasuk mengunduh, mem-parsing, mengkompilasi, dan mengevaluasi skrip yang tidak berguna. Itu menunda parameter rendering dan mengkonsumsi lebih banyak data seluler. Ini memengaruhi kinerja situs web dan pada akhirnya akan menyebabkan pengalaman pengguna yang buruk

Cara Memperbaiki Masalah

Berikut beberapa petunjuk tentang cara memperbaiki masalah dan meningkatkan kinerja situs web Anda

• Jika situs web Anda berjalan di WordPress, Anda dapat menghapus JavaScript yang tidak terpakai dari halamannya menggunakan plugin khusus. Misalnya, Anda dapat menggunakan AssetCleanUp, yang juga memungkinkan Anda menonaktifkan file JavaScript yang tidak terpakai
• Opsi lainnya adalah mendeteksi JS yang tidak digunakan dengan Chrome DevTools dan menghapus file yang tidak diperlukan. Video ini akan menunjukkan cara menggunakan alat ini untuk menemukan JavaScript dan CSS yang tidak terpakai

• Anda dapat menggunakan beberapa alat pengembang web seperti Lighthouse. Meskipun, ini akan melaporkan kode yang tidak digunakan pada halaman tertentu. Anda harus berhati-hati sebelum menghapusnya, karena kode tersebut mungkin masih digunakan di halaman lain
• Coba kecilkan JS untuk menghilangkan karakter yang tidak perlu dari kode. Compiler penutupan akan membantu Anda dengan itu
• Menunda JS halaman yang tidak kritis juga akan membantu mengurangi waktu eksekusi browser. Cara lain adalah menunda skrip yang tidak penting menggunakan plugin cache

Solusi akhir tergantung pada penyebab masalah. misalnya, jika JavaScript yang tidak terpakai disebabkan oleh beberapa plugin, Anda dapat menggantinya dengan plugin yang ringan. Alternatifnya, Anda dapat mengoptimalkan JS pihak ketiga dengan mengaktifkannya hanya saat onclick terjadi

Pakar pemasaran

Ivan bekerja sebagai spesialis pemasaran produk di Sitechecker. Terobsesi dengan analitik dan membuat strategi bisnis untuk produk SaaS

adalah cara luar biasa untuk membuat dan menjalankan situs web. Mampu dengan mudah membangun situs web berfitur lengkap dari awal tanpa memerlukan pengembang cukup membebaskan

Bagaimana skor situs web Anda?

Menganalisa

Namun, dengan kesederhanaan alat ini muncul pertimbangan teknis. Sebagian besar pembuat situs web diimplementasikan dengan cara yang memungkinkan Anda menyusun situs web Anda dalam hal fungsi

Anda dapat menambahkan hal-hal seperti

• Fungsionalitas e-niaga penuh (gerobak, pembayaran, dll. )
• Korsel geser
• Pemutar audio atau video
• Integrasi pihak ketiga (Peta Google, umpan Instagram, dll. )
• Widget berbagi sosial (Facebook, Twitter, dll. )

Mampu menambahkan salah satu dan semua fitur ini secara tiba-tiba sangat menggoda – tetapi hal itu akan berdampak pada kinerja halaman Anda

Dalam artikel ini, kita akan membahas konsep utama pengoptimalan kinerja yang ditujukan untuk platform ini sehingga Anda dapat memastikan bahwa Anda memanfaatkan situs web buatan tangan Anda sebaik-baiknya

Catatan. Pembangun situs web vs CMS

Dalam artikel ini, kami secara khusus merujuk pada pembuat situs web seperti Shopify, Squarespace, dan Wix, yang memiliki perbedaan yang cukup besar dibandingkan dengan yang dihosting sendiri seperti WordPress, Drupal, Magento, dll.

 

---

 

Mengapa saya tidak dapat memperbaiki beberapa item tindakan di Laporan GTmetrix saya?

Anda memiliki kontrol terbatas atas sumber daya Anda pada layanan ini

Karena Anda hanyalah pengguna akhir dari layanan tersebut – Anda memiliki kendali terbatas (jika ada) atas sumber daya dan aset

Pembuat situs web memiliki kebijaksanaan tunggal untuk mengaktifkan opsi atau setelan halaman tertentu yang dapat berdampak pada kinerja halaman Anda. Ini termasuk hal-hal seperti

• Mengaktifkan kompresi teks
• Menetapkan kebijakan cache yang lama
• Pengoptimalan terkait CSS/JavaScript lainnya (mis. g. , memperkecil, mengurangi kode yang tidak terpakai, dll. )

Untuk alasan yang jelas, Anda tidak memiliki kemampuan untuk mengedit opsi atau pengaturan ini, sehingga mencapai skor Kinerja dan Struktur tinggi pada pembuat situs web tidak mungkin terjadi

Anda seharusnya tidak mengejar skor Anda dan sebelumnya
 

Banyak situs contoh unggulan Shopify/Squarespace/Wix tidak mendapatkan Nilai GTmetrix "A"

 
Anda hanya dapat meningkatkan hal-hal yang dapat Anda kendalikan, seperti gambar dan video, fungsi tambahan (aplikasi, ekstensi, dll. ), tema, dan jumlah konten yang Anda tempatkan di laman Anda

Jika Anda ingin kontrol penuh atas semua aset situs web Anda, Anda dapat memigrasikan situs web Anda ke server yang dihosting sendiri dengan platform baru (WordPress, Magento, dll. ) – tentu saja, ini datang dengan banyak pengorbanan dan mungkin tidak mungkin

---

 

Mudah menggunakan fitur dan widget mewah

Tidak ada gunanya menambahkan bel dan peluit ke situs Anda jika situs Anda memuat terlalu lambat untuk melihatnya

Pembangun situs web memberi Anda banyak pilihan fitur dan widget untuk ditambahkan ke halaman Anda, termasuk

• Korsel dan slider
• Beberapa font web
• Animasi dan efek tambahan
• Widget keterlibatan/obrolan media sosial

Fitur mewah berarti skrip tambahan yang perlu diminta, diuraikan, dan dijalankan

Ini termasuk penyematan dari sumber pihak ketiga seperti umpan Twitter/Instagram, widget berbagi Facebook, penyematan YouTube, serta skrip pelacakan/pemasaran seperti Google Pengelola Tag, Hotjar, dan/atau obrolan, dll.
 

Bersantailah dengan fitur mewah

 
Kami menguraikan beberapa masalah kinerja utama yang terkait dengan penambahan terlalu banyak fitur
 

---

 

Sumber Daya Pihak Ketiga Tambahkan Penggembungan ke Situs Web Anda

Sumber daya pihak ketiga menambahkan permintaan tambahan (sering kali beberapa) ke halaman Anda yang menyebabkan kinerjanya sangat terpengaruh

Sama seperti pembuat situs web itu sendiri, permintaan pihak ketiga juga tidak berada di server yang Anda kendalikan – Anda tidak dapat memodifikasi atau mengoptimalkan pengirimannya (mengaktifkan kompresi teks, menyetel kebijakan cache yang efisien, dll. )

Sumber daya pihak ketiga dapat memperpanjang dan memblokir permintaan halaman penting, menyebabkan kinerja menurun

 

Jangan kaget situs Anda berkinerja buruk jika Anda menyematkan banyak fitur seperti

• Widget media sosial – Facebook, Twitter, Instagram, dll
• Penyematan video – YouTube, Vimeo, Vevo, dll
• Iklan – Google AdSense, Media. net, Iklan Belanja Asli Amazon, dll
• Skrip/analitik/pelacak pemasaran – Google Analytics, Mailchimp, Hotjar, dll

 

---

 

Skrip Berlebihan Dapat Mempengaruhi Perangkat Keras Kelas Bawah

Menambahkan beberapa fitur pihak ketiga ke situs Anda kemungkinan akan membutuhkan lebih banyak sumber daya CPU dan memori dari perangkat pengunjung untuk merender laman

Perangkat keras kelas bawah, seperti ponsel kelas menengah mungkin kesulitan membuat halaman Anda saat menghadapi permintaan yang menyebabkan pekerjaan tambahan untuk browser, seperti pemrosesan JavaScript atau CSS yang berlebihan
 

Bagaimana perangkat keras dan koneksi kelas bawah menampilkan situs Anda?

 
Bergantung pada demografi pengunjung Anda, sebagian besar pengunjung Anda mungkin mengalami pengalaman buruk saat mencoba memuat halaman Anda
 

---

 

Sematan pihak ketiga Mungkin Memblokir Render

Beberapa skrip pihak ketiga yang digunakan di laman Anda mungkin bersifat memblokir perenderan. Ini berarti mereka akan mencegah pemuatan permintaan berikutnya, memperlambat situs Anda secara keseluruhan
 

Dalam contoh ini, gambar dihosting di server Pembuat situs web Anda sebagai pihak ketiga. File js dihosting di server pihak ketiga

 
Pelajari lebih lanjut tentang sumber daya yang memblokir perenderan di halaman dokumentasi kami

 

Rekomendasi

Anda harus selektif dengan fitur mana yang Anda tambahkan ke situs web Anda. Pertahankan hal-hal sederhana dan pastikan halaman Anda seringan mungkin

Pastikan integrasi pihak ketiga menambah nilai ke situs web Anda, karena kompromi dalam kinerja harus sepadan dengan fungsi yang Anda dapatkan darinya

Ingat juga bahwa tidak semua orang memiliki iPhone terbaru atau komputer pembangkit tenaga listrik, jadi berhati-hatilah dalam menambahkan fitur yang mungkin berdampak negatif pada pengguna tersebut
 

Audit penggunaan pihak ketiga Anda di Laporan GTmetrix Anda

Gunakan Kurangi dampak audit kode pihak ketiga untuk mengidentifikasi penyematan pihak ketiga dengan penalti kinerja berat, dan hapus penyematan yang tidak menambah nilai pada situs web/bisnis/operasi Anda

 

Catatan Khusus pada Aplikasi Shopify

Sumber daya pihak ketiga sangat lazim dengan Aplikasi Shopify. Sangat menggoda untuk menambahkan banyak fitur dan fungsionalitas dengan harapan dapat meningkatkan penjualan
 

Shopify menawarkan pasar besar untuk fungsionalitas pihak ketiga

 

Jangan lupakan salah satu fitur terpenting dari toko online mana pun – kecepatan

Lihatlah statistik utama terkait kecepatan ini untuk situs web

• 77% pembeli ponsel cerdas cenderung membeli dari perusahaan yang situs selulernya memungkinkan mereka melakukan pembelian dengan cepat
• 53% pengunjung seluler mengatakan mereka akan keluar dari situs web jika butuh waktu lebih dari 3 detik untuk memuat
• Studi telah menunjukkan bahwa 0. Pengurangan waktu muat 1 detik dapat meningkatkan rasio konversi ritel, rata-rata, sebesar 8%

Jelas bahwa memasang penghalang bagi pelanggan Anda untuk membeli secara alami akan menyebabkan mereka mencari di tempat lain

Berikut adalah beberapa contoh lagi tentang bagaimana waktu pemuatan yang lebih cepat berdampak pada keuntungan Anda
 

Peningkatan kinerja web berarti peningkatan konversi dan penjualan

 

Referensi

• http. // www. slideshare. net/cliffcrocker/velocity-ny-cara-mengukur-pendapatan-dalam-milidetik
• http. // www. slideshare. net/devonauerswald/walmart-pagespeedslide
• https. // www. dropbox. com/s/8rffw1px0yn05gm/Velocity-NY-Jed-Wood-Ancestry-User-Centered-Metrics. pdf?dl=0

 

---

 

Optimalkan gambar Anda

Menggunakan gambar yang tidak dioptimalkan membuat pengunjung Anda menangani lebih banyak data daripada yang seharusnya

Menurut laporan Arsip HTTP, gambar menyumbang hampir 50% dari total ukuran halaman median situs web [1]

Dengan bagian berat halaman yang begitu drastis dalam ukuran unduhan, optimalkan gambar Anda i. e. , mengukur dengan benar dan dapat berdampak dramatis pada kinerja, dan relatif mudah dicapai
 

Apa yang terjadi jika Anda menggunakan gambar yang TIDAK DIOPTIMALKAN

Ukuran gambar yang tidak sesuai dan gambar yang tidak dikodekan secara efisien membutuhkan waktu lebih lama untuk diunduh, diubah ukurannya, dan dirender

 

Kami menguraikan pentingnya pengoptimalan gambar dalam artikel Apa arti pengoptimalan gambar kami – tetapi pada dasarnya, tidak mengoptimalkan gambar Anda membuat pengunjung Anda berurusan dengan lebih banyak data daripada yang mereka butuhkan, memperpanjang waktu muat situs Anda
 

Apa yang terjadi jika Anda menggunakan gambar yang DIOPTIMALKAN

Sesuaikan ukuran gambar dan enkodekan unduhan gambar secara efisien dan render lebih cepat

 

 

Rekomendasi

Pastikan gambar Anda berukuran tepat dan dikodekan secara efisien (mis. e. , dikompresi)

Pembuat situs web yang lebih populer tampaknya menangani beberapa kompresi gambar secara otomatis, tetapi cara melakukannya bervariasi

Shopify

• Mengompres gambar
• Menghapus

Ruang persegi

• Tidak ada kompresi sama sekali
• Kompres sebelum mengunggah
• Gambar dibuat ulang ()

Wix

• kebanyakan gambar
• Mengonversi gambar ke format WebP pada browser yang didukung
• Browser lain menampilkan format gambar asli

Karena semua variasi ini, praktik yang baik adalah mengompres semua gambar Anda menggunakan Kraken atau Optimizilla, sebelum Anda mengunggahnya ke pembuat situs web mana pun.

Saat mengunggah gambar Anda di salah satu pembuat situs web ini, pilih "ukuran asli" atau "ukuran penuh" jika memungkinkan. Ini untuk memastikan platform menggunakan gambar terkompresi asli yang Anda unggah dan bukan versi mereka sendiri yang mungkin tidak terkompresi

Gunakan akal sehat dan pastikan sesuatu seperti file besar siap cetak berukuran 20mb tidak digunakan

Anda dapat mempelajari tentang pengoptimalan gambar di panduan lengkap kami

---

 

Kurangi permintaan Anda

Meskipun tampaknya masuk akal, banyak pemilik situs web mengabaikan dampak dari menawarkan terlalu banyak konten

Sederhananya, jangan berharap orang membaca dan melihat semuanya

 

Halaman panjang = banyak permintaan = halaman lambat

 
Kami telah melihat halaman dengan 60+ produk ditampilkan di beranda, banyak penyematan video, 10+ gambar penggeser, dll.
 

Terlalu banyak permintaan menghasilkan Bagan Air Terjun yang lebih panjang – gejala kinerja halaman yang buruk

 
Secara alami, semakin banyak aset yang Anda miliki di halaman Anda (gambar produk, spanduk, video, dll. ), semakin lama waktu yang dibutuhkan untuk mengunduh halaman. Hal ini terutama berlaku untuk beranda Anda – kemungkinan titik kontak pertama bagi pengunjung Anda

Anda mungkin memiliki niat terbaik dengan menyediakan banyak konten untuk dilihat pengunjung Anda, tetapi jangan berharap orang membaca dan melihat semuanya

57% pengguna berfokus pada konten paro atas

Studi Pengalaman Pengguna menunjukkan bahwa 57% waktu tampilan halaman pengguna terfokus pada. Ini berarti keterlibatan pengguna menurun semakin jauh Anda menggulir ke bawah halaman, memberi Anda lebih sedikit insentif untuk memiliki halaman yang panjang

 

Rekomendasi

Mengulangi pemikiran kami tentang integrasi pihak ketiga, Anda harus memastikan konten apa pun yang Anda tampilkan memberikan nilai tambah. Pendekatan "wastafel dapur" akan menghasilkan masalah kinerja

Optimalkan bagian paruh atas halaman Anda untuk menampilkan konten yang paling berharga, dan pertimbangkan untuk menggunakan halaman terpisah untuk berbagai jenis konten
 

Pertimbangkan Lazy Loading

Jika Anda benar-benar perlu memiliki konten dalam jumlah besar, lihat apakah mungkin menerapkan pemuatan lambat

Pemuatan lambat dapat menunda pemuatan konten di luar layar hingga pengguna men-scroll ke konten tersebut, memastikan bahwa konten hanya dimuat saat diperlukan dan mempercepat pengiriman konten paro atas Anda

Bergantung pada pembuat situs web Anda, mungkin ada beberapa cara untuk melakukannya
 

• Cari tahu apakah tema atau template Anda mendukung pemuatan lambat dan aktifkan
  • Berbagai pembuat situs web memiliki implementasi pemuatan lambat yang berbeda
  • Beberapa pembuat situs web seperti Wix mungkin secara otomatis mengimplementasikan pemuatan malas dengan cara tertentu
• Temukan pengaya/ekstensi/plugin yang memuat lambat
  • Perhatikan bahwa Anda mungkin harus membayar ekstra untuk ini
  • Anda harus memastikan bahwa plugin tersebut kompatibel dengan tema Anda dan tidak akan merusak situs Anda
• Tambahkan kode JavaScript pemuatan lambat khusus ke situs web Anda
  • Anda mungkin memerlukan tingkat langganan yang memungkinkan untuk mengedit kode JS/CSS
  • Berikut adalah beberapa sumber tentang pemuatan lambat yang dapat Anda periksa
    • Gunakan pemuatan lambat untuk meningkatkan kecepatan pemuatan
    • Bagaimana Lazy Loading Dapat Mengoptimalkan Gambar Tema Shopify Anda
    • Tunda gambar di luar layar
    • Malas memuat sumber daya pihak ketiga dengan fasad

 

---

 

Kesimpulan

Dengan kekuatan besar datang tanggung jawab besar

Pembangun situs web do-it-yourself menempatkan banyak kemampuan di tangan Anda. Meskipun ini bagus, Anda perlu berhati-hati dan benar-benar mempertimbangkan pro/kontra menambahkan fungsionalitas tambahan ke situs Anda

Kesederhanaan adalah kuncinya – Optimalkan saat Anda memiliki kontrol, sederhanakan, dan kurangi saat Anda tidak memilikinya

 

Rekap rekomendasi

Pedoman untuk Shopify, Squarespace, Wix yang cepat, atau situs web berbasis pembuat situs web lainnya benar-benar didasarkan pada akal sehat

• Gunakan fitur mewah dengan mudah
  Pertahankan hal-hal sederhana dan pastikan halaman Anda memiliki tapak yang ringan
   
• Optimalkan gambar Anda
  Sesuaikan ukuran dan enkode gambar secara efisien. Jangan buat pengguna Anda mengunduh lebih banyak data daripada yang mereka butuhkan
   
• Batasi penggunaan sumber daya pihak ketiga
  Pastikan widget pihak ketiga sepadan
   
• Kurangi permintaan Anda
  Pastikan konten apa pun yang ada di halaman Anda memiliki nilai. Lazy load resource jika perlu

Mengikuti prinsip-prinsip ini dapat memastikan bahwa Anda menghadirkan situs web yang lebih ramping, ringan, dan berfokus pada kinerja

 

Butuh bantuan?

Kami hanya merekomendasikan produk dan layanan yang telah kami ulas dan uji sendiri. Di bawah ini Anda akan menemukan tautan afiliasi ke mitra pengoptimalan kami – Jika Anda memutuskan untuk membeli layanan mereka melalui tautan yang disediakan, kami mungkin menerima komisi tanpa biaya tambahan untuk Anda

---

Perlu bantuan dengan situs Anda?

Kami merekomendasikan mencari bantuan di Fiverr. Ini adalah opsi bagus untuk pemilik situs web Shopify, Squarespace, atau Wix yang ingin meningkatkan kinerja, tetapi tidak memiliki keterampilan teknis untuk menerapkan pengoptimalan

Kunjungi Fiverr, daftar akun, dan cari layanan pengoptimalan kecepatan untuk situs web Anda

Temukan pakar untuk platform Anda. Pakar Shopify. Pakar ruang persegi. Pakar Wix

---

Tidak bisa lagi "melakukannya sendiri"?

Temukan tangan ahli untuk mengambil alih Storetasker, tempat Anda dapat mendiskusikan masalah kinerja dengan platform Shopify Anda dan dapatkan penawaran gratis

Jika Anda merasa nyaman dengan penawaran tersebut, Anda dapat menerima dan memulai pekerjaan

Kunjungi Storetasker untuk mengobrol dengan pakar dan mendapatkan bantuan terkait situs web Anda

 

Tag. pengoptimalan gambar mengoptimalkan gambar melayani gambar berskala shopify squarespace waterfall chart pembuat situs web wix

Bagaimana cara membersihkan JavaScript yang tidak terpakai?

Bagaimana cara mengurangi CSS dan JavaScript yang tidak terpakai?

Bagaimana cara mendeteksi JavaScript yang tidak digunakan?

Bagaimana cara menghapus JavaScript yang tidak terpakai di WordPress tanpa plugin?