Cara Membuat Situs WordPress Anda Memuat Lebih Cepat Menggunakan Plugin

Memiliki situs web yang cantik dengan banyak konten hebat adalah penting jika Anda ingin menarik perhatian pembaca. Sayangnya, jika halaman Anda dimuat terlalu lambat, pembaca mungkin tidak akan pernah melihat konten Anda. Mengapa? Anda hanya memiliki beberapa detik untuk menarik perhatian mereka dan mencegah mereka berpindah ke situs berikutnya. Pembaca tidak ingin menunggu konten Anda dimuat. Semakin lama menunggu semakin besar kemungkinan Anda akan kehilangan mereka.

Untuk alasan ini, sangat penting untuk mengoptimalkan kecepatan pemuatan halaman Anda. Ada beberapa alat online yang bagus untuk membantu mengukur kecepatan Anda dan memecahkan masalah. Salah satu alat yang paling populer adalah Google PageSpeed ​​Insights.

Wawasan PageSpeed

Google PageSpeed ​​Insights adalah alat online gratis yang akan menguji kecepatan pemuatan situs web apa pun, mengidentifikasi masalah, memprioritaskannya, dan memberikan saran untuk memperbaiki masalah tersebut.

Untuk artikel ini saya menggunakan situs saya sendiri yang menggunakan Divi dari Elegant Themes sebagai dasar blog. Saya menunjukkan apa yang perlu diperbaiki, saran apa yang dibuat alat, dan bagaimana saya memperbaikinya. Skor tersebut memberikan hasil untuk seluler dan desktop. Saya fokus pada desktop. Beberapa masalah seluler akan diselesaikan di sepanjang jalan.

Sebagian besar masalah ini akan diselesaikan dengan menggunakan plugin. Saat memutuskan sebuah plugin, tetaplah menggunakan plugin yang telah diperbarui baru-baru ini dan memiliki reputasi yang baik. Banyak plugin akan menyelesaikan lebih dari satu masalah.

Sebuah kata peringatan – beberapa plugin tidak cocok dengan yang lain karena keduanya mencoba melakukan pekerjaan yang sama. Ini mungkin memiliki efek yang berbeda dari yang diinginkan. Saya sarankan untuk mencobanya di situs pengujian sebelum menggunakannya di situs utama Anda. Bukan hanya plugin itu sendiri tetapi juga kombinasi plugin. Sebelum mencoba plugin di situs langsung Anda, pastikan Anda memiliki cadangan terbaru.

Skor saya

Skor saya sangat buruk 46 . Hal pertama yang harus diperhatikan adalah ada tiga bagian berbeda dalam hasil:

• Harus memperbaiki (2 item)
• Pertimbangkan untuk memperbaiki (6 item)
• Lulus (2 item)

Setiap bagian diperluas untuk menunjukkan apa masalahnya dan mereka memberikan saran tentang cara memperbaikinya. Saya telah menemukan yang terbaik untuk memulai dengan item pertama dan pergi secara berurutan. Memecahkannya secara berurutan juga akan menyelesaikan masalah lain dalam daftar.

Catatan - Saya bahkan mengalami beberapa kegagalan di sepanjang jalan. Saya menyertakannya sehingga Anda dapat mengetahui kemungkinan masalah.

Harus Memperbaiki

Saya memiliki dua item yang membutuhkan perhatian segera:

• Aktifkan kompresi
• Hilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas

Aktifkan Kompresi

Masalah terpenting saya adalah saya tidak menggunakan kompresi. Ini menunjukkan bahwa saya dapat mengurangi ukuran transfer file saya sebesar 79%. Ini dapat dilakukan dengan menggunakan gzip atau deflate.

Penguat Skor Kinerja WP

Plugin gratis ini memiliki kompresi gzip dan akan menyelesaikan beberapa masalah lain seperti masalah CSS dan JavaScript dengan menghapus string kueri, menambahkan berbagai: header pengkodean-terima, dan mengatur cache kedaluwarsa. Saya memilihnya karena memiliki 4,7/5 dengan lebih dari 10.000 pemasangan aktif. Ini dikembangkan untuk mempercepat pemuatan halaman dan meningkatkan tes skor halaman.

Ini memberi saya skor 78 dengan pesan untuk mengurangi waktu respons server. Ini banyak hubungannya dengan paket hosting saya. Saya memperbaikinya dengan memindahkan situs web saya ke paket hosting baru. Itu di luar cakupan artikel ini.

Satu hal keren tentang ini adalah ia memecahkan beberapa masalah utama dengan masalah berikutnya: Hilangkan JavaScript dan CSS yang memblokir render di konten paruh atas. Masalah ini sekarang telah dipindahkan ke Pertimbangkan Memperbaiki. Itu juga sepenuhnya memperbaiki Leverage Browser Caching. Situs ini sekarang melewati 4 aturan di mana sebelumnya hanya melewati 2.

Kurangi Waktu Respons Server

Hal yang aneh tentang ini adalah waktu respons server naik dari .96 menjadi 1.4. Kurangi Waktu Respons Server sekarang di Harus Perbaiki. Ini membutuhkan plugin caching.

Cache Total W3

W3 Total Cache sejauh ini merupakan plugin paling populer untuk mempercepat kinerja server situs web Anda. Ini memiliki hampir satu juta pemasangan aktif dan peringkat 4,4/5. Ini mengoptimalkan situs Anda melalui caching. Anda dapat memilih opsi caching yang berbeda satu per satu. Mereka termasuk halaman, database, objek, dan browser. Ini akan men-cache header yang kedaluwarsa di masa mendatang dan tag entitas, feed, dan hasil pencarian. Ini juga memiliki fitur untuk mengecilkan JS, CSS, dan HTML Anda. Ini akan mempercepat skor Google PageSpeed ​​Anda setidaknya 10 kali saat dikonfigurasikan sepenuhnya.

Saya mencobanya dengan semua fitur caching dihidupkan. Ini membuat skor saya menjadi 86 . Untuk pertama kalinya situs saya sekarang hijau dan semua masalah yang saya alami berada di bawah Pertimbangkan Memperbaiki. Sekarang melewati 5 aturan termasuk waktu respons server yang sekarang mengatakan "server merespons dengan cepat".

Pertimbangkan Memperbaiki

Ketika saya pertama kali menjalankan tes, bagian ini memiliki lebih banyak masalah daripada ketika saya akhirnya melakukannya. Banyak dari masalah ini diselesaikan ketika saya memperbaiki masalah di area Should Fix.

Masalah awalnya termasuk:

• Manfaatkan Cache Peramban
• Waktu Respons Server
• Perkecil JavaScript
• Optimalkan Gambar
• Perkecil CSS
• Perkecil HTML

Berikut adalah melihat masalah saat ini.

Hilangkan Javascript dan Css yang Memblokir Render di Konten Lipat Atas

JavaScript dan CSS yang ada di paro atas dapat memperlambat pemuatan halaman dengan menempatkan terlalu banyak beban pada browser. Mereka harus memuat sebelum hal lain di paro atas dapat dimuat.

Ada beberapa cara untuk memperbaikinya:

• Tunda pemuatan
• Muat secara tidak sinkron
• Sejajarkan mereka langsung ke dalam HTML

Berikut adalah plugin yang saya gunakan untuk memperbaiki masalah ini.

Optimalkan otomatis

Plugin ini akan mengecilkan (menghapus semua format yang tidak perlu dan mengurangi ukuran file dan memuat di browser) dan mengompresi JavaScript, CSS, dan HTML Anda. Ini akan menambahkan header yang kedaluwarsa dan menyimpannya di cache. Ini akan memindahkan gaya Anda ke kepala halaman dan skrip ke footer. Dengan menggunakan pengaturan lanjutan, Anda dapat menyesuaikannya untuk kebutuhan spesifik Anda.

Ini juga akan memecahkan beberapa masalah seperti mengecilkan JS dan CSS di bawah daftar.

Awalnya saya hanya mengaktifkan pengaturan dasar untuk HTML, JS, dan CSS. Ini membuat skor saya menjadi 88 dan mengurangi masalah menjadi 3 sumber daya CSS. Satu dibuat oleh plugin itu sendiri dan dua lainnya adalah font Google. Sekarang melewati 7 aturan. Ini memecahkan Minify CSS dan Minify HTML.

WordPress Minify yang Lebih Baik

Tujuan utama plugin ini adalah untuk mengecilkan CSS dan JS Anda, tetapi plugin ini juga memiliki fitur keren yang memungkinkan Anda memindahkan file ke footer atau lokasi lain (itulah sebabnya saya memilihnya). Ini menggunakan sistem enqueueing untuk meningkatkan kompatibilitas dengan browser, plugin, dan tema.

Ketika saya menginstalnya, semua pengaturan tata letak untuk tema saya telah dihapus dan semua menu, gambar, tautan, dll., muncul di paling kiri layar. Untungnya pemformatan kembali ketika saya menghapusnya. Mungkin ada sesuatu dalam pengaturan yang perlu disesuaikan. Saya yakin ini adalah plugin yang bagus karena memiliki lebih dari 60.000 pemasangan aktif dan peringkat 4,4/5. Saya hanya menyertakan yang ini sebagai peringatan bahwa itu mungkin tidak berfungsi seperti yang Anda butuhkan tanpa beberapa pengaturan.

Karena skor saya adalah 88 dan saya tahu apa 3 masalah itu, saya memutuskan untuk beralih ke masalah berikutnya.

Optimalkan Gambar

Ukuran gambar memainkan peran besar dalam kecepatan pemuatan halaman. Terkadang Anda dapat menggunakan ukuran gambar yang jauh lebih kecil dan kualitas yang lebih rendah tanpa banyak perbedaan visual saat dilihat di web. Ini tidak hanya mempercepat waktu pemuatan dan menggunakan lebih sedikit bandwidth, tetapi juga mempercepat waktu pencadangan dan mengurangi ruang penyimpanan di server Anda.

Pengoptimal Gambar EWWW

Plugin ini akan secara otomatis mengoptimalkan gambar Anda saat Anda mengunggahnya dan mengonversi gambar Anda ke format yang menghasilkan ukuran terkecil. Ini juga akan mengoptimalkan gambar yang sudah Anda unggah. Anda juga dapat menerapkannya untuk menerapkan pengurangan lossy untuk gambar PNG dan JPG.

Ketika saya menginstalnya, ada beberapa file yang ingin saya temukan dan instal. Saya pikir plugin ini akan bekerja dengan baik dengan semua file yang diinstal, tetapi saya memutuskan untuk menemukan satu yang bekerja di luar kotak.

WP Smush

Plugin ini akan memperkecil ukuran file gambar tanpa mengurangi kualitasnya. Ini dilakukan dengan menghapus informasi tersembunyi. Ini akan menganalisis file Anda dan memberi tahu Anda berapa banyak gambar yang perlu dihancurkan. Anda dapat menghancurkannya dalam jumlah besar.

Versi gratisnya tidak menghapus apa pun lebih dari 1 MB dan hanya akan menghapus 50 sekaligus. Untuk lebih dari itu, Anda memerlukan WP Smush Pro, yang akan menghapus gambar hingga 32 MB tanpa batasan berapa banyak sekaligus. Itu membuat cadangan dari aslinya jika Anda membutuhkannya. Harga mulai dari $19 per bulan.

Saya memiliki 114 gambar yang perlu dihancurkan. 8 dari gambar ini berukuran lebih dari 1 MB. Saya memutuskan untuk memperbaikinya dengan tangan. Itu menghancurkan 98 gambar dan mengurangi ukuran file sebesar 4,79 MB (8,82%).

Ini membuat skor saya menjadi 90 . Google Insights mengidentifikasi 5 gambar yang tidak disukai tetapi tidak ada yang lebih dari 1 MB. Mereka berkisar dari 0,7 KB hingga 17 KB.

Mengoptimalkan Gambar dengan Tangan

Anda dapat mengoptimalkan gambar secara manual dengan mengubah ukuran, mengurangi kualitas, dan mengubah format. Salah satu alat favorit dan paling sering saya gunakan untuk menangani gambar adalah Paint.NET. Ini adalah aplikasi pengeditan gambar dan foto gratis untuk Windows yang memiliki banyak fitur untuk mengurangi ukuran file. Apa kesukaanmu?

Perkecil JavaScript, CSS, dan HTML

Saya pikir saya memperbaiki ini…

Saat saya sedang mengerjakan masalah lain, saya melihat bahwa satu-satunya pesan yang perlu diperkecil adalah untuk JavaScript. Setelah saya mengoptimalkan gambar saya, ketiga masalah kembali. Saya menelusuri kembali langkah saya untuk mencari tahu apa yang terjadi.

Dengan mencoba Better WordPress Minify dan kemudian mematikannya kembali, pesan saya untuk mengecilkan CSS dan HTML kembali. Skor saya turun menjadi 88 dan saya sekarang kembali memiliki 5 aturan yang lulus. Saya mengaktifkan fitur pengecilan W3 Total Cache dan sekarang telah melewati semua masalah pengecilan. Saya sekarang memiliki skor 88 dan melewati 8 aturan. Juga, ia memiliki enam file di paro atas. Saya tahu saya telah memecahkan beberapa masalah ini, jadi saya pasti telah mengubah sesuatu.

Saya melakukan beberapa pemecahan masalah dan menemukan bahwa saya telah mematikan Autoptimize ketika saya memiliki masalah dengan Better WordPress Minify sebelumnya. Saya mengaktifkan kembali Autoptimize, mematikan minify dari W3 Total Cache, dan membersihkan cache (langkah yang sangat penting!). Saya sekarang mendapatkan skor saya 90 kembali dan situs melewati 8 aturan. Itu kembali ke tiga file CSS di paro atas dan pesan untuk mengoptimalkan gambar.

Berdasarkan pengalaman masa lalu saya, saya memutuskan untuk tidak membuang waktu untuk file-file ini. Saya pikir Google membenci gambar dalam ukuran apa pun (tidak peduli seberapa kecil saya mendapatkannya, saya masih mendapatkan pesan untuk mengurangi ukurannya) dan untuk beralih dari PageScore 46 menjadi 90 adalah kemenangan dalam buku saya. Saya telah belajar cara yang sulit untuk berhenti saat Anda berada di depan.

Nilai akhir

Skor akhir saya adalah 90/100. Plugin yang saya gunakan untuk mendapatkan skor ini adalah:

• Optimalisasi otomatis (semua fitur diaktifkan)
• W3 Total Cache (hanya fitur cache halaman yang diaktifkan)
• WP Performance Score Booster (semua fitur diaktifkan)
• WP Smush (edisi gratis)

Sebagai catatan, skor seluler naik dari 36 menjadi 78. Untuk memperbaikinya saya harus mengoptimalkan gambar dan file saya untuk seluler.

Pikiran Akhir

Pengunjung Anda, Google, dan mesin pencari lainnya membenci situs web yang memuat dengan lambat. Dengan menggunakan Google PageSpeed ​​Insights, Anda dapat mengetahui dengan tepat apa masalahnya dan mendapatkan tips tentang cara mengatasinya. Anda hanya perlu beberapa plugin gratis untuk beralih dari situs lambat yang dibenci Google ke situs cepat yang disukai Google. Berhati-hatilah saat bereksperimen – beberapa plugin tidak cocok dengan yang lain.

Saya ingin mendengar dari Anda. Sudahkah Anda mengoptimalkan situs WordPress Anda menggunakan Google PageSpeed ​​Insights? Apakah pengalaman Anda seperti pengalaman saya? Apakah Anda menggunakan plugin yang berbeda untuk menyelesaikan masalah? Saya ingin mendengar tentang pengalaman Anda di komentar.