Mengoptimalkan beban ujung depan, bagaimana cara menggabungkan dan mengkompres JS dengan benar?

8

Situs web saya untuk klien perusahaan memiliki sekitar 90 aset yang diunduh saat dimuat, 35 atau lebih adalah file JS. Bahkan ekstensi "mengoptimalkan" yang dibuat untuk Joomla hanya membuat saya turun ke 31 atau lebih file JS dan hanya mengompresi css / js gabungan dan bukan yang tampaknya menjalankan nakal.

Saya telah mencoba beberapa plugin gratis yang mengoptimalkan, dan saya enggan menghabiskan uang untuk yang dibayar jika mereka akan melakukan sangat sedikit untuk waktu muat saya.

Templat saya adalah basis Rockettheme dengan banyak penyesuaian, sehingga memiliki Gantry js, bootstrap js, beberapa ekstensi seperti pemutar video saya menggunakan file js, dll, dan tampaknya menyebar ke beberapa per ekstensi, bukan hanya satu.

Apa yang berhasil dan apa yang tidak untuk meningkatkan bagian beban ujung depan ini?

javascript performance front-end gantry Toni Marie
sumber

Jawaban:

9

Tidak mudah menangani semua file ini. Menggabungkan, memperkecil, dan mengompresi semua ini bersama-sama kemungkinan besar akan membawa masalah. Dibutuhkan banyak upaya dan kombinasi teknik untuk mencapai tingkat optimisasi yang memuaskan.

Pendekatan saya secara keseluruhan untuk mencapai situs pemuatan cepat.

Situs web yang cepat sangat penting. Optimasi kecepatan sebuah situs web, meskipun biasanya terjadi pada akhir pengembangan, itu adalah sesuatu yang harus dipertimbangkan sejak awal. Dimulai dengan template yang tepat.

Juga menginstal setiap ekstensi, dan menggunakan segala jenis modul mewah, itu mungkin menghasilkan situs web yang berat, yang akan sangat sulit untuk membuatnya lebih ringan nantinya.

Jadilah eklektik - tetap minimal

Secara pribadi, ketika datang untuk mempercepat optimasi, saya mencoba menjadi sangat eklektik pada ekstensi apa yang saya gunakan. Saya meneliti dan bereksperimen untuk yang paling efisien dan berkualitas untuk setiap tugas, dan selalu berusaha menghindari penggunaan ekstensi apa pun, jika ada hal-hal yang dapat dicapai secara manual di dalam inti.

Juga, jika saya harus memutuskan untuk menggunakan fitur front-end yang mewah tidak terlalu penting, yang menyebabkan saya kesulitan dalam mengoptimalkan situs web, saya biasanya akan membuangnya, atau mencari cara lain untuk mengimplementasikan fitur fancy.

Saya juga mencoba untuk menghindari menggunakan template komersial, karena mereka biasanya datang dengan banyak fitur tambahan untuk memuaskan berbagai selera. Saya lebih suka membangun template dan hanya menyertakan apa yang saya butuhkan.

Pekerjaan Manual Anda

Saya akan menyarankan untuk meninjau semua ekstensi yang Anda harus melihat bagaimana mereka memuat file aset mereka, dan jika mungkin untuk menghindari memuatnya di halaman di mana Anda tidak membutuhkannya, misalnya Anda dapat membuat penggantian template yang memungkinkan untuk mengontrol Anda sendiri pemuatan file aset.

Anda mungkin menemukan bahwa ada ekstensi yang tidak Anda butuhkan , tetapi masih dimuat, atau Anda tidak memiliki pengaturan optimal tentang bagaimana mereka harus bekerja.
Misalnya JCE Mediabox menyediakan opsi untuk dimuat hanya dalam item menu tertentu.

Lihat juga apakah mungkin untuk menggabungkan file menjadi satu. Misalnya jangan biarkan modul apa pun memuatnya css, cobalah untuk menggabungkannya dengan file css templat.

Alat Optimasi

CSS / JAVASCRIPT KOMPRESI & KONTROL
Adapun alat optimasi / plugin, saya cukup senang dengan plugin JCH Optimize . Ini gratis, tetapi juga memiliki versi komersial dengan dukungan untuk beberapa dolar. Dengan penyesuaian yang tepat, dapat menghasilkan hasil yang bagus dan pengembang sangat membantu jika Anda membutuhkan dukungan.

Alat lain yang mungkin terbukti bermanfaat, adalah plugin JQuery Easy . Ini dapat membantu untuk mengatur dan mengontrol pemuatan berbagai file javascript dengan lebih baik, jika mereka bertentangan satu sama lain dan membuat pengoptimalan dengan Plugin JCH_Optimize lebih mudah.

CACHE
Saya juga menggunakan Jot Cache , untuk memiliki kontrol yang lebih baik atas Cache, karena banyak ekstensi memiliki masalah dengan cache inti.

CDN
Menggunakan CDN untuk mengirimkan konten statis adalah alat berikutnya - Saya menggunakan NoNumber CDN untuk Joomla

HTACCESS
Akhirnya, manfaat besar yang akan Anda peroleh dengan menggunakan htaccess untuk mengompres dan menambahkan header Expire ke file.

FFrewin
sumber
5

Tidak ada solusi sederhana untuk 30+ file JS.

Anibal
sumber
Saya mengklik saran lengkap di atas sebagai "jawaban" tetapi saya juga harus mencatat bahwa RokBooster bekerja jauh lebih baik bagi saya daripada JCH Optimize karena saya menggunakan templat dan ekstensi berbasis Gantry. Terima kasih! Saya berharap saya bisa mengklik keduanya.
Toni Marie
Keren, senang bisa membantu
Anibal