Cara Membuat Lebih Sedikit Permintaan HTTP di WordPress (11 Tips)

Untuk menampilkan situs web Anda, browser pengguna akan mengirimkan permintaan HTTP ke server Anda. Namun, jika Anda memiliki banyak file yang tidak dioptimalkan, server harus memproses banyak permintaan. Karena ini dapat secara signifikan meningkatkan waktu pemuatan halaman Anda, Anda pasti ingin situs web Anda membuat lebih sedikit permintaan HTTP.

Untungnya, itu mungkin untuk menguranginya, itulah inti dari posting ini.

Pengantar permintaan HTTP

Setiap kali pengguna mengunjungi situs web Anda, browser mereka harus mengunduh sumber daya dari server Anda. Untuk berkomunikasi dengannya, browser mengirimkan permintaan dengan HTTP (Hypertext Transfer Protocol).

Situs web terdiri dari berbagai bentuk data, dan file untuk HTML, CSS, gambar, dan video semuanya disimpan di server – merender konten ini di browser memerlukan permintaan HTTP.

Berikut adalah langkah-langkah yang terlibat ketika seseorang menjelajah Internet:

Penting untuk diperhatikan bahwa merender situs web tidak hanya memerlukan satu permintaan HTTP. Setiap file gambar individu, stylesheet plugin, skrip JavaScript, font web, dan sebagainya biasanya memiliki file sendiri. Oleh karena itu, jika situs Anda tidak dioptimalkan, ini dapat berdampak negatif pada waktu pemuatan.

Mengapa Anda mungkin ingin situs WordPress Anda membuat lebih sedikit permintaan HTTP

Saat Anda membuat situs web, penting untuk meminimalkan file yang tidak perlu. Kemudian, browser pengunjung tidak perlu meminta banyak sumber daya dari server. Karena situs Anda akan membuat lebih sedikit permintaan HTTP, itu akan memuat lebih cepat.

Sebagai aturan kasar, jumlah permintaan HTTP yang lebih tinggi menyebabkan kecepatan halaman lebih lambat. Jika ada lebih banyak sumber daya untuk diunduh sebelum merender halaman, pengguna harus menunggu lama untuk melihat kontennya.

Misalnya, situs web dengan hanya 50 permintaan umumnya akan memuat lebih cepat daripada situs dengan 70 permintaan. Ini karena ada lebih sedikit sumber daya untuk diproses dan diunduh.

Kisah sebenarnya sedikit lebih rumit, karena tidak semua permintaan HTTP dibuat sama. Satu permintaan HTTP yang besar dan lambat memuat dapat memiliki efek yang lebih besar daripada lima permintaan HTTP kecil yang memuat cepat. Tetapi sebagai aturan kasar – lebih sedikit permintaan HTTP = memuat situs web lebih cepat .

Dengan mengurangi permintaan HTTP di situs web, Anda akan meningkatkan Data Web Inti, terutama skor Cat Konten Terbesar (LCP). Pada gilirannya, ini dapat meningkatkan pengalaman pengguna (UX) karena pengunjung akan melihat konten lebih cepat.

Cara menguji permintaan HTTP situs web Anda

Seperti yang kami sebutkan sebelumnya, permintaan HTTP adalah bagian dari rendering. Namun, tidak semua permintaan HTTP sama. Sebelum Anda mulai menguranginya di situs web Anda, Anda harus tahu persis mana yang harus ditargetkan.

Untuk melakukan ini, Anda dapat menggunakan alat analitik kinerja seperti GTmetrix. Mulailah dengan memasukkan URL situs web Anda dan tekan Uji situs Anda :

Anda akan menerima laporan performa yang berisi informasi tentang ukuran halaman Anda dan jumlah total permintaan. Untuk melihat data ini, gulir ke bawah ke Detail Halaman :

Anda juga dapat melihat permintaan individual dengan mengeklik tab Air Terjun . Ini akan menunjukkan kepada Anda berapa lama waktu yang diperlukan untuk mengunduh setiap file:

Dengan menggunakan bagan Air Terjun ini, Anda dapat mengidentifikasi elemen mana di situs Anda yang menyebabkan permintaan HTTP yang tidak perlu. Setelah Anda menemukan masalahnya, Anda dapat menerapkan solusi yang tepat dan mempercepat situs web Anda.

Seperti yang Anda lihat pada bagan di atas, setiap permintaan HTTP memiliki ukuran yang berbeda dan membutuhkan waktu yang berbeda untuk memuat.

Jika Anda menginginkan hasil terbesar dari upaya Anda, cobalah untuk fokus pada penghapusan permintaan HTTP terbesar dan paling lambat.

Anda juga harus berfokus untuk menghapus permintaan HTTP pihak ketiga ( sumber daya yang dimuat situs Anda dari server orang lain, seperti skrip Google Analytics ). Permintaan pihak ketiga ini memerlukan pencarian DNS ekstra dan memiliki kelemahan kinerja lainnya.

Cara membuat lebih sedikit permintaan HTTP di WordPress dan mempercepat situs Anda (11 tips)

Setelah Anda menguji situs web Anda, saatnya untuk mengurangi permintaan HTTP-nya.

Di bawah ini, kami akan membahas 11 cara berbeda untuk membuat lebih sedikit permintaan HTTP dan mengoptimalkan permintaan HTTP yang tersisa. Beberapa tips ini tidak serta merta menghilangkan permintaan HTTP, tetapi mereka akan mengoptimalkan permintaan agar memuat lebih cepat, yang tetap penting untuk mempercepat situs Anda.

1. HAPUS PLUGIN YANG TIDAK DIPERLUKAN
2. DEFER RENDER-BLOCKING JAVASCRIPT DAN/ATAU TUNDA EKSEKUSI JAVASCRIPT
3. SKRIP BEBAN KONDISI
4. MINIMALKAN PERMINTAAN PIHAK KETIGA
5. OPTIMALKAN GAMBAR ANDA
6. MENERAPKAN LAZY LOADING
7. GUNAKAN STACK FONT SISTEM
8. MENGGABUNGKAN CSS DAN JAVASCRIPT
9. GUNAKAN CSS SPRITES UNTUK MENGGABUNGKAN GAMBAR
10. MINIFIKASI KODE SITUS ANDA
11. NONAKTIFKAN EMOJIS

1. Hapus plugin yang tidak perlu

Anda mungkin memiliki beberapa plugin yang terpasang di situs web Anda. Bahkan saat Anda tidak menggunakannya secara aktif, plugin yang tidak diperlukan dapat meningkatkan permintaan HTTP dan memperlambat halaman web Anda.

Untuk menganalisis permintaan plugin Anda, cari "plugin" di laporan Air Terjun GTmetrix. Ini hanya akan menampilkan permintaan HTTP yang berasal dari folder wp-content/plugins Anda:

Anda akan melihat plugin mana yang membuat permintaan dengan mengarahkan mouse ke hasil. Untuk mengoptimalkan situs Anda, buka daftar, cari plugin yang tidak perlu. Jika alat tertentu tidak memberikan kontribusi aktif ke situs web Anda, pertimbangkan untuk menghapusnya.

2. Tunda JavaScript yang memblokir render dan/atau tunda eksekusi JavaScript

Jika Anda ingin membuat lebih sedikit permintaan HTTP dan mengoptimalkan permintaan HTTP Anda, berfokus pada JavaScript adalah taktik hebat lainnya.

Ada dua cara utama untuk mengoptimalkan cara pemuatan JavaScript situs Anda:

1. Menunda JavaScript yang memblokir render
2. Tunda eksekusi JavaScript

Menunda JavaScript yang memblokir render

Menunda pemblokiran render JavaScript tidak akan menghapus permintaan HTTP dengan sendirinya, tetapi akan memastikan pemuatan JavaScript situs Anda tidak memblokir permintaan HTTP yang lebih penting.

Selama proses pemuatan, browser mungkin mengalami sumber daya pemblokiran render. File CSS atau JavaScript ini menjeda rendering hingga sumber daya diproses. Jika Anda memiliki file yang tidak perlu ini, mereka dapat memperpanjang waktu untuk menampilkan konten Anda.

Menambahkan atribut defer atau async ke file-file ini akan memberi tahu browser untuk mengeksekusinya nanti. Dengan atribut defer, skrip diunduh selama penguraian HTML dan kemudian dieksekusi. Atribut asinkron akan menjalankan skrip segera setelah tersedia.

Untuk mengimplementasikannya, Anda dapat menggunakan plugin khusus fitur seperti plugin Async JavaScript gratis.

Atau, banyak plugin kinerja/caching umum juga menawarkan fitur ini, termasuk WP Rocket dan FlyingPress.

Anda juga dapat mengatur ini secara manual di kode situs Anda, jika Anda merasa nyaman melakukannya.

Untuk menerapkan atribut defer, Anda hanya perlu membuka file functions.php dan menemukan tag <script> untuk sumber daya. Di sini, masukkan atribut defer:

 <script src="resource.js" defer></script>

Berikut tampilan atribut async:

 <script src="resource.js" async></script>

Secara umum, yang terbaik adalah menggunakan atribut async. Namun, Anda harus menggunakan atribut defer saat skrip bergantung pada skrip lain.

Tunda eksekusi JavaScript

Jika Anda ingin membuat lebih sedikit permintaan HTTP untuk pemuatan halaman awal, taktik populer lainnya adalah menunda beberapa/semua eksekusi JavaScript situs Anda hingga interaksi pengguna.

Saat Anda menyiapkan ini, situs Anda akan menunggu untuk memuat file hingga pengguna melakukan beberapa interaksi, seperti mengklik, menggulir, atau sebagainya.

Dengan memindahkan permintaan HTTP ini ke kunjungan selanjutnya, Anda dapat membuat lebih sedikit permintaan HTTP untuk pemuatan awal dan sangat mempercepat metrik yang berfokus pada pengalaman pengguna seperti Largest Contentful Paint.

Untuk menyiapkannya, Anda dapat menggunakan salah satu dari plugin kinerja berikut:

• Roket WP
• FlyingPress
• Perfmatter

Seperti inilah tampilannya di FlyingPress – Anda dapat menunda semua skrip Anda kecuali untuk skrip yang dipilih atau hanya menunda skrip yang dipilih:

3. Memuat skrip secara kondisional

Beberapa plugin tidak perlu memuat skrip di seluruh situs Anda. Misalnya, plugin hanya dapat menangani formulir di halaman Hubungi Kami , tetapi menambahkan skrip ke area lain. Dalam hal ini, kami menyarankan untuk memuat skrip plugin secara kondisional.

Untuk memuat plugin Anda secara kondisional, pertimbangkan untuk menginstal alat seperti Perfmatters. Muncul dengan pengelola skrip bawaan untuk menonaktifkan plugin atau skrip individual pada halaman atau posting tertentu:

Untuk opsi gratis, Anda juga dapat mempertimbangkan plugin Pembersihan Aset.

Muat plugin Anda secara kondisional dan kemudian jalankan situs web Anda melalui GTmetrix lagi. Jika Anda masih melihat kelebihan permintaan HTTP, saatnya untuk melanjutkan ke metode berikutnya.

4. Minimalkan permintaan pihak ketiga

Saat situs web Anda dimuat, browser pengunjung mungkin perlu menarik data dari platform pihak ketiga, yang memerlukan permintaan HTTP tambahan. Selain itu, karena Anda mengandalkan server pihak ketiga, permintaan ini dapat memperlambat situs web Anda secara signifikan.

Berikut beberapa contoh skrip pihak ketiga:

• Video YouTube tersemat
• Skrip pelacakan Google Analytics
• Font Google
• Iklan pihak ketiga

Seperti sumber daya pemblokiran render, Anda dapat menerapkan async atau menunda atribut ke skrip pihak ketiga.

Untuk layanan seperti Google Analytics dan Google Fonts, Anda juga dapat mempertimbangkan untuk menghostingnya secara lokal menggunakan plugin seperti ini:

• OMGF – host Google Fonts secara lokal.
• CAOS – host Google Analytics secara lokal.

5. Optimalkan gambar Anda

Sama seperti plugin, menghapus gambar yang tidak perlu dari situs web Anda juga penting. Karena setiap gambar memerlukan permintaan HTTPnya sendiri, Anda sebaiknya meminimalkan jumlah foto di situs Anda.

Kemudian, semua gambar Anda perlu dioptimalkan. Meskipun ini tidak akan mengurangi jumlah permintaan HTTP, ini akan mengurangi ukurannya. Ini secara efektif dapat meningkatkan waktu pemuatan halaman.

Salah satu pengoptimal gambar terbaik adalah Optimole. Plugin freemium ini menawarkan serangkaian fitur pengoptimalan gambar all-in-one termasuk:

• Menyajikan gambar adaptif yang dioptimalkan untuk setiap perangkat pengguna.
• Mengompresi gambar.
• Mengubah ukuran gambar.
• Mengonversi gambar ke format optimal.
• Melayani gambar melalui jaringan pengiriman konten (CDN) bawaannya.

Saat Anda mengunggah gambar baru, Optimole akan memampatkan dan mengubah ukurannya. Oleh karena itu, Anda tidak perlu khawatir tentang file gambar berukuran besar yang membutuhkan sumber daya berlebihan.

6. Terapkan pemuatan malas

Ini juga merupakan ide bagus untuk menerapkan pemuatan malas. Ini mencegah gambar dan video paruh bawah dimuat hingga pengunjung menggulir ke bawah halaman.

Ini memindahkan permintaan HTTP tersebut ke kunjungan pengguna nanti, yang memungkinkan Anda membuat lebih sedikit permintaan HTTP untuk pemuatan awal dan mempercepat waktu Cat Konten Terbesar Anda.

WordPress 5.5 menambahkan pemuatan lambat bawaan untuk gambar menggunakan pemuatan lambat browser asli.

Namun, belum semua browser mendukung pemuatan malas asli. Selain itu, menggunakan plugin lazy loading khusus memberi Anda lebih banyak kontrol atas fungsi lazy loading di situs Anda.

Misalnya, Anda mungkin ingin mengecualikan beberapa gambar pertama dari pemuatan lambat untuk menghindari pengaruh negatif terhadap waktu Cat Konten Terbesar Anda.

Jika Anda menggunakan plugin Optimole dari bagian sebelumnya, plugin ini juga menyertakan fitur bawaan untuk memuat gambar situs Anda dengan lambat secara optimal.

Anda juga dapat menyesuaikan lebih lanjut perilaku pemuatan lambat dari pengaturan plugin.

7. Gunakan tumpukan font sistem

Anda mungkin menggunakan berbagai font khusus untuk membuat situs web Anda unik. Namun, setiap font baru akan menambahkan permintaan HTTP lainnya saat situs Anda dimuat.

Untuk alasan ini, sebaiknya batasi jumlah font khusus yang Anda gunakan.

Alternatifnya, Anda dapat tetap menggunakan tumpukan font sistem, yang menggunakan font asli dari sistem operasi pengunjung.

Tema tertentu, seperti Neve, GeneratePress, atau Astra, memungkinkan Anda kembali ke font sistem. Namun, Anda juga dapat mengubah tumpukan font dengan CSS.

8. Gabungkan CSS dan JavaScript

Cara lain untuk membuat lebih sedikit permintaan HTTP untuk file CSS dan JavaScript adalah menggabungkan file CSS dan JavaScript yang terpisah ke dalam satu stylesheet atau file.

Dengan plugin Autoptimize, Anda dapat menggabungkan file situs dengan mudah hanya dalam beberapa langkah:

Di bawah Settings > Autoptimize , aktifkan plugin untuk mengoptimalkan JavaScript dan kode CSS. Kemudian, centang kotak di sebelah Aggregate JS-files dan Aggregate CSS-files :

Ini akan mengkompilasi CSS Anda menjadi satu file dan JavaScript menjadi yang lain. Alih-alih mengirimkan banyak permintaan untuk banyak file, Autoptimize memungkinkan situs Anda membuat lebih sedikit permintaan HTTP.

Catatan – meskipun menggabungkan CSS dan JavaScript adalah cara yang pasti untuk mengurangi permintaan HTTP, ini mungkin tidak berdampak pada kinerja dunia nyata tergantung pada host web Anda.

Jika host Anda menggunakan HTTP/2 atau lebih baru (yang dilakukan sebagian besar host saat ini), sebenarnya lebih baik tidak menggabungkan file karena HTTP/2 mendukung multiplexing (yang artinya dapat mengunduh banyak file dari server tanpa banyak permintaan server).

Jika Anda tidak yakin apakah host Anda menggunakan HTTP/2, Anda dapat menghubungi dukungan.

9. Gunakan sprite CSS untuk menggabungkan gambar

Di situs WordPress biasa, setiap gambar adalah file individual. Jika ada beberapa foto di satu halaman, browser mengirimkan beberapa permintaan HTTP. Namun, sprite CSS akan menggabungkan gambar-gambar ini menjadi satu file.

Alat Sprite CSS adalah perangkat lunak gratis untuk membuat dan menyesuaikan sprite CSS. Untuk memulai, masukkan gambar Anda ke dalam kotak upload:

Setelah Anda membuat sprite CSS, tambahkan ke Perpustakaan Media WordPress. Kemudian, Anda dapat menggunakan kode HTML dan CSS yang dihasilkan untuk menempatkan setiap gambar di situs web Anda.

10. Perkecil kode situs Anda

Memperkecil file situs Anda tidak akan membantu Anda membuat lebih sedikit permintaan HTTP, tetapi ini akan membantu Anda mengoptimalkan permintaan HTTP yang tidak dapat dihindari untuk kode HTML, CSS, dan JavaScript situs Anda.

Saat menulis kode, Anda dapat menyertakan karakter dan spasi yang meningkatkan keterbacaan. Karena tidak diperlukan untuk memproses permintaan, Anda dapat menghapusnya.

Cara termudah untuk mengecilkan kode situs WordPress Anda adalah dengan plugin seperti plugin Autoptimize yang kami sebutkan sebelumnya.

Sebagian besar plugin caching WordPress juga menyertakan fitur minifikasi kode, termasuk WP Rocket, FlyingPress, WP Fastest Cache, dan banyak lagi.

Atau, jika Anda menggunakan CDN Cloudflare, Anda juga dapat meminta Cloudflare memperkecil kode untuk Anda.

Setelah Anda mengecilkan file situs Anda, permintaan HTTP akan memiliki waktu eksekusi yang lebih cepat. Dengan kode yang lebih ringan, Anda akan mempercepat situs web dan meminimalkan permintaan besar.

11. Nonaktifkan emoji

Secara default, emoji WordPress menambahkan permintaan HTTP ekstra ke situs Anda. Untuk menghilangkan satu lagi permintaan HTTP, Anda dapat menonaktifkan emoji WordPress.

Untuk opsi paling sederhana, Anda cukup menginstal plugin Disable Emojis yang ringan.

Atau, Anda dapat menambahkan kode ini ke file functions.php tema anak Anda atau plugin pengelola kode seperti Cuplikan Kode:

 /** * Disable the emojis */ function disable_emojis() { remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'admin_print_styles', 'print_emoji_styles' ); remove_filter( 'the_content_feed', 'wp_staticize_emoji' ); remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' ); add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 ); } add_action( 'init', 'disable_emojis' ); /** * Filter function used to remove the tinymce emoji plugin. * * @param array $plugins * @return array Difference betwen the two arrays */ function disable_emojis_tinymce( $plugins ) { if ( is_array( $plugins ) ) { return array_diff( $plugins, array( 'wpemoji' ) ); } else { return array(); } } /** * Remove emoji CDN hostname from DNS prefetching hints. * * @param array $urls URLs to print for resource hints. * @param string $relation_type The relation type the URLs are printed for. * @return array Difference between the two arrays. */ function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) { if ( 'dns-prefetch' == $relation_type ) { /** This filter is documented in wp-includes/formatting.php */ $emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://sworg/images/core/emoji/2/svg/' ); $urls = array_diff( $urls, array( $emoji_svg_url ) ); } return $urls; }

Setelah menerapkan semua tip ini, Anda akan memiliki situs dengan lebih sedikit permintaan HTTP!

Buat lebih sedikit permintaan HTTP di situs web Anda 🎯

Sebagai aturan kasar, semakin banyak permintaan HTTP yang dimiliki situs web Anda, semakin lambat pemuatannya. Ini dapat memengaruhi pengalaman pengguna (UX) situs Anda secara negatif, menyebabkan pengunjung pergi tanpa membaca konten Anda atau membeli produk.

Untuk mempercepat situs web Anda, Anda ingin menghilangkan permintaan HTTP sebanyak mungkin dan mengoptimalkan permintaan HTTP yang tersisa agar dapat dimuat secepat mungkin.

Dengan tips dalam posting ini, Anda dapat menyelesaikan kedua pekerjaan dan membuat situs yang memuat cepat untuk pengunjung Anda.

👉 Namun, ingatlah bahwa mengoptimalkan permintaan HTTP situs Anda hanyalah satu bagian dari teka-teki kinerja. Anda juga memerlukan hosting WordPress berkualitas jika Anda ingin situs memuat dengan cepat – lihat kumpulan hosting WordPress terbaik kami untuk melihat opsi teratas.

Apakah Anda memiliki pertanyaan tentang mengurangi jumlah permintaan HTTP di WordPress? Tanyakan kepada kami di bagian komentar di bawah!