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.

[1] - Wawasan PageSpeed ​​- developers.google.com
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:

<script defer type="text/javascript" src="./js/mootools-more-1.4.0.1.js"></script>
[2] - Hapus JavaScript yang Memblokir Perenderan | PageSpeed ​​Insights | Pengembang yang Baik - developers.google.com

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:

</footer>
 <script>
 var cb = function() {
 var l = document.createElement('link'); l.rel = 'stylesheet';
 l.href = './style.css';
 var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
 };
 var raf = requestAnimationFrame || mozRequestAnimationFrame ||
 webkitRequestAnimationFrame || msRequestAnimationFrame;
 if (raf) raf(cb);
 else window.addEventListener('load', cb);
 </script>
</body>
[3] - Mengoptimalkan Pengiriman CSS | PageSpeed ​​Insights | Pengembang yang Baik - developers.google.com

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

[4] - Perbaiki Google PageSpeed ​​memanfaatkan cache browser di htaccess - Yoann Bierling, SAP Internasional / Konsultan Web - www.ybierling.com

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.

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.

Cara Menghilangkan JavaScript yang diblokir render dan CSS di WordPress

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!

Pemuatan malas gambar: Gambar situs web hanya diminta ke server ketika pengguna menggulir di halaman web dan mungkin menampilkannya

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>
Lazy Loading - Kinerja Web - Jaringan Pengembang Mozilla

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.

Pada bulan April 2021, akselerator kecepatan situs yang dibayar Ezoic akan menjadi lompatan ezoic gratis, dan membantu situs web yang mencapai skor hijau inti web tanpa biaya!

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.

Skor Mercusuar Chrome yang sempurna: Apa yang terjadi?





Artikel serupa

Server DLNA di Windows 10: streaming media ke SmartShare TV

Server DLNA di Windows 10: streaming media ke SmartShare TV

Menggunakan browser Chrome pada Windows 10, dimungkinkan untuk mengakses media komputer dan untuk streaming Youtube di tv menggunakan fungsi SmartShare, seperti pada LG TV, tanpa perlu mengunduh perangkat lunak tertentu dan gratis!


Komentar (8)

 2018-08-19  quranapk
Senang membaca konten Anda, terus posting - ini membantu saya memperbaiki CSS yang memblokir render
 2018-09-23  Monica
Jadi begini cara kami melakukannya, sangat menyenangkan mengetahui cara mengatasi menghilangkan sumber daya yang memblokir render
Hebat, itulah yang saya cari, sekarang saya siap untuk menghilangkan sumber daya yang memblokir render di seluler
 2018-11-03  utumikaji0
Luar biasa, sekarang saatnya saya mencobanya dan memperbaiki menghilangkan sumber daya yang memblokir render!
Tidak tahu bagaimana harus berterima kasih, tapi itu benar-benar jenius, terima kasih - ini berfungsi di WordPress untuk menghapus sumber daya pemblokiran render
 2019-04-21  Ludanulema
Hai, saya melihat artikel Anda dan itu membantu saya memecahkan masalah menghilangkan sumber daya yang memblokir render di PHP, terima kasih
 2019-06-12  animeg2Q
Saya akan mencobanya sekarang, terima kasih telah berbagi ini menghilangkan perbaikan sumber daya pemblokiran render
 2019-07-02  Gasfackele
Ini bekerja dengan baik untuk saya, tidak perlu mencari lebih jauh untuk menghilangkan sumber daya yang memblokir render di situs web HTML

Tinggalkan komentar