Sitemin performansını artırmak ve geliştirmek için Google PageSpeed ​​öngörülerini kullanıyorum ve şimdiye kadar son derece başarılı olduğu kanıtlandı. Komut dosyaları erteleme gibi şeyler güzel çalıştı, çünkü .ready()sayfa tamamen yüklenene kadar komut dosyalarını ertelemek için jQuery'nin şirket içi bir sürümüne sahip olduğumdan, tek yapmam gereken tek şey bu işlevi satır içi yapmak ve tam komut dosyalarını sayfanın sonuna taşımaktı. Harika çalıştı.

Ama şimdi kendimi kontrol listesinde kalan bir sarı noktaya bakarken görüyorum: "Ekranın üst kısmındaki içerikte oluşturmayı engelleyen CSS'yi ortadan kaldır".

CSS'imin ayarlanma şekli _.css, genel olarak sayfa yapısına uygulanan veya site genelinde bir veya iki yerde birden fazla kullanılan stilleri içeren bir global dosyaya sahip olmaktır. Çoğu sayfanın söz konusu sayfaya özgü stiller içeren ilişkili bir CSS dosyası (örneğin, party.phpvardır party.css) vardır . Tüm CSS dosyaları dosyalara /t=FILEMTIMEeklendikçe (ve daha sonra bunları .htaccess ile kaldırdığımda) süresiz olarak önbelleğe alınır .

Her neyse, Google ekranın üst kısmındaki içerik için gereken satır içi kritik stilleri önermektedir. Sorun ... iyi, bu ekran görüntüsüne bir göz atın: http://prntscr.com/1qt49e

Gördüğünüz gibi ... TÜM içerik ekranın üst kısmında! İnsanlar, özellikle çok sayıda sayfa yüklemeyi içeren bir oyunda kaydırma yapmaktan nefret ederler. Bu yüzden siteyi tek bir ekrana sığacak şekilde tasarladım (yeterince iyi bir çözünürlük varsa). Bu demektir ki ... TÜM stiller ekranın üst kısmındaki içerik için geçerlidir! Yani ... bir çözümü var mı? Yoksa tam olarak mükemmele yakın bir skorda o sarı işaretle mi sıkıştım?

İlgili bir soru daha önce sorulmuştur: Google Pagespeed'de "ekranın üst kısmındaki içerik" nedir?

Öncelikle bunun tamamen ' mobil sayfalar ' ile ilgili olduğunu fark etmelisiniz .
Sorunuzu ve ekran görüntünüzü doğru yorumladığımda, bu siteniz için değil!

Aksine - Google tarafından yönergelerinde tavsiye edilen bazı şeyleri yapmak, işler 'normal' web siteleri için daha iyi hale gelecektir.
Google'dan gelen her şey, yalnızca Google'dan geldiği için "kutsal kâse" değildir. HTML işaretlemelerine bir göz atarsanız, kendileri iyi bir rol modeli değildir.

Size verebileceğim en iyi tavsiye:

• CSS'nizdeki değiştirilen öğelerin genişliğini ve yüksekliğini ayarlayın, böylece tarayıcı öğeleri düzenleyebilir ve değiştirilen içeriği beklemek zorunda kalmaz!

Ayrıca neden yalnızca bir tane yerine farklı CSS dosyaları kullanıyorsunuz?
Ek istek, az miktarda veri hacminden daha kötüdür. Ve ilk istekten sonra CSS dosyası yine de önbelleğe alınır.

Her zaman ilgilenilmesi gereken şeyler şunlardır:

• istek sayısını mümkün olduğunca azaltın
• toplam sayfa ağırlığınızı mümkün olduğunca düşük tutun

Ve Google'ın PageSpeed ​​Insights aracının% 100'ünü nasıl alacağınız konusunda beyninizi yapmayın ...! ;-)

Ek 1: İşte Google'ın bize gösterdiği sayfa, CSS Dağıtımını Optimize Etme için önerdikleri sayfa .

Daha önce de belirtildiği gibi, bunun ne gerçekçi ne de "normal" bir web sitesi için mantıklı olduğunu düşünmüyorum! Çünkü çoğunlukla duyarlı bir web tasarımınız olduğunda, medya sorgularını ve diğer düzen stillerini kullandığınızdan emin olabilirsiniz. Bu nedenle, önce CSS'nizi yüklemeyecekseniz ve engelleme tarzında bir FOUT ( Stilsiz Metin Parlaması ) alırsınız . Gerçekten bu sayfa oluşturmak için en az birkaç milisaniye daha "iyi" olduğuna inanmıyorum!

Imho Google yeni bir "yutturmaca" başlıyor (burada Stackoverflow ilgili tüm soru bir göz attığımda) ...!

Google Sayfa Hızı'nda 99/100 değerini nasıl aldım (mobil cihazlar için)

TLDR: Tüm css betiğinizi sıkıştırın ve <style></style>etiketlerinizin arasına yerleştirin .

Yaklaşık bir haftadır bu zor 100/100 skorunu takip ediyorum. Sizin gibi, kalan son öğe "ekranın üst kısmındaki içerik için oluşturma engelleme css" i ortadan kaldırıyordu.

Şüphesiz kolay bir çözüm var ?? Hayır! Filament grubunun loadCSS çözümünü denedim . Benim sevdiğim için çok fazla .js

asyncCss (js gibi) için öznitelikler ne olacak ? Onlar yok.

Vazgeçmeye hazırdım. Sonra üzerime geldi. Eğer betiği bağlamak oluşturmayı engelliyorsa, bunun yerine tüm css'mi kafasına yerleştirdim. Bu şekilde engellenecek bir şey yoktu.

Stil etiketime 1263 satır CSS gömmek kesinlikle YANLIŞ görünüyordu. Ama bir koşuşturma verdim. Ben ilk kullanarak (ve önekini) kullanarak:

postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -u cssnano --cssnano.autoprefixer false *.css -d min/ NPM postcss paketine bakın .

Şimdi sadece bir UZUN uzaysız css hattı oldu. <style>your;great-wall-of-china-long;css;here</style>Ana sayfamdaki etiketlerdeki css'i hazırladım. Sonra sayfa hızı bilgileriyle yeniden analiz ettim.

Mobil cihazlarda 90/100 - 99/100 arasında gittim !!!

Bu, içimdeki her şeye (ve muhtemelen sen) karşı çıkıyor. Ama sorunu çözdü. Şimdilik sadece ana sayfamda kullanıyorum ve bir PHP içerisinden programlı olarak sıkıştırılmış css dahil ediyorum.

CSS'nizin uzunluğuna bağlı olarak YMMV (kilometreniz değişebilir). Google sizi ekranın üst kısmındaki içeriğin çok üzerinde gösterebilir. Ama varsaymayın; Ölçek!

notlar

1. Bunu şimdilik sadece ana sayfamda yapıyorum, böylece insanlar en önemli sayfamda HIZLI bir görüntü elde ediyorlar.

2. CSS'niz önbelleğe alınmayacak. Yine de çok endişeli değilim. Onlar benim sitedeki başka bir sayfaya isabet ikinci, .css olacak (Not 1'e bakınız) önbelleğe.

Yardımcı olabilecek birkaç ipucu:

• Bu makaleye dün CSS optimizasyonunda rastladım: CSS profili ... optimizasyonu
  CSS ve hangi CSS'nin en çok performans kaybına neden olduğu hakkında birçok yararlı bilgi.

• JQueryUK üzerinde Googe Chrome (Canary) Dev Tools'daki "gizli sırlar" üzerine aşağıdaki sunumu gördüm: DevTools Bunu yapabilir . İlk Boyama Süresi , boyamalar ve maliyetli CSS bölümlerine göz atın .

• Eğer böyle bir yükleyici kullanıyorsanız Ayrıca requireJS aradığınız CSS yükleyici eklentileri bir göz olabilir gerektirir-CSS kullanır CSSO - ayrıca örneğin yapısal optimizasyonu yaptığı bir Optimizer. özdeş özelliklere sahip blokları birleştirme. Birkaç kez kullandım ve durumdan duruma çok fazla CSS kaydedebilir.

Soru dışı: Yüklediğiniz tüm küçük simgeler için bir hareketli grafik oluştururken @Enzino 'yu ikinci olarak kullanıyorum. Dosya boyutları o kadar küçük ki, her simge için bir sunucu gidiş dönüşü garanti etmiyor. Ayrıca tarayıcıda yapabileceğiniz eşzamanlı http isteklerinin toplam sayısını unutmayın. Bu nedenle, çok sayıda küçük simge için talepler de "oluşturma engelleme" dir. Boş bir sayfa sizinkine kıyasla, örneğin duckduckgo'nun nasıl yüklendiğini seviyorum .

Lütfen aşağıdaki sayfaya bir göz atın https://varvy.com/pagespeed/render-blocking-css.html . Bu "CSS Engelleme Render" kurtulmak için bana yardımcı oldu . " Render Engelleme CSS " kaldırmak için aşağıdaki kodu kullandım . Şimdi google sayfa hızı içgörü css render engelleme ile ilgili sorun almıyorum.

<!-- loadCSS -->
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/cssrelpreload.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/loadCSS.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/onloadCSS.js"></script>
<script>
      /*!
      loadCSS: load a CSS file asynchronously.
      */
      function loadCSS(href){
        var ss = window.document.createElement('link'),
            ref = window.document.getElementsByTagName('head')[0];

        ss.rel = 'stylesheet';
        ss.href = href;

        // temporarily, set media to something non-matching to ensure it'll
        // fetch without blocking render
        ss.media = 'only x';

        ref.parentNode.insertBefore(ss, ref);

        setTimeout( function(){
          // set media back to `all` so that the stylesheet applies once it loads
          ss.media = 'all';
        },0);
      }
      loadCSS('styles.css');
    </script>
    <noscript>
      <!-- Let's not assume anything -->
      <link rel="stylesheet" href="styles.css">
    </noscript>

Ben de bu yeni sayfa hızı metriğiyle mücadele ettim.

% 100'e kadar puanımı geri almanın pratik bir yolunu bulmama rağmen, yararlı bulduğum birkaç şey var.

Tüm css'leri tek bir dosyada birleştirmek çok yardımcı oldu. Tüm sitelerim% 95 -% 98'e kadar.

Aklıma gelen tek şey, tatlı yüksek puanı almak için ilk sayfada tüm gerekli css (ki çoğu - görünüyor en azından sayfalarım için) satır içi oldu. Hız puanınıza yardımcı olsa da, bu muhtemelen sayfanızın yüklenmesini yavaşlatacaktır.

2019 için en uygun çözüm HTTP / 2 Server Push'tur .

Herhangi bir javascript çözümüne veya satır içi stile ihtiyacınız yoktur. Ancak, HTTP 2.0'ı (herhangi bir modern sunucu sürümü olacak) destekleyen bir sunucuya ihtiyacınız vardır, bu da sunucunuzun SSL çalıştırmasını gerektirir. Ancak Let's Encrypt ile SSL kullanmamak için hiçbir neden yok.

Sitem https://r.je/ hem mobil hem de masaüstü için 100/100 puan aldı.

Bu hataların nedeni, tarayıcının HTML'yi alması ve ardından sayfanın oluşturulmadan önce CSS'nin indirilmesini beklemesi gerektiğidir. HTTP2'yi kullanarak hem HTML'yi hem de CSS'yi aynı anda gönderebilirsiniz.

Link üstbilgisini ayarlayarak HTTP / 2 push'u kullanabilirsiniz.

Apache örneği (.htaccess):

Header add Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload"

NGINX için, başlığı sunucu yapılandırmasında konum etiketinize ekleyebilirsiniz:

location = / {
    add_header Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload";
}

Bu başlık seti ile tarayıcı, HTML ve CSS'yi aynı anda alır ve bu da CSS'nin oluşturmayı engellemesini durdurur.

CSS'nin yalnızca ilk istekte gönderilmesi için ince ayar yapmak isteyeceksiniz, ancak Bağlantı başlığı, "Oluşturma Engelleme Javascript ve CSS'sini Ortadan Kaldırma" için en eksiksiz ve en az hacky çözümdür

Ayrıntılı bir tartışma için, buradaki yazıma bir göz atın: HTTP / 2 Push kullanarak CSS Oluşturmayı Engelleme

Css dosyalarınızdan otomatik olarak satır içi stiller oluşturmak için bir paket kullanmayı düşünün. Laravel için Grunt Critical veya Critical css iyi bir seçimdir .

Merhaba jQuery için Sadece böyle kullanabilirsiniz

Yalnızca eşzamansız ve type = "text / javascript" kullanın