Magento 2 Hız Optimizasyonu: Kolay + Gelişmiş Yollar

Tatbikatı biliyorsunuz, sayfa hızı bir mağazanın başarısını büyük ölçüde etkiler, çünkü düşük performansa sahip mağazaların daha düşük dönüşüm oranlarına sahip olmaları ve bunun sonucunda rakiplerine kaybetmeleri gerekir. Ve müşterilerimiz için düzenli olarak hız optimizasyonu yaptığımızdan, Magento 2'de hız optimizasyonu konusunda size güncel teknikleri sağlamanın bizim yetkimizde olduğunu düşünüyoruz.

Hız optimizasyonu ve bunu doğru yapmanın neden zor olduğu

Açıkçası, Magento 2 web sitelerinde hız optimizasyonu sadece uzantıları kurmak ve etkinleştirmek olsaydı, performans optimizasyonu ile uğraşıyor olmazdınız. Bundan çok daha karmaşık.

Çok sayıda değişken

Sayfa hızı ölçümünde yer alan çeşitli değişkenleri hesaba katmanız gerekir. Sayfa hızınız ideal durumda gerçekten harika olabilir - yani, kullanıcının cihazı ona attığınız her şeyi işleme yeteneğine sahipse. Veya sayfanızın hızı o kadar da kötü olmayabilir, ancak kötü kümülatif düzen kayması nedeniyle kullanıcı için algılanan performans korkunç olabilir.

Mağazanızın performansını optimize ederken dikkate alınması gereken birçok değişken vardır, bu nedenle her zaman önce belirli sorunları belirlemelisiniz.

Öncelik

Ve ödevinizi yapmış ve mağazanızın şu anda sahip olduğu tüm sorunları tespit etmiş olsanız bile, hepsini düzeltmeye çalışmak yine de iyi bir fikir olmaz. Deneyimlerimize göre, mikro optimizasyonların gerçek dünya performansını iyileştirmek için neredeyse hiçbir şey yapmadığı ve yalnızca mağazanızın istediğiniz türde bir alışveriş deneyimi yaşamasını engelleyen başlıca engeller olduğunu düşündüğünüz sorunları optimize etmeye çalışmanız gerektiğidir.

Pazarlıksız

Gerçekten içine girdiğinizde, hız optimizasyonu, işlevsellik ve performans arasında sürekli bir değiş tokuştur; daha iyi performans elde etmek için her zaman bir şeylerden fedakarlık etmeniz gerekir. Bazen çekici bir Magento teması, bazen de mağazanız için performans açısından zararlı olan kullanışlı bir eklentidir.

Genel optimizasyon teknikleri

Bu genel optimizasyon teknikleri ağrısızdır ve uygulamak için fazla teknik bilgi gerektirmez.

1. Mevcut barındırma ve Magento sürümünüzü kontrol edin

Barındırma, web sitesi hızında çok önemli bir rol oynar, çünkü bir barındırma planı ne kadar iyi olursa, artan trafiğe veya büyük kataloglara rağmen mağazanız o kadar hızlı kalabilir.

Bir Magento sitesinin sağlam ve karmaşık yapısını kolaylaştırmak için iyi bir barındırmaya sahip olması daha da önemlidir. Magento barındırma çalışması için en az 2 GB RAM gerektirse de, uygun barındırma planı web sitesi ölçeğine bağlıdır.

Bu nedenle, mevcut Magento web siteniz yavaşsa ve alt uç barındırma ile çalışıyorsanız, önemli bir hız artışı için yükseltme zamanı.

>> Daha fazlasını görün: En iyi 12 Magento barındırma sağlayıcısı

2. Bir CDN hizmeti kullanın

(Fotoğraf/WPbeginner.com)

Lojistik tedarik zincirinde, alıcının bulunduğu yere yakın bir depo varsa, ürünler daha hızlı sevk edilir. Benzer şekilde, CDN (içerik dağıtım ağı), içeriği kullanıcılarının coğrafi konumunun yakınındaki bir uç sunucuda önbelleğe alarak içeriğin daha hızlı sunulmasına yardımcı olur.

CDN, uluslararası ziyaretçileri olan büyük mağazaların yanı sıra hem masaüstü hem de mobil cihazlarda çok dinamik içeriğe sahip web siteleri için en iyisidir. Bu nedenlerden dolayı, birçok Magento sitesi ile tam bir uyum içindedir.

Birçok barındırma sağlayıcısı CDN hizmetleri sunarken, Fastly veya Stackpath gibi kendi CDN sağlayıcılarınızı da seçebilirsiniz. Hizmeti ayarladıktan sonra, herhangi bir değişiklik görmeden önce Magento arka ucunuzdaki CDN'yi yapılandırmanız gerekir.

3. Tembel yükleme görüntüleri

Popüler web siteleri tarafından talep edilen tüm kaynak türleri arasında, istek sayısı ortalama olarak sayfa tarafından yapılan toplam isteklerin (masaüstü) %35,6'sını oluşturan en sık talep edilen kaynak türüdür. Sayfa ağırlığı açısından, görüntü kaynakları medyan sayfa ağırlığının ortalama olarak %46.6'sını kaplar ve bu da onu, doğru yaptığınızda etkileyici sonuçlar veren hız optimizasyonunda düşük asılı meyve haline getirir.

Gecikmeli yükleme, tüm görüntüleri bir kerede yükleme ihtiyacını ortadan kaldırdığı için mağazanızın performansını artırmanın etkili bir yoludur. Gecikmeli yükleme ile, görüntüler daha sonraki bir zamanda kullanıcının ihtiyaç duyduğu bir zamanda yüklenir ve bu da, kullanıcı deneyimine zarar vermeden bir sayfanın yüklenmesi için gereken süreyi etkili bir şekilde azaltır.

Magento 2'de, Magento web sitenize Lazy Loading for Magento 2 gibi uzantılarla tembel yükleme görüntüleri uygulayabilirsiniz. Bunun gibi Magento pazarında ücretsiz olarak sunulan birkaç uzantı daha vardır.

4. WebP'yi kullanın

Genellikle görüntü formatlarının İsviçre Çakısı ile karşılaştırılan WebP, hızla popülerlik kazanan ve PNG, JPEG ve GIF'in yerini alması beklenen yeni ve esnek bir görüntü formatıdır. PNG ve JPG görüntüleri ile karşılaştırıldığında, WebP görüntüleri genellikle görüntü kalitesinde sıfıra yakın kayıpla %25 – 35 daha küçüktür.

Bu hala nispeten yeni bir görüntü formatı olduğundan, WebP Magento 2'de varsayılan olarak desteklenmez ve WebP'ye otomatik görüntü dönüştürmeyi etkinleştirmek için Magento 2 WebP Görüntü Uzantısı gibi 3. taraf uzantıları yüklemeniz gerekir.

5. Hafif temalar kullanın

Yalnızca gösterimlerden, yoğun bir temanın mağazanızı ne zaman önemli ölçüde yavaşlattığını ve yavaş internet bağlantısına ve/veya güncel olmayan donanım özelliklerine sahip kullanıcıların bundan yalnızca daha fazla etkileneceğini anlayabilirsiniz.

Bunu aşmak için, Magento temalarınızı performansa daha fazla odaklanarak seçici olarak seçmeniz gerekir. Ancak, bir temanın gerçekten hafif olup olmadığını doğru bir şekilde belirlemenin zor olduğunu anlıyoruz, bu nedenle genellikle temanın demo sürümünün size hızlı gelip gelmediğini kontrol etmeniz, daha fazla kullanıcı incelemesi okumanız ve bundan emin olmak istiyorsanız, temayı tamamen test etmek için PageSpeed ​​Insights'ı kullanın.

6. Düz katalogları devre dışı bırakın

Eskiden, SQL sorguları yapmak için gereken süreyi azaltmak istiyorsanız, Flat kataloğunu etkinleştirmenin yolu buydu. Ancak, Magento 2.1 ve üzeri sürümlerde, bu artık en iyi uygulama değildir ve bu özelliğin performans düşüşüne ve diğer indeksleme sorunlarına neden olduğu bilindiği için Düz katalog kullanımını içeren herhangi bir uzantıyı kullanmaktan kaçınmalısınız.

Düz katalogları devre dışı bırakmak için Mağazalar > Ayarlar > Yapılandırma > Katalog'da Düz Katalog Kategorisini Kullan/Düz Katalog Ürününü Kullan'ı Hayır olarak ayarladığınızdan emin olun.

7. Gereksiz üçüncü taraf uzantılarını azaltın

Her zaman olduğu gibi, üçüncü taraf uzantılarını yığınlamak her zaman iyi bir fikir değildir ve üçüncü taraf uzantılar, güvenilmeyen kaynaklardan indirilirse/satın alınırsa daha da fazla soruna neden olabilir. Olası sorunları ortadan kaldırmak için en iyi uygulamalar, uzantı sayınızı önemli bir miktarda tutmak, bunları düzenli olarak güncellemek ve yalnızca güvenilir kaynaklardan üçüncü taraf uzantıları indirmek/satın almaktır.

8. Javascript Bundling'i kapatın

Javascript Bundling, Javascript dosyalarınızın çoğunu bir paket halinde gruplandırır. Sonuç olarak, sunucunun daha az Javascript dosyası istemesi gerekir, bu nedenle bunu yapmak daha az zaman alır. Bu, teoride, performansa yardımcı olmalıdır.

Ancak gerçekte, Magento'da yerleşik olan temel JS Bundling aracı bu beklentiyi tam olarak karşılamıyor, ancak genellikle daha düşük yükleme hızına neden oluyor. Bir Magento yığın değişim üyesi tarafından yapılan bir teste göre, web sayfası ortalama yükleme süresi JS Bundling'i etkinleştirdikten sonra 5 saniyeden 15 saniyeye çıkıyor.

JS Bundling varsayılan olarak kapalıdır. Ancak, daha önce etkinleştirilip etkinleştirilmediğini kontrol edebilir ve şuraya giderek tekrar devre dışı bırakabilirsiniz.

>> Yapılandırma >> Gelişmiş >> Geliştirici >> JavaScript Ayarları'nı saklayın ve JavaScript Paketlemeyi Etkinleştir'i Hayır olarak ayarlayın.

9. Magento Veri Günlüğünü Optimize Edin

Magento web sitenizin günlük dosyaları, veritabanında yapılan tüm değişiklikleri listeler. Zamanla, sitenizin performansını yavaşlatan birkaç GB'a kadar birikebilirler.

Artık sitenizin mevcut etkinliğiyle alakalı olmayan eski büyük günlükleri kaldırmak, iyi bir hız performansını korumak için gerekli bir adımdır.

Ayrıca, Magento otomatik olarak ve sık sık yeni günlük dosyaları oluşturur, bu nedenle eskileri kaldırmak size herhangi bir soruna neden olmaz.

Teknik olmayan satıcılar için Mağaza >> Yapılandırma >> Gelişmiş >> MySQL İleti Kuyruğu Temizleme bölümüne gidebilirsiniz.

Temizleme, belirli bir süre sonra eski günlük dosyalarını otomatik olarak kaldırır.

Magento, yukarıdaki bu nitelikler için varsayılan değerler belirlemiştir, ancak bunları uygun gördüğünüz şekilde değiştirebilirsiniz.

Biraz daha ileri gitmek

10. Varnish tam sayfa önbelleğe almayı kullanın

Varnish Cache, mimarinize bağlı olarak 300 – 1000x kat oranında içerik teslimini hızlandırabilen açık kaynaklı bir web uygulaması hızlandırıcısıdır. Bu nedenle Magento, yerleşik tam sayfa önbelleğe alma işleminden çok daha iyi bir seçenek olduğu için Varnish'i şiddetle tavsiye eder. Ayrıca Varnish, HTTP trafiğini hızlandırmak için tasarlandığından, tekrarlanan isteklerde sunucu yanıt süresini ve ağ bant genişliği tüketimini önemli ölçüde azaltabilirsiniz.

Varnish'i yapılandırmak ve kullanmak için Magento 2 web sitenizi uçurmak için ayrıntılı adım adım kılavuzu izleyin.

Varnish ile güçlendirilmiş Fastly, bir maliyet karşılığında daha fazlasını elde etmenize yardımcı olur

Özellikle Magento Commerce Cloud için, Hazırlama ve Üretim ortamlarında kullanım için Fastly gereklidir . Varnish'i tek başına kullanmaya kıyasla, Varnish tarafından desteklenen hızlı önbelleğe alma özelliklerine ek olarak, Magento 2 web siteniz ve Bulut altyapınız için bir CDN ve güvenlik geliştirmeleri sağladığından, daha fazla özellik içeren bir yaklaşımdır.

Magento Açık Kaynak'taki satıcılar Fastly'yi kullanabilirler, ancak yine de, Varnish'in aksine Fastly'nin ücretsiz bir çözüm olmadığını ve bant genişliğine ve bölgeye göre kullanım isteğine dayalı ücretlere sahip olduğunu unutmamalısınız.

Fastly'yi kurmak için Magento DevDocs'taki resmi kılavuza bakın.

11. Memcached/Redis'i Yapılandırın

Önbelleğe alma, hızı optimize etmek ve yükleme süresini önemli ölçüde azaltmak için etkili bir çözüm olarak bilinir.

Varnish, ön uç için bir önbelleğe alma çözümü olsa da, Memcached ve Redis, dinamik veritabanlarına sahip büyük ölçekli web uygulamaları için şiddetle tavsiye edilen arka uç önbelleğe alma konusunda yardımcı olur.

Redis, Memcached'den daha güçlü ve daha esnektir ve Memcached'in yapabildiği her şeyi yapabilir. Bu nedenle, geliştiriciler arasında daha popüler bir seçimdir. Ancak Memcached'in kurulumu ve kullanımı daha basittir ve belirli durumlarda Redis'ten daha avantajlı olabilir.

Memcached, Redis veya her ikisini de yapılandırmaya çalışmadan önce web sitenizin ortamı için hangisinin en iyi sonucu verdiğini bulmak için daha derine inmeniz önerilir.

12. HTTP/2'ye geçin

Şubat 2015'te piyasaya sürülen HTTP/2, mevcut HTTP protokolünde yapılan yeni bir iyileştirmedir. Şu anda tüm web sitelerinin %49,9'u tarafından kullanılmaktadır ve özellikle testler HTTP/2'nin sayfa yükünde ve diğer avantajlarda %14'e varan iyileştirme sağladığını gösterdiğinden, bundan sonra yalnızca daha fazla benimseme görecektir.

Örneğin, aşağıdaki video gösteriminde, HTTP/2'nin sınıra zorlandığında nasıl daha fazla performans sağladığını görebilirsiniz:

Bu videoda, her bir görüntüyü 379 küçük kutucuğa ayırdık, bu nedenle sunucuya 379 ayrı bağlantı yapılması gerekiyor. Bu pek olası olmayan bir senaryodur, ancak bize HTTP/2 çoğullamanın nasıl çalıştığı ve HTTP/1 ile karşılaştırıldığında nasıl çok daha hızlı performans getirebileceği hakkında fikir verir.

Magento web siteniz için HTTP/2'yi etkinleştirmek için, onu CDN'niz (örn. Fastly) veya web sunucularınız (Apache) aracılığıyla yapılandırmanız gerekir. Örneğin, Apache & Nginx'te bunu nasıl yapacağınız aşağıda açıklanmıştır.

13. Küçültme

Minification, adından da anlaşılacağı gibi, sayfanızın kodunu küçültme yöntemidir. Küçültme sürecinde HTML, JavaScript veya CSS dosyalarınızdaki tüm gereksiz kısımlar kaldırılarak sayfanızın kaynaklarının mümkün olduğunca yalın tutulması sağlanır. Minification, günümüzde standart bir uygulamadır ve her web sitesi, temelde ücretsiz bir performans artışı olduğu için bunu altyapısında uygulamalıdır.

Magento web siteniz için küçültmeyi etkinleştirmek için, Minify HTML CSS JS gibi hazır uzantılara güvenebilir veya doğrudan Magento arka ucu aracılığıyla CSS ve JavaScript küçültmeyi etkinleştirebilirsiniz. İkinci yöntemle yapmanız gerekenler:

• Magento 2 mağazanızı üretim moduna ayarlayın
• Ardından Mağazalar > Yapılandırma > Gelişmiş > Geliştirici'ye gidin
• HTML'yi Küçült/CSS Dosyalarını Küçült/JavaScript Dosyalarını Küçült'ü Evet olarak ayarlayın
• Daha sonra Sistem > Önbellek Yönetimi aracılığıyla önbelleği temizlemeyi unutmayın.

14. Bir PWA vitriniyle başınızı belaya sokun

Şu anda sahip olduğumuz Magento web sitelerinin çoğu hala geleneksel mimariye dayandığından, geleneksel mimarinin kendisi katı, muhafazakar ve zaman içinde yavaşlamaya meyilli olduğundan, kullanımdaki altyapı ile her şeyden daha fazla sınırlısınız. Başsız mimari, vitrinlere daha fazla esneklik, daha fazla ölçeklenebilirlik ve daha fazla performans iyileştirmesi getirmeyi amaçlayan bir yaklaşım olduğu için bu sorunu az çok çözer.

Bu nedenle, markaların daha fazla performans geliştirmesi getirmenin bir yolu olarak PWA vitrinlerini (başsız bir vitrin) tercih ettiğini görüyorsunuz ve bu gerçekten sadece yakın gelecekte daha fazla tanınırlık kazanacak bir uykucu.

Başsız olmak genellikle web sitenizde büyük altyapı değişiklikleri içerdiğinden, tüm süreci sizin için yürütmek için yalnızca güvenilir bir Magento PWA Çözümü sağlayıcısına güvenmenizi öneririz.

 Önerilen okuma: PWA'nın İşletmeniz İçin Faydaları

15. Kullanılmayan yazı tiplerini kaldırın

Web sitenizde hangilerinin en iyi görüneceğine karar vermeden önce farklı yazı tiplerini denemek ve sonra hepsini unutmak yaygındır. Ancak, bu yazı tipleri hala “default_head_blocks.xml” dosyanıza eklenmektedir ve hala indirilmektedir.

Magento sitenizin hızını optimize etmek istiyorsanız, kullanılmayan tüm yazı tiplerini silmeniz gerekir.

Benzer şekilde, özel bir yazı tipi kullanıyorsanız, temanızın diğer varsayılan yazı tiplerini kaldırmalısınız (örn. Open Sans, Helvetica, vb.).

Bunu, temanızdaki _typography.less dosyasını geçersiz kılarak düzeltebilirsiniz.

Basitçe yerini değiştirin

 /vendor/magento/theme-frontend-blank/web/css/source/_typography.less

İle

 /app/design/frontend/Vendor/Theme/web/css/source/_typography.less

Ardından, yeni _typography.less dosyalarındaki gereksiz yazı tiplerini silin.

Ayrıca, artık indirilmemesi için default_head_blocks.xml dosyasındaki yazı tiplerini kaldırmanız gerekecektir.

 <kafa>
...
<remove src="fonts/helvetica/regular/helvetica-400.woff2"/> 
<remove src="fonts/helvetica/bold/helvetica-700.woff2"/> 
...

16. Gelişmiş Javascript Paketleme Kullanın

8. adımda, verimlilik eksikliği nedeniyle Magento'nun yerel JS paketlemesini kapatmanızı öneririz. Bununla birlikte, JS Bundling, nasıl özelleştirileceğini biliyorsa, daha iyi Magento 2 hızı elde etmek için hala etkili bir uygulamadır.

Ama önce, varsayılan Magento JS paketlemesinin gelişmiş olanlardan nasıl farklı olduğundan bahsedelim:

Magento'nun temel JS paketi için, tüm JS dosyalarını yalnızca tek bir jumbo pakette toplayabilir veya birleştirebilirsiniz. Sonuç olarak, bir sayfa gerektiğinde, tarayıcının bu büyük ağır JS paketini yüklemesi gerekir ve bu da yükleme süresini kaçınılmaz olarak artırır.

Bu arada, gelişmiş JS paketleme ile kendi paketlerinizi özelleştirebilirsiniz, böylece tarayıcının yalnızca her sayfanın içeriğiyle alakalı bir paket indirmesi gerekir. Bu paketler daha küçük ve daha hafif olduğundan daha fazla hız sorununa neden olmazlar.

Esnek bir şekilde, her sayfa türü için veya farklı amaçlar için paketler oluşturabilirsiniz.

Örneğin, kategori sayfaları için bir paket ve ödeme sayfaları için başka bir paket özelleştirin.

Ayrıntılı talimata gelince, Magento'nun gelişmiş JS paketi için resmi kılavuzuna güvenebilirsiniz.

17. Erteleme JS yüklemesini kullanın

Bir tarayıcı bir sayfayı yüklediğinde, sayfanın Javascript, HTML ve CSS dosyalarını yukarıdan aşağıya doğru yükler. Genellikle en üstte bulunan Javascript dosyaları önce yüklenir. Javascript yüklendikten sonra tarayıcı HTML ve CSS dosyalarını işlemeye devam eder.

Ancak Javascript, yüklenmesi genellikle HTML'den daha uzun süren daha karmaşık bir dildir. Bu nedenle, Magento 2'nin hızını optimize etmek için Javascript'i yalnızca HTML ve CSS dosyaları oluşturulduktan sonra yüklenecek şekilde en alta taşımanız önerilir.

Magento'nun resmi kılavuzunu takip ederek veya Magento 2 için bir JS erteleme uzantısı kullanarak yapabilirsiniz.

18. CSS kritik yolunu etkinleştirin

Kodlayıcıların CSS'yi harici bir dosyada saklaması yaygın bir uygulamadır. Ancak Magento'ya göre, harici kaynaklardan gelen tüm CSS stilleri oluşturmayı engelleyecektir. Başka bir deyişle, bu dosyaların tümü yüklenmemişse sayfanız hiçbir şey göstermeyecektir.

Sonuç olarak, Google sayfa hızı öngörüsünde İlk Anlamlı boyama metriğini artırır ve sayfanın daha yavaş yüklenmesini sağlar.

CSS kritik yolu, önemli olmayan tüm stilleri ertelerken kritik CSS seçimini sağlar. Bu kritik CSS stilleri daha sonra küçültülür ve <head> içinde satır içinde birleştirilir.

Böylece, bir sayfayı ilk kez oluşturmak için gereken süreyi iyileştirmeye yardımcı olur. Magento, bu işlevi etkinleştirerek İlk Anlamlı Boyama'da 3.5s'den 2,3s'ye bir düşüş yaşadı ve CSS kritik yol kılavuzlarını izleyerek bunu nasıl yaptıklarını anlayabilirsiniz.

19. Üretim modunda olduğundan emin olun

Magento'nun üç çalışma modu vardır: varsayılan, geliştirici ve üretim modları.

Tam sayfa önbelleğe alma, JS paketleri ve daha fazlasını etkinleştirerek performans için optimize edilen üretim modu, tüm Magento canlı siteleri için en iyi şekilde önerilir. Geliştirici modundan %20-30 daha hızlı olan daha hızlı Magento modudur.

Komutu çalıştırarak mevcut modunuzu kontrol edin:

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

Bunun gibi bir mesaj alacaksınız:

Mevcut uygulama modu: {mode}. (Not: Ortam değişkenleri bu değeri geçersiz kılabilir.)

Mevcut mod üretim değilse, şu komutu çalıştırarak üretim moduna geçebilirsiniz:

 bin/magento konuşlandırma:mode:set {mode} [-s|--skip-derleme]

Çözüm

Tüm bu tekniklerle artık Magento'nuzu daha hızlı hale getirmek ve böylece rakiplerinize karşı daha iyi bir rekabet avantajı elde etmek için çalışabilirsiniz. Ancak, mikro optimizasyonlar çoğu zaman boşa harcanan bir çaba olduğundan ve gerçek dünya kullanımında farkedilmediğinden, performans optimizasyonunun her zaman sonuna kadar gitmeye değmediğini unutmamalısınız. Deneyimlerimize göre en iyi strateji, önce etkili sorunları belirlemek ve istediğiniz sonuçları elde edene kadar yalnızca bunlara odaklanmaktır.

Performansla mücadele eden Magento tüccarları için SimiCart'ta işletmeniz için hız optimizasyonu da dahil olmak üzere çok çeşitli hizmetler sunuyoruz. Seçeneklerinizi şimdi keşfetmeye başlayın ve sektör lideri mağaza performansı elde edin.