“Hilangkan render-blocking CSS dalam konten di atas-lipat”

153

Saya telah menggunakan wawasan Google PageSpeed ​​untuk mencoba dan meningkatkan kinerja situs saya, dan sejauh ini terbukti sangat sukses. Hal-hal seperti penangguhan skrip berfungsi dengan baik, karena saya sudah memiliki versi in-house dari jQuery .ready()untuk menunda skrip hingga halaman dimuat sepenuhnya, yang harus saya lakukan adalah menyesuaikan fungsi tertentu dan memindahkan skrip lengkap ke akhir halaman. Itu bekerja dengan baik.

Tapi sekarang saya mendapati diri saya melotot pada satu titik kuning yang tersisa pada daftar periksa: "Hilangkan render-render CSS dalam konten di atas-lipat".

Cara CSS saya diatur adalah memiliki satu _.cssfile global yang berisi gaya yang berlaku untuk struktur halaman secara umum, atau digunakan di lebih dari satu atau dua tempat di seluruh situs. Sebagian besar halaman kemudian memiliki file CSS terkait (misalnya, party.phpmemiliki party.css) yang berisi gaya khusus untuk halaman tertentu. Semua file CSS di-cache tanpa batas, karena saya menambahkan /t=FILEMTIMEnama file (dan kemudian menghapusnya dengan .htaccess) untuk menjamin bahwa file diperbarui ketika mereka diubah.

Jadi, bagaimanapun, Google merekomendasikan gaya inline kritis yang diperlukan untuk konten di atas-lipat. Masalahnya adalah ... well, lihat screenshot ini: http://prntscr.com/1qt49e

Seperti yang Anda lihat ... SEMUA konten di atas-the-fold! Orang-orang benci bergulir, terutama pada gim yang melibatkan memuat banyak halaman. Jadi saya mendesain situs agar sesuai pada satu layar (dengan asumsi resolusi yang cukup baik). Jadi itu berarti ... SEMUA gaya berlaku untuk konten di atas-lipat! Jadi ... adakah solusi? Atau apakah saya terjebak dengan tanda kuning pada skor yang nyaris sempurna?

Niet the Dark Absol
sumber
Sungguh ironis bahwa konten di atas layar untuk tangkapan layar butuh waktu lama untuk memuat :) Bahkan, bagi saya, tangkapan layar tidak pernah dimuat pada akhirnya
Anupam
@Anupam Mungkin terhapus. Prntscr tidak sepenuhnya dimaksudkan untuk keabadian, dan saya tidak berharap pertanyaan ini menjadi sangat populer.
Niet the Dark Absol
ya, semua baik, hanya komentar ringan
Anupam

Jawaban:

182

Pertanyaan terkait telah diajukan sebelumnya: Apa itu "konten terlipat" di Google Pagespeed?

Pertama, Anda harus memperhatikan bahwa ini semua tentang ' halaman seluler '.
Jadi ketika saya menerjemahkan pertanyaan dan tangkapan layar Anda dengan benar, maka ini bukan untuk situs Anda!

Sebaliknya - melakukan beberapa hal yang disarankan oleh Google dalam pedoman mereka akan membuat segalanya lebih buruk daripada lebih baik untuk situs web 'normal'.
Dan tidak semua yang berasal dari Google adalah "cawan suci" hanya karena berasal dari Google. Dan mereka sendiri bukan panutan yang baik jika Anda melihat markup HTML mereka.

Saran terbaik yang bisa saya berikan adalah:

  • Tetapkan lebar dan tinggi pada elemen yang diganti di CSS Anda, sehingga browser dapat menata letak elemen dan tidak harus menunggu konten yang diganti!

Selain itu mengapa Anda menggunakan file CSS yang berbeda, bukan hanya satu?
Permintaan tambahan lebih buruk daripada jumlah kecil volume data. Dan setelah permintaan pertama file CSS di-cache.

Satu hal yang harus selalu dijaga adalah:

  • kurangi jumlah permintaan sebanyak mungkin
  • menjaga berat halaman keseluruhan Anda serendah mungkin

Dan jangan membingungkan otak Anda tentang cara mendapatkan 100% alat PageSpeed ​​Insights Google ...! ;-)

Tambahan 1: Ini adalah halaman di mana Google menunjukkan kepada kami, apa yang mereka rekomendasikan untuk Optimasi Pengiriman CSS .

Seperti yang dikatakan sebelumnya, saya tidak berpikir ini tidak realistis atau masuk akal untuk situs web "normal"! Karena terutama ketika Anda memiliki desain web responsif , paling pasti Anda menggunakan kueri media dan gaya tata letak lainnya. Jadi jika Anda tidak akan memuat CSS Anda terlebih dahulu dan dengan cara memblokir Anda akan mendapatkan FOUT ( Flash Of Unstyled Text ). Saya benar-benar tidak percaya bahwa ini "lebih baik" daripada setidaknya beberapa milidetik lagi untuk membuat halaman!

Saya Google sedang memulai "hype" baru (ketika saya melihat semua pertanyaan tentang hal itu di sini di Stackoverflow) ...!

Netsurfer
sumber
9
Jawaban yang bagus masalahnya adalah bahwa google tampaknya menghukum Anda jika Anda memiliki halaman yang lebih lambat. Karenanya mereka memaksa Anda untuk mematuhi ide-ide mereka baik itu hebat atau benar-benar bodoh. :(
Steve Horvath
10
@Netsurfer bukan hal apa pun yang berasal dari Google adalah "holy grail" LOL. Saya menggaruk-garuk kepala untuk mencapai 100, tetapi berhenti di 92 setelah membaca komentar ini.
kiranking
44
Anda harus lebih menekankan, fakta, bahwa Google tidak mematuhi saran mereka sendiri .
Tn. Smith
2
Permintaan tambahan akan menjadi lebih sedikit masalah dengan HTTP / 2 dan SPDY, dari Wikipedia , "Peningkatan kinerja tambahan dalam konsep pertama HTTP / 2 (yang merupakan salinan SPDY) berasal dari multiplexing permintaan dan tanggapan untuk menghindari head- masalah pemblokiran of-line di HTTP 1 (bahkan ketika pipelining HTTP digunakan), kompresi header, dan prioritisasi permintaan. "
RationalDev suka GoFundMonica
3
telah mencoba untuk mendapatkan halaman saya dari 72 ponsel dan 80 desktop tetapi memiliki masalah yang sama. Saya menolak untuk menempatkan css saya di tempat yang lebih rendah dan mungkin menurunkan pengalaman pengguna dengan menunjukkan FOUT!
publicknowledge
14

Bagaimana saya mendapat 99/100 di Google Page Speed ​​(untuk seluler)

TLDR: Kompres dan sematkan seluruh skrip css Anda di antara <style></style>tag Anda .


Saya telah mengejar skor 100/100 yang sulit dipahami selama sekitar satu minggu sekarang. Seperti Anda, item terakhir yang tersisa adalah menghilangkan "rss pemblokiran render untuk di atas konten lipatan."

Tentunya ada pemecahan yang mudah ?? Nggak. Saya mencoba solusi loadCSS grup Filament . Terlalu banyak .js untuk seleraku.

Bagaimana dengan async atribut untuk css (seperti js)? Mereka tidak ada.

Saya siap untuk menyerah. Kemudian saya sadar. Jika menautkan skrip memblokir render, bagaimana jika saya malah memasukkan seluruh css saya di kepala. Dengan begitu tidak ada yang menghalangi.

Tampaknya benar-benar SALAH untuk menanamkan 1263 baris CSS di tag gaya saya. Tapi saya membuatnya berputar. Saya mengompresnya (dan membuatnya awalan) pertama kali menggunakan:

postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -u cssnano --cssnano.autoprefixer false *.css -d min/ Lihat paket postingan NPM .

Sekarang hanya satu baris PANJANG css tanpa ruang. Saya memasukkan <style>your;great-wall-of-china-long;css;here</style>tag css di halaman rumah saya. Kemudian saya menganalisis kembali dengan wawasan kecepatan halaman.

Saya beralih dari 90/100 menjadi 99/100 di ponsel !!!

Ini bertentangan dengan semua yang ada dalam diri saya (dan mungkin Anda). Tapi itu mengatasi masalah. Saya hanya menggunakannya di halaman rumah saya untuk saat ini dan termasuk css terkompresi secara terprogram melalui PHP.

YMMV (jarak tempuh Anda dapat bervariasi) tergantung pada panjang css Anda. Google mungkin memberi Anda terlalu banyak di atas konten lipatan. Tapi jangan berasumsi; uji!

Catatan

  1. Saya hanya melakukan ini di halaman rumah saya untuk saat ini sehingga orang mendapatkan render CEPAT di halaman saya yang paling penting.

  2. Css Anda tidak akan di-cache. Saya tidak terlalu khawatir. Saat mereka menekan halaman lain di situs saya, .css akan di -cache (lihat Catatan 1).

elbowlobstercowstand
sumber
4
Terima kasih atas dedikasi dan penelitian Anda, namun saya pribadi tidak akan bermimpi melakukan hal itu: D
Niet the Dark Absol
2
Jadi apa gunanya, kecuali untuk mencoba mencapai skor yang tidak akan membantu apa-apa?
LarryBud
Rapi bahwa Anda mendapat skor lebih tinggi, tetapi sekarang setiap halaman di situs Anda akan memiliki bobot lebih. Meski begitu, temuan yang bagus.
EdwardM
@EdwardM Terima kasih! Lihat catatan saya 2 di pos. Begitu mereka mencapai halaman kedua, css di-cache, dan masalah berat hilang.
elbowlobstercowstand
1
@LarryBud Poin skor lebih tinggi? Lebih banyak uang untuk saya. Semakin tinggi situs web saya di Google, semakin besar kemungkinan seseorang mengkliknya dan menjadi pelanggan. Karena Google menggunakan kecepatan halaman untuk menentukan peringkat , saya memutuskan untuk meningkatkan skor saya.
elbowlobstercowstand
9

Beberapa tips yang dapat membantu:

  • Saya menemukan artikel ini dalam optimasi CSS kemarin: profiling CSS untuk ... optimasi
    Banyak info berguna tentang CSS dan apa yang menyebabkan CSS paling banyak menguras kinerja.

  • Saya melihat presentasi berikut di jQueryUK tentang "rahasia tersembunyi" di Googe Chrome (Canary) Dev Tools: DevTools Can do that . Lihatlah bagian Time to First Paint , mengecat ulang dan CSS mahal.

  • Juga, jika Anda menggunakan loader seperti requireJS, Anda dapat melihat salah satu plugin loader CSS, yang disebut membutuhkan-CSS , yang menggunakan CSSO - pengoptimal yang juga melakukan optimasi struktural, misalnya. menggabungkan blok dengan properti yang identik. Saya menggunakannya beberapa kali dan dapat menyimpan cukup banyak CSS dari kasus ke kasus.

Off the question: Saya kedua @Enzino dalam membuat sprite untuk semua ikon kecil yang Anda muat. Ukuran file sangat kecil sehingga tidak benar-benar menjamin server pulang pergi untuk setiap ikon. Juga perlu diingat jumlah total permintaan http bersamaan yang dapat dilakukan browser. Jadi permintaan untuk sejumlah besar ikon kecil juga "memblokir render". Meskipun halaman kosong dibandingkan dengan Anda, saya suka bagaimana duckduckgo memuat misalnya.

sering
sumber
Tampaknya duckduckgo juga tidak peduli dengan skor halaman mereka, periksa di sini
Chetabahana
6

Silakan lihat di halaman berikut https://varvy.com/pagespeed/render-blocking-css.html . Ini membantu saya untuk menyingkirkan "Render Blocking CSS" . Saya menggunakan kode berikut untuk menghapus " Render Blocking CSS ". Sekarang dalam wawasan kecepatan halaman google saya tidak mendapatkan masalah yang terkait dengan render memblokir css.

<!-- 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>
Amuk Saxena
sumber
1
Ketika saya menggunakan fungsi yang disebutkan itu mengurangi skor pageSpeed. Fungsi yang saya tulis adalah: jsfiddle.net/kvfzbxxo Bisakah Anda membantu saya?
arsho
Saya telah menerapkan fungsi yang sama pada url berikut dan silakan lihat kecepatannya di sini " whitecashback.in " Anda dapat melihat url sumber dan menemukan fungsi "loadCSS" di footer. Ini akan membantu Anda memahami bahwa bagaimana saya menerapkan kode. Kecepatan halaman akan meningkat saat css memuat setelah halaman.
Amuk Saxena
Saya telah menggunakan kode ini: jsfiddle.net/sbpa1hun . Sekarang CSS tidak dimuat di situs web.
arsho
Saya menyebutkan bahwa setelah menambahkan kode ini: jsfiddle.net/sbpa1hun yang sedang digunakan di situs web Anda, situs web saya kehilangan semua gaya. Ini meningkatkan kecepatan halaman tetapi CSS tidak berfungsi lagi! Bisakah Anda membantu saya? Saya mendapatkan sekitar 40 dalam kecepatan halaman. Tetapi menambahkan kode Anda, saya mendapatkan sekitar 70. Tapi CSS tidak bisa berfungsi.
arsho
1
Jika Anda mencoba melakukan ini di jsfiddle maka ini tidak akan berhasil, silakan coba kode ini di situs web Anda, jsfiddle akan memblokir pemuatan css untuk situs web eksternal. Karena Anda memuat css sumber eksternal menggunakan javascript. Jadi tolong coba lakukan ini di situs web Anda. Coba juga sertakan file jquery, mereka tidak ada dalam skrip Anda. Setelah memasukkan file js, ini dapat berfungsi. Harap perhatikan juga, situs https dapat berfungsi di jsfiddle. Anda mendapatkan kesalahan ini: "Diblokir memuat konten aktif campuran". Anda harus menyelesaikan ini terlebih dahulu.
Amuk Saxena
4

Saya juga telah berjuang dengan metrik kecepatan halaman baru ini.

Walaupun saya tidak menemukan cara praktis untuk mendapatkan kembali skor saya hingga% 100, ada beberapa hal yang menurut saya sangat membantu.

Menggabungkan semua css ke dalam satu file sangat membantu. Semua situs saya kembali ke% 95 -% 98.

Satu-satunya hal lain yang bisa saya pikirkan adalah memasukkan semua css yang diperlukan (yang tampaknya sebagian besar - setidaknya untuk halaman saya) di halaman pertama untuk mendapatkan skor tinggi yang manis. Meskipun mungkin membantu skor kecepatan Anda, ini mungkin akan membuat halaman Anda memuat lebih lambat.

Glipt
sumber
2
Majalah Smashing memiliki skor 100% di pengembang
Mo.
1

Solusi optimal 2019 untuk ini adalah HTTP / 2 Server Push .

Anda tidak memerlukan solusi javascript atau gaya inline hacky apa pun. Namun, Anda memerlukan server yang mendukung HTTP 2.0 (versi server modern mana pun), yang dengan sendirinya memerlukan server Anda untuk menjalankan SSL. Namun, dengan Let's Encrypt tidak ada alasan untuk tidak menggunakan SSL.

Situs saya https://r.je/ memiliki skor 100/100 untuk seluler dan desktop.

Alasan untuk kesalahan ini adalah bahwa browser mendapatkan HTML, kemudian harus menunggu CSS untuk diunduh sebelum halaman dapat dirender. Dengan menggunakan HTTP2 Anda dapat mengirim HTML dan CSS secara bersamaan.

Anda dapat menggunakan dorongan HTTP / 2 dengan mengatur taut Link.

Contoh Apache (.htaccess):

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

Untuk NGINX Anda dapat menambahkan header ke tag lokasi Anda di konfigurasi server:

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

Dengan set tajuk ini, browser menerima HTML dan CSS pada saat yang sama yang menghentikan CSS dari memblokir rendering.

Anda akan ingin mengubahnya sehingga CSS hanya dikirim pada permintaan pertama, tetapi tautan Tautan adalah solusi paling lengkap dan paling tidak hack untuk "Eliminate Render Blocking Javascript and CSS"

Untuk diskusi terperinci, lihat posting saya di sini: Hilangkan Render Blocking CSS menggunakan HTTP / 2 Push

Tom B
sumber
Saya bisa salah paham, tetapi bukankah Server Push akan menyebabkan CSS dikirim setiap kali Anda memuat halaman, bukan hanya sekali sebelum di-cache?
Niet the Dark Absol
Ya, ada beberapa teknik seperti cookie yang dapat membantu menghindarinya. Lihatlah bagian tentang mendorong secara selektif di sini: nginx.com/blog/nginx-1-13-9-http2-server-push
Tom B
-1

Hai Untuk jQuery Anda hanya bisa menggunakan seperti ini

Gunakan async dan ketik = "teks / javascript" saja

Rajeev
sumber