Hilangkan render JavaScript dan CSS pemblokiran render dalam konten di atas-lipat

30

Saya sedang membangun situs Drupal 7. Ini adalah beberapa modul yang saya gunakan: Adaptivetheme (tema), Panel Tampilan dan Konten, Panel, panel Mini, Panel di mana-mana, Manajer halaman, Superfish untuk menu, Addthis, Dipilih (tarik turun).

Untuk meningkatkan kinerja situs saya dan berurusan dengan file CSS dan JS saya menggunakan modul Advagg .

Saat menjalankan tes Pagespeed dari Google saya mendapatkan kesalahan berikut sebagai "Harus Diperbaiki":

Hilangkan JavaScript pemblokiran render dan CSS dalam konten di atas-
halaman Anda memiliki 6 sumber skrip pemblokiran dan 8 pemblokiran sumber daya CSS. Ini menyebabkan keterlambatan dalam merender halaman Anda.
Tak satu pun dari konten di atas-lipat pada halaman Anda dapat dirender tanpa menunggu sumber daya berikut dimuat. Coba tunda atau muat secara tidak sinkron sumber daya pemblokiran, atau sebariskan bagian penting dari sumber daya tersebut secara langsung dalam HTML.

Ini adalah info yang disediakan Google:

Apakah ada cara saya dapat mengubah pengaturan modul Advagg atau inti Drupal, dan menyelesaikan masalah ini?

Apakah ada cara lain untuk mencapai tujuan ini?

Pembaruan - setelah menerapkan perubahan sesuai dengan jawaban mikeytown2 saya mendapat pesan berikut pada tes Pagespeed Google:

Hilangkan render JavaScript dan CSS pemblokiran render dalam konten di atas-
halaman Anda memiliki 6 sumber skrip pemblokiran dan 4 memblokir sumber daya CSS. Ini menyebabkan keterlambatan dalam merender halaman Anda.
Tak satu pun dari konten di atas-lipat pada halaman Anda dapat dirender tanpa menunggu sumber daya berikut dimuat. Coba tunda atau muat secara tidak sinkron sumber daya pemblokiran, atau sebariskan bagian penting dari sumber daya tersebut secara langsung dalam HTML.

7 theming javascript performance EB84
sumber
Tidak yakin tentang advagg, tapi untuk intinya tidak boleh, tidak ada pengaturan seperti ini. Untuk advagg saya gagal melihat mereka, tetapi saya berhenti menggunakannya segera. Mungkin ada pengaturan seperti ini sekarang. Secara pribadi saya akan memposting permintaan dukungan dalam antrian masalah mereka, menanyakan hal ini, dan jika pengelola mengatakan mereka tidak tersedia, akan berubah menjadi permintaan fitur.
Mołot
Pertanyaan Anda terlalu luas. Situs Anda menggunakan CSS dan JS - demikian juga setiap situs lain di internet. Selama susunan cascade CSS dipertahankan, ada sedikit alasan Anda tidak dapat menggabungkan semua CSS Anda menjadi 1 file. Selama JS Anda dienkapsulasi ok tidak ada alasannya tidak dapat digabung menjadi 1 file (sebagai contoh ekstrem). Jika Anda dapat memberikan detail tentang Apa CSS / file JS / sumber daya yang dibutuhkan oleh halaman; Anda mungkin bisa mendapatkan lebih banyak jawaban berdasarkan informasi
Tenken
@tenken bagaimana itu terlalu luas? Dia memiliki CSS dan JS yang ditautkan dengan cara render-blocking dan dia menginginkannya dengan cara non-blocking. Cara-cara ini cukup banyak dijelaskan ( oleh Google, misalnya karena OP merujuk ke rekomendasi Google Pagespeed). Komentar Anda tidak ada hubungannya dengan masalah yang ditanyakan OP.
Mołot
semua file css dan js yang ditautkan memblokir kecuali kode inline atau penggunaannya asyncyang tidak didukung oleh peramban lama. Misalnya, agregasi Drupal default menyertakan <link>tag untuk semua css Anda. Jika situs Anda CSS atau JS terlalu rumit, Anda akan selalu mengalami masalah ini. Jika Anda membangun situs dengan benar, Anda dapat mengumpulkan file dengan aman. Tanpa info tentang dependensi file, detail pertanyaan terlalu luas - modul tidak akan pernah bisa memperbaiki masalahnya; ini semua tentang bagaimana CSS dan JS ditulis dan urutan inklusi dan kompleksitasnya. dia tidak pernah mengatakan dia ingin non-blocking, anggapanmu itulah yang dia inginkan.
Tenken
@tenken Saya memperbarui pertanyaan saya, dan memberikan lebih banyak info tentang modul - harapan yang akan membantu Anda memahami CSS & JS yang saya gunakan.
EB84

Jawaban:

42

The README memiliki panduan tentang cara untuk melakukan ini dengan menggunakan arus 7.x-2,31 + versi AdvAgg . Lihat juga halaman wiki ini pada grup berperforma tinggi . Sebagian besar situs dapat mencapai skor 100/100 sempurna https://developers.google.com/speed/pagespeed/insights/ . Petunjuk tentang cara mencapainya untuk instalasi baru AdvAgg di bawah ini.

Pastikan untuk memeriksa situs setelah setiap bagian untuk memastikan perubahan tidak mengacaukan situs Anda. Perubahan di bawah AdvAgg Modifier biasanya yang paling bermasalah tetapi mereka menawarkan peningkatan terbesar.

Agregasi CSS / JS Tingkat Lanjut

Pergi ke admin/config/development/performance/advagg

  • Pilih "Gunakan pengaturan yang disarankan (dioptimalkan)"
AdvAgg Compress Javascript

Instal AdvAgg Compress Javascript jika tidak diaktifkan dan pergi ke admin/config/development/performance/advagg/js-compress

  • Pilih JSMin jika tersedia; jika tidak pilih JSMin +
  • Pilih Strip segalanya (file terkecil)
  • Klik tautan kompres batch untuk memproses file-file ini
AdvAgg Async Font Loader

Instal AdvAgg Async Font Loader jika tidak diaktifkan dan buka admin/config/development/performance/advagg/font

  • Pilih file lokal yang termasuk dalam agregat (versi: XXX). Jika opsi ini tidak tersedia ikuti petunjuk di bawah opsi tentang cara menginstalnya.
  • Centang "Gunakan localStorage sehingga flash teks tanpa gaya (FOUT) hanya terjadi sekali."
  • Centang "Tetapkan cookie sehingga kilasan teks tanpa gaya (FOUT) hanya terjadi sekali."
AdvAgg Bundler

Instal AdvAgg Bundler jika tidak diaktifkan dan buka admin/config/development/performance/advagg/bundler

Pengaturan HTTP / 2.0

  • Di bawah "Jumlah Target Paket CSS Per Halaman" pilih 25
  • Di bawah "Jumlah Target JS Bundles Per Halaman" pilih 25
  • Di bawah "Logika pengelompokan" pilih "Ukuran file"

Pengaturan HTTP / 1.1 (default)

  • Di bawah "Jumlah Target Berkas CSS Per Halaman" pilih 2
  • Di bawah "Jumlah Target JS Bundles Per Halaman" pilih 5
  • Di bawah "Logika pengelompokan" pilih "Ukuran file"

25 bundel vs 2 dan 5 ada hubungannya dengan caching browser. Semakin banyak file sama dengan peluang yang lebih baik dari browser untuk memiliki kombo itu dalam cache, tetapi lebih banyak file berarti lebih banyak koneksi dibuat dan dibuka di HTTP 1.1. Gunakan 2 untuk CSS karena nomor ini tidak menunggu koneksi baru; JS adalah 5 karena sebagian besar browser memiliki batas koneksi konkuren 6. Jumlah bundel ini diambil setelah banyak tes. Di HTTP 2.0 ada satu koneksi streaming dan penalti untuk beberapa file CSS dan JS hampir tidak ada; dengan demikian mengoptimalkan cache browser adalah pilihan terbaik; dengan demikian 25 harus digunakan untuk CSS dan JS saat melayani HTTP / 2.0.

AdvAgg Pindah

Instal AdvAgg Relocate jika tidak diaktifkan dan buka admin/config/development/performance/advagg/relocate

  • Pilih "Gunakan pengaturan yang disarankan (dioptimalkan)"
Pengubah AdvAgg

Instal AdvAgg Modifier jika tidak diaktifkan dan pergi ke admin/config/development/performance/advagg/mod

  • Pilih "Gunakan pengaturan yang disarankan (dioptimalkan)"
Menghasilkan File CSS Kritis

Buka https://www.sitelocity.com/critical-path-css-generator dan masukan sebanyak mungkin laman landas yang diperlukan untuk css kritis; 10 besar biasanya merupakan awal yang baik. Jika Anda memiliki Google Analytics, ini akan menunjukkan kepada Anda bagaimana menemukan halaman landing utama Anda https://developers.google.com/analytics/devguides/reporting/core/v3/common-queries#top-landing-pages atau untuk Piwik https: //piwik.org/faq/how-to/faq_160/ . Jika Anda tidak tahu halaman apa yang harus dimulai dengan beranda situs Anda. Anda juga dapat menggunakan ini untuk menghasilkan css https://chrome.google.com/webstore/detail/critical-style-snapshot/gkoeffcejdhhojognlonafnijfkcepob?hl=id

Contoh nama file dan jalur di bawah ini adalah untuk tema "bootstrap"; mereka semua mulai dengan sites/all/themes/bootstrap/critical-css/; dalam tema Anda buat critical-css/direktori. Direktori selanjutnya didasarkan pada pengguna; anonymous/,, all/atau authenticated/dapat digunakan.

Direktori berikutnya dapat urls/atau type/. Melihat urls/; depan adalah kasus khusus untuk halaman depan, semua jalur lain menggunakan current_path () sebagai direktori dan nama file yang .cssditambahkan ke bagian akhir; Lihat https://api.drupal.org/api/drupal/includes%21path.inc/function/current_path/7.x

Melihat type/ini adalah kasus khusus untuk jenis simpul. Gunakan nama mesin dan tambahkan .csssampai akhir. Node apa pun dari jenis ini kemudian akan menerapkan dan css file kritis ini. Di bawah ini adalah beberapa contoh yang menunjukkan cara kerjanya.

lokasi file contoh yang valid untuk halaman "depan": sites/all/themes/bootstrap/critical-css/anonymous/urls/front.css

contoh lokasi file yang valid untuk halaman "node / 1" current_path (): sites/all/themes/bootstrap/critical-css/anonymous/urls/node/1.css

lokasi file contoh yang valid untuk tipe simpul "halaman": sites/all/themes/bootstrap/critical-css/anonymous/type/page.css

Jika Anda ingin semacam cara otomatis untuk menghasilkan file-file css ini, fourkitchens memiliki artikel yang bagus tentang cara mengaturnya: https://fourword.fourkitchens.com/article/use-grunt-and-advagg-inline-critical-css -drupal-7-theme

mikeytown2
sumber
Ini adalah ikhtisar hebat tentang cara menggunakan AdvAgg! Terima kasih. Mungkin teks ini bisa berupa awal dari halaman "dokumentasi" yang ditautkan untuk halaman proyek Anda :)
tenken
Sudah melakukannya :) drupal.org/node/2189523#comment-8594829
mikeytown2
@ mikeytown2 terima kasih atas jawaban yang bagus. Saya menerapkan semua perubahan, dan memperbarui pertanyaan. Saya mendapat skor yang sedikit lebih tinggi - terima kasih!
EB84
Melihat output, tampaknya Anda belum mencentang semua kotak di bawah Optimize JavaScript Ordering pada advagg/modhalaman DAN / ATAU Anda belum memindahkan Semua JS ke footer. Juga jika saya bisa melihat halaman sumber lengkap yang umumnya membantu dengan rekomendasi (cukup tautkan ke situs Anda).
mikeytown2
Terima kasih telah memberikan info itu. Jika Anda ingin lebih sedikit file css pada halaman buka advagg / bundler dan ubah nilai css dari 4 menjadi 1. Itu akan memberi Anda skor yang lebih baik tetapi perlu diingat komentar yang saya buat di atas tentang melakukannya. Sepertinya tema adaptif menggunakan drupal_add_html_head () untuk menambahkan browser bersyarat js, saya harus memverifikasi bahwa itulah yang terjadi; berarti lebih dari 1 tema perlu drupal.org/node/2217451 . Saya juga telah membuat masalah ini untuk mengatasi pemblokiran render css drupal.org/node/2223267
mikeytown2
2

Anda tidak akan pernah mendapatkan skor yang benar-benar tinggi dengan modul drupal prebuilt, satu-satunya cara untuk mencapai ini adalah dengan menghadiri dan dengan cermat menganalisis setiap saran yang dibuat oleh alat kecepatan google , menangani masing-masing secara mandiri.

Beberapa hal yang saya lakukan untuk mencapai 95 di situs berita yang sangat aktif , bahwa pada saat saya menulis ini, skor lebih baik daripada nytimes (Sekarang tidak):

  • [blokir skrip] Menunda eksekusi skrip pihak ketiga seperti sharethis, widget facebook, google plus, dll, hanya berjalan setelah halaman telah sepenuhnya diterjemahkan. Ini membutuhkan beberapa penggantian string sederhana pada output html.tpl.php untuk menangkap skrip tersebut dan mengantriya untuk dieksekusi nanti.
  • [blocking scripts] Simpan variabel $ scripts dari html.tpl.php (dengan json_encode) dalam variabel javascript untuk mengantre mereka agar berjalan setelah halaman pertama dimuat. Ini tidak wajar, tetapi perlu. Beberapa masalah khusus peramban harus diselesaikan.
  • [blocking css] Menerapkan sesuatu yang mirip dengan teknik Keith Clark , tetapi dengan rel = "prefetch". Ini memperkenalkan perlunya memecahkan FOUC .
  • [Minifikasi dan kompresi] Eksternalisasikan kompresi dan minifikasi ke server distribusi di mana saya dapat menggunakan imagemagic, yui-compressor, pngoptim, dan banyak lagi untuk mengatasi aturan-aturan itu, tanpa mengubah instalasi drupal menjadi kekacauan yang tidak dapat dikelola.
jacmkno
sumber