Smush eklentimizi ve Hummingbird’imizi kullanarak Elementor’ı ücretsiz olarak nasıl optimize edersiniz
Elementor, WordPress topluluğuna aşinadır, bunun en iyi ve en popüler sayfa yapımcılarından biri olduğu düşünülür. Ve optimizasyon açısından daha iyi hale getirmek için, ücretsiz eklentimizin yardımıyla birçok şeyi geliştirebilirsiniz: Smush ve Hummingbird. Elementors ile inşa edilen WordPress siteleri bazen büyük görüntüler, önbellekleme, CDN ve daha fazlası dahil olmak üzere çeşitli faktörler nedeniyle gereksiz yükleme sayfalarına sahiptir. Neyse ki, Smush ve Hummingbird ile, herhangi bir yavaşlamayı azaltmaya ve sitenizi aktif hale getirmeye ve en iyi şekilde çalıştırmaya yardımcı olabilirsiniz.
Elementor sitenizi geliştirmek için tüm Smush ve Hummingbird’in neler yapabileceğine dair bazı örnekler göreceğiz. Ayrıca, iki popüler temayla hareket ettikleri bazı örnekleri göreceğiz: Hello Elementor ve Astra. Ayrıca, Elementor sitenizi hıza göre sağlamak için bazı genel ipuçları ekleyeceğiz. Bu makalede şu tartışacağız:
Smush kullanarak elementor nasıl optimize edilir
Hummingbird kullanarak elementin nasıl optimize edilmesi
Smush, Hummingbird ve Elementor ile En İyi İki WordPress temasını artırmaya örnekler – Merhaba Elementor & Astra –
Elementorları hızlandırmak için ortak ipuçları
Bu makalenin sonunda, Elementor sitenizi en yüksek performans için optimize etmek için tüm araçlara ve bilgilere sahip olacaksınız.
Ve size Elementor sitesini PagePeed 80/100 puanlarından nasıl değiştirdiğimizi göstereceğiz. Başlamak için, bir elementiniz olduğunu varsayacağız (ve değilse – buradan ücretsiz alın). Ayrıca, yapmadıysanız, Smush ve Hummingbird’i indirin. Ücretsiz ödül kazananları optimize eden bir eklenti olarak 5 yıldız, şimdiye kadar bir milyondan fazla aktif kullanıcıya sahip. Smush bu bölümde oldukça popüler. Görüntü optimizasyonunuzun en yüksek standartları karşıladığından ve sitenizin hızlı olduğundan emin olmak için Elementor ile iyi çalışır. Kullandığınız elementler ve temalarla iyi çalışan olağanüstü yeteneklerinden bazılarını göreceğiz. Onlar içerir:
Yeni yüklemeleri otomatik olarak sıkıştırın
Sıkıştırmayı iki katına çıkarmak için süper çırpın
Smush görüntünün boyutunu değiştirerek daha büyük bir görüntü ekleyin
PNG’nizi JPEG’ye dönüştürün
Medya Kütüphanesinden Smushing
Yavaş yüklenme
CDN Smush kullanıyor
Tüm Elementor görüntülerinizin kütlesini, hangi Elementor Sitesine bağlı olarak, sitenize yüklenmiş birçok görüntünüz olabilir.
Neyse ki, dökme smush özelliği, smush gösterge panosundan tek bir tıklama ile üstesinden gelebilir.
Gördüğünüz gibi, bu örnekteki 51 ekin rafine edilmesi gerekir. Bittiğinde, Smush size söyleyecektir. Her şey parçalandı! Smush ile belirli görüntüleri de hariç tutabilirsiniz (örneğin küçük resimler). Bu, görüntüsünüzü hızlı bir şekilde element ile optimize etmenin mükemmel bir yoludur. Burada kütle lekesi hakkında daha ayrıntılı bilgi edinin. Yeni görüntü düğmeyi tıklayarak otomatik olarak sıkıştırın. İhtiyacınız olan tek şey bu! Tüm yeni görüntüleriniz sıkıştırılacak. Çift sıkıştırmaya süper çırpınma Elementor’daki görüntü sıkıştırmasını artırmak istiyor musunuz? Super-Smush, normal pislik sıkıştırmanın iki katına kadar sunabilir. Bu, gerekli olmayan her verinin onsu silerek yapılır. En iyisi, bu kayıplı sıkıştırma, bu yüzden çok az azalmış kalite vardır. Bu çok minimaldir ve birçok durumda insan gözü tarafından görülmez. Smush ile çoğu şey gibi, bunu yöneticiden tek bir tıklamayla yapabilirsiniz.
Süper Smush tüm Elementor resimleriniz için hazırdır. Görüntü kalitesindeki farkı görüp görmediğinizi görün ve görün. Bunu yapmayacağınızdan şüpheleniyoruz. Web tarafından optimize edilmiş maksimum görüntü boyutu. Medya kütüphanenize daha büyük bir resim eklemek istiyorsanız, Smush’ın görüntü yeniden boyutlandırılması olabilir. Görüntünün boyutunu değiştirmek için yalnızca bir tıklamaya ihtiyacınız var. Tıkladıktan sonra, yeni bir maksimum görüntü boyutu seçebilirsiniz. İstediğiniz yeni boyuta ekleyin. Ayrıca, tam boyutlu görüntünün dökme smush’ınıza dahil olup olmadığını da seçebilirsiniz.
Orijinal boyuttaki görüntüyü düzeltmek ve orijinal belgenizin bir kopyasını kaydetmek için bu seçeneği tıklayın. Tam boyutlu görüntünüzü görüntünün boyutunu değiştirerek kontrol edersiniz. diğeri. Bu nedenle, hız açısından, genellikle PNG yerine JPEG’leri kullanmak iyi bir artış olmalıdır. Smush, JPEG’ye dönüştürmenin dosya boyutunu azaltıp azalmayacağını ve Elementor sitenizi hızlandırmaya yardımcı olup olmadığını kontrol edecektir. PNG – JPEG otomatik dönüşüm daha küçük dosya boyutları üretirse otomatik olarak yapılır. PNG’yi otomatik olarak dönüştürmek daha kolay hale gelir. Smush etkinken, Smush adlı yeni bir sütun olduğunu göreceksiniz. Bu size hangi görüntülerin optimize edildiğini gösterecektir. Değilse, Smush’a tıklayabilir ve tek bir tıklamayla optimize edebilirsiniz. İstediğiniz tüm lekelenme parmaklarınızın ucunda. Bazen, her şeyi aynı anda görüntülemek sunucuyu yükleyebilir. Tembel yükle, kullanıcı kaydırıncaya kadar görüntüleri ekranın dışına yüklemeyi durdurur. Bu, sayfalarınızın daha hızlı yüklenmesini sağlar, daha az bant genişliği kullanır ve Google PagePeed testi aracılığıyla “Ekranın dışına erteleme” önerisini geliştirir. Belirli ortam çıkışlarına hangi tür ortam ve filtreyi yavaş yüklemeyi seçebilirsiniz. Önceden güçlendirme görüntülerinin nasıl görünmesini, animasyon seçenekleri ve görüntü ekranının görünürden önce süresinin süresi de dahil olmak üzere yavaş yükleme ile yapabileceğiniz birçok şey vardır.
Bu makaledeki tembel yükleme hakkında daha fazla bilgi edinebilirsiniz. CDN’nin (içerik dağıtım ağı) bunu yaptı. Bu, dünya çapında bulunan bir dizi sunucudur, bu nedenle tarayıcı HTTP istekleri yaptığında, içerik en yakın sunucudan konumuna sunulur. Bu özellik Smush Pro ile kullanılabilir ve kullanıma uygundur. CDN 45 puan sunar. Ayrıca, resminizin boyutunu otomatik olarak değiştirebilir ve ayrıca Google WebP biçimine dönüştürebilir. “Başlat” ı tıklamak CDN’yi başlatır. CDN, Smush Edge sunucusundan tüm JPG, PNG ve GIF görüntülerinizin bir kopyasını saklayarak ve sunarak birçok görüntü ile Elementor Site sayfasının hızını artıracaktır. Gelişmiş seçenekler için CDN SMUSH Pro, arka plan görüntülerinin sunumunu, otomatik boyutu değiştirme, WebP dönüştürme ve WordPress’teki REST API isteklerinden görüntü dönüştürmeyi içerir. CDN Smush hakkında daha ayrıntılı bilgi alın. Dosya sıkıştırma ile kontrolleri mükemmelleştirerek, CSS ve JS için daralarak, yavaş yükleme yorumları ve daha fazlası. Hummingbird, Elementor sitenizi hızlandırmanıza yardımcı olmak için sitenizin performansını optimize etmeye yardımcı olur! WP.org adresinde 100 binden fazla aktif kurulumu olan 4.5 sıralı bir eklentidir (ve büyümeye devam eder!). Elementor sitenizin hızlı taramasıyla, sitenizi kolayca hızlandırmaya yardımcı olan tek bir tıklama sağlayacaktır. Elementor sitenizi geliştirmek ve onu uçurmak için yapabileceği her şeyin ayrıntılı görüntülerini tartışacağız. Bakalım:
Sitenizi bir performans testi ile değerlendirin Önbellekleme ile sayfaları ve içeriği daha hızlı verin
Daha hızlı hizmet vermek için dosya boyutunu azaltan GZIP sıkıştırması Varlık optimizasyonu ile sayfanızın hızını artırın Sitenizi yarasalardan doğrudan performans testi ile değerlendiren Hummingbird, Elementor sitenizin nasıl durduğunu görmek için bir performans testi çalıştırmanıza olanak tanır. Teste dokunarak tek bir tıklamayla başlayabilirsiniz.
Performans raporuna tıklayın. Test yaptıktan sonra, Hummingbird size mezun olan fırsatlar, teşhis ve denetimler gösterecektir. Ayrıca, masaüstü ve hücresel sonuçları görebilirsiniz. Masaüstü ve hücresel arasında tıklayın. Tüm ayrıntılı bilgiler aşağıda listelenmiştir. Bu fırsatlarla başlar. Bu, sayfanızı yükleme hızını artırmak için bir öneridir. Gördüğünüz gibi, tasarruf potansiyeli de gösterilmiştir. Sırada teşhis. Bu, sayfalarınızın en iyi web geliştirme uygulamasına nasıl uyduğu hakkında ek bilgi sağlar.
Bu test uçan bir renkle mezun oldu. Ve son olarak, mezun olan tüm denetimleri görebilirsiniz. Bu, 90 veya daha fazla puanla her şeyi içerir. Ayrıca, daha fazla bilgi için her kategori için açılır listeye tıklayabilirsiniz.
Bu denetimde çok sayıda 100 var. Performans testi, Elementor sitenizi başlangıçtan itibaren değerlendirmenin iyi bir yoludur, böylece artışın nerede yapılabileceğini hemen görebilirsiniz. Hummingbird’i optimize etme makalemizdeki performans testi hakkında daha fazla bilgi edinin. Ve Hummingbird hakkında harika olan, çeşitli sayfa seçenekleri nedeniyle WordPress temanızla bir element kullanırken çok iyi çalışan birçok önbellek türü sunmasıdır. Önbellekleme yeteneği önbellekleme sayfası, önbellek tarayıcısı, gravatar önbellekleme ve RSS önbellekleme içerir. Buna ek olarak, siteniz bizim yoluyla gönderilirse, sitenizin hızı nesne önbelleği, Redis nesne önbelleği ve statik sunucu önbelleği ile daha da artırılır.
Hummingbird sizi hızlı bir şekilde saklar. Önbellek işlevinin her yönünü kontrol edeceksiniz. Bu, her sayfa üreticisinin farklı olduğunu ve değişecek yapılandırmalar içerdiğini düşünerek, sinek kuşunu Elementor için mükemmel hale getirir. Tüm özellikleri görebilir ve belgelerimizde sinek kuşu önbelleğe alınması hakkında daha ayrıntılı olarak görebilirsiniz. Tabanlı kaynaklar, kullanıcı tarayıcınıza daha hızlı ulaşan daha küçük ve daha özlü bir dosyadır. Gördüğünüz gibi, GZIP HTML, JavaScript ve CSS için etkindir. Bize göndermezseniz, GZIP sıkıştırmasını sunucu türünüze (örneğin Apache) eşleşecek şekilde değiştirebilir ve etkinleştirmek için talimatları izleyin. Optimizasyon, Elementor sitenizi optimize ederken gelişmiş seçenekleri manuel olarak kolayca otomatikleştirebileceğiniz veya yapılandırabileceğiniz yerdir.
Gördüğünüz gibi, bu, sıkıştırma tasarrufumun%9,7 olduğunu gösteriyor. Varlık optimizasyonunu iki modda kullanabilirsiniz: Otomatik: Varlıklarınızı optimize etmek ve otomatik Hummingbird seçeneğine göre sayfa açık süresini artırmak. Manuel: Elementor siteniz için ihtiyacınız olan doğru ayarları elde etmek için her dosyayı manuel olarak ayarlayın. Varlıkların optimizasyonu etkinleştirildiğinde, Hummingbird, WordPress site varlıklarınızı performans için optimize edilebilecek varlıkları göstermek için doğrudan tarar. Sinek kuşu varlıklarını optimize ederek yapılabilecek birçok ayarlama ve ayarlama vardır. Sitenizi maksimum optimizasyon için ne kadar iyi oluşturabileceğinizi görmek için belgelerimizi okuduğunuzdan emin olun. Elementor sitenizin performansını artırmak için Smush ve Hummingbird ne yapılabileceğinden, iki popüler Elementor teması kullanarak belirli örneklere daha yakından bakalım: Hello Elementor ve Astra. Daha önce de belirtildiği gibi, ücretsiz Elementor’u kullanacağız, bu nedenle bu ilk ortamda herhangi bir ücret yoktur (yine Smush ve Hummingbird de ücretsizdir). Bu, sayfalar, eklentiler veya ilk başta elementler ve temalar dışında yüklü olan yeni bir sitedir. Tüm bu özellikleri ve yaptıkları farklılıkları ne tür bir eklemeyi tartışacağız. Her şeyi kırmak için bunu böyle yapıyoruz: Elementor sayfa yapımcısı içeriğini ve temasını kullanarak bir WordPress sitesi hazırlayın Google PagePeed Insights ve GTMetrix ile hız testini çalıştırın Sinek kuşu ve smush’ı etkinleştirin ve önerileri ayarlayın Başka bir hız testi çalıştırın Barındırma özelliğini etkinleştirin (örn. Fast CGI) Hatırlamanız için son hız testini çalıştırın, her site farklı olacaktır. Konum, görüntü sayısı, ev sahibiniz ve diğer faktörler bir fark yaratacaktır. Bununla birlikte, bu size neler yapılabileceğinin genel bir resmini verecektir ve daha sonra Elementor tabanlı WordPress sitenizde ayarlayabilirsiniz. Bu ücretsiz tema Elementor kullanıcıları arasında bir favori ve Elementor tarafından yapılmış, bu yüzden iyi olduğunu biliyorsunuz. Hello Elementor, Elementor kullanıcıları için popüler ve yüksek rütbeli bir temadır. Bu temayı kullanarak bir site hazırladık ve Elementor Kütüphanesi’nin otel sayfasını yönlendirme sayfasını etkinleştirdik. Bu tema birkaç resim ve metin içerir, bu da onu iyi bir örnek haline getirir.
Bu yön sayfasını doğrudan WordPress kontrol panelinizdeki kitaplıktan etkinleştirebilirsiniz. Bu sayfayı verandam olarak da yaptım. Bunun görünüm açılış> özelleştir> ana sayfa ayarlarını ve bu yön sayfasını seçerek yapıldığından emin olabilirsiniz. Şimdi kuruldu, ayrılmaya hazırız! Bu sitede hızlı bir hız testi yapalım. Google PagePeed Insights ile başlayacağız. URL’ye girerken, bu Google PagePeed Insights puanımızdır:
Gördüğünüz gibi, orta aralıkta. Şimdi GTMetrix’e danışalım. Sunucu konumu (Vancouver, Kanada) ve tarayıcı (Chrome) için varsayılan GTMetrix ayarlarını kullandığımı fark ettim. Bu tüm bu örneklerde değişmeyecektir.
‘E’? İyi keder. Devam edelim ve Smush ve Hummingbird’i etkinleştirelim ve ne elde ettiğimizi görelim. Hummingbird ile bir performans testi yaparak ve önerileri kontrol ederek başlayacağım. Bunu yaptıktan sonra, 56/100 puanımız olduğunu ve Pramuian anahtar isteği gibi çeşitli fırsatlar sunduğunu, oluşturmayı engelleyen kaynakları ortadan kaldırarak, ilk sunucu yanıtının süresini azaltan ve kullanılmayan CSS’yi silme gibi çeşitli fırsatlar sunduğunu belirtti. Ayrıca, teşhis, web yazı tipi yüklemesi sırasında metnin görünür kalmasını sağlamamız gerektiğini gösterir. Bu aynı zamanda mezun olan 15 denetim olduğunu gösterir (Yippee! ). Hummingbird’ün bizim için birkaç önerisi var. Devam edeceğim ve olası tüm önerileri ele alacağım. Hummingbird’deki açılır menü, önerilerle tam olarak nasıl başa çıkacağınızı belirtir. Örneğin, burada sinek kuşu, kullanılmayan CSS’nin nasıl çıkarılacağını gösterir.
Sizin için yazılı nasıl düzeltilir. Ayrıca, ilk sunucu yanıt süresine yardımcı olmak, varlıklarımı optimize etmek ve birleşik ve sıkıştırılmış varlıklara yardımcı olmak için Hummingbird Page önbelleğini de etkinleştiriyorum. Sonra devam edip Smush’ı etkinleştireceğim. Hemen, Smush, tahrip edilmesi gereken 61 resim ve eklerim olduğunu gösterdi, bu da 815.5 kb tasarruf etmeme yardımcı olabilir. Bu kütleyi tek bir tıklamayla yok edeceğim.
Kütle parçalama tek bir tıklamadır. Birkaç dakika sonra, sonuç:
İyi! Gördüğünüz gibi, toplam tasarruf%872.5 kb/9.3 var. Şimdi devam edelim ve sayfamızın hızını kontrol edelim. İlk olarak, bu Google PagePeed Insights:
99 kitabımızda iyi. Ve bu GtMetrix:
Burada da oldukça iyi! Bu skordan memnun olmama ve bundan daha iyi olamasam da, her şeyi daha da artıracağım. CDN’imize Hummingbird Varlık Optimizasyonu bölümünde devam edeceğim ve etkinleştireceğim. İster bizi ister diğer şirketleri gönderiyor olun, ek optimizasyon için etkinleştirebilirsiniz. CDN’yi açmak için tek bir tıklama. CDN ve bunun neden site hızı için yararlı olduğu hakkında daha fazla bilgi edinmek için bu makaleyi okuduğunuzdan emin olun. Ayrıca, en iyi hıza sahip olduğumdan emin olmak için, Hub’da bir araç açacağım ve FastCgi kullanmak için statik sunucu önbelleğini etkinleştireceğim. Bunu “etkin” olarak değiştireceğiz ve iş başında olacağız. Ve şimdi, tüm bu ayarlamalarla, Hello Elementor temasını kullanan Elementor sitem hız için optimize edildi! Şimdi Elementors, Hummingbird ve Smush ile popüler olan Astra temalarının optimizasyonuna bakalım. WP.org’da 1 milyondan fazla+ aktif indirme ve sağlam 5 yıldızlı incelemelerle, bunun birçok Elementor kullanıcısı için iyi bir seçim olduğunu biliyorsunuz.
