19 Cara Mudah Mempercepat Tampilan Seluler di WordPress

benjamin hershey unsplash

Dalam era digital saat ini, kecepatan loading website menjadi salah satu faktor penting dalam meningkatkan pengalaman pengguna. Hal ini terutama berlaku untuk website yang dikunjungi melalui perangkat mobile, karena koneksi internet yang seringkali lebih lambat dibandingkan dengan perangkat desktop. Oleh karena itu, optimisasi kecepatan loading website untuk perangkat mobile sangat penting untuk dilakukan. Berikut ini adalah beberapa cara mudah untuk mempercepat tampilan seluler di website WordPress.

  1. Menggunakan theme yang responsif: Pilih theme yang sudah dikembangkan dengan standar mobile-first dan telah diuji coba untuk performa seluler. Theme yang responsif akan menyesuaikan tampilan website sesuai dengan ukuran layar perangkat yang digunakan, sehingga tidak perlu menambahkan kode atau plugin tambahan untuk mengoptimalkan tampilan seluler.
  2. Menggunakan plugin caching: Plugin caching akan menyimpan versi statis dari website yang dikunjungi, sehingga saat pengunjung kembali mengunjungi website, halaman yang dibutuhkan akan di-load lebih cepat dari server. Beberapa plugin caching populer yang dapat digunakan adalah W3 Total Cache, WP Super Cache, dan WP Fastest Cache.
  3. Menggunakan CDN: Content Delivery Network (CDN) akan menyebarkan konten website ke server yang tersebar di berbagai lokasi, sehingga pengunjung akan mengakses website dari server yang terdekat dengan lokasinya. Ini akan meningkatkan kecepatan loading website dan juga mengurangi beban pada server utama.
  4. Optimisasi gambar: Ukuran file gambar yang besar akan menyebabkan website menjadi lambat saat diakses melalui perangkat mobile. Optimalkan ukuran file gambar dengan mengurangi resolusi atau mengompres gambar sebelum di-upload ke website. Anda dapat menggunakan plugin seperti WP Smush atau Kraken.io untuk melakukan optimisasi gambar secara otomatis.
  5. Menghapus plugin yang tidak digunakan: Beberapa plugin dapat memperlambat loading website, terutama jika plugin tersebut tidak digunakan atau tidak diperbarui secara reguler. Hapus plugin yang tidak digunakan atau ganti dengan plugin yang lebih ringan.

Selain 5 faktor dasar diatas, saya suka Rocket.net dengan Cloudflare Enterprise + Gutenberg (yaitu GeneratePress/Blocksy) + FlyingPress. Meskipun pengaturan LiteSpeed ​​juga bagus (server LiteSpeed ​​+ LiteSpeed ​​Cache + QUIC.cloud). Beberapa hal perlu dicek lagi saat kita mengoptimalkan di data web vital inti, berikut pembahasan lebih detailnya.

1. Uji Kecepatan Seluler di Think with Google

Gunakan alat Think with Google saat kita menguji kecepatan seluler karena alat ini merupakan alat terbaik dengan jaringan koneksi 4G. Caranya mudah anda hanya perlu memasukkan email dan Google akan mengirimkan laporan lengkap berbentuk PDF. Adapaun Pagespeed Insight Toos yang biasa kita gunakan juga berfungsi sama, namun menggunakan koneksi 3G yang lebih lambat untuk pengujian seluler. Ini sebabnya pengujian nya berbeda antara Desktop dan Mobile skor yang berakibat tidak sesuai dengan perkembangan internet saat ini.

Pagespeed Mobile Check pada tampilan seluler
Pagespeed Mobile Check

Selain di Pagespeed Insight Tools juga kadang bisa kita cek di Google Search Console yang memiliki laporan data vital web inti dengan tab khusus seluler yang menampilkan semua URL yang terpengaruh.

Google Search Console - Mobile Device
Google Search Console – Mobile Device

2. Ubah Ukuran Gambar Untuk Mobile/Seluler

Pada versi mobile device memiliki layar yang kecil, jadi gambar yang disiapkan harus kecil juga. Ada beberapa plugin yang menyediakan pengoptimalan gambar dan mengubah ukuran gambar untuk device seluler berikut merupakan pooling dari grup WP Speed Matters.

Source: WP Speed Matters Facebook Group
Source: WP Speed Matters Facebook Group

Adapun untuk beberapa aplikasi online yang dapat digunakan untuk meresize gambar agar sesuai dengan ukuran layar pada perangkat mobile:

  • Canva
    Merupakan aplikasi online design grafis yang bisa digunakan untuk meresize gambar sesuai dengan ukuran layar mobile. Canva juga memiliki banyak template dan ukuran design yang telah disesuaikan dengan ukuran layar perangkat mobile.
  • Adobe Photoshop Express
    Aplikasi online gratis yang bisa digunakan untuk meresize gambar, mudah digunakan dan memiliki banyak fitur untuk mengedit dan memodifikasi gambar.
  • Squoosh.app
    Aplikasi online untuk resize, compress, dan aman untuk berbagai gambar

3. Kurangi Network Latency

adalah upaya untuk mengurangi waktu tunggu (delay) atau lamanya waktu yang dibutuhkan untuk mengirim dan menerima data melalui jaringan pada perangkat mobile. Dalam konteks perangkat mobile, delay yang terlalu lama dapat mengakibatkan pengalaman pengguna yang buruk, seperti buffering video yang lama atau kesulitan dalam menjalankan aplikasi yang memerlukan respons cepat.

Upaya untuk mengurangi latency dapat dilakukan melalui berbagai cara, di antaranya adalah:

  • Menggunakan jaringan yang lebih cepat, seperti 4G atau 5G, dibandingkan dengan jaringan 3G atau 2G.
  • Mengoptimalkan pengaturan jaringan pada perangkat, seperti mematikan fitur auto-sync dan update otomatis pada aplikasi yang tidak penting.
  • Menggunakan protokol komunikasi yang lebih cepat dan efisien, seperti HTTP/2 dan QUIC.
  • Menggunakan teknologi caching pada server dan client untuk mengurangi jumlah data yang perlu ditransfer melalui jaringan.
  • Menggunakan teknologi CDN (Content Delivery Network) untuk menyediakan akses data yang lebih cepat dan efisien dengan menempatkan server di lokasi yang strategis.

    Pastikan menggunakan DNS yang cepat (Saya merekomendasikan Cloudflare yang secara konsisten berada di 5 hasil teratas, gratis, dan dapat digunakan hanya dengan mengubah server nama).
Pengaturan Cloudflare SSL/TLS Anda, pastikan TLS 1.3 diaktifkan dan setel versi TLS minimum ke 1.2.
Pengaturan Cloudflare SSL/TLS Anda, pastikan TLS 1.3 diaktifkan dan setel versi TLS minimum ke 1.2. 

Dengan mengurangi network latency, pengalaman pengguna pada perangkat mobile dapat ditingkatkan dan aplikasi yang memerlukan respons cepat dapat berjalan dengan lebih lancar dan efisien.

4. Hapus Aset Seluler yang Tidak Digunakan

Secara umum, menghapus aset seluler yang tidak digunakan pada perangkat mobile dapat membantu meningkatkan kecepatan website. Aset seluler yang tidak digunakan, seperti gambar, video, atau skrip yang tidak diperlukan, dapat memperpanjang waktu pemuatan halaman website. Hal ini dapat mengurangi kecepatan pemuatan halaman website, yang dapat memengaruhi pengalaman pengguna dan bahkan dapat memengaruhi peringkat website di mesin pencari.

Dengan menghapus aset seluler yang tidak digunakan, ukuran halaman web dapat dikurangi, dan waktu pemuatan dapat dipercepat. Ini dapat meningkatkan kecepatan dan responsifitas website pada perangkat mobile, yang dapat meningkatkan pengalaman pengguna.

Namun, perlu diingat bahwa penghapusan aset seluler yang tidak digunakan harus dilakukan dengan hati-hati. Aspek visual dan fungsional dari website harus tetap terjaga agar pengguna tetap dapat menggunakan website dengan mudah dan menyenangkan. Sebaiknya dilakukan analisis dan evaluasi terlebih dahulu sebelum menghapus aset seluler yang tidak digunakan pada website agar tidak merusak kualitas tampilan website secara keseluruhan.

Perfmatters dapat menonaktifkan CSS, JS, dan seluruh plugin berdasarkan perangkat . Artinya, jika Anda memiliki plugin tertentu yang tidak perlu dimuat di seluler, Anda dapat mengurangi CSS/JS yang memengaruhi beberapa item di Wawasan PageSpeed. Namun, ini hanya dapat digunakan jika Anda mengaktifkan caching seluler terpisah.

Plugin Perfmatters menonaktifkan file berdasarkan perangkat
Plugin Perfmatters menonaktifkan file berdasarkan perangkat

Atau pada Elementor atau Page Builder yang mendukung bisa di sesuaikan assets nya.

Edit gambar untuk mobile device
Edit gambar untuk mobile device

Dan jika Anda menggunakan Elementor, ingatlah untuk mengaktifkan setelan berikut di tab Eksperimen yang dapat meningkatkan item PageSpeed ​​terkait elemen DOM, CSS, JavaScript, dan font.

Elementor Experiments Pengaturan
Elementor Experiments Pengaturan

5. Memperbaiki Pergeseran Tata Letak Seluler

Gunakan Debugger Pergeseran Tata Letak Google untuk menemukan pergeseran tata letak seluler. Skor Anda idealnya harus di bawah 0,01 seperti yang direkomendasikan Google. Pergeseran tata letak sering kali disebabkan oleh font, gambar, atau iframe tanpa dimensi , animasi, atau CSS asinkron yang ditentukan yang sering kali dapat menyebabkan FOUC.

  • Matikan “optimalkan pengiriman CSS” di WP Rocket.
  • Matikan “memuat CSS secara asinkron” di LiteSpeed ​​Cache.
  • Aktifkan “tambahkan dimensi gambar yang hilang” di WP Rocket atau LiteSpeed.
  • Perbaiki pergeseran tata letak animasi dengan properti CSS transform + translate.
  • Tambahkan placeholder untuk konten dinamis (seperti AdSense) agar tidak bergeser.

6. Aktifkan Caching Seluler

Banyak plugin cache memiliki opsi untuk caching seluler .

Jika plugin cache Anda tidak mendukung caching seluler, Anda mungkin ingin beralih ke yang mendukung. File cache terpisah untuk perangkat seluler menyimpan elemen khusus seluler dan biasanya hanya aktif jika Anda menggunakan plugin seluler (WP Touch, WP Mobile Detect, tema seluler JetPack). Atau jika Anda menggunakan LiteSpeed ​​Cache, itu harus aktif jika mode tamu dan pengoptimalan tamu aktif.

Contoh pengaturan Mengaktifkan Mobile Cache pada plugin WP Rocket
Contoh pengaturan Mengaktifkan Mobile Cache pada plugin WP Rocket

Menghardcode (memasukkan secara langsung ke dalam kode) header, footer, dan sidebar pada mobile device website bisa dilakukan sebagai salah satu opsi dalam pembuatan website. Namun, hal ini perlu dipertimbangkan dengan baik karena bisa memengaruhi fleksibilitas dan kemudahan pengelolaan website di masa depan.

Beberapa keuntungan dari menghardcode header, footer, dan sidebar pada website mobile antara lain:

  • Lebih cepat dalam memuat website, karena tidak perlu memuat kode untuk menampilkan header, footer, dan sidebar secara terpisah
  • Memudahkan pengembang website untuk mengontrol tampilan secara konsisten di seluruh halaman website

Namun, ada beberapa kelemahan dari menghardcode header, footer, dan sidebar pada website mobile, antara lain:

  • Kurang fleksibel, karena sulit untuk mengubah tampilan header, footer, dan sidebar tanpa harus mengedit kode secara langsung
  • Sulit untuk menambahkan atau menghapus elemen dari header, footer, atau sidebar dengan mudah
  • Tidak responsif, sehingga tampilan header, footer, dan sidebar bisa terlihat berbeda-beda di berbagai perangkat mobile dengan ukuran layar yang berbeda.

Oleh karena itu, sebelum memutuskan untuk menghardcode header, footer, dan sidebar pada mobile device website, sebaiknya dipertimbangkan dengan matang dan memperhatikan kebutuhan website serta kemampuan pengelola website dalam melakukan perubahan di masa depan. Jika fleksibilitas dan kemudahan pengelolaan menjadi prioritas, maka sebaiknya menggunakan teknik yang lebih responsif seperti menggunakan framework CSS atau template yang responsif.

Memakai page builder seperti Elementor dan Divi lambat (ya, bahkan di ponsel).

Mereka menambahkan CSS, JavaScript, dan font ekstra ke situs desktop/seluler Anda. Hal terbaik adalah menggunakan Gutenberg (GeneratePress, Kadence, Blocksy) atau Oxygen. Tetapi jika Anda perlu menyimpan pembuat halaman Anda, Anda setidaknya harus mengkodekan header, footer, dan sidebar Anda di CSS sehingga tidak menggunakan kode yang membengkak dari pembuat halaman, karena ini akan muncul di seluruh situs web.

Starter template untuk perbandingan assets awal
Starter template untuk perbandingan assets awal

8. Turunkan Kualitas Gambar Pada Koneksi Lambat

Jika website Anda memiliki gambar yang besar dan memerlukan waktu lama untuk dimuat pada koneksi lambat di perangkat mobile, ada beberapa cara untuk menurunkan kualitas gambar sehingga website bisa dimuat lebih cepat. Berikut adalah beberapa opsi yang dapat dilakukan:

  1. Mengompres gambar: Mengurangi ukuran gambar dengan mengompresinya tanpa mengorbankan kualitas gambar. Ada beberapa alat yang dapat membantu melakukan kompresi gambar secara online seperti TinyPNG dan Compressor.io.
  2. Mengubah format gambar: Mengubah format gambar dari format yang lebih besar seperti PNG atau TIFF menjadi format yang lebih kecil seperti JPEG. Format gambar JPEG memiliki ukuran file yang lebih kecil dan kualitas gambar yang masih bagus.
  3. Mengurangi resolusi gambar: Mengurangi resolusi gambar dapat membantu mengurangi ukuran file gambar. Namun, pastikan untuk tidak mengurangi resolusi gambar terlalu banyak sehingga kualitas gambar tetap terjaga.
  4. Menggunakan lazy loading: Lazy loading adalah teknik yang memuat gambar hanya ketika diperlukan oleh pengguna. Ini dapat membantu mengurangi waktu pemuatan halaman web dan meningkatkan kecepatan website.

Beberapa plugin pengoptimalan gambar (seperti Optimole ) dapat menurunkan kualitas gambar saat pengunjung menggunakan koneksi yang lambat. Jika koneksi lambat, ini menurunkan kualitas gambar ke tingkat kompresi 40%. Waktu muat atau kualitas gambar – mana yang lebih penting?

Optimole Network Based Optimizations - Pengaturan untuk mengaktifkan
Optimole Network Based Optimizations – Pengaturan untuk mengaktifkan

Mirage juga melakukan ini jika Anda menggunakan Cloudflare Pro.

Cloudflare Mirage namun perlu Update ke Pro
Cloudflare Mirage namun perlu Update ke Pro

Dengan mengurangi kualitas gambar pada koneksi lambat di perangkat mobile, website bisa dimuat lebih cepat sehingga pengalaman pengguna lebih baik. Namun, pastikan untuk tidak mengurangi kualitas gambar terlalu banyak sehingga gambar tetap terlihat jelas dan berkualitas.

9. Tambahkan Tombol “Muat Lebih Banyak Komentar” Di Seluler

Menambahkan tombol “Muat Lebih Banyak Komentar” di seluler dapat membantu meningkatkan pengalaman pengguna dan kecepatan website. Saat jumlah komentar pada suatu halaman meningkat, halaman tersebut memerlukan waktu yang lebih lama untuk dimuat, yang dapat mengganggu pengalaman pengguna.

Dengan menambahkan tombol “Muat Lebih Banyak Komentar”, pengguna hanya perlu memuat beberapa komentar pada awalnya dan dapat memuat komentar tambahan secara bertahap dengan mengklik tombol “Muat Lebih Banyak Komentar”. Ini akan membantu meningkatkan kecepatan pemuatan halaman web dan membuat halaman menjadi lebih responsif.

Berikut adalah beberapa tips dalam menambahkan tombol “Muat Lebih Banyak Komentar” di seluler:

  1. Gunakan teknik AJAX: Teknik AJAX memungkinkan untuk memuat komentar tambahan tanpa harus memuat ulang halaman web secara keseluruhan. Hal ini dapat membantu meningkatkan kecepatan pemuatan halaman dan pengalaman pengguna.
  2. Pertimbangkan lokasi tombol: Pastikan tombol “Muat Lebih Banyak Komentar” ditempatkan dengan strategis dan mudah diakses oleh pengguna. Sebaiknya letakkan tombol tersebut di bawah daftar komentar yang sudah dimuat dan dalam posisi yang mudah dijangkau oleh pengguna.
  3. Berikan indikator: Berikan indikator ketika pengguna menekan tombol “Muat Lebih Banyak Komentar”, seperti ikon loading atau teks “memuat”, sehingga pengguna tahu bahwa website masih memuat data tambahan.

Dengan menambahkan tombol “Muat Lebih Banyak Komentar” di seluler, pengguna dapat memuat komentar tambahan secara bertahap dan meningkatkan kecepatan website. Namun, pastikan untuk menguji dan menyesuaikan tampilan tombol tersebut agar sesuai dengan kebutuhan pengguna.

10. Gunakan Plugin Cache yang Mengatasi Data Web Lebih Baik

Menggunakan plugin cache pada website dapat membantu meningkatkan kecepatan website dengan menyimpan data sementara pada perangkat pengguna. Plugin cache dapat membantu mengurangi waktu pemuatan halaman dengan menyimpan data dan file yang sering diminta oleh pengguna.

Ada banyak plugin dan bisa disesuaikan dengan website terkait cache.

FlyingPress dan LiteSpeed ​​Cache menyelamatkan inti web vital lebih baik. WP Rocket Plugin cache untuk WordPress yang mudah digunakan dan menawarkan banyak fitur canggih seperti kompresi file, pengurangan jumlah permintaan HTTP, dan banyak lagi. Autoptimize adalah plugin WordPress yang digunakan untuk mempercepat kecepatan pemuatan halaman website dengan mengoptimalkan dan memadatkan kode CSS, JavaScript, dan HTML. Plugin ini dapat membantu mengurangi jumlah permintaan HTTP yang diperlukan untuk memuat halaman web dan meningkatkan kinerja website secara keseluruhan.

11. Mencoba Cache Halaman Penuh, Cache Objek, OPcache

Dalam upaya untuk meningkatkan kecepatan website, ada beberapa jenis cache yang dapat digunakan, yaitu cache halaman penuh, cache objek, dan OPcache.

  1. Cache Halaman Penuh

Cache halaman penuh atau full page cache merupakan teknik caching yang menyimpan halaman web secara keseluruhan dalam cache, termasuk header, footer, dan konten. Saat pengguna mengakses halaman yang telah disimpan dalam cache, maka halaman tersebut akan dimuat lebih cepat karena tidak perlu memuat konten dari server.

Untuk mengaktifkan cache halaman penuh pada website, dapat menggunakan plugin cache seperti WP Fastest Cache, W3 Total Cache, atau WP Super Cache. Plugin cache ini dapat menghasilkan file HTML yang disimpan sementara untuk mengurangi waktu pemuatan halaman.

  1. Cache Objek

Cache objek digunakan untuk menyimpan data yang sering diminta oleh pengguna, seperti hasil pencarian, daftar produk, atau komentar. Dengan menggunakan cache objek, website dapat mempercepat waktu pemuatan halaman dengan mengurangi waktu pengambilan data dari server.

Untuk mengaktifkan cache objek pada website, dapat menggunakan plugin cache seperti WP Redis atau memanfaatkan teknologi cache di luar WordPress seperti memcached atau Redis.

Redis memcache di cpanel
Redis memcache di cpanel
  1. OPcache

OPcache adalah cache yang menyimpan kode PHP yang telah diproses sebelumnya pada memori server. Dengan menggunakan OPcache, waktu yang dibutuhkan untuk mengambil dan memproses kode PHP dapat dikurangi.

OPcache sudah termasuk pada instalasi PHP 5.5 ke atas dan dapat diaktifkan melalui konfigurasi PHP di server.

OPcache pengaturan di cpanel
OPcache pengaturan di cpanel

Dalam mengoptimalkan kecepatan website, penggunaan cache halaman penuh, cache objek, dan OPcache dapat membantu meningkatkan kinerja website secara keseluruhan. Namun, pastikan untuk melakukan pengaturan dengan benar dan menguji kecepatan website setelah menggunakan cache.

12. Periksa Responsivitas Situs Anda Secara Manual

Periksa responsivitas situs secara manual adalah langkah penting untuk memastikan bahwa situs Anda dapat diakses dan digunakan dengan baik pada berbagai perangkat dan ukuran layar. Berikut adalah beberapa langkah yang dapat dilakukan untuk melakukan pemeriksaan responsivitas situs secara manual:

  1. Gunakan perangkat berbeda: Pastikan untuk memeriksa situs Anda pada perangkat yang berbeda, seperti smartphone, tablet, dan desktop. Hal ini memungkinkan Anda untuk melihat bagaimana situs Anda ditampilkan pada berbagai ukuran layar.
  2. Periksa orientasi layar: Pada perangkat mobile, pastikan untuk memeriksa situs Anda pada kedua orientasi layar, baik dalam mode potrait maupun landscape.
  3. Periksa tampilan halaman: Pastikan bahwa halaman situs Anda ditampilkan dengan baik pada semua perangkat, termasuk gambar dan konten.
  4. Periksa navigasi: Pastikan bahwa navigasi situs Anda mudah digunakan pada semua perangkat, termasuk menu, tombol, dan tautan.
  5. Periksa kecepatan pemuatan halaman: Pastikan bahwa situs Anda memuat dengan cepat pada semua perangkat, termasuk pada koneksi internet yang lambat.
  6. Tes fungsionalitas: Pastikan bahwa semua fitur situs Anda berfungsi dengan baik pada semua perangkat, termasuk formulir, tampilan produk, dan tautan.
  7. Uji responsivitas dengan alat bantu: Selain melakukan pemeriksaan secara manual, Anda juga dapat menggunakan alat bantu seperti Responsinator atau BrowserStack untuk menguji responsivitas situs pada berbagai perangkat dan ukuran layar.
Cek Responsive Manual
Cek Responsive Manual

Dalam melakukan pemeriksaan responsivitas situs secara manual, pastikan untuk melihat situs Anda dari perspektif pengguna dan memastikan bahwa situs Anda dapat diakses dan digunakan dengan baik pada semua perangkat. Hal ini akan meningkatkan pengalaman pengguna dan membantu meningkatkan kinerja situs Anda.

13. Perbaiki Kesalahan Pengalihan Seluler

Untuk memperbaiki kesalahan pengalihan seluler pada perangkat seluler, berikut adalah beberapa langkah yang bisa Anda coba:

  1. Pastikan bahwa jaringan seluler Anda diaktifkan dan dalam keadaan stabil. Jika Anda memiliki masalah jaringan seluler, cobalah untuk memulai ulang perangkat seluler atau memperbarui pengaturan jaringan seluler.
  2. Periksa pengaturan pengalihan panggilan di perangkat seluler Anda. Pastikan bahwa pengalihan panggilan diaktifkan dan ditetapkan untuk mengalihkan panggilan ke nomor yang benar.
  3. Pastikan bahwa nomor tujuan yang Anda gunakan untuk pengalihan panggilan atau pesan teks benar dan valid. Jika perlu, periksa kembali nomor tersebut dan pastikan bahwa nomor tersebut diaktifkan dan dalam keadaan baik.
  4. Pastikan bahwa perangkat seluler Anda memiliki pembaruan perangkat lunak terbaru. Jika tidak, perbarui perangkat lunak Anda agar tetap up-to-date.
  5. Jika Anda masih mengalami kesalahan pengalihan seluler setelah mencoba langkah-langkah di atas, coba reset pabrik perangkat seluler Anda. Namun, pastikan Anda melakukan cadangan data penting sebelum melakukan reset pabrik.

Jika Anda melihat kesalahan pengalihan di Wawasan PageSpeed, mungkin karena:

  • Anda mengubah ke HTTPS atau WWW dan tidak memperbarui tautan.
  • Anda menyiapkan Aturan Halaman di Cloudflare dengan URL penerusan.
  • Plugin yang dikodekan dengan buruk atau salah dikonfigurasi menyebabkan pengalihan.
  • Opsi SSL Cloudflare tidak kompatibel dengan konfigurasi server Anda (lihat tutorial ).

Jika menggunakan Cloudflare, Anda dapat menggunakan opsi pengalihan seluler mereka yang mengatakan “secara otomatis mengalihkan pengunjung perangkat seluler ke subdomain yang dioptimalkan untuk seluler. Pengalihan dilakukan di tepi jaringan Cloudflare, meningkatkan waktu muat dengan meniadakan bolak-balik ke server asal – ini sangat berharga di jaringan seluler, yang menyajikan konten lebih lambat daripada wifi.”

Avoid multiple page redirects
Atur Pengalihan Di Tingkat Server
Jika Anda memiliki subdomain seluler (atau pengalihan apa pun dalam hal ini), yang terbaik adalah mengaturnya di tingkat server sehingga tidak mengenai WordPress. Pengalihan tingkat server lebih cepat daripada plugin pengalihan.

Jika masalah ini masih berlanjut setelah mencoba langkah-langkah ini, disarankan untuk menghubungi penyedia layanan seluler Anda atau perusahaan perbaikan perangkat seluler terkait untuk mendapatkan bantuan lebih lanjut.

14. Jangan Gunakan AMP

AMP (Accelerated Mobile Pages) adalah suatu teknologi yang dirancang untuk mempercepat waktu muat halaman web di perangkat mobile. Teknologi ini dapat meningkatkan kinerja dan kecepatan halaman web pada perangkat mobile, sehingga memberikan pengalaman pengguna yang lebih baik.

Namun, terdapat beberapa pertimbangan ketika menggunakan teknologi AMP pada performa mobile device, antara lain:

  1. Kompatibilitas: Tidak semua halaman web atau fitur yang tersedia pada halaman web akan bekerja dengan baik dalam mode AMP, sehingga Anda harus memeriksa dengan cermat untuk memastikan bahwa situs web Anda dapat dijalankan dengan mode AMP.
  2. Pengembangan: Membangun halaman web menggunakan AMP memerlukan waktu dan usaha tambahan, terutama jika Anda memiliki banyak halaman yang perlu diubah ke dalam mode AMP.
  3. Penyesuaian: Mode AMP membatasi beberapa fungsi dan tampilan pada halaman web, sehingga tidak dapat menampilkan semua konten yang ingin Anda tampilkan pada situs web Anda.
Source: WP Speed Matters Facebook Group
Source: WP Speed Matters Facebook Group

Oleh karena itu, Anda perlu mempertimbangkan dengan cermat apakah menggunakan teknologi AMP sesuai dengan kebutuhan dan tujuan bisnis Anda, serta apakah teknologi tersebut dapat memberikan manfaat bagi pengguna Anda.

15. Berhentin Menggunakan Mainstream Hosts Dan Dapatkan <200ms TTFB

saran untuk menggunakan layanan hosting yang lebih khusus dan dioptimalkan untuk kecepatan, agar dapat mencapai Time To First Byte (TTFB) kurang dari 200 milidetik.

TTFB adalah waktu yang dibutuhkan oleh server untuk memproses permintaan HTTP dan mengirimkan balik respon pertama ke browser. Semakin kecil nilai TTFB, semakin cepat halaman web dapat dimuat dan ditampilkan di browser pengguna.

Layanan hosting mainstream biasanya memiliki banyak pelanggan dan di-hosting di server bersama, yang dapat mempengaruhi kecepatan dan kinerja situs web. Dalam hal ini, menggunakan layanan hosting khusus dan dioptimalkan untuk kecepatan dapat membantu mengurangi TTFB dan meningkatkan kinerja situs web Anda.

Namun, perlu diingat bahwa TTFB bukanlah satu-satunya faktor yang mempengaruhi kecepatan dan kinerja situs web. Ada banyak faktor lain yang juga perlu dipertimbangkan, seperti ukuran halaman, jumlah permintaan HTTP, penggunaan cache, optimasi gambar, dan sebagainya.

Berikut adalah 12 hal yang perlu diketahui tentang hosting dan TTFB (Time To First Byte):

1. Hosting adalah faktor utama kecepatan situs web.
2. TTFB adalah indikator kinerja hosting yang penting.
3. TTFB adalah bagian dari inti web vitals dan merupakan 40% dari LCP (Largest Contentful Paint).
4. TTFB juga mempengaruhi INP (Input Latency) karena latency merupakan bagian dari TTFB.
5. SpeedVitals menguji TTFB di 35 lokasi – gunakanlah alat ini.
6. Tes situs web Anda 3 kali untuk mendapatkan angka yang akurat di SpeedVitals.
7. Lakukan tes tersebut untuk memastikan caching dan CDN Anda berfungsi dengan baik.
8. Periksa rata-rata TTFB Anda di seluruh dunia pada tes SpeedVitals ketiga.
9. Google akan memberikan peringatan jika TTFB Anda lebih dari 600ms, tetapi kurang dari 200ms lebih baik.
10. PageSpeed Insights (dan alat pengujian lainnya) hanya menguji TTFB di 1 lokasi.
11. WP Hosting Benchmark juga menguji kinerja hosting (ini hasil ujiannya).
12. Menggabungkan hosting yang baik/CDN adalah cara terbaik untuk meningkatkan TTFB (menggunakan hosting dengan spesifikasi yang lebih baik di atas Cloudflare Enterprise mengatasi 2 masalah sekaligus).

Oleh karena itu, untuk memastikan situs web Anda memiliki kinerja yang optimal, perlu mempertimbangkan berbagai faktor dan menggunakan kombinasi strategi yang sesuai untuk meningkatkan kecepatan dan kinerja situs web Anda.

17. Optimasi Plugin

Optimasi plugin pada WordPress sangat penting untuk meningkatkan kecepatan dan kinerja situs web Anda. Berikut adalah beberapa tips untuk mengoptimalkan plugin pada WordPress:

  1. Hapus plugin yang tidak diperlukan atau jarang digunakan.
  2. Hindari menggunakan plugin dengan fitur berlebihan atau yang terlalu kompleks.
  3. Gunakan plugin yang dikelola dengan baik dan terus diperbarui.
  4. Gunakan plugin yang ringan dan cepat, dan hindari plugin yang lambat atau tidak dioptimalkan.
  5. Batasi jumlah plugin yang digunakan, karena semakin banyak plugin yang digunakan, semakin lambat situs web Anda.
  6. Jangan menginstal plugin yang meniru fungsi yang sudah ada dalam WordPress atau tema Anda.
  7. Gunakan plugin caching untuk meningkatkan kecepatan dan performa situs web Anda.
  8. Gunakan plugin untuk memampatkan gambar dan mengoptimalkan gambar agar ukurannya lebih kecil dan waktu muatnya lebih cepat.
  9. Gunakan plugin untuk meminimalkan file JavaScript dan CSS pada situs web Anda.
  10. Hindari penggunaan plugin untuk mengakses situs web Anda dari jarak jauh atau untuk mengelola situs web secara jarak jauh.
  11. Gunakan plugin yang dirancang khusus untuk tugas tertentu, seperti SEO, formulir kontak, atau tugas pengoptimalan lainnya.
  12. Lakukan pengecekan plugin secara berkala untuk memastikan bahwa plugin masih diperbarui dan berfungsi dengan baik pada versi terbaru WordPress.
  13. Hindari penggunaan plugin gratis yang banyak iklan atau tawaran premium berbayar yang tidak relevan dengan situs web Anda.
  14. Gunakan plugin backup yang berkualitas untuk menghindari kehilangan data yang penting.
  15. Hindari penggunaan plugin untuk melakukan tugas yang bisa dilakukan dengan mudah secara manual, seperti pengeditan CSS atau HTML.
  16. Pastikan plugin yang digunakan tidak bertentangan dengan plugin lain atau tema WordPress yang digunakan.
  17. Jangan terlalu mengandalkan plugin, cobalah untuk memahami dan belajar cara memanfaatkan fungsi bawaan WordPress atau kode khusus untuk mengoptimalkan situs web Anda.

Pikirkan plugin juga tidak memperlambat situs seluler Anda? Periksa laporan cakupan Alat Dev Chrome situs web Anda dan cari plugin (serta file lainnya) dengan CSS/JavaScript yang berat.

Contoh: Coverage cek pada inspect elements browser
Contoh: Coverage cek pada inspect elements browser

Catatan

1. Hindari plugin CPU tinggi : Gunakan Query Monitor, WP Hive, dan laporan cakupan Chrome Dev Tools untuk menemukan plugin Anda yang paling lambat.
2. Ganti plugin CPU tinggi dengan plugin yang lebih cepat : diperlukan penelitian, tetapi sepadan.
3. Hapus tabel plugin yang tidak terpakai di database Anda : gunakan WP-Optimize untuk menghapus tabel yang ditinggalkan oleh plugin lama di database Anda. 
Anda mungkin juga menemukan fitur/modul plugin tertentu yang menambahkan banyak overhead database, jadi pertimbangkan kembali ini.
4. Nonaktifkan plugin di ponsel : gunakan Perfmatters untuk menonaktifkan plugin tertentu di ponsel.
WP Hive memungkinkan Anda melihat dampak plugin pada penggunaan memori/PageSpeed ​​di repo plugin WordPress
WP Hive memungkinkan Anda melihat dampak plugin pada penggunaan memori/PageSpeed ​​di repo plugin WordPress

18. Gunakan PHP 8

Menggunakan PHP 8 pada WordPress dapat meningkatkan kecepatan dan kinerja situs web Anda. PHP 8 adalah versi terbaru dari bahasa pemrograman PHP yang menawarkan peningkatan kecepatan dan pengoptimalan kinerja yang signifikan. Namun, sebelum Anda beralih ke PHP 8, pastikan bahwa tema dan plugin WordPress yang Anda gunakan mendukung versi PHP tersebut.

Berikut adalah beberapa hal yang perlu dipertimbangkan sebelum menggunakan PHP 8 pada WordPress:

  1. Pastikan bahwa tema WordPress dan plugin yang Anda gunakan mendukung PHP 8. Jika tidak, perbarui tema dan plugin atau cari alternatif lain yang kompatibel dengan PHP 8.
  2. Lakukan backup data situs web Anda sebelum mengubah versi PHP. Hal ini sangat penting untuk menghindari kehilangan data atau masalah yang tidak diinginkan.
  3. Perbarui WordPress ke versi terbaru sebelum beralih ke PHP 8.
  4. Jangan langsung beralih ke PHP 8 jika Anda sedang menggunakan versi PHP yang lebih lama. Naikkan secara bertahap dari versi PHP sebelumnya dan pastikan bahwa situs web Anda masih berfungsi dengan baik setelah setiap perubahan.
  5. Uji situs web Anda secara menyeluruh setelah beralih ke PHP 8 untuk memastikan bahwa semuanya berjalan dengan lancar dan tidak ada masalah yang timbul.
  6. Jika Anda memiliki masalah atau kesulitan saat menggunakan PHP 8 pada WordPress, cari bantuan dari pengembang web atau komunitas WordPress untuk mendapatkan solusi dan saran.
Cara menganti versi php 8.0
Cara menganti versi php 8.0

Dalam kesimpulannya, jika tema dan plugin WordPress yang Anda gunakan sudah mendukung PHP 8, maka mengupgrade ke versi ini dapat meningkatkan kecepatan dan kinerja situs web Anda. Namun, pastikan untuk melakukan backup dan pengujian sebelum melakukan perubahan pada situs web Anda.

19. Optimisasi file CSS/JavaScript

Untuk mengoptimalkan CSS dan JavaScript pada WordPress, ada beberapa tindakan yang dapat dilakukan:

  1. Menggunakan Plugin: Ada beberapa plugin yang dapat membantu mengoptimalkan CSS dan JavaScript pada WordPress, seperti WP Fastest Cache, W3 Total Cache, atau Autoptimize. Plugin-plugin ini dapat mempercepat waktu loading website dengan menggabungkan dan meminimalkan file CSS dan JavaScript.
  2. Menggunakan CSS dan JavaScript Minification: Minifikasi adalah proses mengurangi ukuran file CSS dan JavaScript dengan menghapus karakter kosong, mengompresi kode, dan menghilangkan komentar. Anda dapat menggunakan plugin atau layanan online seperti CSS Minifier atau JavaScript Minifier.
  3. Menggunakan CDN: CDN (Content Delivery Network) dapat mempercepat waktu loading website dengan menyediakan server yang lebih dekat dengan lokasi pengguna. Anda dapat menggunakan layanan CDN seperti Cloudflare atau MaxCDN untuk menyediakan konten website Anda secara lebih cepat.
  4. Menggunakan CSS Inline: Dengan menggunakan CSS inline, Anda dapat menghindari permintaan HTTP tambahan dan mempercepat waktu loading website. Anda dapat menggunakan plugin seperti WP Add Inline CSS untuk memasukkan CSS inline pada website Anda.
  5. Kode pihak ketiga adalah kode besar lainnya yang dapat menambahkan banyak kode JavaScript. Beberapa kode pihak ketiga dapat dihosting secara lokal (font, analytics, thumbnail YouTube). Kode pihak ketiga lainnya dapat ditunda di plugin cache Anda, sedangkan URL CDN dan font pihak ketiga dapat menggunakan petunjuk sumber daya prakoneksi. Video bisa dimuat lambat, Anda bisa menggunakan avatar lokal untuk komentar, dan sebagainya.
Contoh Kode pihak ketiga
Contoh Kode pihak ketiga

Dengan melakukan tindakan-tindakan di atas, Anda dapat membantu mempercepat waktu loading website WordPress Anda dan meningkatkan kinerja keseluruhan website.

Pertanyaan yang sering diajukan

Apa yang dimaksud dengan mobile speed website WordPress?

Mobile speed website WordPress adalah kecepatan website WordPress saat diakses melalui perangkat mobile. Kecepatan ini sangat penting untuk memastikan pengalaman pengguna yang optimal dan meningkatkan SEO website.

Bagaimana cara mengecek kecepatan mobile speed website WordPress?

Anda dapat menggunakan berbagai alat untuk mengecek kecepatan mobile speed website WordPress, seperti Google PageSpeed Insights, GTmetrix, atau Pingdom. Alat-alat ini akan memberikan skor dan rekomendasi untuk meningkatkan kecepatan website.

Apa yang dapat saya lakukan untuk meningkatkan kecepatan mobile speed website WordPress?

Anda dapat melakukan beberapa tindakan untuk meningkatkan kecepatan mobile speed website WordPress, seperti mengoptimalkan gambar, meminimalkan ukuran file CSS dan JavaScript, menggunakan cache, mengoptimalkan database, dan menggunakan plugin optimasi website.

Apa itu cache dan bagaimana cara menggunakan cache pada website WordPress?

Cache adalah teknologi yang memungkinkan website menyimpan salinan halaman untuk mengurangi waktu loading pada kunjungan berikutnya. Anda dapat menggunakan plugin cache seperti WP Fastest Cache atau W3 Total Cache untuk mengaktifkan cache pada website WordPress Anda.

Bagaimana cara mengoptimalkan gambar pada website WordPress?

Anda dapat mengoptimalkan gambar pada website WordPress dengan mengompresi gambar, menggunakan format gambar yang tepat seperti JPEG atau PNG, atau menggunakan plugin optimasi gambar seperti Smush atau ShortPixel.

Apa itu lazy loading dan bagaimana cara mengaktifkannya pada website WordPress?

Lazy loading adalah teknologi yang memungkinkan website memuat gambar atau konten lain hanya ketika dibutuhkan oleh pengguna. Anda dapat menggunakan plugin lazy loading seperti Lazy Load atau WP YouTube Lyte untuk mengaktifkan lazy loading pada website WordPress Anda.

Bagaimana cara menguji kecepatan seluler situs web saya?

Think With Google menggunakan koneksi 4G untuk menguji kecepatan seluler situs web Anda dan menyertakan rekomendasi yang dapat meningkatkan data vital web inti.

Mengapa situs seluler WordPress saya lambat?

Mungkin dari JavaScript berat yang disebabkan oleh plugin, pembuat halaman, dan kode pihak ketiga. Bisa juga dari gambar yang tidak responsif, kurangnya mobile caching, slider, dan TTFB yang lambat.

Mengapa skor PageSpeed ​​Insights seluler saya rendah?

PageSpeed ​​Insights menggunakan koneksi 3G yang lambat untuk menguji situs seluler Anda. 
Gabungkan ini dengan pelambatan dan ini sering menjadi alasan mengapa situs web memiliki skor yang lebih baik di desktop daripada seluler.

Plugin WordPress mana yang meningkatkan kecepatan seluler?

Gambar adaptif, plugin cache yang menangani vital web inti dengan lebih baik, dan Optimole adalah 3 plugin WordPress yang dapat meningkatkan kecepatan seluler.

Haruskah saya menggunakan halaman seluler yang dipercepat?

Kebanyakan orang di Grup Facebook tidak merekomendasikan AMP karena mengubah desain Anda dan bisa jadi sulit untuk bekerja dengan baik. 
Kinsta melaporkan konversi mereka turun 59% setelah menggunakan AMP dan akhirnya memutuskan untuk menonaktifkannya.