Sayfa Maker yapmak için varsayılan seçeneği nasıl kullanılır
Elementors, WPBakery ve Divi gibi popüler sayfa yapımcılarının doğrudan optimizasyon seçenekleriyle donatıldığını biliyor muydunuz? Bu bilinmeyen ayarı nasıl en üst düzeye çıkarabileceğinizi öğrenmek için okumaya devam edin. Mümkünse, önce sayfa üreticinizin temasını optimize etmek için her zaman en iyisi. Bu, performans eklentisini ve harika bir yönetilen WordPress ana bilgisayarını kullanma gibi diğer optimizasyon yöntemleri için mükemmel bir temel oluşturur. Bu yazıda, doğrudan popüler sayfanın üç yönetici üreticisinden kullanılabilecek birkaç basit optimizasyon tekniği görüyoruz.
Daha sonra size tüm tahtalarda bazı ipuçları vereceğim, bu da WordPress sitenizi hız ve performans için optimize etmeye yardımcı olacak. İleri atlamak istiyorsanız tam olarak tartışacağız:
Öğeleri optimize et
WPBakery’yi optimize etmek
Bölümü optimize et
Tüm panolarda optimizasyon
Sonunda, her sayfa üreticisi için neyin mevcut olduğunu (ve değil) optimize etme yeteneğini ve nasıl uygulanacağını iyi anlayacaksınız! Bir elementle bir şey başlatın. öğeyi optimize eder
Bunlar şunları içerir:
Işık Temaları Kullanma
Optimize edilmiş DOM çıkışı
Varlıkların yüklenmesini optimize edin
Elementor Duyarlı Modu
Onlara daha ayrıntılı olarak bakalım. Işık temalarını kullanmak, bazı durumlarda sayfa yükleme süresinde% 50 veya daha fazla azalma üretebilir. Bu, göreceğimiz tüm sayfalar için geçerlidir: tema ne kadar hafif olursa o kadar iyidir. Bazı ücretsiz seçenekler Hello Elementor, Astra ve OceanWP gibi unsurlar için iyidir. Hepsi WP.O.OL.Hello Elementor, ücretsiz ve hafif temalar için doğru seçimdir. Hangi ışık temasını seçerseniz seçin, WordPress site tasarımınız ve Elementor’u düşünerek iyi çalıştığından emin olun. Optimize edilmiş DOM çıkışı Optimize edilmiş DOM çıkışı, Elementor tarafından üretilen HTML’deki ambalaj elemanlarının sayısını azaltarak performansı artırmak için Elementor tarafından yürütülen bir deneydir. Bu, hızı ve performansı artırmak için Elementor 3.0 ile başlayarak kurulmuştur. Sarma öğelerini DOM’dan silmek, daha basitleştirilmiş kod çıkışı, daha iyi okunabilirlik ve daha az karmaşıklık ekler. Şu anda, bu yalnızca yeni siteler için kullanılabilir çünkü deneysel modda. Elementor Gösterge Tablosunda, Ayarlar> Deneyler> Optimize edilmiş DOM çıkışı açın. Ardından Çekme menüsünden Active’i seçin ve değişiklikleri kaydedin.
Aktif olarak tıkladıktan sonra hazırsınız! Optimize edilmiş DOM çıkışı, tek bir tıklamada optimizasyonu artırmanın kolay bir yoludur. Etkinleştirildikten sonra, Altyapı Kodunun kısmı, gerekirse eşzamansız yüklenecektir. Bu özelliği etkinleştirmek için Ayarlar> Deney> Artan Varlık Yüklemesi. Değişiklikleri çekmek ve depolamaktan aktif seçin. Elementor, değişebilmesi için hala bu özelliği deniyor. Elementor, bunu etkinleştirmenin, uyumlu olmayan eklentilerle çatışmaya neden olabileceğini, bu nedenle karşılayabileceğiniz sorunlara dikkat edebileceğini söyledi. Eğer varsa, bunun devre dışı bırakılması veya Elementor Desteği ile iletişime geçilmesi gerekebilir. Ya da, WPMU devinin bir üyesiyseniz, 24 saatlik desteğimiz de yardımcı olabilir. Duyarlı Mod Elementor Duyarlı Tasarım genellikle özel bir hücresel WordPress sitesinden daha hızlı içerir. Elementor’daki arka plan görüntüsü otomatik olarak cihaza duyarlıdır, ancak hücresel seçenekleri kontrol etmek için kullanılabilecek başka harika araçlar da vardır. Hücresel, tablet ve masaüstü ayarlarını ayarlayabilirsiniz. En sık kullanılan ayar, metnin, marjın ve dolgu öğesinin boyutu içindir. Başlamak için, kontrol etmek istediğiniz ayrı öğelerin yanındaki ViewPort simgesini tıklayın. Bunu yaparak, masaüstü, tablet veya hücresel içeren ayarları düzenlemek istediğiniz belirli bir cihazı seçersiniz. Masaüstü, hücresel ve tablet arasında seçin. Elementor’daki arka plan görüntüsünün cihaza otomatik olarak duyarlı olduğunu belirttim, ancak yine de – bunun için daha fazla seçenek ayarlayabilirsiniz. Örneğin, her cihaz için farklı bir resim seçin. Farklı boyutlarda veya tamamen farklı görüntülere sahip aynı görüntüyü içerebilir. Her görüntü için hangi cihazı kullanmak istediğinizi seçin. Ayrıca, Arka Plan görüntüsü görüntüleme seçeneğini seçebilirsiniz (örneğin boyut, konum vb.). Görünürlük için, Ayarlar> Gelişmiş> Duyarlanabilirliği girerek cihazlara göre parçaları görüntüleyin/gizleyin. Her şey tek bir tıklamayla yapılır!
Belirli parçaları görüntülemek istediğinizi seçin. Diğer bazı duyarlı seçenekler arasında hücresel kesme noktasını ve tableti değiştirme ve sıralama sütunları bulunur. Bu makalede bu özellikler hakkında daha fazla bilgi, Elementor web sitesinde görebilirsiniz. Kısacası, bu size Elementor’daki duyarlı seçeneğin genel bir resmini gösteren kısa bir video. Elementor ayrıca son zamanlarda çekirdek web canlılarını artırmak için çeşitli planlar yaptı. Duyurularına göre: “Şirket, geliştirme döngüsünü optimize etti ve optimize edilmiş varlıkların yüklenmesi, JavaScript/CSS, JavaScript ve Dahili CSS, arka uç ve oluşturma işlemi gibi belirli performans alanlarına sabitlenen beş yol planı yaptı. optimize edilmiş ve kod çıkışı daha ince.
Elementor Planları, performansın tüm yönlerinin önemli, ön ve arka iyileştirmeler almasını sağlar. Ek ipuçları için, Smush eklentimizi ve Hummingbird’imizi kullanarak ücretsiz elementleri nasıl optimize edeceğimiz makaleler yayınlıyoruz. Elementor optimizasyonunuzu yeni seviyeye getirmek için kontrol ettiğinizden emin olun. WPBakery, WordPress için bir başka popüler sayfa üreticisidir (4.3 + milyon kullanıcı çok kötü değil). Gördüğünüz gibi, doğrudan optimizasyon açısından pek çok şey sunmaz. Sitenizi gerçekten geliştirmek için iyi barındırma ve optimizasyon eklentileri olmalıdır. Ancak, yapabileceğiniz bazı şeyler ve bazı ipuçları var. Sahip olduğunuz ana seçenek, sütunlar için duyarlı seçenekler hazırlamaktır. Elementor ile daha önce tartıştığımız gibi, duyarlı bir WordPress sitesi daha hızlı yükleme eğilimindedir, bu yüzden bu önemli bir optimizasyon öğesidir. WPBakery, çeşitli cihazlardaki sütunları kontrol etmenizi sağlar. Tüm bunlar, sütunlardan birinin ayarlarında Duyarlı Seçenek sekmesini açarak yapılır.
Ayarları değiştirmek için duyarlı seçenek sekmesine kolayca erişilebilir. Bu alan, diğer ekran cihazları ve boyutları için de bunun yanı sıra, varsayılan sütun boyutu için sütunun genişliği ve ofset ayarlarını ayarlamanıza izin verecektir.
Genişlik için birçok seçenek olduğunu göreceksiniz. Sütunu farklı ekran boyutları için ayarlamak için genişliği, ofset ve görünürlüğü kontrol edebilirsiniz. Ayrıca, belirli blokların sabit ekran boyutuna sahip mobil cihazlarda görünmesini istemiyorsanız, belirli cihazlar için sütunları gizleyebilirsiniz. Sitenin kontrolünüze yanıtını özelleştirin. Cihaz alanı, çeşitli ekran boyutları için farklı sütun davranışlarını düzenlemektir (örneğin masaüstü bilgisayarlar, ekran boyutları 1200 pikselden büyük). Ofset, sayfanın kenarındaki alan sayısını temsil eder ve her sütun için düzenlenebilir. Bu küçük ince ayar, duyarlı WordPress siteleri söz konusu olduğunda, WPBakery optimizasyonunuzda büyük bir fark yaratabilir. Duyarlı ayarlar hakkında daha fazla bilgi edinmek için şu videoya bakın: WPBakery’yi optimize etmenin bir ipucu: Siteniz yavaşsa, başka bir tarayıcı deneyin. Bunun temel gelebileceğini biliyorum, ancak bu sorunu çözebilir. Genellikle, ana tarayıcı, bellek veya uzantısında WPBakery sayfası oluşturucu işlevine müdahale edebilecek birçok önbellek öğesine sahip olabilir. WPBakery’yi smush ve sinek kuşu eklentilerimizin yardımıyla ücretsiz olarak optimize etme makalemizi okuduğunuzdan emin olun. Bir hız testi yapıyor ve sitenizi tam optimizasyon için nasıl ayarlayacağınızı adım adım gösteriyoruz – wpBakery sitemizi d değerinden a! bölümünü optimize etmek
Devi tanıdık. Son olarak, diğer kitlelerin en sevdiği optimizasyona bakalım – Divi. Olağanüstü bir sayfa üreticisi olmanın yanı sıra, Divi’nin yapabileceğiniz birkaç gelişmiş doğuştan gelen hız performansı var. Nasıl olduğunu göreceğiz: JavaScript dosyalarını küçük ve birleştirin CSS dosyalarını azalttı ve birleştirdi
Duyarlı görüntüleri etkinleştirin Statik CSS Dosya Üreticisi ve Satır İçi Çıkış Stilini Etkinleştirin
PHP için önerilen sunucu ayarlarını kontrol edin
Gördüğünüz gibi, her şey doğrudan Divi yöneticisinden hızlı ve kolaydır. Minifikasyon, koddan boşluk ve yorumların kaldırılması işlemidir, bu da daha küçük dosya boyutlarına ve daha hızlı indirmelere yol açar. JS’yi birleştirmek etkinleştirildiğinde, tüm JS dosyaları ve satır komut dosyaları, WordPress sitenizdeki HTTP isteklerinin sayısını azaltan tek bir JS dosyasında birleştirilir. Basitçe söylemek gerekirse, Minifing web tarayıcınızın dosyaları daha hızlı okumasına yardımcı olur. Bunu yönetmek için, Tema sekmesini açın. Buraya geldikten sonra, biraz parlamanız gerekir, ancak Minify’ı etkinleştirme ve JavaScript dosyalarını birleştirme seçeneğini göreceksiniz. Etkinleştir ve ardından Kaydet’i tıklayın.Ayrıca istediğiniz zaman devre dışı bırakabilirsiniz. Tema> Genel sekmesinde bulunur. Bu, site sayfanızın açılış saatini artırmaya yardımcı olmak içindir.
Bu, JavaScript Dosyaları seçeneğinin Minify ve Birleştirme seçeneğinin hemen yanında bulunur. Bu minifikasyon seçeneği ile Divi’nin HTML çıkışını en aza indirmediğini unutmayın. Bu nedenle, Hummingbird gibi üçüncü taraf eklentileri, tüm HTML sayfasını küçültmeye ve önbelleğe almaya yardımcı olabilir. Duyarlı görüntü seçeneğini etkinleştirerek, görüntüyü yüklerken ve görüntü öğesi için SRCSET özniteliğini dahil ederken üretilen duyarlı bir görüntü boyutu elde edersiniz. Duyarlı bir görüntü elde etmek için yalnızca bir tıklamaya ihtiyacınız vardır. Statik CSS dosyaları etkinleştirilir, CSS stili CSS stili Her sayfanın üreticisi önbellek olacak ve statik bir dosya olarak sunulacak. Bunu etkinleştirerek, sitenizin performansını da artırabilirsiniz. Bunu etkinleştirmek için Tema seçeneğini açın> Maker> Static CSS dosyası. Etkinleştir ve değişiklikleri tıklamanız yeterlidir, iş yapacaksınız. Ayrıca, bu özelliği etkinleştirdikten sonra çıktı stili satır seçeneğinin de göründüğünü de göreceksiniz. Bu otomatik olarak etkinleştirilecektir. Bu seçenek var, çünkü önceki oluşturucu sürümünde, modül tasarım seçeneği için CSS stili, altbilgideki satır içi çıktıdır. Etkinleştirildiğinde, bu davranışı geri yükler.
Statik CSS dosya oluşturma etkinleştirilmesi dışında çıktı stillerini satır içi görmeyeceksiniz. 3. taraf eklentisi ile bir çatışmanız varsa, bu seçeneklerin bazılarını devre dışı bırakmayı deneyin. Başka optimizasyon eklentileri kullanmazsanız, divi sitenizi mükemmelleştirmek için etkinleştirerek iyi durumda olmalısınız. PHP için sunucu ayarları. PHP, daha az bellek ve CPU ile ilgili sorunlar üreterek sitenizin performans için optimize edilmesini sağlamak için her zaman güncellenmesi önemlidir. Divi yöneticisinden raporlara erişmek için destek merkezini tıklayın. Üstte, sistemin durumunu okuyan alanı göreceksiniz. Buradan, tam bir rapor görüntüleme seçeneğini tıklayarak eksiksiz bir rapor görebilirsiniz. Raporun tamamını buradan kopyalayabilirsiniz. Tıkladıktan sonra, ekran hatalarından bellek sınırlarına ve maksimum giriş süresine kadar her şeyi içeren eksiksiz bir rapor alacaksınız. ve daha fazlası. Ancak, optimize etmek amacıyla PHP’ye odaklanacağız. Alanın hangi sürümü çalıştırdığınızı ve önerilerini karşılayıp karşılamadığını gösteren bir PHP sürümünü görebilirsiniz.
PHP sürümünüzle ilgili bir sorun varsa, bu raporda size söyleyecektir. Bu makalede PHP’nizi güncelleme hakkında daha fazla bilgi edinebilirsiniz. Divi’nin yükselen popülaritesi ile, burada görebileceğiniz eklenti, smush ve sinek kuşu yardımıyla Divi web sitesinin tam optimizasyonunu içeren başka makalelerimiz var. , sitenizi optimize etme konusunda kontrol edilmesi gereken bazı önemli kutular vardır. Bu, tüm WordPress siteleri arasında oldukça tutarlıdır. Bu nedenle, bu, sayfa üreticilerini optimize etmeye başlamadan önce WordPress sitenizi optimize etmenin çeşitli yollarına kısa bir genel bakıştır. İyi bir ana bilgisayar: Yönetilen WordPress barındırma (sahip olduğumuz gibi), WordPress’i göz önünde bulundurarak, sitenizi optimize etmeye yardımcı olarak açıkça yapılmış bir sunucu sunarak WordPress merkezli bir yaklaşım sağlar. Gereksiz eklentileri silin: Eklentiler talebi artırır ve ayrıca güvenlik ihlalleri gibi sorunlara neden olabilir. Etkin veya süresi dolmayan eklentileri kaldırın. En son temalar ve eklentilerden emin olun: Gereksiz eklentileri kaldırmak gibi, temalarınızın ve eklentilerinizin en son olduğundan emin olun veya güvenlik riski olabilir ve sitenizi engelleyebilir. Komut dosyasını altbilgiye yükleyin: Bu, talebi veya dosya boyutunu azaltmaz;
Ancak, önce bazı önemli içeriği yükleyecektir. Hummingbird eklentimiz bunu varlık optimizasyon alanında işleyebilir. Görüntü optimizasyonu: Görüntü optimizasyonu hız için çok önemlidir ve ücretsiz smush eklentisi, görüntülerin uygulanmasını kütle veya bireysel olarak işleyebiliriz. Önbellekleme Etkinleştir: Önbellek, en önemli artışa yol açtığı için kullanmak için en iyi yöntem olabilir. Kısacası, bu belirli bir süre için HTML web sitesinin bir kopyasını saklar ve siteniz bir sonraki yüklendiğinde, işlemek için bir sunucu oluşturmak yerine HTML’yi bellekten yükler. Hummingbird gibi iyi bir önbellek eklentisi yardımcı olabilir. CDN: İçerik dağıtım ağı, içeriğin daha hızlı gönderilmesi için istenen kaynakları coğrafi olarak size daha yakın yerleştirmektir. Daha iyi optimizasyon ve hıza sahip olmak çok iyidir. Bu sadece kısa bir liste. Optimizasyon açısından daha fazlası var. WordPress’i hızlandırmak için Ultimate Mega Kılavuzu makalemizi okuduğunuzdan emin olun. Elementor, wpbakery veya divi mi? Önce temanızı nasıl optimize edeceğinizi bilmek iyi bir pratik kurallardır. Temanız optimize edildikten sonra, sitenizin performansını iyileştirmenin ve ayarlamanın diğer yollarını düşünmeye başlayabilirsiniz. WordPress siteniz için kullanırsanız kullanın, en başından itibaren iyi bir optimizasyon oluşturun.
