Magento 2 Mobil Hızını Artırmanın 5 Yolu

Bu, Konstantin Gerasimov'un konuk blog yazısıdır. Konstantin, Goivvy.com'a sahip bir Magento Sertifikalı Geliştiricidir. Performans optimizasyonu ve arka uç geliştirme konusunda uzmanlaşmıştır.

Magento 2 (M2), karmaşık ve zengin özelliklere sahip bir e-ticaret platformudur. Her türlü çevrimiçi satış deneyimini uygulamak için kullanabilirsiniz.

Madalyonun diğer yüzü, esneklikle birlikte bir problemin ortaya çıkmasıdır – düşük performans. Magento-2 destekli bir mağaza, özellikle ağ kapasitesinin büyük dosyaları indirmeyi zorlaştırdığı mobil cihazlarda yavaş olabilir.

M2 ile yaptığım çalışma sırasında, mobil hızımı artırmama yardımcı olan birkaç püf noktası edindim. Onları sizinle paylaşacağım. Hepsi sahada kanıtlanmıştır, bu nedenle çalıştıklarından emin olabilirsiniz.

Mobil Kullanıcılar için Magento 2'yi Hızlandırmak İçin 5 İpucu

1. Önce ekranın üst kısmındaki içeriği yükleyin.
2. Sayfa boyutunu mümkün olduğunca küçük yapın.
3. HTTP/2'yi kullanın.
4. JS donatılacak kullanmayın.
5. İlk bayta kadar olan zamanı optimize edin.

1. Önce Ekranın Üstü İçeriğini Yükleyin

Ekranın üst kısmındaki içerik (veya görünen içerik), aşağı kaydırmadan önce gördüğünüz bir web sayfasının parçasıdır. Kullanıcılar önce onu görür, bu nedenle hızlı bir şekilde yüklemek ve oluşturmak önemlidir.

Bunu nasıl yaparız? Birkaç teknik var:

1.1. JavaScript ayrıştırmasını ertele

Bu aslında JS kodunu yüklemeyi ve yürütmeyi ertelediğiniz anlamına gelir. Bu, içeriğin ekranda daha hızlı görünmesini sağlamak için yapılır.

Ertelemek için tüm Javascript'i bir sayfanın altına taşımanız yeterlidir. Bunu yapmanıza yardımcı olacak belirli Magento 2 uzantıları vardır.

1.2. Önce kritik CSS'yi yükleyin

Kritik CSS, ekranın üst kısmındaki içeriği oluşturmak için kullanılan bir dizi stil sayfasıdır. Genellikle, sitenin CSS'sinin yalnızca küçük bir kısmıdır. Önce izole edip yüklemek daha iyi olur. Bu, görünür içeriğin daha hızlı oluşturulmasını sağlar.

Kritik CSS'yi otomatik olarak çıkarması gereken çevrimiçi araçlar var. Çoğunu denedim ve deneyimlerime dayanarak doğru görünmüyorlar.

Farklı sayfalar için manuel olarak kritik bir CSS seti oluşturmanızı öneririm: ana sayfa, kategori, ürün, alışveriş sepeti, ödeme sayfaları . Daha sonra doğrudan sayfanın baş bölümüne satır içine alabilirsiniz.

2. Sayfa boyutunu mümkün olduğunca küçük yapın

Mobil ağlar, masaüstü geniş bant bağlantılarına kıyasla daha düşük indirme hızı sağlar.

Bu bizim için ne anlama geliyor? Bu, sayfa ağırlığının artık daha önemli bir performans faktörü olduğu anlamına gelir. Sayfa boyutu ne kadar büyük olursa, Magento 2 mobil hızı o kadar yavaş olur.

Bir sayfayı nasıl daha hafif hale getiririz? Bunun için size üç yol vereceğim:

2.1. Gzip Sıkıştırmayı Kullan

Gzip , bir sayfa boyutunu %70'e kadar küçültmenizi sağlayan özel bir teknolojidir! Ayrıca CSS, Javascript, yazı tipi komut dosyaları vb. gibi harici komut dosyalarını da sıkıştırabilir.

Barındırma destek ekibinize başvurun ve onlardan web siteniz için Gzip'i etkinleştirmelerini isteyin. Sadece küçük bir konfigürasyon değişikliği olduğu için uzun sürmemelidir.

Mağazanız için Gzip'in açık olup olmadığını kontrol etmek için Google PageSpeed ​​Insights çevrimiçi aracını kullanabilirsiniz.

2.2. CSS/JS küçültmeyi kullan

Magento 2 (Magento 1'den farklı olarak) JS/CSS küçültme özelliği ile birlikte gelir. Sayfa ağırlığını azaltmak için bundan yararlanmalısınız.

Arka uç menüsüne gidin Mağazalar > Yapılandırma > Gelişmiş > Geliştirici (M2.2+ sürümünde bu menü yalnızca geliştirici modunda görünür) ve küçültmeyi etkinleştirin:

Hatırlanması gereken bir şey var – küçültme yalnızca üretim modunda çalışır.

Bu modlar nelerdir diye sorabilirsiniz.

Magento 2'nin üç çalışma modu vardır: varsayılan, geliştirici ve üretim . Üretim en hızlı olanıdır.

Modlar arasında geçiş yapmak için Magento kök klasörü içindeki SSH terminalinde aşağıdaki komutu çalıştırmalısınız (örneğin, üretim modunu ayarlayalım):

 php bin/magento dağıtımı: mod: üretimi ayarla

Mevcut modu öğrenmek için:

 php bin/magento konuşlandırma:mod:göster

2.3. Görüntüleri Optimize Edin

Bir e-Ticaret web sitesi işletiyorsanız, kesinlikle çok sayıda ürün resminiz vardır. Mümkün olan en düşük sayfa ağırlığına sahip olmaları için optimize edilmiş ve sıkıştırılmış halde tutmak önemlidir.

Resimlerinizi sıkıştırmanıza yardımcı olabilecek çeşitli çevrimiçi araçlar vardır. Çoğu CDN (içerik dağıtım ağı) görüntü optimizasyonunu destekler. Biraz $$$ harcamaktan çekinmiyorsanız, bunlardan birine kaydolmanızı tavsiye ederim.

Bütçeniz kısıtlıysa Google'ın pagespeed sunucu modülünü deneyin. Anında görüntüleri sıkıştırır. Ayrıca diğer hız optimizasyon püf noktalarını da yapar. Sayfa hızı uzantısını ayarlamada size yardımcı olmak için sistem yöneticinizden veya barındırma destek ekibinizden isteyebilirsiniz.

3. HTTP/2'nin Gücünden Yararlanın

HTTP ver.2, yeni nesil köprü metni protokolüdür. Web'de gezinmeyi güvenli ve daha hızlı hale getirmek içindir. Performans avantajları hakkında daha fazla bilgiyi buradan okuyabilirsiniz.

Magento 2, kutudan çıktığı haliyle HTTP/2 ile çalışabilir. Sadece iki gereklilik var:

1. Tüm sayfalar SSL üzerinden sunulmalıdır.
2. Sunucu HTTP/2'yi desteklemelidir.

Kurulumda yardım için barındırma destek ekibinize başvurmak isteyebilirsiniz.

Başka bir şey - sunucu iter . HTTP/2'nin, tarayıcı indirme kaynaklarını ihtiyaç duymadan önce yapmanızı sağlayan özel bir özelliğidir. Web'de gezinmeyi büyük ölçüde hızlandırır. M2'ye server push özelliğini getiren bazı uzantılar var - size en uygun olanı bulmak için google'a gitmeniz yeterli.

4. JS Bundling'i Kullanmayın

Magento 2, JavaScript dosyalarını paketleyebilir.

Bu, bir tarayıcının bir sayfayı görüntülemek için yapması gereken HTTP isteklerinin sayısını azaltmak için JS kaynaklarını birlikte gruplayabileceği anlamına gelir. Yapılandırma sayfasını Stores > Configuration > Advanced > Developer arka uç menüsünde bulabilirsiniz:

HTTP/2 kullanmanız elbette bir anlam ifade etmez. Bu durumda http isteklerinin sayısı performansı etkilemez. Ancak hala http/1 kullanıyor olsanız bile JS paketlemeyi etkinleştirmemelisiniz ve nedenini açıklayacağım.

Magento 2 paketleme uygulaması, tüm JavaScript'i tek bir dosyada oluşturur. Bazı kısımlarını kullanmasanız bile hala oradadır. Bu, sizi yavaş mobil ağlarda bir performans domuzu olan 5Mb-13Mb dosyasıyla bırakır.

İşte ayrıntılı olarak açıklayan bir hata raporu. Bu bir hata ama M2.2.2 etrafta ve hala düzeltilmedi. Bu yüzden JS paketlemeyi devre dışı bıraksanız iyi olur.

5. İlk Bayt Süresini Optimize Edin (TTFB)

TTFB veya sunucu yanıt süresi, bir tarayıcının bir sitenin sunucusundan yanıt almadan önce ne kadar beklemesi gerektiğidir. İlk bayt için iyi zaman yaklaşık 500 ms olmalıdır.

Magento 2'de yerleşik bir tam sayfa önbellek işlevi vardır, bu nedenle bir sayfa 1 defadan fazla ziyaret edildiği sürece sunucu yanıt süresi iyi olmalıdır. Ancak, tam sayfa önbelleğe alınamayan ödeme, alışveriş sepeti ve müşteri alanı sayfaları gibi sayfalar vardır. Yavaşlarsa, bazı TTFB optimizasyonu yapmayı düşünmelisiniz.

Sunucu yanıt süresini optimize etmenin üç yolunu göstereceğim:

5.1. 3. Taraf Modül Denetimi

Magento 2'nin düşük performansının bir numaralı nedeni, kullanılan aşırı sayıda özel uzantıdır . nedenini açıklayacağım.

M2 çekirdek dosyaları programlama uzmanları tarafından kodlanır. Orada iyileştirme için neredeyse hiç yer yok ve bu yüzden Luma temalı yeni bir M2 kurulumu oldukça hızlı. Öte yandan, bazı 3. taraf modüller, en fazla ortalama programcılar tarafından, performans kıyaslamalarını takdir etmeden yazılır. Mağazayı önemli ölçüde yavaşlatabilirler.

Bir 3. taraf modül denetimi gerçekleştirmek için önce yüklenen tüm özel uzantıların bir listesini alın. Bu SSH komutunu çalıştırarak bunu yapabilirsiniz:

 php bin/magento modülleri:statu

Magento_ ile başlayanları atlayın – bunlar temel eklentilerdir.

Diğerleriyle şunları yapın: bunları birer birer kaldırın ve sitelerin hızını karşılaştırın. Bir uzantıyı kaldırmak için uygulama/kod klasöründen silin ve ardından şunu çalıştırın:

 php bin/magento kurulumu:yükseltmeYavaş bir eklenti bulduğunuzda – satıcısına başvurun ve sorunu bildirin. Bir yama isteyin veya alternatif bir uzantı bulun.
 5.2 Barındırma Planını Yükselt
 Bazı durumlarda barındırma sunucusu gücü, karmaşık bir Magento 2 mağazasını çalıştırmak için yeterli değildir. O zaman daha fazla CPU ve RAM almanız gerekir.
 Sunucunuzun iyi olup olmadığını nasıl anlarsınız? Bu basit testi gerçekleştirin: aynı sunucuya M2'nin aynı sürümün yeni bir kopyasını yükleyin. Hızını canlı sitenizle karşılaştırın. Yeni M2 önemli ölçüde daha hızlıysa, barındırma planınız tamamdır ve sorun canlı sitenin kendisindedir. Yeni kopya, canlı site kadar yavaş çalışıyorsa, bir barındırma sunucusunu yükseltmenin zamanı gelmiştir.
 5.3 Magento 2 Profiler'ı Çalıştırın
 Magento 2'nin iç kısımlarına daha derine dalmak ve zayıf TTFB'nin temel nedenini bulmak istiyorsanız, bir profil oluşturucu kullanabilirsiniz. Profil oluşturucu, hangi kod bloklarının ne zaman yürütüleceğini size söyleyen özel bir programdır.
 Magento 2 yerel profil oluşturucu, pub/index.php dosyasının en üstüne aşağıdaki satırı ekleyerek kapatılabilir:
 $_SERVER['MAGE_PROFILER'] = '1';
 Daha sonra her sayfanın altında bir iz göreceksiniz: 
 En büyük zaman değerlerine sahip kod bloklarını arayın ve inceleyin.
 Kullanabileceğiniz başka profiller de var. Ücretsiz olanlar arasında en iyisi olarak xhprof buluyorum.
 Sonuç olarak
 Gördüğünüz gibi, mobil cihazlarda Magento 2 performansını iyileştirmenin bazı etkili yolları var.
 Bunu yapmanın bazı ekstra yollarını biliyorsanız, aşağıdaki yorumlar bölümünde paylaşmaktan çekinmeyin.