Skip to content
Ditulis.ID – Ada banyak area yang harus ditangani dan banyak metrik yang harus difokuskan saat mengoptimalkan kecepatan website wordpress Anda. Ini dapat membuat proses mengurangi waktu buka website Anda terasa berlebihan. Untuk cara meningkatkan kecepatan website wordpress tidak terlalu berat, penting untuk diingat bahwa kami memiliki tiga konsep umum yang perlu dipertimbangkan saat kami mendekati pengoptimalan kecepatan website.
Pertama, kami ingin mengurangi jumlah file yang diminta. Setiap permintaan yang dibuat memerlukan perjalanan lain ke server untuk mengambil file. Meskipun setiap perjalanan ke server mungkin hanya memerlukan beberapa milidetik, kami mencoba memuat (loading) website kami hanya dalam beberapa detik. Akibatnya, setiap milidetik berarti dan setiap permintaan yang dapat kami hilangkan menjadi lebih baik.
Kedua, kami ingin mengecilkan ukuran keseluruhan website. Jika Anda dapat membuat file yang diminta lebih kecil, mereka akan memuat (loading) lebih cepat. Banyak teknik yang dibahas di bawah ini adalah cara membuat website menggunakan ukuran file yang lebih kecil.
Daftar Isi
5 Cara Mengurangi Loading Time Website Anda Agar Meningkatkan Kecepatan WordPress
Area pertimbangan terakhir adalah kami ingin memastikan bahwa kami memuat (loading) file-file itu seefisien dan seefektif mungkin. Kami ingin memastikan bahwa kami membuatnya sesederhana mungkin bagi browser atau bot untuk memuat (loading) file website kami. Ini terutama berlaku untuk skrip pihak ketiga seperti yang akan saya bahas di bawah.
Sekarang setelah kita memikirkan area fokus yang luas ini, mari kita bahas bagaimana kita dapat mengurangi waktu buka website kita. Ingat, sebelum Anda mulai mengoptimalkan, pastikan Anda telah mengukur metrik kecepatan utama website Anda. Untuk bantuan dalam menentukan matrik tersebut dan menemukan cara untuk mengumpulkan pengukuran tersebut.
Ada banyak taktik berbeda yang dapat kita gunakan, tetapi kami akan fokus pada lima taktik paling umum yang biasanya paling membantu mengurangi kecepatan website biasa.
1. Caching
Salah satu alasan website memuat (loading) dengan lambat adalah karena berapa lama waktu yang dibutuhkan untuk mengambil informasi dari database. Perjalanan ke database ini membutuhkan waktu, seperti halnya menjalankan berbagai kueri terhadap database untuk mendapatkan informasi tentang halaman tersebut. Misalnya, jika Anda menggunakan WordPress, konten yang terdapat pada setiap halaman disimpan dalam beberapa tabel database. Ketika seseorang meminta halaman tertentu, server website Anda harus menanyakan konten dari database. Bergantung pada plugin apa yang Anda gunakan, ini dapat menghasilkan banyak kueri database yang berbeda, masing-masing menambahkan lebih banyak waktu untuk memuat (loading) website Anda.
Caching menghindari kebutuhan begitu banyak pertanyaan. Dengan caching, salinan halaman lengkap dibuat di luar database dan salinan itu disimpan dalam file statis. Dengan begitu, alih-alih server Anda menanyakan konten dari tabel database yang berbeda setiap kali halaman diminta, server Anda menemukan dan mengembalikan file statis dengan informasi halaman. Menemukan file statis jauh lebih cepat, terutama jika halaman membutuhkan beberapa lusin kueri untuk dihasilkan. Triknya adalah memastikan cache cukup sering dibersihkan agar konten halaman tidak ketinggalan zaman.
Platform seperti WordPress menawarkan berbagai platform caching yang berbeda. Jika Anda tidak menggunakan WordPress, kemungkinan sistem manajemen konten Anda juga menawarkan solusi caching. Di Elementive, kami juga telah menambahkan solusi caching ke website yang dibuat khusus. Bergantung pada konfigurasi yang tepat dari website Anda, ini dapat menghemat satu detik atau lebih dari total waktu muat karena Anda mengurangi jumlah permintaan yang dibuat untuk memuat (loading) halaman. Anda juga akan sering melihat keuntungan yang lebih besar di TTFB, FID, dan LCP melalui caching.
Di WordPress, satu plugin caching yang kami temukan bekerja cukup baik adalah WP Fastest Cache. Plugin ini bekerja dengan baik dengan berbagai plugin dan tema WordPress lainnya (seperti biasa, uji ini pada konfigurasi spesifik Anda untuk memastikan). Ada berbagai opsi konfigurasi yang tersedia di dalam plugin untuk membantu Anda melakukan yang terbaik untuk meningkatkan kecepatan website wordpress Anda. Konfigurasi yang paling penting adalah cukup mencentang “Aktifkan” dengan opsi “Sistem Cache”. Berikut adalah cara kami biasanya mengkonfigurasi plugin ini:
2. Kompresi & Minification
Kompresi dan Minification adalah dua hal yang berbeda tetapi keduanya adalah cara mengecilkan ukuran file yang diperlukan untuk memuat (loading) website Anda. Semakin kecil ukuran file, semakin cepat website Anda memuat (loading), Biasanya, Anda ingin mengecilkan dan mengkompres file Anda, jadi ada baiknya mempertimbangkan keduanya bersama-sama.
Kompresi
Pernahkah Anda membuat folder terkompresi (zip) di komputer Anda? Jika demikian, Anda sudah memiliki gambaran umum tentang cara kerja kompresi. Pada dasarnya, mengompresi file membuatnya lebih kecil dengan menghapus informasi yang tidak perlu atau berlebihan. Saat Anda mengompresi file website Anda (seperti CSS, JavaScript, atau HTML), data yang dikirim ke browser web pengunjung dikirim dalam ukuran file yang lebih kecil. Bersama dengan file terkompresi, header HTTP dikirim untuk memberi tahu browser bahwa file ini telah dikompresi. Browser web kemudian mendekompresi file yang diterimanya dan kemudian menyajikan konten file kepada pengunjung.
Kompresi dapat menghasilkan penghematan besar juga. Dalam kasus Elementive, ukuran beranda kami 67% lebih kecil berkat kompresi. Anda dapat menguji apakah website Anda memiliki kompresi yang diaktifkan secara gratis di sini.
Minification
Anda juga dapat mengecilkan file website Anda. Ketika kompresi menulis ulang file untuk dikirim ke browser dalam format terkompresi, Minification membuat file lebih kecil dengan menghapus spasi dan karakter lain yang tidak perlu (seperti komentar yang disematkan di dalam kode). Ini dapat mengurangi total ukuran file yang dimuat. Misalnya, di website Elementive, kami mengurangi file CSS kami sebesar 45% menyederhanakan dengan mengecilkan file.
Anda dapat menggunakan tools gratis seperti Minifier.org untuk membuat versi file JavaScript atau CSS yang diperkecil. Ada juga plugin (seperti WP Fastest Cache) yang akan mengecilkan kode Anda di dalam WordPress juga. Ingatlah bahwa Anda ingin menguji file CSS atau JavaScript yang diperkecil dengan hati-hati karena proses Minification dapat dengan mudah merusak desain dan fungsionalitas website Anda, terutama pada browser lama.
3. Kurangi Gambar dan Ukuran Gambar
Jika Anda ingin meningkatkan kinerja website Anda, Anda perlu mengoptimalkan gambar website Anda.
Langkah pertama yang paling mudah adalah menyingkirkan gambar yang tidak Anda perlukan. Jika gambar dimasukkan hanya untuk estetika, pertanyakan apakah itu perlu. Berbeda dengan hari-hari awal web, desainer web sering kali dapat membuat website yang estetis dengan CSS dan tanpa gambar. Bahkan gambar yang tampaknya diperlukan untuk konten mungkin tidak bermanfaat sehingga dengan cara menghapus gambar tersebut dan lihat apakah pengguna terlibat dan berkonversi dengan cara yang sama. Ini juga merupakan area di mana pengujian pengguna dapat membantu Anda menentukan apakah halaman masih berfungsi sesuai kebutuhan tanpa adanya gambar.
Setelah Anda menghapus semua gambar yang tidak perlu, langkah selanjutnya adalah mengidentifikasi gambar apa pun yang disimpan pada dimensi yang lebih besar dari yang diperlukan. Misalnya, Anda mungkin memiliki gambar dengan lebar 500 piksel yang disajikan pada halaman dengan hanya 350 piksel. Gambar 500 piksel itu jauh lebih besar dan membutuhkan waktu lebih lama untuk dimuat, jadi sebaiknya Anda mengubah ukuran gambar menjadi 350 piksel dan mengunggahnya kembali ke halaman.
Selanjutnya, Anda ingin memastikan gambar disimpan dalam format file yang tepat. Kinsta memiliki panduan mendalam yang membahas berbagai jenis file gambar yang dapat Anda gunakan. Namun, sebagai titik referensi cepat untuk jenis gambar yang paling umum:
- JPG : Didukung secara luas di seluruh browser dan perangkat, bagus untuk foto dan grafik non-teks, dan dapat diskalakan ke ukuran file yang lebih kecil
- PNG : Didukung secara luas di seluruh browser dan perangkat, bagus untuk gambar apapun termasuk teks (seperti tangkapan layar atau infografis), hampir selalu berukuran file lebih besar
- GIF : Didukung secara luas di seluruh browser dan perangkat, bagus untuk gambar dengan animasi, ukuran file lebih kecil, kualitas gambar lebih rendah
- WebP : Hanya didukung di Chrome saat ini, pengganti yang bagus untuk PNG dan JPG, disimpan dalam ukuran file yang sangat kecil
Terakhir, Anda ingin melihat apakah gambar disimpan pada ukuran file terkecil. Tidak ada aturan keras dan cepat dalam hal ukuran file yang sempurna untuk sebuah gambar, tetapi aturan umum adalah menjaga gambar berukuran kecil hingga 10 kb atau kurang, gambar sedang hingga 60 kb atau kurang dan gambar besar 150 kb atau kurang. Setiap gambar di website Anda kemungkinan digunakan dengan caranya sendiri yang unik sehingga panduan ukuran file yang ditetapkan tidak realistis. Misalnya, Anda mungkin memiliki gambar pahlawan di beranda Anda. Gambar tersebut tidak hanya besar dalam lebar dan tinggi tetapi juga kemungkinan besar dalam ukuran file jika dibandingkan dengan gambar thumbnail yang Anda gunakan di blog. Tujuan dengan ukuran file gambar adalah untuk membuatnya sekecil mungkin tanpa mendistorsi atau blurring gambar ke tingkat yang tidak terlihat bagus lagi. Mainkan dengan pengaturan kualitas foto Anda untuk melihat bagaimana ukuran file terpengaruh.
Tools Pengeditan Foto
Ada beberapa tools di pasaran untuk mengubah ukuran gambar. Program yang paling terkenal adalah Photoshop, tetapi bagi sebagian orang, biaya Photoshop mungkin terlalu mahal. Kami memiliki beberapa alternatif saran program edit foto yang bisa Anda coba, antara lain:
- PicMonkey : Editor sederhana dengan banyak fitur. Mereka menawarkan uji coba gratis, mulai dari $5,99 per bulan.
- Pixlr X : Rekomendasi kami untuk editor foto sederhana dan mudah digunakan untuk pemotongan dasar dan ukuran file untuk web, plus gratis!
- GIMP : Aplikasi perangkat lunak pengedit gambar sumber terbuka dan gratis yang dapat dijalankan di Windows, Mac, atau Linux. Ini melakukan semua yang dilakukan Photoshop, tetapi bukan tools yang sangat intuitif untuk digunakan. Jika Anda benar-benar mencari alternatif Photoshop dan memiliki kebutuhan yang lebih canggih, inilah caranya. Jika tidak, Pixlr akan berfungsi dengan baik.
4. Optimalkan Font (Optimasi Huruf Website)
Setelah gambar, file font khusus sering kali merupakan jenis file terbesar berikutnya yang dimuat di website. Seperti halnya gambar, perlu dipertimbangkan jika Anda memerlukan font khusus atau jika Anda dapat menggunakan font default browser. Font khusus dapat membantu membangun tampilan dan nuansa tertentu untuk merek Anda, dan juga dapat membantu membuat desain website Anda berbeda. Namun, Anda hanya ingin menggunakan font khusus jika perlu mengingat pengaruhnya terhadap kinerja website Anda. Dalam banyak kasus, website akan menggunakan font khusus untuk header dan teks aksen saat menggunakan font default browser untuk teks isi. Kombinasi font khusus dan default ini sering kali menghasilkan keseimbangan yang baik: Anda dapat membangun merek Anda tanpa memperburuk waktu buka website Anda secara signifikan. Di mana pun Anda menggunakan font kustom, praktik terbaiknya adalah menggunakan hanya dua atau tiga font kustom per halaman.
Saat Anda menggunakan font khusus, Anda ingin memuat (loading) file font apa pun yang Anda gunakan. Dengan melakukan ini, Anda membantu browser memprioritaskan sumber daya apa yang dimuat untuk website. Ini membuat pemuatan (loading) website lebih efisien, menghasilkan waktu pemuatan yang lebih cepat dan menghasilkan font yang tersedia lebih awal.
<link rel="preload" href="a-font.woff2" as="font" type="font/woff2" crossorigin>Saat pramuat membantu, terkadang Anda masih dapat melihat kedipan di mana teks berubah dari font default browser ke font kustom (disebut Flash of Unstyled Text atau FOUT). Anda juga terkadang dapat melihat ruang kosong tempat teks seharusnya berada saat teks dimuat (disebut Flash of Invisible Text atau FOIT). Anda dapat menghindari ini dengan menggunakan atribut font-display dalam file CSS Anda, menginstruksikan browser untuk menukar font kustom.
Pertimbangan utama lainnya adalah hanya memuat (loading) bagian dari keluarga font khusus yang perlu Anda gunakan. Misalnya, font tertentu mungkin tersedia dalam varian Normal, Semi-Bold, Bold, dan Extra Bold. Jika Anda hanya menggunakan font khusus ini untuk tajuk, kemungkinan besar Anda ingin menggunakan varian Bold dan tidak ada yang lain. Jadi, pastikan Anda hanya memuat (loading) varian font yang benar-benar Anda butuhkan.
5. Optimasi Skrip Pihak Ketiga
Kontributor umum lainnya untuk waktu muat website yang lebih tinggi adalah skrip pihak ketiga. Ini dapat mencakup kode pelacakan yang ditambahkan untuk tools analisis, kode untuk menampilkan iklan di website, atau kode untuk menambahkan fitur interaktif ke website. Mengingat sifat skrip pihak ketiga ini, skrip tersebut penting untuk pengoperasian website dan tidak dapat dihapus dengan mudah. Tentu saja, jika skrip pihak ketiga tidak penting, maka sebaiknya Anda menghapusnya dari website Anda. Bagaimana Anda menangani skrip pihak ketiga ini jika Anda tidak dapat menghapusnya dari website Anda?
Masalah dengan skrip pihak ketiga ini (dan semua JavaScript) adalah, secara default, skrip tersebut memblokir perenderan. Ini berarti bahwa ketika browser mendeteksi tag <script>, browser harus memuat (loading) dan mengeksekusi kode sebelum dapat melanjutkan memuat (loading) (merender) sisa halaman. Cara sederhana untuk mengatasi hal ini adalah dengan memindahkan skrip ke akhir halaman sehingga skrip adalah item terakhir yang dilihat browser saat memuat (loading) halaman.
Namun, solusi sederhana itu mungkin tidak selalu berhasil. Sebagai gantinya, Anda dapat menambahkan atribut defer atau async ke tag skrip untuk memuat (loading) halaman dengan lebih efisien. Atribut defer memberi tahu browser tercepat anda bahwa ia tidak perlu menunggu skrip ini selesai memuat (loading) sebelum merender sisa halaman. Dengan penangguhan, bagaimanapun, skrip akan dimuat dan dieksekusi ketika sisa kode halaman sudah siap.
<script defer src="myscript.js"></script>Seiring dengan penangguhan, kami juga memiliki atribut async. Atribut ini juga memberitahu browser untuk tidak memblokir pemuatan halaman. Tidak seperti penangguhan, bagaimanapun, atribut async memungkinkan skrip ini untuk memuat (loading) secara independen dari sisa kode yang dimuat ke website. Independensi ini berarti bahwa file yang dimuat secara asinkron akan siap ketika sudah siap, terlepas dari kode lain apa pun yang dimuat ke halaman.
<script async src="myscript.js"></script>Kesimpulan
Mengurangi waktu buka website Anda adalah tugas yang tidak pernah berakhir dan ada banyak area berbeda yang dapat Anda optimalkan. Saat Anda mendekati pengoptimalan kecepatan website Anda, mulailah dengan menentukan file terbesar dan bagaimana membuat file tersebut lebih kecil. Caching, kompresi, dan Minification adalah semua teknik untuk mengecilkan ukuran file. Selanjutnya, lihat apakah Anda dapat mengurangi jumlah file yang diperlukan untuk memuat (loading) halaman web seperti hapus gambar, font, dan skrip pihak ketiga yang tidak perlu. Untuk file yang perlu Anda muat, temukan cara untuk memuat (loading) file tersebut seefisien mungkin, menggunakan teknik seperti preload, async, atau defer.
