Kami menggunakan cookies
Situs ini menggunakan cookies dari cmlabs untuk memberikan dan meningkatkan kualitas layanannya serta menganalisis lalu lintas..
Kami menggunakan cookies
Situs ini menggunakan cookies dari cmlabs untuk memberikan dan meningkatkan kualitas layanannya serta menganalisis lalu lintas..
Dipublikasikan Jul 25, 2023 14:07
Tim kami akan terus menambahkan istilah-istilah baru yang umumnya digunakan dalam dunia SEO dan terminologi Google. Anda mungkin akan diarahkan ke Kamus SEO di cmlabs.co melalui tautan dari pihak ketiga. Harap diingat bahwa kami tidak melakukan pengecekan terhadap keakuratan dan keandalan dari tautan-tautan eksternal. Sehingga, kami tidak bertanggung jawab atas akurasi atau keandalan informasi yang ditawarkan oleh situs web pihak ketiga.
Pagespeed adalah istilah yang sering digunakan untuk menggambarkan kecepatan pemuatan halaman di sebuah situs web. Ini mencangkup waktu yang dibutuhkan halaman web untuk sepenuhnya dimuat dan ditampilkan kepada pengunjung.
Pagespeed penting karena memengaruhi pengalaman pengguna dan ketersediaan konten. Sejak Google mengumumkan kecepatan website merupakan salah satu faktor peringkat, sebagai pemilik website tentunya ini hal yang perlu diperhatikan.
Kita menyadari bahwa tiap pengguna ingin mendapatkan pengalaman mengunjungi website dengan nyaman dan cepat. Faktanya, tiap pengunjung akan meninggalkan website dalam rentang waktu 12 detik ke 7 detik dalam beberapa tahun terakhir ini. Sebuah dampak besar seperti konversi menurun, tampilan halaman berkurang dan kepuasan pengunjung website menurun.
Sangat disayangkan jika website yang lambat bisa membuat pengguna meninggalkan website kita bahkan sebelum mereka melihat konten yang kita berikan atau produk yang kita tawarkan.
Tidak hanya pengguna yang terpengaruh, tetapi juga mesin pencarian seperti Google. Google akan memberikan hukuman pada website yang lambat dengan menurunkan rankingnya dalam hasil pencarian.
Lalu, bagaimana upaya kita membangun website yang hebat supaya konten berkualitas serta produk yang kita berikan tidak sia-sia? Berikut caranya.
Ada banyak hal yang menyebabkan situs web lambat, beberapa penyebab utama situs web dengan Wordpress adalah sebagai berikut:
Sebelum mengoptimasi kecepatan Wordpress, penting bagi kita untuk memahami mengapa meningkatkan kecepatan memuat website itu penting. Biasanya, tujuannya adalah agar website dapat diakses dengan cepat oleh pengunjung.
Namun, terkadang dengan desain yang sudah ada, script yang sudah digunakan seperti css, js, script external (dari website lain), assets, optimasi ini menjadi sulit dilakukan. Karena itu, dari sini kita akan mempelajari apa yang perlu dilakukan untuk memperbaiki kecepatan website pada Wordpress.
Bagaimana cara menganalisa sebuah website Wordpress supaya tahu apa yang menyebabkan load sebuah web lambat. Ada beberapa Tools yang bisa digunakan untuk menganalisis website, berikut contohnya:
Ada beberapa hal yang perlu diketahui sebelum meningkatkan kecepatan web yaitu harus menganalisis beberapa hal seperti LCP, CLS, dan TBT. Berikut penjelasan dari istilah tersebut:
1. LCP (Largest contentful paint)
LCP adalah salah satu metrik yang digunakan untuk mengukur kecepatan sebuah halaman web. LCP mengacu pada waktu yang dibutuhkan untuk merender elemen konten terbesar yang terlihat pada viewport pengguna. Elemen konten ini seperti gambar, video, atau blok teks terbesar.
Adapun tolak ukur LCP adalah sebagai berikut.
LCP | Skor |
0 – 2,5 detik | Bagus |
2,5 – 4 detik | Perlu Perbaikan |
Lebih dari 4 detik | Tidak bagus |
Lalu, ini 4 faktor dan pengaruh LCP pada website
Sub Bagian LCP | Faktor LCP | Pengaruh |
TTFB | Secara umum karena Hosting dan CDN + Page yang ada Cache. | ~40% |
Resource load delay | Dikarenakan konten bagian atas terbesar. Contoh penggunaan lazy load (penundaan loading) pada image hero section atau judul artikel yang menggunakan skeleton. | <10% |
Resource load time | Diakibatkan ukuran file gambar/CSS/JS, critical CSS, CDN, atau cache yang kadaluarsa. | ~40% |
Element render delay | Disebabkan Render-blocking file CSS/JS, ukuran file JS, font-display (opsional). | <10% |
Cara Kerja dari 4 Faktor yang memengaruhi LCP
2. CLS (Cumulative Layout Shift)
CLS adalah salah satu metrik yang mengukur stabilitas layout sebuah halaman website, ini terjadi ketika layout halaman berubah secara tidak terduga yang menyebabkan pengunjung kesulitan. Misalnya, saat pengunjung membaca sebuah artikel, mengklik tautan, dll.
CLS menghitung perbedaan antara posisi elemen saat dimuat, semakin besar perbedaan tersebut akan berpengaruh pada nilai CLS yang dihasilkan. Berikut merupakan tolak ukur skor CLS.
CLS | Skor |
Dibawah 0.1 | Bagus |
0.1 - 0.25 | Perlu Perbaikan |
.25+ | Tidak bagus |
3. TBT (Total Blocking Time)
adalah waktu yang diperlukan oleh browser untuk menunggu respon dari server sebelum bisa melanjutkan proses rendering halaman. Semakin lama waktu tunggu tersebut, maka semakin lambat pula halaman akan dimuat dan ditampilkan kepada pengunjung.
Berikut ini tolak ukur untuk memperhitungkan skor dari TBT.
Total Blocking Time | Skor |
0–300 milidetik | Bagus |
300-600 milidetik | Perlu Perbaikan |
Lebih dari 600 milidetik | Tidak bagus |
Setelah kita mempelajari tujuan, mengetahui tools optimasi dan beberapa metrik yang dipertimbangkan, selanjutnya kita bisa melakukan optimasi mempercepat loading website dengan wordpress.
Ada beberapa rekomendasi utama yang bisa diterapkan seperti berikut ini.
Layanan hosting Wordpress yang kita sewa memiliki peranan penting dan sangat berpengaruh pada kecepatan website nantinya. Ibaratkan hosting sebuah rumah dan website kita adalah orangnya. Oleh karena itu, memilih hosting yang tepat dapat membantu website diakses dengan cepat.
Berikut ini yang perlu diperhatikan saat memilih hosting.
A. Lokasi Data Center
Tentukan geografi pengunjung website, apakah target pengunjung website adalah orang Indonesia? Luar negeri ? atau seluruh dunia? Pemilihan lokasi ini hal pertama yang harus dilakukan berkaitan dengan target visitor paling banyak mengunjungi website.
Misalkan, target visitor hanya dari Indonesia, maka data center terlalu jauh kalau servernya ada di Europe. Normalnya, visitor Indonesia bisa menggunakan server Indonesia atau Singapore dengan ping berkisaran 10-100ms.
B. Spesifikasi Hosting
Memilih spesifikasi hosting yang bisa menampung website kita dengan pas adalah hal yang utama, tidak terlalu besar dan tidak terlalu kecil untuk ukuran Disk Space, Memory RAM, Bandwidth, dan Inodes. Saya menyarankan untuk memilih Hosting dengan disk SSD NVMe dari pada disk HDD. Karena SSD NVMe transfer datanya yang 25x lebih cepat dari pada HDD.
C. Penyedia Hosting
Ada banyak jenis dari hosting yang disediakan oleh penyedia namun secara garis besar ada 3 tipe layanan yang dijual:
D. Memilih WebServer
Web server adalah perangkat lunak atau keras yang bertugas menerima permintaan pengunjung website dan mengirimkannya kembali berupa respons seperti halaman web, gambar, file dan data lainnya. Pemilihan web server penting dilakukan dan saat ini ada 3 web server yang umumnya digunakan oleh penyedia hosting:
Sebisa mungkin untuk menghindari Web server Apache, saya menyarankan NGINX atau Litespeed yang lebih baik.
E. Upgrade PHP
Wordpress menggunakan PHP sebagai basis kodenya dan setiap pembaruan versi Wordpress juga perlu menyesuaikan dengan versi PHP terbaru agar tidak terjadi kode error. Selain itu, juga dapat meningkatkan beberapa persen kecepatan eksekusi script kode.
Perlu dicatat, Wordpress pasti kompatibel dengan versi PHP terbaru, jika terjadi error setelah upgrade versi PHP, kemungkinan besar ada kode tambahan, tema atau plugin yang tidak kompatibel dengan versi PHP terbaru.
Pada era digital ini, membuat perubahan untuk pengoptimalan kinerja wordpress merupakan cara agar website bisa di akses dengan cepat. Oleh karena itu, optimasi kecepatan load jadi salah satu faktor penting. Berikut ini beberapa caranya:
A. Perbarui Situs Wordpress
Wordpress merupakan sumber terbuka yang terpelihara dengan baik dan sering diperbarui. Setiap pembaruannya juga memberikan fitur baru dan memperbaiki masalah keamanan dan bug tertentu. Tema dan plugin Wordpress juga memiliki pembaruan rutin. Maka dari itu, sebagai pemilik situs web perlu memperbarui situs, tema dan plugin versi terbaru.
B. Gunakan Tema yang Sudah Teroptimasi
Bagaimana cara menentukan tema yang sudah teroptimasi? Saat memilih tema kita perlu memperhatikan tema yang bagus, bukan memilih tema yang dari sisi kode buruk dan dapat memperlambat website.
Lebih baik menggunakan tema yang simpel daripada tema yang ukuran pengkodeannya besar dengan tata letak rumit dan animasi mencolok. Jika mencari referensi tema pertimbangkan spesifikasi berikut ini:
C. Optimasi Page Builder
Page Builder populer digunakan untuk membuat tampilan halaman karena sangat mudah dan cepat. Namun dengan adanya satu komponen page builder akan ada banyak html, css, dan js yang dimuat. Lalu bagaimana cara mengoptimalkannya?
1. Elementor
Jika website menggunakan Elementor, pada pengaturan builder Elementor beberapa fitur ini bisa diaktifkan untuk meningkatkan kecepatan Wordpress.
2. Divi
Untuk page builder Divi bisa cek bagian Options lalu Performance, enable sesuai dengan kebutuhan website.
D. Mengoptimasi Gambar
Gambar menjadi salah satu faktor yang memperlambat loading website dikarenakan ukuran dan format yang ditampilkan pada website. Beberapa hal yang perlu dioptimalkan dari gambar sebelum diunggah adalah sebagai berikut.
1. Pemilihan format gambar
Umumnya, terdapat 4 format gambar untuk website, yaitu png, jpeg, gif, dan webp. Dari beberapa format yang disediakan lebih disarankan untuk memakai format webp karena merupakan format generasi terbaru dan sudah sesuai standar untuk kecepatan load website.
2. Sesuaikan Ukuran Gambar
Banyak orang mengunggah gambar dengan ukuran yang besar misal (2500px) X (1600px) padahal untuk bagian sidebar hanya diperlukan ukuran (675px) X (432px). Jadi, kita perlu menyesuaikan layout yang ingin ditampilkan.
3. Kompres Gambar
Gambar yang sudah disesuaikan ukurannya akan menurunkan size gambar tersebut. Agar lebih optimal, bisa melakukan kompresi gambar agar lebih kecil lagi dan siap untuk diupload pada website. Idealnya, untuk ukuran gambar yang diunggah tidak lebih dari (50kb) untuk gambar dibawah (1000px) dan kurang dari (100kb) untuk gambar diatas (1000px).
4. Responsive Image
Untungnya, pada wordpress secara default sudah membuat struktur gambar responsive. Jadi, tidak perlu ada pengaturan dari sisi responsive image. Selain itu, responsive image juga membantu dari sisi SEO untuk meningkatkan kecepatan loading suatu halaman, meningkatkan pengalaman pengguna, mobile friendly, mengurangi bounce rate yang mengacu pada pengunjung yang meninggalkan website.
Adapun salah satu tool browser untuk optimasi gambar adalah https://squoosh.app/
E. Menentukan Transparansi Background
Biasanya, pada layout website menggunakan background image yang memiliki gambar/pattern tertentu. Namun, apabila background hanya menggunakan warna polos atau gradient ,alangkah baiknya tidak menggunakan gambar. Dengan demikian website memiliki lebih sedikit gambar yang dimuat.
F. Menghapus Ukuran Gambar yang Tidak Dipakai
Gambar yang diunggah pada wordpress akan tersimpan pada Media dan file assets wordpress pada folder wp-content. File gambar yang tidak digunakan akan memberatkan hosting dan membuat server membutuhkan resource yang lebih besar.
Meskipun tidak secara langsung memperlambat website pada user, namun dengan menghapus gambar yang tidak digunakan akan membantu proses upload karena server akan terasa ringan. Di pihak lain, biasanya tema atau plugin tertentu bisa membuatkan ukuran gambar dari default wordpress.
G. Optimasi Gambar yang Sudah Ada
Ketika kita mendapati website yang sudah banyak gambar yang belum teroptimasi, solusinya adalah dengan melakukan optimasi dengan plugin. Dari beberapa riset, ini perbandingan plugin kompresi gambar.
Plugin | Ukuran Terkompresi | Saved (%) | Method |
reSmush.it | 36 KB | 63.8% | Lossless |
EWWW Image Optimizer | 97.5 KB | 1.9% | Lossless |
Compress JPEG & PNG images | 34.3 | 64% | Lossy |
ShortPixel Image Optimizer | 37 KB | 63.5% | Lossy |
WP Smush | 99 KB | 2.9% | Lossless |
Pada metode Lossy memiliki tingkat kompresi yang lebih baik namun hasil yang lebih pecah jika digunakan pada tingkat kompresi tinggi. Sebaliknya, Lossless memiliki tingkat kompresi yang lebih rendah dibandingkan Lossy namun tidak ada perbedaan antara gambar original dan gambar yang dikompresi.
H. LazyLoad pada Gambar
Sangat diperlukan untuk menunda pemuatan asset sampai bisa dilihat pengunjung website. Tidak ada gunanya untuk membuat asset yang belum dapat dilihat oleh user kecuali ads. Berikut informasi apabila menggunakan Lazy load pada gambar:
Kelebihan
Kekurangan
Ingin website cepat tapi dengan cara cepat juga? kita bisa menggunakan plugin untuk memperbaiki masalah tersebut.
A. Cache
Untuk cache bisa gunakan Litespeed apabila Anda menggunakan server Litespeed juga, karena ini bisa meningkatkan kecepatan website secara signifikan. Selain itu, sudah ada beberapa penyedia hosting yang memberikan Litespeed secara default. Selain itu, plugin ini gratis.
Fitur Utama Plugin Litespeed
Apabila menggunakan web server lain seperti NGINX, anda bisa menggunakan Flying Press, namun sayangnya ini berbayar.
Adapun Fitur Utama Flying Press adalah sebagai berikut ini:
B. Optimasi Script CSS & JS
Secara default wordpress memiliki beberapa script HTML yang didapatkan secara otomatis, JS untuk memuat function di frontend atau CSS dari plugin maupun theme.
Maka, perlu dilakukan optimasi ini untuk mengurangi load script yang tidak digunakan pada website. Ada beberapa metode yang bisa dilakukan seperti menggunakan plugin atau di lakukan secara manual saat menambahkan script secara terpisah.
1. Hapus CSS yang tidak digunakan
Beberapa file CSS pada plugin terkadang tidak digunakan, ada baiknya untuk menghapus file tersebut atau tidak perlu di load. Berikut contoh script dari file yang tidak digunakan.
Di Wordpress, CSS bisa di bersihkan menggunakan plugin Perfmatters yang dapat mengelola CSS atau JS lebih cepat dalam file terpisah. Ini contoh pengaturan salah satu plugin yang disable dan bisa memilih pada lokasi halaman apa yang tidak ingin plugin tersebut dimuat.
Selain plugin Perfmatters, kita juga bisa menggunakan plugin WP Rocket untuk menghapus CSS yang tidak digunakan. Dengan memilih path URL, class, id section, maupun tag.
2. Hapus JS yang tidak digunakan
Sama seperti CSS yang tidak digunakan, menghapus script file JS yang tidak digunakan perlu dilakukan juga. Adapun contohnya adalah plugin Perfmatters yang menghapus file js plugin Contact Form 7 pada halaman detail artikel.
3. Minify atau Combine file HTML, CSS atau JS
Minify merupakan cara untuk memperkecil size file dengan menghapus white space dan comment pada sebuah script file. Berikut ini contoh file yang sudah diperkecil. Bisa dilihat untuk ukuran file jquery (260kb) setelah diperkecil menjadi (84.6kb). Hal ini akan berpengaruh besar apabila file yang kita berikan memiliki ukuran yang besar.
Adapun cara untuk combine yaitu dengan menggabungkan file menjadi satu yang digunakan untuk memperkecil jumlah request, tetapi hal ini kurang disarankan pada website yang memiliki file atau plugin yang banyak. Karena bisa merusak website dari sisi layout maupun fungsionalitasnya.
Untuk menggabungkan file bisa di cek terlebih dahulu apakah berdampak besar pada website atau tidak.
Ada banyak plugin Cache yang menyediakan fitur ini. Di bawah ini saya memberikan salah satu contoh plugin Autoptimize untuk fiturnya.
4. Penempatan file JS
Optimasi terakhir untuk script js adalah penempatan file, pada caching disebut dengan critical assets untuk menentukan file mana yang terlebih dahulu dimuat. Ada 3 cara memuat yaitu:
Berikut ini gambaran perbedaan saat eksekusinya, pastikan untuk menempatkan file dengan benar. Pastikan juga untuk file yang ingin dimuat terlebih dahulu sebelum mengeksekusinya.
Untuk mengatur urutan file bisa menggunakan plugin Async Javascript.
C. Optimasi Fonts
Fonts yang dimuat pada website berpengaruh terhadap LCP (Largest contentful paint) hal ini dikarenakan penggunaan fonts external ataupun metode display fonts bukan swap. Selain itu, alangkah baiknya untuk fonts diakses secara lokal dan tidak mengambil dari external plugin maupun tema. Hal ini juga bisa muncul pada laporan Pagespeed seperti ini.
Adapun cara untuk optimasi display font atau preload pada Wordpress:
Beberapa perubahan akan membuat speed website wordpress menjadi lebih cepat, namun ada kalanya kita perlu melakukan pengecekan berkala. Karena Wordpress plugin dan tema bisa saja ada update dan mungkin akan memengaruhi kode yang sudah ada dan perlu dilakukan optimasi kembali.
Storylabs adalah website yang menyediakan berbagai konten media dengan kategori yang berbeda-beda mulai dari kuliner, transportasi, pendidikan, keuangan, parenting, dll. Storylabs ingin memberikan pengalaman menyenangkan kepada pembacanya dengan menyediakan website yang dapat diakses dengan cepat.
Pada waktu tertentu, website tersebut melakukan revamp besar-besaran di mana ada perubahan dari sisi desain tampilan, penambahan fitur adsense dan ada beberapa website terkendala dengan server yang mengakibatkan kecepatan website lambat.
Selain itu, hal ini juga mengakibatkan tingkat konversi yang rendah dan penurunan pengunjung website. Nah, untuk mengatasi masalah ini tim Storylabs berfokus memperbaiki pagespeed website mereka dengan beberapa cara berikut ini:
1. Pemilihan Server Cepat dan Tepat
Memiliki server yang cepat merupakan hal dasar untuk memperbaiki kecepatan website. Bayangkan apabila website sudah diaudit namun waktu render dari server tersebut lambat. Maka hal tersebut menjadi sia-sia, tim Storylabs menggunakan hosting dengan server Indonesia dikarenakan kebanyakan user berasal dari wilayah Indonesia serta menggunakan teknologi server Litespeed.
2. Menganalisis Halaman Website
Tim Storylabs melakukan audit menyeluruh terhadap kinerja semua halaman website dengan menggunakan alat untuk mengidentifikasi masalah pemuatan halaman, seperti gambar yang besar, file css dan javascript yang tidak terkompresi dan penggunaan cache yang tidak efisien.
3. Kompresi & Convert Gambar
Langkah pertama yang diambil adalah mengompresi gambar-gambar diseluruh website karena ukuran gambar yang terlalu besar dapat menyebabkan pemuatan halaman yang lambat. Mengkompres gambar tanpa mengorbankan kualitas visual dapat meningkatkan kecepatan website secara signifikan.
Selain itu, untuk format gambar Storylabs menggunakan webp yang sudah didukung oleh Google dan sudah didukung beberapa browser unggulan saat ini seperti Chrome, Firefox, dll.
4. Mengoptimasi file CSS dan Javascript
Meminimalkan jumlah file CSS dan Javascript di semua halaman website serta memisahkan beberapa file CSS dan Javascript untuk halaman tertentu yang menggunakan file tersebut. Lalu, menggabungkan file CSS yang diperlukan serta menghapus kode yang tidak digunakan. Hal ini dapat mengurangi jumlah permintaan yang harus dilakukan website. Di sini, tim Storylabs menggunakan plugin Litespeed untuk mengoptimalkannya dan juga sudah didukung server Litespeed
5. Penggunaan Cache
Storylabs mengimplementasikan strategi caching yang lebih efisien untuk mengurangi beban server dan mempercepat waktu pemuatan halaman bagi pengguna yang telah mengunjungi website sebelumnya. Dengan caching yang tepat, halaman tidak perlu dimuat ulang setiap pengunjung kembali serta menghemat waktu dan sumber daya server.
6. Meningkatkan Nilai Pagespeed Google
Dengan melakukan optimasi Pagespeed, Storylabs berhasil meningkatkan pengalaman pengguna secara signifikan. Waktu pemuatan halaman website berkurang drastis dan meningkatkan pengalaman pengguna baik dari website maupun seluler.
Kini, pengunjung dapat lebih lancar mengeksplorasi website dan membaca artikel tanpa harus menunggu lama untuk halaman dimuat. Selain itu, perbaikan pada kecepatan website juga meningkatkan peringkat website Storylabs pada mesin pencarian yang membantu menarik lebih banyak lalu lintas organik.
Tim Storylabs mengilustrasikan salah satu websitenya bagaimana meningkatkan kinerja website dan ini hasil dari pengujian Pagespeed Google.
Sebelum
1. Desktop
2. Mobile
Setelah
1. Desktop
2. Mobile
Perbaikan kecepatan load wordpress berpengaruh pada pengalaman pengunjung website dan penilaian Google untuk ranking di mesin pencarian. Dengan begitu, kita bisa melihat perubahan sebelum dan sesudah praktik optimasi. Selain itu, melakukan beberapa trial dan error akan mengetahui lebih banyak lagi untuk memperbaiki kecepatan website dengan Wordpress.
Terima kasih sudah meluangkan waktu untuk membaca tulisan saya! Di cmlabs, kami senang berbagi artikel-artikel baru dan keren seputar SEO setiap minggunya. Jadi, kamu akan selalu mendapatkan informasi terkini tentang topik yang kamu minati. Jika kamu benar-benar suka dengan konten-konten di cmlabs, kamu bisa bergabung dengan newsletter email kami. Dengan berlangganan, kamu akan mendapatkan pembaruan langsung di kotak masukmu. Oh ya, kalau kamu tertarik untuk berkontribusi sebagai penulis di cmlabs, jangan khawatir! Kamu bisa menemukan informasi lebih lanjut di sini. Jadi, ayo bergabung dengan komunitas cmlabs dan ikuti perkembangan terbaru seputar SEO bersama kami!
Bagaimana pendapat Anda? Apakah Anda menyukai artikel ini?
Gratis di semua peramban berbasis Chromium
Sesuai dengan prinsip-prinsip yang telah ditetapkan dalam wacana pemasaran, saya ingin menanyakan perspektif Anda tentang dampak strategi pemasaran SEO dalam memfasilitasi ekspansi perusahaan dalam kaitannya dengan keberadaan virtual