Daftar Periksa Pengoptimalan WordPress

Pengoptimalan WordPress adalah seni membuat situs web Anda berjalan secepat mungkin, meningkatkan pengalaman pengguna Anda, mengurangi biaya server, dan memiliki manfaat SEO.

Banyak penelitian menunjukkan bahwa pengunjung tidak ingin menunggu situs web dimuat, dan cenderung melompat dari situs web Anda jika terlalu lama memuat.

Situs web yang memuat cepat sangat penting bagi Anda jika Anda memiliki toko web dan ingin meningkatkan tingkat konversi Anda.

Pengujian di Amazon mengungkapkan hasil yang serupa: setiap peningkatan 100 ms dalam waktu buka Amazon.com menurunkan penjualan sebesar 1% (Kohavi dan Longbotham 2007)

Sumber: https://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

Kecepatan memuat situs web Anda juga sangat penting untuk peringkat Anda di Google, menjadikan pengoptimalan situs web sebagai bagian dari strategi SEO Anda.

Tapi, situs web saya dimuat dengan sangat cepat!

Tentu saja. Setidaknya untukmu. Tetapi apakah Anda mencoba mengunjungi situs web Anda untuk pertama kalinya dalam waktu yang lama?

Saat Anda bernavigasi di situs web Anda, sebagian besar akan di-cache di browser Anda. Jika Anda ingin mendapatkan pengalaman pertama kali, bersihkan cache atau gunakan browser yang sama sekali berbeda.

Ada banyak hal yang dapat dilakukan untuk meningkatkan kecepatan situs WordPress Anda, mari kita mulai.

Memperkecil skrip

Situs web WordPress adalah kombinasi dari HTML, CSS, JavaScript, dan citra. Kode HTML dimuat terlebih dahulu dan kemudian memiliki informasi tentang file lain dari lembar gaya CSS, file JavaScript, dan gambar.

Setiap file dimuat secara bergantian. Browser biasanya memiliki batas 2-4 “pipa”, artinya browser hanya akan memuat hingga 2-4 file sekaligus dari server tempat file dihosting.

Jika Anda melihat melalui kode HTML situs web WordPress Anda, Anda akan melihat banyak file .css dan .js yang berbeda. Masing-masing biasanya dari plugin yang berbeda, masing-masing menambahkan file .js atau .css ke dalam campuran.

Dalam beberapa kasus plugin bahkan akan menyuntikkan gaya JavaScript atau CSS langsung ke HTML Kebanyakan pengembang plugin WordPress atau penulis tema cukup pintar untuk tidak melakukan ini.

Ini hanya contoh dari situs WordPress biasa. Kode HTML memiliki tautan ke beberapa file lain. Dalam contoh sederhana ini 4 file JavaScript dimuat, satu per satu.

<script type=”text/javascript” src=”https://domain.com/wp-includes/js/jquery/jquery.js?ver=1.7.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/themes/Trim/js/socialite.min.js?ver=3.4.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/plugins/wp-greet-box/js/functions.js?ver=3.4.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/plugins/wp-greet-box/js/js-mode.js?ver=3.4.2″></script >

WordPress memiliki fungsi internal yang memungkinkan pembuat plugin dan tema untuk menyematkan file JavaScript dan CSS yang diperlukan.

wp_enqueue_script() dan wp_enqueue_style(). Nama-nama fungsi memberikan petunjuk yang kuat untuk apa yang mereka lakukan. Dengan menggunakan salah satu dari ini untuk menyematkan file yang diperlukan, pembuat plugin dan tema mengantrekan file mereka bersama dengan semua plugin lain dan bahkan WordPress itu sendiri.

Dimungkinkan juga untuk menginstruksikan fungsi dependensi apa pun dari perpustakaan lain, biasanya file JavaScript termasuk tergantung pada jQuery yang akan dimuat terlebih dahulu.

Saya biasanya menemukan dan menginstal plugin minifying, mengaktifkan dan kemudian melihat apakah ada yang rusak di situs. Dari sana saya pergi untuk menentukan apa sebenarnya yang gagal dan jika saya hanya perlu mengubah beberapa pengaturan untuk memperbaikinya.

Plugin pengecilan cenderung mengecualikan pengaturan untuk file tertentu yang tidak diputar dengan baik saat dimuat dengan orang lain atau untuk mengubah tempat file dimuat, di header atau footer dokumen.

$template_url=get_bloginfo('template_url');
wp_enqueue_script('cycle', $template_url."/js/jQuery.cycle.all.js", array('jquery'));
wp_enqueue_script('socialite', $template_url."/js/socialite.min.js", array('jquery'));
wp_enqueue_script('lazyload', $template_url."/js/jquery.lazyload.min.js", array('jquery'));

Catatan: Dalam contoh kode saya menyimpan url tema ke dalam variabel dan kemudian menguraikannya ke fungsi wp_enqueue_script. Ini mengurangi jumlah panggilan PHP dan/atau basis data yang diperlukan, menambah kecepatan.

Dalam upaya untuk kecepatan pemuatan yang ekstrem, saya dapat memilih untuk membuat hard-code jalur url absolut, tetapi ini akan membatasi tema hanya untuk satu domain, dan itu akan mempersulit penggunaan kembali kode di situs lain.

Setelah menginstal plugin minifying, JavaScript dan style sheet CSS sekarang digabungkan menjadi lebih sedikit panggilan HTTP.

<script type="text/javascript" src="https://cleverplugins.com/wp-content/plugins/bwp-minify/min/?f=wp-includes/js/jquery/jquery.js,wp-content/themes/Trim/js/socialite.min.js,wp-content/plugins/wp-greet-box/js/functions.js,wp-content/plugins/wp-greet-box/js/js-mode.js"></script>

Ini menggabungkan 4 file menjadi satu "file"/permintaan untuk browser Anda.

Saya telah menemukan situs web berbasis WordPress yang memuat 22 file .css serta 15 .js. Semua di halaman depan. Perubahan kecepatan bisa luar biasa jika Anda dapat mengurangi jumlah file eksternal.

Meskipun skrip minifying cenderung memiliki peningkatan kecepatan yang besar, itu juga salah satu teknik yang saya gunakan yang cenderung membawa sebagian besar masalah dalam pengaturan.

Optimalkan header.php

Header.php dalam tema Anda dipanggil di setiap halaman di situs WordPress Anda. File ini biasanya memiliki banyak elemen yang dapat dioptimalkan.

Contoh klasik adalah bloginfo('template_directory') yang biasanya dipanggil beberapa kali di header untuk mengembalikan url tema untuk menyertakan file eksternal.

Metode yang lebih efisien adalah membuat satu permintaan untuk url, dan kemudian menyimpannya sebagai variabel.

$template_directory = get_bloginfo('template_directory'); 

Url direktori tema sekarang disimpan dalam variabel $template_directory.

Lebih banyak contoh bagaimana meningkatkan efisiensi header.php dapat dibaca di blogpost WordPress header.php Optimasi Tips

Mengurangi jumlah plugin

Bagian penting lainnya dalam optimasi WordPress adalah menjaga jumlah plugin yang diaktifkan serendah mungkin. Banyak pengguna tergoda untuk menguji dan bereksperimen dengan berbagai plugin, yang memang merupakan salah satu keunggulan WordPress.

Namun, memiliki banyak plugin yang aktif dapat mengurangi kecepatan situs WordPress Anda. Banyak plugin memiliki satu fungsi yang dapat dengan mudah ditangani oleh sepotong kode yang dimasukkan ke functions.php Anda.

Dalam banyak kasus, Anda mungkin hanya memerlukan satu fungsi, tetapi plugin yang Anda gunakan memiliki beberapa opsi lain yang tidak pernah Anda gunakan.

Analisis setiap plugin di situs Anda, dan pastikan Anda membutuhkannya. Jika Anda tidak membutuhkannya atau fungsinya dapat diganti dengan kode functions.php, nonaktifkan dan hapus plugin.

Jangan gunakan gambar – gunakan CSS3

Desain situs web menggunakan gambar untuk membantu membuat antarmuka pengguna.

Setelah pengenalan CSS dan khususnya CSS3, banyak efek yang digunakan untuk antarmuka web dapat ditiru dengan menggunakan kode CSS dan HTML.

[box]Catatan: Sebagian besar efek ini tidak kompatibel di semua browser, khususnya Internet Explorer yang lebih lama (ya, selalu menjadi masalah turunan untuk pengembang web mana pun). Jika Anda ingin mengoptimalkan kecepatan situs web Anda, menggunakan efek CSS bisa menjadi solusi yang cepat dan tepat, tetapi bukan pilihan yang baik jika audiens utama klien menggunakan browser yang sudah ketinggalan zaman.[/box]

Jika Anda bekerja untuk klien yang menargetkan B2C (bisnis ke konsumen), Anda harus memeriksa Google Analytics mereka atau bertanya kepada mereka tentang jenis klien yang mereka miliki (atau ingin ditargetkan). Hal ini dapat mempengaruhi jika Anda dapat menggunakan efek CSS3 jika audiens pelanggan umumnya menggunakan browser yang sudah ketinggalan zaman.

Ketika Elegantthemes.com merilis versi baru dari plugin shortcode mereka, itu berdampak besar pada waktu pemuatan untuk pelanggan saya karena efek CSS3 dan menempatkan banyak gambar ke dalam satu sprite.

Folder shortcode/images, yang dulu berisi 90 gambar, sekarang memiliki satu sprite PNG, mengurangi ukuran keseluruhan dari 140kb menjadi 15kb!
(Itu sekitar 90% pengurangan ukuran.)

Gambar untuk sprite

Optimalisasi sprite dari tema yang ada bisa memakan waktu sedikit, tetapi juga dapat membawa peningkatan kecepatan yang besar untuk situs web Anda.

Sprite adalah gambar tunggal, biasanya dalam format .PNG yang memiliki beberapa elemen desain/tata letak visual Anda. Alih-alih memuat setiap elemen grafis satu per satu, semua gambar digabungkan menjadi satu atau sesedikit mungkin sprite.

Teknik ini hanya boleh digunakan untuk gambar yang digunakan untuk tata letak desain, dan bukan untuk gambar unggulan posting individu, thumbnail, dll. Satu-satunya gambar yang harus Anda coba masukkan ke dalam sprite adalah gambar yang digunakan di seluruh situs web Anda di setiap halaman.

Alih-alih memuat setiap gambar individu (permintaan http yang berbeda), semua gambar dikelompokkan ke dalam satu file, dan CSS yang menampilkan setiap gambar dimodifikasi untuk hanya mendorong latar belakang ke tempat di sprite bagian yang dibutuhkan.

SpriteMe.org adalah sumber yang sangat baik untuk membuat sprite. Metode terbaik adalah merencanakan ke depan dan membangun sprite Anda terlebih dahulu, tetapi jika Anda perlu memperbaiki situs web yang ada, situs spriteme.org memiliki bookmarklet yang membuat prosesnya sangat mudah.

Contoh gaya CSS dalam kombinasi dengan sprite:

.btn_top {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -10px;
}
.btn_top div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -40px;
}
.btn_bottom {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -70px;
}
.btn_bottom div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -100px;
}

Setiap gaya css mereferensikan file yang sama, tetapi posisi latar belakang berbeda, menunjukkan bagian gambar yang berbeda.

Distribusikan – Gunakan CDN

Ada dua manfaat utama menggunakan CDN (Content Distribution Network) untuk menghosting file tema dan elemen WordPress Anda.

File Anda dimuat lebih cepat karena berada di domain yang berbeda. Batas browser dari 2-4 unduhan file secara bersamaan adalah untuk setiap domain .

Jadi jika file Anda dihosting di domain yang berbeda, browser akan memuat file-file ini sendiri, bahkan membuat situs web Anda memuat lebih cepat serta mengurangi beban beban pada domain dan host Anda.

Manfaat lain adalah jika Anda menggunakan CDN utama, mereka akan memiliki server yang didistribusikan ke seluruh dunia yang kemudian mendeteksi dari mana pengunjung Anda berasal dan kemudian menyajikan file Anda dari server terdekat di jaringan mereka.

Server yang tepat untuk situs web Anda

Server yang menghosting situs web harus berlokasi dekat dengan audiens target. Jadi jika situs web ditargetkan untuk pasar Jerman, yang terbaik adalah mencari server dengan perusahaan hosting di Jerman, atau setidaknya di Eropa Tengah.

Ini berdampak besar bagi pengunjung Anda yang memuat dari server lebih dekat ke tempat mereka berada, membuat penjelajahan situs web Anda jauh lebih cepat.

Ini juga memiliki pengaruh SEO, tidak hanya karena situs memuat lebih cepat, tetapi juga karena menambah pentingnya situs web untuk audiens Jerman dan karenanya juga harus memiliki peringkat yang lebih tinggi.

Efek nyata dalam hal SEO masih bisa diperdebatkan tetapi jika Anda mencoba meningkatkan kinerja situs web Anda, ada baiknya dipertimbangkan.

Ini terkenal untuk SEO, tetapi begitu sebuah situs telah disiapkan, jarang melihatnya dipindahkan ke server lain karena alasan SEO murni. Perlu diingat untuk proyek Anda berikutnya.

Perbaiki 404 kesalahan

Anda harus menjalankan pemeriksaan situs web Anda secara teratur untuk memastikan Anda tidak memiliki halaman 404 – tidak ditemukan. Mengurangi tautan buruk di situs web Anda dapat mengurangi beban server dan akan memberikan pengalaman pengguna yang lebih baik. Tidak hanya tautan dan halaman yang hilang, terkadang kesalahan ketik atau kesalahan lainnya dapat menyebabkan konten tidak ditemukan di situs web Anda.

Tip: Lihat potongan kode ini untuk secara otomatis mengalihkan 301 halaman yang tidak ditemukan.

[kotak]
Halaman ini masih jauh dari selesai dan belum mencakup semua detail pengoptimalan WordPress. Tujuannya adalah untuk membuat sumber tips dan trik untuk mendapatkan hasil maksimal dari situs WordPress Anda.

Beberapa atau sebagian besar trik akan sulit diterapkan kecuali Anda seorang pengembang, tetapi setiap trik akan membuat situs WordPress Anda berjalan lebih cepat.
[/kotak]

Daftar periksa

Ini adalah daftar periksa, harap dicatat setiap situs web dan proyek berbeda. Tidak semua langkah dapat digunakan di semua situs web.