Rose kullanarak Elementor’u hayati çekirdek web için optimize edin
Temel web verileri, genel web sayfası deneyimini ölçmek için Google tarafından kullanılan standarttır. Bir element kullanıyorsanız, sitenizi yüksek performans gösterecek şekilde optimize etmek için yapabileceğiniz birçok şey vardır. Bu makale, Rose Mekanizması adı verilen 4 adımlı bir sürece dayanarak Google’da büyük bir puan alan bir sitede kötü yapılandırılan Elementor sitesinin nasıl değiştirileceğini gösterecektir (azaltın, optimize edin, basitleştirin, ortadan kaldırın). Üyemiz Nathan Onn, burada tüm diziye sahip. Çekirdek Web Vitals yakında bir SEO sıralama faktörü olacak, bu nedenle ne olduğunu, nasıl çalıştığını ve WordPress sitenizi ayarlamanız önemlidir.
Eklentimiz, Smush ve Hummingbird – ve WordPress barındırma kullanımına göre bu yöntemi parçalayacağız ve özetleyeceğiz. Tartışacağız:
Hayati web çekirdeği Google nedir?
Elementor sitesinin hazırlanmasını alın
WordPress sitenizi daha hafif hale getirmek için varlık dosyalarını azaltma
İlk sunucu yanıt sürenizi optimize etme
İçeriğinizi basitleştirin
Düzende beklenmedik bir değişimin ortadan kaldırılması
Bunu okuduğunuzda, Elementor sitenizin hayati belirtileri Google’dan temiz bir sağlık raporuyla iyi görünecektir.
Google’ın çekirdeğinin hayati ağı nedir? Google’ın temel web verileri, optimizasyon açısından en önemli metriğe odaklanmaktadır. Bu, Google’ın web’de kaliteli kullanıcı deneyimi sağlamak için rehberlik sağlayan ve genel sayfa deneyimini ölçmek için yeni bir standart olan bir girişimdir. Bu, tüm web sayfalarına uygulanır ve tüm site sahipleri tarafından ölçülmelidir. Her ne kadar hayati gelişir ve değişir, şu anda hayati çekirdek, WordPress sitelerine üç şeye odaklanmalarına izin vererek yardımcı olabilir: yükleme (LCP – en büyük içerikli boya): Bu, yükleme performansını ölçer. İyi bir kullanıcı deneyimi, ilk sayfa yüklenmeye başladığında LCP’nin 2.5 saniyede görüneceği anlamına gelir.
Etkileşim (FID – ilk giriş gecikmesi): Bu etkileşimi ölçer. İyi bir kullanıcı deneyimi, sayfanın 100 milisaniyeden daha az FID olması gerektiği anlamına gelir.
Görsel kararlılık (CLS – Kümülatif Düzen Değişimi): Bu görsel kararlılığı ölçer. Sayfa 0.1’den az CL’lere sahip olmalı ve korunmalıdır.
Her hayati için de zaman görebilirsiniz. Sitenizin konumu hakkında iyi bir fikir edinmek için Google, yapabileceğiniz temel bir web veri raporu sunar. Bu, sayfa performansınızın gerçek dünyada kullanım verilerine nasıl dayandığını gösterir. Diğer perspektifler için, bu kısa özet videoda Google’ın temel web verilerinin neler olduğunu iyi görebilirsiniz: Gördüğünüz gibi, ne olduğunu öğrendikten sonra anlamak kolaydır. Artık Google’ın temel web verilerinden neyin oluştuğunu bildiğimize göre, başvuralım! Önce Elementor sitesini hazırlayacağız ve oradan başlayacağız. Elementor Ürün Sayfası sayfasını kullanacak – Uygulama. Örnek sitemin görünümünü takiben. Bu site için kullanacağım şey bu:
Sunucu: WPMU Dev Barındırma Paketi, Batı Sahili Bölgesi Tema: Halo Elementor Home Tema Elementor: Ürünler – Eklenti Uygulama Sayfaları: Elementor, Smush, Humusmbird ve Gösterge Tablosu Dev WPMU PHP: 7.4 Bu site başlangıçtan yapılır. Elementor sayfasındaki tasarımların hiçbiri ayarlanmamış veya değiştirilmemiştir. Bununla yaptığım tek şey, verandam olarak düzenlemek. Bunu bundan alacağız: 67. Daha iyisini yapabiliriz. Bunun için:
98 iyi bir skor! Tüm bunlar gül yöntemi kullanılarak yapılacaktır. Bir Elementor, Hummingbird ve Smush siteniz varsa, sitenizi çekirdek web canlıları ile optimize edin. Temanın kendisinin optimizasyonunu yapılandırarak başlamak her zaman en iyisidir. Ancak, kullandığınız temaya bağlı olarak bu değişecektir. Bu elementin temasını bu makalede belirttiğim gibi ayarladım. Başlayalım! WordPress sitenizi çok daha hafif hale getirmek için varlık dosyalarını azaltmak, WordPress sitemizi daha hafif hale getirmek için varlık dosyalarını azaltarak başlayacağız. Sonuçta, WordPress sitenizin sahip olduğu daha fazla varlık dosyası, yüklenmesi gereken süre o kadar uzun olur. Bunu başarmak için iki şeyi tartışacağız: JavaScript dosyalarını birleştirin Resminizi yüklemek için tembel
Dört alandan geçtikten sonra, varlık dosyalarımız azalır ve optimize edilmiş sitenin yolunu açar. JavaScript dosyanızı otomatik olarak sıkıştırın ve ayarlayın veya yanma simgesini tıklayarak manuel olarak birleştirin.
Bunu ayrı ayrı veya kütle yapabilirsiniz. Puanınızı artırmak için testleri tek tek. JavaScript dosyalarını birleştirme hakkında daha fazla bilgi için belgelerimizi okuduğunuzdan emin olun.
Görüntünüzü yüklemek için resminizi yüklemek için tembel, ziyaretçiler kaydırılıncaya kadar görüntüleri ekranın dışına yüklemeyi durdurur. Bu, daha az bant genişliği kullanarak ve ekran dışındaki görüntüleri geciktirerek sayfanızın daha hızlı yüklenmesine yardımcı olur. Tembel yük alanında Smush ile tek bir tıklamayla etkinleştirebilirsiniz.
Tembel yükü etkinleştirmek için sadece bir tıklama. Etkinleştirildikten sonra, yazı türü dahil/dahil edilmemek, orijinal yavaş yüklemeyi etkinleştirmek/dahil olmak üzere ne tür bir medyanın yavaş yükleneceğini seçmek gibi ek seçenekleriniz vardır (belirli yavaş yükleme özellikleri hakkında biraz konuşacağım) . Burada ek bilgiler bulun. Yazı tipi kitaplığını kullanmamak, önceki yazı tipi dosyasını yüklemek ve Emoji WP’sini silmek gibi yapabileceğiniz birkaç adım daha var. Bu adımlar ve yeni tartıştığımız adımlar hakkında daha ayrıntılı bilgi burada bulunabilir. Bitirildiğinde, tarayıcı sunucuya siteyi gönderen bir istek gönderir. Sunucu tarayıcıya geri gönderilen bir yanıt üretir. Ardından, web sitesinden bir görsel alacaksınız. Sunucu yapılandırması, kod yürütme, eşzamanlı bağlantı numarası ve sunucu konumu dahil olmak üzere yavaş yanıtlara neden olabilecek bazı faktörler. Hızlı bir yanıt süresine sahip olmak ve ilk sunucu yanıt sürenizi optimize etmek açısından çok önemlidir ve göreceğiniz gibi yapabileceğiniz birçok şey vardır. Onlar içerir:
HTTP/2 Destek ile İyi Hosting kullanın İhtiyacınız olmayan eklentileri sil
Hummingbird gibi iyi bir önbellek eklentisi kullanın
Bu optimizasyon yöntemini daha yakından kontrol edelim. Sonunuzdan ekstra cesaret için.
HTTP/2, web tarayıcısındaki yükleme sayfalarının hızını artırmak için gecikmeyi azaltma amacına sahiptir. Bu, ikili vs. gibi bir artış içerir. metin, tam multipleks, başlık sıkıştırma ve daha fazlası. Sunucu yanıt sürenizi optimize etmek istiyorsanız, iyi bir ana bilgisayara ihtiyacınız vardır. Özel Hosting WPMU Dev Varsayılan olarak HTTP/2 TLS (Taşıma Güvenliği) 1.3 var. Bu size optimize edilmiş bir sunucu yapılandırması sağlayacaktır, bu da çok daha hızlı bir yanıt süresi sağlar. Barındırma hakkında daha fazla bilgi edinmek için, burada neler olduğunu görebilirsiniz. İhtiyacınız olmayan eklentileri silmek kolay bir iştir ve WordPress sitenizi optimize etmeye yardımcı olabilir. Tek yapmanız gereken gereksiz gereksiz eklentileri kaldırmaktır. Gereksiz eklentiler sitenizi engelleyebilir ve performans sorunlarına neden olabilir. Eğer kullanmazsan – ondan kurtulun. Gerekirse her zaman daha sonra yeniden yükleyebilirsiniz. Önbellekleme, sayfanın hızlı bir şekilde yüklenmesini sağlayarak performansı artırır. Hummingbird, bahçe önbellekleme, gravatar önbellekleme, önbellek tarayıcısı ve RSS önbellekleme gibi birçok önbellek türü sunar. Ayrıca, etkinleştirmek kolaydır. Bu sadece bir tıklama gerektirir.
Sinek kuşu önbellekleme yeteneğini etkinleştirmek için tek bir tıklama. Bu makaledeki sinek kuşu önbellek becerileri hakkında daha fazla bilgi edinin. Ancak, yapabileceğiniz daha fazlası var – özellikle “üstte” içerik açısından. Bu, ekranınızdaki kaydırma veya tıklamadan görülen içeriği ifade eder. Çeşitli şeyleri nasıl basitleştireceğinizi göreceğiz: Görüntünüzü Smush ile Sıkıştırma
“Katlamanın Üstünde” resminizi sınırlamak
JavaScript tabanlı içeriği “Söz konusu üst” bölümüne yerleştirmiyor
Görüntünüzü daha hızlı bir yükleme süresi için sıkıştırmak istiyorsunuz. Hummingbird gibi Smush, WordPress sitenizdeki görüntüleri sıkıştırmak için mükemmel bir çözüm olarak yeniden ortaya çıkar. Smush, görüntünüzü tek bir tıklamada optimize eden yığın smush gücüyle yapmayı kolaylaştırır. Bundan sonra, MB’de ne kadar tasarrufunuz olduğunu söyleyecektir.
Tasarruf 593.5 MB kesinlikle sitenizi hızlandıracak! Görüntünüz açısından başka birçok seçenek vardır. Onlar hakkında daha fazla bilgi için buradan daha fazla okuduğunuzdan emin olun. Web sitesi logonuz ve kahramanlarınızdan oluşur. Bir arka plan görüntüsünüz varsa, sayıya da dahildir. Tabii ki, çok sayıda çan ve ıslık eklemeye cazipsiniz, ancak sitenizi gerçekten etkileyebilir. Ek görüntüler eklemek açılış saatinizi artıracaktır. Sadece iki görüntüye sahip olmak LCP puanınızı artıracaktır. Minimumda korumaya çalışın. JavaScript tabanlı içeriği kısaca “Said” e yerleştirmeyin, en iyisi “kat üstünün üstünde” bölümünü kaostan uzak tutmaktır. Bu, kaydırıcılar, atlıkarınca, animasyon vb. Gibi JavaScript tabanlı içeriğe sahip her şeyi içerir. Bunun nedeni, düzende beklenmedik değişikliklere ve daha uzun LCP elemanı yükleme süresine neden olabilmesidir. Bizi … Yukarıdaki beklenmedik değişimi ortadan kaldırarak, JavaScript tabanlı içeriği Paro Yukarı’ya yerleştirmediğimde, düzende beklenmedik bir değişikliğe de dokundum. Bu, örneğin, kayma ile olabilir. Düzende beklenmedik bir değişim, özelliklerin bir web sayfasına yerleştirilmesinde bir değişikliktir. Bir sorun haline gelirler çünkü animasyonla sıçrayabilir ve açılırlar, içeriği okumayı zorlaştırırlar. Olabilecek çeşitli yollar vardır. Onlar içerir:
Iframe’nin neden olduğu düzenin düzeninin görüntüsünün neden olduğu düzende kaymaJavaScript tabanlı içerikten kaynaklanan düzende değişim (örneğin karusel)
Google yazı tipinin neden olduğu düzende değişim
Düzende kaymaya neden olan doğru öğeleri belirlemek için bazı testler gerekebilir. Ancak, aramaya devam ederseniz, kesinlikle suçluyu bulacak ve sorunu çözeceksiniz. Her birine bakalım. Bunu yaparak, boyut aynı kalacak ve herhangi bir vardiyayı ortadan kaldıracaktır. Ayrıca, Smush’tan tembel yük ayarları bu sorunun üstesinden gelmeye yardımcı olabilir. Bu özellik, kullanıcı ilerleyene kadar görüntünün yüklenmesini durdurur.
Animasyon için süreyi ve gecikmeyi seçin. Düzen kayması, IFRames’in yanı sıra görüntülerden kaynaklanır, IFRAMES için tembel yüklerin etkinleştirildiğinden emin olabilirsiniz. Bu, video ile düzen değişikliklerini önlemeye yardımcı olur. Smush’ta bu, medya türünün türünde seçebileceğiniz seçeneklerden biridir. Aynı anda birkaç medya türünü seçin. IFrame tıklandıktan sonra (diğer seçeneklerle birlikte), siteniz daha hızlı yüklenir ve düzende değişimin önlenmesine yardımcı olur. JavaScript tabanlı içeriğin neden olduğu. Buna vites değiştirme, döner pinler ve taş ızgaralar gibi şeyleri içerir. Elementor kontrol panelindeki tüm farklı görünüm alanlarına sabit bir yükseklik ekleyerek Güney Koreli bir widget veya widget kullanırsanız düzeltebilirsiniz. Bir eklenti kullanıyorsanız, genellikle uyarlanabilir bir yükseklik seçeneğiniz olabilir. Bunu devre dışı bıraktığınızdan emin olun veya Güney Kore atlar ve görüntünün yüksekliği değiştiğinde görünür. Duvar ızgara eklentisi için, ızgara kabında kalıcı bir yüksekliğe sahip olduğunuzdan emin olun. Bunu yaparak, kullanıcı sayfayı eğittiğinde şebekeniz artık dalgalanmayacaktır. Elementor’daki Google yazı tipleri ve diğerleriyle ilgili bazı sorunlar var, ancak bu sorunu tam olarak çözmeyecek. Yine de düzende bazı değişiklikler göreceksiniz.
Elementor’daki Google yazı tiplerinin yüklenmesini ayarlayabileceğiniz örnekler. Hummingbird hemen Google yazı tipini optimize etmek için bir sürümle çıktı. Test merkezimizde kontrol edebilirsiniz (birkaç gün içinde piyasaya sürülmesi planlanır). Yaşadığım her şeyi yapılandırdıktan sonra sınavdan mezun oldu, skor tek başına konuştu! Google PagePeed Insights’ta Elementor sitem 98 puan aldı (bu makalenin başında görüldüğü gibi). Çok kötü değil. Dikkat edilmesi gereken bir şey, her tekniğin her sitede çalışmayacağı ve optimizasyon sürecinize her adımı dahil etmeniz veya dahil etmeniz gerekebilir. Ancak, belirtilen tüm yöntemleri test etmek ve sitenizde nasıl göründüğünü görmek iyidir. Ana amaç, mümkün olduğunca çok varlığı ortadan kaldırmaktır, bu da daha iyi bir Google PagePeed Insights puanına yol açar. WordPress’inizi optimize etme zorluğuyla yükseldiniz mi? Bu Elementor sitesi ile test edilir;
Bununla birlikte, bu yöntem temalar ve diğer site üreticileri için de kullanılabilir. Eklentimizi ve diğer seçenekleri kullanarak bu yöntemin tam bir özeti için üyelerimiz Nathan, ROSE mekanizmasını kullanarak temel web verileri için WordPress sitenizi optimize eder. Rose yöntemini daha iyi anlamak ve Elementor gibi siteleri optimize etmek için okuduğunuzdan emin olun. Elementor’u optimize etmek için daha fazla ipucu için, makalemizi, Elementor’u Smush eklentimizi ve Hummingbird’imizi kullanarak ücretsiz olarak nasıl optimize edeceğinizden emin olun. WordPress sitenizi optimize etmek kısa sürede sağlıklı ve gül-y olacaktır! Bu makalenin katkıda bulunanları şu şekilde yazılmıştır: Nathan Onn: 13 yıldan fazla deneyime sahip WordPress geliştiricileri. Nathan, WordPress ürünleri inşa etmenin yanı sıra bilgisini diğer WordPress hayranlarıyla paylaşmaya takıntılı. *** Not: Harici kaynaklardan makale almadık. Ancak WPMU Dev üyeleri, XCHANGE Blogu aracılığıyla blogumuzdaki öğreticilere ve makalelere fikir ve öneriler katkıda bulunabilir.
Gül yöntemini denediniz mi? Bu sitenizi nasıl geliştirir? Bize yorumlarda söyleyin!
