Kami menggunakan cookies

Situs ini menggunakan cookies dari cmlabs untuk memberikan dan meningkatkan kualitas layanannya serta menganalisis lalu lintas..

Panduan Meningkatkan Pagespeed Wordpress

Dipublikasikan Jul 25, 2023 14:07

Panduan Meningkatkan Pagespeed Wordpress
Gambar sampul: Ilustrasi panduan meningkatkan pagespeed wordpress

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.

Apa yang Menyebabkan Situs Web Lambat?

Ada banyak hal yang menyebabkan situs web lambat, beberapa penyebab utama situs web dengan Wordpress adalah sebagai berikut:

  1. Hosting Web - Ketika server hosting yang tidak dikonfigurasi dengan baik dan tidak sesuai kebutuhan.
  2. Konfigurasi Wordpress - Apabila situs Wordpress tidak ada cache pada halaman, beban pada server akan semakin berat yang membuat situs web lambat.
  3. Ukuran Halaman - Ini terjadi saat halaman banyak memuat aset seperti fonts, gambar atau video yang belum dioptimalkan.
  4. Plugin yang Buruk - Terlalu banyak menggunakan plugin yang tidak digunakan atau plugin berkode buruk.
  5. Script ExternalScript seperti iklan, pemuatan font, dan lainnya yang memengaruhi kinerja web. 

Tujuan Optimasi Speed Website pada Wordpress

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.

Menganalisis Website 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:

  1. Pagespeed Insight
    Pagespeed Insight merupakan tools buatan Google untuk menilai seberapa cepat website diakses. Dari sini kita juga bisa menilai kecepatan website pada desktop maupun mobile device.
  2. GTMetrix
    GTMetrix juga merupakan tools yang bisa menganalisis dan menguji kecepatan serta performa sebuah halaman web. Dengan menggunakan GTMetrix, kita juga bisa mengetahui rincian waktu pemuatan halaman.

Apa itu LCP, CLS, dan TBT?

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.

LCPSkor
0 – 2,5 detikBagus
2,5 – 4 detikPerlu Perbaikan
Lebih dari 4 detikTidak bagus

Lalu, ini 4 faktor dan pengaruh LCP pada website

Sub Bagian LCPFaktor LCPPengaruh
TTFBSecara 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 timeDiakibatkan ukuran file gambar/CSS/JS, critical CSS, CDN, atau cache yang kadaluarsa.~40%
Element render delayDisebabkan Render-blocking file CSS/JS, ukuran file JS, font-display (opsional).<10%


 Cara Kerja dari 4 Faktor yang memengaruhi LCP

Gambar 1: Cara Kerja LCP resource pada website.


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.

CLSSkor
Dibawah 0.1Bagus
0.1 - 0.25Perlu 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 TimeSkor
0–300 milidetikBagus
300-600 milidetikPerlu Perbaikan
Lebih dari 600 milidetikTidak bagus


 

Bagaimana Cara Meningkatkan Kecepatan Website Wordpress?

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.

1. Hosting atau Server Yang Baik Buat Wordpress 

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 SpaceMemory RAMBandwidth, 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:

  1. Shared Hosting
  2. VPS
  3. Dedicated Hosting

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:

  1. Apache
  2. NGINX
  3. Litespeed 

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.

2. Optimasi Kinerja Wordpress

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:

  1.  Kode yang dioptimalkan.
  2. Responsif.
  3. Ukuran file yang ringan.
  4. Penggunaan caching.
  5. Ada optimasi gambar.
  6. Kinerja tema yang sudah terintegrasi dengan JavaScript.

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.

Gambar 2:  Pengaturan Elementor untuk meningkatkan kecepatan wordpress.

2. Divi
Untuk page builder Divi bisa cek bagian Options lalu Performanceenable sesuai dengan kebutuhan website.

Gambar 3:  Pengaturan Divi untuk meningkatkan kecepatan wordpress.

 

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.

Gambar 4: Contoh penerapan kode html responsive gambar.

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.

PluginUkuran TerkompresiSaved (%)Method
reSmush.it36 KB63.8%Lossless
EWWW Image Optimizer97.5 KB1.9%Lossless
Compress JPEG & PNG images34.364%Lossy
ShortPixel Image Optimizer37 KB63.5%Lossy
WP Smush99 KB2.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

  • Memperkecil request saat load.
  • Mempercepat loading.
  • Menghemat bandwith.

Kekurangan

  • Blank saat melakukan fast scroll.
  • Penggunaan CPU sedikit lebih tinggi.
  • Pengunjung merasa adanya lag saat mengunjungi website.

 

3. Meningkatkan Kecepatan Website dengan Plugin

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

  • Caching ServerLebih cepat daripada caching berbasis file lainnya, karena sudah didukung juga oleh server Litespeed.
  • Mode Tamu: Meningkatkan waktu muat kunjungan pertama kali.
  • Caching Publik / Pribadi: Ada pengaturan untuk mengontrol cache publik dan pribadi. 
  • Mengoptimalkan HTML, CSS, JS: Mengoptimalkan seperti minify, menggabungkan atau menghapus file yang tidak digunakan.
  • Pemuatan Lazy HTML: Memuat element html dengan lazy load seperti pada section komentar dan footer
  • Pengoptimalan Gambar: Ada lebih banyak setting pengoptimalan gambar dari pada plugin cache lainnya.
  • Cache Gravatar: Plugin cache yang dapat melakukan cache pada Gravatar secara external.
Gambar 5: Performa website dengan server 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:

  • Hapus CSS yang tidak terpakai: menghapus CSS yang tidak terpakai dengan cara file terpisah.
  • Lazy render element HTML: Mirip seperti gambar lazy load, hanya saja pada element HTML, seperti bagian komentar/footer.
  • Placeholder Youtube: Mencegah permintaan secara external untuk menyematkan video. 
  • Lazy load gambar latar belakang: Bisa digunakan untuk memilih class section gambar latar belakang.
  • Halaman Pramuat: Pramuat untuk mencegah lonjakan CPU.
  • Pramuat gambar penting: Pramuat sejumlah gambar yang terlihat pada viewport layar.
  • Host font secara lokal: Mencegah permintaan fonts.gstatic.com saat menggunakan Google Font.
  • Fetchpriority: Salah satu fitur yang dapat mengatur prioritas gambar (tinggi, rendah, default) dan dapat meningkatkan LCP dengan mengatur LCP ke prioritas tertinggi.
     

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.

Gambar 6: Cara mengecek file CSS yang tidak digunakan pada browser Chrome.

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.
 

Gambar 7: Cara menghapus file css yang tidak digunakan menggunakan plugin Perfmatters.

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.

Gambar 8: Cara menghapus file css yang tidak digunakan menggunakan plugin WP Rocket.

 

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.
 

Gambar 9: Cara menghapus file js yang tidak digunakan menggunakan plugin Perfmatters. 

 

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.

Gambar 10: Perbandingan file jquery yang sudah diperkecil.

 

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.
 

Gambar 11: Cara memperkecil atau menggabungkan file dengan Autoptimize.

 

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:

  • Default: HTML akan terhentikan saat meload file JS.
  • Defer: Ketika menggunakan atribut defer pada tag script dalam HTML, file Javascript akan tetap dimuat tanpa menghentikan proses rendering HTML. Namun, file Javascript akan dieksekusi setelah HTML dimuat.
  • Async: File JS akan dimuat bersamaan dengan HTML.

Berikut ini gambaran perbedaan saat eksekusinya, pastikan untuk menempatkan file dengan benar. Pastikan juga untuk file yang ingin dimuat terlebih dahulu sebelum mengeksekusinya.

Gambar 12: Perbedaan eksekusi file js.

 

Untuk mengatur urutan file bisa menggunakan plugin Async Javascript.

Gambar 13: Mengatur urutan eksekusi file js dengan 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.

Gambar 14: Laporan pagespeed untuk font yang bermasalah.

 

Adapun cara untuk optimasi display font atau preload pada Wordpress:

  • Elementor - Mendukung pengaturan pemuatan font Google.

     
Gambar 15: Pengaturan Elementor pemuatan font display.

 

  • Tema atau Plugin  - Mengubah font display pada file Tema atau Plugin.
     
Gambar 16: Mengubah font display secara manual pada tema atau plugin.

 

  • Plugin Swap Google Fonts DisplayInstall dan aktifkan untuk menemukan Google Fonts, namun tidak berfungsi pada fonts secara dinamis atau menggunakan file JS.
  • Plugin Pre* Party Resource Hints Plugin yang dapat menentukan preload (fonts pada head), preconnect (fonts yang menggunakan CDN url + fonts.gstatic.com), prefetch (URL fonts third-party).
     
Gambar 17: Menentukan preload font dengan plugin.

 

Pemeliharaan  Pagespeed

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.

Meningkatkan Pengalaman Pengguna dengan Optimasi Pagespeed pada Website Storylabs

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

Gambar 18: Pengujian tampilan desktop di Pagespeed Google sebelum optimasi.

 

2. Mobile

Gambar 19: Pengujian tampilan mobile di Pagespeed Google sebelum optimasi.

 

Setelah

1. Desktop

Gambar 20: Pengujian tampilan desktop di Pagespeed Google sesudah optimasi.

 

2. Mobile

Gambar 21: Pengujian tampilan mobile di Pagespeed Google sesudah optimasi.

 

Kesimpulan

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.

Tria Bagus

Tria Bagus

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?

Permudah proses analisis dengan SEO Tools yang terpasang langsung di peramban Anda. Saatnya menjadi ahli SEO sejati.

Gratis di semua peramban berbasis Chromium

Pasang di peramban Anda sekarang? Jelajahi sekarang cmlabs chrome extension pattern cmlabs chrome extension pattern

Butuh bantuan?

Ceritakan tentang kebutuhan SEO Anda, tim marketing kami akan membantu menemukan solusi terbaik.

Berikut daftar tim kami secara resmi dan diakui, hati-hati terhadap penipuan oknum tidak bertanggung jawab yang mengatasnamakan PT CMLABS INDONESIA DIGITAL (cmlabs). Baca lebih lanjut
Marketing Teams

Agita

Marketing

Tanya Saya
Marketing Teams

Destri

Marketing

Tanya Saya
Marketing Teams

Thalia

Marketing

Tanya Saya
Marketing Teams

Irsa

Marketing

Tanya Saya
Marketing Teams

Yuliana

Business & Partnership

Tanya Saya
Marketing Teams

Rochman

Product & Dev

Tanya Saya
Marketing Teams

Said

Career & Internship

Tanya Saya

#cmlabsclass24 Year-End Special Edition is here!

Cek

Tertarik bergabung di cmlabs? Tingkatkan peluang kamu bekerja menjadi Spesialis SEO di perusahaan melalui program baru kami, yaitu cmlabs Academy. Gratis ya!

Cek

Baru! cmlabs Tambahkan 2 Tools untuk Chrome Extensions! Apa Saja?

Cek

Saat ini tidak ada notifikasi...