Perbaiki Google PageSpeed ​​Hilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas

Memecahkan render yang memblokir Javascript dan CSS

Google PageSpeed ​​[1] menguji “Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas” mengusulkan Anda untuk mengirimkan file JS dan CSS situs Anda setelah HTML dimuat sepenuhnya - dan, oleh karena itu, tidak menjeda pemuatan HTML Anda untuk mengunduhnya.

Definisi skrip yang memblokir perenderan: Skrip yang dimuat sebelum DOM HTML lengkap diurai. Misalnya, skrip disertakan dalam tajuk atau dalam konten, tanpa instruksi khusus apa pun bagi browser untuk menunda pemuatan skrip hingga setelah cat HTML.

Hilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas: tunjukkan cara memperbaikinya

1. Minta sistem eksternal mengoptimalkan situs web Anda untuk Anda
   
2. Gunakan CDN yang akan melakukan semua kemungkinan pengoptimalan atas nama Anda, termasuk tiga pengoptimalan berikut yang diperlukan untuk memperbaiki menghilangkan sumber daya yang memblokir perenderan:
   
3. Tunda pemuatan file Javascript
   
4. Muat CSS setelah HTML dimuat
   
5. Gunakan plugin WordPress
   

Ada banyak pengoptimalan yang diperlukan untuk memperbaiki menghilangkan sumber daya yang memblokir perenderan dan mungkin membosankan untuk menerapkannya sendiri - plus, Anda harus terus mencari pengujian baru yang disertakan dalam Chrome LightHouse dan  Google PageSpeed   ​​di antara pengujian kecepatan halaman lainnya.

Tidak ada solusi yang ada untuk menghilangkan sumber daya yang memblokir perenderan dalam kode htaccess karena masalahnya terkait dengan DOM, yang berarti konten situs web, dan urutan pemuatan sumber daya yang disertakan, seperti Javascript dan CSS, tetapi tidak hanya. Ini tidak dapat dipicu di Htaccess, tetapi hanya di konten HTML DOM.

Jika Anda menyelesaikan masalah ini untuk desktop, pada saat yang sama Anda akan menghilangkan sumber daya yang memblokir perenderan untuk seluler karena keduanya sama persis!

Did you know that you can even have all these steps executed automatically for you by using an external  Akselerator Kecepatan Situs   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!

Tunda file Javascript dimuat

Untuk menunda pemuatan file JS Anda [2], Anda dapat menambahkan async atau menunda instruksi ke tautan skrip Anda. Async tidak akan menjamin bahwa mereka dimuat dalam urutan yang sama - oleh karena itu, jika Anda memiliki beberapa skrip yang harus dijalankan satu demi satu, menunda lebih disukai untuk menjamin urutan:

Muat CSS setelah pemuatan HTML

Agar CSS dimuat setelah HTML lengkap dikirimkan, Google mengusulkan [3] potongan kode ini untuk ditambahkan di akhir HTML Anda, misalnya setelah tag penutup footer dan sebelum tag penutup tubuh:

Untuk mengoptimalkan situs web Anda, juga merupakan ide yang baik untuk menghapus kode CSS yang tidak digunakan, operasi yang bisa membosankan jika Anda tidak memiliki pengetahuan dalam desain web. Jika Anda belum membuat tema situs web Anda sendiri, mungkin lebih bijaksana untuk menggunakan sistem eksternal untuk menghapus kode CSS yang tidak digunakan pada halaman Anda atas nama Anda, seperti Ezoic Leap misalnya, versi baru (dan benar-benar gratis) dari situs mereka yang luar biasa. Accelerator Kecepatan.

Lulus uji kecepatan situs Google!

Ini memungkinkan saya untuk lulus tes  Google PageSpeed   ​​[1]. Menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas (bersama dengan Leverage browser caching [4]) di situs web, naik dari skor 51 di seluler ( Gambar 1) hingga 72 (Gambar 2), dan naik dari 59 (Gambar 3) ke 79 pada desktop (Gambar 4).

Cara menghilangkan sumber pemblokiran render di WordPress

Untuk menghilangkan sumber pemblokiran render di WordPress, Anda perlu menginstal plugin seperti JetPack.

Kemudian, buka opsi, di mana Anda harus menjadi administrator, dan pergi ke opsi JetPack> Menulis> Kinerja dan Kecepatan> centang Aktifkan akselerator situs, percepat waktu pemuatan gambar, percepat waktu pemuatan file statis, dan aktifkan pemuatan malas untuk gambar.

Pelajari dasar SEO: Daftarkan hari ini!

Tingkatkan visibilitas dan lalu lintas situs web Anda dengan menguasai dasar-dasar SEO dengan kursus dasar-dasar kami yang mudah diikuti.

Mulailah belajar SEO

Ini akan menghilangkan sumber pemblokiran render di WordPress dan memuat halaman lebih cepat dengan memungkinkan JetPack untuk mengoptimalkan gambar Anda dan melayani gambar dan file statis Anda (seperti CSS dan JavaScript) dari jaringan server global mereka.

Juga, jangan lupa untuk menunda memuat gambar dari layar dengan menggunakan fungsi malas. Meskipun dulu sulit dan mengharuskan perpustakaan eksternal untuk menunda pemuatan gambar di luar layar, sekarang mungkin secara asli dalam HTML5!

Untuk mengimplementasikan pemuatan malas gambar di situs web Anda, cukup tambahkan nilai yang malas ke atribut pemuatan gambar situs web Anda, dan browser baru-baru ini akan memahami bahwa gambar-gambar ini hanya boleh diminta dan dimuat jika ditampilkan, artinya jika pengguna bergulir ke bawah ke penampung gambar.

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

Selain itu, pemuatan malas juga berfungsi dengan IFRAMES, dan merupakan implementasi penting untuk menghilangkan sumber daya yang memblokir render dari halaman web Anda.

Setelah render memblokir sumber daya akan memiliki instruksi untuk memuat setelah konten utama, artinya HTML DOM, Anda akan sudah mendapatkan banyak poin pada uji Lighthouse Google, uji wawasan kecepatan halaman, atau vital web Google Core.

Minta sistem eksternal mengoptimalkan situs web Anda untuk Anda

Apakah Anda tahu bahwa sebenarnya Anda dapat menyelesaikan semua masalah  Google PageSpeed   ​​atas nama Anda, tanpa banyak usaha dari situs Anda - kecuali mendaftar untuk uji coba gratis dan mengubah DNS Anda?

Menggunakan teknologi platform Ezoic Site Speed ​​Accelerator, semua masalah  Google PageSpeed   ​​biasa akan diselesaikan oleh sistem mereka, yang akan menjadi perantara antara situs web Anda dan pengunjung. Mereka akan mengoptimalkan halaman web untuk Anda sebelum menampilkannya kepada pengunjung Anda.

Menjadi hijau dengan hanya mendaftar untuk percobaan gratis pada platform Ezoic dan mencobanya sendiri - mereka akan membuat situs web Anda mencapai standar tertinggi optimasi kecepatan halaman dalam beberapa hari: render gambar webp generasi berikutnya, optimalkan CSS dan JavaScript dengan menghapus CSS yang tidak digunakan dan JS, malas memuat gambar, mengubah ukuran gambar, cache halaman situs Anda, mengoptimalkan font, pra-sambungkan ke semua situs Anda termasuk, dan banyak lagi.

Tidak diperlukan kartu kredit - yang harus Anda lakukan adalah mendaftar secara gratis dan mencobanya. Selain itu, jika situs web Anda menghasilkan uang dari iklan bergambar, selain membuat situs web Anda jauh lebih cepat, situs web Anda juga dapat membuat Anda menghasilkan uang beberapa kali lebih banyak daripada yang Anda lakukan dengan Google AdSense dengan mengoptimalkan iklan Anda dengan pembelajaran mesin dan minat buatan yang maju.

Pertanyaan Yang Sering Diajukan

Bagaimana cara menghilangkan javascript dan CSS render dalam konten di atas lipat?

Untuk menghilangkan JavaScript dan CSS yang memblokir render untuk konten di atas lipat, Anda harus memastikan file JS dan CSS situs Anda dimuat setelah HTML sepenuhnya dimuat. Ini berarti tidak menghentikan proses pemuatan HTML untuk mengunduh file -file ini. Anda dapat menunda file JavaScript dengan atribut Async atau Defer, dan untuk CSS, Anda dapat menggunakan kode tertentu untuk memuatnya setelah HTML. Sistem optimasi eksternal seperti Ezoic juga dapat menangani ini secara otomatis.

Bagaimana pengembang web dapat mengatasi rekomendasi Google Pagespeed untuk menghilangkan JavaScript dan CSS yang memblokir render?

Pengembang web dapat mengoptimalkan situs mereka dengan meminimalkan file JavaScript dan CSS, menggunakan pemuatan asinkron untuk JavaScript, inlining CSS kritis langsung ke HTML, dan menunda pemuatan file CSS dan JavaScript non-kritis. Menerapkan strategi ini dapat secara signifikan meningkatkan waktu pemuatan dan skor kuppeed.

Skor Mercusuar Chrome yang sempurna: Apa yang terjadi?