Betulkan Google PageSpeed ​​Menghapuskan JavaScript dan CSS penyekatan render dalam kandungan di atas

Selesaikan render blocking Javascript dan CSS

Ujian  Google PageSpeed   ​​[1] Menghapuskan JavaScript dan CSS penyahkodan dalam kandungan di atas mencadangkan anda untuk menyampaikan fail JS dan CSS laman web anda setelah HTML dimuatkan sepenuhnya - dan, oleh itu, jangan berhenti sekat HTML anda untuk memuat turunnya.

Definisi skrip penghalang rendering: Skrip yang dimuat sebelum DOM HTML penuh telah dihuraikan. Sebagai contoh, skrip disertakan dalam tajuk atau dalam kandungan, tanpa arahan khusus untuk penyemak imbas untuk menunda pemuatan skrip sehingga selepas cat HTML.

Hilangkan JavaScript dan CSS yang menyekat perenderan dalam kandungan paruh atas: tunjukkan cara memperbaikinya

1. Mempunyai sistem luaran yang mengoptimumkan laman web anda untuk anda
   
2. Gunakan CDN yang akan melakukan semua kemungkinan pengoptimuman bagi pihak anda, termasuk tiga pengoptimuman berikut yang diperlukan untuk memperbaiki penghapusan sumber yang menyekat perenderan:
   
3. Memuatkan fail Javascript
   
4. Muatkan CSS selepas pemuatan HTML
   
5. Gunakan pemalam WordPress
   

Terdapat banyak pengoptimuman yang diperlukan untuk memperbaiki penghapusan sumber yang menyekat perenderan dan mungkin membosankan untuk melaksanakannya sendiri - ditambah, anda harus terus mencari ujian baru yang disertakan dalam Chrome LightHouse dan  Google PageSpeed   ​​antara ujian kelajuan halaman yang lain.

Tidak ada penyelesaian yang ada untuk menghilangkan sumber yang menyekat perenderan dalam kod htaccess kerana masalahnya berkaitan dengan DOM, yang bermaksud kandungan laman web, dan urutan sumber yang disertakan dimuat, seperti Javascript dan CSS, tetapi tidak hanya. Ini tidak boleh dicetuskan di Htaccess, tetapi hanya dalam kandungan DOM HTML.

Sekiranya anda menyelesaikan masalah ini untuk desktop, pada masa yang sama anda akan menghilangkan sumber yang menyekat perenderan untuk mudah alih kerana kedua-duanya sama!

Did you know that you can even have all these steps executed automatically for you by using an external  Pemecut Kelajuan Tapak   technology, which through artificial intelligence will preload your site, optimize it, and deliver it to your visitors? It is possible with tools such as Ezoic platform offering, with a free trial and no credit card required. Otherwise, implement below optimizations in your website!

Memuatkan fail Javascript

Untuk menangguhkan beban fail JS anda [2], anda boleh menambah arahan async atau menunda ke pautan skrip anda. Async tidak akan menjamin bahawa ia dimuatkan dalam urutan yang sama - oleh itu, jika anda mempunyai beberapa skrip yang harus dijalankan satu demi satu, penangguhan lebih baik untuk menjamin urutan:

Muatkan CSS selepas pemuatan HTML

Untuk CSS yang akan dimuatkan setelah HTML penuh dihantar, Google mencadangkan [3] sekeping kod ini untuk ditambahkan pada akhir HTML anda, sebagai contoh selepas tag penutup footer dan sebelum tag penutup tubuh:

Untuk mengoptimumkan laman web anda, ia juga merupakan idea yang baik untuk menghapuskan kod CSS yang tidak digunakan, satu operasi yang boleh membosankan jika anda tidak mempunyai pengetahuan dalam reka bentuk web. Jika anda belum membuat tema laman web anda sendiri, mungkin lebih bijak untuk menggunakan sistem luaran untuk menghilangkan kod CSS yang tidak digunakan pada halaman anda bagi pihak anda, seperti Ezoic Leap misalnya, versi baru (dan benar-benar) dari laman web yang menakjubkan mereka Pemecut kelajuan.

Lulus ujian kelajuan laman web Google!

Ini membenarkan saya meluluskan ujian  Google PageSpeed   ​​[1] Menghapuskan JavaScript dan CSS yang menyekat render dalam kandungan di atas-kali (bersama-sama dengan penyebaran pelayar Leverage [4]) di laman web, naik dari skor 51 di telefon bimbit ( Rajah 1) hingga 72 (Gamb 2), dan naik dari 59 (Gamb 3) hingga 79 pada desktop (Rajah 4).

Bagaimana untuk menghapuskan penghalang penghalang di WordPress

Untuk menghapuskan sumber penyekatan dalam WordPress, perlu memasang plugin seperti JetPack.

Kemudian, pergi ke pilihan, yang mana anda perlu menjadi pentadbir, dan pergi ke pilihan JetPack> Menulis> Prestasi dan Kelajuan> semak Enable pemecut tapak, mempercepatkan masa beban imej, mempercepatkan masa muat fail statik, dan membolehkan memuat malas untuk imej.

Penciptaan laman web induk: Daftar sekarang!

Mengubah kehadiran digital anda dengan Kursus Penciptaan Laman Web Komprehensif kami - Mulakan perjalanan anda untuk menjadi pakar web hari ini!

Daftar di sini

Ini akan menghilangkan sumber menyekat penghalaan di WordPress dan memuatkan halaman dengan lebih pantas dengan membenarkan JetPack mengoptimumkan imej anda dan memberikan imej dan fail statik anda (seperti CSS dan JavaScript) dari rangkaian pelayan global mereka.

Juga, jangan lupa untuk menangguhkan memuatkan imej di luar skrin dengan menggunakan fungsi beban yang malas. Walaupun ia menjadi sukar dan memerlukan perpustakaan luar untuk menangguhkan pemuatan imej di luar skrin, kini mungkin secara semula jadi dalam HTML5!

Untuk melaksanakan pemuatan malas imej di laman web anda, hanya tambah nilai yang malas ke atribut yang memuatkan imej laman web anda, dan pelayar baru-baru ini akan memahami bahawa imej-imej ini hanya perlu diminta dan dimuatkan jika mereka dipaparkan, bermakna jika pengguna menatal ke bawah ruang letak imej.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>

Di samping itu, Lazy Loading juga berfungsi dengan Iframes, dan merupakan pelaksanaan yang penting untuk menghapuskan sumber-sumber yang menyekat render dari halaman web anda.

Apabila sumber penyekatan rendering akan mempunyai arahan untuk memuatkan selepas kandungan utama, yang bermaksud DOM HTML, anda akan mendapat banyak mata di Ujian Rumah Api Google, ujian Insight Speed ​​Page, atau Google Core Web Vitals.

Mempunyai sistem luaran yang mengoptimumkan laman web anda untuk anda

Adakah anda tahu bahawa anda sebenarnya dapat menyelesaikan semua masalah  Google PageSpeed   ​​bagi pihak anda, tanpa banyak usaha dari laman web anda - kecuali mendaftar untuk percubaan percuma dan mengubah DNS anda?

Dengan menggunakan teknologi Ezoic Site Speed ​​Accelerator, semua masalah  Google PageSpeed   ​​yang biasa akan diselesaikan oleh sistem mereka, yang akan menjadi perantara antara laman web anda dan pengunjung. Mereka akan mengoptimumkan halaman web untuk anda sebelum memaparkannya kepada pengunjung anda.

Menjadi hijau dengan hanya mendaftar untuk percubaan percuma di platform Ezoic dan mencubanya sendiri - mereka akan menjadikan laman web anda mencapai standard pengoptimuman kelajuan halaman tertinggi dalam beberapa hari: membuat gambar laman web generasi seterusnya, mengoptimumkan CSS dan JavaScript dengan membuang CSS yang tidak digunakan dan JS, gambar muat malas, ubah saiz gambar, cache halaman laman web anda, mengoptimumkan fon, sambungkan terlebih dahulu ke semua laman web yang disertakan, dan banyak lagi.

Tidak perlu kad kredit - yang perlu anda lakukan adalah mendaftar secara percuma dan mencubanya. Selain itu, jika laman web anda menjana wang dari iklan bergambar, selain menjadikan laman web anda lebih cepat, mereka juga dapat membuat anda memperoleh wang beberapa kali lebih banyak daripada yang anda lakukan dengan Google AdSense dengan mengoptimumkan iklan anda dengan pembelajaran mesin dan intuitensi buatan maju.

Soalan Yang Sering Ditanya

Bagaimana untuk menghapuskan JavaScript dan CSS menyekat dalam kandungan di atas?

Untuk menghapuskan JavaScript dan CSS menyekat untuk kandungan di atas, anda harus memastikan fail JS dan CSS laman web anda dimuatkan selepas HTML dimuatkan sepenuhnya. Ini bermakna tidak menjeda proses pemuatan HTML untuk memuat turun fail -fail ini. Anda boleh menangguhkan fail JavaScript dengan atribut async atau menangguhkan, dan untuk CSS, anda boleh menggunakan kod tertentu untuk memuatkannya selepas HTML. Sistem pengoptimuman luaran seperti Ezoic juga boleh mengendalikannya secara automatik.

Bagaimanakah pemaju web boleh menangani cadangan Google Pagespeed untuk menghapuskan JavaScript dan CSS menyekat?

Pemaju Web dapat mengoptimumkan laman web mereka dengan meminimumkan fail JavaScript dan CSS, menggunakan pemuatan asynchronous untuk JavaScript, menggariskan CSS kritikal terus ke HTML, dan menangguhkan pemuatan fail CSS dan JavaScript yang tidak kritikal. Melaksanakan strategi ini dapat meningkatkan masa pemuatan dan skor halaman.

Skot Rumah Api Sempurna: Apa yang berlaku?