Şu yazıyı okuyorsunuz: Magento 2’de görüntü oluşturmayı engelleyen kaynaklar nasıl kaldırılır [Complete Method]
Magento mağazanızı %300’e kadar hızlandırın
Daha hızlı bir Magento 2 mi istiyorsunuz? Magento uzmanlarımızın mağazanızı ışık hızında performans için optimize etmesine izin verin.
Magento 2 deposunda engelleyici kaynakların oluşturulması yükleme hızını önemli ölçüde etkileyebilir. Bu, son kullanıcılar için kötü bir deneyim yaratabilir ve sonuçta arama motoru sıralamalarını etkileyebilir.
Diyelim ki Magento 2 mağazasında görsel açıdan çekici bir tasarıma sahip yeni bir mağaza açtınız. Siteyi PageSpeed Insights veya GTMetrix gibi performans araçlarıyla denetlediniz ve sonuçlar hayal kırıklığı yaratıyor. Gördüğünüz optimizasyon fırsatlarından biri şudur: “Oluşturmayı engelleyen kaynakları kaldırın.”
Ama bu ne demek? Gibi ? Bu mikro gönderi aracılığıyla anlayalım. 😀
içindekiler
Oluşturmayı engelleyen kaynaklar nelerdir?
Tarayıcılar web sayfalarını yukarıdan aşağıya doğru satır satır yükler.
Başlıkta veya gövdenin üst kısmında bulunan JS ve CSS kaynakları, asıl içerikten önce yüklenir. Bu, web sayfasının tarayıcıda oluşturulmasını geciktirir ve sayfa deneyimini etkiler. Bunlara render engelleme kaynakları denir.
Örneğin aşağıdaki ekran görüntüsünü alın:
Çoğu zaman, tarayıcı sayfayı görüntülerken bu kaynaklara başlangıçta ihtiyaç duyulmaz.
Magento 2’de neden oluşturmayı engelleyen kaynakları kaldırmalısınız?
Magento 2’de görüntü oluşturmayı engelleyen kaynakların kaldırılması, sayfa yüklemeyi hızlandırabilir ve kullanıcı deneyimini iyileştirebilir.
Oluşturmayı engelleyen kaynakların temel web hayati değer ölçümlerini etkilediği bilinmektedir İçerikli ilk resim Ve Daha büyük içerikle boyama. Bu nedenle, oluşturulmasını engelleyen kaynakları kaldırmak PageSpeed Insights puanınızı artırmanıza yardımcı olabilir.
Magento 2’de görüntü oluşturmayı engelleyen kaynaklar nasıl kaldırılır?
Magento 2’de oluşturmayı engelleyen kaynaklardan kurtulmanın birçok yolu vardır. Gereksiz kaynakları kaldırabilir veya ayrıştırılmalarını erteleyebilirsiniz. Magento 2’de oluşturmayı engelleyen kaynakları kaldırmanın en pratik yolları şunlardır:
JavaScript’i küçültün ve paketleyin
JavaScript küçültme, gereksiz karakterleri atlayarak Js dosyalarının dosya boyutunu küçültmeyi ifade eder. Paketleme, birden fazla Js dosyasının tek bir dosyada paketlenmesi anlamına gelir. Bu, gerekli kaynakların yüklenmesine yönelik toplam istek sayısını azaltır.
Varsayılan olarak Magento 2, arka uçtan JavaScript küçültmeyi ve paketlemeyi etkinleştirme işlevselliği sunar. Bu adımları takip et:
- Magento 2 yönetici panelinde şu adrese gidin: Mağazalar > Ayarlar.
- Tıklamak Kaydetmek sayfanın sağ üst köşesinde.
CSS dağıtımını optimize edin
Basamaklı stil sayfaları (CSS), Magento 2’de kaynak oluşturmayı engelleyen sorunun ana suçlularından biridir. Özellikle ağır bir tema kullanıyorsanız.
Magento 2’de ayrıca CSS dosyalarını küçültebilir ve gruplandırabilirsiniz. Bu adımları takip et:
- Magento yöneticisinde şuraya gidin: Mağazalar > Ayarlar > Gelişmiş > Geliştirici.
- Genişletmek CSS Ayarlarıve ilgili seçenekleri etkinleştirin.
- Kaydetmek değişiklikler.
İstek sayısını azaltmak için kritik CSS satır içi ekleyin. Kritik CSS, içeriği web sayfasının üst kısmına yüklemek için gerekli stilleri içerir.
Kritik dosyaları ön yüklemeyi kullanarak ve kritik olmayan dosyaları aşırı yüklemeyi kullanarak eşzamansız olarak yüklemek için loadCSS’den yararlanın.
JavaScript ayrıştırmayı ertele
Magento 2’de oluşturmayı engelleyen kaynakları kaldırmanın en etkili yolu, kritik olmayan JavaScript dosyalarının ayrıştırılmasını ertelemektir.
Bu, bu Js dosyalarının sayfa oluşturulduktan sonra yükleneceği ve yürütüleceği anlamına gelir. Bu, HTML erteleme etiketi kullanılarak yapılabilir.
Magento 2’de bunu nasıl yapacağınız aşağıda açıklanmıştır:
- İşleme bloğundan sorumlu Js dosyalarını bulun. (GTMetrix gibi araçları kullanarak bulabilirsiniz)
- Eklemek ertelemek web sayfasının kaynak dosyasındaki ilgili komut dosyası etiketine öznitelik. Bu genellikle mevcut app/layout/frontend/{Vendor}/{Theme}/Magento_Theme/layout.Örneğin:
Yukarıdakiler, Magento 2’de JavaScript ayrıştırmayı erteleyecek ve görüntü oluşturma engelleme sorununu ortadan kaldıracaktır. Sorunu düzeltmek için bunu web sayfası oluşturmayı engelleyen tüm JavaScript kaynakları için yapmanız gerekecektir.
Sorunu büyük ölçekte çözüyorsanız bu yorucu olabilir. Ayrıca manuel olarak ayarlama ertelemek değişken hataya açıktır. Ücretsiz Magento 2 Defer Ayrıştırma JavaScript uzantımız bu sıkıcı işi sizin için yapıyor. Uzantı, J’lerin site genelinde ayrıştırılmasını erteler ve belirli sayfaları hariç tutacak şekilde yapılandırılabilir.
son atış
Kaynakların görüntülenmesini engellemesi, kaynak ağırlıklı birçok web sitesini etkileyen yaygın bir sayfa hızı sorunudur. Önceki makalede, Magento 2’de görüntü oluşturmayı engelleyen kaynakları kaldırmak için en iyi teknikleri öğrendik. Bunun dışında Magento 2’de görüntü oluşturmayı engelleyen kaynakları en aza indirmek için diğer en iyi uygulamaları da takip edebilirsiniz.
- Yerel özel yazı tipi barındırma
- Kullanılmayan kaynakları silin
- Koşullu CSS’yi medya nitelikleriyle yükleyin
Bu kadar! Umarım bu makale Magento bilginize değer katmıştır. Hala herhangi bir şüpheniz veya sorunuz varsa sormaya çekinmeyin. 😊
Ücretsiz Magento 2 uzantımızı kullanarak site genelinde JavaScript ayrıştırmayı erteleyin.
