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?

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) ...!

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).

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.

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>

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.

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

Pertimbangkan untuk menggunakan paket untuk secara otomatis menghasilkan gaya inline dari file css Anda. Yang bagus adalah Grunt Critical atau Cssical Css untuk Laravel .

Hai Untuk jQuery Anda hanya bisa menggunakan seperti ini

Gunakan async dan ketik = "teks / javascript" saja