Cara Mempercepat Loading Cara Optimasi WordPress Tanpa Plugin untuk Pemula
Sekarang kita akan membahas bagaimana Cara Mempercepat Loading Cara Optimasi WordPress Tanpa Plugin untuk Pemula yang benar tanpa harus membeli plugin yang mahal.
Caranya terbagi kedalam beberapa tahap-tahap yaitu:
- Pemilihan tema yang ringan dan responsif
- Mengoptimalkan gambar dan media
- Meminimalkan jumlah permintaan HTTP
- Menggunakan CDN (Content Delivery Network)
- Mengaktifkan kompresi Gzip dan minifikasi file
Cara Mempercepat Loading Cara Optimasi WordPress Tanpa Plugin untuk Pemula
A. Pentingnya kecepatan loading
Kecepatan loading website adalah faktor kritis dalam mempertahankan pengunjung dan meningkatkan peringkat di mesin pencari. Sebuah situs yang cepat dapat mengurangi tingkat pentalan dan meningkatkan waktu yang dihabiskan pengguna di halaman Anda, yang pada akhirnya berdampak pada konversi dan keberhasilan situs web Anda.
B. Mengapa fokus pada pemula
Fokus pada pemula dalam artikel ini adalah untuk membantu mereka yang baru memulai dalam mengelola situs web WordPress dan mungkin belum terbiasa dengan berbagai cara untuk mengoptimalkan kecepatan loading. Dengan memberikan informasi yang mudah dipahami dan langkah-langkah praktis, pemula akan lebih mudah mengikuti dan menerapkan optimasi yang diperlukan.
C. Tanpa plugin
Walaupun banyak plugin yang bisa membantu meningkatkan kecepatan loading website WordPress, artikel ini menekankan metode tanpa plugin agar pemula dapat menghindari kebingungan saat memilih dan mengelola plugin. Selain itu, mengurangi penggunaan plugin juga dapat mengurangi risiko konflik dan masalah keamanan pada website.
II. Pemilihan tema yang ringan dan responsif
A. Tema gratis vs premium
Dalam memilih tema untuk situs web WordPress, Anda akan menemukan pilihan tema gratis dan premium. Tema gratis seringkali lebih sederhana dan memiliki fitur dasar, sedangkan tema premium menawarkan lebih banyak fitur dan dukungan. Namun, penting untuk memilih tema yang ringan dan responsif, terlepas dari apakah itu gratis atau berbayar, untuk memastikan kecepatan loading yang optimal.
B. Kriteria tema responsif
Tema responsif adalah tema yang dapat menyesuaikan tampilannya dengan baik di berbagai perangkat, seperti desktop, tablet, dan smartphone. Kriteria tema responsif yang baik meliputi:
- Desain yang fleksibel: elemen halaman (gambar, teks, dan lainnya) harus bisa menyesuaikan ukurannya dan posisinya sesuai dengan ukuran layar perangkat.
- Kecepatan loading yang cepat: tema responsif harus dioptimalkan untuk kecepatan, termasuk kode yang ringan dan elemen yang dioptimalkan.
- Uji coba dengan berbagai perangkat dan browser: pastikan tema responsif Anda tampil dengan baik di berbagai perangkat dan browser yang populer.
- Kode bersih dan terorganisir: tema yang dikembangkan dengan baik menggunakan kode yang bersih dan terorganisir, yang memudahkan pemeliharaan dan penyesuaian.
- Dukungan dan dokumentasi: tema yang baik sering disertai dengan dukungan dan dokumentasi yang membantu Anda mengatur dan memodifikasi tema sesuai kebutuhan.
III. Mengoptimalkan gambar dan media
A. Format gambar yang efisien
Memilih format gambar yang efisien sangat penting untuk mempercepat loading situs web. Format gambar yang umum digunakan adalah JPEG, PNG, dan WebP. JPEG cocok untuk gambar dengan banyak warna dan gradien, seperti foto. PNG lebih sesuai untuk gambar dengan teks, ikon, atau gambar yang memerlukan transparansi. WebP adalah format gambar yang lebih baru dan menawarkan kompresi yang lebih baik dengan kualitas gambar yang setara, sehingga sangat cocok untuk mengurangi ukuran file gambar.
B. Menggunakan alat kompresi
Memanfaatkan alat kompresi gambar dapat membantu mengurangi ukuran file gambar tanpa mengorbankan kualitas secara signifikan. Beberapa alat kompresi gambar yang populer dan efektif meliputi:
TinyPNG (https://tinypng.com/): Alat ini mengkompresi gambar PNG dan JPEG tanpa mengurangi kualitas yang terlihat. Anda cukup mengunggah gambar Anda, dan TinyPNG akan mengoptimalkannya secara otomatis.
ImageOptim (https://imageoptim.com/): Aplikasi desktop gratis yang mengoptimalkan gambar dengan menghilangkan metadata yang tidak perlu, mengurangi ukuran file, dan mempertahankan kualitas gambar.
ShortPixel (https://shortpixel.com/): Layanan yang menawarkan plugin WordPress, tetapi juga memiliki alat kompresi gambar online yang memungkinkan Anda mengoptimalkan gambar dalam format JPEG, PNG, GIF, dan WebP.
Sebelum mengunggah gambar ke situs web Anda, pastikan untuk mengoptimalkannya dengan alat kompresi yang sesuai agar kecepatan loading tetap cepat.
IV. Meminimalkan jumlah permintaan HTTP
A. Memahami permintaan HTTP
Permintaan HTTP adalah proses di mana browser mengirimkan permintaan ke server untuk mengambil berbagai elemen seperti gambar, file CSS, dan file JavaScript yang membentuk halaman web. Setiap elemen yang dimuat memerlukan satu permintaan, dan semakin banyak permintaan yang harus diproses, semakin lama waktu yang dibutuhkan untuk memuat halaman. Oleh karena itu, meminimalkan jumlah permintaan HTTP adalah langkah penting untuk meningkatkan kecepatan loading situs web Anda.
B. Mengurangi elemen yang memerlukan permintaan
Ada beberapa cara untuk mengurangi jumlah permintaan HTTP pada situs web Anda, yang pada akhirnya akan mempercepat waktu loading halaman. Berikut beberapa cara yang dapat Anda terapkan:
- Menggabungkan file CSS dan JavaScript: Menggabungkan beberapa file CSS dan JavaScript menjadi satu file masing-masing dapat mengurangi jumlah permintaan HTTP secara signifikan.
- Menggunakan sprite CSS: Sprite CSS adalah teknik yang menggabungkan beberapa gambar kecil menjadi satu gambar besar, lalu menggunakan CSS untuk menampilkan bagian yang relevan. Dengan ini, Anda mengurangi jumlah permintaan gambar.
- Mengurangi jumlah elemen halaman: Pertimbangkan untuk mengurangi jumlah elemen halaman, seperti gambar, video, atau widget, yang mungkin tidak perlu atau tidak memberikan nilai tambah bagi pengunjung.
- Lazy loading: Menerapkan teknik lazy loading memungkinkan elemen pada halaman hanya dimuat saat dibutuhkan, seperti saat pengguna menggulir ke bagian tersebut. Dengan ini, Anda mengurangi jumlah permintaan HTTP yang diproses sekaligus.
- Memanfaatkan browser caching: Dengan mengaktifkan browser caching, Anda memungkinkan browser untuk menyimpan beberapa elemen halaman secara lokal, sehingga mengurangi jumlah permintaan HTTP yang diperlukan saat pengunjung kembali mengunjungi situs web Anda.
- Menerapkan konsep “load it when need it” artinya hanya menjalankan script PHP, Javascript dan CSS saat dibutuhkan. Contoh penerapan: hanya meload script-script tertentu pada taxonomy tertentu. single.js hanya load di single.php, archives.js hanya load pada halaman category, tag dst.
- Kurangi penggunaan library atau jalankan library saat dia dibutuhkan. Contoh: prism.js atau flickity.js hanya load saat dibutuhkan.
- Maksimalkan penggunaan vanilla js dan hanya panggil/load jQuery pada saat dia dibutuhkan saja.
- Buat conditional loading css misal: single.css hanya load di single.php, page.css hanya load di page.php dan seterusnya.
V. Menggunakan CDN (Content Delivery Network)
A. Apa itu CDN
Content Delivery Network (CDN) adalah jaringan server yang tersebar di seluruh dunia yang bekerja sama untuk menyajikan konten situs web dengan lebih cepat kepada pengguna. CDN menyimpan salinan konten situs web Anda di berbagai lokasi geografis, sehingga ketika seorang pengunjung mengakses situs web Anda, konten akan disajikan dari server terdekat secara geografis. Ini mengurangi waktu tunggu dan mempercepat waktu loading halaman.
B. Pilihan CDN gratis dan berbayar
Ada beberapa pilihan CDN, baik gratis maupun berbayar, yang dapat Anda gunakan untuk mempercepat situs web Anda. Berikut beberapa pilihan populer:
Cloudflare
(https://www.cloudflare.com/cdn/): Cloudflare adalah salah satu penyedia CDN paling populer dan menawarkan rencana gratis dengan fitur dasar serta rencana berbayar untuk fitur lebih lanjut. Cloudflare juga melindungi situs web Anda dari serangan DDoS dan meningkatkan keamanan.
Amazon CloudFront
(https://aws.amazon.com/cloudfront/): Amazon CloudFront adalah layanan CDN yang ditawarkan oleh Amazon Web Services (AWS). Ini menawarkan solusi berbasis penggunaan dengan fitur yang sangat dapat dikustomisasi. Cocok untuk situs web dengan tingkat lalu lintas yang lebih tinggi dan kebutuhan yang lebih kompleks.
Anda bisa menggunakan plugin WPAdmin AWS CDN Download: https://wordpress.org/plugins/aws-cdn-by-wpadmin/yaitu plugin gratis untuk mempermudah Anda mengintegrasikan WordPress dengan layanan CDN AWS.
KeyCDN
(https://www.keycdn.com/): KeyCDN adalah penyedia CDN berbasis penggunaan yang menawarkan solusi dengan biaya efektif dan memiliki banyak fitur untuk membantu mengoptimalkan situs web Anda. KeyCDN cocok untuk pemilik situs web yang mencari solusi CDN yang lebih terjangkau tanpa mengorbankan kualitas layanan.
Fastly
(https://www.fastly.com/): Fastly adalah penyedia CDN yang lebih canggih, menawarkan solusi yang sangat cepat dan fleksibel untuk situs web dengan lalu lintas tinggi dan kebutuhan yang lebih canggih. Fastly mungkin lebih sesuai untuk perusahaan yang memerlukan solusi CDN tingkat lanjut dan bersedia membayar lebih untuk itu.
Mempertimbangkan pilihan CDN yang sesuai dengan kebutuhan dan anggaran Anda, serta menerapkan salah satunya, akan membantu meningkatkan kecepatan loading situs web Anda secara global.
VI. Mengaktifkan kompresi Gzip dan minifikasi file
A. Apa itu kompresi Gzip
Kompresi Gzip adalah metode kompresi yang digunakan oleh server web untuk mengurangi ukuran file yang dikirim ke browser pengguna. Dengan mengaktifkan kompresi Gzip, server akan mengompres file HTML, CSS, dan JavaScript sebelum mengirimkannya ke browser, yang pada gilirannya akan mengurangi waktu yang dibutuhkan untuk mengunduh dan memuat konten halaman. Browser kemudian akan mengurai file yang dikompresi dan menampilkan konten halaman seperti biasa.
Copy paste kode dibawah ini kebagian akhir file .httacces wordpress anda,
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/svg "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 1 year"
</IfModule>
## EXPIRES CACHING ##
# Fonts
# Add correct content-type for fonts
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType application/font-woff2 .woff2
# Compress compressible fonts
# only uncomment if you dont have compression turned on already. Otherwise it will cause all other filestypes not to get compressed
# AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml
ExpiresActive on
# Add a far future Expires header for fonts
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/font-woff2 "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 year"B. Minifikasi CSS, JavaScript, dan HTML
Minifikasi adalah proses mengoptimalkan kode file CSS, JavaScript, dan HTML dengan menghapus spasi, baris baru, komentar, dan elemen kosong yang tidak perlu. Hasilnya adalah file yang lebih kecil dan ringan, yang memuat lebih cepat di browser pengguna. Ada beberapa alat yang dapat Anda gunakan untuk minifikasi file:
- CSS: CSSNano (https://cssnano.co/) dan CSS Minifier (https://cssminifier.com/) adalah alat online yang populer untuk minifikasi file CSS.
- JavaScript: UglifyJS (https://github.com/mishoo/UglifyJS) dan Terser (https://github.com/terser/terser) adalah alat yang efektif untuk minifikasi file JavaScript.
- HTML: HTMLMinifier (https://htmlminifier.com/) adalah alat online yang dapat Anda gunakan untuk minifikasi file HTML.
- Kalau Anda menggunakan VSCODE anda bisa install extension Minifty For VSCode, download https://marketplace.visualstudio.com/items?itemName=HookyQR.minify dan installĀ
Dengan mengaktifkan kompresi Gzip dan menerapkan minifikasi pada file CSS, JavaScript, dan HTML, Anda akan mengurangi ukuran file yang dikirim ke browser pengguna dan mempercepat waktu loading halaman.
VII. Kesimpulan
A. Manfaat mengoptimalkan kecepatan loading
Mengoptimalkan kecepatan loading situs web Anda sangat penting untuk meningkatkan pengalaman pengguna, mengurangi tingkat pentalan, dan meningkatkan peringkat SEO. Kecepatan yang lebih cepat memungkinkan pengunjung menemukan informasi yang mereka cari dengan lebih mudah dan cepat, yang pada akhirnya akan meningkatkan keterlibatan dan konversi.
B. Potensi peningkatan performa
Dengan menerapkan langkah-langkah yang telah dijelaskan dalam artikel ini, Anda akan melihat peningkatan yang signifikan dalam kecepatan loading situs web Anda. Selain itu, langkah-langkah ini juga akan membantu meningkatkan performa secara keseluruhan, termasuk keandalan, keamanan, dan efisiensi situs web Anda.
C. Menerapkan langkah-langkah tersebut secara konsisten
Untuk memastikan kecepatan loading yang optimal dan performa situs web yang baik, penting untuk menerapkan langkah-langkah ini secara konsisten. Terus pantau kecepatan situs web Anda dan pastikan untuk melakukan penyesuaian dan perbaikan yang diperlukan saat teknologi dan kebutuhan pengunjung Anda berkembang. Dengan demikian, Anda akan memastikan bahwa situs web Anda tetap cepat, efisien, dan ramah pengguna untuk pengunjung sekarang dan di masa mendatang.