Ekranın üst kısmındaki içerikte oluşturma engelleyen JavaScript ve CSS'yi kaldırın

Bir Drupal 7 sitesi inşa ediyorum. Bunlar kullandığım modüllerden bazıları: Uyarlama düzeni (tema), Görünümler ve İçerik Panelleri, Paneller, Mini paneller, Her yerde Paneller, Sayfa yöneticisi, Menüler için süper balık, Addthis, Seçilmiş (açılan).

Site performansımı geliştirmek ve CSS ve JS dosyaları ile başa çıkmak için Advagg modülünü kullanıyorum .

Google’ın Pagespeed testini çalıştırırken, "Düzeltmeli" olarak aşağıdaki hatayı alıyorum:

Ekranın üst kısmındaki
içerikte render engelleyen JavaScript ve CSS'yi kaldırın Sayfanızda oluşturmayı engelleyen 6 tane komut dosyası ve 8 tane CSS kaynağı var. Bu, sayfanızı oluşturmada gecikmeye neden olur.
Aşağıdaki kaynakların yüklenmesini beklemeden sayfanızdaki üst kısımdaki içeriklerden hiçbiri oluşturulamadı. Engelleme kaynaklarını ertelemeyi veya zaman uyumsuz olarak yüklemeyi deneyin veya bu kaynakların kritik bölümlerini doğrudan HTML'de satır içi yapın.

Google’ın sağladığı bilgi şudur:

• İşleme engelleyen JavaScript’i kaldırın
• CSS Yayınını Optimize Etme

Advagg modülünün veya Drupal çekirdeğinin ayarlarını değiştirebilmemin ve bu sorunu çözebilmemin bir yolu var mı?

Bu hedefe ulaşmak için başka bir yol var mı?

Güncelleme - mikeytown2 cevabına göre değişiklikler yaptıktan sonra Google’ın Pagespeed testinde şu mesajı aldım:

Ekranın üst kısmındaki içerikte oluşturma engelleyen JavaScript ve CSS'yi kaldırın
Sayfanızda oluşturmayı engelleyen 6 tane komut dosyası ve 4 tane CSS kaynağı var. Bu, sayfanızı oluşturmada gecikmeye neden olur.
Aşağıdaki kaynakların yüklenmesini beklemeden sayfanızdaki üst kısımdaki içeriklerden hiçbiri oluşturulamadı. Engelleme kaynaklarını ertelemeyi veya zaman uyumsuz olarak yüklemeyi deneyin veya bu kaynakların kritik bölümlerini doğrudan HTML'de satır içi yapın.

README Bu kullanarak mevcut nasıl yapılacağına ilişkin bir rehber vardır AdvAgg ait 7.x-2.31 + sürümünü . Ayrıca bu yüksek wiki sayfasındaki wiki sayfasına bakınız . Çoğu site https://developers.google.com/speed/pagespeed/insights/ adresinde mükemmel bir 100/100 puan alabilir . Aşağıdaki yeni AdvAgg kurulumları için nasıl ulaşacağınıza dair talimatlar.

Değişikliğin sitenizi bozmadığından emin olmak için her bölümden sonra siteyi kontrol ettiğinizden emin olun. AdvAgg Modifier altındaki değişiklikler genellikle en sorunludur ancak en büyük gelişmeleri sunarlar.

Git admin/config/development/performance/advagg

• "Önerilen (optimize edilmiş) ayarları kullan" seçeneğini seçin

Etkinleştirilmemişse AdvAgg Compress Javascript'i yükleyin ve admin/config/development/performance/advagg/js-compress

• Varsa JSMin'i seçin; aksi halde JSMin + 'ı seçin
• Her şeyi şeritle'yi seçin (en küçük dosyalar)
• Bu dosyaları işlemek için toplu sıkıştır bağlantısını tıklayın.

Etkin değilse, AdvAgg Async Yazı Tipi Yükleyicisini yükleyin ve admin/config/development/performance/advagg/font

• Topluluğa dahil olan yerel dosyayı seçin (sürüm: XXX). Bu seçenek mevcut değilse, nasıl kurulacağı ile ilgili seçeneklerin hemen altındaki talimatları izleyin.
• "LocalStorage kullan, böylece stilsiz metnin flaşı (FOUT) sadece bir kere olur" seçeneğini işaretleyin.
• "Çerez ayarlayın, böylece stilsiz metnin flaşı (FOUT) sadece bir kez gerçekleşsin" seçeneğini işaretleyin.

Etkinleştirilmemişse AdvAgg Bundler'ı yükleyin ve admin/config/development/performance/advagg/bundler

HTTP / 2.0 Ayarları

• "Sayfa Başına CSS Paketlerinin Hedef Sayısı" altında 25
• "Sayfa Başına JS Paketlerinin Hedef Sayısı" altında 25
• "Gruplandırma mantığı" altında "Dosya boyutu" nu seçin

HTTP / 1.1 Ayarları (varsayılan)

• "Sayfa Başına CSS Paketlerinin Hedef Sayısı" altında 2
• "Sayfa Başına JS Paketlerinin Hedef Sayısı" altında 5
• "Gruplandırma mantığı" altında "Dosya boyutu" nu seçin

25 paket vs 2 ve 5 tarayıcı önbelleklemesi ile ilgili. Daha fazla dosya, tarayıcısının önbelleğinde birleşik birleşme şansına eşittir, ancak daha fazla dosya daha fazla bağlantı kurulup HTTP 1.1'de açıldığı anlamına gelir. Bu numara herhangi bir yeni bağlantı için beklemediğinden, CSS için 2 kullanın; Çoğu tarayıcıda eşzamanlı bağlantı sınırı 6 olduğu için JS 5'tir. Paketler için bu sayı birçok testten sonra seçildi. HTTP 2.0'da bir akış bağlantısı var ve çoklu CSS ve JS dosyalarının cezası neredeyse yok; bu nedenle tarayıcı önbelleği için en iyi duruma getirme en iyi seçimdir; Bu nedenle, HTTP / 2.0 sunarken CSS ve JS için 25 kullanılmalıdır.

Etkinleştirilmemişse AdvAgg Relocate uygulamasını yükleyin ve admin/config/development/performance/advagg/relocate

• "Önerilen (optimize edilmiş) ayarları kullan" seçeneğini seçin

Etkinleştirilmemişse AdvAgg Modifier'i yükleyin ve admin/config/development/performance/advagg/mod

• "Önerilen (optimize edilmiş) ayarları kullan" seçeneğini seçin

Https://www.sitelocity.com/critical-path-css-generator adresine gidin ve kritik css için gereken sayıda açılış sayfasını girin; ilk 10 genellikle iyi bir başlangıçtır. Google Analytics’iniz varsa, bu size en iyi açılış sayfalarınızı nasıl bulacağınızı gösterir : https://developers.google.com/analytics/devguides/reporting/core/v3/common-queries#top-landing-pages veya Piwik https //piwik.org/faq/how-to/faq_160/ . Hangi sayfadan başlayacağınızı bilmiyorsanız, sitenizin ana sayfasını yapın. Bunu bize css üretmek için de yapabilirsiniz https://chrome.google.com/webstore/detail/critical-style-snapshot/gkoeffcejdhhojognlonafnijfkcepob?hl=tr

Aşağıdaki örnek dosya isimleri ve yollar "bootstrap" teması içindir; hepsi ile başlar sites/all/themes/bootstrap/critical-css/; temanızda critical-css/dizini oluşturun . Bir sonraki dizin kullanıcıya dayanmaktadır; anonymous/, all/veya authenticated/kullanılabilir.

Bir sonraki dizin urls/veya olabilir type/. Bakıyor urls/; front, front page için özel bir durumdur, diğer tüm yollar current_path () .cssişlevini dizine ve sonuna eklenmiş dosya olarak kullanır; Bkz https://api.drupal.org/api/drupal/includes%21path.inc/function/current_path/7.x

Buna bakmak, type/düğüm tipleri için özel bir durumdur. Makine adını kullanın ve .csssonuna ekleyin . Bu tipteki herhangi bir düğüm daha sonra bu kritik css dosyasına uygulanır ve sıralanır. Aşağıda bunun nasıl çalıştığını gösteren bazı örnekler verilmiştir.

"ön" sayfa için geçerli örnek dosya konumları: sites/all/themes/bootstrap/critical-css/anonymous/urls/front.css

"düğüm / 1" current_path () sayfası için geçerli örnek dosya konumları: sites/all/themes/bootstrap/critical-css/anonymous/urls/node/1.css

"page" düğüm tipi için geçerli örnek dosya konumları: sites/all/themes/bootstrap/critical-css/anonymous/type/page.css

Bu css dosyalarını oluşturmanın bir tür otomatik yolu istiyorsanız, fourkitchens'in nasıl kurulacağı konusunda harika bir makalesi var: https://fourword.fourkitchens.com/article/use-grunt-and-advagg-inline-critical-css -drupal-7-tema

Önceden oluşturulmuş drupal modülleri ile asla gerçekten yüksek puanlar alamayacaksınız, bunu başarmanın tek yolu, google hız aracı tarafından yapılan önerilere her birinin bağımsız olarak cevap vermesi ve dikkatlice analiz edilmesidir.

Çok aktif bir haber sitesinde 95'e ulaşmak için yaptığım bazı şeyler , bunu yazdığımda, nytimes'ten daha iyi puan aldı (Şimdi değil):

• [komut dosyalarını engelleme] Sharethis, facebook widget'ları, google plus vb. üçüncü taraf komut dosyalarının yalnızca sayfa tamamen oluşturulduktan sonra çalıştırılmasını geciktirir. Bu, bu komut dosyalarını yakalamak ve daha sonra yürütmek üzere sıraya koymak için html.tpl.php dosyasının çıktısına yapılan bazı basit dize değişikliklerini gerektiriyordu.
• [komut dosyalarını engelleme] html.tpl.php (json_encode ile) $ scripts değişkenini, ilk sayfa yüklendikten sonra çalıştırılmak üzere sıraya koymak için bir javascript değişkeninde saklayın. Bu doğal değil, ama gerekli. Tarayıcıya özgü bazı sorunların çözülmesi gerekiyordu.
• [css engelleme] Keith Clark'ın tekniğine benzer bir şey uyguladı , ancak rel = "prefetch" ile. Bu, FOUC'u çözme ihtiyacını ortaya koymaktadır .
• [Minification and sıkıştırma] Sıkıştırma ve küçültmeyi, drupal yüklemeyi yönetilemez bir karmaşaya dönüştürmeden, bu kuralları aşmak için imagemagic, yui-kompresör, pngoptim ve daha pek çok şey kullanabileceğim bir dağıtım sunucusunda dışa aktarın.