PagePeed Puanları eklemek için teşhis ve render engelleme kaynaklarını düzenleme.

Güzel web sitesi ... ama yavaş! Müşteriler tamamen kaybolur! Hiç bu sorunla baş ağrınız oldu mu? Web Sitesine Yatırım. Ancak Google PagePeed Insights'daki noktaları kontrol ederken, kırmızı harfler "render engelleme kaynaklarını ortadan kaldır" , bu nedir? Öyleyse neden web sitenizi hayal etmemesi önemli olan bir "karakter"? Bu makalenin el ele tutuşması için bir cevabı var. Sargalı web sitesini hızlı bir şekilde değiştirmek için, rokete sadık kalın!

Hayattaki asıl sorun

Güzel dekore edilmiş bir restoran açmak üzere olduğunuzu düşünün. (Web siteniz). Müşteriler sırada bekliyor (giren trafik), ancak mağazada bir ressam ve girişte çalışan bir elektrikçi var. (Engelleyen kaynakları oluşturun) ve "Bekle! Önce duvarı bitirmemizi ve kablolamamızı bekliyorum. Herkes dükkana girebilir." Müşteri ne yapacak? Tabii ki, çoğu veda ediyor ve başka bir dükkana gidiyor! Tam olarak olan buydu. Web sitenizle, kullanıcılar, özellikle mobil cihazlarda beklemek istemiyorum. Web sitesinin yüklemeyi bitirmediği sadece 3-4 saniye. Hemen bastırmaya ve rakiplerinize gitmeye hazırlar. Ve takip eden şey, hemen çıkma oranının yüksek olması, dönüşümün düşmesi ve en kötüsü Google'ın web sitenizin iyi olmadığını düşünmesidir. Sıralamalar tekrar düştü. Bu, çevrimiçi iş adamlarının açıkça bir kabusu.

İllüstrasyonlar istemi: Önce ve problemleri çözdükten sonra Google PagePeed Insights'ın görüntülerini karşılaştırın. Engelleyen kaynakları oluşturur. İlk tarafın, "render engelleme kaynaklarını ortadan kaldıran" ve yeşillik sonrası) vurguları olan düşük bir puan (kırmızı) vardır.

Bu sorun neden meydana geldi?

Daha net olabilmek için tarayıcının (Chrome, Safari gibi) nasıl olduğunu anlamalıyız. Web sayfanızı "Oluştur". Birisi web sitenize geldiğinde tarayıcı, tüm evin "yeşil baskısı" gibi HTML kodunu okuyarak başlayacaktır. Her seferinde bir satır okuyacak. Ancak, CSS dosyasını (web sitesinin nasıl göründüğünü söyleyen stil sayfası style dosyası) veya JavaScript'i (web'i çeşitli özelliklere sahip olan komut dosyası) indirmek için sipariş edildiğinde, hemen bir ev inşa etmek için "durdurulur"! Her şeyi bırakacak ve bu dosyayı indirmek için çalışacaktır. Önce bitirmeye gelin ve sonra bir ev inşa etmek için geri dönebilir. "Beklemeyi Durdur". , "render engelleme" olarak adlandırdığımız şeydir , gereksiz yere engelleyen CSS ve JavaScript dosyaları, tarayıcıyı kullanıcıların yavaşça görmeleri için web sayfasını göstermesini sağlar. bunu çok iyi tanımlayan GTMetrix'ten daha fazla bilgi edinebilirsiniz

İllüstrasyonlar istemi: Tarayıcının çalışmasını gösteren kolay infografik görüntüler. HTML'yi okuyan ve "Stop" sembolü olan düz bir çizgidir. Kırmızı, hattan önce CSS ve JS dosyaları devam edebildiğinde görünür.

Eğer kalırsa nasıl etkilenecek?

Sorunları görmezden gelmek, kaynakları engelleme kaynaklarını evdeki suyun sızmasına izin vermekten farklı değildir. İlk başta biraz olabilir. Ancak uzun vadeli etki beklenenden daha ciddidir:

• Kullanıcı Deneyimi (UX) zayıftır: Kimse yavaş yüklenen web'i sevmez. Özellikle sabırsız olan cep telefonu kullanıcısı, hayal kırıklığına uğramış ve markanızın profesyonel olmadığını görecekleri orijinal sermayedir. müşteriler ortadan kalkana kadar klinik web sitesi veya hizmet işinin yavaş olmasının ana nedenidir
• Bonvey oranı artıyor: daha yavaş web yükleri. Ne kadar çok kişi basarsa, Google'dan daha fazla bilgi, sadece web sitesinin 1 ila 3 saniye arasında daha yavaş yüklendiğini belirtiyor. İnsanların%32'ye kadar baskı yapma şansı!
• Çekirdek Web Vitals Drops: Bu sorun, çekirdek web canlılarının önemli metrik paspaslarından biri olan en büyük içerikli boyayı (LCP) doğrudan etkiler . LCP değeriniz kötü olduğunda, Google web sitenizin düşük olduğunu görecektir.
• SEO Sıralaması: Google'ın sayfa deneyimini sıralamada bir faktör olarak getirdiği 2021'den beri. Yavaş ve kötü UX olan Web'in önemli ölçüde azalma şansı var.
• Gelir kaybı ve iş fırsatları: Sonu, tüm bu etkiler aynı şeye yol açar, web sitesindeki rakipler için müşteri ve gelir kaybedersiniz.

İllüstrasyonlar istemi: Grafik, artan web yükleme süresi arasındaki ilişkiyi daha yüksek hemen çıkma oranı ile gösterir. Müşterinin kaşlarını çatmış simgesiyle birlikte

Herhangi bir çözüm var mı? Ve nereden başlamalı?

İyi haber şu ki, bu sorun çözülebilir! Ana prensip, tarayıcıda yeni "öncelik vermemiz" gerektiğidir, "Hey! Sadece en gerekli şeyi alıyorsunuz. Önce müşteriyi göstermek için gidin. Acele etmeyen şeye gelince daha sonra indirilebilir." Aşağıdaki ana tekniklere sahiptir:

JavaScript (JS) için:

• Öznitelik DeFer : Bu en kolay ve en etkili yoldur. Etikete erteleme ekleyin เบราว์เซอร์จะโหลดไฟล์ JS นั้นไปพร้อมๆ กับการสร้างหน้าเว็บ (ไม่หยุดรอ) และจะเริ่มทำงานก็ต่อเมื่อสร้างหน้าเว็บเสร็จแล้ว เหมาะกับสคริปต์ส่วนใหญ่ที่ไม่จำเป็นต้องทำงานทันที
• ASYSYS ASYSC : DeFer'a benzer şekilde , tarayıcı yüklemek için durmaz. Ancak, web sayfası tamamlanmadan önce çalışabilecek yük biter bitmez çalışır, bazı izleme komut dosyaları gibi diğer parçalarla ilgili olmayan komut dosyaları için uygundur

CSS dosyaları için:

• Satır içi kritik CSS: Bu, CSS problemlerini çözmenin anahtarıdır. Sadece ekran için gerekli olan CSS kodunu "çekiyor". "Ekranın ilk kısmı" (yukarıda) etiketle ในไฟล์ HTML โดยตรง
• Kalan CSS'yi engellemeden yükleyin: kalan CSS (aşağı kaydırılması gereken kısım için), ilk ekrana müdahale etmemesi için özel bir yük yöntemi kullanacağız.
• Medya Sorguları kullanın: tarayıcının yalnızca gerektiğinde indirmesi için özel ortamlı koşulları belirtin

Ve nereden başlamalı? En kolay olanı, Google PagesPeed Insights'a gidip URL'nizi önce koymaktır. Önce sonuçlara bakın. Bir dosya listesi olarak dava açacaktır. Hangisi "sanık"

İllüstrasyonlar istemi: Infographic, normal yükleri (normal), eşzamanlı ve ertelemeyi, her bir zaman türünün web sayfasıyla (zaman çizelgesi) nasıl çalıştığını gösteren karşılaştırır.

Eskiden başarılı olan gerçek şeyden örnekler

Görüntüyü net bir şekilde görmek için bu sorunla karşılaşan e-ticaret web sitesinin davasını kaldırmak istiyorum. Web siteleri , özellikle 38 (kırmızı) Shopify PagePeed puanında çok yavaş indirin ve bir render engelleme kaynakları var. Birçok müşteri ürün resmi bitmeden web sitesinden çıkmıştır.

Misyon: Ekip, denetlemeye gitti ve ana sorunun çok sayıda üçüncü taraf uygulamadan geldiğini buldu. Her biri kendi JavaScript ve CSS dosyalarını kullanır ve bu da uzun süre "bekleme kuyruğu" ile sonuçlanır.

Çözüm:

1. Gereksiz uygulamaları kontrol edin ve silin: Nadiren kullanılan veya üst üste binen işlevleri kaldırarak başlatın.
2. DeFer kullanın : Kalan uygulamaların komut dosyası ve tema komut dosyası eklenir . Varsayılan performansı engellememek için
3. Kritik CSS oluşturun ve satır içi CSS: Ekip, doğrudan HTML'ye yerleştirilen başlık, menü ve kahraman afiş için gerekli stili çekmek için kritik CSS aracını kullanır.
4. Kalan CSS Lazy-yük: Ana CSS dosyası görüntülenen web sayfası sonra indirilecek şekilde ayarlanır.

Bulgular: Pagespeed Insights puanlarını ayarladıktan sadece bir hafta sonra 38'den 89'a (sarı, neredeyse yeşil) acele ederek. LCP değeri 2,5 saniyeden daha iyidir. En önemli şey, sınır oranının% 18 düşmesi ve dönüşüm oranı% 1.2 artmasıdır. hizmetimizin ana hedeflerinden biri olan gerçekten web sitesine "hızı geri yüklemenin" somut sonucudur .

İllüstrasyonlar istemi: E-ticaret web sitesinden önce, örneğin sol taraf yavaş yüklenen bir web sitesidir. Eleman iyi değil. Sağ taraf, hızlı bir şekilde yüklenen aynı web sitesidir, artan dönüşüm oranı sayılarıyla güzel sonuçlar göstermiştir.

Takip etmek istiyorsanız, ne yapmalı? (Hemen kullanılabilir)

Bu sorunu yönetmeye hazır, değil mi? Bu adımı takip edebilir:

Adım 1: Karakteri bulun.

• Google PagePeed Insights'a git
• Web sitenizin URL'sini koyun ve "Analiz" tuşuna basın.
• "Fırsatlar" bölümüne bakmak için aşağı kaydırın ve "Oluşturma Engelleyen Kaynakları Ortadan Kaldır"
• Sorun olan .js ve .css dosyalarının listesini görmek için tıklayın.

Adım 2: JavaScript dosyalarını yönetin (daha kolay yapılır)

• her .js bu dosyayı web sitenizin HTML'sinde kullanan kodu bulmanıza izin verin.
• Şöyle görünecek:
• Etikete ertelemenize izin verin :
• Bunu PagePeed'deki her senaryo ile yapın (acilen çalışmak için gerçekten gerekli olan senaryo hariç. Çok az olan)

Adım 3: CSS dosyalarını yönetin (biraz daha karmaşık)

İlke, CSS'yi 2 bölüme ayıracağız: "kritik" ve "kritik olmayan" "

1. Kritik CSS oluşturun: gibi çevrimiçi araçları kullanın . URL'nizi ekleyin. Bir CSS kodu oluşturacaktır.
2. Kritik CSS'yi kafaya koyun: Önceki adımdan elde edilen kodu kopyalayın. Bölümün içine koy Web sitenizin etiketine koyarak
3. Orijinal CSS dosyasının engellememesine neden olmak: Bir etiket bulun Orijinal CSS dosyanızın ve daha sonra indirilecek tarayıcıyı aldatmak için bu türden ayarlayın
   
   Bu teknik tarayıcıya "bu baskı için stildir. (İndirmeye acele etmeye gerek yok)" diyecektir, ancak yük tamamlandığında (yük), daha önce olduğu gibi tüm cihazlara (tüm cihazlara) geri dönün. Daha fazlasını anlamak için Google Web.dev'den derinlemesine tavsiyelerde okuyun

Dikkat: Tüm değişiklikler, gerçekten kullanılmadan önce deneysel versiyonda (sahneleme) test edilmelidir. Web'i korumak için

İllüstrasyonlar istemi: Google PagesPeed Insights kullanma işlemini gösteren ekran, "ELMINATE RENTRIED Engelleme Kaynakları" nı ve sorun olan dairesel bir daireye işaret ediyor.

İnsanların merak ettiği sorular ve temizlenen cevaplar

Defer ve Async Nasıl Kullanılır ? Hangisini seçmelisiniz? C: Her ikisi de tarayıcının komut dosyasını indirmek için durmamasını sağlar. Ama "iş emri" nde farklı. DeFer , web sayfasının önce bitirmesini ve ardından çalışmasını bekleyecektir. (Ve çoğu komut dosyası için güvenli ve uygun olan, sırasıyla kodla yazılacaktır). Async, yük biter bitmez çalışacaktır. Sırayla ilgilenmiyor ve Google Analytics gibi kimseyle meşgul olmayan bağımsız komut dosyaları için uygun bir şey beklemiyor. Emin değilseniz, önce DeFer'ı S2: Kırılacak mı? Web sitesi kırılacak mı? C: Bir şans var! Özellikle erteleme veya async ve birlikte çalışması gereken komut dosyası (b komut dosyası b komut dosyası önce çalıştırılmalıdır) kullanılması bazı web işlevlerinin bozulmasına neden olabilir . Web sitesi geliştirme uzmanları için kendinden emin veya karmaşık bir kod değilse, ilgilenmeye yardımcı olmak daha iyidir : Bazı dosyalar neden düzeltilemiyor? Özellikle senaryo dışarıdan mı? A: Doğru. Facebook Pixel, Google Tag Manager veya Live Chat gibi üçüncü taraftaki komut dosyaları, menşe dosyasını düzenlemeye gidemeyiz. En iyi yol, bu komut dosyasını kullanmanın gerekip gerekmediğini veya en az etki ile indirmenin gerekip gerekmediğini düşünmektir.

S4 C: Bu gerekli değil. Asıl amaç 100 sayısı değil, ancak "kullanıcının web sitesinin hızlı olduğunu düşünüyor" ve çekirdek web hayati değerleri "iyi" kriterlerde (yeşil). 100 puan kovalamacasının bazı işlevlerle gereksiz yere değiştirilmesi gerekebilir. Kullanıcıları en iyi deneyimi elde etmek için geliştirmeye odaklanmak yeterlidir. SEO, birçok faktöre bağlı olarak Google'ın ilk sayfasına bağlıdır Sadece hız değil

İllüstrasyonlar istemi: erteleme, async, kırık kod ve 100 puanı temsil eden küçük bir simge ile çevrili büyük soru işareti simgesi.

Anlaması kolay olmak için özet + yapmaya çalışmak istiyorum

Tekrar kalbin özeti. "Oluşturma Kaynakları" sorunu, tarayıcının web sayfasını yavaşça göstermesine izin verdiği şekilde gereksiz CSSCIPT dosyalarının olmasıdır. Hem kullanıcı deneyimini, SEO sıralamasını hem de son olarak satışları etkilemek, erteleyerek ve kullanıcıların web'in ilk bölümünü mümkün olan en kısa sürede görmeleri için "satır içi kritik CSS" tekniğini kullanarak "yeni öncelikler" dir.

Web sitesi hızı iyileştirmeleri sadece teknik konular değil, aynı zamanda kullanıcılarınızın değerli zamanı için "saygı gösteriyor". Web'i daha hızlı hale getirdiğinizde iyi bir ilk izlenim yaratıyorsunuz. Ve müşterileri işinize daha kolay girmeleri için hoş geldiniz.

Şimdi! Bekleme. Google PagePeed Insights'ı test etmek için URL'nizi almaya çalışın ve bir adım önerdiğimiz adımları düzeltmeye başlayın. Bugün sadece küçük bir ayarlamanın iş sonuçlarınızı yarın inanılmaz bir şekilde değiştirebileceğinden emin değilim!

Çok karmaşık hissediyorsanız veya web sitenize "teşhis ve cerrahi" yardımcı olacak uzmanlar istiyorsanız, hızlı bir şekilde geri gelin, tekrar hıza takın. Vision X Brain ekibine ücretsiz danışın! Sizin için para aracı olmak için yavaş olan web sitesini değiştirmeye hazırız.

İllüstrasyonlar istemi: Güçlü Grafikler Roketler, Yeşil Pagespeed puanını çağrıya çağrı ile gösteren bilgisayar ekranından yükseliyor "Hızınızı artırın!"

‍