Mengatasi Tampilan Rusak Pada Website Berbasis WordPress

Pernahkah Anda membuka website fakultas atau unit di lingkungan Telkom University dan mendapati tampilannya berantakan? Halaman yang seharusnya rapi dan terstruktur tiba-tiba hanya menampilkan teks biru tanpa gaya, dan latar belakangnya berubah warna menjadi aneh, seperti pada gambar di bawah ini.

Jika pernah, jangan panik! Masalah ini cukup umum terjadi pada website berbasis WordPress yang menggunakan sistem caching untuk mempercepat waktu muat. Kabar baiknya, solusinya sangat sederhana.

Artikel ini akan menjelaskan mengapa hal ini bisa terjadi dan bagaimana cara mengatasinya langkah demi langkah yang bisa dilakukan oleh masing-masing operator website dan atau dibantu oleh staf ahli dari Direktorat Pusat Teknologi Informasi (PuTI) Telkom University.

Mengapa Tampilan Website Bisa Rusak? Memahami Peran Cache

Untuk membuat website dapat diakses dengan cepat, kami menggunakan beberapa lapisan teknologi caching. Anggap saja cache adalah “memori jangka pendek” untuk sebuah website. Daripada membangun halaman dari nol setiap kali ada pengunjung, server menyimpan versi statis (HTML, CSS, JavaScript) yang sudah jadi dan menyajikannya langsung. Ini jauh lebih cepat.

Di lingkungan Telkom University, kita umumnya menggunakan tiga lapisan cache:

1. Cache Plugin (LiteSpeed Cache / Hummingbird Pro): Plugin ini berjalan langsung di server website WordPress kita. Tugasnya adalah mengoptimalkan file, menggabungkan kode CSS dan JavaScript, dan membuat versi statis dari halaman web kita.
2. Cache Cloudflare: Cloudflare adalah Jaringan Pengiriman Konten (CDN) yang menyimpan salinan website kita di berbagai server di seluruh dunia. Saat Anda mengakses website, Cloudflare akan menyajikan konten dari lokasi server terdekat, sehingga mempercepat waktu akses secara signifikan.
3. Cache Browser: Browser Anda sendiri (seperti Chrome, Firefox, atau Safari) juga menyimpan file-file seperti gambar, CSS, dan JavaScript dari website yang pernah Anda kunjungi. Tujuannya agar saat Anda kembali, browser tidak perlu mengunduh semuanya lagi.

Masalah tampilan rusak biasanya terjadi ketika ada ketidaksesuaian (mismatch) di antara lapisan-lapisan cache ini. Misalnya, file HTML yang diterima browser Anda adalah versi terbaru, tetapi file CSS (yang mengatur gaya dan tampilan) yang diterima masih versi lama yang tersimpan di cache Cloudflare atau browser. Akibatnya, halaman tidak memiliki “instruksi” tentang bagaimana harus ditampilkan, sehingga muncullah tampilan yang berantakan.

Solusi Langkah-demi-Langkah Mengatasi Tampilan Rusak

Berikut adalah tiga langkah yang bisa dilakukan, diurutkan dari yang paling mudah untuk pengguna umum hingga yang memerlukan akses admin.

Langkah 1: Lakukan “Hard Refresh” pada Browser Anda (Untuk Pengguna Umum)

Ini adalah langkah pertama dan paling sering berhasil. Hard Refresh memaksa browser Anda untuk mengabaikan cache yang tersimpan di komputer dan mengunduh ulang semua aset (HTML, CSS, JS) dari server.

Caranya sangat mudah:

• Di Windows/Linux (Chrome, Firefox, Edge): Tekan Ctrl + F5 atau Ctrl + Shift + R.
• Di macOS (Chrome, Firefox, Safari): Tekan Cmd + Shift + R.

Setelah melakukan hard refresh, dalam banyak kasus, tampilan website akan kembali normal.

Langkah 2: Hapus Cache Melalui Plugin (Untuk Operator Website)

Jika hard refresh tidak berhasil, kemungkinan cache yang bermasalah ada di sisi server. Administrator website perlu masuk ke dashboard WordPress untuk membersihkan cache melalui plugin yang digunakan (LiteSpeed Cache atau Hummingbird Pro).

• Untuk LiteSpeed Cache: Biasanya terdapat ikon LiteSpeed di admin bar bagian atas. Arahkan kursor ke ikon tersebut, lalu pilih “Purge All”.
• Untuk Hummingbird Pro: Masuk ke menu Hummingbird Pro > Caching, lalu klik tombol “Clear Cache”.

Tindakan ini akan menghapus semua file cache yang dibuat oleh plugin di server dan membangunnya kembali dari awal.

Langkah 3: Hapus Cache di Cloudflare (Untuk Administrator Website dari PuTI)

Ini adalah langkah terakhir jika kedua cara di atas belum juga menyelesaikan masalah. Artinya, Cloudflare mungkin masih menyajikan file versi lama dari jaringannya di seluruh dunia.

Administrator yang memiliki akses ke akun Cloudflare perlu melakukan:

1. Login ke dashboard Cloudflare.
2. Pilih domain website yang bermasalah.
3. Pergi ke menu Caching > Configuration.
4. Klik tombol “Purge Everything”.

Tindakan ini akan membersihkan seluruh cache untuk domain tersebut di semua server Cloudflare secara global. Perlu diingat, setelah melakukan “Purge Everything”, beberapa pengunjung pertama mungkin akan merasakan website sedikit lebih lambat karena cache sedang dibangun ulang.

Tindakan berikutnya yang dilakukan PuTI biasanya terkait konfigurasi keamanan yang membatasi adanya akses ke script website, sehingga tampilan bisa jadi tidak sempurna.

Kesimpulan

Tampilan website yang rusak memang bisa membuat panik, namun pada dasarnya ini adalah efek samping dari teknologi percepatan website yang kita gunakan. Inti masalahnya adalah ketidaksesuaian data cache.

Dengan mengikuti urutan solusi ini:

1. Hard Refresh di browser.
2. Clear Cache di plugin WordPress.
3. Purge Cache di Cloudflare.
4. Konfigurasi Firewall

Anda dapat dengan cepat mengembalikan tampilan website ke kondisi normal. Sebagai praktik terbaik, setiap kali melakukan pembaruan penting pada tema atau plugin, sangat disarankan untuk membersihkan semua lapisan cache secara proaktif untuk mencegah masalah ini terjadi.

Jika hal tersebut sudah dilakukan oleh pengguna umum dan operator website, namun masih berantakan tampilan website-nya, maka segera lakukan input tiket keluhan kepada PuTI melalui portal https://satu.telkomuniversity.ac.id/