Google Pagespeed'de "ekranın üst kısmındaki içerik" nedir?

Yakın zamana kadar, sitem (www.heatexchangers.ca) Google Sayfa Hızı'nda% 98 puan aldı. Web yazı tiplerinden sorgu dizesi gibi hiçbir şey yapamayacağım birkaç şey vardı. Yapabileceğim her şeyi temsil ettiği için bundan çok memnun kaldım.

Kısa süre önce Google, sayfa hızı puanını etkileyen başka bir şey ekledi ve şimdi yalnızca% 89 Sayfa Hızı elde ediyorum ve şu öneriyi alıyorum:

• Ekranın üst kısmındaki içerikte, oluşturmayı engelleyen harici JavaScript ve CSS'yi ortadan kaldırın.

Bunu düzeltme önerisi, tüm .css ve .js dosyalarımda trol yapmayı ve bazı kısımlarını ayırmayı ve html'ime satır içi eklemeyi içeriyor gibi görünüyor. Mümkün olduğunca çok JS ve CSS'yi HTML'den uzak tutmamız gerektiği izlenimine kapıldığım için bu bana biraz kafa karışıklığına neden oluyor.

"Ekranın Üstü" içeriği tam olarak nedir? Yazı tipi, arka plan rengi gibi bir kaç stil ise; daha sonra satır içi dahil etmek için çok büyük bir anlaşma olmayabileceğini görebiliyorum. Bunun tam olarak ne olduğuna dair bir liste bulamadım.

Bunun nedeni, Google'ın son zamanlarda sayfa hızı aracını giderek artan mobil web'i daha iyi yansıtacak şekilde değiştirmesidir. Mobil veri ağları, kablolu veya kablosuz ağlardan farklı performans özelliklerine sahiptir, bu nedenle bunları optimize etmek için farklı şeyler yapmanız gerekir.

Ekranın üst kısmı (ATF) sadece ilk ekranın değeridir - görmek için kaydırmanız gerekmeyen her şey. Açıkçası, bu, cihaza ve yönüne bağlı olarak değişir, bu nedenle genelleme yapmanız ve uygulanabilir bazı ortak seçenekler bulmanız gerekebilir, belki biri akıllı telefonları, biri tabletleri ve biri de daha büyük masaüstü bilgisayarları hedefliyor.

Hangi CSS'den bahsettiklerine gelince, gerçekten ATF'de görüntülenen içeriği tam olarak şekillendirmek için gereken tüm CSS'yi hedefliyorlar. ATF içeriğinizin yükleme süresini belirlemek için, son sürümün bir ekran görüntüsünü alacaklar ve bunu yüklenirken sayfayla görsel olarak karşılaştıracaklar ve yeterince benzer olduğunda, ATF içeriğinin yüklendi.

Bu, Google'dan bu konuyla ilgili bir video sunumudur:

http://www.youtube.com/watch?v=YV1nKLWoARQ

Vurgu, kullanıcılara ilk saniyede bir şeyler yaptırmaktır. ATF içeriği için CSS'yi doğrudan HTML'ye koymanın ardındaki mantık, mobil veri performansı üzerine yaptıkları araştırmayı yansıtır, CSS orada değilse, ilk saniyede olacak kadar yakında yüklenmeyeceğini gösterir.

Bunların bir kısmını otomatikleştirebilecek araçlara bağlantılar da sağlarlar. Onları ve YMMV'yi denemedim.

google sayfa analizleri, ekranın üst kısmındaki içeriğe atıfta bulunan css'lerin% kaçının çok geç yüklendiğini ve sayfanın daha önce oluşturulmuş olabileceğini açıkça söyleyecektir. Yeşil bir sonuç elde etmek için css'in parçalarını taşıyabilirsiniz. bunu sizin için yapabilirim: goo.gl/GsRxNc

Google'dan 'ekranın üst kısmını' açıklayan bir bağlantı https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

Ekranın üst kısmındaki içerik, web sayfasının, sayfa ilk yüklendiğinde bir tarayıcı penceresinde görünen kısmıdır. Google, ana CSS dosyanızdan çıkarılan ve head etiketine enjekte edilen satır içi CSS'yi görmek istiyor, bu da ilk gördüğünüz her şeyin önce yüklenmesine izin veriyor.

kaynak - https://www.c2experience.com/blog/passing-googles-abovethefold-css#:~:text=Above%2Dthe%2Dfold%20content%20is,first%20to%20be%20loaded%20first .

Analitik veya izleme kodu gibi oluşturmayı engelleyen j'lere atıfta bulunurlar ve bu nedenle, bu "beni her şeyden önce yükle" komut dosyalarının altbilgiye yerleştirilmesini önerirler, çünkü kullanıcı siteyi ekrana getirdiğinde yükleneceklerdir.