Cara Mempercepat Loading Website WordPress Agar Jadi Lebih Kencang

November 10, 2021

Simak Trik ini yaitu cara Mempercepat Loading Website WordPress Kalian Agar Jadi Lebih Kencang.

Tidak itu saja dalam artikel ini juga saya akan membahas penyebab website lambat, cara mengatasinya serta memberikan rekomendasi plugin WordPress gratis untuk mempercepat loading website agar bisa jadi lebih kencang.

Trik Cara Mempercepat Loading Website WordPress Agar Jadi Lebih Kencang

Trik tersebut saya buat berurutan sesuai dengan skala kepentingannya adalah:

  1. Spesifikasi hosting yang tinggi
  2. Lokasi hosting
  3. Gunakan cms
  4. Gunakan image yang proporsional
  5. Gunakan script sesuai kebutuhan
  6. Aktifkan caching
  7. Aktifkan compression
  8. Aktifkan minifty
  9. Tampilkan konten sesuai kebutuhan

1. Gunakan Spesifikasi Hosting Yang Bagus

Saya akan memulainya dari hosting, karena ini sangat fundamental, vital dan paling menjadi biang kerok penyebab website anda lambat.

Ini Penyebab Website Lambat Karena Faktor Hosting dan Cara Mengatasinya

Trik Mempercepat Loading Website WordPress Agar Jadi Lebih Kencang
Trik Mempercepat Loading Website WordPress Agar Jadi Lebih Kencang

Penyebab website lambat karena faktor hosting:

  1. Tipe dan spek prosesor yang kecil
  2. Ram kecil
  3. Pembatasan penggunaan resource (PHP.ini)
  4. Kecepatan internet hosting yang kecil
  5. Lokasi server yang terlalu jauh dari lokasi target pemasaran

Hosting atau server adalah sebuah komputer pada umumnya yang juga memiliki:

  1. Prosesor
  2. Ram

Untuk mempermudahnya maka dalam artikel ini bolehlah saya menyebutnya dengan isitilah "komputer" yang dijadikan hosting.

Komputer yang dijadikan hosting harus:

  1. Terhubung ke internet
  2. Diinstall aplikasi untuk menjalankan website seperti: server (contoh: Apache, Nginx, Litespeed), MySQL, PHP dan beberapa aplikasi tambahan lainnya.

Ingat! besarnya spesifikasi komputer hosting (tipe prosesor dan besarnya RAM) bukan berarti semakin kencang pula website anda karena komputer tersebut harus terhubung ke internet.

Setiap penyedia hosting memberikan kecepatan internet yang berbeda-beda.

Contoh: ada yang memberikan 200Mbps, 400Mbps bahkan 4Gbps yang dibagi (di share) kesetiap akun yang ada didalamnya.

Bisa anda bayangkan sendiri jika hosting memberikan kecepatan 200Mbps yang di share ke 100 akun berapa kecepatan internet hosting yang anda dapatkan?

200Mbps : 100 = 2Mbps.

Belum lagi dengan pembatasan-pembatasan penggunaan resource (seperti: prosesor, RAM, PHP) yang dilakukan penyedia hosting yang bisa menjadi penyebab website lambat.

Nah! cara mengatasi website yang lambat agar bisa diakses lebih cepat tentunya dengan menempatkan website anda didalam hosting yang spesifikasinya tidak hanya besar tetapi juga harus memiliki kecepatan internet yang kencang.

Cara Mempercepat Website Melalui Web Hosting

Cara mengatasi website lemot dengan mudah ialah dengan mengikuti pedoman besaran spesifikasi hosting yang ideal untuk sebuah website WordPress, dan itu adalah:

Untuk Web Hosting:

  1. 2 Cores (prosesor)
  2. 2GB (ram)
  3. 600Mbps (speed port bandwidth)
  4. Lokasi server berada di area target pemasaran anda

Untuk PHP.INI:

  1. memory_limit = 128M (lebih tinggi lebih baik)
  2. max_execution_time = 90 (lebih tinggi lebih baik)
  3. post_max_size = 64 (lebih tinggi lebih baik)
  4. upload_max_filesize = 64M (lebih tinggi lebih baik)
  5. max_input_time = 60 (lebih tinggi lebih baik)
  6. php_value max_input_vars = 3000

Mitos

Adalah MITOS kalau ada yang mengatakan kalau website mau cepat harus menggunakan server Nginx atau Litespeed karena kedua itu bisa meningkatkan kecepatan website.

Ingat! kecepatan website tidak berdasarkan 1 atau 2 faktor tetapi banyak faktor seperti yang telah saya sebutkan diatas ditambah faktor-faktor lain yang akan saya sampaikan dibawah dalam rangka untuk Mempercepat Loading Website WordPress.

2. Tweak dan Optimalkan Website WordPress

Ketika anda telah berhasil menempatkan website WordPress anda pada hosting (VPS) yang mantab, maka sekarang waktunya untuk mengoptimalkan website WordPress.

Bagaimana cara optimasi wordpress supaya lebih kencang? ikuti cara-cara dibawah ini yaitu:

  1. Gunakan Script (Javascript, CSS, Framework) sesuai kebutuhan
  2. Gunakan plugin sesuai dengan kebutuhan
  3. Gunakan file media (photo/image, video) sesuai peruntukan
  4. Tempatkan element website sesuai keperluan

Gunakan Script (Javascript, CSS, Framework) sesuai kebutuhan

Ketahuilah bahwa ketika anda mengunjungi sebuah website maka secara otomatis browser akan mengkonsumsi atau menyedot resource komputer atau mobilephone anda.

Hal inilah yang menyebakan website terasa berat dan lambat ketika diakses.

Hal itu terjadi karena website yang sedang kunjungi membutuhkan resource yang lebih besar untuk menjalankan script-script yang terinstall didalamnya.

Script tersebut bisa berupa framework/library javascript atau CSS, Font, Embeded, Iframe, Tracking script semacam Google Analytic, Facebok Pixel dan lain sebagainya.

Memasang framework atau library animasi semacam: Jquery dan GSAP pada tempat yang tidak dibutuhkan jelas bisa membuat website anda menjadi lambat secara keseluruhan.

Oleh sebab itu maka dibutuhkan keahlian khusus untuk bisa hanya menampilkan atau me-load script-script pada halaman-halaman atau taxonomy tertentu didalam website WordPress.

Seperti kita tahu WordPress terdiri dari:

  1. frontpage
  2. single
  3. page
  4. tag
  5. category
  6. archieve

Ketika anda ingin menampilkan animasi semacam: Slider, Carousel, AOS dsb menggunakan javascript, GSAP, animasi Jquery pada halaman frontpage maka cara mengatasi website yang lambat agar bisa diakses lebih cepat adalah dengan cara menempatkan script-script itu hanya load sesuai kebutuhannya atau hanya load di Frontpage saja.

Solusi dan cara mempercepat loading website WordPress dengan kondisi penggunaan animasi javascript adalah dengan menginstall plugin semacam Code Snippet, Script Organizer, Advanced Script dan sejenisnya.

Fungsi ketiga plugin tersebut adalah untuk mengkondisikan script-script tertentu hanya load di area-area tertentu saja sehingga tidak memberatkan website anda secara keseluruhan.

Gunakan plugin sesuai dengan kebutuhan

Menggunakan plugin secara serampangan bisa menjadi penyebab website lambat dan cara mengatasinya adalah dengan menggunakan plugin sesuai dengan kebutuhan.

Umumnya tindakan menginstall banyak plugin ini dipakai oleh pembuat website pemula. Atau anda yang baru belajar membuat website sendiri.

Mengatasi hal remeh dengan menginstall plugin adalah bukan solusi yang tepat dan bahkan kadang bisa membuat website anda menjadi lemot.

Tidak semua masalah akan kelar dengan menginstall plugin, anda masih bisa mencari snippet atau kode atau script yang banyak terdapat di blog-blog tutorial tentang WordPress.

Gunakan plugin Code Snippet untuk melakukan custom script pada website WordPress anda adalah pilihan yang tepat.

Karena dengan menggunakan Code Snippet anda bisa mengkustom script-script tertentu hanya load di area tertentu.

Gunakan file media (photo/image, video) sesuai peruntukan

File media seperti photo/image, video, font bisa menjadi penyebab website anda lambat karena:

  1. Ukuran file media terlalu besar
  2. Ukuram dimensi file media terlalu besar
  3. Format ekstensi file tidak mendukung

Cara mempercepat loading website WordPress dalam kontek file media adalah:

  1. Gunakan ekstensi file media yang direkomendasikan
  2. Buat ukuran besar file media dan dimensi file media sesuai dengan penayangannya

Extensi File

Google sangat merekomendasikan penggunaan media gambar berekstensi .webp.

Ukuran file media dengan ekstensi .webp lebih kecil dari file media .png atau bahkan .jpg sekalipun.

Download dan install software "right click image converter" klik disini sebagai solusi buat anda yang malas mengkonvert file media dari .jpg atau .png ke .webp.

Dengan menginstall software tersebut anda cukup lakukan: klik kanan pada file yang ingin di convert lalu pilih ekstensi file yang baru.

Ukuran dan Dimensi File Media

Yang disebut dengan ukuran dimensi file media adalah: width dan height (lebar dan tinggi).

Browser terbagi 3 kategori yaitu:

  1. PC atau laptop dengan lebar screen (screen resolution) diatas 1024 pixel
  2. Tablet dengan lebar (screen resolution) dibawah 1024 s/d 480px
  3. Mobile dibawah 480px

cara mengatasi website yang lambat agar bisa diakses oleh multiple device lebih cepat adalah dengan cara:

  1. Aktifkan scrcset pada script image atau
  2. Buat ukuran dimensi file media sesuai dengan peruntukan ketiga browser tersebut

Cara yang paling mudah adalah dengan mengaktifkan fungsi srcset image.

Theme WordPress modern seperti sekarang ini umumnya sudah menjalankan fungsi srcset image.

Tapi jika tidak maka anda harus membuatnya, caranya dengan menggunakan Code Snippet atau edit function.php pada themes untuk paste kode dibawah ini:

Pertama: Paste Kode Dibawah pada file function.php

add_theme_support( 'post-thumbnails' );

Kedua: tentukan ukuran image sesuai dengan keperluan atau sesuai dengan ukuran layout pada themes anda misal:

add_image_size( 'name-of-size', width, height, crop mode );

Kalau anda ingin membuat custom ukuran maka tentukan namanya, ukuran lebar dan tinggi dan mode crop.

Contoh:

Buat tiga ukuran dimensi image baru dengan ukuran:

  1. 480px x 300px untuk mobile device 1 kolom dengan nama: mob-dev-480
  2. 240px x 240px untuk mobile device 2 kolom dengan nama mob-dev-240
  3. 768px x 480px untuk tablet device 1 kolom dengan nama tab-dev-768
  4. 384px x 384px untuk tablet device 2 kolom dengan nama tab-dev-384
  5. 1120px x 500px untuk PC 1 kolom dengan nama pc-dev-1120
  6. 560px x 560px untuk PC 2 kolom dengan nama pc-dev-560

Maka tambahkan kode dibawah ini dibawah kode diatas:

add_image_size( 'mob-dev-480', 480, 300, true ); 
add_image_size( 'mob-dev-240', 240, 240, true ); 
add_image_size( 'tab-dev-768', 768, 480, true ); 
add_image_size( 'tab-dev-384', 384, 384, true ); 
add_image_size( 'pc-dev-1120', 1120, 500, true ); 
add_image_size( 'pc-dev-560', 560, 560, true ); 

Cara termudah lainnya adalah dengan menginstall plugin yang berfungsi untuk:

  1. Buat custom dimension
  2. Regenerate image

3. Install Plugin Untuk Mempercepat Loading Website

Nama Plugin WordPress Gratis untuk Mempercepat Loading Website adalah Autoptimize, WP Fastest Cache, WP Super Cache, WP Smush, W3 Total Cache, WP Super Cache, WP-Optimize – Cache, Clean, Compress, Cache Enabler, Asset CleanUp: Page Speed Booster.

Ingat! anda tidak harus menginstall lebih dari satu plugin.

Anda baru boleh menginstall lebih dari satu plugin jika fitur kedua plugin yang anda install itu berbeda.

Tetapi Anda bisa menggunakan satu atau dua plugin yang telah saya sebutkan diatas.

Misal install: Autoptimize + WP Fastest Cache.

Karena kedua plugin tersebut memiliki fungsi yang tidak sama, agar bisa saling melengkapi maka saya menginstallnya sekaligus.

Bagi yang tidak ingin menggunakan plugin, anda bisa paste kode dibawah ini pada file .htaccess yang fungsinya untuk mengaktifkan browser laverage caching.

Tapi ingat!! hanya apache server yang sudah mengaktifkan mod_expires dan mod_deflated saja yang bisa mengaktifkan browser lavarage caching ini.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/svg "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 1 year"
</IfModule>
## EXPIRES CACHING ##

# Fonts
# Add correct content-type for fonts
AddType application/vnd.ms-fontobject .eot 
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType application/font-woff2 .woff2

# Compress compressible fonts
# only uncomment if you dont have compression turned on already. Otherwise it will cause all other filestypes not to get compressed
# AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml

ExpiresActive on

# Add a far future Expires header for fonts
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/font-woff2  "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 year"

Credit: Photo by unsplash.com @kazmirova_m @ilyapavlov

7 Cara Mempromosikan Produk Barang Dan Jasa Di Internet

November 16, 2021

Trik Membuat Konten Marketing Dengan Lokal Bisnis Google

November 14, 2021

Cara Meningkatkan Omset Penjualan Usaha Online Yang Patut Anda Coba

November 13, 2021

Tutorial Belajar Digital Marketing Untuk Pemula Tanpa Kursus Gratis Dan Gacor

November 12, 2021

Cara Mempercepat Loading Website WordPress Agar Jadi Lebih Kencang

November 10, 2021

TriHarda Web Design

Jln. Mujahidin No.112
Kota Tangerang Banten 15156
0811 1122 3344

Close