Magento 2 Hız Optimizasyonu: Araştırma Varsayılan İşlevselliğin Yeterli Olduğunu Kanıtlıyor

giriiş

Statista'ya göre, dünyadaki cep telefonu kullanıcı sayısının 2019'da beş milyarı geçmesi bekleniyor. Bu bağlamda Google, mobil cihazlarda site yükleme hızına büyük önem veriyor. Bu parametre şüphesiz arama sonuçları sıralamasını etkiler. Ek olarak, siteler yatan hasta kullanıcılarını kaybetmekten kaçındıkça, hızlı web sitesi yükleme süresi dönüşümü artırır.

Bu makalenin ilk bölümünde, standart araçlar kullanarak Magento 2 sayfa yükleme süresini hızlandırmanın mümkün olup olmadığını anlamaya ve göstermeye çalışacağız ve en önemlisi, bu araçların ne kadar etkili olduğunu tanımlayacağız.

İkinci bölümde, 3. parti çözümlerin ve yaklaşımların etkinliği hakkında bir fikir vereceğiz.

Test Ortamı

Tüm ölçümler, 'Hızlı 3G simülasyonlu mobil cihaz için' sınırlaması ile Chrome Denetiminde yapılacaktır:

İncelemede Docker kapsayıcısında açılmış Magento 2.3.1 kullanılacaktır. Bu, kaynakları izole etmemize izin verecektir.

Tam etkin yerleşik önbellek ile üretim modunda performansı ölçeceğiz.

Test, üç site sayfasında gerçekleştirilecektir: ana, ürün ve kategori sayfaları. Bu sayfaların her biri için üç kez denetim kontrolleri gerçekleştireceğiz. Ortalama bir test sonucu seçilecektir.

Yükleme testi yapmayacağımız için ― bir tarayıcıda istemci tarafında sayfaların yüklenme süresi bu makalede öncelikle ele alınacak olsa da ― MySQL ve PHP sürümleri belirtilmeyecektir. Mutlak terimleriyle sonuç değil, çeşitli konfigürasyonlar arasındaki performans farkı bizim için birincil ilgi olacaktır.

Standart Magento ve sunucu araçlarını kullanarak sayfa yükleme süresini hızlandırmak nasıl mümkün olabilir?

Her şeyden önce, bu, gönderilen verinin boyutunu veya istek sayısını azaltarak başarılabilir. Daha ayrıntılı bilgiler için okumaya devam edin.

Bölüm 1. Magento Kurulumu ve Sunucu Yapılandırması

gzip

Aşağıdaki tablodan da anlaşılacağı gibi, yapılacak ilk ve en kritik şey - haklısınız, Magento kurulumu ile ilgisi yok - sunucuda sıkıştırmayı etkinleştirmek. Veri hacmi, yavaş mobil ağlarda yükleme hızını belirleyen temel faktördür. Sıkıştırma etkinleştirildiğinde, bir site çok daha hızlı gösterilir . Kaçınılmaz dezavantaj, sunucu tarafında paketin açılmasının bir sonucu olarak First CPU Idle parametresinde bir artış içerir.

Gzip olmadan:

Gzip etkinken:

Js ve CSS'yi küçültün

Ya iletilen verilerin boyutunu daha da küçültmeye çalışırsak? Öncelikle Minify Js ve Minify CSS'yi etkinleştirelim. Ardından, bir karşılaştırma yapın.

Optimizasyonla ilgili tüm yapılandırmalar Mağazalar -> Yapılandırma -> Geliştirici'de bulunabilir:

Sekme yalnızca geliştirici modunda kullanılabilir. Üretim modundayken , aşağıdaki komutu kullanarak önce geliştirici moduna geçtiğinizden emin olun:

 > bin/magento deploy:mode:set developer

Ardından, Geliştirici bölümünü görebilir, gerekli yapılandırma değişikliklerini yapabilir, önbelleği temizleyebilir ve bir kez daha üretim moduna dönebilirsiniz:

 > bin/magento deploy:mode:set production

Bunun üzerine, statik içerik dağıtımı gerçekleşir.

min soneki js/css dosyalarına eklenir:

Veri hacmi gerçekten azaldı! Ana sayfa için 1.3 Mb yerine 1 Mb aktarıldı.

Bunun parametrelerimizi üçte bir oranında iyileştirdiğini düşünüyorsanız, yanılıyorsunuz. Durum düzeldi, ancak önemli ölçüde değil.

Tekrar tekrar çalıştırdık, ancak sonuçlar sabitti, yani bazı iyileştirmeler olmasına rağmen, iletilen veri hacmindeki azalmayla orantılı değildi.

J'leri Birleştir ve CSS'yi Birleştir

Şimdi, daha fazla iyileştirmenin veri hacimlerinden ziyade istek sayısındaki azalmayla ilgili olması gerektiğini varsaymak mantıklı olacaktır.

Bir deneyelim ve Merge Js ve Merge CSS konfigürasyonlarını etkinleştirelim.

Magento'nun bu özelliği modası geçmiş bir özellik olarak tanımladığını unutmayın:

Sayfanın HEAD bölümünde yalnızca eşzamanlı olarak yüklenen JS için tasarlandıklarından, JS ve CSS dosyalarını birleştirme gibi kullanımdan kaldırılmış ayarların kullanılmasını önermiyoruz. Bu tekniği kullanmak, paketlemeye neden olabilir ve JS mantığının yanlış çalışmasına neden olabilir.'

Yine de bir deneyelim:

İstek sayısındaki değişiklikler etkileyici değil, değil mi?

'İlk İçerikli Boyama' ve 'İlk Anlamlı Boyama' gibi parametreler iyileştirilmiş olsa da, kesinlikle iyileştirmeler için yer var.

JS Paketi

Js dosyalarının sabit bir boyuta göre paketlendiği JS Bundle teknolojisini deneyelim. Bu, genel bir veri hacmi değişmeden kalırken istek sayısını yönetmemizi sağlar.

Sonuçlar bunaltıcı. Mesele şu ki, yerleşik Magento mekanizması tüm siteler için js-paketleri toplar, yani pratikte tüm js'ler herhangi bir sayfada baştan sona toplanacaktır. Bu, sayfa hacminde keskin bir artışa yol açacaktır.

Evet, belirli js dosyalarını paketlerden hariç tutabilirsiniz (bazıları varsayılan olarak hariç tutulur). Ancak, bunu belirli bir sayfa için yapamazsınız.

Magento ayrıca Bundle JS'nin üretim modunda etkinleştirilmesini önermez. Kullanılabilir ikinci bir seçenek gibi görünüyor, ancak gerçekte - gerçekten değil.

Gelişmiş JS Paketi

Magento, Bundles JS ile ilgili zorlukları tanır, ancak bunları kendi başınıza ele almaktan kaçınmayı önerir. Resmi kılavuzda, geçerli bir sayfada yalnızca gerekli js dosyalarının nasıl gruplanabileceğine dair bir örnek bulacaksınız. Evet, bu yapılandırmada bir parametreyi değiştirmekten biraz daha zordur. Advanced Bundle için Nodejs, Require JS, Phantom JS kullanmanız gerekecek. Tabii ki, bu hazır bir çözüm değil. Ancak sunulan mekanizmayı test ettikten sonra, Advanced Bundle'ın teorik açıdan sayfa yükleme süresini nasıl hızlandırabileceği hakkında bir fikrimiz olacak.

Önerilen mekanizma, çerçevenin içinde değil, dışında manuel modda çalışır. Özel araçlar, sayfalara yüklenen js dosyalarını analiz eder ve bunları genel bir pakette veya sayfa TYPE paketine özel bir pakette toplar.

Sonuç olarak, toplanan paketler request js ile yazılır ve onun tarafından bir sayfaya yüklenir:

Her sayfa türünde (doğal olarak, bir paketin toplandığı), belirli bir paket yüklenir. Bu ana sayfa için bir örnek olacaktır:

İsteklerin sayısını azalttıktan sonra, ekstra veriler yüklenmiyor ve performansın önemli ölçüde artması gerekiyor gibi görünüyor… Ancak SEO için kritik olan First Contentful Paint ve First Anlamlı Boyama süresi de önemli ölçüde arttı. Bu mantıklı. Paket dosyası yüklenene kadar izleme yapılmayacaktır.

________________

Görünüşe göre elimizden gelenin en iyisini denedik mi, denemedik mi? Sanırım devam etmenin ve mevcut teknolojileri denemenin zamanı geldi.

HTTP/2

Magento'da Bundle JS'yi devre dışı bırakalım ve sunucuda HTTP/2'yi etkinleştirelim.
Bizim durumumuzda, sadece nginx. Yaptığımız şey birkaç satır değişti ― 443 bağlantı noktası için http2 desteği eklendi.

 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;

Chrome'da test etmek için, kendinden imzalı sertifikayı Güvenilir Kök Yetkilisine (bizim durumumuzda MacOS) eklememiz gerekecek.

HTTP/2 bağlantısı şöyle görünür:

Bu, istisnasız tüm parametreleri iyileştirdi! Her şey HTTP/2 teknolojisinin özelliklerine bağlıdır.

Sayfa yükleme süresini hızlandırmak için erişim gecikmelerinde azalma, özellikle:

• HTTP başlıklarında veri sıkıştırma,
• sunucu tarafında puch teknolojilerinin kullanımı,
• taşıma talepleri,
• hat başı HTTP 1.0/1.1 protokollerinin bloke edilmesinin çözünürlüğü,
• tek bir TCP bağlantısında çok sayıda isteğin çoğullanması.

HTTP/2 ile, her istek için TCP bağlantısı açılmadığından çok sayıda istek sorun olmaz.

HTTP/2, gerçek tarayıcıların çoğunda nginx ve apache'nin güncel sürümleri tarafından desteklenir: https://caniuse.com/#search=http2

Bu bağlamda, şu soruyu sorabilirsiniz: Advanced JS Bundle ve HTTP/2'yi birleştirirsek ne olur?

Teorik olarak, HTTP/2'nin büyük paket js dosyalarını yüklemede önemli avantajları olmadığından sayfa yükleme süresini hızlandırmaz. Ama kesin olarak bilmek için kontrol edelim.

Gördüğümüz gibi, Advanced Bundle JS'yi HTTP/2 bağlantısı içinde kullanmak hızı artırmaz.

Demetlere ince ayar yapma girişimi, zaman alan bir süreçtir. Paketlerin, her Magento veya bir 3. taraf uzantısı (ön uçta JS ekleyen) güncellemesinden sonra ve ayrıca kendi özel j'lerini bağlayan veya başka bir ürünün j'lerini kullanmayan yeni ürün türleri eklendikten sonra yeniden oluşturulmasını gerektirir. türleri. Temel olarak, dikkate alınması gereken daha fazla nüans var. Bence, HTTP/2 kullanma olasılığınız varsa, Bundle JS'ye geçmek önemli sonuçlar vermeyecektir.

Hız optimizasyonunun başka hangi yolları var? Sayfa yükleme süresini daha da hızlı hale getirmek mümkün mü?

_______________

JS kodunu sayfanın en altına taşıyın

Dürüst olmak gerekirse, 3. taraf satıcılardan bu optimizasyon araçlarını incelemeyi planladık, ancak bu makale oluşturma sürecindeyken Magento 2.3.2 yayınlandı. Bu özellik yeni sürüme eklendi (ve varsayılan olarak devre dışı bırakıldı).

Etkinleştirildiğinde, bazı js dosyaları <head> bölümünden </body> bölümünün sonuna aktarılır, bu da teoride sitenin görselleştirilmesinin başlangıcını hızlandırmalıdır.

Başlangıçta sahip olduğumuz şey buydu:

Etkinleştirdikten sonra sahip olduklarımız:

Bu tür testleri yapmak için Magento sürümümüzü 2.3'e güncellememiz gerekiyordu. Bağlı dosyaların miktarı ve boyutu değiştirildi. Bu nedenle, test sonuçları kaba olabilir. Magento sürümünün sonuçları nasıl etkilediğini anlamak için önce M2.3.1 ve M2.3.2 sürümlerini HTTP/2 + Minify JS/CSS kombinasyonuyla karşılaştırdık ― ve elde edilen sonuçlar pratikte eşitti, bu da ölçüm belirsizliğini aşmadı.  

Gördüğümüz gibi, İlk İçerikli Boyama ve İlk Anlamlı Boyama , tüm durumlarda %10-15 oranında iyileştirildi.

Magento hız optimizasyonunun gözden geçirilmiş tüm araçları içinde, aşağıdaki varyantlar önde görünüyor:

Gzip + JS/CSS'yi küçült + HTTP/2 + JS kodunu sayfanın en altına taşı

Bunu bir başlangıç ​​noktası olarak düşünelim ve daha ileri gidelim. Daha önce, yalnızca JS/CSS'ye değinen konfigürasyonlarla uğraşmıştık. Bu nedenle, geliştirilebilecek bazı yönler vardır.

Html'yi küçült

Kurulum burada bulunabilir:

Ana sayfanın HTML kısmı ― 89 Kb öncesi ve 88,7 sonrası HTML Minify / sunucuda sıkıştırma ile ― 12,2'ye karşı 12,1 Kb.

Kategori sayfasının HTML kısmı ― 155 Kb öncesi ve 100 sonrası HTML Minify / sunucuda sıkıştırma ile ― 15,2 Kb'ye karşı 16,8.

Ürün sayfasının HTML kısmı ― 80 Kb öncesi ve 67 sonrası HTML Minify / sunucuda sıkıştırma ile ― 15'e karşı 14,1 Kb.

Sunucu tarafında sıkıştırma kullanıldığı için 1-2 Kb fark kritik değildir ve denetim sakıncaları içindedir.

Bölüm 2. Ek Araçlar

Üçüncü taraf uzantıları: JS/CSS/HTML'yi Küçült/Birleştir | Paket JS

Bu arada, JS/CSS/HTML ve paket JS için 3. taraf çözümlere gitmenin pek bir anlamı yok. Ekstra sıkıştırma sonuçları elde etseniz bile, ön uçta yüzde birlik bir payla sınırlı olacaklar. Karşılığında, sistemde bir veya birkaç Magento uzantısı alacaksınız. Algoritmalarının varlığı ve işleyişi, ek kaynaklar gerektirdiği gibi, genel olarak sistem arızası riskini de artırır. Potansiyel yararın ilgili risklerden daha ağır bastığından emin değilseniz, kullanımlarından vazgeçmeniz önerilir .

Sıkıştırma ve paketleme yoluyla yükleme hızını önemli ölçüde artıran herhangi bir üçüncü taraf çözümü biliyorsanız, bunu yorumlarda paylaşmanızı veya doğrudan [email protected] adresinden bizi bilgilendirmenizi öneririz. bunu araştırmaktan memnuniyet duyarız  

Şimdi, varsayılan olarak Magento'da bulunmayan araçları kullanarak iyileştirmeler yapmaya çalışalım.

Resim boyutunu küçült

Web'de görüntülerin kullanımı her zaman kalite ve görüntü dosyası boyutu arasında bir uzlaşmadır.

Ana endişemiz, kalite kaybı olmadan görüntü boyutunun küçültülmesidir. Eh, varsayılan Magento işlevselliğini kullanarak, görüntü boyutunu gerçekten küçültmek mümkündür. Ancak görüntülerin kalitesi önemli ölçüde zarar görecektir.

Magento'nun konfigürasyonlara göre dönüştürdüğü ve yeniden boyutlandırdığı standart görüntülerin boyutunu küçültelim, yani, biz daha çok magento_root_directory/pub/media/catalog/product/cache içinde bulunan görüntülerle ilgileniyoruz.

Magento konfigürasyonları burada bulunabilir:

Başlangıç ​​olarak elle yapmayı deneyelim ve jpegoptim yardımcı programını kullanalım. Magento'yu hızlandırmayı amaçlayan çoklu modüller (ücretli olanlar dahil) bu yardımcı program tarafından desteklenmektedir.

Görüntü kalitesini düşürmediğimiz sürece önbellekten görüntüler için sonuç yok:

Bunda yanlış bir şeyler var gibi görünüyor. Test amacıyla, aslında sayfada gösterilmeyen orijinal resme uyguladık. Önemsiz olsa da belirli sonuçlara ulaşmayı başardık:

Otomatik çözümlere gitmeye ne dersiniz?

Aşağıdaki ücretsiz görüntü iyileştiriciyi deneyelim: https://github.com/justbetter/magento2-image-optimizer.

Uzantı tarafından kullanılan tüm sunulan yardımcı programları yükledik:

• JpegOptim
• Optimizasyon
• png nicem 2
• SVGO
• Gifsicle

JPEG için görüntü sıkıştırma ayarları 80'e ayarlanmıştır. Bu, varsayılan Magento ayarlarına karşılık gelir. Ardından, tüm medya dizini için optimizasyon çalıştırdık.

Sıkıştırmadan önceki tam medya dizini boyutu 353 Mb, sonrasında ― 340,1 Mb

medya/katalog/ürün/önbellek dizin boyutu 194,7 Mb'dir ve sıkıştırmadan sonra değişmemiştir.

Özellikle görselleri sitenize yüklemeden önce hazırlamazsanız, çözümleri kullanışlı ve kullanışlı bulduk.

Ancak, ürün ve kategori sayfalarındaki genel görsel boyutunun küçültülmesi söz konusu olduğunda, önemli bir gelişme sağlanamadı.

Muhtemelen, sizin durumunuzda diğer görüntü formatları kullanılmaktadır. Bu nedenle, sonuçlar daha da önemli olabilir.

Apple tarayıcıları bu biçimi desteklemediğinden, webp görüntü biçimini kasıtlı olarak gözden geçirmiyoruz: https://caniuse.com/#feat=webp.

______

Pekala, resim dosya boyutunu önemli ölçüde küçültemezsek, sadece görünen alan için yüklemeyi deneyelim.

Tembel Yükleme Görüntüsü

Karşılaştığımız ilk ÜCRETSİZ 3. taraf çözümünü deneyelim - Magento 2 Lazy Loading.

Daha önce olduğu gibi ürün, kategori ve ana sayfalarda denetim gerçekleştirdik.

Önemli bir değişiklik elde edilmemiştir. Varyasyonlar ölçüm belirsizliği içindedir.

Bunun nedeni büyük olasılıkla örnek veri sayfalarının oldukça hafif olması ve tüm birincil görüntülerin görünür alanda bulunmasıdır.

Ürün açıklaması resim içermiyor. Kategorinin hiç bir açıklaması yok.
Bunu en kolay yoldan yapalım ve çağrı cihazında kategori sayfasındaki ürün sayısını (yükleme resimlerinin sayısı dahil) ilk önce 9'dan 30'a, ardından 48'e kadar artıralım ve sonuçları listeleyelim.

Sonuçlar ortada. Web sitesi ilk yüklemede görünmez alanındaki resimleriniz (miktar ve boyut olarak) ne kadar büyükse, avantajları da o kadar önemli olur. Bu özellik, belirli kullanılabilirlik dezavantajları olmasına rağmen, optimizasyon açısından kesinlikle faydalı bir özelliktir.

_________________

Son Sözler Yerine

Hem standart Magento özelliklerini hem de sayfa yükleme performansını optimize etmeye izin veren bazı 3. taraf çözümlerini gözden geçirdik.

Araştırmaya rağmen, tüm web siteleri benzersiz olduğundan ve benzersiz özelliklere sahip olduğundan kesin sonuçlar çıkarmakta zorlanıyoruz. Bu nedenle, bir site için işe yarayan çözümlerin diğer siteler üzerinde herhangi bir etkisi olmayacağına dair her zaman bir miktar olasılık vardır.

Ancak, anlamlı bir etkiye sahip olan en kullanışlı özellikler, varsayılan Magento'nun Gzip + Minify JS/CSS + HTTP/2 + Image Lazy Loading'dir .

Paket JS hakkında

Bu nedenle, bu paketin 3. taraf uzantı geliştiricilerinin gelişmiş sürümleri, ek kişiselleştirilmiş site ince ayarı olmadan yükleme hızını önemli ölçüde artırmaya pek izin vermez.

Yükleme süresini artırmaya yardımcı olabilecek denemek için kesinlikle daha fazla yol var. Bununla birlikte, çoğu tek bedene uyan çözümler değildir. Örneğin, dünyanın farklı ülkelerinden gelen site ziyaretçilerinin korelasyonu ve fiziksel sunucu/sunucu konumu da önemlidir. Siteyi, site kullanıcılarının çoğu için veri aktarımının daha hızlı olacağı/statik dosyalar için CDN kullanan bir sunucuya aktarmak mantıklıdır. Site ziyaretçileri öncelikle bir bölgedense, Varnish kullanarak statik dosyaları önbelleğe almayı deneyebilirsiniz: https://devdocs.magento.com/guides/v2.3/config-guide/varnish/config-varnish-magento.html# önbellek-statik-dosyalar.

Sonuç olarak, durumu esasen değiştiren ve sitenizi mobil cihazlarda maksimum düzeyde hızlı hale getiren bir yol, AMP teknolojisini kullanmaktır.

PS AMP

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

El cihazları için, Google SERP'den bir kullanıcı sitenize değil, Google sunucularında depolanan önbelleğe alınmış sürümüne ulaşır. İlk yük yıldırım kadar hızlı olacaktır. Bu tür web siteleri, SERP'de doğal olarak bir yıldırım ile belirtilir.

Bu teknoloji basit değildir ve yalnızca kendi amp js kitaplıklarını kullanmayı varsayar. Ek olarak, mevcut temanızla hiçbir şekilde bağlantılı olmayan ayrı bir sayfa sürümüne sahip olma şansınız olur.

Bu yapmak için zor bir seçim olabilir. Bir yandan, her şey geliştirilmiş yükleme hızı ve dönüşümlerle ilgilidir. Diğer yandan, AMP teknolojisinin getirdiği sınırlamalardır, yani js ve HTML'yi yalnızca AMP kitaplıklarından kullanabilirsiniz. Sonuç olarak, işlevsellik sınırlı hale gelir.