Cara Mengurangkan Permintaan HTTP/S dalam WordPress

Berikut ialah cerita yang anda akan suka jika anda ingin mempercepatkan laman WordPress anda.

Pada hari lain saya membina laman web berkilat. Saya berusaha keras dan menambahkan WooCommerce, Pengurus Google Tag, OneSignal, meja bantuan, Yoast, radio langsung (oh ya saya lakukan), Notis Kuki, media sosial dan banyak pemalam lain.

Sama seperti anda, saya bertekad untuk menarik perhatian pengunjung saya, atau begitulah yang saya fikirkan. Tetapi kemudian keadaan menjadi sangat perlahan. Selepas banyak kesedihan, saya melancarkan GTMetrix untuk menyelesaikan isu tersebut.

Saya terkejut, saya melihat ini:

Adakah saya kagum? Neraka ke NAW! Saya mahu menjaringkan A yang sempurna, dan mengurangkan masa muat halaman kepada di bawah dua saat.

Jadi, saya menekan butang ujian semula, tetapi rasa apa? Masih hasil yang menyakitkan yang sama. Saya terkejut, marah juga. Tetapi saya tidak mudah berputus asa kerana perkara seperti itu tidak boleh diterima.

Adakah anda tahu apa yang saya lakukan seterusnya? Saya menguji laman web di Pingdom kerana GTMetrix boleh menghisapnya. Tetapi, di bawah adalah hasil yang menyedihkan, sekali lagi:

Saya marah. Duri pepatah dalam daging saya adalah permintaan HTTP yang sesat memandangkan saya boleh menyelesaikan banyak isu lain dengan cepat.

Lebih memburukkan lagi keadaan, saya menggunakan tema WordPress e-dagang yang memuatkan bilion elemen untuk membina halaman utama. Dalam pembelaan saya, ia kelihatan luar biasa. Sesetengah pengguna bersetuju bahawa reka bentuk itu juga tepat, jadi ya, saya tidak jatuh untuk helah itu sahaja ?

Tetapi reka bentuk visual yang hebat dan kelajuan perlahan tidak seiring. Saya perlukan penyelesaian dan cepat.

Bagaimanakah saya boleh mengurangkan permintaan HTTP di tapak WordPress saya?

Setiap kali anda melawat tapak web WordPress, banyak data bergerak antara penyemak imbas anda dan pelayan tapak web. Dengan kata lain, WordPress membuat permintaan HTTP kepada pelbagai pelayan untuk membina perkara yang dilihat pengguna apabila mereka memuatkan tapak anda.

Jika tapak WordPress anda memerlukan banyak elemen untuk dimuatkan, anda akan mempunyai lebih banyak permintaan HTTP dan sebaliknya. Lebih banyak permintaan HTTP bermakna tapak web yang perlahan, pengalaman pengguna (UX) yang lemah, skor SEO yang buruk dan kadar penukaran yang rendah.

Tapak web WordPress biasanya dinamik, bermakna ia memerlukan banyak bahagian yang berbeza untuk memaparkan tapak web anda dalam penyemak imbas. Berita baiknya ialah anda boleh mengurangkan permintaan HTTP dan mempercepatkan tapak anda dengan ketara.

Dan dalam siaran hari ini, anda belajar dengan tepat caranya!

Laporan daripada GTMetrix dan Pingdom biasanya menunjukkan kepada anda di mana masalahnya. Oleh itu, uji tapak anda menggunakan kedua-dua alatan untuk mengetahui bidang yang anda mesti perbaiki. Dengan laporan anda sedia, berikut ialah cara untuk mengurangkan permintaan HTTP/S dan mempercepatkan tapak WordPress anda.

Langkah 1: Declutter

Kawan-kawan, jika anda mempunyai banyak barangan di laman web WordPress anda, anda akan mempunyai terlalu banyak permintaan HTTP. Ia tidak berakal. Langkah pertama untuk mengurangkan permintaan HTTP ialah mengecilkan.

Dengan itu, saya maksudkan menyingkirkan semua pemalam yang anda tidak perlukan. Pemalam WordPress disertakan dengan banyak fail, sama ada PHP, CSS atau JavaScript (JS). Setiap fail yang setiap pemalam menyala akan membuat permintaan HTTP.

Jika anda mempunyai banyak pemalam, anda pasti akan mempunyai lebih banyak permintaan HTTP. Semakin sedikit pemalam, semakin sedikit permintaan. Ianya mudah.

Apa nak buat?

Jalankan audit ke atas pemalam anda. Pemalam manakah yang anda mesti ada untuk menjalankan tapak web anda? Adakah terdapat pemalam yang anda tidak perlukan? Adakah anda mempunyai pemalam yang memanfaatkan pelayan pihak ketiga? Bolehkah anda lakukan tanpa pemalam ini?

Untuk mengurangkan permintaan HTTP, nyahpasang semua pemalam yang anda tidak perlukan. Jika anda memerlukan pemalam sekali-sekala, pasangkannya hanya apabila anda memerlukannya. Selepas itu, nyahpasang pemalam.

Perkara yang sama berlaku untuk tema dan kandungan WordPress yang anda tidak gunakan. Bersihkan semua barang itu. Keluarkan apa-apa yang anda tidak perlukan; ia bagus untuk kelajuan dan keselamatan tapak web anda.

Anda boleh bekerja lebih keras dan memuatkan pemalam secara selektif. Sebagai contoh, jika anda hanya memerlukan Borang Perhubungan 7 untuk dimuatkan pada halaman kenalan anda, anda boleh menghentikan pemalam lain daripada dimuatkan pada halaman khusus tersebut.

Itu akan menjadi hebat, tidakkah anda bersetuju? Dan untuk berfikir anda hanya memerlukan pemalam WordPress Asset CleanUp.

Pemalam ini mudah digunakan dan agak cekap. Atau seperti yang dinyatakan oleh pembangun:

“Pembersih Aset ” mengimbas halaman anda dan mengesan semua aset yang dimuatkan. Apa yang anda perlu lakukan semasa mengedit halaman/siaran hanyalah memilih CSS/JS yang tidak perlu dimuatkan, dengan cara ini mengurangkan kembung.

Bersihkan pemasangan anda yang sudah hombre; buang sampah - spam komen disertakan. Oh ya, hapuskan pautan yang rosak dan optimumkan pangkalan data anda semasa melakukannya juga. Ini adalah bahagian penting yang perlu dipertimbangkan setakat meningkatkan kelajuan tapak anda, tetapi saya menyimpang.

Mari kembali kepada mengurangkan permintaan HTTP.

Langkah 2: Optimumkan Imej

Laman web tanpa imej adalah, menjemukan. Mereka mengatakan gambar bercakap seribu perkataan, dan itu bagus. Tetapi setiap imej mengambil kira permintaan HTTP. Untuk menambah garam kepada kecederaan, imej adalah teratas antara elemen yang mengambil masa yang lama untuk dimuatkan.

Namun, kita tidak boleh mengabaikan fakta bahawa kebanyakan tema WordPress (baca tapak) bergantung pada imej, dan banyak imej untuk perkara itu. Oleh itu, berdasarkan perkara ini, bagaimana anda boleh mengurangkan permintaan HTTP dengan mengoptimumkan imej anda?

Sebagai permulaan, buang semua imej yang anda tidak gunakan. Jadilah kejam; hilangkan semua kembung itu - anda tidak memerlukannya. Selepas itu, mampatkan dan optimumkan imej untuk mengalih keluar data fail yang tidak diperlukan.

Walaupun terdapat beberapa pemalam untuk dipilih, kami sangat menyukai WP Compress. Walaupun ia adalah perkhidmatan premium, pengoptimuman auto yang berkuasa bagi imej, pemampatan tanpa kerugian, pemprosesan awan untuk mengurangkan beban pelayan anda, sokongan imej WebP, saiz semula automatik dan banyak lagi menjadikan pelaburan itu berbaloi (lihat ulasan kami untuk mengetahui lebih lanjut). Selain itu, anda boleh dinyatakan dengan 100 imej secara percuma – jadi anda sekurang-kurangnya boleh mencubanya.

Mengoptimumkan imej tidak mengurangkan permintaan HTTP anda semata-mata, tetapi ia mengurangkan saiz fail imej anda, yang diterjemahkan kepada kelajuan halaman yang lebih baik.

Sebagai alternatif untuk mengurangkan permintaan HTTP, manfaatkan kuasa sprite imej CSS. Bagi yang belum tahu, sprite ialah koleksi imej yang dimasukkan ke dalam satu fail imej.

Kemudian menggunakan helah CSS, anda boleh memilih bahagian imej yang hendak ditunjukkan. Tetapi bagaimana ini mengurangkan permintaan HTTP? Berikut adalah analogi.

Katakan anda memerlukan lima imej pada halaman utama anda. Untuk memuatkan tapak anda, pemasangan WordPress anda akan membuat lima perjalanan ke pelayan untuk mendapatkan imej. Sekarang, jika anda meletakkan semua lima imej dalam satu fail imej (sprite), pemasangan WordPress anda akan membuat satu perjalanan sahaja.

Adakah anda melihat ke mana saya pergi dengan ini? Semakin sedikit perjalanan, semakin sedikit permintaan HTTP. Bahagian yang terbaik ialah anda tidak perlu berpeluh untuk mencipta dan melaksanakan sprite imej CSS. Anda boleh menggunakan alat seperti CSS Sprite Generator. Melaksanakan sprite imej CSS adalah mudah, dengan syarat anda mengetahui cara anda menggunakan CSS.

Petua Pro: Anda boleh melupakan semua tentang sprite imej CSS jika tapak web anda menggunakan HTTP/2 yang menyokong pemuatan imej dan skrip tak segerak. GTMetrix tidak mengambil kira HTTP/2 semasa menjaringkan prestasi, jadi jangan risau jika nampaknya imej anda mencipta satu tan permintaan HTTP.

Tetapi saya katakan: Jika sprite imej CSS boleh mengurangkan permintaan HTTP dengan ketara di tapak anda, dan anda tahu cara melaksanakan perkara yang sama, lakukannya dan hentikan detik tambahan itu dari masa pemuatan halaman anda. Sama ada anda mempunyai HTTP/2 atau tidak.

Lagipun, satu fail imej memerlukan satu permintaan HTTP. Sepuluh imej berasingan memerlukan 10 permintaan HTTP dan seterusnya. Saya tahu anda mendapat hanyut.

Langkah 3: Gabungkan & Kecilkan HTML, CSS & JavaScript

Penyebab utama banyak permintaan HTTP di laman web WordPress saya ialah fail CSS dan JavaScript luaran. Ya, saya bertanding dengan 43 skrip JS dan 22 fail CSS. Itulah 66 permintaan HTTP yang hebat.

Daripada kira-kira 130 permintaan HTTP, permintaan CSS dan JavaScript luaran menyumbang kira-kira 51% masalah! Itu hanya mengarut. Terima kasih, GTMetrix, penumbuk saya.

Jika saya menggabungkan dan mengecilkan 44 fail JS dan 22 CSS tersebut, saya boleh mengurangkan permintaan HTTP saya dengan ketara, saiz tapak web dan masa yang diperlukan untuk memuatkan. Tetapi apakah maksud perniagaan "menggabungkan" dan "mengurangkan" ini?

Menurut Raelene Morey dari Words by Birds (saya peminat tegar ? ), minifikasi ialah proses “…mengalih keluar sebarang aksara yang tidak perlu, seperti komen, pemformatan, ruang putih dan baris baharu daripada fail HTML, CSS dan JavaScript yang tidak t perlu untuk kod dilaksanakan.”

Minifying mengurangkan saiz fail dengan menghapuskan semua aksara lain untuk meninggalkan kod sahaja. Tetapi jika anda mempunyai 66+ skrip luaran, pengurangan tidak akan banyak membantu untuk meminimumkan permintaan HTTP. Untuk itu, anda perlu menggabungkan fail CSS dan JavaScript anda.

Sekali lagi, Raelene berkata:

Menggabungkan fail, sementara itu, adalah seperti bunyinya. Contohnya, jika halaman web anda memuatkan 5 fail CSS luaran dan 5 fail JavaScript luaran, menggabungkan CSS dan JavaScript anda ke dalam satu fail berasingan setiap satu akan menghasilkan hanya 2 permintaan dan bukannya 10.

Adakah anda faham? Saya pasti berharap begitu. Menggabungkan fail mengurangkan permintaan HTTP. Minification, sebaliknya, mengurangkan saiz fail. Gabungkan kedua-duanya, dan anda membunuh dua burung dengan batu yang sama.

Adakah terdapat pemalam? Ya sudah tentu!

Terdapat satu tan pemalam WordPress untuk menggabungkan dan mengecilkan fail anda. Contoh yang baik ialah pemalam WP Rocket. Ia pada asasnya adalah salah satu pemalam caching terbaik yang menawarkan anda ciri untuk menggabungkan dan mengecilkan fail dalam beberapa klik.

Satu lagi pilihan popular (dan percuma) ialah pemalam Autooptimumkan.

Dengan cara ini, semasa melakukannya, kurangkan bilangan fail CSS luaran dan skrip JS? Sebagai contoh, dan kami tidak menyebut nama di sini, adakah anda benar-benar memerlukan platform ulasan pihak ketiga? Adakah anda memerlukan pemalam radio langsung?

Tidak kira apa yang saya katakan, hapuskan semua skrip dan fail luaran yang anda tidak perlukan.

Langkah 4: Laraskan Fail CSS & JavaScript Menyekat Render

Dalam sesetengah keadaan, menggabungkan fail mungkin bukan pilihan, terutamanya untuk fail dan skrip pihak ketiga yang kerap berubah. Dalam kes sedemikian, anda boleh menangguhkan pemuatan aset tersebut. HTTP/2 menyokong pemuatan tak segerak bagi fail, yang bermaksud semua fail dimuatkan secara serentak.

Jika anda tidak mempunyai pemuatan tak segerak yang berlaku atas sebab tertentu (mungkin anda tidak menggunakan HTTP/2, atau skrip tidak segerak), fail ini boleh melambatkan tapak web anda dengan ketara.

Perlu diingat bahawa halaman web anda dimuatkan dari atas ke bawah. Jika anda mempunyai CSS dan JS yang menyekat pemaparan di bahagian atas halaman anda, penyemak imbas akan berhenti memuatkan sehingga fail telah dimuatkan sepenuhnya. Oleh itu, pengguna akan melihat halaman kosong sehingga skrip dimuatkan, yang memerlukan masa.

Bagaimana? Alihkan semua skrip penyekat pemaparan dari atas ke bawah halaman web anda. Tetapi berhati-hati di sini; anda tidak perlu mengalihkan semua skrip ke bahagian bawah. Saya mengatakan ini kerana halaman anda mungkin memerlukan CSS dan JS untuk menyampaikan pengalaman yang sangat menarik.

Jika anda menangguhkan beberapa fail CSS atau JavaScript, pengguna anda mungkin melihat versi halaman web anda yang diherotkan sehingga halaman dimuatkan sepenuhnya, yang betul-betul bertentangan dengan perkara yang anda ingin capai.

Jadi, hanya tangguhkan skrip yang tidak diperlukan untuk halaman dimuatkan. Dengan cara itu, pengguna anda tidak akan menunggu lama untuk halaman anda dimuatkan. kenapa? Kerana anda memerlukan lebih sedikit permintaan HTTP untuk menyampaikan mesej anda.

Ia tidak mengurangkan permintaan HTTP per se (kerana semua skrip dan fail akan dimuatkan akhirnya), tetapi ia mengurangkan bilangan permintaan HTTP yang diperlukan untuk memaparkan halaman anda.

Ia sama seperti malas memuatkan imej; imej hanya dimuatkan apabila ia berada dalam port pandangan, bukan apabila bahagian lain (dan bahagian terpenting) halaman dimuatkan.

Sebenarnya, membetulkan CSS & JS yang menyekat pemaparan mungkin mendedahkan fail dan skrip yang anda tidak perlukan untuk membina halaman web.

Sebagai contoh, jika beberapa skrip JS perkongsian sosial luaran mengambil masa yang lama untuk dimuatkan, anda boleh menangguhkannya. Selain itu, anda boleh menghapuskannya dan membina perkongsian sosial ke dalam tema anda.

Anda akan menghapuskan permintaan HTTP dan mempercepatkan tapak anda sambil mengekalkan fungsi yang sama. Saya faham ciri pengekodan ke dalam tema anda adalah pesanan yang tinggi untuk kebanyakan pemula, jadi semak dengan pengguna WP lanjutan atau pembangun.

Sebagai alternatif, anda boleh menggunakan pemalam WP Rocket untuk membetulkan skrip penyekat render, tetapi berhati-hati. Baca dokumentasi mereka kerana jika anda mengacaukan keadaan, anda boleh memecahkan tapak web anda dengan mudah.

Adakah terdapat pilihan percuma? Sudah tentu! Kami sedang bekerja dengan WordPress, ingat? Anda boleh menggunakan Async JavaScript, antara pemalam lain.

Langkah 5: Gunakan Caching & CDN

Adakah anda tahu caching dan CDN boleh mengurangkan permintaan HTTP anda? Ia nampaknya bukan fakta pada mulanya, tetapi apabila anda mempertimbangkan apa yang berlaku di sebalik tabir, anda boleh menggunakan caching dan CDN untuk kelebihan anda.

Caching melibatkan penyimpanan fail statik pada penyemak imbas supaya pengguna tidak memuat turun fail pada lawatan berikutnya. Katakan anda mempunyai pemalam cache dan pengguna memuat turun kandungan cache anda pada lawatan pertama mereka.

Pada lawatan berikutnya, tapak anda tidak akan membuat permintaan kepada pelayan. Sebaliknya, ia akan menyediakan sumber cache daripada penyemak imbas, mengurangkan permintaan HTTP dan meningkatkan kelajuan tapak anda.

CDN (atau Content Delivery Network) ialah rangkaian pelayan yang ditempatkan di seluruh dunia. CDN menggunakan caching juga, tetapi untuk kelajuan yang lebih pantas, penyedia CDN menyediakan kandungan cache anda daripada pelayan yang paling hampir dengan pelawat.

Jarak yang lebih pendek bermakna penghantaran kandungan yang lebih pantas, dan caching bermakna tapak web anda tidak perlu memuat turun kandungan yang sama dari pelayan pusat sekali lagi. Adakah ia masuk akal untuk anda?

Dan yang paling penting terdapat beberapa pilihan CDN percuma (atau sekurang-kurangnya percubaan percuma supaya anda boleh melihat secara literal perbezaan yang dibuatnya). Di WPExplorer kami menggunakan dan sangat mengesyorkan CLoudflare, tetapi pilih CDN yang anda rasa paling sesuai untuk anda.

Bonus: Pastikan HTTP/2 Disokong

Anda mungkin melakukan segala-galanya untuk mengurangkan permintaan HTTP, tetapi hos web anda boleh menjadi punca masalah anda. Jangan terkejut; bertanya dan berfikir, siapa – pada zaman dan zaman ini – menggunakan apa-apa selain HTTP/2?

Anda mungkin tidak tahu apa itu HTTP/2. Baiklah, sebagai permulaan, HTTP/2 menyokong pemuatan tak segerak bagi fail, antara lain. Ia mempunyai faedah lain berbanding HTTP 1.0, tetapi itu adalah pengajaran untuk hari lain.

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

Jangan cepat menilai; Saya telah melihat penyedia pengehosan web yang masih menggunakan HTTP 1.0 dan versi PHP yang lebih lama. Ya, walaupun dengan manfaat HTTP/2 dan PHP 7 yang jelas.  Saya tidak membingungkan pun; sesetengah pelanggan mereka datang kepada saya apabila beberapa pemalam mereka tidak berfungsi, dan ia menjengkelkan!

Tetapi, sebenarnya, kenapa? Hakikat bahawa sesetengah penyedia pengehosan web tidak terganggu oleh fakta bahawa PHP 5.6 tidak digunakan lagi dan mempunyai kelemahan keselamatan adalah sesuatu yang lain. Dan jika mereka tidak menyokong HTTP/2, itu adalah pemecah perjanjian untuk anda.

Hubungi hos anda atau gunakan alat KeyCDN untuk menyemak sama ada pelayan anda menyokong HTTP/2. Hos web terbaik menyokong HTTP/2 dan versi terkini PHP. Jika hos anda ketinggalan dalam kedua-dua kes, minta mereka menaik taraf atau memilih hos web yang lebih baik.

Kata Akhir

Mengurangkan permintaan HTTP di laman WordPress anda adalah mengenai menghapuskan perkara yang anda tidak perlukan. Jika anda mempunyai banyak barangan di laman web WordPress anda, anda akan mempunyai banyak permintaan HTTP dan kelajuan halaman yang agak perlahan.

Untuk mengurangkan permintaan HTTP, bersihkan tapak anda, optimumkan imej, betulkan skrip penyekat pemaparan, gunakan caching dan pastikan hos anda menyokong HTTP/2. Selain itu, usahakan untuk mencipta tapak web yang ringkas dan bersih yang tidak memerlukan banyak aset untuk dimuatkan.

Jika anda mempunyai soalan, sila beritahu kami di bahagian komen di bawah. Bersorak untuk tapak web yang lebih pantas dan masa depan yang hebat!