WordPress için Hummingbird ile Oluşturma Oluşturma Probleminden Nasıl Kurtulur

Peki, çok yavaş ne kadar yavaş? John Mueller’in Google Webmaster’ın yardımıyla ilgili cevabına göre, 2 saniyeden fazla olan her şey çok yavaş kabul ediliyor. Ve iki saniye ile, sayfanız hiçbir şey göstermezse-2 saniyeden fazla boş bir ekran görüntülüyorsa, başınız belada ve okuyucunun sitenizi sürükleyeceği anlamına gelir. Sayfanızın 2 saniye sonra daha yavaş verilerle yüklenmeye devam etmesi sorun değil. Bu, kombine sonuçlarının tüketicilerin% 47’sinin web sayfalarının 2 veya daha kısa sürede yayınlanmasını beklediğini tespit ederken, insanların% 40’ı 3 saniyeden fazla alan web sitelerini terk eden Gomez.com ve Akamai.com tarafından yapılan araştırmalarla desteklenmektedir. yüklemek için.
Bu sonuçlar bize web sitesinin hızının sadece Google’ın gözünde değil, aynı zamanda sitenizin ziyaretçilerinin gözünde de önemli olduğunu göstermektedir.Web sitenizin ne kadar hızlı (veya ne kadar yavaş) yüklendiğini bilmiyorsanız, başlamak için iyi bir yer bir pingdomdur.Hizmet sitenizi analiz edecek ve yüklemek için ne kadar zamana ihtiyaç duyulduğunu söyleyecektir.Daha derine dalmak ve Google’a göre puanınızın nasıl olduğunu görmek istiyorsanız, sitenizi neyin yavaşlattığını ve neler yapabileceğinizi öğrenin, ardından Google sayfası hız bilgilerine bakın.Genellikle, puanınızın 90 ve daha yüksek olmasını istersiniz.Ancak, sayfanızın hızını optimize etmek için hiçbir şey yapmadan, puanınız çok, çok daha düşük olacaktır.Çoğu zaman, düşük puanların en büyük nedeninin kötü bir şekilde sıkıştırılmış ve engelleyici bir sorun yaratan bir resim olduğunu göreceksiniz.
Kötü sıkıştırılmış görüntüler oldukça açıktır. Ancak, engelleme sorunu tam olarak nedir? Engelleme problemlerinin engellenmesinin yaygın problemleri, özellikle WordPress’e geldiğinde en yaygın render, üst yarıyı içeren veya parlamaya başlamaya başlamadan önce gördüğünüz web sitesi alanında JavaScript ve CSS’dir. Ne yazık ki, aynı zamanda kritik oluşturma yolunun bir parçasıdır, yani tamamen görmezden gelemezsiniz ve sitenizin düzgün görüntülenmesini ve çalışmasını umarsınız. Ne anlama geldiğini açıklayayım. Genellikle, web sayfaları web sayfaları yapıları depolayan HTML dosyalarından oluşur. Dosya, görsel bir stil eklemekten sorumlu olan CSS dosyasına ve Web sayfasına biraz ek ekleyen JavaScript dosyasına bir bağlantı içerir, örneğin animasyon, açılır veya uçuş tetiklenmiş kaydırma olayları gibi Web sayfalarının ilk görüntüsünü oluşturmak (görüntülemek) ve bu etkinliği optimize etmek çok daha hızlı bir web sayfası oluşturur. Oluşturma yolunun nasıl çalıştığını anladığınızda, herhangi bir web sayfasının hızlı bir şekilde yüklenmesi için gerekli iyileştirmeleri doğru bir şekilde uygulayabilirsiniz. En temel kritik oluşturma yolu şuna benziyor:
Tarayıcı indir html dosyası
Tarayıcı HTML’yi okur ve üç ek dosya olduğunu görür: CSS dosyaları, javascript dosyaları ve resimler
İlk tarayıcı resim indirmeye başladı
Tarayıcı, önce CSS ve JavaScript almadan web sayfalarını görüntüleyemeyeceğini fark eder
Tarayıcı, CSS dosyasını indirir ve kimsenin çağrılmadığından emin olmak için okur
Tarayıcı, JavaScriptBrowser’ın JavaScript dosyalarını indirmesini ve kimsenin çağrılmadığından emin olmak için hala web sayfalarını görüntüleyemeyeceğini fark eder
Tarayıcı nihayet bir web sayfası görüntüleyebilir
Özünde, bu, web sitenizdeki herhangi bir şey görüntülenmeden önce tarayıcının CSS ve JavaScript dosyalarınızın her birini yüklemesi ve okuması gerektiği anlamına gelir. Bu gerçekleşene kadar, ziyaretçileriniz boş ekrana bakar.
Şimdi, birkaç CSS dosyası, javascript dosyaları, resimler, sosyal medya düğmeleri, bazı ses dosyaları, PDF dosyaları gibi ekler ve daha fazlası olan web sitelerinde hangi kritik oluşturma yollarının hangi kritik oluşturma yollarını hayal edin. Her şeyin nasıl çok dağınık olabileceğini görmek kolaydır. Özellikle temanızda birçok CSS ve JavaScript dosyasının bulunmasının çok yaygın olduğu WordPress durumunda. Birçok kişi tarafından yükleme eğilimi gösteren çok sayıda eklenti eklerseniz, her şey daha karmaşık ve dağınık hale gelir, bu da yavaş yükleme web sitelerine yol açar. Tüm bunlar, Google’ın sayfa hızı ve bir sıralama faktörü olarak öneminden bahsettiğinde, kullanıcınızın içeriği görmeye başlamadan önce ne kadar beklemesi gerektiğini ve onunla ne kadar hızlı etkileşime başlayabileceklerini ifade eder.
Sayfa hızını optimize etme konusundaki temel endişeniz, içeriğinizi görebilmeniz ve onunla etkileşime girebilmeniz için kullanıcınızın ihtiyaç duyduğu süreyi azaltmalıdır. Bu, önemli oluşturma yollarını optimize etmek için elinizden geleni yapmanız gerektiği anlamına gelir. Sorunu çözmenin bazı yollarını kontrol edelim. CSS dosyasını engelleme CSS’yi oluşturur. Web sitenizi oluşturur. Web sayfalarınızın rengini, yazı tipini ve düzenini belirleyen şey budur. Ne kadar çok CSS dosyası varsa ve dosya ne kadar büyük olursa, tarayıcının okuması ve web sitesini görüntülemesi o kadar uzun sürer.
CSS dosyanızı doğru arayın
Kritik parçadaki CSS dosyalarının sayısını azaltın
Genel olarak daha az CSS kullanın
1. CSS nasıl doğru çağırılır CSS’yi çağırmanın iki yolu vardır: @Import ve yanlış koşullu CSS dosya etiketi. CSS’yi çağırmak için @Import yöntemi, sıradan stil sayfanıza yakın olacak ve şuna benziyor: @Import url (“Style.css”) Bu, tarayıcının önce kalan CSS dosyalarını okumadan önce içe aktarılan bir dosya bulması gerektiği anlamına gelir. Web sayfanızı görüntülemek için gereken süre.
Yerine, içe aktarılan dosya içeriğini kopyalamak ve orijinal stil sayfasına eklemek daha iyidir; Veya satırı orijinal stil sayfanızdan tamamen silin ve aşağıdaki kod satırını kullanarak içe aktarılan CSS dosyasını HTML dosyanıza ekleyin: “Style.css “CSS dosyanızın konumu ve adı ile. Koşullu CSS, belirli koşullar karşılanmadan önce görüntülenmesi gereken CSS dosyasını, yani bir web sayfasını veya sayfanın belirli bir genişliğe sahip olduğunda kullanılan stil sayfasını yazdırdığınızda ifade eder. Dosya doğru bir şekilde etiketlenmediğinde, bu, Web sayfası görüntülenmeden önce tarayıcı tüm stil sayfasını içereceği anlamına gelir. İşte bir örnek. Tipik CSS dosyası aşağıda gösterildiği gibi çağrılır: Bu kod temel olarak tarayıcıya bu dosyanın stil sayfanızın bir bağlantısı olduğunu söyler. Web sayfanızda herhangi bir şey görüntülemek yerine bu adlı herhangi bir CSS dosyası önceliklendirilecektir. Sayfa oluşturulmadan önce yüklenmesi gerekmeyen CSS dosyaları durumunda, buna şöyle çağrılmalıdır: Bu çevreye çevrilir “Bu, sadece yazdırılması amaçlanan CSS dosyamın bir bağlantısı.”
Bu durumda, tarayıcı, sayfanın doğru görüntülenebilmesi ve dosyaya daha düşük öncelikler yerleştirmesi için bu özel dosyanın gerekli olmadığını anlar. Yine de indirecek, ancak web sayfalarının oluşturulmasına müdahale etmeyecektir. Aynı şey, web sayfalarını çeşitli ekran genişliğinde görüntülemek için özel olarak bir CSS dosyanız olduğunda da olur. 2. Daha az CSS dosyası kullanmanın en iyi yolunun kritik yolunda daha az CSS dosyası kullanın, dosyaları birleştirmektir. Özünde, bu bir CSS dosyasından içeriği kopyalamak ve başka bir dosyaya yapıştırmak anlamına gelir. Bittiğinde, HTML dosyanızdan ek CSS dosyalarına aramaları silmeniz gerekir. 3. CSS oluşturma engellemesinin üstesinden gelmenin son yolu daha az CSS kullanın, ancak kolay görünse de en pratik çözüm değildir. Çoğu durumda, çok ayarlandığı iddia edilen WordPress teması, aslında çok gerekli olmayan ek CSS dosyalarıyla birlikte gelir. Bunun en pratik çözüm olmamasının nedeni, büyük olasılıkla web siteniz için özel olarak tasarlanmış bir temaya sahip olmanız veya tema pazarından satın almanızdır. Bu durumda, sahip olduğunuz tek çözüm tema tasarımcısı ile iletişim kurmak ve size yardım etmeye istekli olup olmadıklarını görmektir. JavaScript’i Engelleme JavaScript söz konusu olduğunda, web siteniz tarafından yayınlanan kaç JavaScript dosyasını ve dosyaların çağrılarının nereye yerleştirildiğini bilmeniz gerekir. Bunu yapmanın en kolay yolu Google PagePeed Insights aracını kullanmaktır. Bu size belirli sayfaları engelleyen tam dosyanın adını söyleyecektir.
Hangi dosyaların sorunlara neden olduğunu bildikten sonra bir çözüm uygulayabilirsiniz. Çoğu web sayfasında kullanılan bir JavaScript çerçevesi olan en yaygın neden jlogling javascripts JQuery’dir. Bu sadece bir dosya ama oldukça büyük. Çoğu zaman, bu, web sitenize solma girişi veya giden resimler gibi ekstra işlevler eklemek, ziyaretçiler web sitenizden ayrıldığında optin e -posta formlarını görüntülemek için kullanılır. Gerçekçi olarak konuşursak, dosyayı web sayfasından önce yüklemek için bir neden yoktur, ancak çoğu web sitesi suçludur. Bu sorunu çözmek için, web sitenizde oluşturulan jQuery için çağrı yerini değiştirmeniz gerekir. Kısmi çözüm, Google Analytics gibi diğer tüm JavaScript dosyaları veya Facebook Like Box veya Google+ Profil Rozeti gibi sosyal medya widget’larının yanı sıra web sitesi altbilgisinize çağrı yapmaktır. Bunun yalnızca kısmi bir çözüm olmasının nedeni, tarayıcının Web sayfalarını önce ve ikinci JavaScript dosyasını yüklemesine izin vermemesidir. Sonunda, yöntem yine de web sitenizin hızını etkileyecektir. Çok daha iyi bir çözüm, JavaScript’i tamamen geciktirmektir. Bu, kritik oluşturma yolundan tamamen siler ve sayfaların artırılmasında büyük bir rol oynayacaktır. HTML’nize birkaç satır JavaScript kodu ekleyerek bunu yapabilirsiniz, bu da “Onload” etkinliğini yapan. Etkinlik, yalnızca web sayfası yüklendikten sonra geçerli olacak harici JavaScript dosyasını arayacaktır.
Tüm bunları göz önünde bulundurarak, bazen tüm optimizasyon ayarlarını kendileri yapamayabilirsiniz.Bu durumda, çözmenize yardımcı olmak için bir eklenti kullanmak en doğal eylemdir.Bu yüzden sinek kuşu inşa ediyoruz. Ringan ve yüksek güçlü, sinek kuşu önbelleğe alınır, komut dosyalarının yüklenmesini azaltır, birleştirir, birleştirir, sıkıştırır ve sitenizi ince ve ortalama bir hız makinesi haline getirir.
Web sitenizi optimize etmenize ve daha hızlı yüklemenize yardımcı olmak amacıyla Hummingbird Hummingbird ile Engelleme Oluşturma Problemini ortadan kaldırın. Odak noktası, web sitenizin Google PagesPeed Insights tarafından kontrol edilen aynı bileşeni üzerindedir, ancak anlamı kırmak için bir arama gönderen belirsiz bir mesaj yerine, Hummingbird gösterge tabloınızda doğru çözümü sunar. PagePeed Insights Aracı gibi, bu araç size 100’e kadar bir ölçekte nasıl puan verdiğinizi gösterir, ardından size ne arttırmanız gerektiğine dair ayrıntılar verin. Öneriler, sitenizin altbilgisine düzenlemeniz veya taşımanız gereken belirli dosyaların yanı sıra sıkıştırmanız gereken görüntülerin yanı sıra açık ve anlaşılması kolay bir dille yazılmıştır. Kısacası, bu, düzenlemeniz gereken dosyaları yazma ve manuel olarak bulma ihtiyacını ortadan kaldırır. Hummingbird ile tüm değişiklikler düğmeyi tıklayarak yapılır. Sitenizde kalıcı değişiklikler yapma konusunda endişelenmenize gerek yok. Memnun değilseniz veya belirli bir optimizasyon adımı sitenizin kullanılmamasını sağlarsa, her zaman değişikliği iptal edebilirsiniz. En iyi uygulama, en iyi uygulama, sitenizin altbilgisine mümkün olduğunca çok komut dosyası yüklemektir, bu nedenle Sitenizin önemli kısımlarını önlemez. hızla yüklenerek. Ancak, tüm eklentiler ve temalar bu fikri takip etmez. Hummingbird, komut dosyası çağrısını düğmeyi tıklayarak üstbilgiden altbilgiye taşımanıza olanak tanır.

Bazı önbellek eklentileri, oluşturma bloğu dosyasını altbilgiye taşıma seçeneği sunsa da, dosyayı manuel olarak kendiniz bulmanız gerekmez.Hummingbird, hangi dosyaların sorunlara neden olduğunu görmenizi sağlar – bu doğru dosya adını verir – böylece altbilgiye, üstbilgiye veya orijinal konumuna bırakmak isteyip istemediğinize karar verebilirsiniz.Ayrıca, site performansını artırmak için birleştirmeyi ve en aza indirmeyi seçebilirsiniz.Yapmanız gereken tek şey Sitenizin arkasındaki Hummingbird> Minifasyona gitmek ve aşağıdaki ekranı göreceksiniz: Hummingbird ile dosyayı, başlıkta, altta veya varsayılan olarak nerede konumlandırmak istediğinizi seçebilirsiniz. dosyanızdaki konum.
O zaman yapmanız gereken, soldaki dosya adına göz atmak ve her dosyayı yeniden konumlandırmak istediğinizi seçmektir. Tamamlandıktan sonra “Kaydet” i tıklamayı unutmayın. WordPress’e her zaman olduğu gibi, bu özellikle oynamadan önce sitenizin bir yedeğini yaptığınızdan emin olun. Her optimizasyondan sonra, sitenizi test ettiğinizden ve her öğenin gerektiği gibi yüklenip yüklenmediğini görün. Bunun nedeni, bazen WordPress temalarının ve eklentilerinin WordPress standartlarını takip etmemesidir, bu da JavaScript azaldığında belirli öğelerin hasar görmesine neden olabilir. Bununla birlikte, sinek kuşu ile yaptığınız her değişiklik, Hummingbird panosundaki “Sil” düğmesi ile kolayca tersine çevrilebilir. Sitenizi sinek kuşu ile daha fazla optimize etmek, engelleme sorununu ortadan kaldırmak sadece buzdağının zirvesidir. Hummingbird, minifikasyon, önbellek tarayıcısı, GZIP sıkıştırma ve hatta sitenizin çalışma süresini izlemek için yapılandırılmış size yardımcı olabilir. Ayrılmadan önce bu özelliklerin her birine kısaca bakalım: Minifikasyon. Minifikasyonlar Görüntüye göre – boşlukları, taşıma iadelerini ve gereksiz karakterleri silerek HTML, CSS ve JavaScript dosyalarınızı azaltır. Bu, sitenizin daha hızlı yüklenmesine yardımcı olan daha küçük dosyalar üretir.
Önbellek tarayıcısı. Bu, statik içeriğinizin önbellek sürümünü yapar, yani ziyaretçiler tekrar yenilediklerinde veya açtıklarında tarayıcının her şeyi baştan yeniden yüklemek yerine önbellek sürümünü sunar.
GZIP Sıkıştırma. GZIP, büyük dize verilerinin bir bit olarak saklanabileceği bir kod oluşturmak için bir algoritma kullanır ve sayfalarınızı ve stil sayfanızı etkili bir şekilde daha küçük hale getirir. Bu, sitenin açılış süresini azaltmak için kullanılan oldukça yaygın bir uygulamadır. Aktif süreyi izlemek. Çalışma süresinin izlenmesi ile sadece sitenizin kapalı olup olmadığını değil, aynı zamanda ne kadar hızlı içerdiğini de öğrenebilirsiniz. Bu, siteniz her öldüğünde ve siteniz çevrimiçi döndüğünde size bir e -posta gönderir.