Panduan Utama untuk Pengoptimalan Kecepatan Halaman untuk WordPress

Mengikuti panduan ini, Anda akan mempelajari semua teknik untuk mempercepat situs WordPress secara drastis. Berikut adalah alasan terpenting mengapa memiliki waktu pemuatan kecepatan halaman yang bagus di WordPress menguntungkan bisnis Anda: pengguna tidak akan meninggalkan situs web Anda, mereka akan menghabiskan lebih banyak waktu dan uang di sana, dan mesin telusur akan memberi peringkat situs web Anda lebih baik di hasil pencarian. Siap?

pengantar

Pengguna internet tidak memiliki banyak kesabaran, dalam hal waktu pemuatan halaman. Kami mengklik tautan atau memasukkan URL dan kami menunggu satu detik, dua, tiga dan hanya itu. Statistik Google menyatakan, bahwa 50% pengguna mengharapkan situs seluler dimuat dalam 2 detik dan 53% pengguna cenderung meninggalkan halaman, jika memuat lebih dari 3 detik. Itu waktu yang sangat singkat, jika Anda menganggap bahwa waktu pemuatan rata-rata beranda, pada perangkat seluler, adalah 19 detik (pada jaringan 3G). Waktu pemuatan di komputer lebih cepat dan waktu pemuatan rata-rata adalah 5 detik, tetapi itu masih terlalu lama.

Mengambil tolok ukur situs web desktop sebagai referensi bukan alasan lagi. Untuk sebagian besar situs web saat ini, sebagian besar lalu lintas berasal dari perangkat seluler. Pada artikel ini, kita akan melihat secara lengkap teknik terbaru untuk optimasi kecepatan halaman untuk situs WordPress. Mengikuti panduan ini, Anda akan dapat mempercepat situs WordPress, mengurangi waktu pemuatan seluler dan desktop secara drastis, dan karenanya membuatnya lebih ramah pengguna.

Jika Anda tidak memiliki situs WordPress, jangan tutup panduannya dulu. Sebagian besar teknik pengoptimalan kecepatan yang dijelaskan dalam panduan langkah demi langkah ini, dapat diterapkan ke semua jenis situs web.

Jika situs Anda dibuat dengan mempertimbangkan monetisasi, baik itu toko e-niaga online atau jika Anda menjual layanan online/offline, kehilangan calon pelanggan bukanlah hal yang baik. Anda pada dasarnya meninggalkan uang di atas meja. Meningkatkan kecepatan halaman Anda akan berdampak positif pada penghasilan Anda. Fakta menyenangkan: Kampanye penggalangan dana Obama meningkatkan konversi donasi sebesar 14% dengan pengoptimalan situs dan mengurangi waktu buka halaman dari 5 detik menjadi 2 detik.

Sebagai pemilik atau pengembang situs web, kami ingin pengunjung kami mendapatkan pengalaman terbaik. Kami membuat situs yang tampak hebat dengan fungsionalitas yang luar biasa, tetapi kami biasanya melupakan pentingnya situs web yang cepat. Situs web yang cepat membangun kepercayaan dengan pengunjung kami, itu meningkatkan kemungkinan pengunjung akan tinggal di halaman kami lebih lama dan karena itu mereka mungkin menghabiskan lebih banyak. Di sisi lain, jika situs web kami lambat, pengunjung mungkin akan menyerah begitu saja dan mereka bahkan tidak akan melihat situs web kami yang luar biasa, dengan penawaran kami yang sama-sama mengagumkan.

Jika alasan di atas tidak cukup meyakinkan, saya punya satu lagi. Google dan mesin pencari lainnya (SE) mengungkapkan, bahwa memiliki situs web yang lambat akan mendorong peringkat mesin pencari Anda turun, membuat Anda memiliki lebih sedikit pengunjung. Jadi, memiliki situs web yang cepat berarti, Google akan lebih menyukai Anda dan ini dapat secara drastis mengubah peringkat SE Anda sesuai keinginan Anda.

Tentu saja, waktu pemuatan bervariasi karena beberapa alasan, misalnya, kecepatan internet pengunjung, lokasi pengunjung, dan seberapa "berat" atau membengkaknya situs web kita. Tidak ada yang dapat kami lakukan tentang kecepatan internet pengunjung, tetapi kami dapat menangani aspek lain dan meningkatkan pengalaman untuk semua orang. Dalam panduan ini, kita akan melihat cara mengoptimalkan situs WordPress kita untuk kecepatan, membuatnya cepat dan ramping, jadi ayo pergi!

Daftar isi

• Yayasan
  • Hosting WordPress
    • Hosting Bersama
    • Hosting Terkelola
    • VPS atau Server Khusus
  • Tema WordPress
  • Plugin WordPress
• Langkah-langkah Optimasi Kecepatan Halaman WordPress
  • Alat Kecepatan Halaman
    • Wawasan Google PageSpeed
    • GTMetrix
    • Tes Kecepatan Situs Web Pingdom
    • Tes Halaman Web
  • Optimasi Gambar
    • Panduan Mini untuk Pengoptimalan Gambar
    • Gambar yang Dioptimalkan Google PageSpeed
    • Perbaikan Gambar Lainnya
    • Peningkatan Studi Kasus
  • Cache Peramban
  • Kompresi Sumber Daya (Gzip atau Deflate)
  • Hapus file JS atau CSS yang tidak dibutuhkan
  • JavaScript dan CSS yang memblokir perenderan di konten paruh atas
  • Caching Sisi Server
    • WP Rocket (plugin caching sisi server)
  • Jaringan Pengiriman Konten
    • Cloudflare
• Hasil Akhir
• Kesimpulan

Yayasan

Untuk membuat situs web Anda secepat mungkin, kami harus membangunnya di atas fondasi yang baik. Sama seperti membangun rumah, Anda tidak ingin membangunnya di atas pasir apung dan memiliki masalah di awal. Anda ingin membangunnya di atas fondasi yang kokoh, sehingga akan bertahan lama tanpa masalah. Tiga hal utama yang harus diperiksa adalah:

• tuan rumah
• tema WordPress
• plugin WordPress

Hosting WordPress

Hosting adalah dasar dari situs WordPress Anda dan oleh karena itu merupakan komponen penting, yang tidak boleh diabaikan, bahkan jika Anda sudah memiliki hosting. Beralih ke penyedia hosting yang lebih baik akan mempercepat waktu pemuatan WordPress Anda hingga beberapa detik.

Memilih web host yang tepat adalah penting dan Anda tidak boleh mendasarkan keputusan Anda pada harga hosting. Biasanya dengan harga murah, Anda mendapatkan kinerja yang rendah dan inilah yang ingin kami hindari. Mari kita lihat opsi hosting yang tersedia dan jelaskan apa perbedaannya.

Hosting Bersama

Ini adalah solusi hosting yang paling luas karena murah. Tetapi seperti yang kami katakan, dengan harga rendah, Anda mendapatkan kinerja rendah. Di hosting bersama, ada ribuan akun di satu server fisik, yang berarti sumber daya server dibagikan di antara semua situs web yang dibuat oleh akun hosting ini.

Bayangkan sebuah pizza besar (hmmm?…), setiap situs web di shared hosting mendapat bagian yang sangat kecil. Tetapi karena situs Anda memiliki banyak pengunjung, itu membutuhkan lebih banyak pizza! Masih lapar, tapi tidak ada lagi pizza :(, karena situs web lain juga lapar…

Jika hanya mendapatkan sepotong kecil pizza saja tidak cukup buruk, maka potensi risiko keamanan mungkin akan membuat kasus hosting bersama menjadi lebih buruk. Situs web yang terinfeksi pada hosting bersama dapat menyebabkan masalah kecepatan dan kinerja untuk seluruh server dan juga membahayakan situs WordPress Anda.

Konfigurasi server pada shared hosting sangat terbatas dan Anda tidak memiliki banyak ruang untuk mengonfigurasinya sesuai keinginan Anda. Server telah dikonfigurasikan sebelumnya ke pengaturan tertentu, biasanya sangat umum, dan seharusnya menjalankan WordPress tanpa masalah. Masalah muncul kemudian, dalam bentuk kehabisan memori atau dalam bentuk pengaturan PHP terbatas, bahwa sebuah plugin perlu berfungsi dengan baik.

Saya tidak bisa merekomendasikan shared hosting untuk situs web bisnis apa pun, tetapi jika harus, saya harus mengatakan, ini paling cocok untuk situs dengan lalu lintas sangat rendah.

Hosting Terkelola

Ini adalah peningkatan besar dari hosting bersama, karena situs web Anda mendapatkan potongan pizza yang lebih besar (sepotong pizza utuh, ya!), tetapi harganya lebih mahal.

Server di hosting terkelola lebih sedikit penduduknya dan itu berarti lebih banyak sumber daya server untuk situs Anda. Server ini biasanya dioptimalkan untuk menjalankan WordPress semulus mungkin, mereka memiliki lebih banyak memori, kekuatan pemrosesan, dan sistem caching.

Instalasi dan konfigurasi perangkat keras dan perangkat lunak dari server hosting yang dikelola ini dilakukan oleh perusahaan hosting (karenanya kata "dikelola"). Layanan lain, seperti pencadangan, penyeimbang beban, pemulihan bencana, dan pemeriksaan/pencegahan keamanan, juga dapat menjadi bagian dari hosting terkelola, tergantung pada penawaran perusahaan hosting.

Hosting WordPress yang dikelola direkomendasikan untuk situs web dengan lalu lintas rendah hingga menengah.

VPS atau Server Khusus

Jika kita berpegang pada analogi pizza, dengan VPS (Virtual Private Server) Anda mendapatkan beberapa irisan pizza, tetapi tidak seluruh pizza dan dengan dedicated server, Anda mendapatkan seluruh pizza.

Artinya, dengan dedicated server, Anda memiliki kendali atas seluruh server dengan semua sumber dayanya dan dengan VPS, Anda mendapatkan sebagian dari server karena Anda masih berbagi mesin server fisik dengan orang lain. Dalam hal pengoptimalan kecepatan halaman untuk WordPress, tidak ada batasan sisi server saat Anda menyiapkan WordPress di VPS atau server khusus. Anda tahu persis berapa banyak sumber daya yang tersedia untuk situs web Anda dan Anda dapat mengonfigurasinya sesuai keinginan Anda. Anda dapat menerapkan fitur-fitur canggih sebelum penyedia hosting standar mendukungnya (yang dapat tertinggal bertahun-tahun di belakang teknologi perangkat lunak server).

Kedua opsi ini menawarkan kontrol dan sumber daya yang lebih besar, tetapi juga memiliki harga yang lebih tinggi dan menuntut lebih banyak keterampilan untuk menyiapkan dan memeliharanya dalam jangka panjang. Server VPS/Dedicated juga dapat dikelola, jadi Anda tidak perlu menjadi ahli server untuk menggunakannya. Mereka sesuai untuk situs web dengan volume lalu lintas tinggi.

Jika Anda tidak yakin hosting mana yang harus dipilih, saya akan menyarankan opsi hosting WordPress yang dikelola, yang juga harus dapat menskalakan (mengalokasikan lebih banyak sumber daya dari server), jika diperlukan.

Pengoptimalan situs web gratis, yang sekarang ditawarkan oleh setiap hosting yang layak, adalah meningkatkan versi PHP ke 7.x. Jika situs WordPress Anda berjalan pada PHP lebih rendah dari 7, seperti 5.6 atau bahkan lebih lama, silakan hubungi dukungan hosting Anda dan minta mereka untuk memperbaruinya ke versi stabil terbaru. Jika Anda mencari hosting baru, Anda dapat meminta dukungan mereka, jika mereka memiliki PHP versi 7.x. Mereka semua harus menjawab dengan "ya" yang solid, tetapi jika mereka tidak memiliki opsi untuk menggunakan PHP 7.x, maka saya akan merekomendasikan untuk menjauh dari mereka. PHP 7, dibandingkan dengan versi yang lebih lama, merupakan peningkatan besar dalam hal kecepatan dan kinerja dan sangat mudah untuk beralih ke itu, jadi manfaatkan itu.

Pilihan hosting yang baik akan menyelamatkan Anda dari banyak rasa sakit di jalan dan jika Anda menemukan masalah, dukungan pelanggan yang baik harus dapat membantu Anda, jadi saya juga akan ingat untuk memilih host yang menawarkan dukungan yang baik. . Satu trik cepat yang dapat Anda manfaatkan: ajukan pertanyaan pra-pembelian dan pantau waktu respons, sikap, dan tingkat profesionalisme mereka.

Tema WordPress

Saat kami memilih tema WordPress untuk situs kami, kami selalu memulai dengan desain tema dan tidak apa-apa. Pertama-tama kita harus memilih beberapa tema yang kita sukai, karena kita ingin situs kita menjadi luar biasa dan desain yang bagus adalah hal pertama yang dilihat pengunjung. Hal kedua mungkin adalah fungsionalitas tema. Apakah tema atau plugin yang direkomendasikan tema menawarkan fungsionalitas yang kita inginkan? Jika berhasil, bagus! Kami berada dalam bisnis! Apa yang hampir selalu kita lupakan adalah memeriksa seberapa cepat tema dimuat.

Kami dapat menguji waktu pemuatan halaman demo tema dan kami akan segera melihat, apakah tema dioptimalkan untuk kecepatan. Kami akan memeriksa alat kecepatan halaman mana yang digunakan dan cara menggunakannya di bagian di bawah ini, tetapi untuk saat ini, saya hanya ingin memberi tahu Anda tentang langkah ekstra verifikasi tema ini, sebelum membeli. Tentu saja, waktu pemuatan halaman demo mungkin dapat ditingkatkan, jadi jika Anda tidak mendapatkan skor sempurna, jangan khawatir, tidak ada tema WordPress yang akan mendapatkan skor 100% sempurna, kecuali, jika kontennya sangat sedikit. di halaman demonya. Sebagai aturan praktis, Anda harus mencari tema yang tidak ada dalam angka merah (skor 50 atau lebih rendah pada alat kecepatan halaman).

Itu datang ke keseimbangan yang baik antara desain tema dan fungsionalitas vs kecepatan tema. Misalnya, tema WordPress kosong dengan sedikit teks, akan dimuat dengan sangat cepat, tetapi tema yang membengkak dengan banyak fungsi (sebagian besar mungkin tidak Anda perlukan), dengan banyak konten multimedia, akan dimuat jauh lebih lambat. Mencapai titik manis itu adalah tujuannya, ketika memilih tema WordPress yang bagus dan berkinerja baik.

Plugin WordPress

Pertanyaan yang sering saya lihat adalah: “Berapa banyak plugin yang terlalu banyak?”. Ini bukan masalah dalam jumlah plugin WordPress, tetapi dalam kualitas kode dan dampak plugin pada sistem. Anda dapat memiliki 50+ plugin aktif, dengan masing-masing plugin menangani fungsionalitas spesifik kecil (dengan kode yang baik) dan situs akan berjalan dengan baik. Di sisi lain, Anda dapat memiliki 5 plugin aktif dan salah satunya dapat menyumbat sistem Anda, membuat WordPress Anda lambat.

Memeriksa kode setiap plugin adalah ide yang bagus, tetapi “tidak ada yang punya waktu untuk itu” , ditambah lagi Anda akan membutuhkan pengetahuan pemrograman yang baik untuk melakukannya. Jika Anda menempuh jalan itu, hal yang harus diperhatikan adalah plugin yang mengantrekan banyak sumber daya eksternal, membuat banyak permintaan HTTP, membuat kueri basis data yang tidak perlu (tidak dioptimalkan) dan sebagainya (pada dasarnya apa pun yang akan memperlambat situs web WordPress, tanpa alasan yang tepat di baliknya).

Apa yang saya sarankan adalah untuk tidak menginstal dan mengaktifkan setiap plugin yang Anda pikir Anda butuhkan.

Pikirkan dulu, apakah situs Anda benar-benar membutuhkan fungsionalitas tambahan ini? Misalnya, jika Anda memerlukan kode pendek tombol, periksa dokumentasi tema Anda, mungkin tema memiliki kode pendek untuk itu dan Anda tidak perlu menginstal dan mengaktifkan seluruh plugin bundel kode pendek hanya untuk menggunakan kode pendek tombol tunggal. Ini adalah contoh sepele, tetapi saya ingin Anda berpikir sebelum menginstal dan mengaktifkan plugin baru. Setiap plugin yang tidak diverifikasi dapat membuat situs Anda lebih berat dan karenanya lebih lambat, ditambah lagi dapat menyebabkan pelanggaran keamanan, jika plugin dikodekan dengan buruk atau tidak dirawat.

Terakhir, satu hal hebat yang dapat Anda manfaatkan, saat memilih plugin, adalah pangsa global WordPress yang besar dan akibatnya komunitas yang besar. Dengan kurangnya pengetahuan pengkodean, aturan praktis yang baik adalah tetap menggunakan plugin populer dengan banyak pemasangan aktif, skor peringkat rata-rata yang baik, dan ulasan positif. Rekan WordPressers akan membuat pilihan Anda jauh lebih mudah!

Langkah-langkah Optimasi Kecepatan Halaman WordPress

Sebelum kita mulai dengan optimasi, saya ingin menyebutkan beberapa hal.

Pertama, Anda harus membuat cadangan situs WordPress Anda, berikut adalah panduan tentang cara melakukannya dengan plugin WordPress. Lebih baik aman daripada menyesal!

Kedua, saya akan memperingatkan Anda untuk tidak mengharapkan skor 100/100 di alat kecepatan halaman yang akan kami gunakan dalam panduan kami. Mengejar skor 100/100 bukanlah ide yang baik atau bahkan mungkin di beberapa situs. Itu semua tergantung pada jenis konten yang ditampilkan situs Anda. Jika sebuah situs hanya memiliki sedikit teks dan gambar, maka tentu saja, skor sempurna sangat mungkin. Tetapi jika Anda memiliki halaman yang panjang, dengan banyak konten multimedia dan integrasi aplikasi pihak ketiga lainnya, seperti google maps dan sebagainya, maka skor 100 tidak terlihat dan Anda juga tidak boleh mengejarnya.

Mengapa bukan ide yang baik untuk menggunakan 100/100? Jika Anda mengikuti petunjuk dari alat kecepatan halaman dan mengoptimalkan semuanya seperti yang mereka katakan, maka situs Anda mungkin tidak berfungsi dengan baik. Jika Anda memindahkan semua file JS atau CSS yang memblokir ke footer, maka flashing CSS akan muncul (konten tanpa gaya akan muncul terlebih dahulu dan ketika CSS akan dimuat, situs akan "berkedip" ke tempatnya), hal yang sama akan terjadi dengan kode JS , yang akan memodifikasi elemen DOM apa pun setelah kode JS dimuat.

Anda mungkin merusak situs Anda, jika Anda mengikuti instruksi secara membabi buta dan terus mengoptimalkan situs WordPress Anda untuk waktu pemuatan yang lebih baik, hanya untuk mendapatkan skor sempurna. Skor kecepatan halaman yang sempurna hanyalah angka, yang sebenarnya tidak masalah, jika pengunjung Anda berakhir dengan situs yang rusak. Kami harus mencari keseimbangan antara kecepatan halaman dan pengalaman pengguna.

Untuk demonstrasi pengoptimalan kecepatan halaman WordPress, kami akan menggunakan akun hosting bersama saya dan tema WordPress medis kami (dengan plugin yang direkomendasikan tema). Ya, ya, saya tahu bahwa pada dasarnya saya mengatakan untuk tidak menggunakan hosting bersama, tetapi kita akan melihat apa yang mampu dan apa batasannya, ditambah ini hanya tes pengoptimalan kecepatan halaman, bukan situs web WordPress bisnis yang sebenarnya

Saya telah menginstal WordPress versi terbaru, tema MedicPress, semua plugin yang direkomendasikan tema dan saya telah mengimpor konten demo. Ini adalah titik awal kami untuk situs pengujian.

Alat Kecepatan Halaman

Optimalisasi kecepatan halaman bisa jadi sulit, tetapi untungnya, ada alat online yang membuat hidup kita lebih mudah dan memberi tahu kita apa yang harus dilakukan, untuk meningkatkan kecepatan situs web kita.

Aturan pertama dalam mengoptimalkan kecepatan WordPress Anda adalah ini: selalu ukur!

Jalankan alat (atau setidaknya salah satunya), yang akan kita lihat di bagian di bawah ini, setelah setiap langkah pengoptimalan dan lacak peningkatannya. Dengan cara ini Anda akan tahu, tugas mana yang menghasilkan peningkatan terbesar. Anda juga harus menjalankan pengujian beberapa kali, untuk melihat waktu pemuatan rata-rata yang sebenarnya.

Halaman dimuat secara berbeda, tergantung di mana server hosting berada. Misalnya, jika server Anda berlokasi di Amerika Utara dan pengunjungnya berasal dari Eropa, halaman akan dimuat lebih lambat untuknya, daripada pengunjung Kanada. Masalah ini dapat diperbaiki dengan CDN (Content Delivery Network), tetapi kita akan membahasnya nanti di artikel. Untuk saat ini, saya hanya ingin menunjukkan, bahwa masalah ini hadir untuk pengunjung di seluruh dunia dan juga untuk alat pengoptimalan kecepatan halaman. Beberapa alat juga memungkinkan Anda melakukan pengujian dari lokasi yang berbeda, sehingga Anda dapat melihat pengaruhnya terhadap waktu pemuatan.

Alat kecepatan halaman yang akan kita lihat adalah:

• Wawasan Google PageSpeed
• GTmetrix
• Tes Kecepatan Situs Web Pingdom
• Tes Halaman Web

Ada alat lain, tetapi ini adalah yang paling populer dan kami akan tetap menggunakannya.

Wawasan Google PageSpeed

Seperti yang Anda lihat dari judul alat ini, ini adalah produk Google. Di samping skor (dibagi menjadi desktop dan seluler) dan petunjuk berguna tentang apa yang harus dilakukan untuk meningkatkan waktu pemuatan halaman Anda, kami juga dapat menarik kesimpulan tentang apa yang suka dilihat Google di situs web. Hal-hal mana yang ingin dioptimalkan di situs web agar mendapat peringkat bagus di hasil mesin pencari.

Jika Anda memiliki gambar atau file sumber daya yang tidak dioptimalkan (JS atau CSS), itu akan menghasilkan file zip dengan rekan-rekan mereka yang dioptimalkan, yang dapat Anda ganti di server Anda. Cukup rapi, bukan? Kami akan melihat pengoptimalan gambar dan kode nanti, ketahuilah bahwa Google PageSpeed ​​dapat membantu Anda dalam hal itu.

Google PageSpeed ​​Insights tidak memiliki banyak informasi terperinci, seperti alat lainnya, tetapi ini adalah titik awal yang baik, yang mencakup semua aspek penting dari pengoptimalan kecepatan halaman. Ini mencantumkan langkah-langkah yang akan paling meningkatkan situs Anda.

Saya telah menjalankan alat ini dengan URL situs pengujian kami dan saya mendapat skor 71 untuk desktop dan 67 untuk seluler, jadi ada ruang untuk perbaikan. Daftar kemungkinan saran pengoptimalan meliputi:

• Aktifkan kompresi (mengompresi sumber daya dengan gzip atau mengempis),
• mengoptimalkan gambar,
• mengurangi waktu respons server,
• menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas,
• memperkecil JavaScript.

GTmetrix

Alat ini memberi Anda informasi lebih rinci tentang hal mana yang dioptimalkan dan mana yang tidak. Setiap detail pengoptimalan dicantumkan dan diberi peringkat pada skala dari 0-100. Daftar diurutkan berdasarkan kepentingan, jadi jika Anda mengikuti tugas dari atas ke bawah dan mengoptimalkan tugas yang tidak memiliki skor 100%, Anda akan berada di jalur yang baik untuk mempercepat situs WordPress secepat mungkin.

Menggunakan alat uji PageSpeed ​​dan YSlow, GTmetrix menghasilkan skor untuk halaman Anda dan menampilkan tugas yang perlu ditingkatkan. Fitur bagus dari alat ini juga adalah laporan Waterfall, yang secara grafis akan menunjukkan bagaimana situs Anda dimuat dan Anda dapat melihat kemacetan lebih cepat. Pada gambar di bawah, Anda dapat melihat bahwa shared hosting saya yang lambat membutuhkan waktu 1,13 detik untuk merespons dengan informasi pertama. Itu terlalu lama, tapi kami akan bisa memperbaikinya.

Anda juga dapat menguji halaman Anda dari 7 lokasi berbeda di seluruh dunia, yang bagus dan juga penting untuk diuji, yang akan kita lihat nanti di artikel.

Saya telah menjalankan alat GTmetrix (lokasi: Vancouver, Kanada) di situs pengujian kami dan saya mendapatkan skor PageSpeed ​​77 dan skor YSlow 71. Dengan alat ini, kami juga mendapatkan informasi berguna ini:

• Waktu terisi penuh: 3.1s,
• Ukuran halaman total: 803KB
• Permintaan: 54

Saya paling suka alat GTmetrix, karena Anda mendapatkan banyak informasi yang relevan di satu tempat. Kami terutama akan menggunakan alat GTmetrix untuk mengukur kemajuan pengoptimalan kami dalam panduan ini.

Tes Kecepatan Situs Web Pingdom

Pingdom adalah alat lain, yang menampilkan informasi pengoptimalan sedikit berbeda. Anda mendapatkan data ringkasan dasar yang sama seperti pada alat GTmetrix (tanpa skor YSlow). Dengan Pingdom, Anda memiliki opsi untuk menguji kecepatan halaman di 4 lokasi berbeda. Semua hasil berbeda untuk setiap lokasi, yang menunjukkan bahwa lokasi server itu penting, tetapi kami akan dapat meningkatkannya juga (dengan CDN nanti di artikel). Kami akan menggunakan alat Pingdom untuk menguji waktu pemuatan halaman di 4 lokasi yang tersedia, karena tes Pingdom selesai lebih cepat.

Pingdom juga menampilkan beberapa tabel yang menarik, seperti ukuran konten atau jumlah permintaan, difilter berdasarkan jenis konten atau domain dan juga memiliki laporan air terjun.

Tes Halaman Web

Alat WebPageTest memiliki lebih banyak opsi konfigurasi daripada alat sebelumnya. Ini memiliki lebih banyak lokasi untuk dipilih, kecepatan internet dapat dipilih, Anda dapat mengaktifkan/menonaktifkan beberapa opsi browser dan Anda dapat menguji perangkat tertentu.

Ini adalah alat yang bagus, yang menampilkan laporan air terjun terperinci untuk setiap putaran (secara default ini membuat 3 putaran, tetapi Anda dapat mengubahnya di pengaturan) dan ini menampilkan nilai A hingga F untuk masing-masing faktor pengoptimalan kecepatan ini:

• Waktu byte pertama (waktu respons),
• tetap hidup diaktifkan,
• transfer kompres (gzip),
• kompres gambar,
• cache konten statis,
• penggunaan CDN yang efektif.

Anda dapat masuk ke detail, dengan memeriksa semua tab hasil, di mana Anda akan menemukan banyak informasi berguna. Saya akan menggunakan alat ini, jika saya memerlukan laporan terperinci atau jika saya perlu menguji lokasi yang tersedia di situs mereka, jika tidak, saya pikir GTmetrix memiliki informasi yang lebih ringkas.

Saya menjalankan alat ini untuk situs pengujian kami. Anda dapat melihat hasilnya pada tangkapan layar di bawah ini:

Kami melihat alat kecepatan halaman yang lebih populer dan kami membuat tes kecepatan halaman awal, jadi sekarang kami akhirnya siap untuk mulai mengoptimalkan situs WordPress kami. Sebagai referensi, ini adalah hasil titik awal dari alat kecepatan halaman yang akan kami gunakan untuk mengukur kemajuan pengoptimalan kecepatan kami:

• Wawasan Google PageSpeed
  • Ponsel: 67
  • Desktop: 71
• GTmetrix
  • Kecepatan Halaman: 77
  • YLambat: 71

Optimasi Gambar

Ini mungkin merupakan aspek kinerja situs yang paling diabaikan dan pada saat yang sama dapat memberikan peningkatan terbesar pada kecepatan situs Anda. Jika Anda tidak pernah berpikir untuk mengoptimalkan gambar sebelum Anda mengunggahnya ke situs WordPress Anda, maka ini adalah langkah pertama yang bagus untuk pengoptimalan waktu pemuatan WordPress Anda.

Mengunggah gambar besar yang tidak dioptimalkan, digunakan di tempat kecil di situs web Anda adalah "tidak tidak" yang besar. Contoh: Anda memiliki slot gambar yang tidak akan lebih besar dari 600 x 400 px di situs Anda dan Anda mengunggah gambar 1920 x 1080 px (atau bahkan lebih besar!). Sekarang, Anda mengulangi kesalahan ini beberapa kali dan situs Anda akan menjadi sangat lambat.

Hal pertama yang harus dilakukan, adalah mengubah ukuran gambar ke ukuran yang tepat. Dalam contoh kita, slot gambar tidak akan pernah lebih besar dari 600 x 400 px, jadi kita harus mengubah ukuran gambar ke ukuran itu.

"Itu dia, pekerjaan selesai, kan?" Tidak. Kami dapat meningkatkan citra lebih jauh. Ada banyak sekali alat yang mengoptimalkan (mengkompres) gambar tanpa kehilangan kualitasnya (mata kita tidak dapat mendeteksi penurunan kualitas dengan alat ini). Ini juga akan secara drastis mengurangi ukuran file gambar, sehingga memuat lebih cepat.

Kompresi gambar dapat dilakukan secara manual atau dengan plugin WordPress. Rekan kerja saya Marko menulis panduan fenomenal untuk pengoptimalan gambar, jadi kami akan menggunakan pengetahuan yang diperoleh dari artikelnya dan dengan cepat membahas teknik yang dapat Anda gunakan untuk mengoptimalkan gambar Anda.

Panduan Mini untuk Pengoptimalan Gambar

Pilih format gambar yang tepat – format gambar paling populer untuk penggunaan online adalah JPEG dan PNG. Anda dapat menghemat banyak ukuran file gambar, dengan memilih format gambar yang benar (Marko menghemat 45% dalam artikelnya). Kamu harus menggunakan:

• Format .jpg untuk foto, gambar dengan gradien, dan gambar dengan jutaan warna.
• Format .png untuk gambar dengan warna (logo) terbatas dan gambar dengan transparansi.

Ubah ukuran gambar Anda – Seperti yang telah saya sebutkan di atas, Anda harus selalu mengubah ukuran gambar sebelum mengunggahnya ke situs WordPress Anda. Pertama, periksa seberapa besar ruang tempat Anda akan menggunakan gambar dan ubah ukurannya. Anda dapat mengubah ukuran gambar dengan program manipulasi gambar, seperti GIMP atau Photoshop.

Kompres gambar Anda – Ini dapat dilakukan dengan alat kompresi gambar online atau dengan plugin WordPress:

Alat kompresi online : Marko merekomendasikan alat online Optimizilla. Cukup unggah gambar Anda ke aplikasi Optimizilla dan setelah proses selesai, unduh gambar yang dioptimalkan, yang kemudian harus Anda unggah ke situs WordPress Anda. Ini terdengar agak membosankan, jadi tentu saja ada plugin WordPress, yang dapat menyederhanakan proses ini.

Plugin kompresi gambar WP : Sekali lagi, Marko menguji plugin kompresi gambar paling populer dan menyatakan pemenangnya: ShortPixel Image Optimizer. Setelah Anda menginstal plugin, Anda harus meminta kunci API untuk menggunakan plugin (proses yang sangat sederhana). Pengaturan default plugin sangat bagus, jadi Anda tidak perlu mengatur apa pun, cukup buka Media -> Massal ShortPixel dan klik tombol "Mulai Mengoptimalkan". Setiap gambar yang baru diunggah juga akan dioptimalkan. Catatan: versi gratis dari plugin ini hanya memungkinkan 100 pengoptimalan gambar/bulan, jika Anda membutuhkan lebih banyak, Anda harus beralih ke paket berbayar mereka. Kami ingin pelanggan kami memiliki akses ke alat terbaik di luar sana, jadi kami telah bermitra dengan ShortPixel dan sekarang anggota ProteusClub kami juga mendapatkan 1.000 kredit gratis untuk digunakan dengan plugin WordPress ShortPixel.

Terakhir, saya tidak bisa merekomendasikan Anda untuk membaca seluruh artikel tentang pengoptimalan gambar di WordPress.

Gambar yang Dioptimalkan Google PageSpeed

Ini adalah cara alternatif tentang cara mengoptimalkan gambar yang ada di situs WordPress Anda. Jika Anda mengikuti langkah-langkah di atas, di bagian Panduan Mini untuk Pengoptimalan Gambar, maka Anda mungkin telah mengoptimalkan gambar dan oleh karena itu Google PageSpeed ​​tidak akan memiliki gambar untuk Anda. Kerja bagus! Anda masih dapat membaca bagian ini untuk tujuan informasi

Saya sebutkan dalam pengenalan alat Google PageSpeed, bahwa Google menghasilkan file zip dengan file yang dioptimalkan yang dapat Anda gunakan di situs Anda. Anda dapat mengunduh file zip, dengan mengklik tautan ini:

Dalam file zip ini, Anda memiliki folder bernama image , yang memiliki gambar yang dioptimalkan. Anda dapat mengunggahnya melalui FTP atau pengunggah file hosting Anda. Ganti/timpa gambar di folder unggahan yang benar (…/wp-content/uploads/…). Setelah itu, Anda juga harus membuat versi yang lebih kecil (thumbnail) dari gambar-gambar ini di situs WordPress Anda. Anda dapat melakukannya dengan plugin Regenerate Thumbnails.

Perbaikan Gambar Lainnya

Di bagian ini kita akan melihat beberapa peningkatan lebih lanjut mengenai gambar, yang dapat kita manfaatkan, untuk memeras beberapa kinerja ekstra.

Memuat Gambar Malas

Lazy Loading adalah teknik untuk memuat gambar, di mana gambar dimuat secara tidak sinkron. Gambar yang tidak berada di paro atas tidak dimuat pada pemuatan halaman (dimuat setelah atau bahkan hanya saat dibutuhkan). Artinya, gambar yang dapat dilihat di bagian atas halaman dimuat, sedangkan gambar lain (tidak terlihat) dimuat setelah halaman dimuat atau saat pengguna menggulir halaman ke bawah (sesuai permintaan). Jika Anda memiliki halaman yang panjang dengan banyak gambar, Anda dapat menghemat banyak waktu buka halaman awal dengan teknik ini.

Pemuatan malas dapat diimplementasikan dengan beberapa kode khusus atau dengan plugin WP. Kami akan menggunakan plugin caching WP Rocket nanti dan memiliki fitur lazy load juga.

Tautan Panas Gambar

Apa itu hotlink? Ini menampilkan gambar yang di-host di server lain. Misalnya, jika Anda memiliki postingan yang sangat populer dan di postingan tersebut, Anda memiliki gambar yang bagus. Pengunjung (pencuri) mungkin menyalin URL sumber gambar dan menggunakannya di situsnya sendiri. Artinya, gambar tersebut akan diminta dan disajikan dari server Anda. Gandakan pencuri dengan 100 dan Anda memiliki ribuan permintaan eksternal yang harus ditanggapi oleh server Anda, yang dapat memperlambat server Anda.

Ini bukan optimasi kecepatan halaman langsung, melainkan optimasi server. Anda dapat memecahkan masalah hotlinking dengan beberapa kode di file .htaccess. Anda dapat melangkah lebih jauh (menjadi sedikit jahat) dan mengganti gambar yang dicuri dengan gambar lain, mungkin gambarnya tidak terlalu bagus :). Itu juga bisa dilakukan di file .htaccess. Buka file .htaccess Anda di server Anda dan tambahkan kode ini ke dalamnya. Ganti your-website.com dengan domain Anda, google.com dengan domain lain, yang ingin Anda izinkan untuk memiliki akses ke gambar Anda dan ganti http://replaceing-stolen-image-url-goes-here.jpg dengan URL gambar yang ingin Anda tampilkan untuk gambar yang dicuri.

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ http://replacing-stolen-image-url-goes-here.jpg [NC,R,L]

Jika Anda tidak ingin mengganti gambar yang dicuri dengan gambar khusus Anda, gunakan kode ini. Ini akan menonaktifkan gambar di situs web mereka:

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]

Peningkatan Studi Kasus

Mari kita lihat kemajuan yang telah kita buat dengan situs pengujian kita sejauh ini, setelah mengoptimalkan gambar. Seperti yang Anda ketahui, saya telah mengimpor data demo untuk tema medis kami, yang kami gunakan sebagai situs pengujian kami. Gambar demo ini menggunakan format file yang benar dan ukurannya sudah benar, jadi saya bisa melewati dua langkah ini. Jika saya mengunggah gambar baru, saya tidak akan melewatkannya!

Jadi, saya telah menginstal plugin ShortPixel dan saya telah menjalankan pengoptimal massal. Plugin melaporkan pengoptimalan gambar rata-rata 38%. Itu keren!

Saya telah menjalankan alat PageSpeed ​​Insights dan Google menunjukkan bahwa beberapa gambar dapat dikompres lebih jauh, jadi saya mengikuti saran saya sendiri, menggunakan gambar yang disiapkan Google untuk saya dan saya mengunggahnya ke server saya melalui FTP.

Setelah gambar diurutkan, hasil alat kecepatan halaman adalah:

• Wawasan Google PageSpeed
  • Ponsel: 72
  • Meja: 77
• GTmetrix
  • Kecepatan Halaman: 81
  • YLambat: 71

Bukan peningkatan besar, karena gambar yang digunakan dalam data demo sudah cukup dioptimalkan, tapi tetap saja, kami selangkah lebih dekat ke tujuan kami. Jika Anda memiliki gambar yang tidak dioptimalkan di situs Anda, maka langkah pengoptimalan gambar ini akan memberi Anda peningkatan skor yang besar dan menurunkan waktu pemuatan halaman.

Cache Peramban

Ketika pengguna mengunjungi situs Anda melalui browser, ia harus mengunduh semua sumber daya (HTML, gambar, JS, CSS, ...) dari server Anda untuk menampilkan situs kepada pengunjung. Saat pengguna yang sama mengunjungi halaman lain di situs Anda, file CSS dan JS biasanya tetap sama, tetapi browser mungkin masih mendownloadnya lagi dari server Anda, jika Anda tidak memiliki konfigurasi server yang tepat.

Header caching yang tepat dan tanggal kedaluwarsa harus ditetapkan di server Anda, untuk memungkinkan sumber daya statis (JS, CSS, dan file lainnya) disimpan di cache browser. This greatly improves the performance for returning visitors or for visitors who look at more than one page on your site.

Usually, the hosting servers have that already configured. If the page speed optimization tools report that you are missing the “Leverage browser caching” optimization or something like that, then it's best to contact your hosting company and let them know that you want to set-up browser caching for your site. They will be able to sort that out for you or at least point you to the right direction on how to do that yourself.

If you want to do things yourself, then you have to know that these browser caching settings vary, depending on the server type your hosting company is using. A good starting point for Apache servers is the .htaccess file of the HTML5 Boilerplate project (check out the “Expires headers” section). An nginx configuration is available as well.

My shared hosting account has browser caching already configured, so there is nothing for us to do on our test site.

Resource Compression (Gzip or Deflate)

Files sent from your server (HTML, JS, CSS, …) to your visitors can be compressed, so that they can be transferred faster, which improves your page speed. This can be done by enabling Gzip or Deflate compression on your server.

You can contact your hosting support and ask them, if they can enable resource compression for your site or you can configure it yourself, but be sure you know which server type your hosting is using. We can again look at the HTML5 Boilerplate project for some tips, they have default server configs for each of the major server types. For example, my hosting is using Apache server, so I found this compression config. I've copied the content of this config, I've located the .htaccess file for my WordPress site via the FTP (it's in the root of your WP installation) and I copied it at the end of the file.

I've re-run the page speed tools, after I've enabled the resource compression for my WordPress site and here are the results:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 96
  • YSlow: 82

As you can see, we've improved our scores by a fair amount and all we did, was enable the resource compression, which did not take a lot of time. By compressing resources, we change the total page size from 803KB to 476KB, which is awesome! We made another step towards an optimized site, so let's continue.

Remove unneeded JS or CSS files

If you are using plugins, which include JS or CSS files on all your pages and you actually are not using the plugin features on those pages, then it's best to remove them. This can be done with custom code in your child theme, but I would recommend that you use a plugin for that. It's much easier!

The plugin that will help us do that is WP Asset CleanUp. After you install and activate this plugin, go and edit your home page. Home pages are usually the “heavier” pages, so we will look at it for our example, but you can do that for other pages as well.

Under the page content editor, you will see a section called WP Asset CleanUp . This section will list all CSS and JS files that are included on your front page. Now, your job is to find out, which of these files are not needed on your WordPress front page.

For example, in our test site, we are using the Contact Form 7 plugin, but we are only using the contact form on our “Contact Us” page, so we can safely remove (unload) its CSS and JS files from our home page. I can do the same with WooCommerce assets, since we are not using them on our home page as well. You should look at each asset in the list and check, if you can unload it. Watch out for the files with the red exclamation icon, you should probably never unload these, since they are core WordPress files and they are needed for the site to work properly. This is how my home page Assets CleanUp settings looks like:

I was able to safely remove 11 assets, which will save 11 resource requests when a page loads and that will improve the page speed.

Re-run of page speed test tools showed, that Google PageSpeed Insights score did not change (because it also did not list this as a recommended optimization), but the GTmetrix score did improve:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 97
  • YSlow: 86

Our site also loads faster, it now needs 2.7 seconds to load the whole site (in the beginning it took 3.1 seconds). We are improving the WordPress site speed slowly but surely. Bear in mind, I'm using one of our WordPress themes for the test, which are built from the ground up to be performing out of the box. If you're using some other WordPress theme, where the author didn't put any efforts to optimize it for speed, your improved loading speed results will most probably be much greater at this point.

With removing unneeded JS and CSS files from our home page, we improved our scores, load time, number of request and the total page size as well. Good job!

Render-blocking JavaScript and CSS in above-the-fold content

One of the optimizations that Google PageSpeed Insights suggests is also: “Eliminate render-blocking JavaScript and CSS in above-the-fold content”. This is a tricky one. Remember when I said, that it's not good to chase a perfect score in the page speed tools? This is one of the reasons for that.

If we look at our example, the Google tool suggests that the Page Builder front-flex.css should be deferred or loaded asynchronously. We are using the Page Builder by SiteOrigin plugin for building content in our pages. So, if this file is responsible for making our layout of the page look good, then I might not respect Google suggestion and simply ignore it.

“But why would you disrespect Google? How dare you!” Well, this is only a tool and it gives you suggestions on what to do, but it does not know, if implementing some of these changes will break your site or ruin good user experience (UX) for your visitors. For example, if the tools had suggested that we load the style.css file with all the theme styles asynchronously, then it would have created the FOUC: Flash of unstyled content:

This is a bad UX, so I would ignore the suggestion from the tool and keep a good UX instead of improving our score. After all, Google is also using other factors it can gather from your website to rank it in the search results and user experience is one of them. When optimizing the website for speed, don't follow the recommendations blindly and forget about all the other aspects and goals your WordPress website has.

If the files that the tool suggests to be loaded asynchronously are valid candidates and they don't break anything, then of course we can implement that change. The best way is to just try to asynchronously load each suggested file and see, if the page still loads ok. Don't forget to reload the page without browser cache, so that a fresh copy of the page loads. You can do that by hard refreshing your site.

We will look at how to load files asynchronously in the WP Rocket plugin section below. There are other standalone plugins that offer this functionality, but since the WP Rocket has it build in, we don't need to pollute our WP installation with more plugins.

Server Side Caching

We've already talked about browser cache, but now we also have to take care of the server side cache. To understand server side caching we have to know the basics of how WordPress works, so let's look at that first.

When a visitor opens a WordPress page, the following things happen (basic explanation):

1. Server receives a page request.
2. WordPress PHP code begins to execute.
3. WordPress access the database to get the information it needs to build the requested page.
4. WordPress produces the HTML.
5. Server responds with the HTML for the browser to display it to the visitor.

These 5 steps have to be repeated for each page view, for each visitor. That's a lot of repetitive work for content that stays the same for each visitor (if your site is displaying mostly static content, which majority of websites is).

Server side caching eliminates pretty much all the server's hard work. It removes the need for repeating steps 2,3 and 4. So, when we enable server side caching, the process of a page request looks like this:

1. Server receives a page request.
2. Server retrieves the page HTML from the cache (if a cached version is available).
3. Server responds with the HTML for the browser to display it to the visitor.

As you can see, the hard work of running the WordPress code and accessing the database is bypassed, which means that the page loading time should be much faster.

If we look at the Google PageSpeed Insights tool suggestions, we will spot the “Reduce server response time” task. The tool says that our server responded in 0.98 seconds, which is not good. The slow shared hosting I'm using is definitely to blame for some chunk of that 1 second response time, but we'll be able to shorten it with server side caching.

Each page cache is usually saved with an expiration time of 24 hours, but that setting can be changed. This means that instead of thousands of page requests running the whole WordPress HTML building process, it will only be run once a day, to generate that cached page and the server will serve that cached page to other visitors. So, not only the page will be quicker, but the server will also have to do less work.

If you are updating a page in WordPress and an old cached version of the page is still available on your server, then you would have to clear that cache manually (usually with the click of a button) or some tools would do that for you automatically.

Some hosting companies already have a server side caching in place for their users, but this feature is usually available for managed WordPress hosting packages. So, before you follow instructions below, on how to setup server side caching, you should make sure that your server is not doing that for you already.

We will look at how to setup the WP Rocket plugin to enable server side caching and other features that it has (like lazy loading images, loading assets asynchronously, minification of JS and CSS files and much more). WP Rocket is a premium (paid) plugin, but I believe it's worth the investment. If you don't agree with me, that's fine WP Super Cache is a good free alternative, but it does not have the same extra features as WP Rocket and it's a little bit more cumbersome to setup.

WP Rocket (server side caching plugin)

As soon as we install and activate the WP Rocket plugin it will have some basic features enabled out of the box:

• Caching of all the pages for quick viewing.
• Decrease bandwidth usage with our GZIP compression.
• Management of the headers (expires, etags…).

The WP Rocket plugin default settings are a good starting point.

I've run the page speed tools a couple of times, so that they picked up the cached version of the site and these are the new results:

• Google page speed insights
  • Mobile: 91
  • Desktop: 97
• GTmetrix
  • PageSpeed: 97
  • YSlow: 87

The Google PageSpeed Insights tool no longer displays the “Reduce server response time” optimization suggestion, because we reduced it from 1 second to 121ms, that's a 88% improvement in server response time, just by activating the WP Rocket plugin! With this improvement, our fully loaded time is now 1.9 seconds, but we are not stopping here

Mari kita lihat pengaturan yang ditawarkan plugin WP Rocket. WP Rocket memiliki menu pintasan yang bagus di bilah menu admin WP teratas Anda. Dari sana, Anda dapat mengakses halaman pengaturan, mengosongkan cache, dan mengakses informasi berguna lainnya mengenai plugin ini.

Sebelum kita melanjutkan dan mencoba pengaturan WP Rocket yang berbeda, saya ingin menyebutkan, bahwa setelah setiap perubahan yang Anda buat, Anda harus memverifikasi situs Anda di tab browser penyamaran/pribadi . Jika Anda masuk ke situs WordPress Anda, maka Anda tidak akan melihat versi cache situs tersebut. Di tab browser penyamaran Anda tidak akan masuk dan Anda mendapatkan versi situs yang di-cache, sehingga Anda dapat memeriksa, apakah itu berfungsi dengan baik.

Ketahui juga bahwa mengaktifkan setiap pengaturan WP Rocket mungkin memiliki hasil yang berbeda atau bahkan efek negatif pada kecepatan WordPress Anda, tergantung pada tema atau plugin yang Anda gunakan, jadi hanya mengaktifkan semua pengaturan WP Rocket bukanlah cara yang tepat. Anda harus mencoba setiap pengaturan dan mengukurnya dengan alat kecepatan halaman, untuk melihat perbedaannya. Seperti yang akan Anda lihat, beberapa teknik tidak akan meningkatkan kecepatan halaman kami, oleh karena itu kami tidak akan menggunakannya.

Hapus Cache

Caching sisi server akan mulai berfungsi segera setelah Anda mengaktifkan plugin WP Rocket, jadi mari kita lihat bagaimana kami dapat menghapusnya. Anda dapat menghapus cache secara manual, jika Anda mengklik item menu "Hapus cache" di menu pintasan WP Rocket. Plugin ini juga akan menangani pembersihan cache secara otomatis, saat Anda memperbarui pengaturan penyesuai, mengubah/memperbarui widget, kategori, ... dan sebagian akan menghapus cache saat Anda memperbarui halaman. Untuk informasi lebih lanjut tentang kapan pembersihan cache otomatis akan dilakukan, silakan merujuk ke pertanyaan WP Rocket ini.

Cache memiliki umur yang dapat diatur di tab "Dasar" dari pengaturan WP Rocket. Saya sarankan untuk mengatur ini menjadi 1 hari.

Pramuat cache

Fitur bagus dari WP Rocket adalah "Preload cache", yang akan memuat cache halaman beranda Anda dan halaman yang ditautkan, sehingga pengguna Anda akan selalu mendapatkan versi halaman yang di-cache. Saya dapat menggunakan fitur ini sebelum menjalankan alat kecepatan halaman dan saya tidak perlu menjalankan alat tersebut beberapa kali untuk mendapatkan hasil versi yang di-cache.

Pengaturan cache preload dapat diakses di halaman pengaturan di bawah tab "Preload". Cari opsi "Preload bot", di sana Anda akan menemukan opsi manual dan otomatis. Jika Anda mengaktifkan opsi bot otomatis, cache pramuat akan berjalan setiap kali Anda memperbarui atau membuat halaman atau jika cache kedaluwarsa. Opsi ini dapat memengaruhi kinerja server Anda, jadi perhatikan log kinerja jika Anda mengaktifkannya. Jika Anda memperbarui dan membuat banyak posting/halaman dan Anda memiliki hosting bersama, saya sarankan Anda untuk tidak mengaktifkan opsi ini. Anda harus mengaktifkan opsi bot manual saja, yang akan membuat item menu pintasan WP Rocket lainnya, berjudul "Preload Cache" dan itu akan memuat cache hanya ketika Anda mengkliknya (setelah Anda selesai mengedit posting dan halaman).

Di tab pengaturan "Pramuat", Anda juga akan menemukan pengaturan untuk memuat cache terlebih dahulu dari peta situs, sehingga Anda dapat menentukan peta situs dan itu akan menggunakan URL di peta situs untuk memuat cache terlebih dahulu untuk halaman tersebut.

LazyLoad

Saya sudah menjelaskan lazy loading images di bagian pengoptimalan gambar pada artikel ini, tetapi sekarang kita telah menginstal WP Rocket, kita sebenarnya dapat mengaktifkan fitur ini. Buka tab "Dasar" pada pengaturan WP Rocket dan aktifkan LazyLoad untuk gambar dan jika Anda menggunakan video atau iframe, Anda juga dapat mengaktifkannya.

Setelah Anda mengaktifkan fitur ini, Anda harus selalu memeriksa situs Anda dan melihat bagaimana gambar dimuat. LazyLoad mungkin merusak tata letak situs Anda atau Anda mungkin tidak menyukai bagaimana gambar dimuat (konten melompat), jadi selalu periksa halaman Anda. Fitur ini sangat berguna, ketika Anda memiliki banyak gambar di paruh bawah dan ini akan membantu Anda mengurangi jumlah permintaan gambar pada pemuatan halaman asli. Di situs pengujian kami, kami hanya memiliki 5 gambar paro bawah, jadi kami menyimpan 5 permintaan gambar dan waktu pemuatan halaman kami sekarang turun menjadi 1,7 detik, sedangkan skor alat kecepatan halaman tetap sama. Ini adalah indikator yang baik, bahwa Anda dapat meningkatkan kecepatan halaman Anda dengan tugas-tugas tertentu yang tidak disarankan oleh alat.

Perkecil File

Beberapa saran GTMetrix yang masih dapat kami tingkatkan adalah dengan mengecilkan file HTML, CSS, dan JS. Karena tema WordPress kami dan sebagian besar plugin yang direkomendasikan sudah menggunakan versi yang diperkecil untuk file JS/CSS dan kami telah mengaktifkan Gzip di server kami, pengoptimalan WP Rocket ini tidak akan membawa peningkatan yang signifikan untuk situs pengujian kami, tetapi kasus Anda mungkin berbeda. Buka tab "File Statis" di pengaturan WP Rocket dan centang semua 3 opsi di bawah opsi Perkecil file . Simpan pengaturan dan periksa situs web Anda di tab penyamaran/pribadi, sehingga Anda dapat mencari masalah apa pun yang mungkin ditimbulkan oleh opsi ini ke situs Anda. Di situs WordPress pengujian saya, minifikasi CSS merusak enqueue file flexbox css pembuat halaman, jadi saya harus menonaktifkan opsi file minify CSS. Opsi HTML dan JS berfungsi dengan baik.

Saya meminta dukungan WP Rocket apa masalahnya dan mereka cukup baik untuk men-debug masalah ini di situs saya. Masalahnya disebabkan oleh cache Varnish yang digunakan di hosting bersama saya. Mereka menyarankan untuk mengubah konfigurasi Varnish di server hosting saya. Saya telah menghubungi dukungan hosting saya dan seperti yang saya duga, saya tidak dapat mengubah konfigurasi Varnish di hosting bersama saya, tetapi saya akan dapat melakukannya, jika saya akan meningkatkan ke paket hosting VPS. Seperti yang Anda lihat, menggunakan shared hosting bukanlah ide yang bagus

Jika Anda memiliki beberapa masalah dengan CSS atau minifikasi JS, Anda dapat menambahkan URL file yang menyebabkan masalah ke kotak file JS atau CSS yang dikecualikan. Menemukan file yang bertanggung jawab atas masalah mungkin rumit, tetapi biasanya Anda tahu fungsionalitas mana yang rusak dan plugin mana yang bertanggung jawab atas fungsionalitas itu, jadi Anda memeriksa kode sumber halaman Anda dan memeriksa file yang disertakan oleh plugin itu. Jika plugin memiliki beberapa file JS atau CSS, Anda dapat mencoba menambahkannya ke daftar pengecualian dan lihat, apakah masalahnya hilang.

Gabungkan file JS dan CSS

Tab YSlow di alat GTmetrix memberi tahu kami untuk "Membuat lebih sedikit permintaan HTTP". Dikatakan bahwa WordPress kami menggunakan 9 skrip JS eksternal dan kami harus mencoba menggabungkannya menjadi 1 dan halaman tersebut menggunakan 4 file CSS eksternal dan kami harus mencoba menggabungkannya menjadi 1 file juga. Jika Anda ingat, kami telah menghapus file JS dan CSS yang tidak diperlukan di bagian Hapus file JS atau CSS yang tidak diperlukan dari artikel ini.

Menggabungkan semua file JS dan CSS dalam satu file bukanlah ide yang baik, karena browser dapat mengunduh 6 file yang lebih kecil secara paralel, lebih cepat dari 1-2 file besar. Alasan lainnya adalah bahwa beberapa file disertakan di kepala dokumen HTML dan lainnya di akhir dokumen, jadi Anda harus membaginya setidaknya menjadi 2 file.

Untuk menggabungkan file dengan WP Rocket, buka tab "File statis" di pengaturan plugin dan aktifkan opsi di bawah Combine files . Seperti biasa, verifikasi situs Anda di tab browser penyamaran/pribadi untuk memeriksa masalah apa pun.

Dalam contoh kami, WP Rocket mengalami masalah lagi, karena masalah konfigurasi Varnish hosting bersama yang disebutkan di atas, jadi saya harus menonaktifkan opsi JS menggabungkan file.

Sekali lagi, jika Anda memiliki beberapa masalah dengan CSS atau penggabungan JS, Anda dapat menambahkan url file yang menyebabkan masalah ke kotak file JS atau CSS yang dikecualikan, seperti pada langkah minifikasi di atas.

Hapus string kueri dari sumber daya statis

GTMetrix menyarankan kami untuk menghapus string kueri dari sumber daya statis, karena beberapa server proxy tidak menyimpan sumber daya dengan string kueri dalam cache.

String kueri dalam sumber daya statis (biasanya file JS atau CSS) adalah atribut URL, yang menandai versi file tersebut. Itu terlihat seperti ini: ?ver=2.5.8 dan ditambahkan di akhir URL: http://domain.com/css/front-flex.css?ver=2.5.8

Kami dapat dengan mudah menghapus string kueri ini dengan WP Rocket. Buka tab "File statis" pada pengaturan plugin dan aktifkan opsi Hapus string kueri .

Setelah mengaktifkan opsi ini, skor GTmetrix PageSpeed ​​kami berubah menjadi 98, tetapi waktu pemuatan halaman tidak berubah.

CSS/JS yang memblokir perenderan

Satu-satunya saran alat Google PageSpeed ​​​​Insights yang tersisa adalah "Hilangkan JavaScript dan CSS yang memblokir render di konten paruh atas". Ini berarti ada beberapa file JS atau CSS yang memblokir pemuatan halaman di konten paruh atas. Apa yang diinginkan alat ini untuk kita lakukan, adalah menunda atau memuat sumber daya pemblokiran ini secara asinkron.

Sekali lagi, plugin WP Rocket datang untuk menyelamatkan. Buka tab "File statis" dan cari opsi CSS/JS yang memblokir Render . Di sana Anda dapat mengaktifkan opsi JS dan CSS yang dapat menyelesaikan masalah ini. Setelah Anda mengaktifkan opsi JS, opsi mode Aman (disarankan) akan muncul. Mode aman ini akan memuat perpustakaan jQuery (perpustakaan enqueued default WP) di kepala halaman, meninggalkannya sebagai file pemblokiran, tetapi tidak akan merusak halaman apa pun yang memiliki kode jQuery sebaris di halaman. Karena jQuery masih dimuat di kepala, alat PageSpeed ​​masih mengeluh bahwa kami memiliki file JS yang memblokir render.

Jadi, jika saya menonaktifkan mode aman untuk situs pengujian kami, alat Google PageSpeed ​​​​memberi kami skor sempurna, 100 di seluler dan 100 di desktop. Hebat, kan? Tidak juga! Situs web kami masih berfungsi dengan baik, tetapi mari kita lihat bagaimana situs web dimuat:

Flash of unstyled content (FOUC) dapat diperbaiki dengan memanfaatkan opsi Critical path CSS di pengaturan WP Rocket (tepat di bawah opsi CSS/JS yang memblokir render). Teorinya adalah, Anda dapat menambahkan kode CSS yang diperlukan untuk bagian paruh atas halaman, sehingga efek kilatan teks tanpa gaya ini tidak akan muncul pada pemuatan halaman. Ini lebih sulit daripada kedengarannya. Ada alat yang seharusnya menghasilkan CSS penting ini untuk Anda, tetapi saya tidak terlalu berhasil menggunakannya.

Untuk menghasilkan kode CSS jalur kritis:

1. Nonaktifkan plugin WP Rocket di situs Anda.
2. Buka alat Pembuat CSS Jalur Kritis.
3. Masukkan URL situs Anda dan jalankan.
4. Salin kode CSS jalur kritis.
5. Aktifkan plugin WP Rocket.
6. Rekatkan kode CSS ke kotak "Critical path CSS" di pengaturan WP Rocket.
7. Periksa apakah ada jalur URL relatif dalam kode CSS penting dan ubah ke jalur absolut.

Beginilah tampilan situs pengujian WordPress kami sekarang:

Sudah lebih baik, tapi aku tetap tidak menyukainya. Ya, skor Google PageSpeed ​​100/100 sangat bagus, tetapi total waktu pemuatan lebih lambat dan kami juga memiliki 2 permintaan lagi karena kami mengaktifkan opsi CSS/JS yang memblokir render ini. Masalah utama bagi saya adalah masih pengalaman pengguna memuat halaman, jadi saya menonaktifkan opsi WP Rocket ini.

WP Rocket jelas merupakan plugin yang harus digunakan oleh setiap pemilik situs WordPress, karena memiliki semua fitur untuk mempercepat situs Anda. Mengaktifkan plugin saja akan memberi Anda dorongan besar. Fitur lain harus diuji untuk setiap situs web, karena setiap tema dan plugin dapat membawa masalah sendiri ke dalam campuran.

Kami hampir mencapai akhir dari langkah pengoptimalan kami. Satu-satunya yang tersisa, adalah menggunakan CDN untuk aset situs web kami.

Jaringan Pengiriman Konten (CDN)

Sudah saya sebutkan beberapa kali di artikel ini, bahwa waktu loading halaman berbeda-beda, tergantung lokasi server dan lokasi pengunjung. Sebagai contoh, server shared hosting saya yang kami gunakan untuk pengujian, terletak di Austin, Texas (AS) dan pada awalnya di bagian alat kecepatan halaman Pingdom dari artikel ini kami menguji 4 lokasi. Berikut adalah hasilnya:

• Dallas, Texas (AS) = 1,65s
• San Jose, California (AS) = 2,53 detik
• Stockholm, Swedia (UE) = 3,06s
• Melbourne (AUS) = 5,38 detik

Sekarang kami telah mengoptimalkan situs, dengan semua langkah yang disebutkan dalam artikel ini, waktu pemuatan kami adalah:

• Dallas, Texas (AS) = 0,63s
• San Jose, California (AS) = 0.76s
• Stockholm, Swedia (UE) = 1,21s
• Melbourne (AUS) = 2,24 detik

Kami akan menggunakan waktu ini untuk membandingkan waktu pemuatan WordPress kami, ketika kami mengatur situs kami untuk menggunakan CDN.

Kita dapat melihat bahwa waktu-waktu ini sangat berbeda; itu karena data harus menempuh jarak yang lebih jauh dari lokasi server kami ke pengunjung Australia, daripada ke pengunjung di Dallas. Di sinilah CDN akan membantu kami mengurangi waktu pemuatan tersebut.

CDN adalah jaringan proxy server yang terdistribusi secara geografis dan pusat datanya. Tujuan utama mereka adalah untuk mendistribusikan konten situs Anda kepada pengunjung Anda dari server terdekat dengan pengunjung. Artinya, konten statis situs web Anda (gambar, JS, CSS, ...) akan dilayani oleh server mereka, yang tersebar di seluruh dunia, membuat situs Anda lebih cepat dimuat untuk semua orang.

Memanfaatkan CDN WordPress memiliki banyak manfaat termasuk:

• Penurunan latensi, yaitu waktu dan atau penundaan jarak yang harus ditempuh.
• Mengurangi waktu ke byte pertama (TTFB), yang merupakan ukuran berapa lama browser harus menunggu sebelum menerima byte data pertama dari server.
• Menyajikan konten dari cache untuk waktu pemuatan halaman yang lebih cepat dan mengurangi beban pada server hosting (asal) Anda.
• Memanfaatkan HTTP/2 melalui koneksi aman untuk memanfaatkan multiplexing, paralelisme, server push, dan kompresi HPACK.
• Kompres data dengan GZIP atau Brotli untuk memastikan file HTML, stylesheet, dan JavaScript yang lebih kecil.

CDN hari ini menawarkan banyak fitur lain, terutama di departemen keamanan. Mereka biasanya menawarkan perlindungan DDoS, deteksi/pencegahan bot, dan sebagainya.

Kita akan melihat salah satu CDN yang lebih populer, yang disebut Cloudflare. Mereka menawarkan paket gratis, yang mencakup penggunaan CDN global mereka dan itulah yang kami butuhkan.

Cloudflare

Pertama, buka cloudflare.com dan daftar untuk mendapatkan akun gratis baru. Setelah Anda membuat akun, Anda harus mengatur situs web Anda di Cloudflare, agar dapat menyajikan konten statis (aset) Anda.

Saat Anda masuk ke akun Cloudflare baru Anda, Anda akan diminta untuk menambahkan situs web Anda (domain) untuk secara otomatis mengambil catatan DNS.

Masukkan domain Anda dan klik "Mulai Pindai". Meskipun saya menggunakan subdomain ( speed.gregorcapuder.com ), saya hanya memasukkan domain root: gregorcapuder.com . Bagian pemindaian membutuhkan waktu sekitar satu menit untuk diselesaikan dan sementara itu, Anda dapat menonton video pendek, yang akan menjelaskan apa yang sedang terjadi. Setelah pemindaian selesai, Anda dapat mengklik tombol "Lanjutkan".

Pada langkah selanjutnya, Anda akan melihat semua catatan DNS yang dapat ditemukan Cloudflare untuk domain kami. Di sini Anda harus menambahkan catatan apa pun yang mungkin hilang, jadi buka daftar dan periksa, apakah ada yang hilang. Dalam contoh kami, subdomain kecepatan tidak ada, jadi saya menambahkannya ke daftar. Di input nama saya memasukkan "speed" (nama subdomain saya), di alamat IPv4 saya memasukkan alamat IP yang sama dengan domain utama saya (gregorcapuder.com) dan kemudian saya mengklik "Add Record". Seperti yang Anda lihat pada tangkapan layar di bawah, saya telah mengaktifkan Cloudflare untuk domain utama saya serta untuk subdomain kecepatan (ditandai dengan awan oranye dengan panah di belakang awan). Artinya, di kedua situs web ini, lalu lintas akan ditangani dan dilindungi oleh Cloudflare.

Ketika Anda selesai dengan catatan DNS, Anda dapat melanjutkan ke langkah berikutnya, di mana Anda memilih paket "Situs Web Gratis" dan melanjutkan.

Langkah terakhir untuk mengaktifkan Cloudflare untuk situs web Anda, adalah masuk ke dasbor pendaftar domain Anda (tempat Anda membeli domain) dan ubah server nama untuk domain Anda. Dinyatakan, bahwa diperlukan waktu hingga 48 jam agar server nama baru berlaku, tetapi dalam kasus saya, itu diperbarui dalam 1 jam. Sementara itu, tidak akan ada waktu henti situs web, jadi jangan khawatir.

Setelah server nama diperbarui untuk situs Anda, Anda akan melihat status situs web Cloudflare Anda berubah menjadi "aktif".

Saya telah meninggalkan semua pengaturan Cloudflare di dasbor secara default, satu-satunya hal yang saya ubah adalah tingkat keamanannya. Buka tab Firewall dan sesuaikan "Tingkat Keamanan" ke Rendah . Itu karena saya tidak ingin pengunjung saya mendapatkan "halaman tantangan" pada deteksi penyerang palsu.

Sekarang, setelah kita mengatur sisi Cloudflare, kita juga harus mengaktifkan pengaturan Cloudflare pada plugin WP Rocket kita.

Masuk ke dasbor admin WordPress Anda dan buka pengaturan plugin WP Rocket. Arahkan ke tab "CDN", aktifkan tab Tampilkan pengaturan Cloudflare dan simpan pengaturan. Ini akan menampilkan tab "Cloudflare" baru di pengaturan WP Rocket dan Anda harus membukanya. Di sana Anda harus memasukkan email akun Cloudflare, domain dan Anda juga harus menyalin & menempel kunci API global Cloudflare. Untuk mengambil kunci API global, buka dasbor Cloudflare (tab ikhtisar) dan klik tautan "Dapatkan kunci API Anda". Anda akan melihat bagian "Kunci API" di halaman baru ini dan Anda harus mengklik tombol "Lihat kunci API" untuk baris "Kunci API Global". Setelah Anda menempelkan kunci API global ke dalam pengaturan WP Rocket, saya juga menyarankan untuk mengaktifkan opsi "Pengaturan optimal" di WP Rocket. Simpan pengaturan dan kemudian klik tombol "Hapus cache Cloudflare", hanya untuk memverifikasi bahwa semuanya berfungsi dengan baik.

Sekarang, setelah CDN dikonfigurasi, kita dapat menguji waktu pemuatan dari lokasi yang berbeda lagi dan melihat peningkatannya (pengujian Pingdom).

• Dallas, Texas (AS) = 0,54s
• San Jose, California (AS) = 0,70 detik
• Stockholm, Swedia (UE) = 0,91s
• Melbourne (AUS) = 1,16 detik

Seperti yang diharapkan, waktu pemuatan Eropa dan Australia paling meningkat. Dan semua waktu pemuatan kami sekitar 1 detik, atau lebih rendah. Itu adalah waktu pemuatan yang bagus!

Saat Anda menguji situs Anda, jangan mengujinya hanya dengan satu kali menjalankan alat kecepatan halaman untuk satu lokasi. Anda perlu mengujinya beberapa kali. Saat Anda pertama kali menjalankan alat untuk lokasi tertentu, file yang di-cache harus disimpan terlebih dahulu di server Cloudflare terdekat, setiap pengujian berikutnya akan menunjukkan kepada Anda waktu pemuatan sebenarnya dari versi yang di-cache. Saya menyarankan Anda menguji 3-5 kali, untuk mendapatkan rata-rata yang baik tentang seberapa cepat halaman Anda akan dimuat dari lokasi tertentu.

Hasil Akhir

Skor alat kecepatan halaman akhir kami adalah:

• Wawasan Google PageSpeed
  • Ponsel: 91
  • Desktop: 97

• GTmetrix
  • Kecepatan Halaman: 98
  • YLambat: 91

Berikut adalah screenshotnya:

Mari kita bandingkan data GTmetrix sebelum dan sesudah pengoptimalan kita:

Kami telah meningkatkan kinerja situs web kami dalam segala hal. Situs web memuat lebih cepat, dibutuhkan lebih sedikit permintaan untuk menampilkan situs kepada pengguna, membutuhkan lebih sedikit bandwidth dan memuat dengan cepat untuk pengunjung di seluruh dunia. Pada saat yang sama, kami mempertahankan semua fungsionalitas dan gaya situs web kami seperti pada awalnya. Luar biasa!

Untuk akhirnya, kami telah menyiapkan representasi visual yang bagus dari hasil untuk setiap langkah pengoptimalan individual yang kami selesaikan:

Kesimpulan

Dalam panduan pengoptimalan kecepatan halaman WordPress utama ini, kami melihat langkah-langkah yang lebih penting yang dapat Anda lakukan untuk meningkatkan kinerja situs web Anda secara drastis. Mengikuti saran dalam artikel ini akan membuat situs Anda ramping dan cepat, yang akan meningkatkan waktu pemuatan halaman Anda dan oleh karena itu pengalaman pengguna. Peningkatan ini mungkin juga menghasilkan lebih banyak uang dan membantu Anda menghemat biaya server, jadi ini adalah win-win untuk semua orang!

Saya ingin mengakhiri artikel ini dengan mengatakan, bahwa kecepatan bukanlah segalanya, ini adalah bagian lain dari teka-teki situs web. Kami membangun situs web untuk manusia, klien potensial, jadi selalu ingat itu. Temukan keseimbangan yang baik antara konten, multimedia, desain, pengalaman pengguna, dan kecepatan halaman. Jangan terobsesi dengan kecepatan halaman dan skor alat kecepatan halaman. Selama Anda meningkatkan pengalaman pengunjung Anda, tujuan Anda akan tercapai.

Apakah saya melewatkan langkah pengoptimalan situs web, yang menurut Anda dapat menghasilkan peningkatan penting pada waktu buka halaman? Beri tahu saya di komentar di bawah!

Jika menurut Anda artikel kami bermanfaat dan Anda mengikuti langkah-langkahnya, beri tahu saya di komentar di bawah, peningkatan seperti apa yang telah Anda capai.