Kami memiliki banyak file CSS dan JS kecil dan mengaktifkan penggabungan tampaknya menjadi pilihan yang baik.
Banyak file CSS dan JS digunakan pada setiap halaman (halaman rumah, halaman kategori, halaman detail produk).
Setiap kali kami melihat bahwa file gabungan berbeda dimuat lagi pada setiap halaman, bahkan CSS yang terkandung harus tumpang tindih.
Bagaimana kita bisa menghindari ini dan menggunakan kembali lebih banyak data?
css
javascript
frontend
Alex
sumber
sumber
.cssdan tambahan.js. Dalam instalasi default Magento sebenarnya.cssfile-file tersebut secara global hampir sama, sehingga file yang digabungkan memiliki hash yang identik. Tetapi untuk.jsini sangat berbeda - jadi ada file yang baru digabungkan untuk halaman produk dan untuk halaman kategori dan seterusnya - selalu termasuk lib prototipe lengkap.Jawaban:
Jawaban singkat: tidak pernah mengaktifkan fungsi penggabungan JS / CSS Magento. Secara keseluruhan, ini lebih buruk untuk kinerja sepanjang siklus checkout yang khas daripada mengirim setiap aset secara individual.
Jawaban panjang: Anda seharusnya hanya melayani satu file CSS untuk pengguna. Banyak file memblokir rendering hingga semua CSS diunduh. Jika Anda tidak menyediakan CSS dalam jumlah besar, maka mengirimnya sekaligus menguntungkan, maka peramban menyimpannya dalam cache. Menggunakan pra-prosesor seperti Sass atau LESS dapat membawa langkah ini ke dalam proses build Anda alih-alih membiarkan Magento melakukannya dengan tidak efisien.
Untuk JS, idealnya Anda tidak harus menggabungkan sisi server ini. Loader skrip sisi klien seperti AMD / RequireJS adalah pilihan yang lebih baik dan membantu mengelola dependensi, yang tidak dimiliki oleh Layout XML Magento. Di dunia nyata meskipun Magento menjatuhkan skrip di beberapa titik dalam aliran checkout. Anda masih lebih baik mengambil hit pemuatan halaman awal dari beberapa permintaan dan memiliki aset yang terpisah tetapi di-cache setelahnya.
Ekstensi Fooman Speedster Advanced adalah taruhan terbaik Anda untuk menggabungkan aset secara cerdas tanpa duplikasi (hari ini).
Anda agak dibatasi oleh arsitektur Magento 1.x yang dimulai dengan tumpukan praktik buruk untuk kinerja frontend. Tidak realistis untuk mengubah arah kapal itu. Berkontribusi pada Magento 2.
sumber
Kami telah menggunakan Ekstensi Magento Fooman Speedster . Ini adalah ekstensi luar biasa yang menangani penggabungan file CSS dan JS untuk meningkatkan kinerja halaman Anda.
Dari halaman:
sumber
uglifyjs --compressdan menangani komentar dengan lebih baik, Anda bisa mendapatkan peningkatan tambahan sekitar 4% lebih kecil dengan kode saya. Saya menggunakan uglifyjs v3 dari node.