Elementor, Web Sitelerinin Performansını Nasıl Önceliklendirir ve İyileştirir?

Yayınlanan: 2021-04-26

Elementor'un 2021 Ürün Yol Haritası, özellikle performans optimizasyonu hakkında konuşalım. Topluluğumuz tarafından talep edilen harika yeni özellikleri planlamaya ve geliştirmeye devam ederken, bu yıl kullanıcılarımızın web sitelerinin performansını iyileştirmeyi misyon edindik. Bu yazıda, bu hedefe ulaşmak için halihazırda gerçekleştirdiğimiz bazı eylemleri sizinle paylaşmak ve önümüzdeki yıl neler olacağından biraz bahsetmek istiyorum.

Web sitesi performansı, internetin başlangıcından beri web yaratıcıları için bir sorun olmuştur. Kendim bir web yaratıcısı olarak, her zaman şöyle sorular sorardım:

  • “Sitem çok mu yavaş? Kullanıcıların Google sıralamamdan ayrılmasına veya zarar vermesine neden oluyor mu?”
  • "Site hızını artırmak için belirli bir işlevi bırakmalı mıyım?"
  • Ve tabii ki: "Performans sorunlarıma hala ne sebep oluyor? Buradaki tüm üsleri kapsadığımı sanıyordum!”

Yani evet, kullandığımız platform veya araçlar ne olursa olsun, bir web sitesinden mükemmel performans elde etmek web yaratıcıları için her zaman bir zorluk olmuştur. Performansı etkileyen pek çok ilgili faktör varken, bırakın bunun için bir çözüm bulmayı, asıl sorunu izole etmek her zaman kolay değildir. Performansla ilgili bu beş bölümlük video kursunu tam da bu nedenle oluşturduk. Bu seride, Elementor ile ilgili olsun ya da olmasın, sitenizin performansını etkileyebilecek her önemli faktörü inceliyor ve nasıl optimize edeceğiniz konusunda size yol gösteriyoruz.

İşleri gerçekten ilginç kılmak için, Google kısa süre önce web sitesi performansının artık resmi olarak sıralama algoritmasında bir rol oynayacağını duyurdu. Bu, performans sorununu ön plana çıkararak dünya çapında web sitesi sahipleri arasında endişeleri artırıyor. Bu nedenle, son altı aydır Ar-Ge ve SEO ekiplerimiz, Elementor web sitelerinin bu güncellemeden başarıyla geçmesini ve başarılı bir şekilde geçmesini sağlamak için yorulmadan çalışıyor.

Google'ın gizemli algoritması söz konusu olduğunda, sizi güvende hissettirmenin bizim sözümüzden çok daha fazlasını alacağını biliyoruz. Bu nedenle, kullanıcılarımıza ve web yaratıcısı topluluğuna bir hizmet olarak, yaklaşan değişikliği tartışmak için önde gelen SEO uzmanlarıyla ücretsiz bir web performansı web semineri düzenleyeceğiz . Bu, yalnızca güncellemenin kendisini kapsamakla kalmayacak, aynı zamanda bu değişikliğin web sitenizi nasıl etkileyebileceğini ve hazırlanmak için neler yapabileceğinizi de detaylandıracaktır. Webinar kadar emin size yer ayır yapmak, 28 Nisan'da gerçekleşiyor.

Ancak, tüm kursları ve web seminerlerini bir kenara bırakarak, ürünümüzün sitenizin performansını olumsuz etkilememesini sağlamak birincil hedefimizdir. Bu bizim için en önemli öncelik olmuştur ve olmaya devam edecektir. Sözü daha fazla uzatmadan, Elementor'un 2021 Ürün Yol Haritamızda belirtildiği gibi performans optimizasyonu çabalarına geçelim.

Web Sitenizin İyi Performans Gösterdiğinden Emin Olmak İçin Bir Web Sitesi Hız Testi Çalıştırın

İçindekiler

  • Performansı Daha Fazla Artırmak İçin Beş Aşamalı Planımız
  • 1. Parça: "Yalnızca İhtiyacınız Olanı Yükleyin" ​
  • 2. Bölüm: JavaScript/CSS Kitaplıklarının Kullanımını Azaltın ve Yerel Tarayıcı Desteğinden Yararlanın
  • 3. Bölüm: Mevcut Dahili JavaScript ve CSS'yi İyileştirin ve Optimize Edin ​
  • 4. Parça: Arka Uç ve İşleme Süreçlerini Optimize Edin ​
  • Parça 5: Geliştirilmiş, Daha İnce ve Daha İyi Kod Çıktısı ​
  • Performansla İlgili Ücretsiz Elementor Kaynakları ​

Performansı Daha Fazla Artırmak İçin Beş Aşamalı Planımız

elementor-performance-1

Ürün geliştirme döngümüzün optimizasyonunun ötesinde, Elementor'un performansını iyileştirme vizyonumuz beş yollu bir yaklaşımdan oluşur. Bu alanların bazılarında zaten bazı önemli iyileştirmeler yaptık, diğerleri ise Elementor'un gelecek sürümlerinde ele alınacak.

Performansın, geliştirme ve sürüm hattımızın ayrılmaz bir parçası haline geldiğini söylemekten de gurur duyuyoruz. Elementor'un her sürümü, Elementor ile oluşturulmuş mevcut web siteleri üzerinde hiçbir yeni özelliğin, ince ayarın veya düzeltmenin herhangi bir olumsuz etkisi olmadığından emin olmak için çeşitli performans ölçütlerine göre doğrulanmaktadır.

Şimdi parçalarımızı tek tek inceleyelim:

1. Parça: "Yalnızca İhtiyacınız Olanı Yükleyin"

Elementor'un varlıkları yükleme şeklini iyileştiriyoruz, böylece her sayfada yalnızca ihtiyaç duyduğu şeyleri yüklediğinden emin oluyoruz. Hem Elementor hem de Elementor Pro'nun en son sürümlerinde, bir web sitesinin ön uç performansını iyileştirmek için optimize edilmiş varlık yükleme denemesini sunduk ve yalnızca gereken işlevleri yükleyerek her sayfayı hızlandırdık. Burada daha fazla bilgi edinebilirsiniz.

Ayrıca belirli widget'lara geç yükleme seçenekleri ekledik ve gelecekte de bunu yapmaya devam edeceğiz. Örneğin, Video widget'ı, yerleşik tam video oynatıcıyı statik bir küçük resim ile değiştirebilmenizi sağlayan yavaş yükleme seçeneği içerir. Görüntü, bir ziyaretçi onunla etkileşime girdiğinde tam videoya geri döner.

Bu tembel yükleme tekniklerini kullanarak, ilk sayfa yüklemesi sırasında sayfa boyutunu ve HTTP isteklerinin sayısını büyük ölçüde azaltabilirsiniz, bu da ziyaretçileriniz için çok daha hızlı bir deneyime yol açacaktır.

2. Bölüm: JavaScript/CSS Kitaplıklarının Kullanımını Azaltın ve Yerel Tarayıcı Desteğinden Yararlanın

Elementor'u neredeyse beş yıl önce başlattığımızdan beri, web tarayıcıları çok gelişti. Şimdi, beş yıl önce harici kitaplıklar gerektiren bazı özellikler, yerel tarayıcı desteği kullanılarak uygulanabilir. Bu, çok daha verimli bir uygulama sağlar ve bazı durumlarda JavaScript yürütme süresini büyük ölçüde azaltabilir.

Bunun bir örneği, belirli durumlarda yerel Kavşak Gözlemcisi API'si ile değiştirilen Yol Noktaları kitaplığıdır.

Bu tür CSS ve JavaScript kitaplıklarının kullanımını azaltmayı ve mümkün olduğunda bunları yerel tarayıcı desteğiyle değiştirmeyi amaçlıyoruz.

3. Bölüm: Mevcut Dahili JavaScript ve CSS'yi İyileştirin ve Optimize Edin

Elementor'un mevcut dahili JavaScript ve CSS'sini iyileştirmeye ve optimize etmeye devam etmeyi planlıyoruz.

Bunun örnekleri, Google Fonts yükleme yöntemini yapılandırma yeteneğini ve Font Awesome kitaplığına eklenen font-display özelliğini içerir. Bu iyileştirmeler, bu dosyalar için oluşturma engelleme işlemlerini azaltmalı ve mevcut CSS ve JS dosyalarının ek optimizasyonunu sağlamalıdır.

4. Bölüm: Arka Uç ve İşleme Süreçlerini Optimize Edin

Elementor 3.0'da dinamik CSS yükleme ve oluşturma mekanizmasını geliştirdik. Elementor, her sayfa yüklemesinde dinamik değerlere sahip öğeler için sayfaları taramak için kullanılır. Elementor 3.0'dan başlayarak, bir sayfa ilk kez oluşturulduğunda ve ziyaret edildiğinde Elementor, dinamik değerlere sahip tüm öğelerin bir önbelleğini oluşturur. Ardından, bir sayfa her ziyaret edildiğinde sayfayı dinamik öğeler için taramak yerine, liste önbellekten alınır ve hemen oluşturulur. Bu, sunucu tarafı işleme sürelerini önemli ölçüde iyileştirir ve gözle görülür iyileştirmeler sağlar. Gelecekte Elementor'a ek ayrıştırma iyileştirmeleri uygulamayı planlıyoruz. Bu blog yazısında bununla ilgili daha fazla bilgi edinebilirsiniz.

Parça 5: Geliştirilmiş, Daha İnce ve Daha İyi Kod Çıktısı

Son olarak, DOM'nin boyutunu küçültmek için Elementor'un oluşturduğu kod çıktısını iyileştirmeye ve küçültmeye devam etmeyi planlıyoruz.

Bu iyileştirmeleri, daha küçük bir DOM oluşturmak ve kod çıktısını basitleştirmek için üç sarmalayıcı öğesini kaldırdığımız Elementor 3.0'da yapmaya başladık.

Elementor 3.2'de, DOM boyutunda daha da büyük azalmalar elde etmek için iki öğeyi daha kaldırdık. Yakın gelecekte daha fazla indirim planlanmaktadır.

Gördüğünüz gibi 2021 ve sonrasında yeni özellikler, iyileştirmeler ve revizyonlar beklenebilir. Bunların hepsi, daha iyi performansa sahip harika web siteleri oluşturmaya devam etmenize yardımcı olmak için yapılır. Henüz en son sürüme yükseltmediyseniz, bu ve diğer iyileştirmelerin keyfini çıkardığınızdan emin olun.

Performansla İlgili Ücretsiz Elementor Kaynakları

elementor-performance-2

Bildiğiniz gibi, WordPress web sitenizin performansını etkileyen Elementor ile ilgili olmayan birçok faktör vardır. Bunlara görüntü optimizasyonu, web barındırma, sunucu sağlayıcıları, CDN ve daha fazlası dahildir. Kullanıcılarımızı eksiksiz WordPress optimizasyonu uygulamaları konusunda güçlendirmeyi amaçladığımızdan, performans hakkında daha fazla bilgi edinmenize yardımcı olacak ücretsiz eğitimler, web seminerleri ve makalelerden oluşan geniş bir kaynak bankası oluşturduk.

  • Performansla ilgili bir video kursu oluşturduk - bu beş bölümlük dizide , performansınızı etkileyebilecek her önemli faktörü ve onu nasıl optimize edebileceğinizi ele alıyoruz.
  • 28 Nisan'da, yaklaşan Google algoritma değişikliğini ve bunun web siteleriniz üzerindeki etkisini tartışmak için önde gelen SEO uzmanlarıyla Core Web Vitals hakkında bir web semineri düzenleyeceğiz. Koltuğunuzu buraya kaydedin.
  • Ayrıca, web barındırma seçimi, eklentileri önbelleğe alma, hız testleri çalıştırma, WP Rocket kullanma ve daha fazlası gibi diğer performans odaklı makalelerle birlikte WordPress web sitelerinin nasıl hızlandırılacağına dair ayrıntılı bir blog yazısı yayınladık.

Web yaratıcısı topluluğunu desteklemeye devam etmek için WordPress performansının diğer yönlerini ele alan ücretsiz web seminerleri, blog gönderileri ve videolar oluşturmaya devam edeceğiz.