Google Pagespeed Insight: "Aşağıdaki CSS Teslimatını Optimize Edin". Nasıl?

Question

WordPress web sitemi Google Page Speed ​​Insight'da test ettim ve 95/100 puan aldım.

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" /> 

Artık o altındaki tüm javascript kodları ile birlikte altbilgi oturuyor: Ben 1 css dosyasının "CSS Yayınlamayı Optimize" gerektiğini öne sürdü. Baş etiketi ile aynı sonuçlar arasında geri taşıdım. Css dosyasının css dağıtımını nasıl optimize edebilirim?

Answer 1

Büyük bir CSS dosyası olması durumunda, ekranın üst kısmındaki içeriği oluşturmak ve ekranın üst kısmındaki içeriği kullanmaya devam edene kadar kalan stilleri yüklemek için gerekli CSS'yi tanımlamanız ve satır içi uygulamanız gerekir. https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

Onun iyi aslında birlikte tüm css koymak değil:

Alındığı. Önce işleme için gerekli olan stili çağırmalı ve daha sonra bu büyük stil sayfanızı çağırmalısınız.

CSS delivery optimization: How to defer css loading?

Umut i

Answer 2

95/100 büyük skor :) halleder: Eğer stil erteleme nasıl bilmek istiyorsanız

Ve de bu nasıl. 100'e varan daha fazla işin, oraya gitme ile ilgili çabalara kıyasla azalan getirileri vereceği noktadasınız.

Ancak, 100/100 seviyesine yaklaşmakta ölü olarak ayarlanmışsanız, yukarıdaki katlanmış CSS'yi dosyadan kaldırmanız ve temanızda bir <style> bloğuna eklemeniz gerekir. Ardından, sayfanın geri kalanı yüklenene kadar CSS dosyasını yüklemeye devam edebilir ve artık engellenmez.

Yukarıdaki katlama CSS'nizi bulmaya başlamanız için bir JavaScript bookmarklet'i içeren WordPress Autoptimize eklentisi ile kat CSS'sinin üst kısmında işlenmekte olan .

Not: Bu komut dosyasını, doğrudan altbilgiye eklemek yerine wp_enqueue_style() işlevini kullanmalısınız. Komut dosyalarını ve stilleri düzgün şekilde nasıl ekleyeceğinizi görmek için web sitemde this article'a bakın.