Cara Membuat Permintaan HTTP Lebih Sedikit di WordPress dan Mempercepat Situs Anda

Diterbitkan: 2021-10-13

Apakah Anda mengalami situs WordPress yang lambat? Terlalu banyak permintaan HTTP bisa menjadi sumber masalahnya. Mengurangi waktu buka halaman situs Anda dengan membuat lebih sedikit permintaan HTTP meningkatkan seberapa cepat pengguna dapat mengakses konten itu dan memengaruhi keseluruhan pengalaman penjelajahan web mereka. Kecepatan pemuatan halaman penting, dan secara langsung memengaruhi perasaan pengguna tentang penggunaan aplikasi atau situs web.

Kurangi permintaan HTTP dengan WP Rocket

Tapi apa itu permintaan HTTP? Berapa banyak yang harus dibuat per halaman? Berapa banyak permintaan yang Anda tangani saat ini? Tetap bersama kami: dalam artikel ini, kami akan mendefinisikan permintaan HTTP, menjelaskan mengapa itu penting, bagaimana mengukurnya, dan bagaimana menjaganya tetap rendah .

Apa Itu Permintaan HTTP?

HTTP adalah protokol komunikasi yang digunakan untuk mengirimkan konten dan data (file HTML, CSS, gambar, video, dll.) di Internet. World Wide Web adalah tempat yang luas dengan banyak informasi yang dihosting di server, bukan? Jika Anda ingin mengakses konten ini, browser Anda perlu mengirim permintaan dan menerima tanggapan. Tanpa permintaan, tidak ada komunikasi yang efektif antara Anda dan server.

Permintaan HTTP juga dapat dilihat sebagai lapisan komunikasi antara pengguna dan server. Pesan yang dikirim oleh klien disebut HTTP (Hypertext Transfer Protocol), yang membantu menyusun pesan permintaan secara efektif dalam tiga bagian: baris permintaan, header, dan isi.

Permintaan HTTP antara browser web dan server
Permintaan HTTP antara browser web dan server


Seperti yang Anda lihat, setiap kali Anda mengunjungi situs, beberapa permintaan HTTP dibuat untuk menampilkan konten. Akibatnya, semakin banyak permintaan HTTP yang dibuat pada suatu halaman, semakin lama waktu yang dibutuhkan untuk memuat.

Anda mungkin bertanya-tanya, berapa banyak permintaan HTTP yang "terlalu banyak" permintaan HTTP? Mari membahas beberapa tokoh kunci sehingga Anda tahu di mana memposisikan situs WordPress Anda:

  • Performa luar biasa: mendapatkan permintaan HTTP di bawah 25 per halaman
  • Performa yang sehat: menjaga permintaan HTTP di bawah 50 per halaman
  • Rata-rata permintaan HTTP di web: 70 permintaan HTTP
Permintaan per halaman di seluler dan desktop antara 2017 dan 2021 — Sumber: httparchive.org
Permintaan per halaman di seluler dan desktop antara 2017 dan 2021 — Sumber: httparchive.org
Untuk menyimpulkan:

Permintaan HTTP tidak semuanya buruk.

Situs WordPress Anda membutuhkan mereka untuk merender konten dan terlihat bagus.

Anda tidak memerlukan permintaan HTTP sebanyak yang Anda miliki (pertahankan di bawah 50 per halaman).

Ini semua tentang keseimbangan: miliki permintaan HTTP sesedikit mungkin tanpa mengorbankan pengalaman pengguna.

Sangat penting untuk menjaga situs Anda tetap sehat karena terlalu banyak permintaan HTTP akan memperlambat situs Anda. Kami menjelaskan alasannya di bagian selanjutnya.

Mengapa Anda Harus Mengurangi Permintaan HTTP

Anda harus membuat lebih sedikit permintaan HTTP untuk mempertahankan kecepatan dan kinerja yang luar biasa. Yahoo mengatakan bahwa "80% dari waktu respons pengguna akhir dihabiskan di front-end". Dengan kata lain, kinerja Anda terutama dipengaruhi oleh gambar, stylesheet, dan skrip, yang semuanya dirender berkat permintaan HTTP.

Mereka adalah komponen kunci untuk menampilkan konten, tetapi mengobrol bolak-balik antara server dan pengguna membutuhkan waktu untuk memuat. Data bolak-balik ini disebut waktu respons pulang-pergi (RTT):

RTT: waktu yang diperlukan server untuk menanggapi permintaan file saat seseorang mengunjungi situs Anda.
RTT: waktu yang diperlukan server untuk menanggapi permintaan file saat seseorang mengunjungi situs Anda.


Alasan lain untuk membuat permintaan HTTP lebih sedikit adalah untuk menjaga Data Web Inti Anda tetap sehat, terutama KPI Cat Konten Terbesar (LCP) Anda.

LCP menentukan seberapa cepat konten pertama yang bermakna dimuat. Ini semua tentang persepsi kecepatan dari pengguna.

Berikut panduan yang harus Anda baca: Cara meningkatkan skor LCP Anda di WordPress.

Tiga faktor memengaruhi skor LCP situs WordPress Anda: waktu respons server yang lambat, JavaScript dan CSS yang memblokir render, dan waktu muat sumber daya yang lambat. Oleh karena itu, mengurangi jumlah permintaan HTTP Anda adalah kunci untuk halaman yang lebih cepat. Semakin sedikit permintaan HTTP yang dibuat situs web Anda, semakin cepat dapat memuat konten terpenting (LCP) kepada pengguna.

Untuk menyimpulkan:

Banyak file di situs WordPress Anda? → Anda mendapatkan banyak Permintaan HTTP

File besar dan berat? → Anda mendapatkan Permintaan HTTP yang lebih panjang

Permintaan HTTP yang lebih lama → Tingkatkan waktu pemuatan yang sebenarnya

Kurangi permintaan HTTP Anda → Dampak positif pada LCP Anda

Dan ingat, jika pengguna dapat mengakses konten Anda lebih cepat, Anda meningkatkan kemungkinan mereka tetap berada di halaman dan berinteraksi dengan situs Anda. Berinteraksi juga berarti bahwa mereka dapat membeli produk Anda… Dan Anda tidak hanya menghindari frustrasi pengunjung, tetapi Google juga akan menyukai situs Anda.

Itu membawa kita ke pertanyaan penting berikutnya: berapa banyak permintaan HTTP yang dibuat oleh situs WordPress Anda ?

Cara Menguji dan Mengukur Permintaan HTTP Situs Anda

Ada beberapa alat online yang mensimulasikan permintaan HTTP di situs WordPress Anda, yaitu:

  • GTmetrix ( Anda harus memiliki akun gratis untuk mengakses detail halaman Anda ) — cukup masukkan URL situs Anda, jalankan audit dan buka tab “Ringkasan” . Gulir ke bawah ke bagian terakhir yang disebut "Rincian Halaman" untuk mengetahui berapa banyak permintaan yang dibuat halaman Anda.
Menemukan Permintaan Halaman Total — Sumber: GTmetrix
Menemukan Permintaan Halaman Total — Sumber: GTmetrix


Tab air terjun adalah cara yang bagus untuk melihat berapa lama permintaan HTTP individual berlangsung di situs Anda:

Permintaan dengan waktu pemuatannya — Sumber: GTmetrix
Permintaan dengan waktu pemuatannya — Sumber: GTmetrix


Anda juga dapat melihat permintaan HTTP yang berasal dari plugin tertentu, seperti Elementor:

Mengidentifikasi file terberat berdasarkan plugin — Sumber: GTmetrix
Mengidentifikasi file terberat berdasarkan plugin — Sumber: GTmetrix
GTmetrix didukung oleh teknologi Lighthouse. Jika Anda ingin mempelajari lebih lanjut tentang KPI Lighthouse, kami memiliki tutorial mendetail yang berfokus pada cara meningkatkan skor kinerja Lighthouse.
  • Pingdom — cukup masukkan URL Anda ke dalam kotak untuk mengetahui berapa banyak Permintaan HTTP yang diminta halaman Anda:
Permintaan HTTP — Sumber: Pingdom
Permintaan HTTP — Sumber: Pingdom
  • Query Monitor — alat debugging gratis untuk mengidentifikasi plugin atau skrip yang memperlambat pemuatan halaman. Panel Panggilan API HTTP menampilkan informasi tentang permintaan HTTP yang dilakukan selama pemuatan halaman.
Panel admin — Sumber: Query Monitor
Panel admin — Sumber: Query Monitor

10 Cara Membuat Permintaan HTTP Lebih Sedikit ke Situs Web Anda (Secara Manual dan Dengan Plugin)

Lebih sedikit permintaan HTTP berarti lebih sedikit byte untuk diunduh, tetapi memulai pengoptimalan ini bisa jadi menakutkan. Jangan khawatir. Berkat daftar teknik kami di bawah ini, Anda dapat mengurangi permintaan HTTP Anda. Untuk setiap taktik, kami akan selalu memberikan dua solusi: menggunakan plugin WordPress dan manual.

1. Gabungkan CSS & JavaScript

Dampak: Tinggi

Cara mudah untuk mengurangi permintaan HTTP adalah dengan menggabungkan beberapa file JS dan CSS.

Dengan tema dan plugin WordPress Anda, banyak lembar gaya CSS dan JS perlu dimuat. Ini membutuhkan browser untuk memuat semua sumber daya ini untuk merender halaman web, yang berarti beberapa permintaan HTTP.

Menggabungkan JS dan CSS — Sumber: KeyCDN
Menggabungkan JS dan CSS — Sumber: KeyCDN

Menggabungkan CSS dan JS menggunakan alat online:

  • Minify — Menggabungkan beberapa file CSS atau JavaScript.
  • Gabungkan– skrip PHP dikombinasikan dengan penulisan ulang URL untuk menggabungkan dan mengompresi file CSS dan JavaScript.
  • csscompressor.net (CSS saja) — Kompresor CSS online, cepat dan gratis untuk digunakan.
  • jscompress.com (JS only) — Alat kompresi JavaScript ini memungkinkan Anda untuk menggabungkan file JavaScript menjadi satu file.
  • SmartOptimizer — Pustaka PHP yang meningkatkan kinerja situs web Anda dengan mengoptimalkan ujung depan menggunakan teknik penggabungan.
  • CSS-JS-Booster — Menggabungkan, mengecilkan, dan meng-gzip file CSS dan JavaScript.
  • CSS Crush — Menggabungkan dan mengecilkan file CSS.
  • csscompressor.net (CSS saja) — kompresor CSS online, cepat dan gratis untuk digunakan.
  • jscompress.com (JS only) — Alat kompresi JavaScript ini memungkinkan Anda untuk menggabungkan file JavaScript menjadi satu file.

Mengunggah file CSS & JS gabungan baru Anda ke situs WordPress Anda:

Tujuan kami adalah untuk menyatukan semua permintaan terpisah ke dalam satu file.

  • Cukup salin/tempel semua kode CSS Anda ke dalam satu file utama dan unggah kembali file tersebut ke server (lakukan ini hanya jika Anda merasa nyaman dengan file WordPress Anda)
  • Jika Anda menggunakan C-panel:
    • Masuk ke cPanel Anda
    • Buka 'Manajer File' Anda
    • Klik pada folder yang berisi situs WordPress Anda
    • Buat folder di direktori root Anda dengan file gabungan baru

Menggabungkan file CSS & JS menggunakan plugin (cara tercepat dan teraman):

  • WP Rocket: menggabungkan file yang diperkecil menjadi satu file per jenis file (CSS atau JavaScript)
Gabungkan File CSS - WP Rocket
Gabungkan file CSS – WP Rocket
Gabungkan file JS - WP Rocket
Gabungkan file JS – WP Rocket
  • Autoptimize: membantu Anda dengan rangkaian skrip Anda (CSS atau JavaScript).

2. Gabungkan Gambar dengan CSS Sprite

Dampak: Tinggi

Sprite CSS adalah cara yang bagus untuk mengurangi jumlah permintaan HTTP yang dibuat untuk sumber daya gambar. Semua file CSS di situs Anda memblokir perenderan, artinya semakin banyak file CSS dimuat, semakin besar kemungkinan ini akan memperlambat situs Anda.

Untuk menghindari hal ini, Anda harus mengoptimalkan gambar di situs Anda dan menggabungkannya menjadi satu file. Setelah ini selesai, saatnya untuk bersandar pada teknik sprite CSS: gunakan CSS untuk menampilkan hanya sebagian dari file gambar yang diperlukan. Teknik ini meningkatkan kinerja situs di mana banyak gambar kecil, logo, atau ikon digunakan.

Anda dapat mempelajari lebih lanjut di artikel khusus kami tentang menggabungkan gambar menggunakan sprite CSS di WordPress.

Kandidat gambar bagus berwarna merah — Sumber: Beranda Yahoo
Kandidat gambar bagus dengan warna merah — Sumber: beranda Yahoo

Menggabungkan gambar dengan sprite CSS menggunakan alat berbasis web:

  • Generator Sprite CSS, Editor, dan Kode
  • CSSspritetool
    • Buka situs CSSspritetool untuk menggabungkan beberapa gambar menjadi satu menggunakan pembuat drag-and-drop.
    • Anda mendapatkan file gambar gabungan, bersama dengan beberapa kode CSS untuk setiap gambar yang Anda unggah.
    • Unggah file gambar gabungan ke situs WordPress Anda
    • Tambahkan kode CSS ke situs WordPress Anda menggunakan Customizer
    • Tampilkan setiap gambar di tempat yang Anda inginkan menggunakan HTML

3. Optimalkan Gambar (dan Hapus Yang Tidak Penting)

Dampak: Tinggi

Meskipun tidak ada plugin WordPress yang memungkinkan Anda untuk secara khusus menggabungkan gambar dengan sprite CSS, Anda masih dapat menggunakan beberapa plugin luar biasa untuk mengoptimalkan gambar Anda. Gambar harus dimiliki untuk pengalaman pengguna, tetapi inilah masalahnya: setiap gambar di situs Anda adalah permintaan HTTP yang terpisah! Akibatnya, pilihlah dengan bijak dan pertimbangkan untuk hanya memiliki gambar yang memberi nilai pada konten Anda.

Mengoptimalkan gambar berarti mengurangi bobotnya tanpa mengurangi kualitas. Tidak ada gunanya membuat gambar yang terang diburamkan di mana kontennya bahkan tidak dapat diidentifikasi, bukan?

Berikut adalah beberapa alat pengubahan ukuran yang dapat Anda gunakan:

  • Photoshop
  • GIMP — Gratis, Windows & Mac
  • IrfanView — Gratis untuk Windows
  • Pratinjau untuk Mac — Sudah terpasang!

Untuk mengoptimalkan gambar Anda secara otomatis, kami menyarankan Anda untuk menggunakan plugin WordPress:

  • Bayangkan — oleh WP Media, perusahaan yang sama di belakang WP Rocket. Optimalkan hingga 20 MB gambar gratis per bulan.
  • Optimole (Optimasi gambar & Lazy Load oleh Optimole)

Baca artikel khusus kami untuk menemukan lebih banyak plugin pengoptimalan gambar.

Catatan : mengoptimalkan gambar tidak akan secara langsung mengurangi jumlah permintaan HTTP, tetapi akan mengurangi ukurannya dan membuatnya dimuat lebih cepat.

4. Aktifkan Lazy Load pada Gambar

Dampak: Tinggi

Menerapkan “lazy load” berarti menunda pemuatan gambar di luar viewport browser. Dengan kata sederhana, jika pengunjung Anda tidak menggulir ke bawah sepenuhnya, gambar yang ditempatkan di akhir halaman bahkan tidak akan dimuat. Berkat skrip pemuatan lambat, Anda mengurangi jumlah permintaan HTTP karena Anda hanya memuat gambar di paro atas.

Menerapkan skrip pemuatan malas secara manual:

Pertama, Anda perlu menentukan bagaimana Anda akan memuat gambar Anda: apakah Anda menggunakan tag <img> atau CSS? Web.Dev menjelaskan dengan sangat baik bagaimana mengimplementasikan skrip lazy load untuk kedua metode. Anda juga perlu memeriksa apakah elemen tersebut berada di viewport menggunakan Intersection Observer API.

Beginilah tampilan lazy load masing-masing pada gambar dan iframe:

<img src=”image.jpg” alt=”…” loading=”malas”><iframe src=”video-player.html” title=”…” loading=”malas”></iframe>

​​Menggunakan plugin lazy load untuk menerapkan skrip secara otomatis:

  • Lazy Load oleh WP Rocket (Gratis) — menampilkan konten hanya jika terlihat oleh pengguna.
  • WP Rocket — hadir dengan fitur lazy load. Ini adalah plugin premium yang hadir dengan banyak keuntungan lain seperti caching, membersihkan kode Anda, dll.)
  • Jika Anda mencari lebih banyak plugin pemuatan malas, lihat artikel kami.

5. Perkecil HTML, CSS, dan JavaScript

Dampak: Sedang

Memperkecil kode Anda berarti menghapus spasi, komentar, dan karakter tambahan yang tidak perlu dari file untuk membuatnya lebih ringan. Teknik ini dapat diterapkan pada file JavaScript, CSS, dan HTML. Tentu saja, ini semua tentang membersihkan kode yang tidak penting bagi pengguna akhir.

Contoh JS . yang tidak diperkecil Contoh JS . yang diperkecil

Memperkecil kode Anda secara manual :

Sebelum Anda mengedit file, unduh salinan dari server Anda untuk menyimpannya di komputer Anda untuk diamankan.

  • Memperkecil HTML: buka lembar kode Anda dan hapus komentar (<!– … –>), spasi ekstra, jeda baris, dan konten serupa
  • Memperkecil CSS: menghapus spasi dan komentar ekstra dari file CSS (/* … */) Persingkat ID, kelas, atau nama variabel sebanyak mungkin
  • Memperkecil JS: hapus komentar JS (//) dan spasi tambahan dari kode sumber. Ubah array menjadi objek bila memungkinkan, optimalkan pernyataan kondisional Anda, dan temukan jawaban untuk ekspresi konstanta dasar.

Memperkecil kode Anda menggunakan alat online :

  • Gunakan editor kode seperti teks Sublime untuk mengedit file
  • Tempelkan kode Anda di salah satu alat online tersebut: Closure Compiler, CSS nano, JS nano, UNCSS. (Kami memiliki daftar lengkap kode minifying gratis untuk Anda periksa).
  • Ganti kode lama Anda dengan kode baru yang diperkecil dan unggah kembali ke situs Anda

Menggunakan plugin WordPress untuk mengecilkan kode Anda :

  • WP Rocket — mengecilkan CSS dan JS Anda secara otomatis. Yang perlu Anda lakukan adalah mencentang dua kotak. WP Rocket memiliki bagian khusus untuk pengoptimalan file.
Perkecil file CSS - WP Rocket
Perkecil file CSS – WP Rocket
Perkecil file JS - WP Rocket
Perkecil file JS – WP Rocket

6. Ganti Plugin Berat dengan Yang Ringan

Dampak: Sedang

Kecepatan pemuatan situs Anda yang lambat dapat disebabkan oleh satu atau dua plugin yang membebani situs WordPress Anda dengan terlalu banyak permintaan HTTP. Untuk mengklasifikasikan plugin sebagai ringan, Anda harus melihat: kualitas & profesionalisme kode, fitur, seberapa efisien kode mengeksekusinya, dan ukuran file.

Bagaimana cara menandai plugin lambat di situs WordPress Anda?

Katakanlah Anda ragu-ragu antara dua plugin formulir kontak (A dan B). Gunakan 5 langkah kami untuk menjalankan diagnosis Anda:

  1. Jalankan tes kinerja menggunakan Pingdom untuk memeriksa jumlah permintaan HTTP Anda — tulis skor Anda
  2. Aktifkan plugin A dan jalankan tes Anda lagi- tulis skor Anda
  3. Nonaktifkan plugin A dan instal plugin B untuk melakukan audit yang sama
  4. Bandingkan berapa banyak permintaan HTTP yang telah ditambahkan untuk setiap plugin
  5. Pilih satu dengan permintaan HTTP lebih sedikit dan hapus yang lambat!

Menggunakan plugin untuk mengidentifikasi plugin mana yang memperlambat situs Anda dengan terlalu banyak permintaan HTTP:

  • Plugin Query Monitor dapat digunakan untuk mengidentifikasi plugin mana yang merusak situs Anda dan membantu Anda menghapusnya
Mengidentifikasi plugin yang lambat dengan Plugin Query Monitor — Sumber: Onlinemediamaster

7. Muat Script Hanya Saat Dibutuhkan (dan Hanya di Halaman Tertentu)

Dampak: Sedang

Cara lain untuk mengurangi permintaan HTTP adalah dengan menonaktifkan skrip dan plugin secara selektif dari halaman/postingan tertentu yang tidak perlu dimuat.

Gunakan plugin WordPress untuk memuat skrip hanya jika diperlukan:

  • Perfmatters memungkinkan Anda untuk menonaktifkan skrip pada halaman atau posting.
Pilih tempat untuk tidak menjalankan skrip dengan alat pengelola skrip — Sumber: Global View of Perfmatters
Pilih tempat untuk tidak menjalankan skrip dengan alat pengelola skrip — Sumber: Global View of Perfmatters
  • Asset Cleanup Pro yang sedikit kurang ramah pengguna tetapi juga berfungsi.
Pembersihan Aset Pro
Pembersihan Aset Pro

8. Kurangi Script Eksternal / Permintaan HTTP

Dampak: Sedang

Memuat setiap skrip pihak ketiga adalah permintaan HTTP tambahan yang dibuat oleh browser, memperlambat kinerja halaman (berikut cara Anda dapat mengurangi dampak skrip pihak ketiga). Melacak semua integrasi pihak ketiga Anda sangat penting untuk memahami aset eksternal mana yang memperlambat kecepatan situs Anda. Kami telah menjelaskan cara mengurangi permintaan HTTP Anda . Biar tidak terpengaruh oleh pihak luar, kan?

Terlalu banyak permintaan HTTP akan sering memaksa sumber daya untuk diambil dari jaringan, dan kami tidak menginginkan ini untuk kinerja kami.

Skrip eksternal terutama berasal dari tag Google Analytics, Piksel Facebook, video YouTube, tombol berbagi sosial, dan tag pengujian A/B. Sangat disarankan untuk mengidentifikasi semua file yang menambahkan permintaan.

Menggunakan alat untuk mengidentifikasi skrip eksternal terberat:

  • Alat kinerja seperti Chrome DevTools, PageSpeed ​​Insights, dan WebPageTest ini dapat membantu Anda mengidentifikasinya.
Mengidentifikasi skrip eksternal yang memperlambat situs saya — Sumber: Chrome DevTools
Mengidentifikasi skrip eksternal yang memperlambat situs saya — Sumber: Chrome DevTools

Mengoptimalkan permintaan pihak ketiga secara manual :

Sekarang setelah Anda mengidentifikasi skrip eksternal mana yang memengaruhi kinerja, Anda dapat menggunakan atribut async atau defer pada skrip tersebut:

< skrip asinkron src= “script.js”> < penangguhan skrip src= “script.js”>

Jika Anda ingin mempelajari lebih lanjut tentang menggunakan kedua atribut, kami sarankan untuk membaca Web.Dev, yang mencantumkan semua langkah untuk memuat JS pihak ketiga secara efisien.

Menggunakan plugin untuk mengurangi dampak skrip eksternal Anda pada kinerja:

  • WP Rocket membantu Anda mengurangi dampak kode pihak ketiga dalam banyak cara:
    • Hosting file dan tag Google Analytics secara lokal.
    • Mengambil terlebih dahulu permintaan DNS, artinya file eksternal akan dimuat lebih cepat.
    • Memuat font untuk membantu browser menemukan font Google lebih cepat di file CSS Anda.
Prefetching DNS dan font preloading — Sumber: WP Rocket
Prefetching DNS dan font preloading — Sumber: WP Rocket
  • ​​Menangguhkan JS pihak ketiga Anda seperti iklan dan analitik, cukup beri tahu browser Anda apa yang harus dia muat terlebih dahulu.

Untuk ceritanya, Telegraph baru-baru ini menangguhkan semua skrip mereka dan meningkatkan waktu pengisian iklan rata-rata empat detik.

9. Gunakan CDN

Dampak: Sedang

Jaringan Pengiriman Konten (CDN) mengacu pada server yang didistribusikan secara geografis yang menyajikan konten dari lokasi terdekat. Di mana pun pengguna berada, mereka dapat mengakses konten situs Anda dengan cepat dan efisien. Setiap permintaan HTTP yang dibuat oleh mereka akan dilayani dari lokasi terdekat.

CDN terbaik yang tersedia di pasaran:

  • RocketCDN
  • CDN Cloudflare

Kami juga menulis panduan untuk membantu Anda memilih CDN yang tepat untuk Anda.

10. Tunda Render-Blocking JavaScript dan CSS

Dampak: Sedang

Apakah sumber daya ini sangat berguna, atau bolehkah memuatnya nanti? Kebutuhan mendesak untuk menggunakan sumber daya akan menentukan apakah sumber daya tersebut memblokir render atau tidak. Untuk menghilangkan JavaScript dan CSS yang memblokir render, Anda perlu menggunakan opsi defer atau opsi async.

Menghapus sumber daya yang memblokir render secara manual :

Pertama, jalankan audit di Google PageSpeed ​​Insights dan periksa bagian peluang Anda. Jika Anda memiliki bagian "Hilangkan sumber daya yang memblokir render", maka Anda mungkin perlu melakukan sesuatu seperti dalam contoh kami di bawah ini:

Bagian Peluang — Sumber: PSI
Bagian Peluang — Sumber: PSI


Untuk menghilangkan masalah ini secara manual, Anda perlu menggunakan atribut defer dan async.

Berikut adalah contoh atribut defer untuk menunda JS:

<script defer src="/example-js-script"></script>

Ikuti tutorial mendalam kami yang menjelaskan cara menghilangkan sumber daya yang memblokir render menggunakan kedua skrip secara manual.

Jika Anda menginginkan sesuatu yang lebih mudah, cukup gunakan plugin WordPress.

Menggunakan plugin WordPress untuk menunda JS dan CSS :

  • WP Rocket — yang membantu Anda menangguhkan file JS Anda dengan cara yang paling sederhana.   Plugin ini juga menawarkan fitur "Optimalkan pengiriman CSS" yang merupakan sumber daya pemblokiran render. Anda juga dapat mengecualikan file JS atau CSS apa pun agar tidak ditangguhkan jika Anda membutuhkannya.
Muat JS ditangguhkan - WP Rocket
Muat JS ditangguhkan untuk menghilangkan sumber daya render-blocking – WP Rocket
Optimalkan pengiriman CSS - WP Rocket
Optimalkan pengiriman CSS untuk menghilangkan sumber daya render-blocking – WP Rocket
Memperbaiki permintaan HTTP Anda adalah awal yang sangat baik untuk mempercepat situs WordPress Anda.

Namun, “mengurangi permintaan HTTP” bukan satu-satunya pengoptimalan kinerja yang harus Anda fokuskan. Jika Anda ingin situs Anda secepat kilat, ikuti panduan lengkap kami tentang pengoptimalan kecepatan halaman.

Cara Mengurangi Permintaan HTTP dengan Plugin

Plugin seperti WP Rocket membantu mengurangi permintaan HTTP dan mempercepat situs Anda secara signifikan. Mari jalankan audit kinerja situs WordPress dengan dan tanpa WP Rocket. Anda akan melihat setelah perbandingan bahwa ini adalah salah satu plugin caching terbaik untuk WordPress.

Jika Anda cukup baru dalam topik ini atau belum pernah menjalankan audit kinerja sebelumnya, periksa panduan terperinci kami terkait dengan pengujian kinerja dan kecepatan situs WordPress Anda.

Kami akan menggunakan GTmetrix untuk mengukur KPI berikut:

  • Nilai kinerja keseluruhan (A hingga F)
  • Skor Core Web Vitals (LCP, CLS, dan FID) + TTI dan TBT (Catatan: jika FID tidak tersedia, kami akan mengukur FCP)
  • Jumlah permintaan HTTP (Total permintaan halaman)

Dari segi konten, situs WordPress saya berisi beberapa teks, beberapa ikon media sosial, 8 gambar, video tersemat dari YouTube, peta dengan pin (dari Google Maps), dan 3 testimoni dari klien dengan foto mereka.

Situs uji

Skenario 1 — Mengukur Kinerja dan Permintaan HTTP – Tanpa WP Rocket

Mari kita lihat hasil performa menggunakan GTmetrix. Mereka tidak terlalu menggembirakan, dan saya mendapat "E" untuk nilai kinerja saya secara keseluruhan:

Laporan umum dengan Grade E (Tanpa WP Rocket) — GTmetrix
Laporan umum dengan Grade E (Tanpa WP Rocket) — GTmetrix


Kami melihat bahwa halaman saya membuat 140 permintaan HTTP dan 42,9% di antaranya disebabkan oleh JS. Dibutuhkan 10,2 detik agar halaman saya dimuat penuh, dan ukuran halamannya adalah 5,11 MB.

Detail halaman (ukuran halaman dan permintaan HTTP) - sumber: GTmetrix
Detail halaman (ukuran halaman dan permintaan HTTP) – sumber: GTmetrix
KPI Skor (Tidak Ada Roket WP)
Nilai Keseluruhan GTmetrix E
Pertunjukan 55%
Cat Contentful Terbesar (LCP) 2,7 detik
Cat Contentful Pertama (FCP) 2.4s
Pergeseran Tata Letak Kumulatif (CLS) 0,53 mdtk
Waktu untuk Interaktif (TTI) 3.6 detik
Total Waktu Pemblokiran (TBT) 51ms
Waktu Untuk Byte Pertama (TTFB) 806 mdtk
Waktu Muat Penuh 10.2 detik
Ukuran halaman 5.11 MB
Total Permintaan Halaman 140 (Skor terbaik di kelasnya: < 50 )

Rekomendasi utama dari GTmetrix adalah sebagai berikut:

  • Memuat JS pihak ketiga secara efisien (tunda JS, buat koneksi awal ke sumber yang diperlukan, dan terapkan pemuatan lambat pada sumber daya pihak ketiga yang disematkan)
  • Hilangkan sumber daya yang memblokir perenderan (Pertimbangkan untuk mengirimkan CSS dan JS penting sebaris dan menangguhkan semua JS/gaya yang tidak penting. Pelajari lebih lanjut tentang apa itu CSS penting dalam artikel kami)
  • Optimalkan kode saya (gabungkan dan perkecil JS dan CSS / optimalkan pengiriman CSS)
  • Terapkan caching halaman
Masalah yang ditandai oleh GTmetrix saat mengaudit situs saya
Masalah yang ditandai oleh GTmetrix saat mengaudit situs saya


Tebak apa? Inilah yang dapat dilakukan WP Rocket untuk situs WordPress Anda (antara lain). Dalam skenario 2, kami akan mengaktifkan WP Rocket dan memeriksa kembali kesehatan situs web kami. Hal-hal baik akan datang.

Skenario 2 — Mengukur Kinerja dan Permintaan HTTP — Dengan WP Rocket

Sekarang WP Rocket diaktifkan, mari jalankan audit kinerja lain menggunakan halaman yang sama.

Kali ini, hasilnya sangat menggembirakan, dan kami beralih dari "E" ke "A" terkait nilai kinerja saya secara keseluruhan:

Skor "A" baru saya berkat WP Rocket — Sumber: GTmetrix
Skor "A" baru saya berkat WP Rocket — Sumber: GTmetrix


Kemajuan mengesankan lainnya adalah jumlah permintaan HTTP saya yang turun dari 140 menjadi 18 setelah aktivasi WP Rocket (-87%).

Jumlah permintaan HTTP dengan WP Rocket — Sumber: GTmetrix
Jumlah permintaan HTTP dengan WP Rocket — Sumber: GTmetrix


Secara global, semua KPI saya lebih baik, dan situs web saya jauh lebih cepat saat menggunakan WP Rocket:

KPI Skor — Tidak ada WP Rocket Skor Dengan WP Rocket
Nilai Keseluruhan GTmetrix E A
Pertunjukan 55% 91%
Cat Contentful Terbesar (LCP) 2,7 detik 1.5s
Cat Contentful Pertama (FCP) 2.4s 542 mdtk
Pergeseran Tata Letak Kumulatif (CLS) 0,53 mdtk 0,37 mdtk
Waktu untuk Interaktif (TTI) 3.6 detik 1 detik
Total Waktu Pemblokiran (TBT) 51ms 20 ms
Waktu Untuk Byte Pertama (TTFB) 806 mdtk 487 mdtk
Waktu Muat Penuh 10.2 detik 2.3s
Ukuran halaman 5.11 MB 604 KB
Total Permintaan Halaman 140 (Skor terbaik di kelasnya: < 50 ) 18 ( Skor terbaik di kelasnya: <50)

Performa kami telah meningkat secara global dengan plugin cache WP Rocket diaktifkan.

WP Rocket secara otomatis menerapkan hampir semua teknik yang tercantum di bagian “Cara Membuat Lebih Sedikit Permintaan HTTP ke Situs Web Anda“.

Dari dasbor WP Rocket, Anda dapat melihat bahwa kode CSS saya telah diperkecil, digabungkan, dan dioptimalkan:

Pengoptimalan CSS — Sumber: dasbor WP Rocket
Pengoptimalan CSS — Sumber: dasbor WP Rocket


Pengoptimalan yang sama telah secara otomatis diterapkan ke JS saya:

Pengoptimalan JS - Sumber: Dasbor WP Rocket
Pengoptimalan JS – Sumber: dasbor WP Rocket

Membungkus

WP Rocket membantu mengurangi permintaan HTTP dari situs WordPress saya sebesar 87% . Dalam studi kasus kami, kami melihat bahwa permintaan kami berubah dari 140 menjadi 18 hanya setelah aktivasi plugin. Anda menghemat waktu dan tenaga!

Tanpa WP Rocket Dengan WP Rocket
140 Permintaan HTTP 18 Permintaan HTTP (-87%)

Untuk mempertahankan kinerja situs Anda yang luar biasa, disarankan untuk mempertahankan permintaan HTTP di bawah 50. WP Rocket adalah alat otomatis yang hebat untuk tidak pernah melampaui angka itu! Ini akan meningkatkan kinerja dengan mengurangi dan menghilangkan permintaan HTTP yang tidak perlu — tanpa pengetahuan teknis apa pun yang diperlukan dari Anda.

Bekerja lebih sedikit dan dapatkan hasil kinerja yang lebih baik berkat WP Rocket hari ini! Kami memiliki jaminan uang kembali 14 hari: jika Anda tidak puas, kami mengembalikan uang Anda. Ayo, cobalah dan beri tahu kami bagaimana kinerja permintaan HTTP Anda di komentar.