Kami menghapus JavaScript dan CSS dari bagian atas halaman sesuai dengan rekomendasi PageSpeed ​​​​Insights. Cara meningkatkan kecepatan memuat WordPress. Layanan Google PageSpeed ​​​​Insights

Saya melanjutkan, sekarang saya memiliki satu item lagi di depan saya yang diberitahukan Google kepada saya: Hapus dari bagian atas halaman kode JavaScript dan CSS yang memblokir render. Sekarang saya akan mencoba mencari tahu apa yang berlebihan di sana dan bagaimana cara menghapus JavaScript dan CSS yang tidak perlu?

Izinkan saya mengingatkan Anda bahwa saya melakukan pengujian dengan layanan ini: di mana saya diberi saran khusus mengenai JavaScript dan CSS:

Seperti yang Anda lihat, saya punya yang ini masalah besar, 8 skrip dimuat sekaligus dan karena itu, layar pertama tidak dimuat secepat yang kita inginkan. Ada juga 10 file css yang juga tidak dioptimasi. Baiklah, mari kita selesaikan masalahnya!

Klaim mengenai masalah ini kira-kira seperti ini:

Hapus kode JavaScript yang mencegah tampilan:

  • https://prostolinux.ru/...-includes/js/jquery/jquery.js?ver=1.10.2
  • https://prostolinux.ru/...s/jquery/jquery-migrate.min.js?ver=1.2.1
  • https://prostolinux.ru/...query-ui-1.8.10.custom.min.js?ver=1.8.10
  • https://prostolinux.ru/…ial-textboxes/js/wstb.js.php?ver=3.10.60
  • https://prostolinux.ru/wp-includes/js/tw-sack.min.js?ver=1.6.1

Baru-baru ini ditemukan solusi yang menarik: di function.php kita perlu memasukkan kode yang akan memerintahkan skrip yang tidak perlu kita muat segera:

fungsi jquery_in_footer() ( wp_register_script('tie-tipsy', get_template_directory_uri() . '/js/jquery.tipsy.js', array('jquery')); wp_register_script('tie-easing', get_template_directory_uri() . '/ js/jquery.easing.1.3.js', array('jquery')) ;

Pada contoh, dua skrip telah ditambahkan, tetapi kami menambahkan sebanyak yang kami suka, dan skrip tersebut memperlambat pemuatan halaman. Saya mencoba menerapkan solusi ini - tidak berhasil untuk saya, mungkin saya melakukan kesalahan?

Google sendiri menyarankan untuk memasukkannya ke dalam script atribut asinkron, yang akan membuat pemuatannya tidak sinkron. Namun solusi ini hanya cocok untuk skrip eksternal, misalnya atribut async ini dapat dimasukkan ke dalam skrip iklan Yandex Direct jika iklan Anda ditampilkan di layar pertama. Yandex juga memiliki kode asinkron, tetapi ini menimbulkan masalah bagi saya - jika satu blok dengan pemuatan asinkron dan blok kedua tidak, maka hanya satu yang akan ditampilkan. Tapi itu bukan tentang itu sekarang...

Sulit untuk mengoptimalkan plugin dengan cara ini; Anda perlu memasukkan kode setiap plugin dan menulis atribut ini atau alternatifnya ke dalamnya. Saya bukan seorang programmer dan saya tidak akan melakukan itu. Selain itu, jika Anda terus-menerus memperbarui plugin, semua pekerjaan Anda akan hilang setelah pembaruan.

Yang mengejutkan saya, saya menemukan solusi lain yang sangat sederhana untuk masalah ini - menginstal plugin Asynchronous Javascript. Setelah menginstalnya saya mendapatkan hasil sebagai berikut:

Seperti yang Anda lihat, hanya ada satu skrip yang tersisa, dan ini adalah skrip plugin itu sendiri. Setelah instalasi, saya pribadi tidak mengalami masalah dalam menampilkan tema situs, tetapi jika Anda mengalami masalah dan memerlukan beberapa skrip untuk segera dimuat, maka dalam pengaturan plugin Anda dapat menambahkannya ke pengecualian:

Ini adalah bagaimana poin pertama diselesaikan dengan mudah, tetapi seperti yang Anda lihat, ini masih belum cukup, Anda perlu mengoptimalkan css, bagaimana cara melakukannya?

Bagaimana cara mengoptimalkannya CSS berfungsi?

Izinkan saya mengingatkan Anda tentang daftar keluhan:

Optimalkan CSS Anda pada sumber daya berikut:

  • https://prostolinux.ru/...wp-special-textboxes.css.php?ver=3.10.60
  • https://prostolinux.ru/...plugins/wp-ds-blog-map/wp-ds-blogmap.css
  • https://prostolinux.ru/...t/themes/rockwell_new/rockwell/style.css

Idealnya, Anda perlu melakukan ini: ambil semua data dari file css ini dan pindahkan ke stile.css utama, dan nonaktifkan permintaannya di plugin itu sendiri. Namun seperti yang Anda pahami, ini adalah tugas yang panjang dan membosankan, penuh dengan banyak jebakan. Mungkin kedepannya saya akan melakukan hal ini, namun untuk saat ini saya tidak mempunyai banyak waktu dan pengalaman.

Anda dapat mengatasi masalah ini dengan menginstal plugin, yang akan menggabungkan semua gaya ke dalam satu file. Saya tidak dapat menemukan plugin yang hanya menjalankan fungsi ini, jadi saya akan memberi tahu Anda tentang plugin yang melakukan semuanya sekaligus, menghapus skrip, dan mengoptimalkan css.

Bagaimana cara mengoptimalkan semuanya sekaligus?

Saya memutuskan untuk menginstal plugin Autoptimize, yang mengoptimalkan skrip dan css secara bersamaan. Setelah menginstal plugin, Anda hanya perlu membuka pengaturannya dan mencentang kotaknya di tempat yang tepat:

Setelah itu Halaman Google Kecepatan memberikan ini:

Tidak ada skrip yang dimuat, hanya dua file css yang menyertakan semua gaya, dan semua skrip dipindahkan ke area footer. Jika sekarang Anda lihat kode sumber halaman, lalu ada PORridge yang dioptimalkan, yang tidak dapat Anda temukan tanpa botol.

Awalnya saya mengira plugin ini tidak akan sepenuhnya menyelesaikan masalah saya, tetapi ternyata, ini karena saya tidak mengkonfigurasinya sepenuhnya! Setelah mencentang kotak di tempat yang tepat saya mendapatkannya Hasil yang SANGAT BAIK! SEMUA MASALAH HILANG!

Untuk mewujudkannya, Anda perlu mengklik tombol di bagian atas Tampilkan pengaturan lanjutan dan kemudian pengaturan tambahan. Item berikut perlu dicentang:

Optimalkan kode HTML?

Optimalkan kode JavaScript?

Cari skrip hanya di ? (tidak digunakan lagi)

Optimalkan kode CSS Anda?

Sebariskan semua CSS?

Simpan skrip/css gabungan sebagai file statis

Setelah itu, memang benar plugin yang memperbaiki widget berhenti berfungsi untuk saya, tapi ini bukan masalah sama sekali, kecepatan memuat situs jauh lebih penting. Dan yang lebih penting lagi adalah menyenangkan Paman Google...

Saya juga ingin menyebutkan satu nuansa: di situs ini saya punya templat responsif, dan jika Anda menggunakannya, maka plugin saat ditampilkan versi seluler tidak dapat sepenuhnya menghilangkan semua masalah. Saat saya mengaktifkan plugin versi seluler, tidak ada kesalahan yang tersisa. Saya sekali lagi yakin bahwa desain responsif lebih baik daripada responsif.

Plugin serupa lainnya adalah WP Minify Fix, ia melakukan hal yang sama, tetapi saya kurang menyukainya, atau mungkin saya tidak sepenuhnya memahaminya.

Saya memahami bahwa idealnya melakukan semua ini tanpa plugin, secara manual, tetapi ini sangat panjang dan membosankan dan itu benar-benar tidak sepadan, karena meskipun Anda mencapai skor 100, Anda tidak akan membawa situs Anda ke peringkat teratas - pemuatan situs kecepatan hanyalah SATU dari ratusan faktor peringkat, jalur dan cukup penting. Tapi Anda perlu melakukan semua yang Anda bisa!

Menghapus kode JavaScript dan CSS Google Kecepatan Halaman

SARAN WEBMASTER: Kemampuan menghasilkan uang di Internet hanyalah separuh dari perjuangan, separuh lainnya adalah kemampuan menguangkan uang elektronik secara MENGUNTUNGKAN. Berikut adalah daftar kartu bank luar negeri tempat Anda dapat menarik dana dan kemudian menarik tagihan tajam dari kartu tersebut:

1. Payoneer - Sistem pembayaran paling populer di dunia untuk pekerja lepas. Penerbitan kartu, berlokasi di AS.

2. EpayService - Sistem pembayaran Amerika, sangat populer di banyak negara, memberikan gratis Kartu MasterCard di EVRO untuk penduduk CIS dan Eropa.

3. Skrill - Satu-satunya sistem pembayaran yang bekerja dengan cryptocurrency dan pada saat yang sama mengeluarkan uang secara gratis kartu bank MasterCard.

4. AdvCash - Bank luar negeri yang berlokasi di Belize, Anda dapat membuka rekening dalam dolar, euro, pound, dan rubel.

5. Payeer - Markas besarnya sistem Pembayaran terletak di Georgia, Anda juga dapat membuka akun dalam dolar, euro, dan rubel.


Domain RU - 99 RU
Domain RF - 99 RUR

Ini adalah salah satu masalah paling umum yang saya lihat ketika menganalisis situs web. Memecahkan masalah ini adalah salah satu momen tersulit dalam mengoptimalkan kecepatan pemuatan halaman, karena memerlukan pengetahuan teknis yang mendalam.

Saya ingin menarik perhatian Anda pada fakta bahwa setiap situs bersifat individual. Dan jika beberapa solusi berguna untuk satu situs, solusi tersebut mungkin berdampak negatif pada situs lain.

Inti masalahnya

Peringatan ini dipicu ketika referensi ke file eksternal javascript dan css. Dan sampai halaman tersebut dimuat, tidak ada rendering halaman lebih lanjut yang akan terjadi. Oleh karena itu, mereka memblokir konten agar tidak ditampilkan di halaman.

Cara menghapus JavaScript yang mencegah tampilan bagian atas halaman
  •   Pertama, kita perlu memastikan bahwa JavaScript tidak terlibat dalam proses rendering halaman.
  •   Kami menempatkan skrip kecil di konten itu sendiri halaman HTML. Misalnya:
  •   Kami memeriksa skrip untuk ketergantungan dan urutan pemuatan. Jika tidak satu pun atau yang lain tersedia, tambahkan atribut "async" ke dalamnya:
  •   Berkat atribut ini, skrip tersebut akan dimuat secara asinkron.

Instruksi ini tidak dapat diterapkan ke perpustakaan JQuery, yang digunakan di sebagian besar situs. Selanjutnya, mari kita lihat solusi yang tepat untuk JQuery.

Jika Anda menempatkan jquery.js sebelum tag penutup atau mencoba memuatnya secara asinkron, skrip dependen akan berhenti berfungsi dan banyak fungsi situs akan hilang. Keputusan yang tepat V dalam hal ini Menggunakan acara onload mungkin membantu:


fungsi asyncjs() (
 … 
}

Pada cm populer Plugin digunakan untuk mengatasi masalah tersebut. Prinsipnya agak berbeda dari yang dijelaskan di atas. Mari kita lihat contoh Autoptimize untuk Wordpress:

  •   Plugin ini menggabungkan semua *.js dan skrip inline ke dalam satu file. Pada saat yang sama, urutan pemuatan dipertahankan.
  •   Satu file disertakan di footer halaman dengan atribut async.

Anda juga dapat menggunakan metode ini untuk cms yang ditulis sendiri atau situs HTML murni:

Memblokir css - solusi

Pada saat ini Cara terbaru untuk mengatasi masalah ini adalah dengan menggunakan arahan pramuat standar. Ini memungkinkan browser mengambil style.css tanpa memblokir rendering.

Penemu metode ini adalah Scott Jehl, desainer dan pengembang di The Filament Group.

Tidak diragukan lagi, masa depan terletak pada solusi ini. Namun sayangnya, saat ini tidak semua browser mendukung preload.

Oleh karena itu, kami tidak akan membahas metode ini lebih detail sekarang, tetapi kami akan mempertimbangkan metode konservatif.

Inti dari metode ini adalah untuk menempatkan di bagian kepala bagian gaya yang paling penting (css kritis), yang diperlukan untuk rendering awal halaman. Pada gilirannya, yang utama file css akan dimuat setelah konten dimuat. Kebanyakan pemula membuat kesalahan serius pada tahap ini dan memasukkan semua gaya yang tersedia ke dalam dokumen. Hal ini tidak hanya tidak menyelesaikan situasi, tetapi juga memperburuknya.

Solusi yang benar:



/*Css penting*/
h1 (perataan teks: tengah; warna: #ccc )



Konten Halaman
...



$(dokumen).siap(fungsi() (
$("kepala").tambahkan("");
});


Kesalahan umum lainnya adalah menciptakan jumlah besar aturan untuk css kritis. Ini tipikal untuk situs dengan sejumlah besar konten di halaman - berbagai bilah geser, widget, dll. Jika kita mengurangi jumlah aturan, halaman akan tersentak. Jika kita meningkatkannya, kita akan mendapat peringatan “Optimalkan pemuatan konten yang terlihat.” Dalam hal ini, saya akan merekomendasikan menggabungkan semua gaya ke dalam satu file dan menghubungkannya dengan cara tradisional.

Sebagai kesimpulan, saya ingin menambahkan itu Kecepatan Laman Googlealat yang bagus untuk mengidentifikasi area masalah di situs Anda. Namun saat menganalisis, hal ini tidak diperhitungkan karakteristik individu. Oleh karena itu, saran yang paling penting: lakukan pendekatan yang bijaksana dalam menerapkan rekomendasinya!

Halo, rekan-rekan webmaster yang terkasih! Hanya sedikit dari kita yang belum memeriksa kecepatan memuat situs web kita menggunakan layanan PageSpeed ​​​​Insight yang terkenal dari Google dan belum menemukan rekomendasi - " ".

Ini bahkan bukan masalah kerumitan penerapannya, tetapi prospek menyedihkan karena harus melakukan operasi setiap kali setelah pembaruan plugin berikutnya. Semua JavaScript dan CSS ekstensi yang dipasang, yang dipindahkan secara manual dari bagian atas laman akan segera kembali setelah memperbarui ekstensi yang sama.

Jadi mengapa semua kesulitan ini ketika masalah dapat diselesaikan dengan menginstal plugin yang akan melakukan pekerjaan yang diperlukan untuk Anda untuk selamanya. Permainan ini sepadan dengan lilinnya, karena peningkatan kecepatan akan berkali-kali lipat melebihi kerugian dari beban ekspansi.

Jadi, untuk mengikuti rekomendasi Google untuk menghapus kode javascript dan CSS dari bagian atas halaman, saya mengontrak plugin Autoptimize, yang menggabungkan skrip dan gaya ke dalam satu file dan memindahkannya dari bagian atas halaman, itulah yang sebenarnya kami capai. Selain itu, plugin ini memperpendek HTML, JS dan CSS (nilai tambah lainnya bagi kami dari PageSpeed ​​​​Insight).

Dengan cara ini kita akan membunuh banyak burung dengan satu batu :-).

Plugin dapat ditemukan berdasarkan namanya melalui pencarian di panel admin situs atau diunduh dari repositori WordPress di - https://ru.wordpress.org/plugins/autoptimize/

  • Setelah menginstal dan mengaktifkan Autoptimize, buka pengaturannya.
  • Centang kotaknya.

  • Selanjutnya, buka pengaturan lanjutan plugin, yang ada di sebelah kanan pojok atas klik tombol " Tampilkan pengaturan lanjutan"
  • Untuk berhasil menyelesaikan misi ke situs tersebut, yang harus saya lakukan hanyalah mencentang kotak keenam Sebariskan semua CSS di opsi CSS seperti pada gambar di bawah dan hanya itu.

    Dalam kasus Anda, segalanya mungkin menjadi sedikit lebih rumit. Misalnya beberapa plugin yang digunakan perpustakaan jQuery, mereka berhenti bekerja dan Anda harus mengutak-atik pengaturannya lebih dekat. Seperti yang Anda ketahui, kasusnya berbeda-beda, jadi mari kita lihat semua pengaturan plugin Autoptimize.

    1 Aktifkan opsi " Optimalkan kode HTML" jika PageSpeed ​​​​Insight memintanya.

    2 komentar HTML Saya tidak menyimpannya karena tidak perlu.

    Jika setelah mengaktifkan plugin di bawah rekomendasi "Hapus dari atas..." menghilang dari daftar JS dan situs terus berfungsi seperti sebelumnya, tanpa distorsi, tanpa konflik plugin, dll., biarkan pengaturan di sini apa adanya. Jika tidak, bereksperimenlah dengan opsi berikut:

    1 Paksa JavaScript masuk

    Beberapa skrip memerlukan pemuatan hanya dari bagian atas halaman (yang baru saja kita hapus), jika tidak, skrip tersebut tidak akan berfungsi dengan benar atau bahkan mogok. Opsi ini memberi mereka kondisi ini, yang membuat PageSpeed ​​​​Insight tidak senang. Aktifkan sebagai upaya terakhir, hanya jika fungsi di bawah ini tidak membantu.

    2 Juga menggabungkan JS sebaris

    Kita berbicara tentang mengintegrasikan JS ke dalam HTML. Setelah diaktifkan, pengembang meyakinkan, kecepatan situs akan meningkat secara signifikan. Opsi ini aktif secara default.

    3 Kecualikan skrip dari Optimasi Otomatis

    Masukkan di kolom, dipisahkan dengan koma, nama file skrip yang tidak boleh diintegrasikan ke dalam HTML, hal ini jika terjadi konflik dengan operasi JS setelah integrasi.

    4 Tambahkan pembungkus coba-tangkap

    Jika ada skrip yang tidak berfungsi dengan benar, skrip lainnya tidak akan hidup. Opsi ini memungkinkan Anda untuk melewati JS yang rusak dan terus bekerja.

    Banyak webmaster menempatkannya di sidebar berbagai blok, berjalan di JS. Ini bisa berupa blok berlangganan, pengalihan lalu lintas program afiliasi dan sejenisnya. Untuk mencegah skrip blok memblokir unduhan (plugin menolak menyelesaikan masalah ini), tunda saja. Untuk melakukan ini, cukup masukkan atribut " asinkron" ke dalam kode script seperti pada screenshot.

    1 Optimalkan kode CSS

    Seperti yang telah dibahas, opsi ini memperpendek semua CSS dan menggabungkannya menjadi satu file. Ini tidak cukup untuk menghapus CSS dari bagian atas halaman.

    2 Hasilkan data: URL untuk gambar

    Jika ada file CSS yang berisi jalur ke gambar kecil (kurang dari 4kb), maka permintaan ini akan ditulis di file CSS utama.

    3 Hapus Google Font

    Mengganti font Google (yang karena alasan tertentu PageSpeed ​​​​Insight tidak suka jika ada) dengan yang standar.

    4 Juga menggabungkan CSS sebaris

    Seperti halnya JS, opsi ini mengintegrasikan bagian CSS tersebut ke dalam HTML yang dianggap perlu, yang juga akan berdampak positif pada kecepatan pemuatan.

    5 Sebaris dan Tunda CSS

    Memungkinkan Anda mengintegrasikan ke dalam HTML hanya CSS dari rendering situs yang terlihat dengan pemuatan lambat dari sisa kode CSS.

    Jika diaktifkan, sebuah bidang akan terbuka di mana Anda perlu memasukkan bagian rendering CSS yang terlihat ini. Berguna untuk mega-portal dengan banyak file CSS, agar tidak memperbesar HTML-nya ke ukuran yang mahal.

    Ada beberapa layanan untuk mendefinisikan rendering CSS yang terlihat, yang disebutkan di bagian "fag" pada halaman plugin. Saya belum pernah mengaktifkan fungsi ini dan belum akan menjelaskannya, kecuali Anda bertanya di komentar.

    6 Sejajarkan semua CSS

    Berbeda dengan poin sebelumnya, opsi ini mengintegrasikan semua gaya ke dalam HTML. Setelah aktivasi, sebagai suatu peraturan, Kecepatan HalamanInsight berhenti mengumpat pada pemblokirCSS di bagian atas halaman.

    7 Kecualikan CSS dari Pengoptimalan Otomatis

    Mengoptimalkan CSS, seperti JS, dapat memerlukan hal tersebut operasi yang salah. Tambahkan file-file ini di sini untuk mengecualikannya dari pengoptimalan.

    URL Basis CDN

    Jika situs menggunakan server CDN untuk mengurangi waktu pemuatan saat mentransfer data jarak jauh, masukkan URL-nya di sini.

    Simpan skrip/css gabungan sebagai file statis

    Opsi ini akan menonaktifkan kompresi statis skrip dan gaya. Aktifkan jika situs menggunakan kompresi Gzip.

    Setelah selesai atau saat mengerjakan pengaturan Autoptimize, tentunya Anda ingin melihat hasil pekerjaan Anda pada layanan tersebut di atas. Simpan perubahan dengan menekan tombol " Simpan perubahan dan hapus cache" untuk hanya memeriksa halaman terkini.

    Saya harap Anda bisa mengatasinya, kecepatan situs Anda akan meningkat dan mesin pencari pasti akan menyadarinya.

    Hapus kode javascript dan CSS dari bagian atas halaman kapan bantuan WordPress Plugin pengoptimalan otomatis diperbarui: 29 April 2017 oleh Roman Vakhovsky

    Pesannya adalah rekomendasi Google untuk mempercepat situs Anda. Keinginan untuk mengoptimalkan sumber daya seperti itu dapat dipenuhi jika Anda memeriksa kecepatan pemuatan situs Anda di PageSpeed ​​​​Tools.

    Hapus kode JavaScript dan CSS yang menghalangi bagian atas halaman untuk dirender. Apa artinya ini

    Pada sumber dayanya, Google menganalisis situs dan memberikan rekomendasi dasar - apa yang harus dilakukan webmaster untuk mengurangi waktu pemuatan halaman, yang berarti hal ini akan meningkatkan posisi situs dalam hasil pencarian.

    Jika rekomendasi lainnya, seperti: optimalkan gambar, optimalkan pemuatan konten yang terlihat, dan sejenisnya, tidak menjadi masalah, maka “hapus kode JavaScript dan CSS yang menghalangi tampilan bagian atas halaman”, yang merupakan salah satu salah satu tindakan paling penting, membuat pemilik situs menggaruk-garuk kepala - bagaimana hal ini dapat diperbaiki.

    Saya akan segera mengatakan - saya tidak pandai pemrograman dan dalam bidang saya sendiri blog WordPress Saya lebih suka skrip perubahan manual kode file sistem. Saya bertanya-tanya bagaimana cara melakukannya rekomendasi ini dan aku menemukan jalan keluarnya.

    Plugin Autoptimize memperbaiki masalah ini

    1) Instal plugin Optimasi Otomatis.

    2) Atur persis seperti yang saya jelaskan di .

    3) Jika PageSpeed ​​​​Tools masih menunjukkan kesalahan, lihat skrip apa yang bereaksi dan hapus dari baris di pengaturan plugin Autoptimize (Opsi JavaScript - Kecualikan skrip dari Autoptimize). Artinya akan dioptimalkan.

    4) Bersukacitalah! PageSpeed ​​​​Tools tidak lagi mengeluh.

    Saya telah memberi tahu Anda cara mengatasi rekomendasi untuk menghapus kode JavaScript dan CSS yang memblokir render di bagian atas halaman. Sekarang bagian yang terlihat halaman mulai dimuat lebih cepat, situs menempati posisi lebih tinggi dalam hasil pencarian, dan pengunjung menjadi lebih banyak.

    Omong-omong, berikut ini perbandingan penilaian situs saya sebelum saya mulai melakukan optimasi (saat itu saya masih bodohnya menggunakan desainer WIX) dan setelah saya beralih ke WordPress (di sini saya mendapatkan berbagai macam alat untuk meningkatkan blog saya). Hari ini skor saya 96%. Bagaimana denganmu?

    Ditambahkan pada 17/05/2017:

    Saya menghapus Webvisor dari Yandex (karena sangat memperlambat kecepatan pemuatan) dan mengubah kode Metrica di situs. Sekarang saya punya 98%.

    Apa yang harus dilakukan jika Google PageSpeed ​​​​mendeteksi kode JavaScript dan CSS yang menghalangi bagian atas halaman untuk dirender. Mari kita cari tahu apa inti dari klaim Google terhadap situs Anda:

    Saat pengguna membuka situs web, browser mengirimkan permintaan ke server, menerima hasilnya dan menyajikannya. Semuanya terjadi begitu sederhana dengan situs tanpa penggeser, elemen dan gaya dinamis. Satu permintaan - satu jawaban. Jika situs Anda punya konten interaktif, skemanya menjadi lebih rumit: mereka dimuat ke dalam kode html file tambahan(.css, .js, dll.)

    Kecepatan situs bergantung pada jumlah permintaan ke server eksternal (permintaan JS, CSS, gambar) dan jumlah informasi yang pada akhirnya perlu dikembalikan. Secara khusus, kode JavaScript dan CSS yang memblokir pemuatan halaman juga dikaitkan dengan permintaan eksternal, yang mencegah browser menampilkan layar pertama dengan cepat kepada pengguna.

    Jika kode JavaScript ditempatkan di header situs, browser akan berhenti dan menunggu respons dari server yang ditautkan oleh skrip. Jika tidak menemukan skrip js pada awal rendering, hasil awal akan dimuat lebih cepat.

    Hapus JavaScript dan CSS dari bagian atas halaman

    Untuk memastikan situs web Anda memenuhi persyaratan pengoptimalan ini:

    • hapus kode JS dari tag (bagian atas halaman). Pastikan setiap panggilan ke sumber daya eksternal ditempatkan sedekat mungkin dengan akhir file html. Permintaan JavaScript harus ditempatkan sebelum tag penutup.

    Pengecualiannya adalah CSS: disarankan untuk memuat gaya dalam tag, yang sudah direkatkan sebelumnya dan diminimalkan. Baca tentang pengoptimalan kode CSS.

    • menggunakan pemuatan asinkron javascript Pemuatan asinkron akan memungkinkan browser untuk tidak berhenti menunggu respons dari server eksternal dan terus memproses dokumen HTML utama. Untuk menambahkan pemuatan asinkron, gunakan atribut async.

    Harap dicatat

    Tindakan yang tercantum memengaruhi skrip kode situs Anda. Hal ini dapat menyebabkannya tidak ditampilkan dengan benar di browser. Oleh karena itu, kami menyarankan untuk membuat cadangan situs terlebih dahulu. Untuk meminimalkan risiko, hubungi pengembang situs. Spesialis dukungan teknis Situs ini tidak dikonsultasikan mengenai optimalisasi skrip situs.

    Anda dapat secara otomatis menghapus kode JavaScript dan CSS dari bagian atas halaman menggunakan plugin CMS khusus.

    • Sergei Savenkov

      semacam ulasan "pendek"... seolah-olah mereka sedang terburu-buru di suatu tempat