Optimasi Kecepatan Magento 2: Penelitian Membuktikan Fungsionalitas Default Sudah Cukup

pengantar

Menurut Statista, jumlah pengguna ponsel di dunia diperkirakan akan melewati angka lima miliar pada tahun 2019. Dengan demikian, Google menempatkan yang paling penting pada kecepatan pemuatan situs di perangkat seluler. Parameter ini tidak diragukan lagi mempengaruhi peringkat hasil pencarian. Selain itu, waktu buka situs web yang cepat meningkatkan konversi karena situs dapat menghindari kehilangan pengguna rawat inap.

Di bagian pertama artikel ini, kami akan mencoba mencari tahu dan menunjukkan apakah mungkin untuk mempercepat waktu buka halaman Magento 2 menggunakan cara standar atau tidak, dan yang terpenting, tentukan seberapa efektif cara ini.

Di bagian kedua, kami akan memberikan wawasan tentang efektivitas solusi dan pendekatan pihak ketiga.

Lingkungan Pengujian

Semua pengukuran akan dilakukan di Chrome Audit dengan batasan 'Untuk perangkat seluler dengan simulasi Fast 3G':

Magento 2.3.1 yang dibuka di wadah Docker akan digunakan dalam peninjauan. Ini akan memungkinkan kita untuk mengisolasi sumber daya.

Kami akan mengukur kinerja dalam mode produksi dengan cache bawaan yang diaktifkan sepenuhnya.

Pengujian akan dilakukan pada tiga halaman situs: halaman utama, produk dan kategori. Untuk setiap halaman ini, kami akan menjalankan pemeriksaan audit tiga kali. Hasil tes rata-rata akan dipilih.

Karena kami tidak akan menjalankan pengujian beban sementara waktu pemuatan halaman di sisi klien di browser akan dibahas terutama dalam artikel ini Versi MySQL dan PHP tidak akan ditentukan. Bukan hasil secara absolut tetapi perbedaan kinerja antara berbagai konfigurasi akan menjadi perhatian utama bagi kami.

Bagaimana mungkin mempercepat waktu buka halaman menggunakan Magento standar dan sarana server?

Di atas segalanya, ini dapat dicapai dengan mengurangi ukuran data yang dikirim atau jumlah permintaan. Baca terus untuk wawasan yang lebih detail.

Bab 1. Pengaturan Magento dan Konfigurasi Server

Gzip

Seperti yang dapat dilihat dari tabel di bawah, hal pertama dan paling penting yang harus dilakukan Anda benar, tidak ada relevansinya dengan pengaturan Magento adalah mengaktifkan kompresi di server. Volume data adalah faktor kunci yang menentukan kecepatan pemuatan di jaringan seluler yang lambat. Dengan kompresi diaktifkan, situs akan digambarkan lebih cepat. Kelemahan yang tak terelakkan termasuk peningkatan parameter CPU Idle Pertama sebagai hasil pembongkaran di sisi server.

Tanpa Gzip:

Dengan Gzip diaktifkan:

Perkecil Js dan CSS

Bagaimana jika kita mencoba mengurangi ukuran data yang dikirimkan lebih banyak lagi? Pertama-tama, mari aktifkan Minify Js dan Minify CSS. Kemudian, buatlah perbandingan.

Semua konfigurasi terkait pengoptimalan dapat ditemukan di Toko -> Konfigurasi -> Pengembang:

Tab ini hanya tersedia dalam mode pengembang . Saat dalam mode produksi , pastikan untuk beralih ke mode pengembang terlebih dahulu, menggunakan perintah berikut:

 > bin/magento deploy:mode:set developer

Kemudian, Anda akan dapat melihat bagian Pengembang, membuat perubahan konfigurasi yang diperlukan, menghapus cache, dan beralih kembali ke mode produksi sekali lagi:

 > bin/magento deploy:mode:set production

Setelah itu, penyebaran konten statis terjadi.

Akhiran min ditambahkan ke file js/css:

Volume data memang berkurang! Untuk halaman rumah, 1 Mb bukannya 1,3 Mb ditransfer.

Jika Anda berpikir ini telah meningkatkan parameter kami hingga sepertiga, Anda salah. Situasi telah membaik, tetapi tidak secara signifikan.

Kami menjalankannya lagi dan lagi, tetapi hasilnya stabil, yaitu, meskipun ada peningkatan tertentu, itu tidak sebanding dengan penurunan volume data yang dikirimkan.

Gabungkan Js dan Gabungkan CSS

Sekarang, masuk akal untuk berasumsi bahwa peningkatan lebih lanjut harus terkait dengan penurunan jumlah permintaan daripada volume data.

Mari kita coba dan aktifkan Merge Js dan Merge konfigurasi CSS.

Perhatikan bahwa Magento sendiri menggambarkan fitur ini sebagai fitur yang sudah ketinggalan zaman:

'Kami tidak menyarankan menggunakan pengaturan usang seperti menggabungkan file JS dan CSS, karena mereka dirancang hanya untuk JS yang dimuat secara sinkron di bagian HEAD halaman. Menggunakan teknik ini dapat menyebabkan bundling dan logika requireJS bekerja dengan tidak benar.'

Namun demikian, mari kita mencobanya:

Perubahan jumlah permintaan tidak mengesankan, bukan?

Meskipun parameter seperti 'First Contentful Paint' dan 'First Meaningful Paint' telah diperbaiki, pasti ada ruang untuk perbaikan.

Paket JS

Mari kita coba teknologi JS Bundle, di mana file js dibundel berdasarkan ukuran tetap. Ini memungkinkan kami untuk mengelola jumlah permintaan sementara volume data keseluruhan tetap tidak berubah.

Hasilnya mengecewakan. Masalahnya adalah mekanisme Magento built-in mengumpulkan js-bundles untuk semua situs, yaitu, hampir semua js akan dikumpulkan sepenuhnya di halaman mana pun. Ini akan menyebabkan peningkatan tajam dalam volume halaman.

Ya, Anda dapat mengecualikan file js tertentu dari bundel (beberapa di antaranya dikecualikan secara default). Namun, Anda tidak bisa melakukannya untuk halaman tertentu.

Magento juga tidak menyarankan untuk mengaktifkan Bundle JS dalam mode produksi. Sepertinya ini adalah opsi kedua yang tersedia, tetapi sebenarnya tidak juga.

Paket JS Tingkat Lanjut

Magento mengenali kesulitan dengan Bundles JS tetapi menawarkan untuk menghindari mengatasinya sendiri. Dalam panduan resmi, Anda akan menemukan contoh bagaimana mungkin untuk menggabungkan hanya file js yang diperlukan pada halaman saat ini. Ya, ini sedikit lebih sulit daripada mengubah parameter di konfigurasi. Untuk Bundel Lanjutan, Anda harus menggunakan Nodejs, Require JS, Phantom JS. Tentu saja, ini bukan solusi yang sudah jadi. Tetapi setelah menguji mekanisme yang ditawarkan, kami akan memiliki ide tentang bagaimana Bundel Lanjutan dapat mempercepat waktu buka halaman, dari perspektif teoretis.

Mekanisme yang disarankan bekerja dalam mode manual dan tidak di dalam tetapi di luar kerangka kerja. Alat khusus menganalisis file js yang dimuat pada halaman dan mengumpulkannya dalam satu bundel, baik yang umum atau khusus untuk bundel TYPE halaman.

Pada akhirnya, bundel yang dikumpulkan ditulis dalam require js dan dimuat olehnya di halaman:

Pada setiap jenis halaman (tentu saja, yang bundelnya dikumpulkan), bundel tertentu dimuat. Ini akan menjadi contoh untuk halaman rumah:

Tampaknya setelah kami mengurangi jumlah permintaan, data tambahan tidak dimuat dan kinerja harus meningkat secara signifikan… Tetapi waktu kritis untuk SEO First Contentful Paint dan First Meaningful Paint juga meningkat secara dramatis. Itu masuk akal. Sampai file bundel dimuat, tidak ada pelacakan yang akan dilakukan.

________________

Sepertinya kita sudah mencoba yang terbaik, atau tidak? Saya kira sudah waktunya untuk melanjutkan dan mencoba teknologi saat ini.

HTTP/2

Mari kita nonaktifkan Bundle JS di Magento dan aktifkan HTTP/2 di server.
Dalam kasus kami, itu hanya nginx. Apa yang telah kami lakukan adalah mengubah beberapa baris menambahkan dukungan http2 untuk port 443.

 listen 80; listen 443 ssl http2; server_name md201.local; ssl_certificate /etc/nginx/ssl-certificates/md201.local/localhost.crt; ssl_certificate_key /etc/nginx/ssl-certificates/md201.local/localhost.key;

Untuk pengujian di Chrome, kami perlu menambahkan sertifikat yang ditandatangani sendiri ke Otoritas Root Tepercaya (MacOS dalam kasus kami).

Begini tampilan koneksi HTTP/2:

Ini telah meningkatkan semua parameter tanpa kecuali! Semuanya tergantung pada fitur teknologi HTTP/2.

Penurunan penundaan akses untuk mempercepat waktu buka halaman, khususnya dengan:

• kompresi data di header HTTP,
• penggunaan teknologi puch di sisi server,
• permintaan konveyor,
• resolusi pemblokiran protokol HTTP 1.0/1.1 head-of-line,
• multiplexing banyak permintaan dalam satu koneksi TCP.

Dengan HTTP/2, sejumlah besar permintaan tidak akan menjadi masalah karena tidak ada koneksi TCP yang terbuka untuk setiap permintaan.

HTTP/2 didukung oleh versi nginx dan Apache terbaru di sebagian besar browser aktual: https://caniuse.com/#search=http2

Sehubungan dengan itu, Anda mungkin memiliki pertanyaan berikut: Bagaimana jika kita menggabungkan Advanced JS Bundle dan HTTP/2?

Secara teoritis, ini tidak akan mempercepat waktu pemuatan halaman karena HTTP/2 tidak memiliki keuntungan signifikan dalam memuat file js bundel besar. Tapi untuk mengetahuinya dengan pasti, mari kita periksa.

Seperti yang kita lihat, menggunakan Advanced Bundle JS dalam koneksi HTTP/2 tidak meningkatkan kecepatan.

Upaya untuk menyempurnakan bundel adalah proses yang memakan waktu. Ini membutuhkan bundel untuk dibuat ulang setelah setiap pembaruan Magento atau ekstensi pihak ketiga (yang menambahkan JS di front-end), serta setelah menambahkan jenis produk baru yang menghubungkan js spesifik mereka atau yang tidak menggunakan js produk lain jenis. Pada dasarnya, ada lebih banyak nuansa untuk dipertimbangkan. Menurut pendapat saya, bergerak menuju Bundle JS tidak akan menghasilkan hasil yang signifikan jika Anda memiliki kemungkinan untuk menggunakan HTTP/2.

Apa cara lain untuk optimasi kecepatan yang ada? Apakah mungkin untuk membuat waktu buka halaman lebih cepat?

_______________

Pindahkan kode JS ke bagian bawah halaman

Sejujurnya, kami berencana untuk meninjau sarana pengoptimalan ini dari vendor pihak ketiga, tetapi saat artikel ini sedang dalam proses pembuatan, Magento 2.3.2 dirilis. Fitur ini telah ditambahkan ke versi baru (dan dinonaktifkan secara default).

Saat diaktifkan, beberapa file js ditransfer dari bagian <head> ke akhir </body>, yang seharusnya mempercepat awal visualisasi situs secara teori.

Itulah yang kami miliki di awal:

Inilah yang kami dapatkan setelah mengaktifkannya:

Untuk menjalankan pengujian tersebut, kami harus memperbarui versi Magento kami ke 2.3. Jumlah dan ukuran file yang terhubung diubah. Oleh karena itu, hasil tes bisa jadi kasar. Untuk memahami bagaimana versi Magento sendiri telah memengaruhi hasil, kami membandingkan versi M2.3.1 vs M2.3.2 dengan kombinasi HTTP/2 + Minify JS/CSS terlebih dahulu dan hasil yang diperoleh praktis sama, yang tidak melampaui ketidakpastian pengukuran.  

Seperti yang kita lihat, First Contentful Paint dan First Meaningful Paint telah ditingkatkan dalam semua kasus sebesar 10-15%.

Dalam semua cara ikhtisar pengoptimalan kecepatan Magento, varian berikut tampaknya memimpin:

Gzip + Perkecil JS/CSS + HTTP/2 + Pindahkan kode JS ke bagian bawah halaman

Mari kita menganggapnya sebagai titik awal dan melangkah lebih jauh. Sebelumnya, kami bermain-main dengan konfigurasi yang hanya menyentuh JS/CSS. Dengan demikian, ada aspek-aspek tertentu yang dapat ditingkatkan.

Perkecil HTML

Pengaturannya dapat ditemukan di sini:

HTML bagian dari halaman rumah 89 Kb sebelum dan 88,7 setelah HTML Perkecil / dengan kompresi pada server 12,2 melawan 12,1 Kb.

HTML bagian dari halaman kategori 155 Kb sebelum dan 100 setelah HTML Minify / dengan kompresi pada server 16,8 melawan 15,2 Kb.

Bagian HTML dari halaman produk 80 Kb sebelum dan 67 setelah HTML Perkecil / dengan kompresi di server 15 melawan 14,1 Kb.

Karena kompresi di sisi server digunakan, perbedaan 1-2 Kb tidak kritis dan berada dalam kelemahan audit.

Bab 2. Alat Tambahan

Ekstensi pihak ketiga: Perkecil/Gabungkan JS/CSS/HTML | Bundel JS

Sementara itu, tidak ada gunanya mencari solusi pihak ketiga untuk JS/CSS/HTML dan bundel JS. Bahkan jika Anda dapat mencapai hasil kompresi ekstra, hasilnya akan dibatasi hingga satu persen di bagian depan. Sebagai imbalannya, Anda akan mendapatkan satu atau beberapa ekstensi Magento lagi di sistem. Fakta kehadiran dan pengoperasian algoritme mereka membutuhkan sumber daya tambahan, serta meningkatkan risiko kegagalan sistem secara umum. Jika Anda tidak yakin bahwa potensi manfaat lebih besar daripada risiko terkait, disarankan untuk menarik diri dari penggunaannya .

Jika Anda mengetahui solusi pihak ketiga yang secara drastis meningkatkan kecepatan pemuatan melalui kompresi dan bundling, kami mendorong Anda untuk membagikannya di komentar atau memberi tahu kami secara langsung di [email protected] . Kami akan dengan senang hati menyelidikinya  

Sekarang, mari kita coba melakukan perbaikan menggunakan cara yang tidak tersedia di Magento secara default.

Kurangi ukuran gambar

Penggunaan gambar di web selalu merupakan kompromi antara kualitas dan ukuran file gambar.

Perhatian utama kami adalah pengurangan ukuran gambar tanpa kehilangan kualitas. Nah, dengan menggunakan fungsi default Magento, memang dimungkinkan untuk memperkecil ukuran gambar. Tetapi kualitas gambar akan berkurang secara signifikan.

Mari kita kurangi ukuran gambar standar, yang diubah dan diubah ukurannya oleh Magento berdasarkan konfigurasi, yaitu, kita sebagian besar tertarik pada gambar yang terletak di direktori magento_root/pub/media/catalog/product/cache.

Konfigurasi Magento dapat ditemukan di sini:

Sebagai permulaan, mari kita coba melakukannya secara manual dan menggunakan utilitas jpegoptim. Beberapa modul yang ditujukan untuk mempercepat Magento (termasuk yang berbayar) didukung oleh utilitas ini.

Tidak ada hasil untuk gambar dari cache kecuali kami menurunkan kualitas gambar:

Sepertinya ada yang salah dengan itu. Untuk tujuan pengujian, kami menerapkannya pada gambar asli, yang sebenarnya tidak ditampilkan di halaman. Kami berhasil mencapai hasil tertentu, meskipun tidak signifikan:

Bagaimana dengan mencari solusi otomatis?

Mari kita coba pengoptimal gambar gratis berikut: https://github.com/justbetter/magento2-image-optimizer.

Kami telah menginstal semua utilitas yang ditawarkan yang digunakan oleh ekstensi:

• JpegOptim
• Memilih
• Pngquant 2
• SVGO
• Gifsicle

Pengaturan kompresi gambar telah diatur hingga 80 untuk JPEG. Ini sesuai dengan pengaturan Magento default. Kemudian, kami menjalankan optimasi untuk semua direktori media .

Ukuran direktori media penuh sebelum kompresi adalah 353 Mb, setelah 340,1 Mb

ukuran direktori media/catalog/product/cache adalah 194,7 Mb dan tidak berubah setelah kompresi.

Kami telah menemukan solusi yang nyaman dan berguna, terutama jika Anda tidak menyiapkan gambar sebelum mengunggahnya ke situs Anda.

Namun, dalam hal mengurangi ukuran gambar keseluruhan pada halaman produk dan kategori, tidak ada peningkatan signifikan yang dicapai.

Mungkin, format gambar lain terutama digunakan dalam kasus Anda. Dengan demikian, hasilnya mungkin lebih signifikan.

Kami sengaja tidak meninjau format gambar webp di sini karena browser apple tidak mendukung format ini: https://caniuse.com/#feat=webp.

____________________

Baiklah, jika kita tidak dapat mengurangi ukuran file gambar secara signifikan, mari kita coba mengunggahnya hanya untuk area yang terlihat.

Memuat Gambar Malas

Mari kita coba solusi pihak ke-3 GRATIS pertama yang kita temui Magento 2 Lazy Loading.

Seperti sebelumnya, kami menjalankan audit pada produk, kategori, dan halaman beranda.

Tidak ada perubahan signifikan yang dicapai. Variasi berada dalam ketidakpastian pengukuran.

Ini mungkin karena halaman data sampel cukup ringan dan semua gambar utama terletak tepat di area yang terlihat.

Deskripsi produk tidak mengandung gambar. Kategori tidak memiliki deskripsi sama sekali.
Mari kita lakukan dengan cara termudah dan cukup menambah jumlah produk (termasuk jumlah pemuatan gambar) pada halaman kategori di pager pertama dari 9 menjadi 30, lalu hingga 48 dan daftar hasilnya.

Hasilnya jelas. Semakin besar (dalam jumlah dan ukuran) gambar Anda di tempat yang tidak terlihat di area pemuatan awal situs web, semakin signifikan keuntungannya. Fitur ini pasti berguna dari sudut pandang pengoptimalan meskipun memiliki kelemahan kegunaan tertentu.

_________________

Alih-alih Kata-kata Akhir

Kami telah meninjau fitur Magento standar dan beberapa solusi pihak ketiga yang memungkinkan pengoptimalan kinerja pemuatan halaman.

Terlepas dari penelitian tersebut, kami merasa sulit untuk menarik kesimpulan yang tegas karena semua situs web itu unik dan memiliki keunikannya masing-masing. Jadi, selalu ada beberapa tingkat kemungkinan bahwa solusi yang bekerja untuk satu situs tidak akan berpengaruh pada yang lain.

Namun, fitur paling berguna yang memiliki efek bermakna adalah Gzip default Magento + Minify JS/CSS + HTTP/2 + Image Lazy Loading

Tentang Bundel JS

Dengan demikian, versi lanjutan bundel ini dari pengembang ekstensi pihak ketiga hampir tidak akan memungkinkan peningkatan kecepatan pemuatan secara signifikan tanpa penyesuaian situs tambahan yang dipersonalisasi.

Pasti ada lebih banyak cara untuk dicoba yang dapat membantu meningkatkan waktu buka. Namun, banyak dari mereka bukan solusi satu ukuran untuk semua. Misalnya, korelasi pengunjung situs dari berbagai negara di seluruh dunia dan lokasi server/server fisik juga penting. Masuk akal untuk mentransfer situs ke server, dari mana transfer data akan lebih cepat untuk sebagian besar pengguna situs/menggunakan CDN untuk file statis. Jika pengunjung situs terutama dari satu wilayah, maka Anda dapat mencoba menyimpan file statis menggunakan Varnish: https://devdocs.magento.com/guides/v2.3/config-guide/varnish/config-varnish-magento.html# cache-statis-file.

Pada akhirnya, cara yang pada dasarnya mengubah situasi dan membuat situs Anda cepat maksimal di perangkat seluler adalah menggunakan teknologi AMP.

PS AMP

(https://amp.dev/about/websites)

Untuk perangkat genggam, dari Google SERP, pengguna tidak akan masuk ke situs Anda tetapi ke versi cache-nya yang disimpan di server Google. Beban awal akan secepat kilat. Situs web semacam itu secara alami ditunjukkan dengan kilat di SERP.

Teknologi ini tidak sederhana dan mengasumsikan hanya menggunakan perpustakaan amp js sendiri. Selain itu, Anda mendapatkan kesempatan untuk memiliki versi halaman terpisah yang tidak terhubung ke tema Anda saat ini dengan cara apa pun.

Ini bisa menjadi pilihan yang sulit untuk dibuat. Di satu sisi, ini semua tentang peningkatan kecepatan pemuatan dan konversi. Di sisi lain, ada batasan yang diterapkan oleh teknologi AMP, yaitu, Anda hanya dapat menggunakan js dan HTML dari pustaka AMP. Akibatnya, fungsinya menjadi terbatas.