Cara Berhenti Memuat File yang Tidak Perlu dan Mengurangi Permintaan HTTP Situs Web – Tips Pengoptimalan WordPress

Di Crunchify, kami telah menerbitkan beberapa tutorial pengoptimalan kecepatan untuk Anda rujuk kapan saja.

Kami menggunakan MaxCDN sebagai penyedia konten kami. Sudah hampir 4 tahun dan sejauh ini bekerja terlalu baik. Genesis WordPress Framework dan MaxCDN adalah kombinasi terbaik. Secara default, Genesis Framework hadir dengan banyak pengoptimalan, Skema Google Markup, struktur ramah seluler, dan banyak lagi.

Minggu lalu saya melihat akun MaxCDN saya dan tiba-tiba melihat sumber unduhan teratas. Seperti yang Anda lihat pada gambar di top 9 out of 10 resource files diunduh lebih dari ~ 5 millions kali dalam minggu lalu.

Saya terkejut dan berpikir apakah saya benar-benar membutuhkan sumber daya itu? Apakah saya harus memuat file-file itu secara terpisah? Bagaimana menyingkirkan file-file itu jika tidak diperlukan kecuali file style.css , yang mutlak diperlukan untuk memuat situs.

Mari kita mulai bagaimana saya menghapus semua 9 file itu dengan trik sederhana

Langkah 1

Mari kita list all of those 9 files . Kolom ke-2 menunjukkan berapa kali diunduh.

Langkah 2

Mari kita kelompokkan file Plugin Crayon Syntax Highlighter .

Ada 3 file:

neon.css , crayon.min.css dan crayon.min.js . Saya telah menulis tutorial terpisah lengkap dengan total 7 langkah terperinci untuk menyingkirkan file-file itu. Silakan periksa dan beri tahu saya jika Anda melihat masalah apa pun.

Langkah-3

Sekarang buka wp-embed-min.js . Silakan kunjungi tutorial Cara Menonaktifkan Skrip Sematan Otomatis untuk WordPress 4.4+. Ini akan berhenti memuat file embed di front end.

Langkah-4

Mari kita 3 more .png :

bg-pattern.png

Saya memuat gambar ini di latar belakang header dan footer. Saya menyingkirkannya dengan menggunakan warna #333 sebagai gantinya.

crunchify-sprite.png

Saya memuat gambar sprite ini untuk menampilkan tombol ikuti sosial di bilah sisi. Saya menggantinya dengan font fontawesome .

h3.png

Saya memuat ini untuk menunjukkan tanda centang untuk posting H3 di beberapa lokasi. Saya menggantinya dengan font fontawesome . Di bawah ini adalah padanan fontawesome.

Langkah-5

Sekarang kita hanya memiliki 2 file. crunchify-logo.png dan bg.png , yang saya pikir akan saya simpan. Jadi, alih-alih memanggil sebagai gambar, saya menambahkan gambar base64 yang setara untuk file itu.

Sebelum:

Setelah:

Saya telah mengonversi kedua gambar menjadi gambar base64. Keuntungan yang akan kita dapatkan, tidak harus membuka koneksi lain dan melakukan request HTTP ke server untuk image tersebut.

Lebih Sedikit Permintaan = Waktu buka halaman yang lebih baik

Ada beberapa keuntungan menggunakan SVG (Scalable Vector Graphic) image sebagai gambar yang diskalakan ke ukuran apa pun tanpa kehilangan kejelasan (kecuali sangat kecil) yang terlihat bagus pada tampilan retina.

Data URIs ini tidak terbatas pada .png atau gambar tetapi untuk sumber daya apa pun. Berikut adalah alat konverter .png ke .svg sederhana yang saya gunakan secara online.

Ringkasan

Tutorial ini adalah bagian dari bagian Cara Mempercepat WordPress dan Meningkatkan Kinerja. Anda akan menemukan semua trik dan tip pengoptimalan WordPress di sana.

Dengan melakukan langkah-langkah ini, saya menyingkirkan semua 9 sumber daya yang tidak diinginkan dari 10. Artinya – halaman saya dimuat lebih cepat karena akan ada 9 permintaan lebih sedikit di setiap halaman

Beri tahu saya jika Anda memiliki kiat lain yang akan meningkatkan kecepatan halaman situs. Di Crunchify, kecepatan adalah kriteria utama dan itulah alasan kami menggunakan lebih sedikit plugin. Semua halaman dimuat within half a second .