Cara Mengurangi Permintaan HTTP / S di WordPress

Cara Mengurangi Permintaan HTTP / S di WordPress

Ini adalah kisah yang akan Anda sukai jika Anda ingin mempercepat situs WordPress Anda.


Suatu hari saya membangun situs web yang mengkilap. Saya berusaha sekuat tenaga dan menambahkan WooCommerce, Google Pengelola Tag, OneSignal, helpdesk, Yoast, radio langsung (oh ya saya lakukan), Pemberitahuan Cookie, media sosial, dan sekelompok plugin lainnya.

Sama seperti Anda, saya cenderung mengesankan pengunjung saya, atau jadi saya pikir. Tapi kemudian segalanya menjadi lambat tak tertahankan. Setelah banyak kesedihan, saya bersemangat GTMetrix untuk mengatasi masalah ini.

Saya sangat kecewa, saya melihat ini:

hasil tes kecepatan gtmetrix

Apakah saya terkesan? Persetan dengan NAW! Saya ingin mencetak nilai A yang sempurna, dan mengurangi waktu muat halaman menjadi di bawah dua detik.

Jadi, saya menekan tombol tes ulang, tapi coba tebak? Masih hasil memuakkan yang sama. Saya terkejut, bahkan marah. Tetapi saya tidak mudah menyerah karena hal semacam itu tidak dapat diterima.

Tahukah Anda apa yang saya lakukan selanjutnya? Saya menguji situs web pada Pingdom karena GTMetrix dapat menyedotnya. Tetapi, di bawah ini adalah hasil yang menyedihkan, sekali lagi:

alat pingdom mempercepat hasil tes

Saya jengkel. Duri dalam dagingku adalah permintaan HTTP yang salah karena aku bisa memperbaiki banyak masalah lainnya dengan cepat.

Lebih buruk lagi, saya menggunakan tema WordPress e-commerce yang memuat a milyar elemen untuk membangun beranda. Dalam pembelaan saya, itu tampak luar biasa. Beberapa pengguna setuju bahwa desainnya juga tepat sasaran, jadi ya, saya tidak tertarik dengan trik ini ��

Tapi desain visual yang bagus dan kecepatan lambat tidak berjalan seiring. Saya butuh solusi dan cepat.

Bagaimana saya bisa mengurangi permintaan HTTP di situs WordPress saya?

Setiap kali Anda mengunjungi situs web WordPress, banyak data bergerak antara browser Anda dan server situs web. Dengan kata lain, WordPress membuat permintaan HTTP ke berbagai server untuk membangun apa yang dilihat pengguna ketika mereka memuat situs Anda.

Jika situs WordPress Anda membutuhkan banyak elemen untuk dimuat, Anda akan memiliki lebih banyak permintaan HTTP dan sebaliknya. Semakin banyak permintaan HTTP berarti situs web lambat, pengalaman pengguna yang buruk (UX), skor SEO buruk, dan tingkat konversi yang rendah.

Situs web WordPress biasanya dinamis, artinya dibutuhkan banyak bagian yang berbeda untuk merender situs web Anda dalam browser. Berita baiknya adalah Anda dapat mengurangi permintaan HTTP dan mempercepat situs Anda secara signifikan.

Dan di pos hari ini, Anda tahu persis bagaimana caranya!

Laporan dari GTMetrix dan Pingdom biasanya menunjukkan kepada Anda di mana masalahnya. Dengan demikian, uji situs Anda menggunakan kedua alat untuk mengetahui area yang harus Anda tingkatkan. Dengan laporan Anda siap, berikut ini cara mengurangi permintaan HTTP / S dan mempercepat situs WordPress Anda.

Langkah 1: Declutter

Guys, jika Anda memiliki banyak hal di situs web WordPress Anda, Anda akan memiliki terlalu banyak permintaan HTTP. Itu tidak punya otak. Langkah pertama untuk mengurangi permintaan HTTP adalah decluttering.

Maksud saya, menyingkirkan semua plugin yang tidak Anda butuhkan. Plugin WordPress datang dengan banyak file, baik itu PHP, CSS, atau JavaScript (JS). Setiap file yang diaktifkan oleh setiap plugin akan membuat permintaan HTTP.

Jika Anda memiliki banyak plugin, Anda pasti akan memiliki lebih banyak permintaan HTTP. Semakin sedikit plugin, semakin sedikit permintaan. Sangat sederhana.

Apa yang harus dilakukan?

Lakukan audit plugin Anda. Plugin mana yang harus Anda miliki untuk menjalankan situs web Anda? Apakah ada plugin yang tidak Anda butuhkan? Apakah Anda memiliki plugin yang masuk ke server pihak ketiga? Bisakah Anda melakukannya tanpa plugin ini?

Untuk mengurangi permintaan HTTP, copot semua plugin yang tidak Anda butuhkan. Jika Anda membutuhkan plugin sesekali, instal hanya ketika Anda membutuhkannya. Setelah itu, hapus instalan plugin.

Hal yang sama berlaku untuk tema dan konten WordPress yang tidak Anda gunakan. Bersihkan semua itu. Hapus apa pun yang tidak Anda butuhkan; itu bagus untuk kecepatan dan keamanan situs web Anda.

Anda dapat bekerja ekstra dan memuat plugin secara selektif. Misalnya, jika Anda hanya perlu Formulir Kontak 7 untuk memuat pada halaman kontak Anda, Anda dapat menghentikan plugins lain dari dimuat pada halaman tertentu.

Itu akan luar biasa, bukankah Anda setuju? Dan untuk berpikir Anda hanya perlu Plugin Asset CleanUp WordPress.

Plugin WP Asset CleanUp WordPress

Plugin ini mudah digunakan dan cukup efisien. Atau seperti yang dikatakan pengembang:

“Pembersihan Aset” memindai halaman Anda dan mendeteksi semua aset yang dimuat. Yang harus Anda lakukan saat mengedit halaman / posting hanya untuk memilih CSS / JS yang tidak perlu dimuat, dengan cara ini mengurangi bloat.

Bersihkan instal Anda yang sudah hombre; singkirkan sampah – termasuk komentar spam. Oh ya, hilangkan tautan yang rusak dan optimalkan basis data Anda saat itu juga. Ini adalah area penting untuk dipertimbangkan sejauh meningkatkan kecepatan situs Anda, tapi saya ngelantur.

Mari kembali untuk mengurangi permintaan HTTP.

Langkah 2: Optimalkan Gambar

Sebuah situs web tanpa gambar, yah, menjemukan. Mereka mengatakan gambar berbicara ribuan kata, dan itu keren. Tetapi setiap gambar menyumbang permintaan HTTP. Untuk menambah garam pada luka, gambar berada di antara elemen-elemen yang membutuhkan waktu lama untuk dimuat.

Namun, kami tidak dapat mengabaikan fakta bahwa sebagian besar tema WordPress (baca situs) mengandalkan gambar, dan banyak gambar dalam hal ini. Jadi, mengingat ini, bagaimana Anda bisa mengurangi permintaan HTTP dengan mengoptimalkan gambar Anda?

Sebagai permulaan, singkirkan semua gambar yang tidak Anda gunakan. Bersikaplah kejam; singkirkan semua kembung itu – Anda tidak membutuhkannya. Setelah itu, kompres dan optimalkan gambar untuk menghapus data file yang tidak perlu.

Plugin Kompres WP

Info & UnduhLihat Demo

Meskipun ada beberapa plugin untuk dipilih, kami sangat menyukai WP Compress. Meskipun ini adalah layanan premium, optimisasi otomatis gambar yang hebat, kompresi lossless, pemrosesan cloud untuk mengurangi beban server Anda, dukungan gambar WebP, pengubahan ukuran otomatis dan lebih banyak membuat investasi sepadan (lihat ulasan kami untuk mempelajari lebih lanjut). Plus, Anda dapat dinyatakan dengan 100 gambar gratis – jadi Anda setidaknya dapat mencobanya.

Mengoptimalkan gambar tidak mengurangi permintaan HTTP Anda sendiri, tetapi mengurangi ukuran file gambar Anda, yang diterjemahkan menjadi kecepatan halaman yang lebih baik di telepon..

Atau untuk mengurangi permintaan HTTP, manfaatkan kekuatan Sprite gambar CSS. Bagi yang belum tahu, sprite adalah kumpulan gambar yang dimasukkan ke dalam file gambar tunggal.

Kemudian menggunakan trik CSS, Anda dapat memilih bagian mana dari gambar untuk ditampilkan. Tetapi bagaimana ini mengurangi permintaan HTTP? Ini analoginya.

Katakanlah Anda membutuhkan lima gambar di beranda Anda. Untuk memuat situs Anda, instalasi WordPress Anda akan melakukan lima perjalanan ke server untuk mendapatkan gambar. Sekarang, jika Anda menempatkan semua lima gambar dalam satu file gambar (sprite), instalasi WordPress Anda hanya akan membuat satu perjalanan.

Apakah Anda melihat ke mana saya akan pergi dengan ini? Semakin sedikit perjalanan, semakin sedikit permintaan HTTP. Bagian terbaiknya adalah Anda tidak perlu berkeringat untuk membuat dan mengimplementasikan sprite gambar CSS. Anda dapat menggunakan alat seperti CSS Sprite Generator. Menerapkan sprite gambar CSS itu mudah, asalkan Anda tahu jalan di sekitar CSS.

Kiat Pro: Anda dapat melupakan semua tentang sprite gambar CSS jika situs web Anda menggunakan HTTP / 2 yang mendukung pemuatan gambar dan skrip yang tidak sinkron. GTMetrix tidak memperhitungkan HTTP / 2 saat mencetak kinerja, jadi jangan khawatir jika tampaknya gambar Anda menghasilkan banyak permintaan HTTP.

Tapi saya katakan: Jika sprite gambar CSS dapat mengurangi permintaan HTTP secara signifikan di situs Anda, dan Anda tahu cara menerapkan hal yang sama, lakukan dan hapus detik tambahan itu dari waktu buka halaman Anda. Apakah Anda memiliki HTTP / 2.

Bagaimanapun, satu file gambar membutuhkan satu permintaan HTTP. Sepuluh gambar terpisah membutuhkan 10 permintaan HTTP dan sebagainya. Saya tahu Anda mengerti.

Langkah 3: Gabungkan & Perkecil HTML, CSS & JavaScript

Penyebab utama dari banyak permintaan HTTP di situs WordPress saya adalah file CSS dan JavaScript eksternal. Yap, saya bersaing dengan 43 skrip JS dan 22 file CSS. Itu adalah 66 permintaan HTTP besar.

Dari sekitar 130 permintaan HTTP, CSS eksternal, dan permintaan JavaScript menyumbang sekitar 51% masalah! Itu hanya konyol. Terima kasih, GTMetrix, hadapi kepalan tangan saya.

Jika saya menggabungkan dan memperkecil 44 file JS dan 22 CSS itu, saya dapat mengurangi permintaan HTTP saya secara signifikan, ukuran situs web, dan waktu yang diperlukan untuk memuat. Tapi apa ini “menggabungkan” dan “memangkas” bisnis semua tentang?

Berdasarkan Raelene Morey Words by Birds (Saya penggemar berat ��), minifikasi adalah proses “… menghapus karakter yang tidak perlu, seperti komentar, pemformatan, spasi putih, dan baris baru dari file HTML, CSS, dan JavaScript yang tidak diperlukan untuk kode untuk dieksekusi. “

Meminimalkan mengurangi ukuran file dengan menghilangkan semua karakter lain hanya menyisakan kode. Tetapi jika Anda memiliki 66+ skrip eksternal, minifikasi tidak akan berbuat banyak untuk meminimalkan permintaan HTTP. Untuk itu, Anda perlu menggabungkan file CSS dan JavaScript Anda.

Sekali lagi, Raelene mengatakan:

Menggabungkan file, sementara itu, sama seperti kedengarannya. Misalnya, jika halaman web Anda memuat 5 file CSS eksternal dan 5 file JavaScript eksternal, menggabungkan CSS dan JavaScript Anda ke dalam satu file terpisah masing-masing akan menghasilkan hanya 2 permintaan, bukan 10.

Apa kau mengerti? Saya sungguh berharap demikian. Menggabungkan file mengurangi permintaan HTTP. Minifikasi, di sisi lain, mengurangi ukuran file. Kombinasikan keduanya, dan Anda membunuh dua burung dengan batu yang sama.

Apakah ada plugin? Ya tentu saja!

Plugin WP Rocket WordPress Cache

Info & Unduh Lihat Demo

Ada satu ton plugin WordPress untuk menggabungkan dan memperkecil file Anda. Contoh yang baik adalah plugin WP Rocket. Ini pada dasarnya salah satu plugin caching terbaik yang menawarkan fitur untuk menggabungkan dan memperkecil file dalam beberapa klik.

Lain yang populer (dan Gratis) opsi adalah Optimalkan secara otomatis plugin.

Omong-omong, saat itu, mengurangi jumlah file CSS eksternal dan skrip JS? Misalnya, dan kami tidak menyebutkan nama di sini, apakah Anda benar-benar membutuhkan platform komentar pihak ketiga? Apakah Anda memerlukan plugin radio langsung?

Tidak masalah apa yang saya katakan, hilangkan semua skrip eksternal dan file yang tidak Anda butuhkan.

Langkah 4: Sesuaikan File CSS & JavaScript Pemblokiran Render

Dalam beberapa kasus, menggabungkan file mungkin bukan opsi, terutama untuk file pihak ketiga dan skrip yang sering berubah. Dalam kasus seperti itu, Anda dapat menunda pemuatan aset tersebut. HTTP / 2 mendukung pemuatan file yang tidak sinkron, yang berarti semua file dimuat secara bersamaan.

Jika Anda tidak memiliki pemuatan yang tidak sinkron karena suatu alasan (mungkin Anda tidak menggunakan HTTP / 2, atau skrip tidak asinkron), file-file ini dapat memperlambat situs web Anda secara signifikan.

Perlu diingat bahwa halaman web Anda memuat dari atas ke bawah. Jika Anda memiliki render-blocking CSS dan JS di bagian atas halaman Anda, browser akan berhenti memuat sampai file-file telah dimuat sepenuhnya. Dengan demikian, pengguna akan melihat halaman kosong hingga skrip dimuat, yang membutuhkan waktu.

Bagaimana? Pindahkan semua skrip pemblokiran render dari atas ke bawah halaman web Anda. Tapi hati-hati di sini; Anda tidak perlu memindahkan semua skrip ke bawah. Saya mengatakan ini karena halaman Anda mungkin membutuhkan CSS dan JS untuk memberikan pengalaman yang sangat menarik.

Jika Anda menunda beberapa file CSS atau JavaScript, pengguna Anda mungkin melihat versi halaman web Anda yang terdistorsi hingga halaman dimuat sepenuhnya, yang merupakan kebalikan dari apa yang ingin Anda capai.

Jadi, hanya tunda skrip yang tidak diperlukan untuk memuat halaman. Dengan begitu, pengguna Anda tidak akan menunggu lama untuk memuat halaman Anda. Mengapa? Karena Anda akan membutuhkan lebih sedikit permintaan HTTP untuk mengirimkan pesan Anda.

Itu tidak mengurangi permintaan HTTP per se (karena semua skrip dan file akan memuat pada akhirnya), tetapi itu mengurangi jumlah permintaan HTTP yang diperlukan untuk membuat halaman Anda.

Ini sangat mirip dengan pemuatan malas untuk gambar; gambar hanya dimuat ketika berada di viewport, bukan ketika sisanya (dan bagian terpenting) halaman dimuat.

Ngomong-ngomong, memperbaiki pemblokiran render CSS & JS mungkin mengungkapkan file dan skrip yang tidak perlu Anda buat halaman web.

Misalnya, jika beberapa skrip JS berbagi sosial eksternal perlu waktu lama untuk dimuat, Anda dapat menundanya. Selain itu, Anda dapat menghilangkannya dan membangun berbagi sosial ke dalam tema Anda.

Anda akan menghilangkan permintaan HTTP dan mempercepat situs Anda sambil mempertahankan fungsi yang sama. Saya memahami fitur pengkodean ke dalam tema Anda adalah hal yang sulit bagi kebanyakan pemula, jadi tanyakan kepada pengguna atau pengembang WP yang canggih.

Sebagai alternatif, Anda dapat menggunakan plugin WP Rocket untuk memperbaiki skrip pemblokiran render, tetapi berhati-hatilah. Baca dokumentasi mereka karena jika Anda mengacaukan semuanya, Anda dapat menghancurkan situs web dengan mudah.

Apakah ada opsi gratis? Tentu saja! Kami bekerja dengan WordPress, ingat? Anda dapat menggunakan JavaScript Async, di antara plugin lainnya.

Langkah 5: Gunakan Caching & CDN

Tahukah Anda caching dan CDN dapat mengurangi permintaan HTTP Anda? Awalnya tidak tampak seperti fakta, tetapi ketika Anda mempertimbangkan apa yang terjadi di balik layar, Anda dapat menggunakan caching dan CDN untuk keuntungan Anda.

Caching melibatkan penyimpanan file statis di browser sehingga pengguna tidak mengunduh file pada kunjungan berikutnya. Katakanlah Anda memiliki plugin cache, dan pengguna mengunduh konten yang di-cache Anda pada kunjungan pertama mereka.

Pada kunjungan berikutnya, situs Anda tidak akan membuat permintaan ke server. Alih-alih, ini akan melayani sumber daya yang di-cache dari browser, mengurangi permintaan HTTP, dan meningkatkan kecepatan situs Anda.

CDN (atau Content Delivery Network) adalah jaringan server yang ditempatkan di seluruh dunia. CDN juga menggunakan caching, tetapi untuk kecepatan yang lebih cepat, penyedia CDN melayani Anda di-cache konten dari server yang paling dekat dengan pengunjung.

Jarak yang lebih pendek berarti pengiriman konten yang lebih cepat, dan caching berarti situs web Anda tidak perlu mengunduh konten yang sama dari server pusat lagi. Apakah masuk akal untuk Anda?

Plugin Cloudflare CDN

Dan yang terbaik dari semuanya ada sejumlah opsi CDN gratis (atau setidaknya uji coba gratis sehingga Anda benar-benar dapat melihat perbedaannya). Di WPExplorer kami menggunakan dan sangat merekomendasikan CLoudflare, tetapi pilih CDN yang Anda rasa paling sesuai untuk Anda.

Bonus: Pastikan HTTP / 2 Didukung

Anda mungkin melakukan segalanya untuk mengurangi permintaan HTTP, tetapi host web Anda bisa menjadi penyebab kesengsaraan Anda. Jangan kaget; bertanya dan berpikir, siapa – di zaman dan zaman ini – menggunakan apa pun selain HTTP / 2?

Anda mungkin tidak tahu apa HTTP / 2 semua tentang. Nah, untuk permulaan, HTTP / 2 mendukung pemuatan file yang tidak sinkron, antara lain. Ini memiliki manfaat lain selain HTTP 1.0, tapi itu pelajaran untuk hari lain.

Jika Anda menggunakan HTTP 1.0 atau lebih rendah, Anda akan melihat sejumlah besar permintaan HTTP.

Jangan cepat menghakimi; Saya telah melihat penyedia hosting web yang masih menggunakan HTTP 1.0 dan versi PHP yang lebih lama. Ya, bahkan dengan manfaat nyata HTTP / 2 dan PHP 7. Saya bahkan tidak menggertak; beberapa pelanggan mereka mendatangi saya ketika beberapa plugin mereka tidak berfungsi, dan itu menjengkelkan!

Tapi, sungguh, mengapa? Fakta bahwa beberapa penyedia web hosting tidak terganggu oleh kenyataan bahwa PHP 5.6 sudah usang dan memiliki kerentanan keamanan hanyalah sesuatu yang lain. Dan jika mereka tidak mendukung HTTP / 2, itu benar-benar pemecah kesepakatan bagi Anda.

KeyCDN HTTP / 2 Test

Hubungi host Anda atau gunakan Alat KeyCDN untuk memeriksa apakah server Anda mendukung HTTP / 2. Host web terbaik mendukung HTTP / 2 dan versi terbaru PHP. Jika host Anda tertinggal dalam kedua kasus, minta mereka untuk meningkatkan atau memilih host web yang lebih baik.

Kata-kata terakhir

Mengurangi permintaan HTTP di situs WordPress Anda adalah tentang menghilangkan hal-hal yang tidak Anda butuhkan. Jika Anda memiliki banyak hal di situs web WordPress Anda, Anda akan memiliki banyak permintaan HTTP dan kecepatan halaman yang relatif lambat.

Untuk mengurangi permintaan HTTP, tutup situs Anda, optimalkan gambar, perbaiki skrip pemblokiran render, gunakan caching, dan pastikan host Anda mendukung HTTP / 2. Selain itu, upayakan untuk membuat situs web sederhana dan bersih yang tidak memerlukan banyak aset untuk dimuat.

Jika Anda memiliki pertanyaan, beri tahu kami di bagian komentar di bawah. Bersorak untuk situs web yang lebih cepat dan masa depan yang bagus!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map